diff --git a/snippets/product-grid-item.liquid b/snippets/product-grid-item.liquid new file mode 100644 index 0000000..2fac945 --- /dev/null +++ b/snippets/product-grid-item.liquid @@ -0,0 +1,331 @@ +{% 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 %} + +
+