From 570e1fb41bdcc4f08f46e34e2cc2efd7639e09de Mon Sep 17 00:00:00 2001 From: Axel Date: Sun, 1 Nov 2026 19:05:05 +0800 Subject: [PATCH] Initial commit --- snippets/product-grid-item.liquid | 393 +++++++++++++++++++++ snippets/product-list-item.liquid | 425 +++++++++++++++++++++++ templates/product.recently-viewed.liquid | 190 ++++++++++ 3 files changed, 1008 insertions(+) create mode 100644 snippets/product-grid-item.liquid create mode 100644 snippets/product-list-item.liquid create mode 100644 templates/product.recently-viewed.liquid diff --git a/snippets/product-grid-item.liquid b/snippets/product-grid-item.liquid new file mode 100644 index 0000000..d716882 --- /dev/null +++ b/snippets/product-grid-item.liquid @@ -0,0 +1,393 @@ +{%- liquid + if empty_state + assign product_link = '/admin/products' + assign vendor = 'home_page.onboarding.product_vendor' | t + assign title = 'home_page.onboarding.product_title' | t + assign compare_at_price = 2999 + assign price = 1999 + else + assign variant = product.first_available_variant + assign product_link = product.url | within: collection + assign vendor = product.vendor + assign title = product.title + assign compare_at_price = product.compare_at_price + assign price = product.price + endif + + # start yagi app code + assign product_price_min = product.price_min + unless empty_state + assign active_discount = true + + 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 price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price + assign compare_at_price = 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 price = product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil + assign product_price_min = price + + assign compare_at_price = product.price + + if product.compare_at_price > compare_at_price + assign compare_at_price = product.compare_at_price + endif + endif + endif + endunless + # end yagi app code + + assign is_on_sale = false + assign is_sold_out = true + + if compare_at_price > price + assign is_on_sale = true + endif + + if product.available or empty_state + assign is_sold_out = false + endif + + assign has_hover_image = false + assign has_touch_image = false + + if settings.dbtfy_show_second_image_on_hover_show_on_hover and product.media.size > 1 + assign has_hover_image = true + assign hover_image = product.media[1].preview_image + endif + + if settings.dbtfy_show_second_image_on_hover_enable_touch_screen and product.media.size > 1 + assign has_touch_image = true + endif + + assign variant = product.selected_or_first_available_variant + + capture product_collections + for collection in product.collections + echo collection.handle + + unless forloop.last + echo ',' + endunless + endfor + endcapture + + assign has_color_swatches = false + + if settings.dbtfy_color_swatches_grid_options != blank + if product.available and product.variants.size > 1 + assign has_color_swatches = true + endif + endif + + assign hover_animation = settings.dbtfy_show_second_image_on_hover_hover_animation + + case hover_animation + when 'fade' + assign hover_animation_class = 'animation-fade' + + when 'none' + assign hover_animation_class = 'animation-none' + + when 'zoom' + assign hover_animation_class = 'animation-zoom' + + endcase + + assign enable_hover_carousel = settings.dbtfy_show_second_image_on_hover_enable_carousel +-%} + +
+
+
+ + + {%- capture hover_media_carousel -%} + {%- if product.media.size > 0 -%} + + {%- endif -%} + {%- endcapture -%} + + + {%- assign media = product.media.first -%} + {%- if media != blank -%} +
+ {%- liquid + assign products_per_row_desktop = products_per_row_desktop | times: 1 + assign height_ratio_desktop = 100 | divided_by: products_per_row_desktop + assign height_ratio_mobile = 100 | divided_by: products_per_row_mobile + assign width_ratio_desktop = 100.0 | divided_by: height_ratio_desktop + assign maximum_image_width_desktop = settings.page_container_width | divided_by: width_ratio_desktop + -%} + + {%- capture sizes -%}(max-width: 768px) {{ height_ratio_mobile }}vw, min({{ maximum_image_width_desktop | ceil }}px, {{ height_ratio_desktop }}vw){% endcapture %} + + {{- + media.preview_image + | image_url: width: media.preview_image.width + | image_tag: + loading: images_loading_type, + sizes: sizes, + widths: '300,400,500,600,700,800,1000,1200,1400,1600,1800,2000,2200,2400,2600', + class: 'media' + -}} +
+ + {%- if enable_hover_carousel -%} + {{- hover_media_carousel -}} + {%- endif -%} + + {%- if has_hover_image or has_touch_image -%} +
+ {%- liquid + assign products_per_row_desktop = products_per_row_desktop | times: 1 + assign height_ratio_desktop = 100 | divided_by: products_per_row_desktop + assign height_ratio_mobile = 100 | divided_by: products_per_row_mobile + assign width_ratio_desktop = 100.0 | divided_by: height_ratio_desktop + assign maximum_image_width_desktop = settings.page_container_width | divided_by: width_ratio_desktop + -%} + + {%- capture sizes -%}(max-width: 768px) {{ height_ratio_mobile }}vw, min({{ maximum_image_width_desktop | ceil }}px, {{ height_ratio_desktop }}vw){% endcapture %} + + {{- + hover_image + | image_url: width: hover_image.width + | image_tag: + loading: images_loading_type, + sizes: sizes, + widths: '300,400,500,600,700,800,1000,1200,1400,1600,1800,2000,2200,2400,2600', + class: 'media' + -}} +
+ {%- endif -%} + {%- else -%} + {{- 'product-' | append: current | placeholder_svg_tag: 'card__image placeholder-svg' -}} + {%- endif -%} + + + {%- unless product_grid_badge_placement == 'none' -%} +
+ {%- if is_sold_out and show_sold_out_badge -%} +
+ watch_later + + {{ 'products.product.sold_out_html' | t }} + +
+ {%- elsif is_on_sale and show_sales_badge -%} + {%- capture discount_price -%} + {%- if settings.sale_type == 'amount' -%} + {%- assign discount_price = compare_at_price | minus: price -%} + {{ discount_price | money }} + {%- elsif settings.sale_type == 'percentage' -%} + {%- assign discount_price = compare_at_price | minus: price | times: 100 | divided_by: compare_at_price -%} + {{ discount_price }}% + {%- endif -%} + {%- endcapture -%} + + + {%- endif -%} + + {%- if custom_badge_label != blank -%} +
+ {%- if custom_badge_icon -%} + {{ custom_badge_icon }} + {%- endif -%} + + + {{- custom_badge_label -}} + +
+ {%- endif -%} +
+ {%- endunless -%} + + {%- unless empty_state -%} +
+ {% if settings.dbtfy_wish_list_icon_position == 'grid-image' %} + {%- render 'dbtfy-wish-list', product: product -%} + {% endif %} + {%- render 'dbtfy-quick-compare', product: product, type: 'grid' -%} + {% if enable_quick_view %} + {%- render 'dbtfy-quick-view', product: product -%} + {% endif %} + +
+ {%- endunless -%} +
+ +
+
+
+ {%- liquid + if settings.dbtfy_wish_list_icon_position == 'grid-body' + render 'dbtfy-wish-list', product: product, class: 'dbtfy-wish-list__grid--body' + assign width = 'col-9' + endif + unless empty_state + if product != blank + render 'dbtfy-collection-addtocart', product: product, sold_out: is_sold_out, is_primary: true, class: width + endif + endunless + -%} +
+ + {%- liquid + if has_color_swatches and show_color_swatches + unless empty_state + render 'dbtfy-color-swatches', product: product, type: 'grid', position: product_text_alignment, product_text_alignment: product_text_alignment + endunless + endif + -%} + + +

{{ title }}

+ + + {%- if show_product_rating -%} + {%- unless empty_state -%} +
+ {%- render 'review-badge', product: product, position: 'product_grid' -%} +
+ {%- endunless -%} + {%- endif -%} + + {%- if show_product_price -%} +

+ + + {%- if product.price_varies and empty_state == false -%} + {{ product_price_min | money }} + + {%- else -%} + {{ price | money }} + {%- endif -%} + + + + + {%- if variant.available and variant.unit_price_measurement -%} + {%- capture unit_price_separator -%} + + {%- endcapture -%} + + {%- capture unit_price_base_unit -%} + {%- if variant.unit_price_measurement.reference_value != 1 -%} {{- variant.unit_price_measurement.reference_value -}}{%- endif -%} + {{ variant.unit_price_measurement.reference_unit }} + + {%- endcapture -%} + + + + {{ variant.unit_price | money }} + {{- unit_price_separator -}} + {{- unit_price_base_unit -}} + + {%- endif -%} +

+ {%- endif -%} +
+
+ + {%- if show_product_vendor -%} +
+

{{ vendor }}

+
+ {%- endif -%} +
+
diff --git a/snippets/product-list-item.liquid b/snippets/product-list-item.liquid new file mode 100644 index 0000000..6a3d9ca --- /dev/null +++ b/snippets/product-list-item.liquid @@ -0,0 +1,425 @@ +{%- liquid + if empty_state + assign product_link = '/admin/products' + assign vendor = 'home_page.onboarding.product_vendor' | t + assign title = 'home_page.onboarding.product_title' | t + assign compare_at_price = 2999 + assign price = 1999 + else + assign variant = product.first_available_variant + assign product_link = product.url | within: collection + assign vendor = product.vendor + assign title = product.title + assign compare_at_price = product.compare_at_price + assign price = product.price + endif + + # start yagi app code + assign product_price_min = product.price_min + unless empty_state + assign active_discount = true + + 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 price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price + assign compare_at_price = 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 price = product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil + assign product_price_min = price + + assign compare_at_price = product.price + + if product.compare_at_price > compare_at_price + assign compare_at_price = product.compare_at_price + endif + endif + endif + endunless + # end yagi app code + + assign is_on_sale = false + assign is_sold_out = true + + if compare_at_price > price + assign is_on_sale = true + endif + + if product.available or empty_state + assign is_sold_out = false + endif + + assign has_hover_image = false + assign has_touch_image = false + + if settings.dbtfy_show_second_image_on_hover_show_on_hover and product.media.size > 1 + assign has_hover_image = true + assign hover_image = product.media[1].preview_image + endif + + if settings.dbtfy_show_second_image_on_hover_enable_touch_screen and product.media.size > 1 + assign has_touch_image = true + endif + + if product.media.size > 1 + assign has_hover_image = true + assign hover_image = product.media[1].preview_image + endif + + assign variant = product.selected_or_first_available_variant + + capture product_collections + for collection in product.collections + echo collection.handle + + unless forloop.last + echo "," + endunless + endfor + endcapture + + assign has_color_swatches = false + + if settings.dbtfy_color_swatches_grid_options != blank + if product.available and product.variants.size > 1 + assign has_color_swatches = true + endif + endif + + assign hover_animation = settings.dbtfy_show_second_image_on_hover_hover_animation + + case hover_animation + when 'fade' + assign hover_animation_class = 'animation-fade' + + when 'none' + assign hover_animation_class = 'animation-none' + + when 'zoom' + assign hover_animation_class = 'animation-zoom' + + endcase + + assign enable_hover_carousel = settings.dbtfy_show_second_image_on_hover_enable_carousel +-%} + +
+ +
+
+
+
+ + + {%- capture hover_media_carousel -%} + {%- if product.media.size > 0 -%} + + {%- endif -%} + {%- endcapture -%} + + + {%- assign media = product.media.first -%} + + {%- if media != blank -%} +
+ {%- liquid + assign products_per_row_desktop = products_per_row_desktop | times: 1 + assign height_ratio_desktop = 100 | divided_by: products_per_row_desktop + assign height_ratio_mobile = 100 | divided_by: products_per_row_mobile + + assign width_ratio_desktop = 100.0 | divided_by: height_ratio_desktop + + assign maximum_image_width_desktop = settings.page_container_width | divided_by: width_ratio_desktop + -%} + + {%- capture sizes -%}(max-width: 768px) 100vw, 50vw{% endcapture %} + + {{- media.preview_image | image_url: width: media.preview_image.width | image_tag: loading: images_loading_type, sizes: sizes, widths: '300,400,500,600,700,800,1000,1200,1400,1600,1800,2000,2200,2400,2600', class: 'media' -}} +
+ + {%- if enable_hover_carousel -%} + {{- hover_media_carousel -}} + {%- endif -%} + + {%- if has_hover_image or has_touch_image -%} +
+ {%- liquid + assign products_per_row_desktop = products_per_row_desktop | times: 1 + assign height_ratio_desktop = 100 | divided_by: products_per_row_desktop + assign height_ratio_mobile = 100 | divided_by: products_per_row_mobile + + assign width_ratio_desktop = 100.0 | divided_by: height_ratio_desktop + + assign maximum_image_width_desktop = settings.page_container_width | divided_by: width_ratio_desktop + -%} + + {%- capture sizes -%}(max-width: 768px) {{ height_ratio_mobile }}vw, min({{ maximum_image_width_desktop | ceil }}px, {{ height_ratio_desktop }}vw){% endcapture %} + + {{- hover_image | image_url: width: hover_image.width | image_tag: loading: images_loading_type, sizes: sizes, widths: '300,400,500,600,700,800,1000,1200,1400,1600,1800,2000,2200,2400,2600', class: 'media' -}} +
+ {%- endif -%} + {%- else -%} + {{- 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' -}} + {%- endif -%} + + + {%- unless product_grid_badge_placement == 'none' -%} +
+ {%- if is_sold_out and show_sold_out_badge -%} +
+ watch_later + + {{ 'products.product.sold_out_html' | t }} + +
+ {%- elsif is_on_sale and show_sales_badge -%} + {%- capture discount_price -%} + {%- if settings.sale_type == 'amount' -%} + {%- assign discount_price = compare_at_price | minus: price -%} + {{ discount_price | money }} + {%- elsif settings.sale_type == 'percentage' -%} + {%- assign discount_price = compare_at_price | minus: price | times: 100 | divided_by: compare_at_price -%} + {{ discount_price }}% + {%- endif -%} + {%- endcapture -%} + + + {%- endif -%} + + {%- if custom_badge_label != blank -%} +
+ {%- if custom_badge_icon -%} + {{ custom_badge_icon }} + {%- endif -%} + + + {{- custom_badge_label -}} + +
+ {%- endif -%} +
+ {%- endunless -%} + + {%- unless empty_state -%} + {%- unless add_remove_button -%} +
+ {%- liquid + render 'dbtfy-wish-list', product: product + render 'dbtfy-quick-compare', product: product, type: 'grid' + + if enable_quick_view + render 'dbtfy-quick-view', product: product + endif + -%} +
+ {%- endunless -%} + {%- endunless -%} +
+
+ +
+
+ {%- unless empty_state -%} + {%- if product != blank -%} + {%- if show_product_vendor -%} +

+ store_mall_directory + {{- vendor -}} +

+ {%- endif -%} + + +

{{ title }}

+ + + {%- if show_product_rating -%} + {%- unless empty_state -%} +
+ {%- render 'review-badge', product: product, position: 'product_grid' -%} +
+ {%- endunless -%} + {%- endif -%} + +
+ {%- if product.description contains '[split_description]' -%} +

{{ product.description | strip_html | replace: ' ', ' ' | split: '[split_description]' | first }}

+ {%- else -%} +

{{ product.description | strip_html | replace: ' ', ' ' | truncate: 300 }}

+ {%- endif -%} +
+ {%- endif -%} + {%- else -%} + {%- if show_product_vendor -%} +

+ store_mall_directory + {{- vendor -}} +

+ {%- endif -%} + + +

{{ title }}

+ + {%- endunless -%} + + {%- if show_product_price -%} +
+ + + {%- if product.price_varies and empty_state == false -%} + {{ product_price_min | money }} + + {%- else -%} + {{ price | money }} + {%- endif -%} + + + + {%- if is_on_sale -%} + {{ compare_at_price | money }} + {%- else -%} + + {%- endif -%} + + + + {%- if variant.available and variant.unit_price_measurement -%} + {%- capture unit_price_separator -%} + + {%- endcapture -%} + + {%- capture unit_price_base_unit -%} + + {%- if variant.unit_price_measurement.reference_value != 1 -%} + {{- variant.unit_price_measurement.reference_value -}} + {%- endif -%} + + {{ variant.unit_price_measurement.reference_unit }} + + {%- endcapture -%} + + + + {{ variant.unit_price | money }}{{- unit_price_separator -}}{{- unit_price_base_unit -}} + + {%- endif -%} +
+ {%- endif -%} + + {%- liquid + unless empty_state + if has_color_swatches and show_color_swatches + render 'dbtfy-color-swatches', product: product, type: 'list', product_text_alignment: product_text_alignment + endif + + render 'dbtfy-collection-addtocart', product: product, sold_out: is_sold_out, layout: 'list' + endunless + -%} + + {%- if add_remove_button -%} +

+ +

+ {%- endif -%} +
+
+
+
+
diff --git a/templates/product.recently-viewed.liquid b/templates/product.recently-viewed.liquid new file mode 100644 index 0000000..2cf6857 --- /dev/null +++ b/templates/product.recently-viewed.liquid @@ -0,0 +1,190 @@ +{%- liquid + layout none + assign empty_state = false + + if empty_state + assign product_link = '/admin/products' + assign title = 'home_page.onboarding.product_title' | t + assign compare_at_price = 2999 + assign price = 1999 + else + assign product_link = product.url | within: collection + assign title = product.title + assign compare_at_price = product.compare_at_price + assign price = product.price + endif + + # start yagi app code + assign product_price_min = product.price_min + unless empty_state + assign active_discount = true + + 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 price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price + assign compare_at_price = 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 price = product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil + assign product_price_min = price + + assign compare_at_price = product.price + + if product.compare_at_price > compare_at_price + assign compare_at_price = product.compare_at_price + endif + endif + endif + endunless + # end yagi app code + + assign is_on_sale = false + + if compare_at_price > price + assign is_on_sale = true + endif +-%} + +{%- capture content_for_query_string -%}{{ content_for_header }}{%- endcapture -%} + +{%- assign page_url = content_for_query_string + | split: '"pageurl":"' + | last + | split: '"' + | first + | split: '.myshopify.com' + | last + | replace: '\/', '/' + | replace: '%20', ' ' + | replace: '\u0026', '&' +-%} + +{%- liquid + for i in (1..1) + unless page_url contains '?' + break + endunless + + assign page_query_string = page_url | split: '?' | last + assign parts = page_query_string | split: '&' + + for part in parts + assign key_and_value = part | split: '=' + + if key_and_value.size > 1 and key_and_value[0] == 'desktopGrid' + assign desktop_grid = key_and_value[1] + endif + + if key_and_value.size > 1 and key_and_value[0] == 'mobileGrid' + assign mobile_grid = key_and_value[1] + endif + endfor + endfor +-%} + +
+
+ {%- assign media = product.media.first -%} + + +
+ {%- capture sizes -%}80px{% endcapture %} + + {%- if media != blank -%} + {{- + media + | image_url: width: 80 + | image_tag: + loading: 'lazy', + sizes: sizes, + widths: '300,400,500,600,700,800,1000,1200,1400,1600,1800,2000,2200,2400,2600', + class: 'media' + -}} + {%- else -%} + {{- 'product-1' | placeholder_svg_tag: 'placeholder-svg media' -}} + {%- endif -%} +
+ + +
+
+ {{ title }} +
+ + {%- if settings.dbtfy_recently_viewed_review_badge_product_grid -%} + {%- unless empty_state -%} +
+ {%- render 'review-badge', product: product, position: 'product_grid' -%} +
+ {%- endunless -%} + {%- endif -%} + {%- if settings.dbtfy_recently_viewed_show_product_price -%} +

+ + + {%- if product.price_varies and empty_state == false -%} + {{ product_price_min | money }} + + {%- else -%} + {{ price | money }} + {%- endif -%} + + + + +

+ {%- endif -%} + {%- unless settings.dbtfy_recently_viewed_product_grid_badge_placement == 'none' -%} + {%- if is_sold_out and settings.dbtfy_recently_viewed_show_sold_out_badge -%} +
+ watch_later + + {{ 'products.product.sold_out_html' | t }} + +
+ {%- elsif is_on_sale and settings.dbtfy_recently_viewed_show_sales_badge -%} + {%- capture discount_price -%} + {%- if settings.sale_type == 'amount' -%} + {%- assign discount_price = compare_at_price | minus: price -%} + {{ discount_price | money }} + {%- elsif settings.sale_type == 'percentage' -%} + {%- assign discount_price = compare_at_price | minus: price | times: 100 | divided_by: compare_at_price -%} + {{ discount_price }}% + {%- endif -%} + {%- endcapture -%} + + + {%- endif -%} + {%- endunless -%} +
+
+ +
+ {%- liquid + capture block_width + render 'section-block-width', desktop_grid: desktop_grid, mobile_grid: mobile_grid, type: 'product' + endcapture + + render 'product-grid-item', product: product, block_width: block_width, current: 1, products_per_row_desktop: desktop_grid, products_per_row_mobile: mobile_grid, images_loading_type: 'lazy', show__product_vendor: settings.dbtfy_recently_viewed_show_product_vendor + -%} +
+