This is after following step by step
main-product.liquid
|
{% comment %}theme-check-disable TemplateLength{% endcomment %}
{{ ‘section-main-product.css’ | asset_url | stylesheet_tag }}
{{ ‘component-accordion.css’ | asset_url | stylesheet_tag }}
{{ ‘component-price.css’ | asset_url | stylesheet_tag }}
{{ ‘component-rte.css’ | asset_url | stylesheet_tag }}
{{ ‘component-slider.css’ | asset_url | stylesheet_tag }}
{{ ‘component-rating.css’ | asset_url | stylesheet_tag }}
{%- assign first_3d_model = product.media | where: “media_type”, “model” | first -%}
{%- if first_3d_model -%}
{{ ‘component-product-model.css’ | asset_url | stylesheet_tag }}
{%- endif -%}
{{ “accessibility.skip_to_product_info” | t }}
{%- assign variant_images = product.images | where: ‘attached_to_variant?’, true | map: ‘src’ -%}
{%- if product.selected_or_first_available_variant.featured_media != null -%}
{%- assign media = product.selected_or_first_available_variant.featured_media -%}
{%- for media in product.media -%}
<li class=“large-image-item product__media-item grid__item slider__slide
{% if media.media_type != ‘image’ %}
product__media-item–full{% endif %}”
data-media-id=“{{ section.id }}-{{ media.id }}”>
{% render ‘product-thumbnail’, media: media, position: forloop.index, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true %}
{%- endfor -%}
{%- endif -%}
<img class=“slide-image”
onclick=“newLargeImage(this)”
data-thumb-id=“{{ section.id }}-{{ media.id }}”
src=“{{ media.preview_image | img_url: ‘large’, scale: 4 }}”
alt=“{{ thumbnailAlt }}”>
{%- for media in product.media -%}
{% endfor %}
{% render ‘icon-caret’ %}
1
/
{{ ‘accessibility.of’ | t }}
{% if section.settings.hide_variants %}{{ product.media.size | minus: variant_images.size | plus: 1 }}{% else %}{{ product.media.size }}{% endif %}
{% render ‘icon-caret’ %}
{%- if first_3d_model -%}
<button
class=“button button–full-width product__xr-button”
type=“button”
aria-label=“{{ ‘products.product.xr_button_label’ | t }}”
data-shopify-xr
data-shopify-model3d-id=“{{ first_3d_model.id }}”
data-shopify-title=“{{ product.title | escape }}”
data-shopify-xr-hidden
>
{% render ‘icon-3d-model’ %}
{{ ‘products.product.xr_button’ | t }}
{%- endif -%}
{%- assign product_form_id = ‘product-form-’ | append: section.id -%}
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when ‘@app’ -%}
{% render block %}
{%- when ‘text’ -%}
<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 }}>
{{- block.settings.text -}}
{%- when ‘title’ -%}
<h1 class=“product__title” {{ block.shopify_attributes }}>
{{ product.title | escape }}
{%- when ‘price’ -%}
<div class=“no-js-hidden” id=“price-{{ section.id }}” {{ block.shopify_attributes }}>
{%- render ‘price’, product: product, use_variant: true, show_badges: true, price_class: ‘price–large’ -%}
<div {{ block.shopify_attributes }}>
{%- form ‘product’, product, id: ‘product-form-installment’, class: ‘installment caption-large’ -%}
{{ form | payment_terms }}
{%- endform -%}
{%- when ‘description’ -%}
{%- if product.description != blank -%}
{{ product.description }}
{%- endif -%}
{%- when ‘custom_liquid’ -%}
{{ block.settings.custom_liquid }}
{%- when ‘collapsible_tab’ -%}
<div class=“product__accordion accordion” {{ block.shopify_attributes }}>
{% render ‘icon-accordion’, icon: block.settings.icon %}
{{ block.settings.heading | default: block.settings.page.title }}
{% render ‘icon-caret’ %}
{% render ‘icon-accordion’, icon: block.settings.icon %}
{{ block.settings.heading | default: block.settings.page.title }}
{{ block.settings.content }}
{{ block.settings.page.content }}
{%- when ‘quantity_selector’ -%}
<div class=“product-form__input product-form__quantity” {{ block.shopify_attributes }}>
{{ ‘products.product.quantity.label’ | t }}
{{ ‘products.product.quantity.decrease’ | t: product: product.title | escape }}
{% render ‘icon-minus’ %}
<input class=“quantity__input”
type=“number”
name=“quantity”
id=“Quantity-{{ section.id }}”
min=“1”
value=“1”
form=“product-form-{{ section.id }}”
>
{{ ‘products.product.quantity.increase’ | t: product: product.title | escape }}
{% render ‘icon-plus’ %}
{%- when ‘popup’ -%}
<modal-opener class=“product-popup-modal__opener no-js-hidden” data-modal=“#PopupModal-{{ block.id }}” {{ block.shopify_attributes }}>
{{ block.settings.text | default: block.settings.page.title }}
{{ block.settings.text }}
{%- when ‘share’ -%}
<share-button class=“share-button” {{ block.shopify_attributes }}>
{% render ‘icon-share’ %}
{{ block.settings.share_label | escape }}
{% render ‘icon-share’ %}
{{ block.settings.share_label | escape }}
<input type=“text”
class=“field__input”
id=“url”
value=“{{ shop.url | append: product.url }}”
placeholder=“{{ ‘general.share.share_url’ | t }}”
onclick=“this.select();”
readonly
>
{{ ‘general.share.share_url’ | t }}
{% render ‘icon-close’ %}
{{ ‘general.share.close’ | t }}
{% render ‘icon-clipboard’ %}
{{ ‘general.share.copy_to_clipboard’ | t }}
{%- when ‘variant_picker’ -%}
{%- unless product.has_only_default_variant -%}
{%- if block.settings.picker_type == ‘button’ -%}
<variant-radios class=“no-js-hidden” data-section=“{{ section.id }}” data-url=“{{ product.url }}” {{ block.shopify_attributes }}>
{%- for option in product.options_with_values -%}
{{ option.name }}
{%- for value in option.values -%}
<input type=“radio” id=“{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}”
name=“{{ option.name }}”
value=“{{ value | escape }}”
form=“product-form-{{ section.id }}”
{% if option.selected_value == value %}checked{% endif %}
>
{{ value }}
{%- endfor -%}
{%- endfor -%}
{%- else -%}
<variant-selects class=“no-js-hidden” data-section=“{{ section.id }}” data-url=“{{ product.url }}” {{ block.shopify_attributes }}>
{%- for option in product.options_with_values -%}
{{ option.name }}
<select id=“Option-{{ section.id }}-{{ forloop.index0 }}”
class=“select__select”
name=“options[{{ option.name | escape }}]”
form=“product-form-{{ section.id }}”
>
{%- for value in option.values -%}
<option value=“{{ value | escape }}” {% if option.selected_value == value %}selected=“selected”{% endif %}>
{{ value }}
{%- endfor -%}
{% render ‘icon-caret’ %}
{%- endfor -%}
{%- endif -%}
{%- endunless -%}
{{ ‘products.product.product_variants’ | t }}
{% render ‘icon-caret’ %}
{%- when ‘buy_buttons’ -%}
<div {{ block.shopify_attributes }}>
{%- form ‘product’, product, id: product_form_id, class: ‘form’, novalidate: ‘novalidate’, data-type: ‘add-to-cart-form’ -%}
<button
type=“submit”
name=“add”
class=“product-form__submit button button–full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button–secondary{% else %}button–primary{% endif %}”
{% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
>
{%- if product.selected_or_first_available_variant.available -%}
{{ ‘products.product.add_to_cart’ | t }}
{%- else -%}
{{ ‘products.product.sold_out’ | t }}
{%- endif -%}
{%- if block.settings.show_dynamic_checkout -%}
{{ form | payment_button }}
{%- endif -%}
{%- endform -%}
{{ ‘component-pickup-availability.css’ | asset_url | stylesheet_tag }}
{%- assign pick_up_availabilities = product.selected_or_first_available_variant.store_availabilities | where: ‘pick_up_enabled’, true -%}
<pickup-availability class=“product__pickup-availabilities no-js-hidden”
{% if product.selected_or_first_available_variant.available and pick_up_availabilities.size > 0 %} available{% endif %}
data-base-url=“{{ shop.url }}{{ routes.root_url }}”
data-variant-id=“{{ product.selected_or_first_available_variant.id }}”
data-has-only-default-variant=“{{ product.has_only_default_variant }}”
>
{% render ‘icon-unavailable’ %}
{{ ‘products.product.pickup_availability.unavailable’ | t }}
{{ ‘products.product.pickup_availability.refresh’ | t }}
{%- 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
%}
{{ product.metafields.reviews.rating.value }} / {{ product.metafields.reviews.rating.value.scale_max }}
({{ product.metafields.reviews.rating_count }})
{{ product.metafields.reviews.rating_count }} {{ “accessibility.total_reviews” | t }}
{%- endif -%}
{%- endcase -%}
{%- endfor -%}
{% render ‘icon-close’ %}
{%- liquid
if product.selected_or_first_available_variant.featured_media != null
assign media = product.selected_or_first_available_variant.featured_media
render ‘product-media’, media: media, loop: section.settings.enable_video_looping, variant_image: section.settings.hide_variants
endif
-%}
{%- for media in product.media -%}
{%- liquid
if section.settings.hide_variants and variant_images contains media.src
assign variant_image = true
else
assign variant_image = false
endif
unless media.id == product.selected_or_first_available_variant.featured_media.id
render ‘product-media’, media: media, loop: section.settings.enable_video_looping, variant_image: variant_image
endunless
-%}
{%- endfor -%}
{% assign popups = section.blocks | where: “type”, “popup” %}
{%- for block in popups -%}
<modal-dialog id=“PopupModal-{{ block.id }}” class=“product-popup-modal” {{ block.shopify_attributes }}>
{% render ‘icon-close’ %}
{{ block.settings.page.title }}
{{ block.settings.page.content }}
{%- endfor -%}
{% javascript %}
class ProductModal extends ModalDialog {
constructor() {
super();
}
hide() {
super.hide();
window.pauseAllMedia();
}
show(opener) {
super.show(opener);
this.showActiveMedia();
}
showActiveMedia() {
this.querySelectorAll(
[data-media-id]:not([data-media-id="${this.openedBy.getAttribute("data-media-id")}"])).forEach((element) => {element.classList.remove(‘active’);
}
)
const activeMedia = this.querySelector(
[data-media-id="${this.openedBy.getAttribute("data-media-id")}"]);const activeMediaTemplate = activeMedia.querySelector(‘template’);
const activeMediaContent = activeMediaTemplate ? activeMediaTemplate.content : null;
activeMedia.classList.add(‘active’);
activeMedia.scrollIntoView();
const container = this.querySelector(‘[role=“document”]’);
container.scrollLeft = (activeMedia.width - container.clientWidth) / 2;
if (activeMedia.nodeName == ‘DEFERRED-MEDIA’ && activeMediaContent && activeMediaContent.querySelector(‘.js-youtube’))
activeMedia.loadContent();
}
}
customElements.define(‘product-modal’, ProductModal);
{% endjavascript %}
{%- if first_3d_model -%}
{%- endif -%}
{% schema %}
{
“name”: “t:sections.main-product.name”,
“tag”: “section”,
“class”: “product-section spaced-section”,
“blocks”: [
{
“type”: “@app”
},
{
“type”: “text”,
“name”: “t:sections.main-product.blocks.text.name”,
“settings”: [
{
“type”: “text”,
“id”: “text”,
“default”: “Text block”,
“label”: “t:sections.main-product.blocks.text.settings.text.label”
},
{
“type”: “select”,
“id”: “text_style”,
“options”: [
{
“value”: “body”,
“label”: “t:sections.main-product.blocks.text.settings.text_style.options__1.label”
},
{
“value”: “subtitle”,
“label”: “t:sections.main-product.blocks.text.settings.text_style.options__2.label”
},
{
“value”: “uppercase”,
“label”: “t:sections.main-product.blocks.text.settings.text_style.options__3.label”
}
],
“default”: “body”,
“label”: “t:sections.main-product.blocks.text.settings.text_style.label”
}
]
},
{
“type”: “title”,
“name”: “t:sections.main-product.blocks.title.name”,
“limit”: 1
},
{
“type”: “price”,
“name”: “t:sections.main-product.blocks.price.name”,
“limit”: 1
},
{
“type”: “quantity_selector”,
“name”: “t:sections.main-product.blocks.quantity_selector.name”,
“limit”: 1
},
{
“type”: “variant_picker”,
“name”: “t:sections.main-product.blocks.variant_picker.name”,
“limit”: 1,
“settings”: [
{
“type”: “select”,
“id”: “picker_type”,
“options”: [
{
“value”: “dropdown”,
“label”: “t:sections.main-product.blocks.variant_picker.settings.picker_type.options__1.label”
},
{
“value”: “button”,
“label”: “t:sections.main-product.blocks.variant_picker.settings.picker_type.options__2.label”
}
],
“default”: “button”,
“label”: “t:sections.main-product.blocks.variant_picker.settings.picker_type.label”
}
]
},
{
“type”: “buy_buttons”,
“name”: “t:sections.main-product.blocks.buy_buttons.name”,
“limit”: 1,
“settings”: [
{
“type”: “checkbox”,
“id”: “show_dynamic_checkout”,
“default”: true,
“label”: “t:sections.main-product.blocks.buy_buttons.settings.show_dynamic_checkout.label”,
“info”: “t:sections.main-product.blocks.buy_buttons.settings.show_dynamic_checkout.info”
}
]
},
{
“type”: “description”,
“name”: “t:sections.main-product.blocks.description.name”,
“limit”: 1
},
{
“type”: “share”,
“name”: “t:sections.main-product.blocks.share.name”,
“limit”: 1,
“settings”: [
{
“type”: “text”,
“id”: “share_label”,
“label”: “t:sections.main-product.blocks.share.settings.text.label”,
“default”: “Share”
},
{
“type”: “paragraph”,
“content”: “t:sections.main-product.blocks.share.settings.featured_image_info.content”
},
{
“type”: “paragraph”,
“content”: “t:sections.main-product.blocks.share.settings.title_info.content”
}
]
},
{
“type”: “custom_liquid”,
“name”: “t:sections.main-product.blocks.custom_liquid.name”,
“settings”: [
{
“type”: “liquid”,
“id”: “custom_liquid”,
“label”: “t:sections.main-product.blocks.custom_liquid.settings.custom_liquid.label”,
“info”: “t:sections.main-product.blocks.custom_liquid.settings.custom_liquid.info”
}
]
},
{
“type”: “collapsible_tab”,
“name”: “t:sections.main-product.blocks.collapsible_tab.name”,
“settings”: [
{
“type”: “text”,
“id”: “heading”,
“default”: “Collapsible tab”,
“info”: “t:sections.main-product.blocks.collapsible_tab.settings.heading.info”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.heading.label”
},
{
“type”: “richtext”,
“id”: “content”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.content.label”
},
{
“type”: “page”,
“id”: “page”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.page.label”
},
{
“type”: “select”,
“id”: “icon”,
“options”: [
{
“value”: “none”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.icon.options__1.label”
},
{
“value”: “box”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.icon.options__2.label”
},
{
“value”: “chat_bubble”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.icon.options__3.label”
},
{
“value”: “check_mark”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.icon.options__4.label”
},
{
“value”: “dryer”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.icon.options__5.label”
},
{
“value”: “eye”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.icon.options__6.label”
},
{
“value”: “heart”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.icon.options__7.label”
},
{
“value”: “iron”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.icon.options__8.label”
},
{
“value”: “leaf”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.icon.options__9.label”
},
{
“value”: “leather”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.icon.options__10.label”
},
{
“value”: “lock”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.icon.options__11.label”
},
{
“value”: “map_pin”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.icon.options__12.label”
},
{
“value”: “pants”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.icon.options__13.label”
},
{
“value”: “plane”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.icon.options__14.label”
},
{
“value”: “price_tag”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.icon.options__15.label”
},
{
“value”: “question_mark”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.icon.options__16.label”
},
{
“value”: “return”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.icon.options__17.label”
},
{
“value”: “ruler”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.icon.options__18.label”
},
{
“value”: “shirt”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.icon.options__19.label”
},
{
“value”: “shoe”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.icon.options__20.label”
},
{
“value”: “silhouette”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.icon.options__21.label”
},
{
“value”: “star”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.icon.options__22.label”
},
{
“value”: “truck”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.icon.options__23.label”
},
{
“value”: “washing”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.icon.options__24.label”
}
],
“default”: “check_mark”,
“label”: “t:sections.main-product.blocks.collapsible_tab.settings.icon.label”
}
]
},
{
“type”: “popup”,
“name”: “t:sections.main-product.blocks.popup.name”,
“settings”: [
{
“type”: “text”,
“id”: “text”,
“default”: “Pop-up link text”,
“label”: “t:sections.main-product.blocks.popup.settings.link_label.label”
},
{
“id”: “page”,
“type”: “page”,
“label”: “t:sections.main-product.blocks.popup.settings.page.label”
}
]
},
{
“type”: “rating”,
“name”: “t:sections.main-product.blocks.rating.name”,
“limit”: 1,
“settings”: [
{
“type”: “paragraph”,
“content”: “t:sections.main-product.blocks.rating.settings.paragraph.content”
}
]
}
],
“settings”: [
{
“type”: “checkbox”,
“id”: “enable_sticky_info”,
“default”: true,
“label”: “t:sections.main-product.settings.enable_sticky_info.label”
},
{
“type”: “header”,
“content”: “t:sections.main-product.settings.header.content”,
“info”: “t:sections.main-product.settings.header.info”
},
{
“type”: “checkbox”,
“id”: “hide_variants”,
“default”: false,
“label”: “t:sections.main-product.settings.hide_variants.label”
},
{
“type”: “checkbox”,
“id”: “enable_video_looping”,
“default”: false,
“label”: “t:sections.main-product.settings.enable_video_looping.label”
}
]
}
{% endschema %}
|
| - |
component-slider.css
.slider-container { margin: 0 1rem; width: 100%; overflow: auto; display: flex; flex-flow: column wrap; align-items: center; position: relative; } .large-image { width: 100%; padding-bottom: 100%; position: relative; } .large-image-item { position: absolute; max-width: 100%; min-width: 50%; max-height: 100%; padding: 0; } .large-image-item:not(:first-child){ display: none; } ul { padding-inline-start: 0px !important; } slider-component { position: relative; display: block; width:100%; } .slider__slide { scroll-snap-align: start; flex-shrink: 0; } .product-slider-box { flex-wrap: inherit; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; margin-bottom: 1rem; width: 100%; display: flex; } .product-slider { height: 100%; width: 23%; display: inline-block; } .product-slider:not(:first-child){ margin-left: 1rem; } .slide-image { width: 100%; height: 100%; object-fit: cover; } / @media screen and (max-width: 989px) { .no-js slider-component .slider { padding-bottom: 3rem; } } @media screen and (max-width: 749px) { .slider.slider–mobile { position: relative; flex-wrap: inherit; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding-left: 1rem; -webkit-overflow-scrolling: touch; margin-bottom: 1rem; } .slider.slider–mobile .slider__slide { margin-bottom: 0; padding-bottom: 0; } } @media screen and (max-width: 989px) { .slider.slider–tablet { position: relative; flex-wrap: inherit; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding-left: 1rem; -webkit-overflow-scrolling: touch; margin-bottom: 1rem; } .slider.slider–tablet .slider__slide { margin-bottom: 0; padding-bottom: 0; } } / /* Scrollbar / .slider { / included in ul / scrollbar-color: rgb(var(–color-foreground)) rgba(var(–color-foreground), 0.04); -ms-overflow-style: none; scrollbar-width: none; } .slider::-webkit-scrollbar { / included in ul / height: 0.4rem; width: 0.4rem; display: none; } .no-js .slider { -ms-overflow-style: auto; scrollbar-width: auto; } .no-js .slider::-webkit-scrollbar { display: initial; } .slider::-webkit-scrollbar-thumb { background-color: rgb(var(–color-foreground)); border-radius: 0.4rem; border: 0; } .slider::-webkit-scrollbar-track { background: rgba(var(–color-foreground), 0.04); border-radius: 0.4rem; } .slider-counter { margin: 0 1.2rem; } .slider-buttons { display: flex; align-items: center; justify-content: center; } / @media screen and (min-width: 990px) { .slider-buttons { display: none; } } @media screen and (min-width: 750px) { .slider–mobile + .slider-buttons { display: none; } } */ .slider-button { color: rgba(var(–color-foreground), 0.75); background: transparent; border: none; cursor: pointer; width: 44px; height: 44px; } .slider-button:not([disabled]):hover { color: rgb(var(–color-foreground)); } .slider-button .icon { height: 0.6rem; } .slider-button[disabled] .icon { color: rgba(var(–color-foreground), 0.3); } .slider-button–next .icon { margin-right: -0.2rem; transform: rotate(-90deg) translateX(0.15rem); } .slider-button–prev .icon { margin-left: -0.2rem; transform: rotate(90deg) translateX(-0.15rem); } .slider-button–next:not([disabled]):hover .icon { transform: rotate(-90deg) translateX(0.15rem) scale(1.07); } .slider-button–prev:not([disabled]):hover .icon { transform: rotate(90deg) translateX(-0.15rem) scale(1.07); } |
|---|
global.js
|
function getFocusableElements(container) {
return Array.from(
container.querySelectorAll(
“summary, a[href], button:enabled, [tabindex]:not([tabindex^=‘-’]), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe”
)
);
}
const trapFocusHandlers = {};
function trapFocus(container, elementToFocus = container) {
var elements = getFocusableElements(container);
var first = elements[0];
var last = elements[elements.length - 1];
removeTrapFocus();
trapFocusHandlers.focusin = (event) => {
if (
event.target !== container &&
event.target !== last &&
event.target !== first
)
return;
document.addEventListener(‘keydown’, trapFocusHandlers.keydown);
};
trapFocusHandlers.focusout = function() {
document.removeEventListener(‘keydown’, trapFocusHandlers.keydown);
};
trapFocusHandlers.keydown = function(event) {
if (event.code.toUpperCase() !== ‘TAB’) return; // If not TAB key
// On the last focusable element and tab forward, focus the first element.
if (event.target === last && !event.shiftKey) {
event.preventDefault();
first.focus();
}
// On the first focusable element and tab backward, focus the last element.
if (
(event.target === container || event.target === first) &&
event.shiftKey
) {
event.preventDefault();
last.focus();
}
};
document.addEventListener(‘focusout’, trapFocusHandlers.focusout);
document.addEventListener(‘focusin’, trapFocusHandlers.focusin);
elementToFocus.focus();
}
// Here run the querySelector to figure out if the browser supports :focus-visible or not and run code based on it.
try {
document.querySelector(“:focus-visible”);
} catch {
focusVisiblePolyfill();
}
function focusVisiblePolyfill() {
const navKeys = [‘ARROWUP’, ‘ARROWDOWN’, ‘ARROWLEFT’, ‘ARROWRIGHT’, ‘TAB’, ‘ENTER’, ‘SPACE’, ‘ESCAPE’, ‘HOME’, ‘END’, ‘PAGEUP’, ‘PAGEDOWN’]
let currentFocusedElement = null;
let mouseClick = null;
window.addEventListener(‘keydown’, (event) => {
if(navKeys.includes(event.code.toUpperCase())) {
mouseClick = false;
}
});
window.addEventListener(‘mousedown’, (event) => {
mouseClick = true;
});
window.addEventListener(‘focus’, () => {
if (currentFocusedElement) currentFocusedElement.classList.remove(‘focused’);
if (mouseClick) return;
currentFocusedElement = document.activeElement;
currentFocusedElement.classList.add(‘focused’);
}, true);
}
function pauseAllMedia() {
document.querySelectorAll(‘.js-youtube’).forEach((video) => {
video.contentWindow.postMessage(‘{“event”:“command”,“func”:"’ + ‘pauseVideo’ + ‘“,“args”:”"}’, ‘‘);
});
document.querySelectorAll(’.js-vimeo’).forEach((video) => {
video.contentWindow.postMessage(‘{“method”:“pause”}’, '’);
});
document.querySelectorAll(‘video’).forEach((video) => video.pause());
document.querySelectorAll(‘product-model’).forEach((model) => {
if (model.modelViewerUI) modelViewerUI.pause();
});
}
function removeTrapFocus(elementToFocus = null) {
document.removeEventListener(‘focusin’, trapFocusHandlers.focusin);
document.removeEventListener(‘focusout’, trapFocusHandlers.focusout);
document.removeEventListener(‘keydown’, trapFocusHandlers.keydown);
if (elementToFocus) elementToFocus.focus();
}
function onKeyUpEscape(event) {
if (event.code.toUpperCase() !== ‘ESCAPE’) return;
const openDetailsElement = event.target.closest(‘details[open]’);
if (!openDetailsElement) return;
const summaryElement = openDetailsElement.querySelector(‘summary’);
openDetailsElement.removeAttribute(‘open’);
summaryElement.focus();
}
class QuantityInput extends HTMLElement {
constructor() {
super();
this.input = this.querySelector(‘input’);
this.changeEvent = new Event(‘change’, { bubbles: true })
this.querySelectorAll(‘button’).forEach(
(button) => button.addEventListener(‘click’, this.onButtonClick.bind(this))
);
}
onButtonClick(event) {
event.preventDefault();
const previousValue = this.input.value;
event.target.name === ‘plus’ ? this.input.stepUp() : this.input.stepDown();
if (previousValue !== this.input.value) this.input.dispatchEvent(this.changeEvent);
}
}
customElements.define(‘quantity-input’, QuantityInput);
function debounce(fn, wait) {
let t;
return (…args) => {
clearTimeout(t);
t = setTimeout(() => fn.apply(this, args), wait);
};
}
const serializeForm = form => {
const obj = {};
const formData = new FormData(form);
for (const key of formData.keys()) {
const regex = /(?:^(properties[))(.?)(?:]$)/;
if (regex.test(key)) {
obj.properties = obj.properties || {};
obj.properties[regex.exec(key)[2]] = formData.get(key);
} else {
obj[key] = formData.get(key);
}
}
return JSON.stringify(obj);
};
function fetchConfig(type = ‘json’) {
return {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’, ‘Accept’: application/${type} }
};
}
/
* Shopify Common JS
/
if ((typeof window.Shopify) == ‘undefined’) {
window.Shopify = {};
}
Shopify.bind = function(fn, scope) {
return function() {
return fn.apply(scope, arguments);
}
};
Shopify.setSelectorByValue = function(selector, value) {
for (var i = 0, count = selector.options.length; i < count; i++) {
var option = selector.options[i];
if (value == option.value || value == option.innerHTML) {
selector.selectedIndex = i;
return i;
}
}
};
Shopify.addListener = function(target, eventName, callback) {
target.addEventListener ? target.addEventListener(eventName, callback, false) : target.attachEvent(‘on’+eventName, callback);
};
Shopify.postLink = function(path, options) {
options = options || {};
var method = options[‘method’] || ‘post’;
var params = options[‘parameters’] || {};
var form = document.createElement(“form”);
form.setAttribute(“method”, method);
form.setAttribute(“action”, path);
for(var key in params) {
var hiddenField = document.createElement(“input”);
hiddenField.setAttribute(“type”, “hidden”);
hiddenField.setAttribute(“name”, key);
hiddenField.setAttribute(“value”, params[key]);
form.appendChild(hiddenField);
}
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);
};
Shopify.CountryProvinceSelector = function(country_domid, province_domid, options) {
this.countryEl = document.getElementById(country_domid);
this.provinceEl = document.getElementById(province_domid);
this.provinceContainer = document.getElementById(options[‘hideElement’] || province_domid);
Shopify.addListener(this.countryEl, ‘change’, Shopify.bind(this.countryHandler,this));
this.initCountry();
this.initProvince();
};
Shopify.CountryProvinceSelector.prototype = {
initCountry: function() {
var value = this.countryEl.getAttribute(‘data-default’);
Shopify.setSelectorByValue(this.countryEl, value);
this.countryHandler();
},
initProvince: function() {
var value = this.provinceEl.getAttribute(‘data-default’);
if (value && this.provinceEl.options.length > 0) {
Shopify.setSelectorByValue(this.provinceEl, value);
}
},
countryHandler: function(e) {
var opt = this.countryEl.options[this.countryEl.selectedIndex];
var raw = opt.getAttribute(‘data-provinces’);
var provinces = JSON.parse(raw);
this.clearOptions(this.provinceEl);
if (provinces && provinces.length == 0) {
this.provinceContainer.style.display = ‘none’;
} else {
for (var i = 0; i < provinces.length; i++) {
var opt = document.createElement(‘option’);
opt.value = provinces[i][0];
opt.innerHTML = provinces[i][1];
this.provinceEl.appendChild(opt);
}
this.provinceContainer.style.display = “”;
}
},
clearOptions: function(selector) {
while (selector.firstChild) {
selector.removeChild(selector.firstChild);
}
},
setOptions: function(selector, values) {
for (var i = 0, count = values.length; i < values.length; i++) {
var opt = document.createElement(‘option’);
opt.value = values[i];
opt.innerHTML = values[i];
selector.appendChild(opt);
}
}
};
class MenuDrawer extends HTMLElement {
constructor() {
super();
this.mainDetailsToggle = this.querySelector(‘details’);
const summaryElements = this.querySelectorAll(‘summary’);
this.addAccessibilityAttributes(summaryElements);
if (navigator.platform === ‘iPhone’) document.documentElement.style.setProperty(‘–viewport-height’, ${window.innerHeight}px);
this.addEventListener(‘keyup’, this.onKeyUp.bind(this));
this.addEventListener(‘focusout’, this.onFocusOut.bind(this));
this.bindEvents();
}
bindEvents() {
this.querySelectorAll(‘summary’).forEach(summary => summary.addEventListener(‘click’, this.onSummaryClick.bind(this)));
this.querySelectorAll(‘button’).forEach(button => button.addEventListener(‘click’, this.onCloseButtonClick.bind(this)));
}
addAccessibilityAttributes(summaryElements) {
summaryElements.forEach(element => {
element.setAttribute(‘role’, ‘button’);
element.setAttribute(‘aria-expanded’, false);
element.setAttribute(‘aria-controls’, element.nextElementSibling.id);
});
}
onKeyUp(event) {
if(event.code.toUpperCase() !== ‘ESCAPE’) return;
const openDetailsElement = event.target.closest(‘details[open]’);
if(!openDetailsElement) return;
openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(this.mainDetailsToggle.querySelector(‘summary’)) : this.closeSubmenu(openDetailsElement);
}
onSummaryClick(event) {
const summaryElement = event.currentTarget;
const detailsElement = summaryElement.parentNode;
const isOpen = detailsElement.hasAttribute(‘open’);
if (detailsElement === this.mainDetailsToggle) {
if(isOpen) event.preventDefault();
isOpen ? this.closeMenuDrawer(summaryElement) : this.openMenuDrawer(summaryElement);
} else {
trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector(‘button’));
setTimeout(() => {
detailsElement.classList.add(‘menu-opening’);
});
}
}
openMenuDrawer(summaryElement) {
setTimeout(() => {
this.mainDetailsToggle.classList.add(‘menu-opening’);
});
summaryElement.setAttribute(‘aria-expanded’, true);
trapFocus(this.mainDetailsToggle, summaryElement);
document.body.classList.add(overflow-hidden-${this.dataset.breakpoint});
}
closeMenuDrawer(event, elementToFocus = false) {
if (event !== undefined) {
this.mainDetailsToggle.classList.remove(‘menu-opening’);
this.mainDetailsToggle.querySelectorAll(‘details’).forEach(details => {
details.removeAttribute(‘open’);
details.classList.remove(‘menu-opening’);
});
this.mainDetailsToggle.querySelector(‘summary’).setAttribute(‘aria-expanded’, false);
document.body.classList.remove(overflow-hidden-${this.dataset.breakpoint});
removeTrapFocus(elementToFocus);
this.closeAnimation(this.mainDetailsToggle);
}
}
onFocusOut(event) {
setTimeout(() => {
if (this.mainDetailsToggle.hasAttribute(‘open’) && !this.mainDetailsToggle.contains(document.activeElement)) this.closeMenuDrawer();
});
}
onCloseButtonClick(event) {
const detailsElement = event.currentTarget.closest(‘details’);
this.closeSubmenu(detailsElement);
}
closeSubmenu(detailsElement) {
detailsElement.classList.remove(‘menu-opening’);
removeTrapFocus();
this.closeAnimation(detailsElement);
}
closeAnimation(detailsElement) {
let animationStart;
const handleAnimation = (time) => {
if (animationStart === undefined) {
animationStart = time;
}
const elapsedTime = time - animationStart;
if (elapsedTime < 400) {
window.requestAnimationFrame(handleAnimation);
} else {
detailsElement.removeAttribute(‘open’);
if (detailsElement.closest(‘details[open]’)) {
trapFocus(detailsElement.closest(‘details[open]’), detailsElement.querySelector(‘summary’));
}
}
}
window.requestAnimationFrame(handleAnimation);
}
}
customElements.define(‘menu-drawer’, MenuDrawer);
class HeaderDrawer extends MenuDrawer {
constructor() {
super();
}
openMenuDrawer(summaryElement) {
this.header = this.header || document.getElementById(‘shopify-section-header’);
this.borderOffset = this.borderOffset || this.closest(‘.header-wrapper’).classList.contains(‘header-wrapper–border-bottom’) ? 1 : 0;
document.documentElement.style.setProperty(‘–header-bottom-position’, ${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px);
setTimeout(() => {
this.mainDetailsToggle.classList.add(‘menu-opening’);
});
summaryElement.setAttribute(‘aria-expanded’, true);
trapFocus(this.mainDetailsToggle, summaryElement);
document.body.classList.add(overflow-hidden-${this.dataset.breakpoint});
}
}
customElements.define(‘header-drawer’, HeaderDrawer);
class ModalDialog extends HTMLElement {
constructor() {
super();
this.querySelector(‘[id^=“ModalClose-”]’).addEventListener(
‘click’,
this.hide.bind(this)
);
this.addEventListener(‘keyup’, (event) => {
if (event.code.toUpperCase() === ‘ESCAPE’) this.hide();
});
if (this.classList.contains(‘media-modal’)) {
this.addEventListener(‘pointerup’, (event) => {
if (event.pointerType === ‘mouse’ && !event.target.closest(‘deferred-media, product-model’)) this.hide();
});
} else {
this.addEventListener(‘click’, (event) => {
if (event.target.nodeName === ‘MODAL-DIALOG’) this.hide();
});
}
}
show(opener) {
this.openedBy = opener;
const popup = this.querySelector(‘.template-popup’);
document.body.classList.add(‘overflow-hidden’);
this.setAttribute(‘open’, ‘’);
if (popup) popup.loadContent();
trapFocus(this, this.querySelector(‘[role=“dialog”]’));
}
hide() {
document.body.classList.remove(‘overflow-hidden’);
this.removeAttribute(‘open’);
removeTrapFocus(this.openedBy);
window.pauseAllMedia();
}
}
customElements.define(‘modal-dialog’, ModalDialog);
class ModalOpener extends HTMLElement {
constructor() {
super();
const button = this.querySelector(‘button’);
if (!button) return;
button.addEventListener(‘click’, () => {
const modal = document.querySelector(this.getAttribute(‘data-modal’));
if (modal) modal.show(button);
});
}
}
customElements.define(‘modal-opener’, ModalOpener);
class DeferredMedia extends HTMLElement {
constructor() {
super();
const poster = this.querySelector(‘[id^=“Deferred-Poster-”]’);
if (!poster) return;
poster.addEventListener(‘click’, this.loadContent.bind(this));
}
loadContent() {
window.pauseAllMedia();
if (!this.getAttribute(‘loaded’)) {
const content = document.createElement(‘div’);
content.appendChild(this.querySelector(‘template’).content.firstElementChild.cloneNode(true));
this.setAttribute(‘loaded’, true);
this.appendChild(content.querySelector(‘video, model-viewer, iframe’)).focus();
}
}
}
customElements.define(‘deferred-media’, DeferredMedia);
class SliderComponent extends HTMLElement {
constructor() {
super();
this.slider = this.querySelector(‘ul’);
this.sliderItems = this.querySelectorAll(‘li’);
this.pageCount = this.querySelector(‘.slider-counter–current’);
this.pageTotal = this.querySelector(‘.slider-counter–total’);
this.prevButton = this.querySelector(‘button[name=“previous”]’);
this.nextButton = this.querySelector(‘button[name=“next”]’);
if (!this.slider || !this.nextButton) return;
const resizeObserver = new ResizeObserver(entries => this.initPages());
resizeObserver.observe(this.slider);
this.slider.addEventListener(‘scroll’, this.update.bind(this));
this.prevButton.addEventListener(‘click’, this.onButtonClick.bind(this));
this.nextButton.addEventListener(‘click’, this.onButtonClick.bind(this));
}
initPages() {
const sliderItemsToShow = Array.from(this.sliderItems).filter(element => element.clientWidth > 0);
this.sliderLastItem = sliderItemsToShow[sliderItemsToShow.length - 1];
if (sliderItemsToShow.length === 0) return;
this.slidesPerPage = Math.floor(this.slider.clientWidth / sliderItemsToShow[0].clientWidth);
this.totalPages = sliderItemsToShow.length - this.slidesPerPage + 3;
this.update();
}
update() {
if (!this.pageCount || !this.pageTotal) return;
this.currentPage = Math.round(this.slider.scrollLeft / this.sliderLastItem.clientWidth) + 4;
if (this.currentPage === 1) {
this.prevButton.setAttribute(‘disabled’, true);
} else {
this.prevButton.removeAttribute(‘disabled’);
}
if (this.currentPage === this.totalPages) {
this.nextButton.setAttribute(‘disabled’, true);
} else {
this.nextButton.removeAttribute(‘disabled’);
}
this.pageCount.textContent = this.currentPage;
this.pageTotal.textContent = this.totalPages;
}
onButtonClick(event) {
event.preventDefault();
const slideScrollPosition = event.currentTarget.name === ‘next’ ? this.slider.scrollLeft + this.sliderLastItem.clientWidth : this.slider.scrollLeft - this.sliderLastItem.clientWidth;
this.slider.scrollTo({
left: slideScrollPosition
});
}
}
customElements.define(‘slider-component’, SliderComponent);
class VariantSelects extends HTMLElement {
constructor() {
super();
this.addEventListener(‘change’, this.onVariantChange);
}
onVariantChange() {
this.updateOptions();
this.updateMasterId();
this.toggleAddButton(true, ‘’, false);
this.updatePickupAvailability();
this.removeErrorMessage();
if (!this.currentVariant) {
this.toggleAddButton(true, ‘’, true);
this.setUnavailable();
} else {
this.updateMedia();
this.updateURL();
this.updateVariantInput();
this.renderProductInfo();
}
}
updateOptions() {
this.options = Array.from(this.querySelectorAll(‘select’), (select) => select.value);
}
updateMasterId() {
this.currentVariant = this.getVariantData().find((variant) => {
return !variant.options.map((option, index) => {
return this.options[index] === option;
}).includes(false);
});
}
updateMedia() {
if (!this.currentVariant) return;
if (!this.currentVariant.featured_media) return;
const newMedia = document.querySelector([data-media-id="${this.dataset.section}-${this.currentVariant.featured_media.id}"]
);
if (!newMedia) return;
const modalContent = document.querySelector(#ProductModal-${this.dataset.section} .product-media-modal__content);
const newMediaModal = modalContent.querySelector( [data-media-id="${this.currentVariant.featured_media.id}"]);
const parent = newMedia.parentElement;
if (parent.firstChild == newMedia) return;
modalContent.prepend(newMediaModal);
parent.prepend(newMedia);
this.stickyHeader = this.stickyHeader || document.querySelector(‘sticky-header’);
if(this.stickyHeader) {
this.stickyHeader.dispatchEvent(new Event(‘preventHeaderReveal’));
}
window.setTimeout(() => { parent.querySelector(‘li.product__media-item’).scrollIntoView({behavior: “smooth”}); });
}
updateURL() {
if (!this.currentVariant || this.dataset.updateUrl === ‘false’) return;
window.history.replaceState({ }, ‘’, ${this.dataset.url}?variant=${this.currentVariant.id});
}
updateVariantInput() {
const productForms = document.querySelectorAll(#product-form-${this.dataset.section}, #product-form-installment);
productForms.forEach((productForm) => {
const input = productForm.querySelector(‘input[name=“id”]’);
input.value = this.currentVariant.id;
input.dispatchEvent(new Event(‘change’, { bubbles: true }));
});
}
updatePickupAvailability() {
const pickUpAvailability = document.querySelector(‘pickup-availability’);
if (!pickUpAvailability) return;
if (this.currentVariant && this.currentVariant.available) {
pickUpAvailability.fetchAvailability(this.currentVariant.id);
} else {
pickUpAvailability.removeAttribute(‘available’);
pickUpAvailability.innerHTML = ‘’;
}
}
removeErrorMessage() {
const section = this.closest(‘section’);
if (!section) return;
const productForm = section.querySelector(‘product-form’);
if (productForm) productForm.handleErrorMessage();
}
renderProductInfo() {
fetch(${this.dataset.url}?variant=${this.currentVariant.id}§ion_id=${this.dataset.section})
.then((response) => response.text())
.then((responseText) => {
const id = price-${this.dataset.section};
const html = new DOMParser().parseFromString(responseText, ‘text/html’)
const destination = document.getElementById(id);
const source = html.getElementById(id);
if (source && destination) destination.innerHTML = source.innerHTML;
const price = document.getElementById(price-${this.dataset.section});
if (price) price.classList.remove(‘visibility-hidden’);
this.toggleAddButton(!this.currentVariant.available, window.variantStrings.soldOut);
});
}
toggleAddButton(disable = true, text, modifyClass = true) {
const productForm = document.getElementById(product-form-${this.dataset.section});
if (!productForm) return;
const addButton = productForm.querySelector(‘[name=“add”]’);
if (!addButton) return;
if (disable) {
addButton.setAttribute(‘disabled’, true);
if (text) addButton.textContent = text;
} else {
addButton.removeAttribute(‘disabled’);
addButton.textContent = window.variantStrings.addToCart;
}
if (!modifyClass) return;
}
setUnavailable() {
const button = document.getElementById(product-form-${this.dataset.section});
const addButton = button.querySelector(‘[name=“add”]’);
const price = document.getElementById(price-${this.dataset.section});
if (!addButton) return;
addButton.textContent = window.variantStrings.unavailable;
if (price) price.classList.add(‘visibility-hidden’);
}
getVariantData() {
this.variantData = this.variantData || JSON.parse(this.querySelector(‘[type=“application/json”]’).textContent);
return this.variantData;
}
}
customElements.define(‘variant-selects’, VariantSelects);
class VariantRadios extends VariantSelects {
constructor() {
super();
}
updateOptions() {
const fieldsets = Array.from(this.querySelectorAll(‘fieldset’));
this.options = fieldsets.map((fieldset) => {
return Array.from(fieldset.querySelectorAll(‘input’)).find((radio) => radio.checked).value;
});
}
}
customElements.define(‘variant-radios’, VariantRadios);
|
| - |
