From b76a1dd2191dd146fcc1f6c83eb189b7ad1c517f Mon Sep 17 00:00:00 2001 From: soulchild Date: Wed, 12 Aug 2026 02:53:06 +0000 Subject: [PATCH] Updated version code --- snippets/product-item.liquid | 255 ++++++++++++++++++++--------------- 1 file changed, 145 insertions(+), 110 deletions(-) diff --git a/snippets/product-item.liquid b/snippets/product-item.liquid index 46f91b8..a7d4907 100644 --- a/snippets/product-item.liquid +++ b/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 = 2 - if product_columns_mobile == 1 - assign mobile_column_count = 1 - endif + assign mobile_column_count = product_columns_mobile | plus: 0 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' %} - {% capture quick_shop_button_attributes %} - data-quick-shop-trigger="{{ quick_shop_type }}" +{%- if quick_shop_type != 'none' -%} + {%- liquid + capture quick_shop_button_attributes + echo 'data-quick-shop-trigger="[[qst]]"' | replace: '[[qst]]', quick_shop_type - {% if quick_shop_type == 'quick-add' %} - data-product-id="{{ prod.variants[0].id }}" - {% else %} - data-product-url="{{ prod.url }}" - {% endif %} - {% endcapture %} + if quick_shop_type == 'quick-add' + echo 'data-product-id="[[pid]]"' | replace: '[[pid]]', prod.variants[0].id + else + echo 'data-product-url="[[pu]]"' | replace: '[[pu]]', prod.url + endif + endcapture + -%} - {% capture quick_shop_button %} + {%- capture quick_shop_button -%} - {% endcapture %} + {%- endcapture -%} - {% capture quick_shop_button_hoverless %} + {%- capture quick_shop_button_hoverless -%} - {% endcapture %} -{% endif %} + {%- endcapture -%} +{%- endif -%} -{% liquid - # wrap add-to-cart buttons in a product form for no-js or if purchase confirmation and quick cart are disabled +{%- liquid + # 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 '' | 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 +-%}
-
- +
+ {%- 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 -%} - {% 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 -%}
- {{ quick_shop_button }} + {{- quick_shop_button -}}
- {% endif %} + {%- endif -%} - {% if quick_shop_type != 'none' %} - {{ quick_shop_button_hoverless }} - {% endif %} + {%- if quick_shop_type != 'none' -%} + {{- quick_shop_button_hoverless -}} + {%- endif -%}
-
-

+
+

{%- if placeholder -%} - {{ 'homepage.onboarding.product_title' | t }} + {{- 'homepage.onboarding.product_title' | t -}} {%- else -%} {{ prod.title }} {%- endif -%}

- {% if settings.product_listing_show_vendor and prod.vendor %} + {%- if settings.product_listing_show_vendor and prod.vendor -%}
- {{ prod.vendor }} + {{- prod.vendor -}}
- {% endif %} + {%- endif -%} - {% if settings.product_listing_show_rating %} - {% render 'product-rating', prod: prod %} - {% endif %} + {%- liquid + if settings.product_listing_show_rating + 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' %} -

- {% if placeholder %} - {{ 9999 | money }} + -%} - {% elsif prod_compare_at_price > prod_price %} + {%- if price_content_type == 'price' -%} +

+ {%- if placeholder -%} + {{- 9999 | money -}} + {%- elsif prod_compare_at_price > prod_price -%} - {% 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 -%} {{ prod_compare_at_price | money }} - {% 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 -%} {{- 'products.product.on_sale_from_html' | t: price: sale_price -}} - {% else %} + {%- else -%} {{ prod_price | money }} - {% endif %} - - {% else %} - {% if prod.price_varies %} + {%- endif -%} + {%- else -%} + {%- if prod.price_varies -%} {%- assign price = prod_price | money -%} - {{ 'products.product.from_lowest_price_html' | t: lowest_price: price }} - - {% else %} + {{- 'products.product.from_lowest_price_html' | t: lowest_price: price -}} + {%- else -%} {{ prod_price | money }} - {% endif %} - {% endif %} + {%- endif -%} + {%- endif -%} - {% if settings.product_listing_show_discount %} + {%- if settings.product_listing_show_discount -%} {%- render 'get-display-discount', prod: prod, format: settings.product_listing_discount_format -%} - {% endif %} + {%- endif -%} - {% render 'unit-price', item: current_variant %} + {%- render 'unit-price', item: prod.selected_or_first_available_variant -%}

- {% elsif price_content_type == 'custom' %} - {% if prod.price_varies and prod_price == 0 %} + {%- elsif price_content_type == 'custom' -%} + {%- if prod.price_varies and prod_price == 0 -%} {%- assign price = prod_price | money -%} {%- assign custom_price_content = 'products.inventory.zero_price_custom_label' | t -%}

- {% 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 - %} + -%}

- {% else %} - {% if custom_price_content != blank %} + {%- else -%} + {%- if custom_price_content != blank -%}

{{ custom_price_content }}

- {% endif %} - {% endif %} - {% endif %} + {%- endif -%} + {%- endif -%} + {%- endif -%} - {% if has_hover_swatches or has_hover_chips %} - {% liquid + {%- if has_hover_swatches or has_hover_chips -%} + {%- liquid assign option_string = blank if has_hover_swatches @@ -415,10 +444,11 @@ assign option_string = option_string | append: chip_string endif %} +
- {{ option_string }} + {{- option_string -}}
- {% endif %} + {%- endif -%}
{%- 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 @@

{%- endif -%} - {%- if quick_shop_type != 'none' and quick_view_is_beneath -%} - {{ quick_shop_button }} - {%- endif -%} + {%- liquid + if quick_shop_type != 'none' and quick_view_is_beneath + echo quick_shop_button + endif + -%}
+