commit 6f73cf95e08ea22044e17c206708c71cf9ac6c6f Author: Axel Date: Tue Jun 9 17:13:52 2026 +0800 first commit diff --git a/snippets/product-grid-item.liquid b/snippets/product-grid-item.liquid new file mode 100644 index 0000000..8f37078 --- /dev/null +++ b/snippets/product-grid-item.liquid @@ -0,0 +1,616 @@ +{%- 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 = columns | default: 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 + + 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 product_price < product.price and product_compare_at_price == 0 or product_compare_at_price == blank + assign product_compare_at_price = product.price + endif + + if product_compare_at_price > product_price + assign on_sale = true + endif + + assign money_product_price = product_price | money + + if settings.currency_code_enable + assign money_product_price = product_price | money_with_currency + 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 -}} + + +
+ {{ product.metafields.judgeme.badge }} +
+ +{%- endcapture -%} + +{%- capture info_separator -%} + +{%- endcapture -%} + +{%- capture product_info_price -%} + 1 %} tabindex="-1"{% endif %} data-grid-link> + {%- liquid + # product.price is equivalent to product.price_min + assign raw_product_price = product.metafields.app--168074346497.min_auto_discounted_price | default: product.price + + 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 = raw_product_price | money_with_currency + assign product_price_min = raw_product_price | money_with_currency + else + assign product_price = raw_product_price | money + assign product_price_min = raw_product_price | money + endif + -%} + + {%- if product.price_varies -%} + {{- 'products.general.from_text_html' | t: price: product_price_min -}} + {%- else -%} + {%- if on_sale -%} + {{ money_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="{{ forloop.index0 }}" + data-grid-image-target="{{ media.id }}" + data-grid-image-target-default="{{ 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 current_variant_price = current_variant.metafields.app--168074346497.auto_discounted_price.value | default: current_variant.price + assign current_variant_compare_at_price = current_variant.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 current_variant_price = current_variant.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil + endif + + if current_variant_price < current_variant.price and current_variant_compare_at_price == 0 or current_variant_compare_at_price == blank + assign current_variant_compare_at_price = current_variant.price + endif + + comment + assign price_difference = price_compare | minus: price + endcomment + + assign price_difference = current_variant_compare_at_price | minus: current_variant_price + + 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 + + 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: current_variant_compare_at_price | 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 -%} + + {% render 'aframe_sswatch', product:product %} + + {%- 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 -%} +
+
\ No newline at end of file diff --git a/widget.css b/widget.css new file mode 100644 index 0000000..1718b3b --- /dev/null +++ b/widget.css @@ -0,0 +1 @@ +.yagi-price-container{display: flex; gap: 0.5em; align-items: center; margin-top: -1.5rem;} .yagi-price-container .price__sale { display: flex; flex-direction: row-reverse !important; justify-content: flex-end; gap: 0.5em; align-items: center;} .yagi-original-price { font-size: calc(1.1rem * var(--adjust-body)); } .yagi-discounted-price { font-size: calc(1.1rem * var(--adjust-body)); color: #FF6D6D; font-weight: bold; } .yagi-sale-badge { padding: 3px 9px; background-color: #FF6D6D; color: #FFF; font-size: calc(.75rem * var(--adjust-body)); border-radius: 3px; } \ No newline at end of file