Skip to content

Instantly share code, notes, and snippets.

@isbaek
Created October 6, 2023 13:47
Show Gist options
  • Save isbaek/4fbf96e5b1b022f4a48b193d928cd2a7 to your computer and use it in GitHub Desktop.
Save isbaek/4fbf96e5b1b022f4a48b193d928cd2a7 to your computer and use it in GitHub Desktop.
diff --git a/legacy/assets/custom-product-variants.js b/legacy/assets/custom-product-variants.js
deleted file mode 100644
index a620200..0000000
--- a/legacy/assets/custom-product-variants.js
+++ /dev/null
@@ -1,149 +0,0 @@
-/*
-Custom product variant logic to switch the main image
-Must have Hulk Product Options App installed
-App: https://apps.shopify.com/product-options-by-hulkapps-1
-Enable by turning on settings > custom features > variant image features
-*/
-function waitForElms(e) {
- return new Promise((t) => {
- if (document.querySelectorAll(e).length)
- return t(document.querySelectorAll(e));
- const r = new MutationObserver((o) => {
- document.querySelectorAll(e).length &&
- (t(document.querySelectorAll(e)), r.disconnect());
- });
- r.observe(document.body, { childList: !0, subtree: !0 });
- });
-}
-
-/**
- * String combination to compare image alt text
- * @param {string} finish - Selected finish option
- * @param {string} cloth - Selected cloth option
- */
-function getCurrentVariantString(finish, cloth) {
- return `FINISH-` + finish + "-CLOTH-" + cloth;
-}
-
-document.addEventListener("DOMContentLoaded", () => {
- /**
- * Get default media image
- * @returns {Product['media']} Product media https://shopify.dev/docs/api/liquid/objects/product#product-media
- */
- function getDefaultMedia() {
- const media = {
- id: "default-custom-variant-product-image", // Constant consistent with snippets/custom-product-image.liquid
- };
- return media;
- }
- /**
- * Get maxed similar media type
- * @returns {Product['media']} Product media https://shopify.dev/docs/api/liquid/objects/product#product-media
- * @param {string} finish - Selected finish option
- * @param {string} cloth - Selected cloth option
- */
- function getSelectedMedia(finish, cloth) {
- const productMediaJSON = JSON.parse(
- document.querySelector('product-form #media[type="application/json"]')
- .textContent
- );
- const finishClothVariant = getCurrentVariantString(finish, cloth);
-
- let maxedProductMedia = 0;
- let maxedSimilarity = 0;
- for (let productMedia of productMediaJSON) {
- if (productMedia.alt?.length) {
- // Compare two strings' similarity using Dice algorithm
- const similarity = stringSimilarity.compareTwoStrings(
- productMedia.alt,
- finishClothVariant
- );
- if (similarity > maxedSimilarity) {
- maxedProductMedia = productMedia;
- maxedSimilarity = similarity;
- }
- }
- }
-
- // If it's not that similar we can assume it's not an exact match
- if (maxedSimilarity < 0.6) return getDefaultMedia();
- return maxedProductMedia;
- }
-
- /**
- * Change product image based on selected media. Refer to assets/global.js > line 1369
- * @returns {void}
- * @param {Product['media']} Product media https://shopify.dev/docs/api/liquid/objects/product#product-media
- */
- function updateMedia(featuredMedia) {
- const featuredMediaId = featuredMedia.id;
- const dataSection = document
- .querySelector("[data-section]")
- .getAttribute("data-section");
- const newMedia = document.querySelector(
- `[data-media-id="${dataSection}-${featuredMediaId}"]`
- );
- if (!newMedia) return;
- const mediaGallery = document.getElementById(`MediaGallery-${dataSection}`);
- const thumbnailContent = document.querySelector(
- `#ProductThumbnails-${dataSection}`
- );
- const modalContent = document.querySelector(
- `#ProductModal-${dataSection} .product-media-modal__content`
- );
-
- const parent = newMedia.parentElement;
- if (parent.firstChild == newMedia) return;
- parent.prepend(newMedia);
- parent.classList.add("product__media-no-animate");
-
- if (mediaGallery) {
- mediaGallery.setActiveMedia(
- `${dataSection}-${featuredMediaId}`,
- true,
- false
- );
- }
-
- if (modalContent) {
- const newMediaModal = modalContent.querySelector(
- `[data-media-id="${featuredMediaId}"]`
- );
- modalContent.prepend(newMediaModal);
- }
-
- if (thumbnailContent) {
- const newMediaThumbnail = thumbnailContent.querySelector(
- `[data-media-id="${featuredMediaId}"]`
- );
- thumbnailContent.prepend(newMediaThumbnail);
- }
- }
- // Wait for hulk product options app
- waitForElms(".hulkapps_product_options .hulk_po_radio").then((elements) => {
- elements.forEach((element) => {
- element.querySelector("input").addEventListener("change", (e) => {
- const finishOption = document.querySelector(
- "variant-radios input:checked"
- )?.value;
- const clothOption = e.target?.value;
- if (!clothOption || !finishOption) return;
- const featuredMedia = getSelectedMedia(finishOption, clothOption);
- updateMedia(featuredMedia);
- });
- });
- // Once loaded, add event listener for variant change
- document.addEventListener("variant:change", (e) => {
- const finishOption = document.querySelector(
- "variant-radios input:checked"
- )?.value;
- const clothOption = document.querySelector(
- ".hulkapps_product_options .hulk_po_radio.swatch_selected input"
- )?.value;
- // If no cloth option selected then exit
- if (!clothOption || !finishOption) return;
- const featuredMedia = getSelectedMedia(finishOption, clothOption);
- updateMedia(featuredMedia);
- });
- });
-});
diff --git a/legacy/config/settings_data.json b/legacy/config/settings_data.json
index 1f4a8ed..866c122 100644
--- a/legacy/config/settings_data.json
+++ b/legacy/config/settings_data.json
@@ -60,10 +60,6 @@
"social_pinterest_link": "https:\/\/pinterest.com\/shopify",
"social_instagram_link": "https:\/\/instagram.com\/shopify",
"gift_card_logo_height": 70,
- "enable_custom_variant_image_change": true,
- "custom_variant_image_tags": "pooltabletag2",
- "custom_variant_image_default": "shopify:\/\/shop_images\/cat-image.jpg",
- "hide_custom_variant_image_product_thumbnails": true,
"sections": {
"main-password-header": {
"type": "main-password-header",
diff --git a/legacy/config/settings_schema.json b/legacy/config/settings_schema.json
index 5787786..277ceaf 100644
--- a/legacy/config/settings_schema.json
+++ b/legacy/config/settings_schema.json
@@ -922,38 +922,5 @@
"label": "t:settings_schema.gift_card.settings.gift_card_logo_height.label"
}
]
- },
- {
- "name": "Custom Features",
- "settings": [
- {
- "type": "header",
- "content": "Variant Image Feature"
- },
- {
- "type": "checkbox",
- "id": "enable_custom_variant_image_change",
- "label": "Enable custom variant image feature",
- "info": "This feature must have [Hulk product options app](https://apps.shopify.com/product-options-by-hulkapps-1) installed to work. The product images must have alt text filled."
- },
- {
- "type": "text",
- "id": "custom_variant_image_tags",
- "label": "Product tags to target the feature",
- "info": "Must have above checkbox enabled to work. If left empty, no products will be targeted. Separate tags with a comma."
- },
- {
- "type": "image_picker",
- "id": "custom_variant_image_default",
- "label": "Default product image",
- "info": "Must have above checkbox enabled to work. If no image is present, default image will not be shown if there is no alt text match."
- },
- {
- "type": "checkbox",
- "id": "hide_custom_variant_image_product_thumbnails",
- "label": "Hide custom images on product thumbnail",
- "info": "Must have above checkbox enabled and enable product thumbnails display on desktop to work."
- }
- ]
}
]
\ No newline at end of file
diff --git a/legacy/sections/main-product.liquid b/legacy/sections/main-product.liquid
index 79a7653..c896be3 100644
--- a/legacy/sections/main-product.liquid
+++ b/legacy/sections/main-product.liquid
@@ -8,21 +8,6 @@
<link rel="stylesheet" href="{{ 'component-deferred-media.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-product-review.css' | asset_url }}" media="print" onload="this.media='all'">
-{% if settings.enable_custom_variant_image_change %}
- {% assign target_product_tags = settings.custom_variant_image_tags | split: ',' %}
- {% assign custom_variant_image_enabled = false %}
- {% for target_product_tag in target_product_tags %}
- {% for product_tag in product.tags %}
- {% if product_tag == target_product_tag %}
- {% assign custom_variant_image_enabled = true %}
- {% endif %}
- {% endfor %}
- {% endfor %}
- {% if custom_variant_image_enabled %}
- <script src="https://unpkg.com/string-similarity/umd/string-similarity.min.js" async="async"></script>
- <script src="{{ 'custom-product-variants.js' | asset_url }}" defer="defer"></script>
- {% endif %}
-{% endif %}
{%- style -%}
#shopify-section-{{ section.id }} {
@@ -58,23 +43,11 @@
}
{%- endstyle -%}
-{%- assign first_3d_model = product.media | where: 'media_type', 'model' | first -%}
+{%- assign first_3d_model = product.media | where: "media_type", "model" | first -%}
{%- if first_3d_model -%}
{{ 'component-product-model.css' | asset_url | stylesheet_tag }}
- <link
- id="ModelViewerStyle"
- rel="stylesheet"
- href="https://cdn.shopify.com/shopifycloud/model-viewer-ui/assets/v1.0/model-viewer-ui.css"
- media="print"
- onload="this.media='all'"
- >
- <link
- id="ModelViewerOverride"
- rel="stylesheet"
- href="{{ 'component-model-viewer-ui.css' | asset_url }}"
- media="print"
- onload="this.media='all'"
- >
+ <link id="ModelViewerStyle" rel="stylesheet" href="https://cdn.shopify.com/shopifycloud/model-viewer-ui/assets/v1.0/model-viewer-ui.css" media="print" onload="this.media='all'">
+ <link id="ModelViewerOverride" rel="stylesheet" href="{{ 'component-model-viewer-ui.css' | asset_url }}" media="print" onload="this.media='all'">
{%- endif -%}
<section class="page-width section--padding">
@@ -82,23 +55,14 @@
<product-recently-viewed data-product-id="{{ product.id }}" class="hidden"></product-recently-viewed>
<div class="grid__item product__media-wrapper">
<span id="ProductImages"></span>
- <media-gallery
- id="MediaGallery-{{ section.id }}"
- role="region"
- {% if section.settings.enable_sticky_info %}
- class="product__media-gallery"
- {% endif %}
- aria-label="{{ 'products.product.media.gallery_viewer' | t }}"
- data-desktop-layout="{{ section.settings.gallery_layout }}"
- >
+ <media-gallery id="MediaGallery-{{ section.id }}" role="region"{% if section.settings.enable_sticky_info %} class="product__media-gallery"{% endif %} aria-label="{{ 'products.product.media.gallery_viewer' | t }}" data-desktop-layout="{{ section.settings.gallery_layout }}">
<div id="GalleryStatus-{{ section.id }}" class="visually-hidden" role="status"></div>
<use-animate data-animate="zoom-fade">
<product-gallery id="GalleryViewer-{{ section.id }}" class="slider-mobile-gutter slider-mobile--overlay">
<a class="skip-to-content-link button visually-hidden" href="#ProductInfo-{{ section.id }}">
- {{ 'accessibility.skip_to_product_info' | t }}
+ {{ "accessibility.skip_to_product_info" | t }}
</a>
- <ul
- id="Slider-Gallery-{{ section.id }}"
+ <ul id="Slider-Gallery-{{ section.id }}"
class="product__media-list grid grid--1-col grid--1-col-tablet slider slider--mobile"
role="list"
>
@@ -107,7 +71,7 @@
if section.settings.hide_variants and variant_images.size == product.media.size
assign single_media_visible = true
endif
-
+
assign media_count = product.media.size
if section.settings.hide_variants and media_count > 1
assign media_count = media_count | minus: variant_images.size | plus: 1
@@ -141,7 +105,7 @@
if gang_connect contains '_'
assign gang_exist = true
assign gang_option_name = gang_connect | split: '_' | first | handleize
-
+
for option_name in product.options
assign option_name_handlized = option_name | handleize | replace: '_', '-'
if option_name_handlized == gang_option_name
@@ -157,30 +121,15 @@
endif
endif
-%}
- <li
- id="Slide-{{ section.id }}-{{ featured_media.id }}"
+ <li id="Slide-{{ section.id }}-{{ featured_media.id }}"
class="product__media-item is-active grid__item slider__slide{% if single_media_visible %} product__media-item--single{% endif %}{% if featured_media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains featured_media.src %} product__media-item--variant{% endif %}{% if gang_media_active == true %} gang__active{% endif %}"
data-media-id="{{ section.id }}-{{ featured_media.id }}"
data-media-position="{{ featured_media.position }}"
- {% if gang_exist == true %}
- data-gang-option="{{ gang_option_name }}" data-gang-connect="{{ gang_connect }}"
- {% endif %}
+ {% if gang_exist == true %}data-gang-option="{{ gang_option_name }}" data-gang-connect="{{ gang_connect }}"{% endif %}
>
- {% render 'product-image',
- media: featured_media,
- position: 'featured',
- zoom: section.settings.enable_image_zoom,
- loop: section.settings.enable_video_looping,
- modal_id: section.id,
- xr_button: true,
- media_width: media_width,
- image_ratio: image_ratio,
- mobile_image_ratio: mobile_image_ratio,
- lazy_load: false
- %}
+ {% render 'product-image', media: featured_media, position: 'featured', zoom: section.settings.enable_image_zoom, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, image_ratio: image_ratio, mobile_image_ratio: mobile_image_ratio, lazy_load: false %}
</li>
{%- endif -%}
-
{%- for media in product.media -%}
{%- unless media.id == featured_media.id -%}
{%- liquid
@@ -192,7 +141,7 @@
if gang_connect contains '_'
assign gang_exist = true
assign gang_option_name = gang_connect | split: '_' | first | handleize
-
+
for option_name in product.options
assign option_name_handlized = option_name | handleize | replace: '_', '-'
if option_name_handlized == gang_option_name
@@ -208,44 +157,16 @@
endif
endif
-%}
- <li
- id="Slide-{{ section.id }}-{{ media.id }}"
+ <li id="Slide-{{ section.id }}-{{ media.id }}"
class="product__media-item grid__item slider__slide{% if single_media_visible %} product__media-item--single{% endif %}{% if featured_media == null and forloop.first %} is-active{% endif %}{% if media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains media.src %} product__media-item--variant{% endif %}{% if gang_media_active == true %} gang__active{% endif %}"
data-media-id="{{ section.id }}-{{ media.id }}"
data-media-position="{{ media.position }}"
- {% if gang_exist == true %}
- data-gang-option="{{ gang_option_name }}" data-gang-connect="{{ gang_connect }}"
- {% endif %}
+ {% if gang_exist == true %}data-gang-option="{{ gang_option_name }}" data-gang-connect="{{ gang_connect }}"{% endif %}
>
- {% render 'product-image',
- media: media,
- position: forloop.index,
- zoom: section.settings.enable_image_zoom,
- loop: section.settings.enable_video_looping,
- modal_id: section.id,
- xr_button: true,
- media_width: media_width,
- image_ratio: image_ratio,
- mobile_image_ratio: mobile_image_ratio
- %}
+ {% render 'product-image', media: media, position: forloop.index, zoom: section.settings.enable_image_zoom, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, image_ratio: image_ratio, mobile_image_ratio: mobile_image_ratio %}
</li>
{%- endunless -%}
{%- endfor -%}
-
- {% if custom_variant_image_enabled and settings.custom_variant_image_default != blank %}
- {%
- render 'custom-product-image',
- position: forloop.index,
- zoom: section.settings.enable_image_zoom,
- loop: section.settings.enable_video_looping,
- modal_id: section.id,
- xr_button: true,
- media_width: media_width,
- image_ratio: image_ratio,
- mobile_image_ratio: mobile_image_ratio
- section: section,
- %}
- {% endif %}
</ul>
<div class="slider-buttons no-js-hidden{% if media_count < 2 or section.settings.show_mobile_thumbnails %} small-hide{% endif %}">
<div class="slider-counter caption">
@@ -254,20 +175,10 @@
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
<span class="slider-counter--total">{{ media_count }}</span>
</div>
- <button
- type="button"
- class="slider-button slider-button--prev"
- name="previous"
- aria-label="{{ 'general.slider.previous_slide' | t }}"
- >
+ <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}">
{% render 'icon', icon: 'arrow' %}
</button>
- <button
- type="button"
- class="slider-button slider-button--next"
- name="next"
- aria-label="{{ 'general.slider.next_slide' | t }}"
- >
+ <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}">
{% render 'icon', icon: 'arrow' %}
</button>
</div>
@@ -294,17 +205,11 @@
</button>
{%- endif -%}
- {%- if product.media.size > 1
- and media_count > 1
- and section.settings.gallery_layout == 'thumbnail_slider'
- or section.settings.show_mobile_thumbnails
- -%}
- <thumbnail-slider
- id="GalleryThumbnails-{{ section.id }}"
+ {%- if product.media.size > 1 and media_count > 1 and section.settings.gallery_layout == 'thumbnail_slider' or section.settings.show_mobile_thumbnails -%}
+ <thumbnail-slider id="GalleryThumbnails-{{ section.id }}"
class="thumbnail-slider slider-mobile-gutter{% unless section.settings.show_mobile_thumbnails %} small-hide{% endunless %}{% if media_count <= 3 %} thumbnail-slider--no-slide{% endif %}"
>
- <ul
- id="Slider-Thumbnails-{{ section.id }}"
+ <ul id="Slider-Thumbnails-{{ section.id }}"
class="thumbnail-list list-unstyled slider slider--mobile{% if section.settings.gallery_layout == 'thumbnail_slider' %} slider--tablet-up{% endif %}"
data-media-count="{{ product.media.size }}"
>
@@ -330,7 +235,7 @@
if gang_connect contains '_'
assign gang_exist = true
assign gang_option_name = gang_connect | split: '_' | first | handleize
-
+
for option_name in product.options
assign option_name_handlized = option_name | handleize | replace: '_', '-'
if option_name_handlized == gang_option_name
@@ -346,17 +251,13 @@
endif
endif
-%}
- <li
- id="Slide-Thumbnails-{{ section.id }}-0"
+ <li id="Slide-Thumbnails-{{ section.id }}-0"
class="thumbnail-list__item slider__slide{% if section.settings.hide_variants and variant_images contains featured_media.src %} thumbnail-list_item--variant{% endif %} is-active media-wrapper media-wrapper--small{% if gang_media_active == true %} gang__active{% endif %}"
data-target="{{ section.id }}-{{ featured_media.id }}"
data-media-position="{{ media_index }}"
- {% if gang_exist == true %}
- data-gang-option="{{ gang_option_name }}" data-gang-connect="{{ gang_connect }}"
- {% endif %}
+ {% if gang_exist == true %}data-gang-option="{{ gang_option_name }}" data-gang-connect="{{ gang_connect }}"{% endif %}
>
- <button
- class="thumbnail media media--square"
+ <button class="thumbnail media media--square"
aria-label="{%- if featured_media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif featured_media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif featured_media.media_type == 'video' or featured_media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
aria-current="true"
aria-controls="GalleryViewer-{{ section.id }}"
@@ -371,126 +272,88 @@
</button>
</li>
{%- endif -%}
-
- {% assign custom_variant_feature_enabled = false %}
- {% if custom_variant_image_enabled and settings.hide_custom_variant_image_product_thumbnails %}
- {% assign custom_variant_feature_enabled = true %}
- {% endif %}
-
{%- for media in product.media -%}
- {% assign media_alt = media.alt | upcase %}
- {% if custom_variant_feature_enabled and media_alt contains 'FINISH' or media_alt contains 'CLOTH' %}
- {% continue %}
- {% else %}
- {%- unless media.id == featured_media.id -%}
- {%- liquid
- capture media_index
- if media.media_type == 'model'
- increment model_index
- elsif media.media_type == 'video' or media.media_type == 'external_video'
- increment video_index
- elsif media.media_type == 'image'
- increment image_index
- endif
- endcapture
-
- assign media_index = media_index | plus: 1
-
- assign gang_option_name = ''
- assign gang_media_active = false
- assign gang_connect = ''
- if media.alt contains '#' and section.settings.hide_variants == false
- assign gang_connect = media.alt | split: '#' | last
- if gang_connect contains '_'
- assign gang_exist = true
- assign gang_option_name = gang_connect | split: '_' | first | handleize
+ {%- unless media.id == featured_media.id -%}
+ {%- liquid
+ capture media_index
+ if media.media_type == 'model'
+ increment model_index
+ elsif media.media_type == 'video' or media.media_type == 'external_video'
+ increment video_index
+ elsif media.media_type == 'image'
+ increment image_index
+ endif
+ endcapture
+
+ assign media_index = media_index | plus: 1
- for option_name in product.options
- assign option_name_handlized = option_name | handleize | replace: '_', '-'
- if option_name_handlized == gang_option_name
- assign option_key = 'option' | append: forloop.index
- assign current_option_value = product.selected_or_first_available_variant[option_key] | handleize
- assign current_connect = option_name_handlized | append: '_' | append: current_option_value
- if gang_connect == current_connect
- assign gang_media_active = true
- endif
- break
+ assign gang_option_name = ''
+ assign gang_media_active = false
+ assign gang_connect = ''
+ if media.alt contains '#' and section.settings.hide_variants == false
+ assign gang_connect = media.alt | split: '#' | last
+ if gang_connect contains '_'
+ assign gang_exist = true
+ assign gang_option_name = gang_connect | split: '_' | first | handleize
+
+ for option_name in product.options
+ assign option_name_handlized = option_name | handleize | replace: '_', '-'
+ if option_name_handlized == gang_option_name
+ assign option_key = 'option' | append: forloop.index
+ assign current_option_value = product.selected_or_first_available_variant[option_key] | handleize
+ assign current_connect = option_name_handlized | append: '_' | append: current_option_value
+ if gang_connect == current_connect
+ assign gang_media_active = true
endif
- endfor
- endif
+ break
+ endif
+ endfor
endif
- -%}
- <li
- id="Slide-Thumbnails-{{ section.id }}-{{ forloop.index }}"
- class="thumbnail-list__item slider__slide{% if section.settings.hide_variants and variant_images contains media.src %} thumbnail-list_item--variant{% endif %}{% if media == featured_media or featured_media == null and forloop.first %} is-active{% endif %} media-wrapper media-wrapper--small{% if gang_media_active == true %} gang__active{% endif %}"
- data-target="{{ section.id }}-{{ media.id }}"
- data-media-position="{{ media_index }}"
- {% if gang_exist == true %}
- data-gang-option="{{ gang_option_name }}" data-gang-connect="{{ gang_connect }}"
- {% endif %}
- >
- {%- if media.media_type != 'image' -%}
- <span class="deferred-media__poster-button motion-reduce">
- {%- if media.media_type == 'model' -%}
- <span class="visually-hidden">{{ 'products.product.media.play_model' | t }}</span>
- {%- render 'icon', icon: '3d-model' -%}
- {%- else -%}
- <span class="visually-hidden">{{ 'products.product.media.play_video' | t }}</span>
- {%- render 'icon', icon: 'play' -%}
- {%- endif -%}
- </span>
- {%- endif -%}
+ endif
+ -%}
+ <li id="Slide-Thumbnails-{{ section.id }}-{{ forloop.index }}"
+ class="thumbnail-list__item slider__slide{% if section.settings.hide_variants and variant_images contains media.src %} thumbnail-list_item--variant{% endif %}{% if media == featured_media or featured_media == null and forloop.first %} is-active{% endif %} media-wrapper media-wrapper--small{% if gang_media_active == true %} gang__active{% endif %}"
+ data-target="{{ section.id }}-{{ media.id }}"
+ data-media-position="{{ media_index }}"
+ {% if gang_exist == true %}data-gang-option="{{ gang_option_name }}" data-gang-connect="{{ gang_connect }}"{% endif %}
+ >
+ {%- if media.media_type != 'image' -%}
+ <span class="deferred-media__poster-button motion-reduce">
+ {%- if media.media_type == 'model' -%}
+ <span class="visually-hidden">{{ 'products.product.media.play_model' | t }}</span>
+ {%- render 'icon', icon: '3d-model' -%}
+ {%- else -%}
+ <span class="visually-hidden">{{ 'products.product.media.play_video' | t }}</span>
+ {%- render 'icon', icon: 'play' -%}
+ {%- endif -%}
+ </span>
+ {%- endif -%}
- <button
- class="thumbnail media media--square"
- aria-label="{%- if media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
- {% if media == featured_media or featured_media == null and forloop.first %}
- aria-current="true"
- {% endif %}
- aria-controls="GalleryViewer-{{ section.id }}"
- aria-describedby="Thumbnail-{{ section.id }}-{{ forloop.index }}"
- >
- {%- capture sizes -%}(min-width: {{ settings.page_width }}px) calc(({{ settings.page_width | minus: 100 | times: media_width | round }} - 4rem) / 4), (min-width: 990px) calc(({{ media_width | times: 100 }}vw - 4rem) / 4), (min-width: 750px) calc((100vw - 15rem) / 8), calc((100vw - 14rem) / 3){%- endcapture -%}
- {%- liquid
- assign image_id = 'Thumbnail-' | append: section.id | append: '-' | append: forloop.index
- assign alt = media.alt | escape | split: '#' | first
- echo media.preview_image | image_url: width: 416 | image_tag: loading: 'lazy', id: image_id, sizes: sizes, widths: '54, 74, 162, 208, 324, 416', alt: alt
- -%}
- </button>
- </li>
- {%- endunless -%}
- {% endif %}
+ <button class="thumbnail media media--square"
+ aria-label="{%- if media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
+ {% if media == featured_media or featured_media == null and forloop.first %} aria-current="true"{% endif %}
+ aria-controls="GalleryViewer-{{ section.id }}"
+ aria-describedby="Thumbnail-{{ section.id }}-{{ forloop.index }}"
+ >
+ {%- capture sizes -%}(min-width: {{ settings.page_width }}px) calc(({{ settings.page_width | minus: 100 | times: media_width | round }} - 4rem) / 4), (min-width: 990px) calc(({{ media_width | times: 100 }}vw - 4rem) / 4), (min-width: 750px) calc((100vw - 15rem) / 8), calc((100vw - 14rem) / 3){%- endcapture -%}
+ {%- liquid
+ assign image_id = 'Thumbnail-' | append: section.id | append: '-' | append: forloop.index
+ assign alt = media.alt | escape | split: '#' | first
+ echo media.preview_image | image_url: width: 416 | image_tag: loading: 'lazy', id: image_id, sizes: sizes, widths: '54, 74, 162, 208, 324, 416', alt: alt
+ -%}
+ </button>
+ </li>
+ {%- endunless -%}
{%- endfor -%}
</ul>
<div class="slider-buttons{% if media_count <= 3 %} small-hide{% endif %}{% if media_count <= 4 %} medium-hide large-up-hide{% endif %}">
- <button
- type="button"
- class="slider-button slider-button--prev"
- name="previous"
- aria-label="{{ 'general.slider.previous_slide' | t }}"
- aria-controls="GalleryThumbnails-{{ section.id }}"
- data-step="3"
- >
- {% render 'icon', icon: 'caret' %}
- </button>
- <button
- type="button"
- class="slider-button slider-button--next"
- name="next"
- aria-label="{{ 'general.slider.next_slide' | t }}"
- aria-controls="GalleryThumbnails-{{ section.id }}"
- data-step="3"
- >
- {% render 'icon', icon: 'caret' %}
- </button>
+ <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}" aria-controls="GalleryThumbnails-{{ section.id }}" data-step="3">{% render 'icon', icon: 'caret' %}</button>
+ <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}" aria-controls="GalleryThumbnails-{{ section.id }}" data-step="3">{% render 'icon', icon: 'caret' %}</button>
</div>
</thumbnail-slider>
{%- endif -%}
- {%- if section.settings.gallery_layout == 'stacked'
- and section.settings.show_thumbnails
- and product.media.size > 1
- -%}
+ {%- if section.settings.gallery_layout == 'stacked' and section.settings.show_thumbnails and product.media.size > 1 -%}
<div class="product__thumbnails-wrapper">
<product-thumbnails id="ProductThumbnails-{{ section.id }}" class="product__thumbnails">
{%- if featured_media != null -%}
@@ -509,7 +372,7 @@
if gang_connect contains '_'
assign gang_exist = true
assign gang_option_name = gang_connect | split: '_' | first | handleize
-
+
for option_name in product.options
assign option_name_handlized = option_name | handleize | replace: '_', '-'
if option_name_handlized == gang_option_name
@@ -525,28 +388,22 @@
endif
endif
-%}
- <div
- data-section="{{ section.id }}"
- data-media-id="{{ featured_media.id }}"
+ <div data-section="{{ section.id }}" data-media-id="{{ featured_media.id }}"
class="product__thumbnail media-wrapper media-wrapper--small{% if variant_image %} product__media-item--variant{% endif %} is-active {% if gang_media_active == true %} gang__active{% endif %}"
data-thumbnail-position="{{ featured_media.position }}"
- {% if gang_exist == true %}
- data-gang-option="{{ gang_option_name }}" data-gang-connect="{{ gang_connect }}"
- {% endif %}
+ {% if gang_exist == true %}data-gang-option="{{ gang_option_name }}" data-gang-connect="{{ gang_connect }}"{% endif %}
>
- <div
- class="media media--adapt"
+ <div class="media media--adapt"
style="--image-ratio-percent: {{ 1 | divided_by: featured_media.preview_image.aspect_ratio | times: 100 }}%;"
>
- <img
- srcset="{{ featured_media.preview_image | image_url: width: 165 }} 1x, {{ featured_media.preview_image | image_url: width: 330 }} 2x"
+ <img srcset="{{ featured_media.preview_image | image_url: width: 165 }} 1x, {{ featured_media.preview_image | image_url: width: 330 }} 2x"
src="{{ featured_media.preview_image | image_url: width: 165 }}"
loading="lazy"
width="{{ featured_media.preview_image.width }}"
height="{{ featured_media.preview_image.height }}"
alt="{{ featured_media.preview_image.alt | escape | split: '#' | first }}"
is="lazy-image"
- >
+ />
</div>
{%- if featured_media.media_type != 'image' -%}
<span class="deferred-media__poster-button motion-reduce">
@@ -579,7 +436,7 @@
if gang_connect contains '_'
assign gang_exist = true
assign gang_option_name = gang_connect | split: '_' | first | handleize
-
+
for option_name in product.options
assign option_name_handlized = option_name | handleize | replace: '_', '-'
if option_name_handlized == gang_option_name
@@ -595,28 +452,22 @@
endif
endif
-%}
- <div
- data-section="{{ section.id }}"
- data-media-id="{{ media.id }}"
+ <div data-section="{{ section.id }}" data-media-id="{{ media.id }}"
class="product__thumbnail media-wrapper media-wrapper--small{% if variant_image %} product__media-item--variant{% endif %}{% if media == featured_media or featured_media == null and forloop.first %} is-active{% endif %}{% if gang_media_active == true %} gang__active{% endif %}"
data-thumbnail-position="{{ media.position }}"
- {% if gang_exist == true %}
- data-gang-option="{{ gang_option_name }}" data-gang-connect="{{ gang_connect }}"
- {% endif %}
+ {% if gang_exist == true %}data-gang-option="{{ gang_option_name }}" data-gang-connect="{{ gang_connect }}"{% endif %}
>
- <div
- class="media media--adapt"
+ <div class="media media--adapt"
style="--image-ratio-percent: {{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100 }}%;"
>
- <img
- srcset="{{ media.preview_image | image_url: width: 165 }} 1x, {{ media.preview_image | image_url: width: 330 }} 2x"
+ <img srcset="{{ media.preview_image | image_url: width: 165 }} 1x, {{ media.preview_image | image_url: width: 330 }} 2x"
src="{{ media.preview_image | image_url: width: 165 }}"
loading="lazy"
width="{{ media.preview_image.width }}"
height="{{ media.preview_image.height }}"
alt="{{ media.preview_image.alt | escape | split: '#' | first }}"
is="lazy-image"
- >
+ />
</div>
{%- if media.media_type != 'image' -%}
<span class="deferred-media__poster-button motion-reduce">
@@ -641,119 +492,121 @@
{%- liquid
assign product_form_id = 'product-form-' | append: section.id
-
- assign titleBlock = section.blocks | where: 'type', 'title' | first
+
+ assign titleBlock = section.blocks | where: "type", "title" | first
assign titleBlockPrice = false
if titleBlock.settings.show_price == true
assign titleBlockPrice = true
endif
-%}
<div class="product__info-wrapper grid__item">
- <div
- id="ProductInfo-{{ section.id }}"
- class="product__info-container{% if section.settings.enable_sticky_info %} product__info-container--sticky{% endif %}"
- >
+ <div id="ProductInfo-{{ section.id }}" class="product__info-container{% if section.settings.enable_sticky_info %} product__info-container--sticky{% endif %}">
{%- for block in section.blocks -%}
{%- case block.type -%}
- {%- when '@app' -%}
- {% render block %}
- {%- when 'text' -%}
- {%- if block.settings.text != blank -%}
- <p
- class="product__text{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}"
- {{ block.shopify_attributes }}
- >
- {%- liquid
- if block.settings.text != product.vendor
- render 'icon-accordion', icon: block.settings.icon
- echo block.settings.text
- else
- echo product.vendor | link_to_vendor: class: 'link'
- endif
- -%}
- </p>
- {%- endif -%}
- {%- when 'sku' -%}
- <p
- class="product__sku{% if block.settings.sku_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.sku_style == 'subtitle' %} subtitle{% endif %}"
- id="sku-{{ section.id }}"
- {{ block.shopify_attributes }}
- >
- {{- product.selected_or_first_available_variant.sku -}}
+ {%- when '@app' -%}
+ {% render block %}
+ {%- when 'text' -%}
+ {%- if block.settings.text != blank -%}
+ <p class="product__text{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}" {{ block.shopify_attributes }}>
+ {%- liquid
+ if block.settings.text != product.vendor
+ render 'icon-accordion', icon: block.settings.icon
+ echo block.settings.text
+ else
+ echo product.vendor | link_to_vendor : class: "link"
+ endif
+ -%}
</p>
- {%- when 'title' -%}
- <div class="product__title" {{ block.shopify_attributes }}>
- <h1 class="product__heading {{ block.settings.title_size }}">
- {{ product.title | escape }}
- </h1>
- {%- if block.settings.show_price -%}
- <div class="no-js-hidden" id="price-{{ section.id }}">
- {%- liquid
- assign price_class = 'price--' | append: block.settings.price_size
- render 'price', product: product, use_variant: true, show_badges: false, price_class: price_class
- -%}
- </div>
- {%- endif -%}
- </div>
+ {%- endif -%}
+ {%- when 'sku' -%}
+ <p class="product__sku{% if block.settings.sku_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.sku_style == 'subtitle' %} subtitle{% endif %}" id="sku-{{ section.id }}" {{ block.shopify_attributes }}>
+ {{- product.selected_or_first_available_variant.sku -}}
+ </p>
+ {%- when 'title' -%}
+ <div class="product__title" {{ block.shopify_attributes }}>
+ <h1 class="product__heading {{ block.settings.title_size }}">
+ {{ product.title | escape }}
+ </h1>
{%- if block.settings.show_price -%}
- {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
- <div class="product__tax caption rte">
- {%- if shop.taxes_included -%}
- {{ 'products.product.include_taxes' | t }}
- {%- endif -%}
- {%- if shop.shipping_policy.body != blank -%}
- {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
- {%- endif -%}
- </div>
- {%- endif -%}
- <div {{ block.shopify_attributes }}>
- {%- assign product_form_installment_id = 'product-form-installment-' | append: section.id -%}
- {%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%}
- <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
- {{ form | payment_terms }}
- {%- endform -%}
- </div>
- {%- endif -%}
- {%- when 'price' -%}
- {%- if titleBlockPrice == false -%}
- <div class="no-js-hidden" id="price-{{ section.id }}" {{ block.shopify_attributes }}>
+ <div class="no-js-hidden" id="price-{{ section.id }}">
{%- liquid
- assign show_badges = block.settings.show_badges
assign price_class = 'price--' | append: block.settings.price_size
- render 'price', product: product, use_variant: true, show_badges: show_badges, price_class: price_class, sale_badge_basis: block.settings.sale_badge_basis
+ render 'price', product: product, use_variant: true, show_badges: false, price_class: price_class
-%}
</div>
- {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
- <div class="product__tax caption rte">
- {%- if shop.taxes_included -%}
- {{ 'products.product.include_taxes' | t }}
- {%- endif -%}
- {%- if shop.shipping_policy.body != blank -%}
- {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
- {%- endif -%}
- </div>
- {%- endif -%}
- <div {{ block.shopify_attributes }}>
- {%- assign product_form_installment_id = 'product-form-installment-' | append: section.id -%}
- {%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%}
- <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
- {{ form | payment_terms }}
- {%- endform -%}
+ {%- endif -%}
+ </div>
+ {%- if block.settings.show_price -%}
+ {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
+ <div class="product__tax caption rte">
+ {%- if shop.taxes_included -%}
+ {{ 'products.product.include_taxes' | t }}
+ {%- endif -%}
+ {%- if shop.shipping_policy.body != blank -%}
+ {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
+ {%- endif -%}
</div>
{%- endif -%}
- {%- when 'description' -%}
- <div class="product__description rte" {{ block.shopify_attributes }}>{{ product.description }}</div>
- {%- when 'custom_liquid' -%}
- <div class="custom__liquid custom__liquid-{{ section.id }}" {{ block.shopify_attributes }}>
- {{ block.settings.custom_liquid }}
+ <div {{ block.shopify_attributes }}>
+ {%- assign product_form_installment_id = 'product-form-installment-' | append: section.id -%}
+ {%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%}
+ <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
+ {{ form | payment_terms }}
+ {%- endform -%}
</div>
- {%- when 'collapsible_description' -%}
+ {%- endif -%}
+ {%- when 'price' -%}
+ {%- if titleBlockPrice == false -%}
+ <div class="no-js-hidden" id="price-{{ section.id }}" {{ block.shopify_attributes }}>
+ {%- liquid
+ assign show_badges = block.settings.show_badges
+ assign price_class = 'price--' | append: block.settings.price_size
+ render 'price', product: product, use_variant: true, show_badges: show_badges, price_class: price_class, sale_badge_basis: block.settings.sale_badge_basis
+ -%}
+ </div>
+ {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
+ <div class="product__tax caption rte">
+ {%- if shop.taxes_included -%}
+ {{ 'products.product.include_taxes' | t }}
+ {%- endif -%}
+ {%- if shop.shipping_policy.body != blank -%}
+ {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
+ {%- endif -%}
+ </div>
+ {%- endif -%}
+ <div {{ block.shopify_attributes }}>
+ {%- assign product_form_installment_id = 'product-form-installment-' | append: section.id -%}
+ {%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%}
+ <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
+ {{ form | payment_terms }}
+ {%- endform -%}
+ </div>
+ {%- endif -%}
+ {%- when 'description' -%}
+ <div class="product__description rte" {{ block.shopify_attributes }}>{{ product.description }}</div>
+ {%- when 'custom_liquid' -%}
+ <div class="custom__liquid custom__liquid-{{ section.id }}" {{ block.shopify_attributes }}>{{ block.settings.custom_liquid }}</div>
+ {%- when 'collapsible_description' -%}
+ <accordion-tab class="product__accordion accordion" {{ block.shopify_attributes }}>
+ <details{% if block.settings.keep_open %} open{% endif %}>
+ <summary>
+ <span class="summary__title">
+ {% render 'icon-accordion', icon: block.settings.icon %}
+ <span class="accordion__title">
+ {{ block.settings.heading | default: block.settings.page.title | escape }}
+ </span>
+ </span>
+ {% render 'icon', icon: 'caret' %}
+ </summary>
+ <div class="accordion__content rte">
+ {{ product.description }}
+ </div>
+ </details>
+ </accordion-tab>
+ {%- when 'collapsible_tab' -%}
+ {%- if block.settings.content != blank or block.settings.page.content != blank or block.settings.custom_liquid != blank -%}
<accordion-tab class="product__accordion accordion" {{ block.shopify_attributes }}>
- <details
- {% if block.settings.keep_open %}
- open
- {% endif %}
- >
+ <details{% if block.settings.keep_open %} open{% endif %}>
<summary>
<span class="summary__title">
{% render 'icon-accordion', icon: block.settings.icon %}
@@ -763,179 +616,132 @@
</span>
{% render 'icon', icon: 'caret' %}
</summary>
- <div class="accordion__content rte">
- {{ product.description }}
+ <div class="accordion__content custom__liquid-{{ section.id }} rte">
+ {{ block.settings.content }}
+ {{ block.settings.page.content }}
+ {{ block.settings.custom_liquid }}
</div>
</details>
</accordion-tab>
- {%- when 'collapsible_tab' -%}
- {%- if block.settings.content != blank
- or block.settings.page.content != blank
- or block.settings.custom_liquid != blank
- -%}
- <accordion-tab class="product__accordion accordion" {{ block.shopify_attributes }}>
- <details
- {% if block.settings.keep_open %}
- open
- {% endif %}
- >
- <summary>
- <span class="summary__title">
- {% render 'icon-accordion', icon: block.settings.icon %}
- <span class="accordion__title">
- {{ block.settings.heading | default: block.settings.page.title | escape }}
- </span>
- </span>
- {% render 'icon', icon: 'caret' %}
- </summary>
- <div class="accordion__content custom__liquid-{{ section.id }} rte">
- {{ block.settings.content }}
- {{ block.settings.page.content }}
- {{ block.settings.custom_liquid }}
- </div>
- </details>
- </accordion-tab>
- {%- endif -%}
- {%- when 'popup' -%}
- <modal-opener
- class="product-popup-modal__opener no-js-hidden"
- data-modal="#PopupModal-{{ block.id }}"
- {{ block.shopify_attributes }}
- >
- <button
- id="ProductPopup-{{ block.id }}"
- class="product-popup-modal__button link link-with-icon"
- type="button"
- aria-haspopup="dialog"
- >
- {% render 'icon-accordion', icon: block.settings.icon %}
- <span class="label">{{ block.settings.link_label | default: block.settings.page.title }}</span>
- </button>
- </modal-opener>
- <a href="{{ block.settings.page.url }}" class="product-popup-modal__button link link-with-icon no-js">
+ {%- endif -%}
+ {%- when 'popup' -%}
+ <modal-opener class="product-popup-modal__opener no-js-hidden" data-modal="#PopupModal-{{ block.id }}" {{ block.shopify_attributes }}>
+ <button id="ProductPopup-{{ block.id }}" class="product-popup-modal__button link link-with-icon" type="button" aria-haspopup="dialog">
{% render 'icon-accordion', icon: block.settings.icon %}
<span class="label">{{ block.settings.link_label | default: block.settings.page.title }}</span>
- </a>
- {%- when 'share' -%}
+ </button>
+ </modal-opener>
+ <a href="{{ block.settings.page.url }}" class="product-popup-modal__button link link-with-icon no-js">
+ {% render 'icon-accordion', icon: block.settings.icon %}
+ <span class="label">{{ block.settings.link_label | default: block.settings.page.title }}</span>
+ </a>
+ {%- when 'share' -%}
+ {%- liquid
+ assign share_url = product.selected_variant.url | default: product.url | prepend: request.origin
+ assign share_image = product.selected_or_first_available_variant.featured_media.preview_image | default: product.featured_media.preview_image
+ render 'share-button', block: block, share_link: share_url, share_image: share_image, share_title: product.title
+ -%}
+ {%- when 'inventory_status' -%}
+ <ul class="product__inventory list-unstyled" id="inventory-{{ section.id }}" {{ block.shopify_attributes }}>
{%- liquid
- assign share_url = product.selected_variant.url | default: product.url | prepend: request.origin
- assign share_image = product.selected_or_first_available_variant.featured_media.preview_image | default: product.featured_media.preview_image
- render 'share-button', block: block, share_link: share_url, share_image: share_image, share_title: product.title
- -%}
- {%- when 'inventory_status' -%}
- <ul
- class="product__inventory list-unstyled"
- id="inventory-{{ section.id }}"
- {{ block.shopify_attributes }}
- >
- {%- liquid
- assign inventory_visible = false
- if product.selected_or_first_available_variant.inventory_management == 'shopify'
- if product.selected_or_first_available_variant.inventory_quantity <= block.settings.inventory_threshold and product.selected_or_first_available_variant.inventory_quantity >= 0
- assign inventory_visible = true
- endif
+ assign inventory_visible = false
+ if product.selected_or_first_available_variant.inventory_management == 'shopify'
+ if product.selected_or_first_available_variant.inventory_quantity <= block.settings.inventory_threshold and product.selected_or_first_available_variant.inventory_quantity >= 0
+ assign inventory_visible = true
endif
+ endif
- if product.selected_or_first_available_variant.inventory_quantity == 0 or product.selected_or_first_available_variant.inventory_policy == 'continue'
- assign inventory_visible = false
- endif
+ if product.selected_or_first_available_variant.inventory_quantity == 0 or product.selected_or_first_available_variant.inventory_policy == 'continue'
+ assign inventory_visible = false
+ endif
- assign show_incoming = false
- if product.selected_or_first_available_variant.incoming and inventory_visible == false and product.selected_or_first_available_variant.inventory_quantity <= block.settings.inventory_threshold
- assign show_incoming = true
- endif
- -%}
- {%- if product.selected_or_first_available_variant.available and inventory_visible -%}
- <li class="product__inventory-item">
- {{
- 'products.product.inventory.stock_label_html'
- | t: count: product.selected_or_first_available_variant.inventory_quantity
- }}
- <progress-bar
- class="{{ block.settings.color_scheme }}"
- data-quantity="{{ product.selected_or_first_available_variant.inventory_quantity }}"
- ></progress-bar>
- </li>
- {%- endif -%}
- {%- if block.settings.show_inventory_transfer and show_incoming -%}
- <li class="product__inventory-item">
- <span class="icon-and-text">
- <span class="icon icon--inventory"></span>
- <span class="js-incoming-text">
- {%- liquid
- if product.selected_or_first_available_variant.next_incoming_date
- assign date = product.selected_or_first_available_variant.next_incoming_date | date: format: 'date'
- if product.selected_or_first_available_variant.available
- echo 'products.product.inventory.will_not_ship_until' | t: date: date
- else
- echo 'products.product.inventory.will_be_in_stock_after' | t: date: date
- endif
+ assign show_incoming = false
+ if product.selected_or_first_available_variant.incoming and inventory_visible == false and product.selected_or_first_available_variant.inventory_quantity <= block.settings.inventory_threshold
+ assign show_incoming = true
+ endif
+ -%}
+ {%- if product.selected_or_first_available_variant.available and inventory_visible -%}
+ <li class="product__inventory-item">
+ {{ 'products.product.inventory.stock_label_html' | t: count: product.selected_or_first_available_variant.inventory_quantity }}
+ <progress-bar class="{{ block.settings.color_scheme }}" data-quantity="{{ product.selected_or_first_available_variant.inventory_quantity }}"></progress-bar>
+ </li>
+ {%- endif -%}
+ {%- if block.settings.show_inventory_transfer and show_incoming -%}
+ <li class="product__inventory-item">
+ <span class="icon-and-text">
+ <span class="icon icon--inventory"></span>
+ <span class="js-incoming-text">
+ {%- liquid
+ if product.selected_or_first_available_variant.next_incoming_date
+ assign date = product.selected_or_first_available_variant.next_incoming_date | date: format: 'date'
+ if product.selected_or_first_available_variant.available
+ echo 'products.product.inventory.will_not_ship_until' | t: date: date
else
- echo 'products.product.inventory.waiting_for_stock' | t
+ echo 'products.product.inventory.will_be_in_stock_after' | t: date: date
endif
- -%}
- </span>
+ else
+ echo 'products.product.inventory.waiting_for_stock' | t
+ endif
+ -%}
</span>
- </li>
- {%- endif -%}
- </ul>
- {{ 'component-product-inventory.css' | asset_url | stylesheet_tag }}
- {%- when 'variant_picker' -%}
- {% render 'product-variant-picker', block: block, product: product %}
- {%- when 'buy_buttons' -%}
- {% render 'buy-buttons',
- block: block,
- product: product,
- product_form_id: product_form_id,
- show_pickup_availability: true
- %}
- {%- when 'rating' -%}
- {%- if product.metafields.reviews.rating.value != blank -%}
- {% liquid
- assign rating_decimal = 0
- assign decimal = product.metafields.reviews.rating.value.rating | modulo: 1
- if decimal >= 0.3 and decimal <= 0.7
- assign rating_decimal = 0.5
- elsif decimal > 0.7
- assign rating_decimal = 1
- endif
- %}
- <div
- class="rating"
- role="img"
- aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product.metafields.reviews.rating.value, rating_max: product.metafields.reviews.rating.value.scale_max }}"
- >
- <span
- aria-hidden="true"
- class="rating-star"
- style="--rating: {{ product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"
- ></span>
- </div>
- <p class="rating-text caption">
- <span aria-hidden="true">
- {{- product.metafields.reviews.rating.value }} /
- {{ product.metafields.reviews.rating.value.scale_max -}}
- </span>
- </p>
- <p class="rating-count caption">
- <span aria-hidden="true">({{ product.metafields.reviews.rating_count }})</span>
- <span class="visually-hidden">
- {{- product.metafields.reviews.rating_count }}
- {{ 'accessibility.total_reviews' | t -}}
</span>
- </p>
+ </li>
{%- endif -%}
- {%- when 'related_buttons' -%}
- <div class="product-link__button product__accordion accordion small-hide" {{ block.shopify_attributes }}>
- <related-buttons data-scrollto="#ProductDetails">
- <a href="#ProductDetails">
+ </ul>
+ {{ 'component-product-inventory.css' | asset_url | stylesheet_tag }}
+ {%- when 'variant_picker' -%}
+ {% render 'product-variant-picker', block: block, product: product %}
+ {%- when 'buy_buttons' -%}
+ {% render 'buy-buttons', block: block, product: product, product_form_id: product_form_id, show_pickup_availability: true %}
+ {%- when 'rating' -%}
+ {%- if product.metafields.reviews.rating.value != blank -%}
+ {% liquid
+ assign rating_decimal = 0
+ assign decimal = product.metafields.reviews.rating.value.rating | modulo: 1
+ if decimal >= 0.3 and decimal <= 0.7
+ assign rating_decimal = 0.5
+ elsif decimal > 0.7
+ assign rating_decimal = 1
+ endif
+ %}
+ <div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product.metafields.reviews.rating.value, rating_max: product.metafields.reviews.rating.value.scale_max }}">
+ <span aria-hidden="true" class="rating-star" style="--rating: {{ product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
+ </div>
+ <p class="rating-text caption">
+ <span aria-hidden="true">{{ product.metafields.reviews.rating.value }} / {{ product.metafields.reviews.rating.value.scale_max }}</span>
+ </p>
+ <p class="rating-count caption">
+ <span aria-hidden="true">({{ product.metafields.reviews.rating_count }})</span>
+ <span class="visually-hidden">{{ product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
+ </p>
+ {%- endif -%}
+ {%- when 'related_buttons' -%}
+ <div class="product-link__button product__accordion accordion small-hide" {{ block.shopify_attributes }}>
+ <related-buttons data-scrollto="#ProductDetails">
+ <a href="#ProductDetails">
+ <span class="summary__title">
+ {%- liquid
+ if block.settings.show_icons
+ render 'icon', icon: 'info'
+ endif
+ -%}
+ <span class="accordion__title">{{ 'products.product.view_info' | t }}</span>
+ </span>
+ {%- liquid
+ unless block.settings.show_icons
+ render 'icon', icon: 'caret'
+ endunless
+ -%}
+ </a>
+ {%- if product.media.size > 0 -%}
+ <a href="#ProductImages">
<span class="summary__title">
{%- liquid
if block.settings.show_icons
- render 'icon', icon: 'info'
+ render 'icon', icon: 'images'
endif
-%}
- <span class="accordion__title">{{ 'products.product.view_info' | t }}</span>
+ <span class="accordion__title">{{ 'products.product.view_images' | t }}</span>
</span>
{%- liquid
unless block.settings.show_icons
@@ -943,31 +749,15 @@
endunless
-%}
</a>
- {%- if product.media.size > 0 -%}
- <a href="#ProductImages">
- <span class="summary__title">
- {%- liquid
- if block.settings.show_icons
- render 'icon', icon: 'images'
- endif
- -%}
- <span class="accordion__title">{{ 'products.product.view_images' | t }}</span>
- </span>
- {%- liquid
- unless block.settings.show_icons
- render 'icon', icon: 'caret'
- endunless
- -%}
- </a>
- {%- endif -%}
- </related-buttons>
- </div>
- {%- when 'image' -%}
- {%- if block.settings.image != blank -%}
- <div class="product-link__image" {{ block.shopify_attributes }}>
- {%- if block.settings.link != blank -%}
- <a href="{{ block.settings.link }}">
- {%- endif -%}
+ {%- endif -%}
+ </related-buttons>
+ </div>
+ {%- when 'image' -%}
+ {%- if block.settings.image != blank -%}
+ <div class="product-link__image" {{ block.shopify_attributes }}>
+ {%- if block.settings.link != blank -%}
+ <a href="{{ block.settings.link }}">
+ {%- endif -%}
{%- liquid
assign image_height = block.settings.height
assign image_height_2x = block.settings.height | times: 2
@@ -980,74 +770,52 @@
width="{{ block.settings.image.width }}"
height="{{ block.settings.image.height }}"
loading="lazy"
- >
- {%- if block.settings.link != blank -%}
- </a>
+ />
+ {%- if block.settings.link != blank -%}
+ </a>
+ {%- endif -%}
+ </div>
+ {%- endif -%}
+ {%- when 'countdown' -%}
+ {%- if product.metafields.theme.countdown.value != blank -%}
+ {%- liquid
+ assign now_time = 'now' | date: '%s' | times: 1
+ assign countdown_time = product.metafields.theme.countdown.value | date: '%s' | times: 1
+ -%}
+ {%- if countdown_time > now_time -%}
+ <div id="countdown-{{ block.id }}" class="product-countdown product-countdown--{{ block.settings.number_size }}">
+ {%- if block.settings.heading != blank -%}
+ <p class="h4">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M381.2 172.8C377.1 164.9 368.9 160 360 160h-156.6l50.84-127.1c2.969-7.375 2.062-15.78-2.406-22.38S239.1 0 232 0h-176C43.97 0 33.81 8.906 32.22 20.84l-32 240C-.7179 267.7 1.376 274.6 5.938 279.8C10.5 285 17.09 288 24 288h146.3l-41.78 194.1c-2.406 11.22 3.469 22.56 14 27.09C145.6 511.4 148.8 512 152 512c7.719 0 15.22-3.75 19.81-10.44l208-304C384.8 190.2 385.4 180.7 381.2 172.8z"/></svg>
+ {{- block.settings.heading | escape -}}
+ </p>
{%- endif -%}
+ <countdown-timer class="countdown countdown--{{ block.settings.number_size }}" data-date="{{ product.metafields.theme.countdown.value | escape }}"{% if block.settings.number_size == 'compact' %} data-compact="true"{% endif %} {{ block.shopify_attributes }}></countdown-timer>
+ {%- style -%}
+ #countdown-{{ block.id }} {
+ --color-background: {{ block.settings.colors_background.red }}, {{ block.settings.colors_background.green }}, {{ block.settings.colors_background.blue }};
+ --color-foreground: {{ block.settings.colors_text.red }}, {{ block.settings.colors_text.green }}, {{ block.settings.colors_text.blue }};
+ --color-heading: {{ block.settings.colors_heading.red }}, {{ block.settings.colors_heading.green }}, {{ block.settings.colors_heading.blue }};
+ }
+ {%- endstyle -%}
+ {{ 'section-countdown-timer.css' | asset_url | stylesheet_tag }}
</div>
{%- endif -%}
- {%- when 'countdown' -%}
- {%- if product.metafields.theme.countdown.value != blank -%}
- {%- liquid
- assign now_time = 'now' | date: '%s' | times: 1
- assign countdown_time = product.metafields.theme.countdown.value | date: '%s' | times: 1
- -%}
- {%- if countdown_time > now_time -%}
- <div
- id="countdown-{{ block.id }}"
- class="product-countdown product-countdown--{{ block.settings.number_size }}"
- >
- {%- if block.settings.heading != blank -%}
- <p class="h4">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
- <path d="M381.2 172.8C377.1 164.9 368.9 160 360 160h-156.6l50.84-127.1c2.969-7.375 2.062-15.78-2.406-22.38S239.1 0 232 0h-176C43.97 0 33.81 8.906 32.22 20.84l-32 240C-.7179 267.7 1.376 274.6 5.938 279.8C10.5 285 17.09 288 24 288h146.3l-41.78 194.1c-2.406 11.22 3.469 22.56 14 27.09C145.6 511.4 148.8 512 152 512c7.719 0 15.22-3.75 19.81-10.44l208-304C384.8 190.2 385.4 180.7 381.2 172.8z"/>
- </svg>
- {{- block.settings.heading | escape -}}
- </p>
- {%- endif -%}
- <countdown-timer
- class="countdown countdown--{{ block.settings.number_size }}"
- data-date="{{ product.metafields.theme.countdown.value | escape }}"
- {% if block.settings.number_size == 'compact' %}
- data-compact="true"
- {% endif %}
- {{ block.shopify_attributes }}
- ></countdown-timer>
- {%- style -%}
- #countdown-{{ block.id }} {
- --color-background: {{ block.settings.colors_background.red }}, {{ block.settings.colors_background.green }}, {{ block.settings.colors_background.blue }};
- --color-foreground: {{ block.settings.colors_text.red }}, {{ block.settings.colors_text.green }}, {{ block.settings.colors_text.blue }};
- --color-heading: {{ block.settings.colors_heading.red }}, {{ block.settings.colors_heading.green }}, {{ block.settings.colors_heading.blue }};
- }
- {%- endstyle -%}
- {{ 'section-countdown-timer.css' | asset_url | stylesheet_tag }}
- </div>
- {%- endif -%}
- {%- endif -%}
- {%- when 'separator' -%}
- <div class="product-separator" {{ block.shopify_attributes }}>
- <hr>
- </div>
- {%- when 'spacing' -%}
- <div
- class="spacing-section"
- style="--spacing-section-desktop: {{ block.settings.desktop_height }}px; --spacing-section-mobile: {{ block.settings.mobile_height }}px;"
- {{ block.shopify_attributes }}
- ></div>
- {%- when 'breadcrumb' -%}
- <div class="breadcrumb-wrapper" {{ block.shopify_attributes }}>
- {% render 'breadcrumbs',
- text_style: block.settings.text_style,
- show_divider: block.settings.show_divider
- %}
- </div>
- {%- when 'complementary' -%}
- <product-recommendations
- class="complementary-products{% if block.settings.make_collapsible_row %} is-accordion{% endif %} no-js-hidden"
- data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit={{ block.settings.product_list_limit }}&intent=complementary"
- >
- {%- if recommendations.performed and recommendations.products_count > 0 -%}
- {%- capture complementary_products -%}
+ {%- endif -%}
+ {%- when 'separator' -%}
+ <div class="product-separator" {{ block.shopify_attributes }}>
+ <hr/>
+ </div>
+ {%- when 'spacing' -%}
+ <div class="spacing-section" style="--spacing-section-desktop: {{ block.settings.desktop_height }}px; --spacing-section-mobile: {{ block.settings.mobile_height }}px;" {{ block.shopify_attributes }}></div>
+ {%- when 'breadcrumb' -%}
+ <div class="breadcrumb-wrapper" {{ block.shopify_attributes }}>
+ {% render 'breadcrumbs', text_style: block.settings.text_style, show_divider: block.settings.show_divider %}
+ </div>
+ {%- when 'complementary' -%}
+ <product-recommendations class="complementary-products{% if block.settings.make_collapsible_row %} is-accordion{% endif %} no-js-hidden" data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit={{ block.settings.product_list_limit }}&intent=complementary">
+ {%- if recommendations.performed and recommendations.products_count > 0 -%}
+ {%- capture complementary_products -%}
<ul class="list-unstyled" role="list" style="--image-position: {{ block.settings.image_position }}">
{%- for product in recommendations.products -%}
<li>
@@ -1069,140 +837,87 @@
{%- endfor -%}
</ul>
{%- endcapture -%}
- {%- if block.settings.make_collapsible_row -%}
- <accordion-tab class="product__accordion accordion" {{ block.shopify_attributes }}>
- <details open>
- <summary>
- <span class="summary__title">
- {% render 'icon-accordion', icon: block.settings.icon %}
- <span class="accordion__title">
- {{ block.settings.heading | escape }}
- </span>
+ {%- if block.settings.make_collapsible_row -%}
+ <accordion-tab class="product__accordion accordion" {{ block.shopify_attributes }}>
+ <details open>
+ <summary>
+ <span class="summary__title">
+ {% render 'icon-accordion', icon: block.settings.icon %}
+ <span class="accordion__title">
+ {{ block.settings.heading | escape }}
</span>
- {% render 'icon', icon: 'caret' %}
- </summary>
- <div class="accordion__content">
- {{ complementary_products }}
- </div>
- </details>
- </accordion-tab>
- {%- else -%}
- <div class="product__accordion accordion" {{ block.shopify_attributes }}>
- <span class="summary__title">
- {% render 'icon-accordion', icon: block.settings.icon %}
- <span class="accordion__title">
- {{ block.settings.heading | escape }}
</span>
- </span>
+ {% render 'icon', icon: 'caret' %}
+ </summary>
<div class="accordion__content">
{{ complementary_products }}
</div>
+ </details>
+ </accordion-tab>
+ {%- else -%}
+ <div class="product__accordion accordion" {{ block.shopify_attributes }}>
+ <span class="summary__title">
+ {% render 'icon-accordion', icon: block.settings.icon %}
+ <span class="accordion__title">
+ {{ block.settings.heading | escape }}
+ </span>
+ </span>
+ <div class="accordion__content">
+ {{ complementary_products }}
</div>
- {%- endif -%}
+ </div>
{%- endif -%}
- {{ 'component-card.css' | asset_url | stylesheet_tag }}
- {{ 'section-product-recommendations.css' | asset_url | stylesheet_tag }}
- {{ 'component-complementary-products.css' | asset_url | stylesheet_tag }}
- </product-recommendations>
- {%- when 'line_item_property' -%}
- <div class="product-form__input" {{ block.shopify_attributes }}>
- {%- if block.settings.type == 'checkbox' -%}
- <label for="line-item-{{ section.id }}-{{ block.id }}" class="form__facet-checkbox">
- <input
- type="hidden"
- name="properties[{{ block.settings.label | escape }}]"
- value="{{ block.settings.unchecked_value | escape }}"
- form="{{ product_form_id }}"
- >
- <input
- id="line-item-{{ section.id }}-{{ block.id }}"
- type="checkbox"
- name="properties[{{ block.settings.label | escape }}]"
- value="{{ block.settings.checked_value | escape }}"
- {% if block.settings.required %}
- required
- {% endif %}
- form="{{ product_form_id }}"
- >
- {% render 'icon', icon: 'checkmark' %}
- {{ block.settings.label | escape }}
- </label>
- {%- else -%}
- <label class="form__label" for="line-item-{{ section.id }}-{{ block.id }}">
- {{- block.settings.label | escape -}}
- </label>
- {%- case block.settings.type -%}
- {%- when 'text' -%}
- <input
- class="field__input"
- id="line-item-{{ section.id }}-{{ block.id }}"
- type="text"
- name="properties[{{ block.settings.label | escape }}]"
- {% if block.settings.required %}
- required
- {% endif %}
- form="{{ product_form_id }}"
- >
- {%- when 'textarea' -%}
- <textarea
- class="text-area field__input"
- id="line-item-{{ section.id }}-{{ block.id }}"
- name="properties[{{ block.settings.label | escape }}]"
- {% if block.settings.required %}
- required
- {% endif %}
- form="{{ product_form_id }}"
- ></textarea>
- {%- when 'radio' -%}
- {%- assign options = block.settings.radio_options | split: ',' -%}
- {%- if options.size > 1 -%}
- <fieldset class="product-form__input">
+ {%- endif -%}
+ {{ 'component-card.css' | asset_url | stylesheet_tag }}
+ {{ 'section-product-recommendations.css' | asset_url | stylesheet_tag }}
+ {{ 'component-complementary-products.css' | asset_url | stylesheet_tag }}
+ </product-recommendations>
+ {%- when 'line_item_property' -%}
+ <div class="product-form__input" {{ block.shopify_attributes }}>
+ {%- if block.settings.type == 'checkbox' -%}
+ <label for="line-item-{{ section.id }}-{{ block.id }}" class="form__facet-checkbox">
+ <input type="hidden" name="properties[{{ block.settings.label | escape }}]" value="{{ block.settings.unchecked_value | escape }}" form="{{ product_form_id }}" />
+ <input id="line-item-{{ section.id }}-{{ block.id }}" type="checkbox" name="properties[{{ block.settings.label | escape }}]" value="{{ block.settings.checked_value | escape }}"{% if block.settings.required %} required{% endif %} form="{{ product_form_id }}" />
+ {% render 'icon', icon: 'checkmark' %}
+ {{ block.settings.label | escape }}
+ </label>
+ {%- else -%}
+ <label class="form__label" for="line-item-{{ section.id }}-{{ block.id }}">{{ block.settings.label | escape }}</label>
+ {%- case block.settings.type -%}
+ {%- when 'text' -%}
+ <input class="field__input" id="line-item-{{ section.id }}-{{ block.id }}" type="text" name="properties[{{ block.settings.label | escape }}]"{% if block.settings.required %} required{% endif %} form="{{ product_form_id }}" />
+ {%- when 'textarea' -%}
+ <textarea class="text-area field__input" id="line-item-{{ section.id }}-{{ block.id }}" name="properties[{{ block.settings.label | escape }}]"{% if block.settings.required %} required{% endif %} form="{{ product_form_id }}"></textarea>
+ {%- when 'radio' -%}
+ {%- assign options = block.settings.radio_options | split: ',' -%}
+ {%- if options.size > 1 -%}
+ <fieldset class="product-form__input">
+ {%- for option in options -%}
+ <label class="form__facet-radio" for="line-item-{{ section.id }}-{{ block.id }}-{{ forloop.index0 }}">
+ <input id="line-item-{{ section.id }}-{{ block.id }}-{{ forloop.index0 }}" type="radio" name="properties[{{ block.settings.label | escape }}]" value="{{ option | strip | escape }}"{% if block.settings.required %} required{% endif %} form="{{ product_form_id }}" />
+ <span class="icon"></span>
+ {{ option | strip | escape }}
+ </label>
+ {%- endfor -%}
+ </fieldset>
+ {%- endif -%}
+ {%- when 'select' -%}
+ {%- assign options = block.settings.select_options | split: ',' -%}
+ {%- if options.size > 1 -%}
+ <select-wrapper class="select">
+ <select class="select__select" id="line-item-{{ section.id }}-{{ block.id }}" name="properties[{{ block.settings.label | escape }}]"{% if block.settings.required %} required{% endif %} form="{{ product_form_id }}">
{%- for option in options -%}
- <label
- class="form__facet-radio"
- for="line-item-{{ section.id }}-{{ block.id }}-{{ forloop.index0 }}"
- >
- <input
- id="line-item-{{ section.id }}-{{ block.id }}-{{ forloop.index0 }}"
- type="radio"
- name="properties[{{ block.settings.label | escape }}]"
- value="{{ option | strip | escape }}"
- {% if block.settings.required %}
- required
- {% endif %}
- form="{{ product_form_id }}"
- >
- <span class="icon"></span>
+ <option value="{{ option | strip | escape }}">
{{ option | strip | escape }}
- </label>
+ </option>
{%- endfor -%}
- </fieldset>
- {%- endif -%}
- {%- when 'select' -%}
- {%- assign options = block.settings.select_options | split: ',' -%}
- {%- if options.size > 1 -%}
- <select-wrapper class="select">
- <select
- class="select__select"
- id="line-item-{{ section.id }}-{{ block.id }}"
- name="properties[{{ block.settings.label | escape }}]"
- {% if block.settings.required %}
- required
- {% endif %}
- form="{{ product_form_id }}"
- >
- {%- for option in options -%}
- <option value="{{ option | strip | escape }}">
- {{ option | strip | escape }}
- </option>
- {%- endfor -%}
- </select>
- {% render 'icon', icon: 'caret' %}
- </select-wrapper>
- {%- endif -%}
- {%- endcase -%}
- {%- endif -%}
- </div>
+ </select>
+ {% render 'icon', icon: 'caret' %}
+ </select-wrapper>
+ {%- endif -%}
+ {%- endcase-%}
+ {%- endif -%}
+ </div>
{%- endcase -%}
{%- endfor -%}
</div>
@@ -1211,22 +926,11 @@
{% render 'product-media-modal', product: product, variant_images: variant_images %}
- {%- assign popups = section.blocks | where: 'type', 'popup' -%}
+ {%- assign popups = section.blocks | where: "type", "popup" -%}
{%- for block in popups -%}
<modal-dialog id="PopupModal-{{ block.id }}" class="product-popup-modal">
- <div
- role="dialog"
- aria-label="{{ block.settings.link_label }}"
- aria-modal="true"
- class="product-popup-modal__content"
- tabindex="-1"
- >
- <button
- id="ModalClose-{{ block.id }}"
- type="button"
- class="product-popup-modal__toggle"
- aria-label="{{ 'accessibility.close' | t }}"
- >
+ <div role="dialog" aria-label="{{ block.settings.link_label }}" aria-modal="true" class="product-popup-modal__content" tabindex="-1">
+ <button id="ModalClose-{{ block.id }}" type="button" class="product-popup-modal__toggle" aria-label="{{ 'accessibility.close' | t }}">
<span class="icon icon-plus-alt"></span>
</button>
<div class="product-popup-modal__content-info">
@@ -1237,22 +941,11 @@
</modal-dialog>
{%- endfor -%}
- {%- assign block_variant_picker = section.blocks | where: 'type', 'variant_picker' | first -%}
+ {%- assign block_variant_picker = section.blocks | where: "type", "variant_picker" | first -%}
{%- if block_variant_picker and block_variant_picker.settings.size_chart != blank -%}
<modal-dialog id="PopupModal-{{ block_variant_picker.id }}" class="product-popup-modal">
- <div
- role="dialog"
- aria-label="{{ block_variant_picker.settings.link_label }}"
- aria-modal="true"
- class="product-popup-modal__content"
- tabindex="-1"
- >
- <button
- id="ModalClose-{{ block_variant_picker.id }}"
- type="button"
- class="product-popup-modal__toggle"
- aria-label="{{ 'accessibility.close' | t }}"
- >
+ <div role="dialog" aria-label="{{ block_variant_picker.settings.link_label }}" aria-modal="true" class="product-popup-modal__content" tabindex="-1">
+ <button id="ModalClose-{{ block_variant_picker.id }}" type="button" class="product-popup-modal__toggle" aria-label="{{ 'accessibility.close' | t }}">
<span class="icon icon-plus-alt"></span>
</button>
<div class="product-popup-modal__content-info">
@@ -1263,14 +956,9 @@
</modal-dialog>
{%- endif -%}
- {%- assign sticky_cart = section.blocks | where: 'type', 'sticky_cart' | first -%}
+ {%- assign sticky_cart = section.blocks | where: "type", "sticky_cart" | first -%}
{%- if sticky_cart -%}
- <link
- rel="stylesheet"
- href="{{ 'component-product-sticky-cart.css' | asset_url }}"
- media="print"
- onload="this.media='all'"
- >
+ <link rel="stylesheet" href="{{ 'component-product-sticky-cart.css' | asset_url }}" media="print" onload="this.media='all'">
<animate-sticky class="sticky-cart-wrapper hidden">
<span class="sticky-cart-block" {{ sticky_cart.shopify_attributes }}></span>
<div class="product-sticky-cart" id="sticky-cart-{{ section.id }}">
@@ -1280,15 +968,14 @@
{%- assign block_image = featured_media | default: first_image -%}
{%- if block_image != null -%}
<div>
- <img
- srcset="{{ block_image.preview_image | image_url: width: 70 }} 1x, {{ block_image.preview_image | image_url: width: 140 }} 2x"
+ <img srcset="{{ block_image.preview_image | image_url: width: 70 }} 1x, {{ block_image.preview_image | image_url: width: 140 }} 2x"
src="{{ block_image.preview_image | image_url: width: 70 }}"
alt="{{ block_image.preview_image.alt | escape | split: '#' | first }}"
loading="lazy"
width="70"
height="{{ 70 | divided_by: block_image.preview_image.aspect_ratio | ceil }}"
is="lazy-image"
- >
+ />
</div>
{%- endif -%}
</div>
@@ -1299,71 +986,44 @@
</div>
</div>
</div>
- <product-form
- class="sticky-cart__form"
- >
+ <product-form class="sticky-cart__form">
{%- assign sticky_cart_form_id = product_form_id | append: '--alt' -%}
- {%- form 'product',
- product,
- id: sticky_cart_form_id,
- novalidate: 'novalidate',
- data-type: 'add-to-cart-form'
- -%}
- <input
- type="hidden"
- name="id"
- value="{{ product.selected_or_first_available_variant.id }}"
- disabled="disabled"
- >
+ {%- form 'product', product, id: sticky_cart_form_id, novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
+ <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" disabled="disabled">
<div class="product-form__buttons">
{%- if sticky_cart.settings.show_quantity_selector -%}
<div class="product-form__quantity small-hide">
- <label for="Quantity-{{ sticky_cart.id }}" class="visually-hidden">
- {{- 'products.product.quantity.label' | t -}}
- </label>
+ <label for="Quantity-{{ sticky_cart.id }}" class="visually-hidden">{{ 'products.product.quantity.label' | t }}</label>
<quantity-input class="quantity">
- <input
- class="quantity__input"
+ <input class="quantity__input"
type="number"
name="quantity"
id="Quantity-{{ sticky_cart.id }}"
min="1"
value="1"
form="{{ sticky_cart_form_id }}"
- >
+ />
</quantity-input>
</div>
{%- endif -%}
{%- unless product.has_only_default_variant -%}
- <variant-selects
- class="no-js-hidden small-hide"
- data-section="{{ section.id }}"
- data-url="{{ product.url }}"
- data-no-scroll
- >
+ <variant-selects class="no-js-hidden small-hide" data-section="{{ section.id }}" data-url="{{ product.url }}" data-no-scroll>
{%- for option in product.options_with_values -%}
{%- assign option_idx = forloop.index -%}
- <div
- class="product-form__input variant-input-wrapper"
+ <div class="product-form__input variant-input-wrapper"
data-option-index="option{{ option_idx }}"
data-option-slug="{{ option.name | handleize }}"
>
<select-wrapper class="select button--small">
- <select
- class="select__select"
+ <select class="select__select"
name="{{ option.name | escape }}"
form="{{ sticky_cart_form_id }}"
data-variant="{{ variant.id }}-{{ option.option }}"
>
{%- for value in option.values -%}
- <option
- value="{{ value | escape }}"
- {% if option.selected_value == value %}
- selected="selected"
- {% endif %}
- >
+ <option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}>
{{ value }}
</option>
{%- endfor -%}
@@ -1372,7 +1032,7 @@
</select-wrapper>
</div>
{%- endfor -%}
-
+
<script type="application/json">
{{ product.variants | json }}
</script>
@@ -1383,12 +1043,8 @@
type="submit"
name="add"
class="product-form__submit button button--small"
- {%- if product.selected_or_first_available_variant.available == false %}
- disabled="disabled"
- {% endif -%}
- {%- if product.template_suffix == 'pre-order' %}
- data-pre-order="true"
- {% endif -%}
+ {%- if product.selected_or_first_available_variant.available == false %} disabled="disabled"{% endif -%}
+ {%- if product.template_suffix == 'pre-order' %} data-pre-order="true"{% endif -%}
>
{%- liquid
if product.selected_or_first_available_variant.available
@@ -1404,9 +1060,6 @@
</button>
</div>
{%- endform -%}
- <script type="application/json" id="media">
- {{ product.media | json }}
- </script>
</product-form>
</div>
</div>
@@ -1420,27 +1073,23 @@
{%- endif -%}
<script>
- document.addEventListener('DOMContentLoaded', function () {
+ document.addEventListener('DOMContentLoaded', function() {
function isIE() {
const ua = window.navigator.userAgent;
const msie = ua.indexOf('MSIE ');
const trident = ua.indexOf('Trident/');
- return msie > 0 || trident > 0;
+ return (msie > 0 || trident > 0);
}
if (!isIE()) return;
const hiddenInput = document.querySelector('#{{ product_form_id }} input[name="id"]');
const noScriptInputWrapper = document.createElement('div');
- const variantSwitcher =
- document.querySelector('variant-radios[data-section="{{ section.id }}"]') ||
- document.querySelector('variant-selects[data-section="{{ section.id }}"]');
- noScriptInputWrapper.innerHTML = document.querySelector(
- '.product-form__noscript-wrapper-{{ section.id }}'
- ).textContent;
+ const variantSwitcher = document.querySelector('variant-radios[data-section="{{ section.id }}"]') || document.querySelector('variant-selects[data-section="{{ section.id }}"]');
+ noScriptInputWrapper.innerHTML = document.querySelector('.product-form__noscript-wrapper-{{ section.id }}').textContent;
variantSwitcher.outerHTML = noScriptInputWrapper.outerHTML;
- document.querySelector('#Variants-{{ section.id }}').addEventListener('change', function (event) {
+ document.querySelector('#Variants-{{ section.id }}').addEventListener('change', function(event) {
hiddenInput.value = event.currentTarget.value;
});
});
@@ -1719,7 +1368,7 @@
{
"value": "truck",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__43.label"
- },
+ },
{
"value": "washing",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__44.label"
@@ -2387,7 +2036,7 @@
{
"value": "truck",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__43.label"
- },
+ },
{
"value": "washing",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__44.label"
@@ -2590,7 +2239,7 @@
{
"value": "truck",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__43.label"
- },
+ },
{
"value": "washing",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__44.label"
@@ -3117,7 +2766,7 @@
{
"value": "truck",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__43.label"
- },
+ },
{
"value": "washing",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__44.label"
diff --git a/legacy/snippets/custom-product-image.liquid b/legacy/snippets/custom-product-image.liquid
deleted file mode 100644
index e0f1ce2..0000000
--- a/legacy/snippets/custom-product-image.liquid
+++ /dev/null
@@ -1,82 +0,0 @@
-{% comment %}
- Extension of 'product-image.liquid' to be used in conjunction with {{ settings.custom_variant_image }} feature
- theme-check-disable ImgLazyLoading
-{% endcomment %}
-
-{%- capture sizes -%}(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | times: media_width | round }}px, (min-width: 990px) calc({{ media_width | times: 100 }}vw - 10rem), (min-width: 750px) calc((100vw - 10rem) / 2), calc(100vw - 3rem){%- endcapture -%}
-{%- liquid
- assign image_loading = 'eager'
- if lazy_load
- assign image_loading = 'lazy'
- endif
-
- assign alt = 'default-custom-variant-product-image'
- assign widths = '165, 360, 535, 750, 1100, 1500'
- assign media_id = 'default-custom-variant-product-image'
--%}
-<li
- id="Slide-{{ section.id }}-{{ media_id }}"
- class="product__media-item grid__item slider__slide{% if single_media_visible %} product__media-item--single{% endif %}{% if featured_media == null and forloop.first %} is-active{% endif %}{% if media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains media.src %} product__media-item--variant{% endif %}{% if gang_media_active == true %} gang__active{% endif %}"
- data-media-id="{{ section.id }}-{{ media_id }}"
- data-media-position="{{ position }}"
- {% if gang_exist == true %}
- data-gang-option="{{ gang_option_name }}" data-gang-connect="{{ gang_connect }}"
- {% endif %}
->
- <noscript>
- <div class="media-wrapper">
- <div
- class="product__media media media--{{ image_ratio }}{% if mobile_image_ratio %} media-mobile--{{ mobile_image_ratio }}{% endif %}"
- {%- if image_ratio == 'adapt' or mobile_image_ratio == 'adapt' %}
- style="--image-ratio-percent: {{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100 }}%;"
- {% endif -%}
- >
- {{
- settings.custom_variant_image_default
- | image_url: width: 1500
- | image_tag: loading: image_loading, sizes: sizes, widths: widths, alt: alt, is: 'lazy-image'
- }}
- </div>
- </div>
- </noscript>
-
- <modal-opener
- class="product__modal-opener product__modal-opener--image no-js-hidden"
- data-modal="#ProductModal-{{ modal_id }}"
- >
- {%- if zoom -%}
- <span class="product__media-icon motion-reduce" aria-hidden="true">
- {% render 'icon', icon: 'zoom' %}
- </span>
- {%- endif -%}
-
- <use-animate
- data-animate="{% if position == 'featured' %}zoom-fade-small{% else %}fade-up{% endif %}"
- class="media-wrapper"
- >
- <div
- class="product__media image-animate media media--{{ image_ratio }}{% if mobile_image_ratio %} media-mobile--{{ mobile_image_ratio }}{% endif %}"
- {%- if image_ratio == 'adapt' or mobile_image_ratio == 'adapt' %}
- style="--image-ratio-percent: {{ 1 | divided_by: settings.custom_variant_image_default.aspect_ratio | times: 100 }}%;"
- {% endif -%}
- >
- {{
- settings.custom_variant_image_default
- | image_url: width: 1500
- | image_tag: loading: image_loading, sizes: sizes, widths: widths, alt: alt, is: 'lazy-image'
- }}
- </div>
- </use-animate>
- {%- if zoom -%}
- <button class="product__media-toggle" type="button" aria-haspopup="dialog" data-media-id="{{ media_id }}">
- <span class="visually-hidden">
- {%- if position == 'featured' %}
- {{ 'products.product.media.open_media' | t }}
- {%- else -%}
- {{ 'products.product.media.open_media' | t: index: position }}
- {%- endif -%}
- </span>
- </button>
- {%- endif -%}
- </modal-opener>
-</li>
diff --git a/legacy/templates/collection.json b/legacy/templates/collection.json
index 3c16c19..7b69ef3 100644
--- a/legacy/templates/collection.json
+++ b/legacy/templates/collection.json
@@ -44,7 +44,7 @@
"enable_sorting": true,
"enable_viewing": false,
"enable_filtering": true,
- "filter_type": "horizontal",
+ "filter_type": "vertical",
"enable_filtering_color_swatches": false,
"filtering_color_swatches_add_label": false,
"filtering_max_items": 6,
diff --git a/legacy/templates/product.json b/legacy/templates/product.json
index 3d9fe41..5fa51d4 100644
--- a/legacy/templates/product.json
+++ b/legacy/templates/product.json
@@ -319,7 +319,7 @@
"settings": {
"product_list_limit": 4,
"show_divider": false,
- "heading": "Sold Together",
+ "heading": "You May Also Like",
"heading_size": "h1",
"heading_alignment": "center",
"heading_tag": "h2",
diff --git a/legacy/templates/search.json b/legacy/templates/search.json
index 79dbb96..a35025b 100644
--- a/legacy/templates/search.json
+++ b/legacy/templates/search.json
@@ -11,7 +11,7 @@
"enable_sorting": true,
"enable_viewing": false,
"enable_filtering": true,
- "filter_type": "horizontal",
+ "filter_type": "vertical",
"enable_filtering_color_swatches": false,
"filtering_color_swatches_add_label": false,
"filtering_max_items": 6,
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment