first commit
This commit is contained in:
Axel committed
commit
12799f7356
6 files changed
+1048
No files matched your search
@@ -0,0 +1,483 @@
|
||||
{% comment %}
|
||||
Product snippet
|
||||
|
||||
@param product
|
||||
@param selected_variant
|
||||
@param width
|
||||
@param css_class
|
||||
@param display_social_buttons
|
||||
@param display_thumbnails
|
||||
@param enable_product_lightbox
|
||||
@param enable_shopify_review_comments
|
||||
@param enable_thumbnail_slider
|
||||
@param enable_zoom
|
||||
@param gallery_arrows
|
||||
@param product_description_position
|
||||
@param product_height
|
||||
@param set_product_height
|
||||
@param slideshow_transition
|
||||
@param stickers_enabled
|
||||
@param tag_style
|
||||
@param thumbnail_position
|
||||
@param video_looping
|
||||
@param section_onboarding
|
||||
{% endcomment %}
|
||||
|
||||
{% comment %} HTML markup {% endcomment %}
|
||||
|
||||
<div class="product_section
|
||||
js-product_section
|
||||
container
|
||||
is-justify-space-between
|
||||
has-padding-bottom
|
||||
{% if product_images_position == 'right' %}
|
||||
is-flex-row-reverse
|
||||
{% endif %}">
|
||||
|
||||
<div class="product__images
|
||||
one-half
|
||||
column
|
||||
medium-down--one-whole">
|
||||
{% if section_onboarding %}
|
||||
<div class="featured-product__images">
|
||||
{{ 'product-1' | placeholder_svg_tag: 'placeholder-svg placeholder-svg--product' }}
|
||||
</div>
|
||||
{% else %}
|
||||
{%
|
||||
render 'product__images',
|
||||
product: product,
|
||||
display_thumbnails: display_thumbnails,
|
||||
thumbnail_position: thumbnail_position,
|
||||
enable_thumbnail_slider: enable_thumbnail_slider,
|
||||
product_height: product_height,
|
||||
set_product_height: set_product_height,
|
||||
video_looping: video_looping
|
||||
gallery_arrows: gallery_arrows,
|
||||
slideshow_transition: slideshow_transition,
|
||||
enable_product_lightbox: enable_product_lightbox,
|
||||
enable_zoom: enable_zoom
|
||||
%}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="product__information
|
||||
has-product-sticker
|
||||
one-half
|
||||
column
|
||||
medium-down--one-whole">
|
||||
|
||||
{% comment %} Sale sticker {% endcomment %}
|
||||
{% if stickers_enabled %}
|
||||
{% assign collection_handles = product.collections | map: 'handle' %}
|
||||
{%
|
||||
render 'product-thumbnail__sticker',
|
||||
context: 'product',
|
||||
collection_handles: collection_handles,
|
||||
%}
|
||||
{% endif %}
|
||||
|
||||
{%- for block in section.blocks -%}
|
||||
<div class="product-block
|
||||
product-block--{{ block.type | downcase | replace: '_', '-' }}
|
||||
{% if forloop.first == true %}
|
||||
product-block--first
|
||||
{% endif %}"
|
||||
{{ block.shopify_attributes }}>
|
||||
|
||||
{%- if block.type == 'vendor' -%}
|
||||
{% comment %} Vendor {% endcomment %}
|
||||
<p class="vendor">
|
||||
<span class="vendor">
|
||||
{% if section_onboarding %}
|
||||
Vendor name
|
||||
{% else %}
|
||||
{{ product.vendor | link_to_vendor }}
|
||||
{% endif %}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
{%- elsif block.type == 'sku' -%}
|
||||
{% comment %} Sku {% endcomment %}
|
||||
<p class="sku">
|
||||
{% if section_onboarding %}
|
||||
1234567890
|
||||
{% else %}
|
||||
{{ selected_variant.sku }}
|
||||
{% endif %}
|
||||
</p>
|
||||
|
||||
{%- elsif block.type == 'title' -%}
|
||||
{% comment %} Name {% endcomment %}
|
||||
<h1 class="product_name title">
|
||||
{% if section_id == 'quickshop' %}
|
||||
<a href="{{ product.url }}">{{ product.title }}</a>
|
||||
{% elsif section_onboarding %}
|
||||
{{ 'homepage.onboarding.product_title' | t }}
|
||||
{% else %}
|
||||
{{ product.title }}
|
||||
{% endif %}
|
||||
</h1>
|
||||
|
||||
{%- elsif block.type == 'size-chart' -%}
|
||||
{% comment %} Size chart {% endcomment %}
|
||||
{% for tag in product.tags %}
|
||||
{% if tag contains 'meta-size-chart-' %}
|
||||
{% assign meta-size-chart = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% comment %} Size chart Mobile {% endcomment %}
|
||||
{% if block.settings.size_chart != blank or meta-size-chart %}
|
||||
<a href="javascript:;" class="product__size-chart size-chart--medium-down" data-fancybox data-src="#size-chart{{ product.id }}" data-type="inline">{{ 'products.product.size_chart' | t }} {% render 'icon', name: 'right-caret' %}</a>
|
||||
{% render 'popup-size-chart', product_id: product.id %}
|
||||
{% endif %}
|
||||
{% comment %} Size chart {% endcomment %}
|
||||
{% if block.settings.size_chart != blank or meta-size-chart %}
|
||||
<a href="javascript:;" class="product__size-chart medium-down--hidden" data-fancybox data-src="#size-chart{{ product.id }}" data-type="inline">{{ 'products.product.size_chart' | t }} {% render 'icon', name: 'right-caret' %}</a>
|
||||
{% render 'popup-size-chart', product_id: product.id %}
|
||||
{% endif %}
|
||||
|
||||
{%- elsif block.type == 'price' -%}
|
||||
{% comment %} Price {% endcomment %}
|
||||
<div class="modal_price subtitle" data-display-savings="{{ block.settings.display_savings }}">
|
||||
{% if section_onboarding %}
|
||||
<span class="money">$49.00</span>
|
||||
{% else %}
|
||||
{% comment %}Inject @pixelunion/shopify-price-ui/price-ui begin{% endcomment %}
|
||||
<div class="price-ui price-ui--loading" data-price-ui>
|
||||
<noscript>
|
||||
<style>
|
||||
.price-ui--loading {
|
||||
display: block !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
</style>
|
||||
</noscript>
|
||||
{% assign compare_at_price = false %}
|
||||
|
||||
{% if product.compare_at_price and product.compare_at_price != product.price %}
|
||||
{% if product.compare_at_price_varies %}
|
||||
{%- capture price_min -%}
|
||||
{%-
|
||||
render 'price-ui-templates',
|
||||
template: 'price-min',
|
||||
value: product.compare_at_price_min,
|
||||
-%}
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- capture price_max -%}
|
||||
{%-
|
||||
render 'price-ui-templates',
|
||||
template: 'price-max',
|
||||
value: product.compare_at_price_max,
|
||||
-%}
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- assign compare_at_price = 'product.price.range_html' | t: price_min: price_min, price_max: price_max -%}
|
||||
{% else %}
|
||||
{%- capture compare_at_price -%}
|
||||
{%-
|
||||
render 'price-ui-templates',
|
||||
template: 'price',
|
||||
value: product.compare_at_price,
|
||||
-%}
|
||||
{%- endcapture -%}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if product.price_varies %}
|
||||
{%- capture price_min -%}
|
||||
{%-
|
||||
render 'price-ui-templates',
|
||||
template: 'price-min',
|
||||
value: product.price_min,
|
||||
-%}
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- capture price_max -%}
|
||||
{%-
|
||||
render 'price-ui-templates',
|
||||
template: 'price-max',
|
||||
value: product.price_max,
|
||||
-%}
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- assign price = 'product.price.range_html' | t: price_min: price_min, price_max: price_max -%}
|
||||
{% else %}
|
||||
{%- capture price -%}
|
||||
{%-
|
||||
render 'price-ui-templates',
|
||||
template: 'price',
|
||||
value: product.price,
|
||||
-%}
|
||||
{%- endcapture -%}
|
||||
{% endif %}
|
||||
|
||||
{%-
|
||||
render 'price-ui-templates',
|
||||
template: 'price-ui',
|
||||
compare_at_price: compare_at_price,
|
||||
price: price,
|
||||
unit_pricing: false,
|
||||
-%}
|
||||
</div>
|
||||
{% comment %}Inject @pixelunion/shopify-price-ui/price-ui end{% endcomment %}
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{%- elsif block.type == 'description' -%}
|
||||
{% comment %} Description {% endcomment %}
|
||||
{% if block.settings.custom_description != blank %}
|
||||
<div class="description content has-padding-top">
|
||||
{{ block.settings.custom_description }}
|
||||
</div>
|
||||
{% elsif section_onboarding %}
|
||||
<div class="description content has-padding-top">
|
||||
<p>
|
||||
{{ 'homepage.onboarding.product_description' | t }}
|
||||
</p>
|
||||
</div>
|
||||
{% else %}
|
||||
{% if product.description != blank %}
|
||||
<div class="description content has-padding-top">
|
||||
{{ product.description | split: '<!-- split -->' | first }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{%- elsif block.type == 'form' -%}
|
||||
{% comment %} Purchase form {% endcomment %}
|
||||
{% if section_onboarding %}
|
||||
<div class="product-form-container has-padding-top">
|
||||
<div class="purchase-details">
|
||||
<div class="purchase-details__buttons purchase-details__spb--false">
|
||||
<button name="add" class="action_button button button--add-to-cart add_to_cart" data-label={{ add_to_cart_label | json }}><span class="text">{{ 'products.product.add_to_cart' | t }}</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="product-form-container has-padding-top">
|
||||
|
||||
{% comment %} Notify form {% endcomment %}
|
||||
{% render 'product__notify-me-form', product: product %}
|
||||
|
||||
{% comment %} Product form {% endcomment %}
|
||||
{% unless collection_handles contains 'coming-soon' %}
|
||||
{%
|
||||
render 'product__form',
|
||||
context: 'product',
|
||||
product: product,
|
||||
sold_out_options: sold_out_options,
|
||||
selected_variant: selected_variant,
|
||||
show_payment_button: block.settings.show_payment_button,
|
||||
collection_handles: collection_handles
|
||||
%}
|
||||
{% endunless %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{%- elsif block.type == 'product-links' -%}
|
||||
{% comment %} Collections, type, tags {% endcomment %}
|
||||
{% if block.settings.show_collections or block.settings.show_tags or block.settings.show_type %}
|
||||
<div class="product__classification-links has-padding-top">
|
||||
{% if block.settings.show_collections %}
|
||||
<p class="product__collections-list tags">
|
||||
<span class="product__classification-title">{{ 'products.product.collections' | t }}:</span>
|
||||
{% for col in product.collections %}
|
||||
<span class="tag tag--{{ tag_style }}">
|
||||
<a href="{{ col.url }}" title="{{ col.title }}">{{ col.title }}</a>
|
||||
</span>
|
||||
{% endfor %}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{% if block.settings.show_type %}
|
||||
<p class="product__type-list tags">
|
||||
<span class="product__classification-title">{{ 'products.product.product_types' | t }}:</span>
|
||||
<span class="tag tag--{{ tag_style }}">{{ product.type | link_to_type }}</span>
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{% if block.settings.show_tags and product.tags.size > 0 %}
|
||||
<p class="product__tags-list tags">
|
||||
<span class="product__classification-title">{{ 'products.product.tags' | t }}:</span>
|
||||
{% for tag in product.tags %}
|
||||
{% unless tag contains 'meta-' %}
|
||||
<span class="tag tag--{{ tag_style }}">
|
||||
<a href="{{ routes.collections_url }}/{% if collection %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handle }}" title="{{ 'products.product.products_tagged' | t: tag: tag }}">{{ tag }}</a>
|
||||
</span>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{%- elsif block.type == 'collapsible-tab' -%}
|
||||
{% if block.settings.content != blank or block.settings.page.content != blank%}
|
||||
<div class="product__accordion accordion" {{ block.shopify_attributes }}>
|
||||
<details id="Details-{{ block.id }}-{{ section.id }}">
|
||||
<summary>
|
||||
<div class="summary__title">
|
||||
{% render 'icon-accordion', icon: block.settings.icon %}
|
||||
<h2 class="h4 accordion__title">
|
||||
{{ block.settings.heading | default: block.settings.page.title }}
|
||||
</h2>
|
||||
</div>
|
||||
{% render 'icon-caret' %}
|
||||
</summary>
|
||||
<div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
|
||||
{{ block.settings.content }}
|
||||
{{ block.settings.page.content }}
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{%- elsif block.type == 'share' -%}
|
||||
{% comment %} Social share icons {% endcomment %}
|
||||
<div class="product__social-share has-padding-top">
|
||||
{% render 'social-share-buttons' %}
|
||||
</div>
|
||||
|
||||
{%- elsif block.type == 'text' -%}
|
||||
{% comment %} Text {% endcomment %}
|
||||
<div class="product-text">
|
||||
{{ block.settings.text }}
|
||||
</div>
|
||||
{% elsif block.type == '@app' %}
|
||||
<div class="product-app">
|
||||
{% render block %}
|
||||
</div>
|
||||
|
||||
{% elsif block.type == 'related_products' %}
|
||||
{% if block.settings.product_list != blank %}
|
||||
{% render 'product__related-products',
|
||||
block_id: block.id,
|
||||
title: block.settings.title,
|
||||
product_list: block.settings.product_list
|
||||
%}
|
||||
{% endif %}
|
||||
|
||||
{% elsif block.type == 'related_items' %}
|
||||
{% assign grid_items = '' %}
|
||||
|
||||
{% if product.metafields.product_ref.product_link != blank %}
|
||||
{% capture grid_item %}
|
||||
{% render 'related-items__product-grid-item', product: product.metafields.product_ref.product_link.value %}
|
||||
{% endcapture %}
|
||||
|
||||
{% assign grid_items = grid_items | append: grid_item | append: "#*#" %}
|
||||
{% endif %}
|
||||
|
||||
{% if product.metafields.my_fields.product_link_2 != blank %}
|
||||
{% capture grid_item %}
|
||||
{% render 'related-items__product-grid-item', product: product.metafields.my_fields.product_link_2.value %}
|
||||
{% endcapture %}
|
||||
{% assign grid_items = grid_items | append: grid_item | append: "#*#" %}
|
||||
{% endif %}
|
||||
|
||||
{% if product.metafields.my_fields.product_variant_link_1 != blank %}
|
||||
{% capture grid_item %}
|
||||
{% render 'related-items__variant-grid-item', variant: product.metafields.my_fields.product_variant_link_1.value %}
|
||||
{% endcapture %}
|
||||
|
||||
{% assign grid_items = grid_items | append: grid_item | append: "#*#" %}
|
||||
{% endif %}
|
||||
|
||||
{% if product.metafields.my_fields.product_variant_link_2 != blank %}
|
||||
{% capture grid_item %}
|
||||
{% render 'related-items__variant-grid-item', variant: product.metafields.my_fields.product_variant_link_2.value %}
|
||||
{% endcapture%}
|
||||
{% assign grid_items = grid_items | append: grid_item | append: "#*#" %}
|
||||
{% endif %}
|
||||
|
||||
{% if product.metafields.my_fields.product_link_3 != blank %}
|
||||
{% capture grid_item %}
|
||||
{% render 'related-items__product-grid-item', product: product.metafields.my_fields.product_link_3.value %}
|
||||
{% endcapture%}
|
||||
{% assign grid_items = grid_items | append: grid_item | append: "#*#" %}
|
||||
{% endif %}
|
||||
{% if product.metafields.my_fields.product_link_4 != blank %}
|
||||
{% capture grid_item %}
|
||||
{% render 'related-items__product-grid-item', product: product.metafields.my_fields.product_link_4.value %}
|
||||
{% endcapture%}
|
||||
{% assign grid_items = grid_items | append: grid_item | append: "#*#" %}
|
||||
{% endif %}
|
||||
|
||||
{% if product.metafields.my_fields.product_variant_link_3 != blank %}
|
||||
{% capture grid_item %}
|
||||
{% render 'related-items__variant-grid-item', variant: product.metafields.my_fields.product_variant_link_3.value %}
|
||||
{% endcapture%}
|
||||
{% assign grid_items = grid_items | append: grid_item | append: "#*#" %}
|
||||
{% endif %}
|
||||
|
||||
{% assign grid_item_array = grid_items | split: "#*#" %}
|
||||
|
||||
{% render 'product__related-items',
|
||||
block_id: block.id,
|
||||
title: block.settings.title,
|
||||
product_list: grid_item_array,
|
||||
limit: grid_item_array.size,
|
||||
per_slide: 3,
|
||||
align_height: false,
|
||||
height: 150,
|
||||
show_gutter: true
|
||||
%}
|
||||
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
||||
{%- endfor -%}
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ATTENTION HERE -->
|
||||
<script type="text/javascript">
|
||||
function waitForElm(selector) {
|
||||
return new Promise(resolve => {
|
||||
if (document.querySelector(selector)) {
|
||||
return resolve(document.querySelector(selector));
|
||||
}
|
||||
const observer = new MutationObserver(mutations => {
|
||||
if (document.querySelector(selector)) {
|
||||
observer.disconnect();
|
||||
resolve(document.querySelector(selector));
|
||||
}
|
||||
});
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
waitForElm('square-placement').then((elm) => {
|
||||
console.log("afterpay placement appeared");
|
||||
setTimeout(() => {
|
||||
const afterpayPrice = document.querySelector('square-placement')?.shadowRoot?.querySelector('.afterpay-main-text strong');
|
||||
const yagiPrice = document.querySelector(".yagi-discounted-price")?.textContent;
|
||||
if(afterpayPrice && yagiPrice){
|
||||
var installmentPrice = parseCurrencyFloat(yagiPrice) / 4.0;
|
||||
afterpayPrice.textContent = `$${installmentPrice.toFixed(2)}`;
|
||||
}
|
||||
}, 400);
|
||||
});
|
||||
document.addEventListener("yagi:updatedSelectedPrice", (event) => {
|
||||
const price = event.detail?.price;
|
||||
if(price){
|
||||
var installmentPrice = parseCurrencyFloat(price) / 4.0;
|
||||
const afterpayPrice = document.querySelector('square-placement')?.shadowRoot?.querySelector('.afterpay-main-text strong');
|
||||
if(afterpayPrice){
|
||||
setTimeout(() => {
|
||||
afterpayPrice.textContent = `$${installmentPrice.toFixed(2)}`;
|
||||
}, 10);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
console.log("Selected price:", price);
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
Reference in new issue
Block a user