workarea-haven_theme 1.3.0

data/app/views/workarea/storefront/orders/index.html.haml

@@ -0,0 +1,47 @@
+- @title = t('workarea.storefront.orders.order_status')
+
+.view
+  .login
+
+    %h1.visually-hidden= t('workarea.storefront.orders.order_status')
+
+    .grid.grid--flush
+      .grid__cell.grid__cell--50-at-medium
+        .login__section
+          .login__container
+            %h2.login__heading= t('workarea.storefront.orders.status_login')
+
+            = form_tag login_path, id: 'login_form', method: 'post', class: 'login__form' do
+              = hidden_field_tag :return_to, users_orders_path
+              .property
+                = label_tag :email, nil, class: 'property__name' do
+                  %span.property__text= t('workarea.storefront.users.email')
+                .value.value--block
+                  = email_field_tag :email, params[:email], class: 'text-box', autocapitalize: 'off', autocomplete: 'email', required: true, placeholder: t('workarea.storefront.forms.email_placeholder')
+                  = inline_svg('workarea/storefront/icons/email.svg', class: 'value__icon')
+              .property
+                = label_tag :password, nil, class: 'property__name' do
+                  %span.property__text= t('workarea.storefront.users.password')
+                .value.value--block
+                  = password_field_tag :password, nil, class: 'text-box', required: true, autocomplete: 'off'
+                  = inline_svg('workarea/storefront/icons/lock.svg', class: 'value__icon')
+              .grid.grid--auto.grid--middle
+                %p.grid__cell= button_tag t('workarea.storefront.users.login'), value: 'login', class: 'button button--large'
+                %p.grid__cell= link_to t('workarea.storefront.users.forgot_password'), forgot_password_path, class: 'text-button'
+
+      .grid__cell.grid__cell--50-at-medium
+        .login__section.login__section--order-lookup
+          .login__container
+
+            %h2.login__heading= t('workarea.storefront.orders.status_lookup')
+
+            = form_tag lookup_orders_path, id: 'single_order_lookup_form', method: 'post' do
+              .property
+                = label_tag :order_id, nil, class: 'property__name' do
+                  %span.property__text= t('workarea.storefront.orders.id')
+                .value.value--block= text_field_tag :order_id, params[:order_id], class: 'text-box', required: true, autocomplete: 'off', autocapitalize: 'off', autocorrect: 'off'
+              .property
+                = label_tag :postal_code, nil, class: 'property__name' do
+                  %span.property__text= t('workarea.storefront.orders.billing_address_postal_code')
+                .value.value--block= text_field_tag :postal_code, params[:postal_code], class: 'text-box', required: true, autocomplete: 'postal-code'
+              = button_tag t('workarea.storefront.orders.lookup_order'), value: 'lookup_order', class: 'button button--large'

data/app/views/workarea/storefront/orders/show.html.haml

@@ -0,0 +1,19 @@
+- @title = @order.id
+
+- content_for :breadcrumbs do
+  %p.breadcrumbs__node-group
+    %span.breadcrumbs__node{ itemprop: 'breadcrumb' }
+      = link_to t('workarea.storefront.layouts.home'), root_path, rel: 'home', class: 'breadcrumbs__link'
+    %span.breadcrumbs__node{ itemprop: 'breadcrumb' }
+      = link_to t('workarea.storefront.orders.order_status'), check_orders_path, class: 'breadcrumbs__link'
+    %span.breadcrumbs__node{ itemprop: 'breadcrumb' }
+      %span.breadcrumbs__text #{t('workarea.storefront.orders.order')} #{@order.id}
+
+.view
+  .page-content.page-content--order
+    .page-content__main.page-content__main--with-aside
+      %h1.visually-hidden= @order.id
+      = render 'workarea/storefront/orders/details', order: @order
+
+    .page-content__aside
+      = render 'workarea/storefront/orders/summary', order: @order

data/app/views/workarea/storefront/products/_media.html.haml

@@ -0,0 +1,42 @@
+.product-media.product-media--carousel
+  .product-media__container
+    - if product.images.length == 0
+      .product-media__primary-image
+        .product-media__primary-image-item
+          = link_to(product_image_url(product.primary_image, :zoom), target: '_blank', rel: 'noopener', class: 'product-details__primary-image-link', style: intrinsic_ratio_product_image_styles(product.primary_image)) do
+            = image_tag product_image_url(product.primary_image, :detail), alt: 'View Larger Image', class: 'product-details__primary-image-link-image'
+
+    - else
+      %ul.product-media__primary-image{ id: "#{product.id}_primary_media_carousel", data: { slick_slider: media_primary_image_slider_options(product.id) } }
+        - product.images.each_with_index do |image, index|
+          %li.product-media__primary-image-item
+            = link_to(product_image_url(image, :zoom), target: '_blank', rel: 'noopener', class: 'product-media__primary-image-link', style: intrinsic_ratio_product_image_styles(product.primary_image)) do
+              %picture
+                %source{ srcset: product_image_url(image, :detail), product_image_url(image, :detail) => '1x', product_image_url(image, :detail_retina) => '2x', media: "(min-width: #{Workarea.config.storefront_break_points[:medium]}px)" }
+                %source{ srcset: product_image_url(image, :detail_mobile), product_image_url(image, :detail_mobile) => '1x', product_image_url(image, :detail) => '2x' }
+                = image_tag product_image_url(image, :detail), alt: t('workarea.storefront.products.image_alt_attribute', name: product.name), class: 'product-media__primary-image-link-image'
+        - if product.videos.present? && product.thumbnail_videos?
+          - product.thumbnail_videos.each do |video|
+            %li.product-media__primary-image-item
+              = link_to(product_video_path(product.id, video.id), class: 'product-details__alt-image-link', target: '_blank', rel: 'noopener', data: { dialog_button: { dialog_options: { ui_dialog_options: { dialog_class: 'ui-dialog-video' } } }.to_json }) do
+                .product-video.product-video--thumbnail
+                  = inline_svg('workarea/storefront/icons/video_play.svg', class: 'svg-icon svg-icon--extra-large product-video__play-icon', title: t('workarea.storefront.products.watch_this_video'))
+                  - if video.thumbnail.present?
+                    = image_tag(video.thumbnail.url, alt: t('workarea.storefront.products.watch_this_video'), class: 'product-video__thumbnail--large')
+                  - else
+                    = image_tag(product_image_url(product.images.first, :detail), alt: t('workarea.storefront.products.watch_this_video'), class: 'product-video__thumbnail--large')
+
+
+      - if product.images.length > 1
+        %ul.product-media__alt-images{ id: "#{product.id}_alt_media_carousel", data: { slick_slider: media_alt_image_slider_options(product.id) } }
+          - product.images.each_with_index do |image, index|
+            %li.product-media__alt-image
+              - button_class = index == 0 ? 'product-media__alt-image-link product-media__alt-image-link--selected' : 'product-media__alt-image-link'
+              = link_to(product_image_url(image, :zoom), class: button_class, target: '_blank', rel: 'noopener', data: { alternate_image_button: { src: product_image_url(image, :detail) }.to_json }) do
+                = image_tag product_image_url(image, :detail_alt), alt: t('workarea.storefront.products.zoom')
+          = append_partials('storefront.product_details_alt_images', product: product)
+
+      - else
+        - if product.thumbnail_videos?
+          %ul.product-media__alt-images{ id: "#{product.id}_alt_media_carousel" }
+            = append_partials('storefront.product_details_alt_images', product: product)

data/app/views/workarea/storefront/products/_pricing.html.haml

@@ -0,0 +1,34 @@
+- cache "#{product.cache_key}/prices", expires_in: Workarea.config.cache_expirations.product_pricing_fragment_cache do
+  - if product.one_price?
+    %p.product-prices__price
+      - if product.show_sell_range?
+        %span= number_to_currency(product.sell_min_price)
+        %span – #{number_to_currency product.sell_max_price}
+      - else
+        %span= number_to_currency(product.sell_min_price)
+
+  - else
+
+    %p.product-prices__price
+      - if product.show_original_range?
+        %s.product-prices__price--original-range #{number_to_currency product.original_min_price} – #{number_to_currency product.original_max_price}
+      - else
+        %s.product-prices__price--original= number_to_currency product.original_min_price
+
+    - if product.on_sale?
+      %p.product-prices__price.product-prices__price--sale
+        - if product.show_sell_range?
+          %strong= number_to_currency(product.sell_min_price)
+          %strong – #{number_to_currency product.sell_max_price}
+        - else
+          %strong= number_to_currency(product.sell_min_price)
+
+    - else
+      %p.product-prices__price.product-prices__price--sale
+        - if product.show_sell_range?
+          %span= number_to_currency(product.sell_min_price)
+          %span – #{number_to_currency product.sell_max_price}
+        - else
+          %span= number_to_currency(product.sell_min_price)
+
+  = append_partials('storefront.product_pricing', product: product)

data/app/views/workarea/storefront/products/_rating.html.haml

@@ -0,0 +1,9 @@
+%p.rating{ title: "#{rating.round(2)} #{t('workarea.storefront.reviews.out_of')} #{t('workarea.storefront.reviews.stars', count: 5)}" }
+  - full_star_count.times do
+    = inline_svg 'workarea/storefront/icons/star.svg', class: 'rating__star'
+  - if half_star_size > 0
+    = inline_svg 'workarea/storefront/icons/half_star.svg', class: 'rating__star rating__star--half'
+  - empty_star_count.times do
+    = inline_svg 'workarea/storefront/icons/empty_star.svg', class: 'rating__star rating__star--empty'
+  %span.rating__text.visually-hidden
+    #{rating.round(2)} #{t('workarea.storefront.reviews.out_of')} #{t('workarea.storefront.reviews.stars', count: 5)}

data/app/views/workarea/storefront/products/_reviews.html.haml

@@ -0,0 +1,34 @@
+#reviews.product-detail-container__section.product-detail-container__section--reviews
+  .product-detail-container__section-overlay-controls
+    = button_tag value: 'back_to_product', type: 'button', class: 'text-button', data: { product_detail_tabs_close_overlay: '' } do
+      = inline_svg('workarea/storefront/icons/long_arrow.svg', class: 'product-detail-container__section-back-icon', title: t('workarea.storefront.layouts.navigate_back'))
+      = t('workarea.storefront.products.back_to_product')
+  .reviews
+    .product-detail-container__section-header
+      .reviews__header
+        %h2.product-detail-container__section-heading= t('workarea.storefront.reviews.reviews', count: product.reviews.length)
+        - if product.has_reviews?
+          .reviews__sort
+
+    .product-detail-container__section-content
+      - if product.has_reviews?
+        .reviews
+          %ol.reviews__review-group
+            - product.reviews.each do |review|
+              %li.reviews__review{ data: { product_review_section_entry: { rating: review.rating.to_f, createdAt: review.created_at.to_i }.to_json } }
+                = rating_stars(review.rating)
+
+                %h3.reviews__review-title= review.title
+                %p.reviews__review-body= review.body
+                .reviews__review-meta
+                  %p.reviews__review-author
+                    %span= review.user_info
+                  - if review.verified?
+                    %p.reviews__review-verified= t('workarea.storefront.reviews.verified_purchaser')
+                  %p.reviews__review-date= local_time(review.created_at, format: :long, itemprop: 'datePublished')
+      - else
+        %p= t('workarea.storefront.reviews.first_review_for_product', product: product.name)
+
+      .reviews__write-action= link_to t('workarea.storefront.reviews.write_a_review'), new_product_review_path(product), class: 'button', data: { dialog_button: '' }
+      - if display_purchase_requirement_message
+        %span.reviews__write-purchase-requirement= t('workarea.storefront.reviews.purchase_requirement')

data/app/views/workarea/storefront/products/_reviews_aggregate.html.haml

@@ -0,0 +1,13 @@
+- if product.has_reviews?
+  .reviews-aggregate
+    = link_to "#{product_path(product, product.browse_link_options)}#reviews", data: { scroll_to_button: '' }, class: 'reviews-aggregate__rating-link' do
+      = rating_stars(product.average_rating, aggregate: true)
+
+    %span.reviews-aggregate__count= product.total_reviews
+
+    = link_to "#{product_path(product, product.browse_link_options)}#reviews", data: { scroll_to_button: '' } do
+      %span.reviews-aggregate__read= t('workarea.storefront.reviews.read_reviews')
+
+- else
+  .reviews-aggregate
+    %p.reviews-aggregate__count= t('workarea.storefront.reviews.reviews', count: 0)

data/app/views/workarea/storefront/products/_summary.html.haml

@@ -0,0 +1,16 @@
+- cache "#{product.cache_key}/summary", expires_in: 75.minutes do
+  .product-summary__media
+    = link_to(product_path(product, product.browse_link_options), class: 'product-summary__media-link', style: intrinsic_ratio_product_image_styles(product.primary_image), data: { analytics_product_impression: product_impression_data(product), analytics: product_click_analytics_data(product).to_json }) do
+      %picture
+        %source{ srcset: product_image_retina_srcset(product.primary_image, :large_thumb, :large_thumb_retina), media: "(min-width: #{Workarea.config.storefront_break_points[:small_horizontal]}px)" }
+        %source{ srcset: product_image_retina_srcset(product.primary_image, :small_thumb, :small_thumb_retina)}
+        = image_tag(product_image_url(product.primary_image, :large_thumb), alt: product.name, class: 'product-summary__media-image')
+
+  .product-summary__divider
+    .product-summary__info
+      %p.product-summary__name= link_to product.name, product_path(product, product.browse_link_options), class: 'product-summary__name-link', data: { analytics: product_click_analytics_data(product).to_json }
+
+      .product-prices.product-prices--summary
+        = render 'workarea/storefront/products/pricing', product: product
+
+      = append_partials('storefront.product_summary', product: product)

data/app/views/workarea/storefront/products/_swatch_summary.html.haml

@@ -0,0 +1,20 @@
+- if product.try(:display_browse_swatches?)
+  .swatch-options.swatch-options--small
+    %ul.swatch-options__group
+      - product.browse_swatch_option.selections.take(3).each do |selection|
+        - swatch = product.swatches_by_option[selection.optionize]
+        - swatch_content = render_browse_swatch(selection, swatch)
+
+        - if product.current_browse_selection?(selection)
+          %li.swatch-options__swatch.swatch-options__swatch--selected>
+            = swatch_content
+        - else
+          %li.swatch-options__swatch>
+            - selection_options = option_selection_url_for(product, product.browse_swatch_option, selection)
+            - product_path = product_path(product, product.browse_link_options.merge(selection_options))
+
+            = link_to product_path, title: selection, class: 'swatch-options__swatch-button', data: { product_summary_swatch: { url: summary_product_path(product, selection_options) }.to_json } do
+              = swatch_content
+      - if product.browse_swatch_option.selections.count > 3
+        %li.swatch-options__swatch.swatch-options__swatch--truncated
+          %span.swatch-options__swatch-button-text +

data/app/views/workarea/storefront/products/_video_thumbnail.html.haml

@@ -0,0 +1,11 @@
+- if product.videos.present?
+  - product.videos.each do |video|
+    - if video.display_option == 'thumbnail'
+      %li.product-media__alt-image
+        = link_to(product_video_path(product.id, video.id), class: 'product-details__alt-image-link', target: '_blank', rel: 'noopener', data: { dialog_button: { dialog_options: { ui_dialog_options: { dialog_class: 'ui-dialog-video' } } }.to_json }) do
+          .product-video.product-video--thumbnail
+            = inline_svg('workarea/storefront/icons/video_play.svg', class: 'svg-icon svg-icon--extra-large product-video__play-icon', title: t('workarea.storefront.products.watch_this_video'))
+            - if video.thumbnail.present?
+              = image_tag(video.thumbnail.url, alt: t('workarea.storefront.products.watch_this_video'), class: 'product-video__thumbnail')
+            - else
+              = image_tag(product_image_url(product.images.first, :small_thumb), alt: t('workarea.storefront.products.watch_this_video'), class: 'product-video__thumbnail')

data/app/views/workarea/storefront/products/package_show.html.haml

@@ -0,0 +1,50 @@
+- @title = @product.browser_title
+- @breadcrumbs = @product.breadcrumbs
+- params[:sku] = nil # HACK: avoid issues with current_sku
+
+- content_for :head do
+  - cache "#{@product.cache_key}/head", expires_in: 1.hour do
+    %meta{ property: 'global-id', content: @product.to_global_id.to_param }
+    = append_partials('storefront.product_head', product: @product)
+
+    %link{ href: product_path(@product), rel: 'canonical' }
+
+    - unless @product.meta_description.blank?
+      %meta{ name: :description, content: strip_tags(@product.meta_description) }
+
+    %meta{ property: 'og:url', content: url_for }
+    %meta{ property: 'og:title', content: @product.name }
+    %meta{ property: 'og:type', content: 'product' }
+    - @product.images.each do |image|
+      %meta{ property: 'og:image', content: product_image_url(image, :detail) }
+    - unless @product.meta_description.blank?
+      %meta{ property: 'og:description', content: strip_tags(@product.meta_description) }
+
+- cache "#{@product.cache_key}/show", expires_in: 1.hour do
+
+  = render_schema_org(product_schema(@product, related_products: @product.recommendations))
+
+  .view
+    .product-detail-container.product-detail-container--package{ data: { analytics: product_view_analytics_data(@product).to_json } }
+
+      .product-details{ class: "product-details--#{@product.template}" }
+        = render "workarea/storefront/products/templates/#{@product.template}", product: @product
+
+      .product-detail-packaged-products{ class: "product-detail-packaged-products--#{@product.template}" }
+        - @product.packaged_products.each do |product|
+          .product-detail-packaged-products__container{ data: { packaged_product_id: product.id } }
+            .product-details{ class: "product-details--#{product.template}", data: { analytics: product_view_analytics_data(product).to_json } }
+              = render "workarea/storefront/products/templates/#{product.template}", product: product
+
+      = append_partials('storefront.product_show', product: @product)
+
+      - if @product.recommendations.any?
+        .recommendations.recommendations--full-bleed
+          .content-wrapper
+            %h2.recommendations__heading= t('workarea.storefront.recommendations.heading')
+
+            .grid{ data: { analytics: product_list_analytics_data('Product Recommendations').to_json } }
+              - @product.recommendations.each do |product|
+                .grid__cell.grid__cell--50.grid__cell--25-at-medium
+                  .product-summary.product-summary--small
+                    = render 'workarea/storefront/products/summary', product: product

data/app/views/workarea/storefront/products/show.html.haml

@@ -0,0 +1,95 @@
+- @title = @product.browser_title
+- @breadcrumbs = @product.breadcrumbs
+
+- content_for :head do
+  - cache "#{@product.cache_key}/head", expires_in: Workarea.config.cache_expirations.product_show_fragment_cache do
+    %meta{ property: 'global-id', content: @product.to_global_id.to_param }
+    = append_partials('storefront.product_head', product: @product)
+
+    %link{ href: product_url(@product), rel: 'canonical' }
+
+    %meta{ name: :description, content: strip_tags(@product.meta_description) }
+
+    %meta{ property: 'og:url', content: url_for(only_path: false) }
+    %meta{ property: 'og:title', content: @product.name }
+    %meta{ property: 'og:type', content: 'product' }
+    - @product.images.each do |image|
+      %meta{ property: 'og:image', content: product_image_url(image, :detail) }
+      %meta{ property: 'og:image:secure_url', content: product_image_url(image, :detail) }
+    %meta{ property: 'og:description', content: strip_tags(@product.meta_description) }
+
+- cache "#{@product.cache_key}/show", expires_in: Workarea.config.cache_expirations.product_show_fragment_cache do
+
+  = render_schema_org(product_schema(@product, related_products: @product.recommendations))
+
+  .view
+    .product-detail-container{ itemscope: true, itemtype: 'http://schema.org/Product', data: { analytics: product_view_analytics_data(@product).to_json } }
+
+      .product-details{ class: "product-details--#{@product.template}" }
+        = render "workarea/storefront/products/templates/#{@product.template}", product: @product
+        = render "workarea/storefront/products/badges", product: @product
+
+      .product-detail-container__tabs
+        - if @product.description.present?
+          .product-detail-container__tab
+            = link_to t('workarea.storefront.products.description'), '#description', class: 'product-detail-container__tab-link', data: { product_detail_tabs: '' }
+        - if @product.details.present?
+          .product-detail-container__tab
+            = link_to t('workarea.storefront.products.information_header'), '#information', class: 'product-detail-container__tab-link', data: { product_detail_tabs: '' }
+        - if @product.embedded_videos?
+          .product-detail-container__tab
+            = link_to t('workarea.storefront.products.videos'), '#videos', class: 'product-detail-container__tab-link', data: { product_detail_tabs: '' }
+        .product-detail-container__tab
+          = link_to t('workarea.storefront.reviews.heading'), '#reviews', class: 'product-detail-container__tab-link', data: { product_detail_tabs: '' }
+
+      - if @product.description.present?
+        #description.product-detail-container__section.product-detail-container__section--description
+          .product-details-container__section-header
+            .product-detail-container__section-overlay-controls
+              = button_tag value: 'back_to_product', type: 'button', class: 'text-button', data: { product_detail_tabs_close_overlay: '' } do
+                = inline_svg('workarea/storefront/icons/long_arrow.svg', class: 'product-detail-container__section-back-icon', title: t('workarea.storefront.layouts.navigate_back'))
+                = t('workarea.storefront.products.back_to_product')
+            %h2.product-detail-container__section-heading= t('workarea.storefront.products.description')
+          .product-detail-container__section-content
+            .product-detail-container__description!= @product.description
+            = append_partials('storefront.product_description', product: @product)
+
+      - if @product.details.present?
+        #information.product-detail-container__section.product-detail-container__section--information
+          .product-details-container__section-header
+            .product-detail-container__section-overlay-controls
+              = button_tag value: 'back_to_product', type: 'button', class: 'text-button', data: { product_detail_tabs_close_overlay: '' } do
+                = inline_svg('workarea/storefront/icons/long_arrow.svg', class: 'product-detail-container__section-back-icon', title: t('workarea.storefront.layouts.navigate_back'))
+                = t('workarea.storefront.products.back_to_product')
+            %h2.product-detail-container__section-heading= t('workarea.storefront.products.information_header')
+          .product-detail-container__section-content
+            - @product.details.each do |attribute, values|
+
+              %p.product-detail-container__attribute
+                %span.product-detail-container__attribute-name #{attribute}:
+                - values.each do |value|
+                  %span.product-detail-container__attribute-value= value
+
+      - if @product.embedded_videos?
+        #videos.product-detail-container__section.product-detail-container__section--videos
+          .product-details-container__section-header
+            .product-detail-container__section-overlay-controls
+              = button_tag value: 'back_to_product', type: 'button', class: 'text-button', data: { product_detail_tabs_close_overlay: '' } do
+                = inline_svg('workarea/storefront/icons/long_arrow.svg', class: 'product-detail-container__section-back-icon', title: t('workarea.storefront.layouts.navigate_back'))
+                = t('workarea.storefront.products.back_to_product')
+            %h2.product-detail-container__section-heading= t('workarea.storefront.products.videos')
+          .product-detail-container__section-content
+            = render 'workarea/storefront/products/video_link', product: @product
+
+      = append_partials('storefront.product_show', product: @product)
+
+      - if @product.recommendations.any?
+        .recommendations.recommendations--full-bleed
+          .content-wrapper
+            %h2.recommendations__heading= t('workarea.storefront.recommendations.heading')
+
+            .grid{ data: { analytics: product_list_analytics_data('Product Recommendations').to_json } }
+              - @product.recommendations.each do |product|
+                .grid__cell.grid__cell--50.grid__cell--25-at-medium
+                  .product-summary.product-summary--small
+                    = render 'workarea/storefront/products/summary', product: product

data/app/views/workarea/storefront/products/templates/_family.html.haml

@@ -0,0 +1,28 @@
+.product-details__right-column
+  .product-details__header
+    %h1.product-details__name= product.name
+
+    %p.product-details__id
+      %span= product.id
+    = render 'workarea/storefront/products/reviews_aggregate', product: product
+
+.product-details__left-column
+  = render 'workarea/storefront/products/media', product: product
+
+.product-details__right-column
+  .product-prices.product-prices--details
+    = render 'workarea/storefront/products/pricing', product: product
+
+  - if product.description.present?
+    .product-details__description
+      %p= truncated_product_description(product, t('workarea.storefront.products.read_more'))
+
+  = form_tag package_cart_items_path, method: 'post', class: 'product-details__add-to-cart-form', data: { dialog: { dialogOptions: { closeAll: true, initModules: true } }, analytics: add_to_cart_analytics_data(product).to_json } do
+    = hidden_field_tag :product_id, product.id, id: dom_id(product, 'product_id')
+    = hidden_field_tag :via, params[:via], id: dom_id(product, 'via')
+
+    %p.product-details__add-to-cart-action= button_tag t('workarea.storefront.products.add_to_cart'), value: 'add_to_cart', class: 'button button--large'
+
+  = append_partials('storefront.product_details', product: product)
+
+  %p.product-details__full-details=link_to t('workarea.storefront.products.view_full_details'), product_path(product, color: params[:color]), class: 'text-button'

data/app/views/workarea/storefront/products/templates/_generic.html.haml

@@ -0,0 +1,57 @@
+.product-details__right-column
+  .product-details__header
+    %h1.product-details__name= product.name
+
+    %p.product-details__id
+      %span= product.id
+    = render 'workarea/storefront/products/reviews_aggregate', product: product
+
+.product-details__left-column
+  = render 'workarea/storefront/products/media', product: product
+
+.product-details__right-column
+  .product-prices.product-prices--details
+    = render 'workarea/storefront/products/pricing', product: product
+
+  - if product.description.present?
+    .product-details__short-description
+      %p= truncated_product_description(product, t('workarea.storefront.products.read_more'))
+
+  = form_tag cart_items_path, method: 'post', class: 'product-details__add-to-cart-form', data: { dialog_form: { dialogOptions: { closeAll: true, initModules: true, uiDialogOptions: { dialogClass: 'ui-dialog-add-to-cart' } } }, analytics: add_to_cart_analytics_data(product).to_json } do
+    = hidden_field_tag :product_id, product.id, id: dom_id(product, 'product_id')
+    = hidden_field_tag :via, params[:via], id: dom_id(product, 'via')
+
+    - if product.sku_options.one?
+      = hidden_field_tag :sku, product.sku_options.first.second, id: nil
+
+    - else
+      .property
+        = label_tag :sku, nil, class: 'property__name', for: "sku_#{dom_id(product)}" do
+          %span.property__text= t('workarea.storefront.products.select_options')
+        .value
+          = select_tag :sku, options_for_select(product.sku_options, params[:sku]), required: true, id: "sku_#{dom_id(product)}", data: { product_details_sku_select: product.slug }
+
+    = append_partials('storefront.add_to_cart_form', product: product)
+
+    - if product.purchasable?
+      .product-details__quantity
+        .property
+          = label_tag :quantity, nil, class: 'property__name', for: "quantity#{dom_id(product)}" do
+            %span.property__text= t('workarea.storefront.products.quantity')
+          .quantity-control
+            = button_tag '-', { type: 'button', data: { quantity_control: { 'direction': 'dec' }.to_json }, class: 'quantity-control__button quantity-control__button--decrement'}
+            .value= number_field_tag :quantity, params[:quantity] || 1, min: 1, required: true, class: 'quantity-control__input text-box text-box--x-small', title: t('workarea.storefront.products.quantity'), id: "quantity#{dom_id(product)}"
+            = button_tag '+', { type: 'button', data: { quantity_control: { 'direction': 'inc' }.to_json }, class: 'quantity-control__button quantity-control__button--increment'}
+
+      .product-details__add-to-cart-action= button_tag t('workarea.storefront.products.add_to_cart'), value: 'add_to_cart', class: 'button button--large'
+
+      - if params[:sku].present?
+        %p.product-details__inventory-status= product.inventory_status
+
+    - else
+      = hidden_field_tag :quantity, params[:quantity] || 1, id: "quantity#{dom_id(product)}"
+      %p.product-details__unavailable= t('workarea.storefront.products.unavailable')
+
+  = append_partials('storefront.product_details', product: product)
+
+  %p.product-details__full-details=link_to t('workarea.storefront.products.view_full_details'), product_path(product, color: params[:color]), class: 'text-button'