From 12799f73568ca9cff4f155b77e130ea649300e94 Mon Sep 17 00:00:00 2001 From: Axel Date: Thu, 15 Oct 2026 20:25:58 +0800 Subject: [PATCH] first commit --- hide_selector.css | 1 + snippets/product-thumbnail.liquid | 271 ++++++++++ .../product-thumbnail__product-info.liquid | 100 ++++ snippets/product.liquid | 483 ++++++++++++++++++ .../related-items__variant-grid-item.liquid | 192 +++++++ style.css | 1 + 6 files changed, 1048 insertions(+) create mode 100644 hide_selector.css create mode 100644 snippets/product-thumbnail.liquid create mode 100644 snippets/product-thumbnail__product-info.liquid create mode 100644 snippets/product.liquid create mode 100644 snippets/related-items__variant-grid-item.liquid create mode 100644 style.css diff --git a/hide_selector.css b/hide_selector.css new file mode 100644 index 0000000..8cfe2c0 --- /dev/null +++ b/hide_selector.css @@ -0,0 +1 @@ +.price-ui {display:none;} \ No newline at end of file diff --git a/snippets/product-thumbnail.liquid b/snippets/product-thumbnail.liquid new file mode 100644 index 0000000..9930abe --- /dev/null +++ b/snippets/product-thumbnail.liquid @@ -0,0 +1,271 @@ +{% if related_products == true %} + {% assign hover_enabled = block.settings.show_related_products_title_on_hover %} +{% else %} + {% assign hover_enabled = settings.thumbnail_hover_enabled %} +{% endif %} + +{% if type == 'block' %} + {% assign object = block %} +{% else %} + {% assign object = section %} +{% endif %} + +{% assign secondaryImage = product.media[1] %} + +{% assign collection_handles = product.collections | map: 'handle' %} +{% if product.featured_media.preview_image.alt contains 'youtube' or image.alt contains 'vimeo' %} + {% assign alt_text = product.title %} +{% else %} + {% assign alt_text = product.featured_media.preview_image.alt %} +{% endif %} + +{% if type == 'block' %} + {% assign image_crop = block.settings.image_crop %} +{% else %} + {% assign image_crop = section.settings.image_crop %} +{% endif %} + +{% if align_height == true %} + {% style %} + .product-{{ product.id }}.thumbnail .image__container img, + .product-{{ product.id }}.thumbnail .product-thumbnail__video .plyr { + max-width: 100%; + width: {{ height }}px; + margin: 0 auto; + } + + .shopify-model-viewer-ui model-viewer { + --progress-bar-height: 2px; + --progress-bar-color: {{ settings.regular_color }}; + } + {% endstyle %} +{% endif %} + +{% liquid + + 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 + + assign product_price = product.price + assign product_compare_at_price_max = product.compare_at_price_max + assign product_compare_at_price = product.compare_at_price + + if active_discount + assign product_price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.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_price < product.price and product_compare_at_price_max == 0 or product_compare_at_price_max == blank + assign product_compare_at_price_max = product.price_max + endif + endif +%} + +
+
+ +
+ + + {% if hover_enabled or settings.enable_quickshop %} +
+ {{ product.title | escape }} + + {% if hover_enabled %} +
+
+
+ {% if settings.display_vendor %} + {{ product.vendor }} + {% endif %} + +

{{ product.title | escape }}

+ + {% if collection_handles contains 'coming-soon' %} + {{ 'collections.general.coming_soon' | t }} + {% else %} + + {% if product.price_varies %} + {{ 'products.general.from' | t }} + {% endif %} + {% if product_price > 0 %} + + {% + render 'price-element', + price: product_price + %} + + {% else %} + {{ settings.free_price_text }} + {% endif %} + {%- assign variant = product.selected_or_first_available_variant -%} + + {% if product_compare_at_price_max > product_price %} + + + {% + render 'price-element', + price: product_compare_at_price_max + %} + + + {% endif %} + + {% if settings.select_first_available_variant %} + {%- assign variant_for_unit_price = product.variants | sort: 'price' | first -%} + {% + render 'unit-price', + item: variant_for_unit_price, + class: 'product-thumbnail__unit-price' + %} + {% endif %} + {% endif %} +
+
+
+ {% endif %} + + {% if settings.enable_quickshop %} + {% + render 'product-thumbnail__quick-shop-button', + product: product + %} + {% endif %} + + {% if hover_enabled %} + {% if settings.enable_shopify_collection_badges %} + + {% comment %}{% endcomment %} + + {% comment %}Judge.Me preview stars{% endcomment %} + {% unless product.metafields.judgeme.badge contains "data-number-of-reviews='0'" %} +
+ {{ product.metafields.judgeme.badge }} +
+ {% endunless %} + + {% endif %} + {% endif %} + +
+ {% endif %} + +
+ +
+ {% + render 'product-thumbnail__product-info', + product: product, + collection_handles: collection_handles + %} +
+
+ + {% + render 'product-thumbnail__swatch', + product: product + %} + + {% if hover_enabled == false %} + {% if settings.enable_shopify_collection_badges %} + + {% comment %}{% endcomment %} + + {% comment %}Judge.Me preview stars{% endcomment %} + {% unless product.metafields.judgeme.badge contains "data-number-of-reviews='0'" %} +
+ {{ product.metafields.judgeme.badge }} +
+ {% endunless %} + + {% endif %} + {% endif %} +
diff --git a/snippets/product-thumbnail__product-info.liquid b/snippets/product-thumbnail__product-info.liquid new file mode 100644 index 0000000..724db3e --- /dev/null +++ b/snippets/product-thumbnail__product-info.liquid @@ -0,0 +1,100 @@ +{% liquid + + 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 + + assign product_price = product.price + assign product_compare_at_price_max = product.compare_at_price_max + assign product_compare_at_price = product.compare_at_price + + if active_discount + assign product_price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.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_price < product.price and product_compare_at_price_max == 0 or product_compare_at_price_max == blank + assign product_compare_at_price_max = product.price_max + endif + endif +%} +
+ {% if settings.display_vendor %} + {{ product.vendor }} + {% endif %} + + {% if hover_enabled %} + {{ product.title }} + {% else %} + {{ product.title }} + {% endif %} + + {% if collection_handles contains 'coming-soon' %} + {% if settings.stickers_enabled == false %} + {{ 'collections.general.coming_soon' | t }} + {% endif %} + {% else %} + + {% if product.price_varies and product_price > 0 %} + {{ 'products.general.from' | t }} + {% endif %} + {% if product_price > 0 %} + + {% + render 'price-element', + price: product_price + %} + + {% else %} + {{ settings.free_price_text }} + {% endif %} + {%- assign variant = product.selected_or_first_available_variant -%} + {% liquid + assign variant_price = variant.price + assign variant_compare_at_price = variant.compare_at_price + + if active_discount + assign variant_price = variant.metafields.app--168074346497.auto_discounted_price.value | default: variant.price + assign variant_compare_at_price = 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 variant_price = variant.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil + endif + + if variant_price < variant.price and variant_compare_at_price == 0 or variant_compare_at_price == blank + assign variant_compare_at_price = variant.price + endif + endif + %} + {% if variant_price < variant_compare_at_price %} + + + {% + render 'price-element', + price: variant_compare_at_price + %} + + + {% endif %} + + {% if settings.select_first_available_variant %} + {%- assign variant_for_unit_price = product.variants | sort: 'price' | first -%} + {% + render 'unit-price', + item: variant_for_unit_price, + class: 'product-thumbnail__unit-price' + %} + {% endif %} + {% endif %} +
diff --git a/snippets/product.liquid b/snippets/product.liquid new file mode 100644 index 0000000..cea2e6b --- /dev/null +++ b/snippets/product.liquid @@ -0,0 +1,483 @@ +{% comment %} + Product snippet + + @param product + @param selected_variant + @param width + @param css_class + @param display_social_buttons + @param display_thumbnails + @param enable_product_lightbox + @param enable_shopify_review_comments + @param enable_thumbnail_slider + @param enable_zoom + @param gallery_arrows + @param product_description_position + @param product_height + @param set_product_height + @param slideshow_transition + @param stickers_enabled + @param tag_style + @param thumbnail_position + @param video_looping + @param section_onboarding + {% endcomment %} + +{% comment %} HTML markup {% endcomment %} + +
+ +
+ {% if section_onboarding %} + + {% else %} + {% + render 'product__images', + product: product, + display_thumbnails: display_thumbnails, + thumbnail_position: thumbnail_position, + enable_thumbnail_slider: enable_thumbnail_slider, + product_height: product_height, + set_product_height: set_product_height, + video_looping: video_looping + gallery_arrows: gallery_arrows, + slideshow_transition: slideshow_transition, + enable_product_lightbox: enable_product_lightbox, + enable_zoom: enable_zoom + %} + {% endif %} +
+ +
+ + {% comment %} Sale sticker {% endcomment %} + {% if stickers_enabled %} + {% assign collection_handles = product.collections | map: 'handle' %} + {% + render 'product-thumbnail__sticker', + context: 'product', + collection_handles: collection_handles, + %} + {% endif %} + + {%- for block in section.blocks -%} +
+ + {%- if block.type == 'vendor' -%} + {% comment %} Vendor {% endcomment %} +

+ + {% if section_onboarding %} + Vendor name + {% else %} + {{ product.vendor | link_to_vendor }} + {% endif %} + +

+ + {%- elsif block.type == 'sku' -%} + {% comment %} Sku {% endcomment %} +

+ {% if section_onboarding %} + 1234567890 + {% else %} + {{ selected_variant.sku }} + {% endif %} +

+ + {%- elsif block.type == 'title' -%} + {% comment %} Name {% endcomment %} +

+ {% if section_id == 'quickshop' %} + {{ product.title }} + {% elsif section_onboarding %} + {{ 'homepage.onboarding.product_title' | t }} + {% else %} + {{ product.title }} + {% endif %} +

+ + {%- elsif block.type == 'size-chart' -%} + {% comment %} Size chart {% endcomment %} + {% for tag in product.tags %} + {% if tag contains 'meta-size-chart-' %} + {% assign meta-size-chart = true %} + {% endif %} + {% endfor %} + + {% comment %} Size chart Mobile {% endcomment %} + {% if block.settings.size_chart != blank or meta-size-chart %} + {{ 'products.product.size_chart' | t }} {% render 'icon', name: 'right-caret' %} + {% render 'popup-size-chart', product_id: product.id %} + {% endif %} + {% comment %} Size chart {% endcomment %} + {% if block.settings.size_chart != blank or meta-size-chart %} + {{ 'products.product.size_chart' | t }} {% render 'icon', name: 'right-caret' %} + {% render 'popup-size-chart', product_id: product.id %} + {% endif %} + + {%- elsif block.type == 'price' -%} + {% comment %} Price {% endcomment %} + + + {%- elsif block.type == 'description' -%} + {% comment %} Description {% endcomment %} + {% if block.settings.custom_description != blank %} +
+ {{ block.settings.custom_description }} +
+ {% elsif section_onboarding %} +
+

+ {{ 'homepage.onboarding.product_description' | t }} +

+
+ {% else %} + {% if product.description != blank %} +
+ {{ product.description | split: '' | first }} +
+ {% endif %} + {% endif %} + + {%- elsif block.type == 'form' -%} + {% comment %} Purchase form {% endcomment %} + {% if section_onboarding %} +
+
+
+ +
+
+
+ {% else %} +
+ + {% comment %} Notify form {% endcomment %} + {% render 'product__notify-me-form', product: product %} + + {% comment %} Product form {% endcomment %} + {% unless collection_handles contains 'coming-soon' %} + {% + render 'product__form', + context: 'product', + product: product, + sold_out_options: sold_out_options, + selected_variant: selected_variant, + show_payment_button: block.settings.show_payment_button, + collection_handles: collection_handles + %} + {% endunless %} +
+ {% endif %} + + {%- elsif block.type == 'product-links' -%} + {% comment %} Collections, type, tags {% endcomment %} + {% if block.settings.show_collections or block.settings.show_tags or block.settings.show_type %} + + {% endif %} + + {%- elsif block.type == 'collapsible-tab' -%} + {% if block.settings.content != blank or block.settings.page.content != blank%} +
+
+ +
+ {% render 'icon-accordion', icon: block.settings.icon %} +

+ {{ block.settings.heading | default: block.settings.page.title }} +

+
+ {% render 'icon-caret' %} +
+
+ {{ block.settings.content }} + {{ block.settings.page.content }} +
+
+
+ {% endif %} + + {%- elsif block.type == 'share' -%} + {% comment %} Social share icons {% endcomment %} + + + {%- elsif block.type == 'text' -%} + {% comment %} Text {% endcomment %} +
+ {{ block.settings.text }} +
+ {% elsif block.type == '@app' %} +
+ {% render block %} +
+ + {% elsif block.type == 'related_products' %} + {% if block.settings.product_list != blank %} + {% render 'product__related-products', + block_id: block.id, + title: block.settings.title, + product_list: block.settings.product_list + %} + {% endif %} + + {% elsif block.type == 'related_items' %} + {% assign grid_items = '' %} + + {% if product.metafields.product_ref.product_link != blank %} + {% capture grid_item %} + {% render 'related-items__product-grid-item', product: product.metafields.product_ref.product_link.value %} + {% endcapture %} + + {% assign grid_items = grid_items | append: grid_item | append: "#*#" %} + {% endif %} + + {% if product.metafields.my_fields.product_link_2 != blank %} + {% capture grid_item %} + {% render 'related-items__product-grid-item', product: product.metafields.my_fields.product_link_2.value %} + {% endcapture %} + {% assign grid_items = grid_items | append: grid_item | append: "#*#" %} + {% endif %} + + {% if product.metafields.my_fields.product_variant_link_1 != blank %} + {% capture grid_item %} + {% render 'related-items__variant-grid-item', variant: product.metafields.my_fields.product_variant_link_1.value %} + {% endcapture %} + + {% assign grid_items = grid_items | append: grid_item | append: "#*#" %} + {% endif %} + + {% if product.metafields.my_fields.product_variant_link_2 != blank %} + {% capture grid_item %} + {% render 'related-items__variant-grid-item', variant: product.metafields.my_fields.product_variant_link_2.value %} + {% endcapture%} + {% assign grid_items = grid_items | append: grid_item | append: "#*#" %} + {% endif %} + + {% if product.metafields.my_fields.product_link_3 != blank %} + {% capture grid_item %} + {% render 'related-items__product-grid-item', product: product.metafields.my_fields.product_link_3.value %} + {% endcapture%} + {% assign grid_items = grid_items | append: grid_item | append: "#*#" %} + {% endif %} + {% if product.metafields.my_fields.product_link_4 != blank %} + {% capture grid_item %} + {% render 'related-items__product-grid-item', product: product.metafields.my_fields.product_link_4.value %} + {% endcapture%} + {% assign grid_items = grid_items | append: grid_item | append: "#*#" %} + {% endif %} + + {% if product.metafields.my_fields.product_variant_link_3 != blank %} + {% capture grid_item %} + {% render 'related-items__variant-grid-item', variant: product.metafields.my_fields.product_variant_link_3.value %} + {% endcapture%} + {% assign grid_items = grid_items | append: grid_item | append: "#*#" %} + {% endif %} + + {% assign grid_item_array = grid_items | split: "#*#" %} + + {% render 'product__related-items', + block_id: block.id, + title: block.settings.title, + product_list: grid_item_array, + limit: grid_item_array.size, + per_slide: 3, + align_height: false, + height: 150, + show_gutter: true + %} + + {%- endif -%} +
+ + {%- endfor -%} + +
+ + + +
\ No newline at end of file diff --git a/snippets/related-items__variant-grid-item.liquid b/snippets/related-items__variant-grid-item.liquid new file mode 100644 index 0000000..2500d7c --- /dev/null +++ b/snippets/related-items__variant-grid-item.liquid @@ -0,0 +1,192 @@ +{% comment %} +---------------- +Optional values +product_recommendations: +{% endcomment %} + +{% comment %}Check for related products and increase limit by one (to offset the currently selected product that is removed from the product loop){% endcomment %} + +{%- assign limit = limit | plus: 0 -%} +{%- assign loop_limit = limit | plus: 1 -%} +{%- assign hover_enabled = block.settings.show_related_products_title_on_hover -%} + +{%- assign visible_products = products_per | plus: 0 -%} + +{%- assign hover_enabled = settings.thumbnail_hover_enabled -%} + +{% liquid + + 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 + + assign product_price = product.price + assign product_compare_at_price_max = product.compare_at_price_max + assign product_compare_at_price = product.compare_at_price + + if active_discount + assign product_price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.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_price < product.price and product_compare_at_price_max == 0 or product_compare_at_price_max == blank + assign product_compare_at_price_max = product.price_max + endif + endif + + assign variant_price = variant.price + assign variant_compare_at_price = variant.compare_at_price + + if active_discount + assign variant_price = variant.metafields.app--168074346497.auto_discounted_price.value | default: variant.price + assign variant_compare_at_price = 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 variant_price = variant.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil + endif + + if variant_price < variant.price and variant_compare_at_price == 0 or variant_compare_at_price == blank + assign variant_compare_at_price = variant.price + endif + endif +%} + + +{%- if variant.product.metafields.inventory.ShappifyHidden == 'true' -%}{%- continue -%}{%- endif -%} + {%- assign collection_handles = variant.product.collections | map: 'handle' -%} + + {% if variant.product.id != skip_product.id %} + +
+
+ + + {% if hover_enabled or settings.enable_quickshop %} + +
+ {% if hover_enabled %} +
+
+
+ +
+ {% if settings.display_vendor %} + {{ variant.product.vendor }} + {% endif %} + + {% if hover_enabled %} + {{ variant.product.title }} - {{ variant.title }} + {% else %} + {{ variant.product.title }} - {{ variant.title }} + {% endif %} + + {% if collection_handles contains 'coming-soon' %} + {% if settings.stickers_enabled == false %} + {{ 'collections.general.coming_soon' | t }} + {% endif %} + {% else %} + + {% if variant_price > 0 %} + + {% + render 'price-element', + price: variant_price + %} + + {% else %} + {{ settings.free_price_text }} + {% endif %} + + {% endif %} +
+ +
+
+
+ {% endif %} + + {% if settings.enable_quickshop %} + {% + render 'product-thumbnail__quick-shop-button', + product: variant.product + %} + {% endif %} + + {% if hover_enabled %} + {% if settings.enable_shopify_collection_badges %} + + {% endif %} + {% endif %} +
+ + {% endif %} +
+ + {% if hover_enabled == false %} +
+
+ {% if settings.display_vendor %} + {{ variant.product.vendor }} + {% endif %} + + {% if hover_enabled %} + {{ variant.product.title }} - {{ variant.title }} + {% else %} + {{ variant.product.title }} - {{ variant.title }} + {% endif %} + + {% if collection_handles contains 'coming-soon' %} + {% if settings.stickers_enabled == false %} + {{ 'collections.general.coming_soon' | t }} + {% endif %} + {% else %} + + {% if variant.price > 0 %} + + {% + render 'price-element', + price: variant.price + %} + + {% else %} + {{ settings.free_price_text }} + {% endif %} + + {% endif %} +
+
+ {% endif %} +
+ {% endif %} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..e33c34e --- /dev/null +++ b/style.css @@ -0,0 +1 @@ +.yagi-price-container{display: flex; gap: 0.5em; align-items: center;} .yagi-price-container .price__sale { display: flex; flex-direction: row-reverse !important; justify-content: flex-end; gap: 0.5em; align-items: center;} .yagi-discounted-price { font-size: 1.25rem; color: rgb(10, 7, 0); } .yagi-original-price { font-size: 1.25rem; color: rgb(32, 31, 30); opacity: 0.6; text-decoration: line-through; } .yagi-original-price .money { text-decoration: line-through; } \ No newline at end of file