{%- comment -%} Renders list of products in grid layout Accepts: - product: {Object} product (required) - carousel: {Boolean} Show the product images in carousel. Default: false - image_animation: {String} Type of the image animation - text_animation: {String} Type of the text animation - animation_delay: {Number} Factor based on grid items per row - animation_anchor: {String} Hook for the AOS animation - image_aspect_ratio_setting: {String} image aspect ratio setting from section settings Usage: {% render 'product-grid-item', product: product, carousel: carousel, animation: animation, animation_delay: animation_delay, image_aspect_ratio_setting: image_aspect_ratio_setting %} {%- endcomment -%} {%- liquid assign columns = settings.products_per_row_on_desktop | plus: 0 assign columns_mobile = columns_mobile | default: settings.products_per_row_on_mobile | plus: 0 assign counter_even = mobile_counter | modulo: 2 assign counter_second_tablet = tablet_counter | plus: 1 | modulo: 3 assign counter_third_tablet = tablet_counter | modulo: 3 assign grid_item_class = '' if counter_even == 0 assign grid_item_class = grid_item_class | append: ' grid-item--even' endif if columns > 2 if counter_second_tablet == 0 assign grid_item_class = grid_item_class | append: ' grid-item--second-tablet' elsif counter_third_tablet == 0 assign grid_item_class = grid_item_class | append: ' grid-item--third-tablet' endif endif case columns when 1 assign size_desktop = 'one-whole' when 2 assign size_desktop = 'one-half' when 3 assign size_desktop = 'one-third' when 4 assign size_desktop = 'one-quarter' endcase case columns_mobile when 1 assign size_mobile = 'mobile--one-whole' when 2 assign size_mobile = 'mobile--one-half' endcase if carousel assign size_mobile = 'mobile--one-whole' assign tabindex_hidden = true endif assign on_sale = false assign sold_out = false assign custom_badge_metafield = false assign single_variant = false if product.variants.size == 1 and product.selling_plan_groups.size == 0 assign single_variant = true endif if product.metafields.theme.badge != blank and product.metafields.theme.badge.type == 'single_line_text_field' assign custom_badge_metafield = true assign custom_badge_metafield_text = product.metafields.theme.badge.value endif # start Yagi app code assign active_discount = true assign product_price = product.price assign product_compare_at_price = product.compare_at_price assign empty_array = "" | split: "" assign dormant_discounts = shop.metafields.app--168074346497.dormant_discounts.value | default: empty_array assign target_discount_id = product.metafields.app--168074346497.applied_discount_id.value for dormant_discount in dormant_discounts if dormant_discount == target_discount_id assign active_discount = false endif endfor if active_discount assign product_price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.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 = product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil assign product_compare_at_price = product.price if product.compare_at_price > product_compare_at_price assign product_compare_at_price = product.compare_at_price endif endif if product_price < product.price and product_compare_at_price == blank assign product_compare_at_price = product.price endif endif # end Yagi app code if product_compare_at_price > product_price assign on_sale = true endif unless product.available assign sold_out = true endunless assign quick_buy = settings.quick_buy assign current_variant = product.selected_or_first_available_variant assign featured_media = product.featured_media assign product_grid_hover = settings.product_grid_hover assign product_grid_hover_animation = settings.product_grid_hover_animation if product.media.size <= 1 or product_grid_hover == 'none' assign product_grid_hover = false endif capture item_unique echo 'product-item--' | append: section.id | append: '-' | append: product.id endcapture assign animations_enabled = settings.animations_enabled assign image_animation = image_animation | default: 'zoom-out' assign animation_anchor_default = item_unique | prepend: '#' assign animation_anchor = animation_anchor | default: animation_anchor_default assign text_animation = text_animation | default: 'fade' assign currency_code_enable = settings.currency_code_enable assign alignment_inline = false assign product_alignment_class = ' product-grid-item__info--' | append: settings.content_alignment if settings.content_alignment == 'inline' assign alignment_inline = true endif assign has_colors = false if settings.enable_color_swatches_collection and product.has_only_default_variant == false capture swatch_translation echo 'general.swatches.color' | t endcapture assign swatch_labels = swatch_translation | remove: ' ' | replace: ', ', ',' | replace: ' ,', ',' | split: ',' for label in swatch_labels assign sanitized_label = label | strip if product.options_by_name[sanitized_label].values.size > 0 assign color_label = label assign has_colors = true break endif endfor endif capture cart_icon case settings.cart_icon when 'bag' render 'icon-shopping-bag' when 'shopping_cart' render 'icon-shopping-cart' endcase endcapture -%} {%- capture product_title -%} 1 %} tabindex="-1"{% endif %} data-grid-link>

{{- product.title | strip_html | escape -}}
{%- endcapture -%} {%- capture info_separator -%} {%- endcapture -%} {%- capture product_info_price -%} 1 %} tabindex="-1"{% endif %} data-grid-link> {%- liquid if product_price == 0 and product.price_varies == false assign product_price = 'products.product.free' | t assign product_price_min = 'products.product.free' | t elsif currency_code_enable assign product_price = product_price | money_with_currency assign product_price_min = product_price | money_with_currency else assign product_price = product_price | money assign product_price_min = product_price | money endif -%} {%- if product.price_varies -%} {{- 'products.general.from_text_html' | t: price: product_price_min -}} {%- else -%} {%- if on_sale -%} {{ product_price }} {%- if currency_code_enable -%} {{- product_compare_at_price | money_with_currency -}} {%- else -%} {{- product_compare_at_price | money -}} {%- endif -%} {%- else -%} {{- product_price -}} {%- endif -%} {%- endif -%} {%- if current_variant.unit_price_measurement -%} {%- capture unit_price_separator -%} {%- endcapture -%} {{ current_variant.unit_price | money }} {{ unit_price_separator }} {%- if current_variant.unit_price_measurement.reference_value != 1 -%} {{- current_variant.unit_price_measurement.reference_value -}} {%- endif -%} {{ current_variant.unit_price_measurement.reference_unit }} {%- endif -%} {%- endcapture -%}
{%- comment -%} Image {%- endcomment -%}
{%- liquid assign grid_image_size = settings.image_size assign image = featured_media.preview_image assign image_aspect_ratio = image.aspect_ratio | default: 1 assign image_container_class = 'product__media__container' if image_aspect_ratio_setting == blank assign image_aspect_ratio_setting = settings.image_aspect_ratio endif if grid_image_size == 'contain' assign container_aspect_ratio = 1 | divided_by: image_aspect_ratio_setting if image_aspect_ratio < container_aspect_ratio assign image_container_class = image_container_class | append: ' product__media__container--portrait' else assign image_container_class = image_container_class | append: ' product__media__container--landscape' endif endif -%}
1 %} tabindex="-1"{% endif %} > {%- if product.media.size > 0 -%}
{%- capture image_attributes -%} data-product-image data-grid-image="0" data-grid-image-target="{{ featured_media.id }}" data-grid-image-target-default="{{ featured_media.id }}" {%- endcapture -%} {%- render 'image-fill', is_background: true, img_object: image, image_attributes: image_attributes, classes: 'product__media product__media--featured-visible' -%} {%- if has_colors -%} {%- render 'image-fill', is_background: true, img_object: image, image_attributes: 'data-product-image-secondary', classes: 'product__media product__media--featured-secondary' -%} {%- endif -%}
{%- else -%}
{%- render 'image-fill', is_background: true, img_object: product.featured_image, classes: 'product__media', placeholder_svg: 'product-1' -%}
{%- endif -%} {%- if product_grid_hover == 'slideshow' and product.media.size > 1 -%}
{%- for media in product.media limit: 4 -%} {%- if media != featured_media -%} {%- assign image = media.preview_image -%}
{%- render 'image-fill', is_background: true, img_object: image, classes: 'product__media' -%}
{%- endif -%} {%- endfor -%}
{%- if product.media.size > 2 -%}
{%- endif -%} {%- elsif product_grid_hover == 'image' and product.media[1].preview_image != blank -%} {%- assign image = product.media[1].preview_image -%}
{%- render 'image-fill', is_background: true, img_object: image, image_attributes: 'data-product-image-hover', classes: 'product__media__hover-img product__media__hover-img--visible product__media' -%} {%- if has_colors -%} {%- endif -%}
{%- endif -%} {%- liquid assign show_sale_badge = settings.show_sale_badge assign show_custom_badge = settings.show_custom_badge assign show_sold_badge = settings.show_sold_badge assign show_saving_badge = settings.show_saving_badge assign sold_out_text = 'products.product.sold_out' | t assign sale_text = 'products.product.sale' | t if settings.show_saving_badge assign price = current_variant.price assign price_compare = current_variant.compare_at_price assign price_difference = price_compare | minus: price comment assign test_variants = product.variants | where: 'compare_at_price' | where: 'available', true if test_variants.size > 0 for variant in test_variants assign variant_price_difference = variant.compare_at_price | minus: variant.price if variant_price_difference > price_difference assign price = variant.price assign price_compare = variant.compare_at_price assign price_difference = variant_price_difference endif endfor endif endcomment if settings.currency_code_enable assign discount = price_difference | money_with_currency | remove: '.00' | remove: ',00' else assign discount = price_difference | money_without_trailing_zeros endif if settings.saving_badge_type == 'percentage' assign percent_off = price_difference | times: 1.00 | divided_by: price_compare | times: 100 assign discount = percent_off | floor | append: '%' endif if product.variants.size == 1 and price_difference > 0 assign saving_badge_text = 'products.product.save_badge_html' | t: discount: discount endif if product.variants.size > 1 and price_difference > 0 assign saving_badge_text = 'products.product.save_badge_up_to_html' | t: discount: discount endif if saving_badge_text == blank assign show_saving_badge = false endif endif -%} {%- capture product_badges -%} {%- if custom_badge_metafield and show_custom_badge -%}
{{ custom_badge_metafield_text }}
{%- endif -%} {%- if sold_out and show_sold_badge -%}
{{ sold_out_text }}
{%- endif -%} {%- if on_sale and show_sale_badge and sold_out == false and show_saving_badge == false -%}
{{ sale_text }}
{%- endif -%} {%- if show_saving_badge -%}
{{ saving_badge_text }}
{%- endif -%} {%- endcapture -%} {%- unless product_badges == blank -%}
{{- product_badges -}}
{%- endunless -%}{%- unless quick_buy == 'none' -%}
{%- if single_variant -%} {%- capture unique -%}{{ section.id }}-{{ product.id }}{%- endcapture -%} {%- form 'product', product, data-product-form: '', data-quickbuy-form: '', id: unique, class: 'quick__form' -%} {%- endform -%} {%- else -%} 1 %} tabindex="-1"{% endif %}> {{ cart_icon }} {{ 'products.product.quick_view' | t }} {%- endif -%}
{%- endunless -%}
{%- comment -%} Product info {%- endcomment -%}
{%- if has_colors -%} {%- assign color_option = product.options_by_name[color_label].values -%} {%- for option in color_option -%} {%- liquid for variant in product.variants if variant.options contains option assign swatch_variant = variant break endif endfor assign swatch_image_src = swatch_variant.featured_media.preview_image.src if swatch_image_src assign swatch_image_src = swatch_image_src | image_url: width: 600 | replace: '&width=600', '' else assign swatch_image_src = '' endif -%}
{%- assign color_variant_text = 'general.swatches.color_variant' | t -%} {%- assign swatch_product_title = product.title | strip_html | escape -%} {{ swatch_product_title | append: ' - ' | append: color_variant_text | append: ': ' | append: option }}
{%- endfor -%} {%- if color_option.size > 5 -%} {%- assign more_colors = color_option.size | minus: 4 -%} {%- endif -%} {%- endif -%} {%- unless alignment_inline -%} {% comment %} Title {% endcomment %} {{ product_title }} {%- else -%} {% comment %} Title - Price {% endcomment %}
{{ product_title }} {{ info_separator }} {{ product_info_price }}
{%- endunless -%} {%- comment -%} Product tagline {%- endcomment -%} {%- assign cutline_color = settings.cutline_color -%}{%- if product.metafields.theme.cutline != blank and product.metafields.theme.cutline.type == 'single_line_text_field' -%} {%- liquid capture style case cutline_color when 'body' echo 'color: var(--text);' when 'accent' echo 'color: var(--accent);' endcase endcapture -%}

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

{%- endif -%} {%- unless alignment_inline -%} {%- comment -%} Price {%- endcomment -%} {{ product_info_price }} {%- endunless -%} {%- if settings.show_rating and product.metafields.reviews != empty -%} 1 %} tabindex="-1"{% endif %} data-grid-link> {%- render 'rating', reviews: product.metafields.reviews, show_rating_count: settings.show_rating_count, tabindex_hidden: tabindex_hidden -%} {%- endif -%}