Product-grid-Item.liquid Code
user_5540440
plain_text
6 months ago
11 kB
3
Indexable
Product-grid-Item.liquid Code {%- liquid unless grid_item_width assign grid_item_width = 'medium-up--one-quarter small--one-half' endunless unless per_row assign per_row = '4' endunless assign on_sale = false if product.compare_at_price > product.price assign on_sale = true endif assign product_tags = product.tags | join: ',' assign has_custom_label = false if product.metafields.theme.label and product.metafields.theme.label != blank assign has_custom_label = true assign custom_label = product.metafields.theme.label.value elsif product_tags contains '_label_' for tag in product.tags if tag contains '_label_' assign tag_starts_with = tag | slice: 0 if tag_starts_with == '_' assign has_custom_label = true assign custom_label = tag | replace: '_label_', '' endif endif endfor endif -%} <div class="grid__item grid-product {{ grid_item_width }}{% if settings.quick_shop_enable %} grid-product__has-quick-shop{% endif %}" data-aos="row-of-{{ per_row }}" data-product-handle="{{ product.handle }}" data-product-id="{{ product.id }}"> <div class="grid-product__content"> {%- if has_custom_label -%} <div class="grid-product__tag grid-product__tag--custom"> {{ custom_label }} </div> {%- else -%} {%- unless product.available -%} <div class="grid-product__tag grid-product__tag--sold-out"> {{ 'products.product.sold_out' | t }} </div> {%- endunless -%} {%- if on_sale and product.available -%} <div class="grid-product__tag grid-product__tag--sale"> {{ 'products.general.sale' | t }} </div> {%- endif -%} {%- endif -%} {%- liquid assign fixed_aspect_ratio = false unless settings.product_grid_image_size == 'natural' assign fixed_aspect_ratio = true endunless assign preview_image = product.featured_media.preview_image assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} <a href="{{ product.url | within: collection }}" class="grid-product__link"> <div class="grid-product__image-mask"> {%- if settings.quick_shop_enable -%} <div class="quick-product__btn quick-product__btn--not-ready js-modal-open-quick-modal-{{ product.id }} small--hide"> <span class="quick-product__label">{{ settings.quick_shop_text }}</span> </div> {%- endif -%} {%- if fixed_aspect_ratio -%} <div class="grid__image-ratio grid__image-ratio--{{ settings.product_grid_image_size }}"> <img class="lazyload{% unless settings.product_grid_image_fill %} grid__image-contain{% endunless %}" data-src="{{ img_url }}" data-widths="[360, 540, 720, 900, 1080]" data-aspectratio="{{ preview_image.aspect_ratio }}" data-sizes="auto" alt="{{ preview_image.alt | escape }}"> </div> {%- else -%} <div class="image-wrap" style="height: 0; padding-bottom: {{ 100 | divided_by: preview_image.aspect_ratio }}%;" > <img class="grid-product__image lazyload" data-src="{{ img_url }}" data-widths="[360, 540, 720, 900, 1080]" data-aspectratio="{{ preview_image.aspect_ratio }}" data-sizes="auto" alt="{{ preview_image.alt | escape }}"> <noscript> <img class="grid-product__image lazyloaded" src="{{ preview_image | img_url: '400x' }}" alt="{{ preview_image.alt | escape }}"> </noscript> </div> {%- endif -%} {%- if settings.product_hover_image and product.media.size > 1 -%} {%- for media in product.media offset: 1 limit: 1 -%} {%- assign second_image = media.preview_image -%} {%- endfor -%} <div class="grid-product__secondary-image small--hide"> {%- assign img_url = second_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} <img class="lazyload" data-src="{{ img_url }}" data-widths="[360, 540, 720, 1000]" data-aspectratio="{{ second_image.aspect_ratio }}" data-sizes="auto" alt="{{ second_image.alt }}"> </div> {%- endif -%} {%- if settings.enable_swatches -%} {%- assign swatch_trigger = 'products.general.color_swatch_trigger' | t | downcase -%} {%- for option in product.options_with_values -%} {%- liquid assign option_name = option.name | downcase assign is_color = false if option_name contains swatch_trigger assign is_color = true elsif swatch_trigger == 'color' and option_name contains 'colour' assign is_color = true endif -%} {%- if is_color -%} {%- assign option_index = forloop.index0 -%} {%- assign values = '' -%} {%- for variant in product.variants -%} {%- assign value = variant.options[option_index] %} {%- unless values contains value -%} {%- liquid assign values = values | join: ',' | append: ',' | append: value | split: ',' -%} {%- if variant.image -%} <div class="grid-product__color-image grid-product__color-image--{{ variant.id }} small--hide"> </div> {%- endif -%} {%- endunless -%} {%- endfor -%} {%- endif -%} {%- endfor -%} {%- endif -%} </div> <div class="grid-product__meta"> <div class="grid-product__title grid-product__title--{{ settings.type_product_style }}">{{ product.title }}</div> {%- if settings.vendor_enable -%} <div class="grid-product__vendor">{{ product.vendor }}</div> {%- endif -%} <div class="grid-product__price"> {%- if on_sale -%} <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span> <span class="grid-product__price--original">{{ product.compare_at_price | money }}</span> <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span> {%- endif -%} {%- if product.price_varies -%} {%- assign price = product.price_min | money -%} {{ 'products.general.from_text_html' | t: price: price }} {%- else -%} {{ product.price | money }} {%- endif -%} {%- if on_sale -%} {%- if settings.product_save_amount -%} {%- if settings.product_save_type == 'dollar' -%} {%- capture saved_amount -%}{{ product.compare_at_price | minus: product.price | money }}{%- endcapture -%} {%- else -%} {%- capture saved_amount -%}{{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round }}%{%- endcapture -%} {%- endif -%} <span class="grid-product__price--savings"> {{ 'products.general.save_html' | t: saved_amount: saved_amount }} </span> {%- endif -%} {%- endif -%} {%- assign product_variant = product.selected_or_first_available_variant -%} {%- if product_variant.unit_price_measurement -%} <div class="product__unit-price"> {%- capture unit_price_base_unit -%} {%- if product_variant.unit_price_measurement -%} {%- if product_variant.unit_price_measurement.reference_value != 1 -%} {{ product_variant.unit_price_measurement.reference_value }} {%- endif -%} {{ product_variant.unit_price_measurement.reference_unit }} {%- endif -%} {%- endcapture -%} {{ product_variant.unit_price | money }}/{{ unit_price_base_unit }} </div> {%- endif -%} </div> </div> </a> </div> {%- if settings.enable_swatches -%} {%- liquid assign swatch_trigger = 'products.general.color_swatch_trigger' | t | downcase assign swatch_file_extension = 'png' assign color_count = 0 -%} {%- for option in product.options_with_values -%} {%- liquid assign option_name = option.name | downcase assign is_color = false if option_name contains swatch_trigger assign is_color = true elsif swatch_trigger == 'color' and option_name contains 'colour' assign is_color = true endif -%} {%- if is_color -%} {%- assign option_index = forloop.index0 -%} {%- assign values = '' -%} <div class="grid-product__colors grid-product__colors--{{ product.id }}"> {%- for variant in product.variants -%} {%- assign value = variant.options[option_index] %} {%- unless values contains value -%} {%- liquid assign values = values | join: ',' | append: ',' | append: value | split: ',' assign color_file_name = value | handle | append: '.' | append: swatch_file_extension assign color_image = color_file_name | file_img_url: '50x50' | prepend: 'https:' | split: '?' | first assign color_swatch_fallback = value | split: ' ' | last | handle assign color_count = color_count | plus: 1 -%} <a href="{{ variant.url | within: collection }}" class="color-swatch color-swatch--small color-swatch--{{ value | handle }}{% if variant.image %} color-swatch--with-image{% endif %}" {% if variant.image %} data-variant-id="{{ variant.id }}" data-variant-image="{{ variant.image | img_url: '400x' }}" {% endif %} aria-label="{{ product.title }} - {{ value }}" style="background-color: {{ color_swatch_fallback }};{% if images[color_file_name] != blank %} background-image: url({{ color_image }});{% endif %}"> <span class="visually-hidden">{{ value }}</span> </a> {%- endunless -%} {%- endfor -%} </div> {%- if color_count < 2 -%} {%- style -%} .grid-product__colors--{{ product.id }} { display: none; } {%- endstyle -%} {%- endif -%} {%- endif -%} {%- endfor -%} {%- endif -%} {%- if settings.enable_product_reviews -%} <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span> {%- endif -%} </div>
Editor is loading...
Leave a Comment