{% comment %} A grid item for products used in collection grid view * product {object} - The current prodcut {% render 'product-grid-item', product: product %} {% endcomment %} {%- liquid assign on_sale = false assign product_price = product.price assign product_compare_at_price = product.compare_at_price comment start Yagi app endcomment assign public_or_tags_matched = true if product.metafields.app--168074346497.segment_tags.value.size > 0 assign public_or_tags_matched = false endif for etag in product.metafields.app--168074346497.segment_tags.value if customer.tags contains etag assign public_or_tags_matched = true break endif endfor if public_or_tags_matched assign product_price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price assign product_compare_at_price = product.compare_at_price if shop.metafields.app--168074346497.discount_percentage.value > 0.005 assign discount_percentage = shop.metafields.app--168074346497.discount_percentage.value | times: 1.0 assign deducted_percentage = 1.0 | minus: discount_percentage assign product_price = product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil endif if product_price < product.price and product_compare_at_price == 0 or product_compare_at_price == blank assign product_compare_at_price = product.price endif endif comment end Yagi app endcomment if product_compare_at_price > product_price assign on_sale = true endif assign sold_out = true if product.available assign sold_out = false endif # Siblings are a collection metafield called theme.siblings assign sibs_collection = nil assign has_siblings = false if settings.show_siblings and product.metafields.theme.siblings.value != blank and product.metafields.theme.siblings.type == 'single_line_text_field' assign sibs_collection = collections[product.metafields.theme.siblings.value] # Ensure the collection was set up to contain this product for sib_product in sibs_collection.products if sib_product == product assign has_siblings = true endif endfor endif assign swatch_option = nil assign has_swatches = false assign swatch_limit = settings.card_swatch_limit if settings.swatches_enable and settings.swatches_collection_enable # Detect new swatch system for option in product.options_with_values if option.values.first.swatch != null assign has_swatches = true assign swatch_option = option break endif endfor if has_swatches == false # Detect old swatch system assign swatch_translation = 'general.swatches.color' | t assign swatch_labels = swatch_translation | append: ',' | split: ',' for label in swatch_labels assign sanitized_label = label | lstrip | rstrip if product.options_by_name[sanitized_label].values.size > 0 assign has_swatches = true assign swatch_option = product.options_by_name[sanitized_label] break endif endfor endif endif # A button that will add to cart immediately: product with only one default variant or a product with color swatches and no other variants assign instant_add_button = nil if settings.instant_add_enable if product.variants.size == 1 assign instant_add_button = true elsif has_swatches and product.options.size == 1 assign instant_add_button = true endif endif # A quick add button that will show short variants like 'size' inside the button. assign inline_variant_buttons = nil # Get the non color option # swatch_option.position -> 1 is off by one, it means product.options[0] # In case of siblings, the inline option buttons always use the first option if settings.instant_add_enable if product.options.size == 1 assign inline_variant_buttons = product.options_with_values[0] elsif has_swatches and product.options.size == 2 if swatch_option.position == 1 assign inline_variant_buttons = product.options_with_values[1] else assign inline_variant_buttons = product.options_with_values[0] endif endif endif # Capture the swatch link markup so we only have filter product.variants by color one time assign swatch_link_markup = '' # Pass pre-filtered color variants into content, because the logic needs to know about # swatch option positions and swatches need to use the where filter to get the list assign inline_variants = nil # Placeholder to be displayed when no product image assign placeholder = placeholder | default: false -%} {% if has_siblings and sibs_collection.products.size > 0 %} {%- liquid # Initialize an empty array to hold visible siblings (i.e. ones under swatch limit) assign visible_siblings = "" | split: "," # Initial visible sibling count is 1 to account for the current product assign visible_sibling_count = 1 # Loop through siblings collection and add the current product, plus other siblings until we hit the swatch_limit for sibling in sibs_collection.products if sibling.id == product.id or visible_sibling_count < swatch_limit # Create a new array with the current value, then concat it into the main array assign new_array = sibling | sort assign visible_siblings = visible_siblings | concat: new_array unless sibling.id == product.id assign visible_sibling_count = visible_sibling_count | plus: 1 endunless endif endfor -%} {%- for sib_product in visible_siblings -%} {% liquid assign visible = false assign first_sibling_variant = sib_product.variants[0] if sib_product.id == product.id assign visible = true endif if visible and preload assign preload_variant = true endif if visible and eagerload assign eagerload_variant = true endif assign inline_variant_buttons = nil if settings.instant_add_enable and sib_product.options.size == 1 assign inline_variant_buttons = sib_product.options_with_values[0] endif if inline_variant_buttons assign inline_variants = sib_product.variants endif -%} {% render 'product-grid-item-variant', product: sib_product, variant: first_sibling_variant, badge_string: badge_string, visible: visible, instant_add_button: instant_add_button, inline_variant_buttons: inline_variant_buttons, inline_variants: inline_variants, section_width: section_width, eagerload: eagerload_variant, preload: preload_variant, placeholder: placeholder, columns_desktop: columns_desktop, columns_tablet: columns_tablet, columns_mobile: columns_mobile %} {% endfor %} {% elsif has_swatches %} {%- liquid # Note: this is a hack based on options having a property named option1, option2, or option3 -- which we rely on below to filter the variants array assign swatch_position_key = 'option' | append: swatch_option.position assign selected_swatch_value = swatch_option.selected_value # Initialize an empty array to hold visible siblings (i.e. ones under swatch limit) assign visible_swatches = "" | split: "," # If there is a selected swatch, start the visible swatch count at 1 to account for it if selected_swatch_value != blank assign visible_swatch_count = 1 else assign visible_swatch_count = 0 endif # Loop through siblings collection and add the current product, plus other swatches until we hit the swatch limit for swatch_value in swatch_option.values if swatch_value == selected_swatch_value or visible_swatch_count < swatch_limit # Create a new array with the current value, then concat it into the main array assign new_array = swatch_value | sort assign visible_swatches = visible_swatches | concat: new_array unless swatch_value == selected_swatch_value assign visible_swatch_count = visible_swatch_count | plus: 1 endunless endif endfor -%} {%- for swatch_value in visible_swatches -%} {% liquid # Limit S|M|L to low-variant products to ensure collection page performance if product.variants.size < 200 assign this_color_variants = product.variants | where: swatch_position_key, swatch_value assign in_stock_options = this_color_variants | where: 'available' if inline_variant_buttons assign inline_variants = this_color_variants endif else # Fall back to quickview with section-rendering API variant selection if there's too many variants assign inline_variant_buttons = false assign inline_variants = nil endif # Use the default variant for the swatch value. If that variant has media attached the image will change. # If not, the variant image will not change when swatch is selected. assign current_variant = swatch_value.variant # If there is a variant selected from filters, show that variant first assign visible = false if product.selected_variant.id == current_variant assign visible = true elsif forloop.first assign visible = true endif if visible and preload assign preload_variant = true endif if visible and eagerload assign eagerload_variant = true endif -%} {% render 'product-grid-item-variant', product: product, variant: current_variant, badge_string: badge_string, visible: visible, instant_add_button: instant_add_button, inline_variant_buttons: inline_variant_buttons, inline_variants: inline_variants, section_width: section_width, swatch_option: swatch_option, eagerload: eagerload_variant, preload: preload_variant, placeholder: placeholder, columns_desktop: columns_desktop, columns_tablet: columns_tablet, columns_mobile: columns_mobile %} {% capture swatch_link_markup %} {{ swatch_link_markup }} {% if swatch_value.swatch.image %} {% render 'image', img_object: swatch_value.swatch.image, width: 34, wh_ratio: 1 %} {% endif %} {% endcapture %} {% endfor %} {% else %} {%- liquid # Limit S|M|L to low-variant products to ensure collection page performance if inline_variant_buttons and product.variants.size < 200 assign inline_variants = product.variants else assign inline_variant_buttons = false assign inline_variants = nil endif assign selected_variant = product.selected_variant | default: product.variants[0] if preload assign preload_variant = true endif if eagerload assign eagerload_variant = true endif -%} {% render 'product-grid-item-variant', product: product, variant: selected_variant, badge_string: badge_string, visible: true, instant_add_button: instant_add_button, inline_variant_buttons: inline_variant_buttons, inline_variants: inline_variants, section_width: section_width, preload: preload_variant, eagerload: eagerload_variant, placeholder: placeholder, columns_desktop: columns_desktop, columns_tablet: columns_tablet, columns_mobile: columns_mobile %} {% endif %}

{{ product.title | strip_html | escape }}

{%- if settings.product_grid_show_rating and product.metafields.reviews.rating.value != blank -%}
{% render 'product-rating', product: product, show_rating_count: settings.product_grid_show_rating_count %}
{%- endif -%}
{%- if settings.show_cutline -%} {{ product.metafields.theme.cutline.value }} {%- endif -%} {% if product.price_varies %}{{ 'products.general.from' | t }} {% endif %} {%- if settings.currency_code_enable -%} {{ product_price | money_with_currency }} {%- else -%} {{ product_price | money }} {%- endif -%} {% if on_sale %} {%- if settings.currency_code_enable -%} {{ product_compare_at_price | money_with_currency }} {%- else -%} {{ product_compare_at_price | money }} {%- endif -%} {% endif %}
{% if product.selected_or_first_available_variant.unit_price %} {% capture unit_price_separator %} {% endcapture %} {% capture unit_price_base_unit %} {% if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 %} {{ product.selected_or_first_available_variant.unit_price_measurement.reference_value }} {% endif %} {{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }} {% endcapture %}

{%- if settings.currency_code_enable -%} {{ product.selected_or_first_available_variant.unit_price | money_with_currency }} {%- else -%} {{ product.selected_or_first_available_variant.unit_price | money }} {%- endif -%} {{ unit_price_separator }}{{ unit_price_base_unit }}

{% endif %} {% comment %} {% if sold_out %}

{{ 'products.product.sold_out' | t }}

{% endif %} {% endcomment %} {% assign active_variant = product.selected_or_first_available_variant %}
{%- form 'product', product, class: 'product-card__atc-form', novalidate: 'novalidate', data-type: 'add-to-cart-form', is: 'product-form' -%} {%- endform -%}
{%- if has_siblings -%} {%- assign sibs_collection = collections[product.metafields.theme.siblings.value] -%} {% if sibs_collection != blank %} {%- assign excess_swatches = sibs_collection.products_count | minus: swatch_limit -%}

{{ 'collections.general.swatches_with_count' | t: count: sibs_collection.products_count }}

{%- for sib_product in visible_siblings -%} {%- assign title_safe = sib_product.title | strip_html | escape -%} {%- assign color_name = sib_product.metafields.theme.cutline.value | default: title_safe -%}
{% assign image = sib_product.featured_media.preview_image %} {% assign image_width = 26 %} {% assign image_width_2x = image_width | times: 2 | at_most: image.width %} {% assign alt = image.alt | default: color_name %} {% capture srcset %} {{ image | image_url: width: image_width_2x }} 2x, {{ image | image_url: width: image_width }} {% endcapture %} {%- render 'image', img_object: image, wh_ratio: 1.0, srcset: srcset, fetchpriority: 'low', width: image_width, placeholder: placeholder, alt: alt -%}
{%- endfor -%} {% if excess_swatches > 0 %} +{{ excess_swatches }}{% endif %}
{% endif %} {%- elsif has_swatches and swatch_link_markup != '' -%} {%- assign excess_swatches = swatch_option.values.size | minus: swatch_limit -%}

{{ 'collections.general.swatches_with_count' | t: count: swatch_option.values.size }}

{{ swatch_link_markup }} {% if excess_swatches > 0 %} +{{ excess_swatches }} {% endif %}
{%- endif -%}