{% comment %} Renders list of products in grid layout Accepts: - product: {Object} product (required) - grid_strings: {String} contains a string of grid classes - animation_delay: {Int} animation timing for load - last_element: {Boolean} True when custom image is taking up the first slot for the collection and the loop is on the last element for the page. - index: element index in the loop Usage: {% render 'product-grid-item', product: product, grid_strings: grid_strings, index: index %} {% endcomment %} {%- liquid assign additional_attributes = additional_attributes | default: '' assign aos_image_delay_default = animation_delay | times: 150 assign aos_image_duration_default = animation_delay | times: 100 | plus: 800 assign aos_text_duration_default = animation_delay | times: 50 | plus: 800 assign aos_image_delay = aos_image_delay | default: aos_image_delay_default assign aos_image_duration = aos_image_duration | default: aos_image_duration_default assign aos_text_duration = aos_text_duration | default: aos_text_duration_default assign product_price_raw = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price assign product_price_min_raw = product.price_min assign product_compare_at_price_raw = product.compare_at_price if product.metafields.app--168074346497.discount_percentage.value > 0.01 assign deducted_percentage = 1.0 | minus: product.metafields.app--168074346497.discount_percentage.value assign product_price_raw = product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil assign product_price_min_raw = product_price_raw assign product_compare_at_price_raw = product.price if product.compare_at_price > product_compare_at_price_raw assign product_compare_at_price_raw = product.compare_at_price endif elsif product_price_raw < product.price assign product_price_min_raw = product_price_raw assign product_compare_at_price_raw = product.price if product.compare_at_price > product_compare_at_price_raw assign product_compare_at_price_raw = product.compare_at_price endif endif if settings.currency_code_enable assign product_price_min = product_price_min_raw | money_with_currency assign product_compare_at_price = product_compare_at_price_raw | money_with_currency assign product_unit_price = product.unit_price | money_with_currency else assign product_price_min = product_price_min_raw | money assign product_compare_at_price = product_compare_at_price_raw | money assign product_unit_price = product.unit_price | money endif unless grid_strings assign grid_strings = "one-whole" endunless assign border_class = '' if settings.product_grid_outline == false assign border_class = 'product-item--borderless' endif assign alignment_class = '' if settings.product_grid_center == true assign alignment_class = 'product-item--centered' endif -%} {%- if settings.quickview_enable == false and settings.color_swatches -%} {%- assign has_colors = false -%} {%- capture swatches -%} {%- capture swatch_translation -%}{{ 'general.swatches.color' | t }}{%- endcapture -%} {%- 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_colors = true -%}
{%- break -%} {%- endif -%} {%- endfor -%} {%- endcapture -%} {%- endif -%} {%- assign double_img = false -%} {%- if product.media[1].preview_image and settings.image_hover_enable -%} {%- assign double_img = true -%} {%- endif -%} {%- assign current_variant = product.first_available_variant -%} {%- assign product_url = product.url | within: collection -%} {%- capture item_unique -%}product-item--{{ section.id }}-{{ index }}{%- endcapture -%} {%- assign animation_anchor_default = item_unique | prepend: '.' -%} {%- assign animation_anchor = animation_anchor | default: animation_anchor_default -%}
{%- capture over_image_content -%} {%- assign product_tags = product.tags | join: ',' | append: ',' -%} {%- assign preorder = false -%} {%- assign is_preorder_meta = false -%} {%- assign on_sale = false -%} {%- assign sold_out = false -%} {%- assign badge = '' -%} {%- if product.metafields.theme.badge != blank and product.metafields.theme.badge.type == 'single_line_text_field' -%} {%- assign badge = product.metafields.theme.badge.value -%} {%- endif -%} {%- if badge == '' and product_tags contains '_badge_' -%} {%- assign badge = product_tags | split: '_badge_' -%} {%- assign badge = badge[1] | split: ',' | first | replace: '_', ' ' -%} {%- endif -%} {%- if product.metafields.theme.preorder.type == 'boolean' and product.metafields.theme.preorder.value == true -%} {%- assign is_preorder_meta = true -%} {%- endif -%} {%- if product_tags contains '_preorder' or is_preorder_meta -%} {%- assign preorder = true -%} {%- endif -%} {%- if product_compare_at_price_raw > product_price_raw and settings.sale_tags_enable -%} {%- assign on_sale = true -%} {%- endif -%} {%- unless product.available -%} {%- assign sold_out = true -%} {%- endunless -%} {%- if badge != '' -%} {{ badge }} {%- elsif preorder and sold_out == false -%} {{ 'products.product.pre_order' | t }} {%- elsif on_sale and sold_out == false -%} {{ 'products.product.on_sale' | t }} {%- endif -%} {%- if settings.quickview_enable and current_variant -%}
 
{%- endif -%} {%- endcapture -%}
{% if product.media.size > 0 %}
{% if settings.color_swatches and current_variant %} {%- assign image_inner_empty = true -%} {%- for variant in product.variants -%} {%- if variant.featured_image != blank -%} {%- assign image_inner_empty = false -%} {%- assign variant_title = variant.title | replace: '"', "'" -%} {%- endif -%} {%- endfor -%} {%- if image_inner_empty -%}   {%- endif -%} {% else %}   {% endif %}
{% if double_img %}
 
{% endif %} {% else %} {%- comment -%} Show "No image" if product has no media {%- endcomment -%} {%- assign image_url_pattern = product.featured_image | img_url: '540x' | replace: '_540x.', '_{width}x.' -%} {%- assign image_widths = "[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" -%}
{{ product.title | strip_html | escape }}
{% endif %} {{ over_image_content }}
{%- if settings.product_grid_show_rating and product.metafields.reviews.rating.value != blank -%}
{% render 'product-rating', product: product %}
{%- endif -%}

{{ product.title | strip_html | escape }}

{%- if product.metafields.theme.cutline != blank and product.metafields.theme.cutline.type == 'single_line_text_field' -%}

{{ product.metafields.theme.cutline.value }}

{%- endif -%} {% if product.available %} {% if product.price_varies %} {{ 'products.general.from' | t }} {% endif %} {%- if product.price == 0 and product.price_varies == false -%} {{ 'general.money.free' | t }} {%- else -%} {{ product_price_min }} {%- endif -%} {% if product_compare_at_price_raw > product_price_raw %} {{ product_compare_at_price }} {% endif %} {% else %} {{ 'products.product.sold_out' | t }} {% endif %} {{ product.metafields.stamped.badge }} {% if current_variant.unit_price %} {% capture unit_price_separator %} {% endcapture %} {% capture unit_price_base_unit %} {% if current_variant.unit_price_measurement.reference_value != 1 %} {{ current_variant.unit_price_measurement.reference_value }} {% endif %} {{ current_variant.unit_price_measurement.reference_unit }} {% endcapture %}
{{ product_unit_price }}{{ unit_price_separator }}{{ unit_price_base_unit }} {% endif %} {% if settings.quickview_enable == false and settings.color_swatches %} {% if has_colors %}   {% endif %} {{ swatches }} {% endif %}