workarea-storefront 3.4.12

data/app/views/workarea/storefront/checkouts/confirmation.html.haml

@@ -0,0 +1,37 @@
+- @title = @content.title
+
+.view{ data: { analytics: checkout_order_placed_analytics_data(@order).to_json } }
+
+  %h1= @content.title
+
+  - if @content.content_blocks_for('confirmation').present?
+    = render_content_blocks(@content.content_blocks_for('confirmation'))
+
+  %p= t('workarea.storefront.checkouts.confirmation_text', email: @order.email)
+
+  - if @order.user.present?
+
+    %p= link_to t('workarea.storefront.checkouts.go_to_account'), users_account_path, class: 'button'
+
+  - elsif @order.render_signup_form?
+
+    - if @content.content_blocks_for('confirmation_signup').present?
+      = render_content_blocks(@content.content_blocks_for('confirmation_signup'))
+
+    = form_tag users_account_path, id: 'signup_form', method: :post, data: { analytics: checkout_signup_analytics_data.to_json } do
+      = hidden_field_tag :email, @order.email
+      = hidden_field_tag :first_name, @order.billing_address.first_name
+      = hidden_field_tag :last_name, @order.billing_address.last_name
+      .property
+        = label_tag :password, nil, class: 'property__name' do
+          %span.property__requirement.property__requirement--required= t('workarea.storefront.forms.required')
+          %span.property__text= t('workarea.storefront.users.password')
+        .value= password_field_tag :password, nil, class: 'text-box', required: true, minlength: minimum_password_length, autocomplete: 'off'
+      .button-property
+        .value= check_box_tag :email_signup, true, params[:email_signup]
+        = label_tag :email_signup, nil, class: 'button-property__name' do
+          %span.button-property__text= t('workarea.storefront.users.sign_up_for_email')
+      %p= button_tag t('workarea.storefront.users.create_account'), value: 'sign_up', class: 'button', data: { disable_with: loading_indicator(t('workarea.storefront.users.create_account_disabled_text')) }
+
+  = render 'workarea/storefront/orders/summary', order: @order, recommendations: @order.recommendations, show_fulfillment: false
+  = append_partials('storefront.checkout_confirmation')

data/app/views/workarea/storefront/checkouts/payment.html.haml

@@ -0,0 +1,184 @@
+- @title = t('workarea.storefront.checkouts.payment_title')
+- @checkout_step = 'payment'
+
+- content_for :page_aside do
+  %h1.visually-hidden= t('workarea.storefront.checkouts.payment_title')
+  = render 'summary', cart: @cart, summary: @summary
+
+.checkout-payment.view{ data: { analytics: checkout_payment_view_analytics_data(@cart).to_json } }
+  = append_partials('storefront.checkout_payment_top', step: @step)
+
+  - unless request.get?
+    - if @step.payment.errors.any?
+      - @step.payment.errors.full_messages.each do |message|
+        = render_message 'error', message, data: { analytics: validation_error_analytics_data('payment').to_json }
+    - if @step.credit_card? && @step.credit_card.errors.any?
+      - @step.credit_card.errors.full_messages.each do |message|
+        = render_message 'error', message, data: { analytics: validation_error_analytics_data('credit_card').to_json }
+    = append_partials('storefront.payment_error', step: @step)
+
+  .checkout-payment__section
+
+    .checkout-payment__secondary.checkout-payment__secondary--promo-code
+
+      = optional_field(t('workarea.storefront.carts.enter_promo_code_prompt'), params[:promo_code]) do
+        .checkout-payment__secondary-method
+          %h2= t('workarea.storefront.orders.promo_code')
+          = form_tag add_promo_code_to_cart_path, id: 'promo_code_form', class: 'inline-form', method: 'post' do
+            .inline-form__cell
+              .value
+                = text_field_tag :promo_code, params[:promo_code], class: 'text-box', autocomplete: 'off', autocorrect: 'off', autocapitalize: 'off', required: true, placeholder: t('workarea.storefront.orders.promo_code'), title: t('workarea.storefront.orders.promo_code'), aria: { label: t('workarea.storefront.orders.promo_code') }
+
+            .inline-form__cell
+              %p= button_tag t('workarea.storefront.carts.add'), value: 'add_promo_code', class: 'button'
+
+      = append_partials('storefront.secondary_payment', step: @step)
+
+  .checkout-payment__section
+    .checkout-payment__primary{ data: { checkout_primary_payment: '' } }
+
+      %h2#aria_payment_radiogroup= t('workarea.storefront.checkouts.payment_method')
+
+      - if @step.store_credit?
+        = render_message 'success' do
+          = t('workarea.storefront.checkouts.store_credit_applied', amount: number_to_currency(@step.store_credit_amount))
+          - if @step.order_covered_by_store_credit?
+            = t('workarea.storefront.checkouts.store_credit_balance', amount: number_to_currency(@step.store_credit_balance))
+
+      = form_tag checkout_place_order_path, method: :patch, id: 'checkout_form', data: { single_submit_form: '' } do
+        - unless @step.order_covered_by_advance_payments?
+          .checkout-payment__primary-method-group
+
+            -# Saved Cards
+            - if @step.credit_cards.present?
+              %div{ role: 'radiogroup', aria: { labelledby: 'aria_payment_radiogroup' } }
+                - @step.credit_cards.each do |card|
+                  .checkout-payment__primary-method.checkout-payment__primary-method--credit_card{ class: card.selected? ? 'checkout-payment__primary-method--selected': nil }
+                    .button-property
+                      .value= radio_button_tag 'payment', card.id, card.selected?, data: { analytics: checkout_payment_selected_analytics_data('saved card').to_json }
+                      = label_tag "payment[#{card.id}]", nil, class: 'button-property__name' do
+                        %span.button-property__text= t('workarea.storefront.credit_cards.summary', issuer: card.issuer, number: card.display_number.slice(-4, 4))
+                    %p.checkout-payment__primary-method-description
+                      = credit_card_issuer_icon(card_icon_name(card.issuer))
+                      %span= t('workarea.storefront.credit_cards.expires')
+                      %span= t('workarea.storefront.credit_cards.expiry', month: card.month, year: card.year)
+
+            -# New Card
+            .checkout-payment__primary-method.checkout-payment__primary-method--credit_card.checkout-payment__primary-method--new{ class: @step.using_new_card? ? 'checkout-payment__primary-method--selected': nil}
+              .button-property
+                .value{ role: 'radiogroup', aria: { labelledby: 'aria_payment_radiogroup' } }
+                  = radio_button_tag 'payment', 'new_card', @step.using_new_card?, data: { analytics: checkout_payment_selected_analytics_data('new card').to_json }
+                = label_tag 'payment[new_card]', nil, class: 'button-property__name' do
+                  %span.button-property__text= t('workarea.storefront.checkouts.new_credit_card')
+              %p.checkout-payment__primary-method-description
+                = all_payment_icons
+              .checkout-payment__primary-method-edit
+                .grid.grid--auto
+                  .grid__cell
+                    .property
+                      = label_tag 'credit_card[number]', nil, class: 'property__name' do
+                        %span.property__requirement.property__requirement--required= t('workarea.storefront.forms.required')
+                        %span.property__text= t('workarea.storefront.credit_cards.card_number')
+                      .value
+                        = text_field_tag 'credit_card[number]', nil, class: 'text-box', inputmode: 'numeric', pattern: '[0-9]*', required: true, autocorrect: 'off', autocomplete: 'cc-number'
+                        - if @step.credit_card? && @step.credit_card.errors[:number].present?
+                          %span.value__error= @step.credit_card.errors[:number].first
+                  .grid__cell
+                    .property
+                      %strong.property__name
+                        %span= t('workarea.storefront.credit_cards.expiration_date')
+                      .value
+                        = select_tag 'credit_card[month]', options_for_select(1..12, @step.credit_card.try(:month)), title: t('workarea.storefront.credit_cards.expiration_month'), aria: { label: t('workarea.storefront.credit_cards.expiration_month') }
+                        = select_tag 'credit_card[year]', options_for_select(Time.current.year..Time.current.year + 10, @step.credit_card.try(:year)), title: t('workarea.storefront.credit_cards.expiration_year'), aria: { label: t('workarea.storefront.credit_cards.expiration_year') }
+                        - if @step.credit_card? && @step.credit_card.errors[:year].present?
+                          %span.value__error= @step.credit_card.errors[:year].first
+                  .grid__cell
+                    .property
+                      = label_tag 'credit_card[cvv]', nil, class: 'property__name' do
+                        %span.property__requirement.property__requirement--required
+                          = t('workarea.storefront.forms.required')
+                        %span.property__text
+                          = t('workarea.storefront.credit_cards.security_code')
+                      .value
+                        = text_field_tag 'credit_card[cvv]', nil, class: 'text-box text-box--small', required: true, inputmode: 'numeric', pattern: '[0-9]*', autocorrect: 'off', autocomplete: 'cc-csc'
+                        - if @step.saved_card_id.blank? && @step.credit_card && @step.credit_card.errors[:cvv].present?
+                          %span.value__error= @step.credit_card.errors[:cvv].first
+                        %span.value__note= link_to t('workarea.storefront.credit_cards.whats_this'), page_path('credit-card-security-code'), data: { dialog_button: '' }
+
+            = append_partials('storefront.payment_method', step: @step)
+
+        .checkout-payment__section
+          .checkout-payment__cart-items
+            %h2= t('workarea.storefront.orders.items')
+            %ul.product-list
+              - @cart.items.each do |item|
+                %li.product-list__item
+                  .product-list__item-cell
+                    .product-list__summary
+                      %p.product-list__media= link_to image_tag(product_image_url(item.image, :small_thumb), alt: item.product_name, class: 'product-list__media-image'), product_url(item.product, sku: item.sku), class: 'product-list__media-link'
+                      .product-list__info
+                        %p.product-list__name= link_to item.product_name, product_path(item.product, sku: item.sku)
+                        %p.product-list__id= item.sku_name
+                        %p.product-list__inventory-status= item.inventory_status
+                        - if item.has_options?
+                          .product-list__option-group
+                            - item.details.each do |name, value|
+                              %p.product-list__option #{name.titleize}: #{value}
+                        = append_partials('storefront.checkout_cart_summary_item_details', item: item)
+                  .product-list__item-cell
+                    %table.table
+                      %thead
+                        %tr
+                          %th.table__prices= t('workarea.storefront.orders.price')
+                          %th.table__quantity= t('workarea.storefront.orders.quantity')
+                          %th.table__prices= t('workarea.storefront.orders.total')
+                      %tbody
+                        %tr
+                          %td.table__prices
+                            = render 'workarea/storefront/carts/pricing', item: item, css_block: 'table'
+                          %td.table__quantity
+                            %p= item.quantity
+                          %td.table__prices
+                            - item.total_adjustments.each do |adjustment|
+                              %p.table__price
+                                - if item.total_adjustments.many?
+                                  %span.table__price-label= adjustment.description
+
+                                - if adjustment.discount?
+                                  %strong.table__price-discount= number_to_currency(adjustment.amount)
+                                - else
+                                  %span= number_to_currency(adjustment.amount)
+
+                            - if item.total_adjustments.many?
+                              %p.table__price
+                                %span.table__price-label= t('workarea.storefront.orders.item_total')
+                                %span= number_to_currency(item.total_price)
+
+              - @cart.free_gifts.each do |item|
+                %li.product-list__item
+                  .product-list__item-cell
+                    .product-list__summary
+                      %p.product-list__media= link_to image_tag(product_image_url(item.image, :small_thumb), alt: item.product_name, class: 'product-list__media-image'), product_url(item.product, sku: item.sku), class: 'product-list__media-link'
+                      .product-list__info
+                        %p.product-list__name= link_to item.product_name, product_path(item.product, sku: item.sku)
+                        %p.product-list__id= item.sku
+                  .product-list__item-cell
+                    %table.table
+                      %thead
+                        %tr
+                          %th.table__prices= t('workarea.storefront.orders.price')
+                          %th.table__quantity= t('workarea.storefront.orders.quantity')
+                          %th.table__prices= t('workarea.storefront.orders.total')
+                      %tbody
+                        %tr
+                          %td.table__prices
+                            %p.table__price
+                              %span= t('workarea.storefront.carts.free_gift')
+                          %td.table__quantity
+                            %p= item.quantity
+                          %td.table__prices
+                            %p.table__price
+                              %span= t('workarea.storefront.carts.free_gift')
+
+        .checkout-payment__section
+          %p.checkout-payment__place-order= button_tag t('workarea.storefront.checkouts.place_order'), value: 'place_order', class: 'button button--large', data: { disable_with: loading_indicator(t('workarea.storefront.checkouts.place_order_disabled_text')) }

data/app/views/workarea/storefront/checkouts/shipping.html.haml

@@ -0,0 +1,39 @@
+- @title = t('workarea.storefront.checkouts.shipping_title')
+- @checkout_step = 'shipping'
+
+- content_for :page_aside do
+  %h1.visually-hidden= t('workarea.storefront.checkouts.shipping_title')
+  = render 'summary', cart: @cart, summary: @summary
+
+.checkout-shipping.view{ data: { analytics: checkout_shipping_view_analytics_data(@cart).to_json } }
+
+  - unless request.get?
+    - if @step.order.errors.any?
+      - @step.order.errors.full_messages.each do |message|
+        = render_message 'error', message, data: { analytics: validation_error_analytics_data('order').to_json }
+
+  = form_tag checkout_shipping_path, method: :patch, id: 'checkout_form' do
+
+    .checkout-shipping__section
+      %h2#aria_shipping_radiogroup.checkout-shipping__heading= t('workarea.storefront.checkouts.shipping_service')
+
+      %div{ role: 'radiogroup', aria: { labelledby: 'aria_shipping_radiogroup' } }
+        - @cart.shipping_options.each do |option|
+          .button-property{ data: { checkout_shipping_service: '' } }
+            .value= radio_button_tag :shipping_service, option.name, @cart.shipping_service == option.name, data: { analytics: checkout_shipping_service_selected_analytics_data(option).to_json }
+            = label_tag "shipping_service_#{option.name}", nil, class: 'button-property__name' do
+              %span.button-property__text #{option.name} #{number_to_currency(option.price)}
+
+    .checkout-shipping__section
+      = optional_field(t('workarea.storefront.checkouts.shipping_instructions_prompt'), @cart.shipping_instructions) do
+        .property
+          = label_tag :shipping_instructions, nil, class: 'property__name' do
+            %span.property__text= t('workarea.storefront.checkouts.shipping_instructions')
+          .value
+            = text_field_tag :shipping_instructions, @cart.shipping_instructions, class: 'text-box text-box--wide', title: t('workarea.storefront.checkouts.shipping_instructions_title'), placeholder: t('workarea.storefront.checkouts.shipping_instructions_placeholder')
+
+    = append_partials('storefront.checkout_shipping_fields', step: @step, cart: @cart)
+
+    = append_partials('storefront.checkout_shipping_step_form', step: @step, cart: @cart)
+
+    %p= button_tag t('workarea.storefront.checkouts.continue_to_payment'), value: 'continue', class: 'button button--large', data: { disable_with: loading_indicator(t('workarea.storefront.checkouts.continue_to_payment_disabled_text')) }

data/app/views/workarea/storefront/checkouts/summary.html.haml

@@ -0,0 +1 @@
+= render 'summary', cart: @cart, summary: @summary

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

@@ -0,0 +1,41 @@
+- @title = @inquiry.title
+
+- content_for :head do
+  %link{ href: contact_url, rel: 'canonical' }
+  %meta{ name: :description, content: @inquiry.meta_description }
+
+- 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' }
+      %span.breadcrumbs__text= @inquiry.title
+
+.view
+
+  %h1= @inquiry.title
+
+  = render_content_blocks(@inquiry.content_blocks)
+
+  = form_tag contact_path, method: 'post', id: 'customer_service_form' do
+    .property
+      = label_tag :name, nil, class: 'property__name' do
+        %span.property__text= t('workarea.storefront.contacts.name')
+      .value= text_field_tag :name, params[:name], class: 'text-box', autocomplete: 'name'
+    .property
+      = label_tag :email, nil, class: 'property__name' do
+        %span.property__text= t('workarea.storefront.contacts.email')
+      .value= email_field_tag :email, params[:email], class: 'text-box', required: true, placeholder: t('workarea.storefront.forms.email_placeholder'), autocapitalize: 'off', autocomplete: 'email'
+    .property
+      = label_tag :order_id, nil, class: 'property__name' do
+        %span.property__text= t('workarea.storefront.contacts.order_id')
+      .value= text_field_tag :order_id, params[:order_id], class: 'text-box'
+    .property
+      = label_tag :subject, nil, class: 'property__name' do
+        %span.property__text= t('workarea.storefront.contacts.subject')
+      .value= select_tag :subject, options_for_select(@inquiry.subjects, params[:subject]), required: true
+    .property
+      = label_tag :message, nil, class: 'property__name' do
+        %span.property__text= t('workarea.storefront.contacts.message')
+      .value= text_area_tag :message, params[:message], class: 'text-box text-box--multi-line text-box--wide', required: true
+    = button_tag t('workarea.storefront.forms.send'), value: 'submit', class: 'button'

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

@@ -0,0 +1,6 @@
+- @title = @content.browser_title
+- add_css(@content.css)
+- add_javascript(@content.javascript)
+
+.view
+  = render_content_blocks(@content.content_blocks_for(@area_id))

data/app/views/workarea/storefront/content_blocks/_button.html.haml

@@ -0,0 +1,5 @@
+.button-content-block{ class: "button-content-block--#{align.downcase}" }
+  - if size == 'Regular'
+    = link_to text, link, class: 'button'
+  - else
+    = link_to text, link, class: "button button--#{size.downcase}"

data/app/views/workarea/storefront/content_blocks/_category_summary.html.haml

@@ -0,0 +1,15 @@
+- if category.present?
+  .category-summary-content-block{ data: { analytics: product_list_analytics_data(t('workarea.storefront.content_blocks.category_summary.summary_of', name: category.name)).to_json } }
+
+    %span.category-summary-content-block__heading
+      = link_to t('workarea.storefront.content_blocks.category_summary.view_all', name: category.name), category_path(category), class: 'category-summary-content-block__heading-link'
+
+    - if products.empty?
+      %p.category-summary-content-block__empty-message= t('workarea.storefront.content_blocks.category_summary.empty', name: category.name)
+
+    - else
+      .grid
+        - products.each do |product|
+          .grid__cell.grid__cell--50.grid__cell--33-at-medium.grid__cell--16-at-wide
+            %div.product-summary.product-summary--small{ itemscope: true, itemtype: 'http://schema.org/Product' }
+              = render 'workarea/storefront/products/summary', product: product

data/app/views/workarea/storefront/content_blocks/_divider.html.haml

@@ -0,0 +1,2 @@
+.divider-content-block{ class: ("divider-content-block--#{height}" if local_assigns[:height].present?) }
+  .divider-content-block__line{ class: ('hidden' unless local_assigns[:show_line]), style: "border-bottom-style: #{style}; border-bottom-width: #{thickness}px;" }

data/app/views/workarea/storefront/content_blocks/_hero.html.haml

@@ -0,0 +1,3 @@
+.hero-content-block
+  .hero-content-block__image-container{ style: intrinsic_ratio_frame_styles(view_model.image) }= image_tag view_model.image.url, alt: local_assigns[:alt_text].presence, class: 'hero-content-block__image'
+  .hero-content-block__button{ class: view_model.button_position_class }= link_to text, local_assigns[:url].presence || '#', class: view_model.button_style_class

data/app/views/workarea/storefront/content_blocks/_html.html.haml

@@ -0,0 +1 @@
+.html-content-block!= local_assigns[:html]

data/app/views/workarea/storefront/content_blocks/_image.html.haml

@@ -0,0 +1,2 @@
+.image-content-block{ class: "image-content-block--#{align.downcase}" }
+  = render_image_with_link(view_model.find_asset(image).url, alt, 'image-content-block', link)

data/app/views/workarea/storefront/content_blocks/_image_and_text.html.haml

@@ -0,0 +1,4 @@
+.image-and-text-content-block
+  .image-and-text-content-block__image-container{ class: "image-and-text-content-block__image-container--#{image_position.downcase}" }
+    = render_image_with_link(view_model.find_asset(image).url, image_alt, 'image-and-text-content-block', image_link)
+  .image-and-text-content-block__text{ style: "text-align: #{text_alignment.downcase}" }!= text

data/app/views/workarea/storefront/content_blocks/_image_group.html.haml

@@ -0,0 +1,10 @@
+.image-group-content-block
+  .grid.grid--flush.grid--center
+    - view_model.series.each_with_index do |image, i|
+      - unless image.asset.image_placeholder?
+        .grid__cell.grid__cell--50-at-medium
+          - if image.link.present?
+            = link_to image.link, class: 'image-group-content-block__link' do
+              = image_tag image.asset.url, alt: image.alt, class: 'image-group-content-block__image'
+          - else
+            = image_tag image.asset.url, alt: image.alt, class: 'image-group-content-block__image'

data/app/views/workarea/storefront/content_blocks/_product_insights.html.haml

@@ -0,0 +1,10 @@
+.product-insights-content-block
+  - if local_assigns[:title].present?
+    .product-insights-content-block__heading= title
+
+  - if view_model.products.present?
+    .grid
+      - view_model.products.each do |product|
+        .grid__cell.grid__cell--50.grid__cell--33-at-medium.grid__cell--16-at-wide
+          .product-summary.product-summary--small{ itemscope: true, itemtype: 'http://schema.org/Product' }
+            = render 'workarea/storefront/products/summary', product: product

data/app/views/workarea/storefront/content_blocks/_product_list.html.haml

@@ -0,0 +1,10 @@
+.product-list-content-block
+  - if local_assigns[:title].present?
+    %span.product-list-content-block__heading= title
+
+  - if products.present?
+    .grid{ data: { analytics: product_list_analytics_data("Custom product list").to_json } }
+      - products.each do |product|
+        .grid__cell.grid__cell--50.grid__cell--33-at-medium.grid__cell--16-at-wide
+          %div.product-summary.product-summary--small{ itemscope: true, itemtype: 'http://schema.org/Product' }
+            = render 'workarea/storefront/products/summary', product: product

data/app/views/workarea/storefront/content_blocks/_quote.html.haml

@@ -0,0 +1,4 @@
+%blockquote.quote-content-block
+  .quote-content-block__text!= quote
+  - if author.present?
+    %span.quote-content-block__author= author

data/app/views/workarea/storefront/content_blocks/_recommendations.html.haml

@@ -0,0 +1 @@
+%div{ data: { recommendations_placeholder: recommendations_path } }

data/app/views/workarea/storefront/content_blocks/_social_networks.html.haml

@@ -0,0 +1,17 @@
+%ul.social-networks-content-block
+  - if facebook.present?
+    %li.social-networks-content-block__item
+      = link_to facebook, class: 'social-networks-content-block__button', aria: { label: t('workarea.storefront.content_blocks.social_networks.facebook') } do
+        = inline_svg('workarea/storefront/icons/facebook.svg', class: 'svg-icon svg-icon--extra-large svg-icon--blue')
+  - if twitter.present?
+    %li.social-networks-content-block__item
+      = link_to twitter, class: 'social-networks-content-block__button', aria: { label: t('workarea.storefront.content_blocks.social_networks.twitter') } do
+        = inline_svg('workarea/storefront/icons/twitter.svg', class: 'svg-icon svg-icon--extra-large svg-icon--blue')
+  - if google_plus.present?
+    %li.social-networks-content-block__item
+      = link_to google_plus, class: 'social-networks-content-block__button', aria: { label: t('workarea.storefront.content_blocks.social_networks.google_plus') } do
+        = inline_svg('workarea/storefront/icons/google_plus.svg', class: 'svg-icon svg-icon--extra-large svg-icon--blue')
+  - if pinterest.present?
+    %li.social-networks-content-block__item
+      = link_to pinterest, class: 'social-networks-content-block__button', aria: { label: t('workarea.storefront.content_blocks.social_networks.pinterest') } do
+        = inline_svg('workarea/storefront/icons/pinterest.svg', class: 'svg-icon svg-icon--extra-large svg-icon--blue')

data/app/views/workarea/storefront/content_blocks/_taxonomy.html.haml

@@ -0,0 +1,27 @@
+.taxonomy-content-block
+
+  - if view_model.left_image?
+    .taxonomy-content-block__container
+      = render_image_with_link(view_model.find_asset(image).url, image_alt, 'taxonomy-content-block', image_link)
+
+  .taxonomy-content-block__container{ class: ('taxonomy-content-block__container--without-image' unless image.present? )}
+    - if view_model.data[:header].present?
+      %span.taxonomy-content-block__menu-heading= view_model.data[:header]
+
+    %ul.taxonomy-content-block__menu
+      - if view_model.show_starting_taxon?
+        %li.taxonomy-content-block__menu-item.taxonomy-content-block__menu-item--start
+          - if view_model.starting_taxon.placeholder?
+            = view_model.starting_taxon.name
+          - else
+            = link_to view_model.starting_taxon.name, storefront_path_for(view_model.starting_taxon), data: { analytics: primary_navigation_analytics_data(view_model.starting_taxon).to_json }, class: 'taxonomy-content-block__menu-link'
+      - view_model.taxons.each do |taxon|
+        %li.taxonomy-content-block__menu-item
+          - if taxon.placeholder?
+            = taxon.name
+          - else
+            = link_to taxon.name, storefront_path_for(taxon), data: { analytics: primary_navigation_analytics_data(taxon).to_json }, class: 'taxonomy-content-block__menu-link'
+
+  - if view_model.right_image?
+    .taxonomy-content-block__container
+      = render_image_with_link(view_model.find_asset(image).url, image_alt, 'taxonomy-content-block', image_link)