Updated version code

snippets/product-item.liquid

@@ -1,10 +1,18 @@
+{%- doc -%}
+  Renders a product item.
+
+  @param {object} prod - The product object. We use 'prod' to avoid collision with the global 'product' object.
+  @param {string} product_columns_desktop - The number of columns in the product grid on desktop.
+  @param {string} product_columns_mobile - The number of columns in the product grid on mobile.
+  @param {string} aspect_ratio - The image aspect ratio.
+  @param {boolean} [has_grid_reveal] - Whether the item should animate.
+  @param {string} custom_color_key_map - A list of custom color names for swatches.
+  @param {string} custom_color_value_map - A list of custom color values for swatches.
+  @param {boolean} [quick_view_is_beneath] - Whether the quick view displays below the product info (instead of overlayed on the image).
+  @param {boolean} [placeholder] - Whether the item is being rendered as a placeholder.
+{%- enddoc -%}
+
 {%- liquid
-  comment
-    pass in :
-
-    * prod (product but avoiding collision with globally scoped product)
-  endcomment
-
   assign prod_compare_at_price = prod.compare_at_price
   assign prod_price = prod.price
 
@@ -22,17 +30,17 @@
     endif
   endif
 
-  assign show_multiple_images = false
+  assign has_grid_reveal = has_grid_reveal | default: false, allow_false: true
+  assign quick_view_is_beneath = quick_view_is_beneath | default: false, allow_false: true
+  assign placeholder = placeholder | default: false, allow_false: true
+
   if settings.product_listing_show_second_image_on_hover and prod.media.size > 1
     assign show_multiple_images = true
+  else
+    assign show_multiple_images = false
   endif
 
-  assign current_variant = prod.selected_or_first_available_variant
+  assign mobile_column_count = product_columns_mobile | plus: 0
-
-  assign mobile_column_count = 2
-  if product_columns_mobile == 1
-    assign mobile_column_count = 1
-  endif
 
   case product_columns_desktop
     when '5'
@@ -57,7 +65,6 @@
     assign show_sibling_swatches = true
     assign first_swatchified_option = settings.siblings_option_name | downcase
     assign displayed_swatch_count = sibling_products.size
-
   elsif settings.enable_product_card_swatches
     capture first_swatchified_option
       render 'get-first-styled-option', prod: prod, styled_options: settings.swatch_options
@@ -107,7 +114,6 @@
     capture quick_shop_button_hoverless_icon
       render 'icon', icon: 'quick-add'
     endcapture
-
   elsif settings.enable_quick_view
     assign quick_shop_type = 'quick-view'
     assign quick_shop_button_text = 'products.product.quick_view' | t
@@ -120,20 +126,22 @@
   endif
 -%}
 
-{% if quick_shop_type != 'none' %}
+{%- if quick_shop_type != 'none' -%}
-  {% capture quick_shop_button_attributes %}
+  {%- liquid
-      data-quick-shop-trigger="{{ quick_shop_type }}"
+    capture quick_shop_button_attributes
+      echo 'data-quick-shop-trigger="[[qst]]"' | replace: '[[qst]]', quick_shop_type
 
-      {% if quick_shop_type == 'quick-add' %}
+      if quick_shop_type == 'quick-add'
-        data-product-id="{{ prod.variants[0].id }}"
+        echo 'data-product-id="[[pid]]"' | replace: '[[pid]]', prod.variants[0].id
-      {% else %}
+      else
-        data-product-url="{{ prod.url }}"
+        echo 'data-product-url="[[pu]]"' | replace: '[[pu]]', prod.url
-      {% endif %}
+      endif
-  {% endcapture %}
+    endcapture
+  -%}
 
-  {% capture quick_shop_button %}
+  {%- capture quick_shop_button -%}
     <button
-      class="btn btn--tertiary btn--x-small"
+      class="product-item__quick-view btn btn--tertiary btn--x-small"
       {{ quick_shop_button_attributes }}
       tabindex="0"
     >
@@ -143,22 +151,22 @@
         <div class="btn__loading-bar"></div>
       </div>
     </button>
-  {% endcapture %}
+  {%- endcapture -%}
 
-  {% capture quick_shop_button_hoverless %}
+  {%- capture quick_shop_button_hoverless -%}
     <button
-      class="product-item__hoverless-quick-view-button btn btn--rounded"
+      class="product-item__quick-view--hoverless btn btn--rounded"
       {{ quick_shop_button_attributes }}
       tabindex="0"
       title="{{ quick_shop_button_text }}"
     >
       {{ quick_shop_button_hoverless_icon }}
     </button>
-  {% endcapture %}
+  {%- endcapture -%}
-{% endif %}
+{%- endif -%}
 
-{% liquid
+{%- liquid
-  # wrap add-to-cart buttons in a product form for no-js or if purchase confirmation and quick cart are disabled
+  # Wrap add to cart buttons in a product form for no-js, or if purchase confirmation and quick cart are disabled
   if quick_shop_type == 'quick-add'
     capture product_form_tags
       echo '<input class="product-item__product-form-variant-input" name="id" type="hidden" value="[[vi]]">' | replace: '[[vi]]', prod.variants[0].id
@@ -178,100 +186,121 @@
       endform
     endcapture
   endif
-%}
+
+  capture product_item_class
+    echo 'product-item'
+
+    if has_hover_swatches
+      echo ' product-item--with-hover-swatches'
+    endif
+
+    if has_hover_chips
+      echo ' product-item--with-hover-chips'
+    endif
+
+    if settings.enable_border_on_hover
+      echo ' product-item--border-on-hover'
+    endif
+
+    echo ' animation animation--item'
+
+    if has_grid_reveal
+      echo ' animation--item-initial'
+    endif
+  endcapture
+-%}
 
 <div
-  class="
+  class="{{ product_item_class }}"
-    product-item
-    {% if has_hover_swatches -%} product-item--with-hover-swatches {%- endif %}
-    {% if has_hover_chips -%} product-item--with-hover-chips {%- endif %}
-    {% if settings.enable_border_on_hover -%} product-item--border-on-hover {%- endif %}
-    animation
-    animation--item
-    {% if has_grid_reveal -%} animation--item-initial {%- endif %}
-  "
   style="--z-index-item: {{ forloop.index }};"
 >
   <div class="product-item__inner">
     <div class="product-item__media {%- if show_multiple_images %} product-item__media--multiple-images{%- endif %}">
-      <a class="product-item__image-link" href="{{ prod.url | within: collection }}" aria-label="{{ prod.title }}">
+      <a
+        class="product-item__image-link"
+        href="{{ prod.url | within: collection }}"
+        aria-label="{{ prod.title }}"
+      >
         {%- liquid
           assign image_wrapper_class = 'product-item__image'
 
           if show_multiple_images
             assign image_wrapper_class = image_wrapper_class | append: ' product-item__image--one'
-            assign second_image = prod.media[1].preview_image
+            assign second_image = prod.media[1]
 
             if prod.featured_media != prod.media[0]
-              assign second_image = prod.media[0].preview_image
+              assign second_image = prod.media[0]
             endif
           endif
         -%}
 
-        {% render 'image',
+        {%- render 'image',
           image: prod.featured_media,
           wrapper_class: image_wrapper_class,
           aspect_ratio: settings.product_listing_aspect_ratio,
+          focal_point: 'image_presentation',
           object_fit: settings.product_listing_media_fit,
           include_placeholder: true,
           sizes: sizes,
           src_set_type: 'grid'
-        %}
+        -%}
 
         {%- if show_multiple_images -%}
-          {% render 'image',
+          {%- render 'image',
             image: second_image,
             wrapper_class: 'product-item__image product-item__image--two',
             aspect_ratio: settings.product_listing_aspect_ratio,
+            focal_point: 'image_presentation',
             object_fit: settings.product_listing_media_fit,
             include_placeholder: true,
             sizes: sizes,
             no_lazy_load: true,
             src_set_type: 'grid'
-          %}
+          -%}
         {%- endif -%}
       </a>
-      {% unless placeholder %}
+
+      {%- unless placeholder -%}
         {%- render 'product-badges',
           prod: prod,
           show_sale_badge: settings.product_listing_show_sale_badge,
           show_custom_badges: settings.product_listing_show_custom_badges,
           show_sold_out_badge: settings.product_listing_show_sold_out_badge
         -%}
-      {% endunless %}
+      {%- endunless -%}
 
-      {% if quick_shop_type != 'none' and quick_view_is_beneath != true %}
+      {%- if quick_shop_type != 'none' and quick_view_is_beneath != true -%}
         <div class="product-item__hover-action-wrap">
-          {{ quick_shop_button }}
+          {{- quick_shop_button -}}
         </div>
-      {% endif %}
+      {%- endif -%}
 
-      {% if quick_shop_type != 'none' %}
+      {%- if quick_shop_type != 'none' -%}
-        {{ quick_shop_button_hoverless }}
+        {{- quick_shop_button_hoverless -}}
-      {% endif %}
+      {%- endif -%}
     </div>
 
     <div class="product-item__meta">
       <div class="product-item__text ta-c">
-        <h4 class="ff-body product-item__product-title fs-product-card-title">
+        <h4 class="ff-body product-item__product-title ff-product-listing-title">
           {%- if placeholder -%}
-            {{ 'homepage.onboarding.product_title' | t }}
+            {{- 'homepage.onboarding.product_title' | t -}}
           {%- else -%}
             <a href="{{ prod.url | within: collection }}">{{ prod.title }}</a>
           {%- endif -%}
         </h4>
 
-        {% if settings.product_listing_show_vendor and prod.vendor %}
+        {%- if settings.product_listing_show_vendor and prod.vendor -%}
           <h5 class="ff-body fs-body-60 product-item__product-vendor">
-            {{ prod.vendor }}
+            {{- prod.vendor -}}
           </h5>
-        {% endif %}
+        {%- endif -%}
 
-        {% if settings.product_listing_show_rating %}
+        {%- liquid
-          {% render 'product-rating', prod: prod %}
+          if settings.product_listing_show_rating
-        {% endif %}
+            render 'product-rating', prod: prod
+          endif
 
-        {% liquid
           assign price_content_type = 'price'
 
           if prod.available
@@ -293,18 +322,19 @@
               assign custom_price_content = 'products.inventory.sold_out_price_custom_label' | t
             endif
           endif
-        %}
+        -%}
-        {% if price_content_type == 'price' %}
-          <p class="product-item__price">
-            {% if placeholder %}
-              {{ 9999 | money }}
 
-            {% elsif prod_compare_at_price > prod_price %}
+        {%- if price_content_type == 'price' -%}
+          <p class="product-item__price">
+            {%- if placeholder -%}
+              {{- 9999 | money -}}
+            {%- elsif prod_compare_at_price > prod_price -%}
               <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
 
-              {% liquid
+              {%- liquid
                 # Extend Shopify's detection for varied compare_at_price
                 assign has_null_compare_at_price = false
+
                 for variant in prod.variants
 
                   assign variant_compare_at_price = variant.compare_at_price
@@ -335,49 +365,48 @@
                     assign has_null_compare_at_price = true
                     break
                   endif
+
                 endfor
-              %}
+              -%}
 
-              {% unless prod.compare_at_price_varies or has_null_compare_at_price %}
+              {%- unless prod.compare_at_price_varies or has_null_compare_at_price -%}
                 <s class="t-subdued">{{ prod_compare_at_price | money }}</s>
-              {% endunless %}
+              {%- endunless -%}
 
-              {% if prod.price_varies or prod.compare_at_price_varies or has_null_compare_at_price %}
+              {%- if prod.price_varies or prod.compare_at_price_varies or has_null_compare_at_price -%}
                 {%- assign sale_price = prod_price | money -%}
 
                 <span class="sale">
                   {{- 'products.product.on_sale_from_html' | t: price: sale_price -}}
                 </span>
-              {% else %}
+              {%- else -%}
                 <span class="sale">{{ prod_price | money }}</span>
-              {% endif %}
+              {%- endif -%}
-
+            {%- else -%}
-            {% else %}
+              {%- if prod.price_varies -%}
-              {% if prod.price_varies %}
                 {%- assign price = prod_price | money -%}
 
-                {{ 'products.product.from_lowest_price_html' | t: lowest_price: price }}
+                {{- 'products.product.from_lowest_price_html' | t: lowest_price: price -}}
-
+              {%- else -%}
-              {% else %}
                 <span class="product-item__price">{{ prod_price | money }}</span>
-              {% endif %}
+              {%- endif -%}
-            {% endif %}
+            {%- endif -%}
 
-            {% if settings.product_listing_show_discount %}
+            {%- if settings.product_listing_show_discount -%}
               <span class="displayed-discount fs-body-50">
                 {%- render 'get-display-discount', prod: prod, format: settings.product_listing_discount_format -%}
               </span>
-            {% endif %}
+            {%- endif -%}
 
-            {% render 'unit-price', item: current_variant %}
+            {%- render 'unit-price', item: prod.selected_or_first_available_variant -%}
           </p>
-        {% elsif price_content_type == 'custom' %}
+        {%- elsif price_content_type == 'custom' -%}
-          {% if prod.price_varies and prod_price == 0 %}
+          {%- if prod.price_varies and prod_price == 0 -%}
             {%- assign price = prod_price | money -%}
             {%- assign custom_price_content = 'products.inventory.zero_price_custom_label' | t -%}
 
             <p class="product-item__price">
-              {% liquid
+              {%- liquid
                 capture from_lowest_price_html
                   echo 'products.product.from_lowest_price_html' | t: lowest_price: custom_price_content
                 endcapture
@@ -387,17 +416,17 @@
                 else
                   echo from_lowest_price_html
                 endif
-              %}
+              -%}
             </p>
-          {% else %}
+          {%- else -%}
-            {% if custom_price_content != blank %}
+            {%- if custom_price_content != blank -%}
               <p class="product-item__price">{{ custom_price_content }}</p>
-            {% endif %}
+            {%- endif -%}
-          {% endif %}
+          {%- endif -%}
-        {% endif %}
+        {%- endif -%}
 
-        {% if has_hover_swatches or has_hover_chips %}
+        {%- if has_hover_swatches or has_hover_chips -%}
-          {% liquid
+          {%- liquid
             assign option_string = blank
 
             if has_hover_swatches
@@ -415,10 +444,11 @@
               assign option_string = option_string | append: chip_string
             endif
           %}
+
           <h5 class="ff-body fs-body-50 product-item__swatch-count">
-            {{ option_string }}
+            {{- option_string -}}
           </h5>
-        {% endif %}
+        {%- endif -%}
       </div>
 
       {%- if has_hover_swatches or has_hover_chips -%}
@@ -428,7 +458,9 @@
               prod: prod,
               option_name: first_swatchified_option,
               show_sibling_swatches: show_sibling_swatches,
-              sibling_products: sibling_products
+              sibling_products: sibling_products,
+              custom_color_key_map: custom_color_key_map,
+              custom_color_value_map: custom_color_value_map
             -%}
           {%- endif -%}
 
@@ -438,10 +470,13 @@
         </div>
       {%- endif -%}
 
-      {%- if quick_shop_type != 'none' and quick_view_is_beneath -%}
+      {%- liquid
-        {{ quick_shop_button }}
+        if quick_shop_type != 'none' and quick_view_is_beneath
-      {%- endif -%}
+          echo quick_shop_button
+        endif
+      -%}
     </div>
+
     <div class="product-item__hover-container"></div>
   </div>
 </div>