initial commit
This commit is contained in:
Gerhard Scheikl
@@ -0,0 +1,262 @@
|
||||
{{ 'component-slideshow.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- liquid
|
||||
assign social_icons = true
|
||||
if settings.social_facebook_link == blank and settings.social_instagram_link == blank and settings.social_youtube_link == blank and settings.social_tiktok_link == blank and settings.social_twitter_link == blank and settings.social_pinterest_link == blank and settings.social_snapchat_link == blank and settings.social_tumblr_link == blank and settings.social_vimeo_link == blank
|
||||
assign social_icons = false
|
||||
endif
|
||||
if section.settings.enable_country_selector or section.settings.enable_language_selector
|
||||
assign language_country_selector = true
|
||||
endif
|
||||
if section.blocks.size > 0
|
||||
assign announcement_bar = true
|
||||
endif
|
||||
-%}
|
||||
|
||||
{% if social_icons %}
|
||||
{{ 'component-list-social.css' | asset_url | stylesheet_tag }}
|
||||
{% endif %}
|
||||
|
||||
<div
|
||||
class="utility-bar color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator and section.blocks.size > 0 %} utility-bar--bottom-border{% elsif section.settings.show_line_separator and section.settings.show_social and social_icons%} utility-bar--bottom-border-social-only{% endif %}{% if section.settings.enable_country_selector or section.settings.enable_language_selector %} header-localization{% endif %}"
|
||||
>
|
||||
<div class="page-width utility-bar__grid{% if announcement_bar and language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--3-col{% elsif language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--2-col{% endif %}">
|
||||
{%- if section.settings.show_social and social_icons -%}
|
||||
{%- render 'social-icons' -%}
|
||||
{%- endif -%}
|
||||
{%- if section.blocks.size == 1 -%}
|
||||
<div
|
||||
class="announcement-bar{% if section.settings.show_social %} announcement-bar--one-announcement{% endif %}"
|
||||
role="region"
|
||||
aria-label="{{ 'sections.header.announcement' | t }}"
|
||||
{{ section.blocks.first.shopify_attributes }}
|
||||
>
|
||||
{%- if section.blocks.first.settings.text != blank -%}
|
||||
{%- if section.blocks.first.settings.link != blank -%}
|
||||
<a
|
||||
href="{{ section.blocks.first.settings.link }}"
|
||||
class="announcement-bar__link link link--text focus-inset animate-arrow"
|
||||
>
|
||||
{%- endif -%}
|
||||
<p class="announcement-bar__message h5">
|
||||
<span>{{ section.blocks.first.settings.text | escape }}</span>
|
||||
{%- if section.blocks.first.settings.link != blank -%}
|
||||
{{- 'icon-arrow.svg' | inline_asset_content -}}
|
||||
{%- endif -%}
|
||||
</p>
|
||||
{%- if section.blocks.first.settings.link != blank -%}
|
||||
</a>
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- elsif section.blocks.size > 1 -%}
|
||||
<slideshow-component
|
||||
class="announcement-bar"
|
||||
role="region"
|
||||
aria-roledescription="{{ 'sections.announcements.carousel' | t }}"
|
||||
aria-label="{{ 'sections.announcements.announcement_bar' | t }}"
|
||||
>
|
||||
<div class="announcement-bar-slider slider-buttons">
|
||||
<button
|
||||
type="button"
|
||||
class="slider-button slider-button--prev"
|
||||
name="previous"
|
||||
aria-label="{{ 'sections.announcements.previous_announcement' | t }}"
|
||||
aria-controls="Slider-{{ section.id }}"
|
||||
>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-caret.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="grid grid--1-col slider slider--everywhere"
|
||||
id="Slider-{{ section.id }}"
|
||||
aria-live="polite"
|
||||
aria-atomic="true"
|
||||
data-autoplay="{{ section.settings.auto_rotate }}"
|
||||
data-speed="{{ section.settings.change_slides_speed }}"
|
||||
>
|
||||
{%- for block in section.blocks -%}
|
||||
<div
|
||||
class="slideshow__slide slider__slide grid__item grid--1-col"
|
||||
id="Slide-{{ section.id }}-{{ forloop.index }}"
|
||||
{{ block.shopify_attributes }}
|
||||
role="group"
|
||||
aria-roledescription="{{ 'sections.announcements.announcement' | t }}"
|
||||
aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="announcement-bar__announcement"
|
||||
role="region"
|
||||
aria-label="{{ 'sections.header.announcement' | t }}"
|
||||
>
|
||||
{%- if block.settings.text != blank -%}
|
||||
{%- if block.settings.link != blank -%}
|
||||
<a
|
||||
href="{{ block.settings.link }}"
|
||||
class="announcement-bar__link link link--text focus-inset animate-arrow"
|
||||
>
|
||||
{%- endif -%}
|
||||
<p class="announcement-bar__message h5">
|
||||
<span>{{ block.settings.text | escape }}</span>
|
||||
{%- if block.settings.link != blank -%}
|
||||
{{- 'icon-arrow.svg' | inline_asset_content -}}
|
||||
{%- endif -%}
|
||||
</p>
|
||||
{%- if block.settings.link != blank -%}
|
||||
</a>
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="slider-button slider-button--next"
|
||||
name="next"
|
||||
aria-label="{{ 'sections.announcements.next_announcement' | t }}"
|
||||
aria-controls="Slider-{{ section.id }}"
|
||||
>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-caret.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</slideshow-component>
|
||||
{%- if request.design_mode -%}
|
||||
<script src="{{ 'theme-editor.js' | asset_url }}" defer="defer"></script>
|
||||
<style>
|
||||
/* theme editor power preview fix */
|
||||
.announcement-bar-slider .slider__slide[aria-hidden='true'] {
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
<div class="localization-wrapper">
|
||||
{%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
|
||||
<localization-form class="small-hide medium-hide">
|
||||
{%- form 'localization', id: 'AnnouncementCountryForm', class: 'localization-form' -%}
|
||||
<div>
|
||||
<h2 class="visually-hidden" id="AnnouncementCountryLabel">{{ 'localization.country_label' | t }}</h2>
|
||||
{%- render 'country-localization', localPosition: 'AnnouncementCountry' -%}
|
||||
</div>
|
||||
{%- endform -%}
|
||||
</localization-form>
|
||||
{% endif %}
|
||||
|
||||
{%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
|
||||
<localization-form class="small-hide medium-hide">
|
||||
{%- form 'localization', id: 'AnnouncementLanguageForm', class: 'localization-form' -%}
|
||||
<div>
|
||||
<h2 class="visually-hidden" id="AnnouncementLanguageLabel">{{ 'localization.language_label' | t }}</h2>
|
||||
{%- render 'language-localization', localPosition: 'AnnouncementLanguage' -%}
|
||||
</div>
|
||||
{%- endform -%}
|
||||
</localization-form>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.announcement-bar.name",
|
||||
"max_blocks": 12,
|
||||
"class": "announcement-bar-section",
|
||||
"enabled_on": {
|
||||
"groups": ["header"]
|
||||
},
|
||||
"settings": [
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "auto_rotate",
|
||||
"label": "t:sections.announcement-bar.settings.auto_rotate.label",
|
||||
"default": false
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "change_slides_speed",
|
||||
"min": 3,
|
||||
"max": 10,
|
||||
"step": 1,
|
||||
"unit": "s",
|
||||
"label": "t:sections.announcement-bar.settings.change_slides_speed.label",
|
||||
"default": 5
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"default": "scheme-4"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_line_separator",
|
||||
"default": true,
|
||||
"label": "t:sections.header.settings.show_line_separator.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.announcement-bar.settings.heading_utilities.content"
|
||||
},
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": "t:sections.announcement-bar.settings.paragraph.content"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_social",
|
||||
"default": false,
|
||||
"label": "t:sections.announcement-bar.settings.show_social.label",
|
||||
"info": "t:sections.announcement-bar.settings.show_social.info"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "enable_country_selector",
|
||||
"default": false,
|
||||
"label": "t:sections.announcement-bar.settings.enable_country_selector.label",
|
||||
"info": "t:sections.announcement-bar.settings.enable_country_selector.info"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "enable_language_selector",
|
||||
"default": false,
|
||||
"label": "t:sections.announcement-bar.settings.enable_language_selector.label",
|
||||
"info": "t:sections.announcement-bar.settings.enable_language_selector.info"
|
||||
}
|
||||
],
|
||||
"blocks": [
|
||||
{
|
||||
"type": "announcement",
|
||||
"name": "t:sections.announcement-bar.blocks.announcement.name",
|
||||
"settings": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "text",
|
||||
"default": "t:sections.announcement-bar.blocks.announcement.settings.text.default",
|
||||
"label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
|
||||
},
|
||||
{
|
||||
"type": "url",
|
||||
"id": "link",
|
||||
"label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "t:sections.announcement-bar.presets.name",
|
||||
"blocks": [
|
||||
{
|
||||
"type": "announcement"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,31 @@
|
||||
<div class="{% if section.settings.include_margins %}page-width{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
|
||||
{%- for block in section.blocks -%}
|
||||
{% render block %}
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.apps.name",
|
||||
"tag": "section",
|
||||
"class": "section",
|
||||
"settings": [
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "include_margins",
|
||||
"default": true,
|
||||
"label": "t:sections.apps.settings.include_margins.label"
|
||||
}
|
||||
],
|
||||
"blocks": [
|
||||
{
|
||||
"type": "@app"
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "t:sections.apps.presets.name"
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,15 @@
|
||||
{{ 'quick-order-list.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
<script src="{{ 'quick-order-list.js' | asset_url }}" defer="defer"></script>
|
||||
|
||||
{% render 'quick-order-list', product: product, show_image: true, show_sku: true, is_modal: true %}
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.quick-order-list.name",
|
||||
"limit": 1,
|
||||
"enabled_on": {
|
||||
"templates": ["product"]
|
||||
}
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1 @@
|
||||
{%- render 'cart-drawer' -%}
|
||||
@@ -0,0 +1,15 @@
|
||||
{% if cart == empty %}
|
||||
<span class="svg-wrapper">{{ 'icon-cart-empty.svg' | inline_asset_content }}</span>
|
||||
{% else %}
|
||||
<span class="svg-wrapper">{{ 'icon-cart.svg' | inline_asset_content }}</span>
|
||||
{% endif %}
|
||||
|
||||
<span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>
|
||||
{%- if cart != empty -%}
|
||||
<div class="cart-count-bubble">
|
||||
{%- if cart.item_count < 100 -%}
|
||||
<span aria-hidden="true">{{ cart.item_count }}</span>
|
||||
{%- endif -%}
|
||||
<span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
@@ -0,0 +1 @@
|
||||
{{ 'sections.cart.new_estimated_total' | t }}: {{ cart.total_price | money_with_currency }}
|
||||
@@ -0,0 +1 @@
|
||||
{{ 'general.cart.view' | t: count: cart.item_count }}
|
||||
@@ -0,0 +1,59 @@
|
||||
{%- if cart != empty -%}
|
||||
{%- for item in cart.items -%}
|
||||
<div id="cart-notification-product-{{ item.key }}" class="cart-item">
|
||||
{%- if item.image -%}
|
||||
<div class="cart-notification-product__image global-media-settings">
|
||||
<img
|
||||
src="{{ item.image | image_url: width: 140 }}"
|
||||
alt="{{ item.image.alt | escape }}"
|
||||
width="70"
|
||||
height="{{ 70 | divided_by: item.image.aspect_ratio | ceil }}"
|
||||
loading="lazy"
|
||||
>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
<div>
|
||||
{%- if settings.show_vendor -%}
|
||||
<p class="caption-with-letter-spacing light">{{ item.product.vendor }}</p>
|
||||
{%- endif -%}
|
||||
<div class="cart-notification-product__title">
|
||||
<h3 class="cart-notification-product__name h4">
|
||||
{{- item.product.title | escape -}}
|
||||
</h3>
|
||||
{% assign modal_id = 'CartDisclosureModal-notification-' | append: item.key | replace: ':', '-' %}
|
||||
{%- render 'cart-disclosure-indicator', product: item.product, modal_id: modal_id -%}
|
||||
</div>
|
||||
<dl>
|
||||
{%- unless item.product.has_only_default_variant -%}
|
||||
{%- for option in item.options_with_values -%}
|
||||
<div class="product-option">
|
||||
<dt>{{ option.name }}:</dt>
|
||||
<dd>{{ option.value }}</dd>
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
{%- endunless -%}
|
||||
{%- for property in item.properties -%}
|
||||
{%- assign property_first_char = property.first | slice: 0 -%}
|
||||
{%- if property.last != blank and property_first_char != '_' -%}
|
||||
<div class="product-option">
|
||||
<dt>{{ property.first }}:</dt>
|
||||
<dd>
|
||||
{%- if property.last contains '/uploads/' -%}
|
||||
<a href="{{ property.last }}" class="link" target="_blank">
|
||||
{{ property.last | split: '/' | last }}
|
||||
</a>
|
||||
{%- else -%}
|
||||
{{ property.last }}
|
||||
{%- endif -%}
|
||||
</dd>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</dl>
|
||||
{%- if item.selling_plan_allocation != null -%}
|
||||
<p class="product-option">{{ item.selling_plan_allocation.selling_plan.name }}</p>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
{%- endif -%}
|
||||
@@ -0,0 +1,432 @@
|
||||
{{ 'collage.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-card.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-price.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-modal-video.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
<div class="color-{{ section.settings.color_scheme }} gradient isolate">
|
||||
<div class="page-width section-{{ section.id }}-padding">
|
||||
{%- if section.settings.heading != blank -%}
|
||||
<h2 class="collage-wrapper-title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
|
||||
{{ section.settings.heading }}
|
||||
</h2>
|
||||
{%- endif -%}
|
||||
<div class="collage{% if section.settings.mobile_layout == 'collage' %} collage--mobile{% endif %}">
|
||||
{% assign skip_card_product_styles = false %}
|
||||
{%- for block in section.blocks -%}
|
||||
<div
|
||||
class="collage__item collage__item--{{ block.type }} collage__item--{{ section.settings.desktop_layout }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{{ block.shopify_attributes }}
|
||||
{% if settings.animations_reveal_on_scroll %}
|
||||
data-cascade
|
||||
style="--animation-order: {{ forloop.index }};"
|
||||
{% endif %}
|
||||
>
|
||||
{%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}
|
||||
{%- case block.type -%}
|
||||
{%- when 'image' -%}
|
||||
<div class="collage-card {% if section.settings.card_styles == 'none' %}global-media-settings{% else %}card-wrapper {{ section.settings.card_styles }} color-{{ settings.card_color_scheme }} gradient{% endif %}">
|
||||
<div
|
||||
class="media media--transparent ratio"
|
||||
{% if block.settings.image != blank %}
|
||||
style="--ratio-percent: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%"
|
||||
{% else %}
|
||||
style="--ratio-percent: 100%"
|
||||
{% endif %}
|
||||
>
|
||||
{%- if block.settings.image != blank -%}
|
||||
{%- liquid
|
||||
if section.settings.desktop_layout == 'left'
|
||||
assign large_block = forloop.first
|
||||
else
|
||||
assign large_block = forloop.last
|
||||
endif
|
||||
|
||||
assign grid_space_desktop = settings.spacing_grid_horizontal | divided_by: 2 | append: 'px'
|
||||
assign grid_space_mobile = settings.spacing_grid_horizontal | divided_by: 4 | append: 'px'
|
||||
-%}
|
||||
{%- if large_block -%}
|
||||
{%- capture sizes -%}
|
||||
{% if section.blocks.size == 1 -%}(min-width: {{ settings.page_width }}px) calc({{ settings.page_width }}px - 100px){% else %}(min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - 100px) * 2 / 3 - {{ grid_space_desktop }}){% endif %},
|
||||
{% if section.blocks.size == 1 -%}(min-width: 750px) calc(100vw - 100px){% else %}(min-width: 750px) calc((100vw - 100px) * 2 / 3 - {{ grid_space_desktop }}){% endif %},
|
||||
{% if section.blocks.size == 2 and section.settings.mobile_layout == 'collage' -%}calc((100vw - 30px) / 2){% else %}calc(100vw - 30px){% endif %}
|
||||
{%- endcapture -%}
|
||||
{{
|
||||
block.settings.image
|
||||
| image_url: width: 3200
|
||||
| image_tag:
|
||||
sizes: sizes,
|
||||
widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200'
|
||||
}}
|
||||
{%- else -%}
|
||||
{%- capture sizes -%}
|
||||
(min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - 100px) * 1 / 3 - {{ grid_space_desktop }}),
|
||||
(min-width: 750px) calc((100vw - 100px) * 1 / 3 - {{ grid_space_desktop }}),
|
||||
{% if section.settings.mobile_layout == 'collage' %}calc((100vw - 30px) / 2 - {{ grid_space_mobile }}){% else %}calc(100vw - 30px){% endif %}
|
||||
{%- endcapture -%}
|
||||
{{
|
||||
block.settings.image
|
||||
| image_url: width: 3200
|
||||
| image_tag:
|
||||
sizes: sizes,
|
||||
widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200'
|
||||
}}
|
||||
{%- endif -%}
|
||||
{%- else -%}
|
||||
{{ 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
{%- when 'product' -%}
|
||||
{%- assign placeholder_image = 'product-apparel-' | append: placeholder_image_index -%}
|
||||
{% render 'card-product',
|
||||
card_product: block.settings.product,
|
||||
media_aspect_ratio: 'adapt',
|
||||
show_secondary_image: block.settings.second_image,
|
||||
extend_height: true,
|
||||
placeholder_image: placeholder_image,
|
||||
skip_styles: skip_card_product_styles
|
||||
%}
|
||||
{% assign skip_card_product_styles = true %}
|
||||
{%- when 'collection' -%}
|
||||
{%- assign placeholder_image = 'collection-apparel-' | append: placeholder_image_index -%}
|
||||
{% render 'card-collection',
|
||||
card_collection: block.settings.collection,
|
||||
media_aspect_ratio: 'adapt',
|
||||
columns: 2,
|
||||
extend_height: true,
|
||||
wrapper_class: section.settings.card_styles,
|
||||
placeholder_image: placeholder_image
|
||||
%}
|
||||
{%- when 'video' -%}
|
||||
<div class="collage-card {% if section.settings.card_styles == 'none' %}global-media-settings{% else %}{{ section.settings.card_styles }} color-{{ settings.card_color_scheme }} gradient{% endif %}">
|
||||
<modal-opener data-modal="#PopupModal-{{ block.id }}">
|
||||
<div class="deferred-media">
|
||||
<button
|
||||
class="deferred-media__poster full-unstyled-link"
|
||||
type="button"
|
||||
aria-label="{{ 'sections.video.load_video' | t: description: block.settings.description | escape }}"
|
||||
aria-haspopup="dialog"
|
||||
data-media-id="{{ block.settings.video_url.id }}"
|
||||
>
|
||||
<div
|
||||
class="media media--transparent ratio"
|
||||
{% if block.settings.cover_image != blank %}
|
||||
style="--ratio-percent: {{ 1 | divided_by: block.settings.cover_image.aspect_ratio | times: 100 }}%"
|
||||
{% else %}
|
||||
style="--ratio-percent: 100%"
|
||||
{% endif %}
|
||||
>
|
||||
<span class="deferred-media__poster-button motion-reduce">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-play.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{%- if block.settings.cover_image != blank -%}
|
||||
{%- capture sizes -%}
|
||||
(min-width: {{ settings.page_width }}px)
|
||||
{% if section.blocks.size == 1 -%}
|
||||
calc({{ settings.page_width }}px - 100px)
|
||||
{%- else -%}
|
||||
{{- settings.page_width | minus: 100 | times: 0.67 | round }}px
|
||||
{%- endif -%}
|
||||
, (min-width: 750px)
|
||||
{%- if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif -%}
|
||||
, calc(100vw - 30px)
|
||||
{%- endcapture -%}
|
||||
{{
|
||||
block.settings.cover_image
|
||||
| image_url: width: 3000
|
||||
| image_tag: sizes: sizes, widths: '550, 720, 990, 1100, 1500, 2200, 3000'
|
||||
}}
|
||||
{%- else -%}
|
||||
{{ 'hero-apparel-3' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</modal-opener>
|
||||
<modal-dialog
|
||||
id="PopupModal-{{ block.id }}"
|
||||
class="modal-video media-modal color-{{ settings.color_schemes | first }}"
|
||||
>
|
||||
<div
|
||||
class="modal-video__content"
|
||||
role="dialog"
|
||||
aria-label="{{ block.settings.description | escape }}"
|
||||
aria-modal="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
<button
|
||||
id="ModalClose-{{ block.id }}"
|
||||
type="button"
|
||||
class="modal-video__toggle"
|
||||
aria-label="{{ 'accessibility.close' | t }}"
|
||||
>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-close.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</button>
|
||||
<div class="modal-video__content-info">
|
||||
<deferred-media class="modal-video__video template-popup">
|
||||
<template>
|
||||
{%- if block.settings.video_url.type == 'youtube' -%}
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/{{ block.settings.video_url.id }}?enablejsapi=1"
|
||||
class="js-youtube"
|
||||
allow="autoplay; encrypted-media"
|
||||
allowfullscreen
|
||||
title="{{ block.settings.description | escape }}"
|
||||
></iframe>
|
||||
{%- else -%}
|
||||
<iframe
|
||||
src="https://player.vimeo.com/video/{{ block.settings.video_url.id }}"
|
||||
class="js-vimeo"
|
||||
allow="autoplay; encrypted-media"
|
||||
allowfullscreen
|
||||
title="{{ block.settings.description | escape }}"
|
||||
></iframe>
|
||||
{%- endif -%}
|
||||
</template>
|
||||
</deferred-media>
|
||||
</div>
|
||||
</div>
|
||||
</modal-dialog>
|
||||
</div>
|
||||
{%- endcase -%}
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.collage.name",
|
||||
"tag": "section",
|
||||
"class": "section",
|
||||
"disabled_on": {
|
||||
"groups": ["header", "footer"]
|
||||
},
|
||||
"settings": [
|
||||
{
|
||||
"type": "inline_richtext",
|
||||
"id": "heading",
|
||||
"default": "t:sections.collage.settings.heading.default",
|
||||
"label": "t:sections.collage.settings.heading.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "heading_size",
|
||||
"options": [
|
||||
{
|
||||
"value": "h2",
|
||||
"label": "t:sections.all.heading_size.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "h1",
|
||||
"label": "t:sections.all.heading_size.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "h0",
|
||||
"label": "t:sections.all.heading_size.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "hxl",
|
||||
"label": "t:sections.all.heading_size.options__4.label"
|
||||
},
|
||||
{
|
||||
"value": "hxxl",
|
||||
"label": "t:sections.all.heading_size.options__5.label"
|
||||
}
|
||||
],
|
||||
"default": "h1",
|
||||
"label": "t:sections.all.heading_size.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.collage.settings.header_layout.content"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "desktop_layout",
|
||||
"options": [
|
||||
{
|
||||
"value": "left",
|
||||
"label": "t:sections.collage.settings.desktop_layout.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "right",
|
||||
"label": "t:sections.collage.settings.desktop_layout.options__2.label"
|
||||
}
|
||||
],
|
||||
"default": "left",
|
||||
"label": "t:sections.collage.settings.desktop_layout.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "mobile_layout",
|
||||
"options": [
|
||||
{
|
||||
"value": "collage",
|
||||
"label": "t:sections.collage.settings.mobile_layout.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "column",
|
||||
"label": "t:sections.collage.settings.mobile_layout.options__2.label"
|
||||
}
|
||||
],
|
||||
"default": "column",
|
||||
"label": "t:sections.collage.settings.mobile_layout.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "card_styles",
|
||||
"options": [
|
||||
{
|
||||
"value": "none",
|
||||
"label": "t:sections.collage.settings.card_styles.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "product-card-wrapper",
|
||||
"label": "t:sections.collage.settings.card_styles.options__2.label"
|
||||
}
|
||||
],
|
||||
"default": "product-card-wrapper",
|
||||
"info": "t:sections.collage.settings.card_styles.info",
|
||||
"label": "t:sections.collage.settings.card_styles.label"
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"info": "t:sections.all.colors.has_cards_info",
|
||||
"default": "scheme-1"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 36
|
||||
}
|
||||
],
|
||||
"blocks": [
|
||||
{
|
||||
"type": "image",
|
||||
"name": "t:sections.collage.blocks.image.name",
|
||||
"settings": [
|
||||
{
|
||||
"type": "image_picker",
|
||||
"id": "image",
|
||||
"label": "t:sections.collage.blocks.image.settings.image.label"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "product",
|
||||
"name": "t:sections.collage.blocks.product.name",
|
||||
"settings": [
|
||||
{
|
||||
"type": "product",
|
||||
"id": "product",
|
||||
"label": "t:sections.collage.blocks.product.settings.product.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "second_image",
|
||||
"default": false,
|
||||
"label": "t:sections.collage.blocks.product.settings.second_image.label"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "collection",
|
||||
"name": "t:sections.collage.blocks.collection.name",
|
||||
"settings": [
|
||||
{
|
||||
"type": "collection",
|
||||
"id": "collection",
|
||||
"label": "t:sections.collage.blocks.collection.settings.collection.label"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "video",
|
||||
"name": "t:sections.collage.blocks.video.name",
|
||||
"settings": [
|
||||
{
|
||||
"type": "image_picker",
|
||||
"id": "cover_image",
|
||||
"label": "t:sections.collage.blocks.video.settings.cover_image.label"
|
||||
},
|
||||
{
|
||||
"type": "video_url",
|
||||
"id": "video_url",
|
||||
"accept": ["youtube", "vimeo"],
|
||||
"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
|
||||
"label": "t:sections.collage.blocks.video.settings.video_url.label",
|
||||
"placeholder": "t:sections.collage.blocks.video.settings.video_url.placeholder",
|
||||
"info": "t:sections.collage.blocks.video.settings.video_url.info"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "description",
|
||||
"default": "t:sections.collage.blocks.video.settings.description.default",
|
||||
"label": "t:sections.collage.blocks.video.settings.description.label",
|
||||
"info": "t:sections.collage.blocks.video.settings.description.info"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"max_blocks": 3,
|
||||
"presets": [
|
||||
{
|
||||
"name": "t:sections.collage.presets.name",
|
||||
"blocks": [
|
||||
{
|
||||
"type": "image"
|
||||
},
|
||||
{
|
||||
"type": "product"
|
||||
},
|
||||
{
|
||||
"type": "collection"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,517 @@
|
||||
{{ 'component-accordion.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'collapsible-content.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
<div class="color-{{ section.settings.color_scheme }} gradient">
|
||||
<div class="collapsible-content collapsible-{{ section.settings.layout }}-layout isolate{% if section.settings.layout == 'section' %} page-width{% elsif section.settings.layout == 'none' %} content-container content-container--full-width{% endif %}">
|
||||
<div class="collapsible-content__wrapper section-{{ section.id }}-padding{% if section.settings.layout == 'section' %} content-container color-{{ section.settings.container_color_scheme }} gradient{% endif %}">
|
||||
<div class="{% if section.settings.image == blank %}collapsible-content-wrapper-narrow{% else %}page-width{% endif %}">
|
||||
<div
|
||||
class="collapsible-content__header{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
style="text-align: {{ section.settings.heading_alignment }};"
|
||||
>
|
||||
{%- if section.settings.caption != blank -%}
|
||||
<p class="caption-with-letter-spacing">
|
||||
{{ section.settings.caption | escape }}
|
||||
</p>
|
||||
{% endif %}
|
||||
{%- if section.settings.heading != blank -%}
|
||||
<h2 class="collapsible-content__heading inline-richtext {{ section.settings.heading_size }}">
|
||||
{{ section.settings.heading }}
|
||||
</h2>
|
||||
{%- else -%}
|
||||
<h2 class="visually-hidden">{{ 'accessibility.collapsible_content_title' | t }}</h2>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="grid grid--1-col grid--2-col-tablet collapsible-content__grid{% if section.settings.desktop_layout == 'image_second' %} collapsible-content__grid--reverse{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
|
||||
{%- if section.settings.image != blank -%}
|
||||
<div class="grid__item collapsible-content__grid-item">
|
||||
<div
|
||||
class="collapsible-content__media collapsible-content__media--{{ section.settings.image_ratio }} media global-media-settings gradient"
|
||||
{% if section.settings.image_ratio == 'adapt' %}
|
||||
style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"
|
||||
{% endif %}
|
||||
>
|
||||
{%- liquid
|
||||
assign padding_multiplier = 1
|
||||
if section.settings.layout == 'section'
|
||||
assign padding_multiplier = 2
|
||||
endif
|
||||
assign desktop_tablet_padding = 100 | times: padding_multiplier | append: 'px'
|
||||
assign mobile_padding = 30 | times: padding_multiplier | append: 'px'
|
||||
-%}
|
||||
{%- capture sizes -%}
|
||||
(min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - {{ desktop_tablet_padding }}) / 2),
|
||||
(min-width: 750px) calc((100vw - {{ desktop_tablet_padding }}) / 2),
|
||||
calc(100vw - {{ mobile_padding }})
|
||||
{%- endcapture -%}
|
||||
{{
|
||||
section.settings.image
|
||||
| image_url: width: 3200
|
||||
| image_tag:
|
||||
sizes: sizes,
|
||||
widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200'
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="grid__item">
|
||||
{%- for block in section.blocks -%}
|
||||
<div
|
||||
class="accordion{% if section.settings.layout == 'row' %} content-container color-{{ section.settings.container_color_scheme }} gradient{% endif %}"
|
||||
{{ block.shopify_attributes }}
|
||||
>
|
||||
<details
|
||||
id="Details-{{ block.id }}-{{ section.id }}"
|
||||
{% if section.settings.open_first_collapsible_row and forloop.first %}
|
||||
open
|
||||
{% endif %}
|
||||
>
|
||||
<summary id="Summary-{{ block.id }}-{{ section.id }}">
|
||||
{% render 'icon-accordion', icon: block.settings.icon %}
|
||||
<h3 class="accordion__title inline-richtext h4">
|
||||
{{ block.settings.heading | default: block.settings.page.title | escape }}
|
||||
</h3>
|
||||
{{- 'icon-caret.svg' | inline_asset_content -}}
|
||||
</summary>
|
||||
<div
|
||||
class="accordion__content rte"
|
||||
id="CollapsibleAccordion-{{ block.id }}-{{ section.id }}"
|
||||
role="region"
|
||||
aria-labelledby="Summary-{{ block.id }}-{{ section.id }}"
|
||||
>
|
||||
{{ block.settings.row_content }}
|
||||
{{ block.settings.page.content }}
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.collapsible_content.name",
|
||||
"tag": "section",
|
||||
"class": "section",
|
||||
"disabled_on": {
|
||||
"groups": ["header", "footer"]
|
||||
},
|
||||
"settings": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "caption",
|
||||
"label": "t:sections.collapsible_content.settings.caption.label"
|
||||
},
|
||||
{
|
||||
"type": "inline_richtext",
|
||||
"id": "heading",
|
||||
"label": "t:sections.collapsible_content.settings.heading.label",
|
||||
"default": "t:sections.collapsible_content.settings.heading.default"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "heading_size",
|
||||
"options": [
|
||||
{
|
||||
"value": "h2",
|
||||
"label": "t:sections.all.heading_size.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "h1",
|
||||
"label": "t:sections.all.heading_size.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "h0",
|
||||
"label": "t:sections.all.heading_size.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "hxl",
|
||||
"label": "t:sections.all.heading_size.options__4.label"
|
||||
},
|
||||
{
|
||||
"value": "hxxl",
|
||||
"label": "t:sections.all.heading_size.options__5.label"
|
||||
}
|
||||
],
|
||||
"default": "h1",
|
||||
"label": "t:sections.all.heading_size.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "heading_alignment",
|
||||
"label": "t:sections.collapsible_content.settings.heading_alignment.label",
|
||||
"options": [
|
||||
{
|
||||
"value": "left",
|
||||
"label": "t:sections.collapsible_content.settings.heading_alignment.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "center",
|
||||
"label": "t:sections.collapsible_content.settings.heading_alignment.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "right",
|
||||
"label": "t:sections.collapsible_content.settings.heading_alignment.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "center"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.collapsible_content.settings.layout_header.content"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "layout",
|
||||
"label": "t:sections.collapsible_content.settings.layout.label",
|
||||
"options": [
|
||||
{
|
||||
"value": "none",
|
||||
"label": "t:sections.collapsible_content.settings.layout.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "row",
|
||||
"label": "t:sections.collapsible_content.settings.layout.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "section",
|
||||
"label": "t:sections.collapsible_content.settings.layout.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "none"
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "container_color_scheme",
|
||||
"label": "t:sections.collapsible_content.settings.container_color_scheme.label",
|
||||
"default": "scheme-2"
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.collapsible_content.settings.section_color_scheme.label",
|
||||
"default": "scheme-1"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "open_first_collapsible_row",
|
||||
"default": false,
|
||||
"label": "t:sections.collapsible_content.settings.open_first_collapsible_row.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.collapsible_content.settings.header.content"
|
||||
},
|
||||
{
|
||||
"type": "image_picker",
|
||||
"id": "image",
|
||||
"label": "t:sections.collapsible_content.settings.image.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "image_ratio",
|
||||
"options": [
|
||||
{
|
||||
"value": "adapt",
|
||||
"label": "t:sections.collapsible_content.settings.image_ratio.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "small",
|
||||
"label": "t:sections.collapsible_content.settings.image_ratio.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "large",
|
||||
"label": "t:sections.collapsible_content.settings.image_ratio.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "adapt",
|
||||
"label": "t:sections.collapsible_content.settings.image_ratio.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "desktop_layout",
|
||||
"options": [
|
||||
{
|
||||
"value": "image_first",
|
||||
"label": "t:sections.collapsible_content.settings.desktop_layout.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "image_second",
|
||||
"label": "t:sections.collapsible_content.settings.desktop_layout.options__2.label"
|
||||
}
|
||||
],
|
||||
"default": "image_second",
|
||||
"label": "t:sections.collapsible_content.settings.desktop_layout.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 36
|
||||
}
|
||||
],
|
||||
"blocks": [
|
||||
{
|
||||
"type": "collapsible_row",
|
||||
"name": "t:sections.collapsible_content.blocks.collapsible_row.name",
|
||||
"settings": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "heading",
|
||||
"default": "t:sections.collapsible_content.blocks.collapsible_row.settings.heading.default",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.heading.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "icon",
|
||||
"options": [
|
||||
{
|
||||
"value": "none",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "apple",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "banana",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "bottle",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__4.label"
|
||||
},
|
||||
{
|
||||
"value": "box",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__5.label"
|
||||
},
|
||||
{
|
||||
"value": "carrot",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__6.label"
|
||||
},
|
||||
{
|
||||
"value": "chat_bubble",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__7.label"
|
||||
},
|
||||
{
|
||||
"value": "check_mark",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__8.label"
|
||||
},
|
||||
{
|
||||
"value": "clipboard",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__9.label"
|
||||
},
|
||||
{
|
||||
"value": "dairy",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__10.label"
|
||||
},
|
||||
{
|
||||
"value": "dairy_free",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__11.label"
|
||||
},
|
||||
{
|
||||
"value": "dryer",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__12.label"
|
||||
},
|
||||
{
|
||||
"value": "eye",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__13.label"
|
||||
},
|
||||
{
|
||||
"value": "fire",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__14.label"
|
||||
},
|
||||
{
|
||||
"value": "gluten_free",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__15.label"
|
||||
},
|
||||
{
|
||||
"value": "heart",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__16.label"
|
||||
},
|
||||
{
|
||||
"value": "iron",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__17.label"
|
||||
},
|
||||
{
|
||||
"value": "leaf",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__18.label"
|
||||
},
|
||||
{
|
||||
"value": "leather",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__19.label"
|
||||
},
|
||||
{
|
||||
"value": "lightning_bolt",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__20.label"
|
||||
},
|
||||
{
|
||||
"value": "lipstick",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__21.label"
|
||||
},
|
||||
{
|
||||
"value": "lock",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__22.label"
|
||||
},
|
||||
{
|
||||
"value": "map_pin",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__23.label"
|
||||
},
|
||||
{
|
||||
"value": "nut_free",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__24.label"
|
||||
},
|
||||
{
|
||||
"value": "pants",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__25.label"
|
||||
},
|
||||
{
|
||||
"value": "paw_print",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__26.label"
|
||||
},
|
||||
{
|
||||
"value": "pepper",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__27.label"
|
||||
},
|
||||
{
|
||||
"value": "perfume",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__28.label"
|
||||
},
|
||||
{
|
||||
"value": "plane",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__29.label"
|
||||
},
|
||||
{
|
||||
"value": "plant",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__30.label"
|
||||
},
|
||||
{
|
||||
"value": "price_tag",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__31.label"
|
||||
},
|
||||
{
|
||||
"value": "question_mark",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__32.label"
|
||||
},
|
||||
{
|
||||
"value": "recycle",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__33.label"
|
||||
},
|
||||
{
|
||||
"value": "return",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__34.label"
|
||||
},
|
||||
{
|
||||
"value": "ruler",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__35.label"
|
||||
},
|
||||
{
|
||||
"value": "serving_dish",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__36.label"
|
||||
},
|
||||
{
|
||||
"value": "shirt",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__37.label"
|
||||
},
|
||||
{
|
||||
"value": "shoe",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__38.label"
|
||||
},
|
||||
{
|
||||
"value": "silhouette",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__39.label"
|
||||
},
|
||||
{
|
||||
"value": "snowflake",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__40.label"
|
||||
},
|
||||
{
|
||||
"value": "star",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__41.label"
|
||||
},
|
||||
{
|
||||
"value": "stopwatch",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__42.label"
|
||||
},
|
||||
{
|
||||
"value": "truck",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__43.label"
|
||||
},
|
||||
{
|
||||
"value": "washing",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__44.label"
|
||||
}
|
||||
],
|
||||
"default": "check_mark",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.label"
|
||||
},
|
||||
{
|
||||
"type": "richtext",
|
||||
"id": "row_content",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.row_content.label"
|
||||
},
|
||||
{
|
||||
"type": "page",
|
||||
"id": "page",
|
||||
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.page.label"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "t:sections.collapsible_content.presets.name",
|
||||
"blocks": [
|
||||
{
|
||||
"type": "collapsible_row"
|
||||
},
|
||||
{
|
||||
"type": "collapsible_row"
|
||||
},
|
||||
{
|
||||
"type": "collapsible_row"
|
||||
},
|
||||
{
|
||||
"type": "collapsible_row"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,308 @@
|
||||
{{ 'section-collection-list.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-card.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
{%- liquid
|
||||
assign columns_mobile_int = section.settings.columns_mobile | plus: 0
|
||||
assign show_mobile_slider = false
|
||||
if section.settings.swipe_on_mobile and section.blocks.size > columns_mobile_int
|
||||
assign show_mobile_slider = true
|
||||
endif
|
||||
-%}
|
||||
|
||||
<div class="color-{{ section.settings.color_scheme }} gradient">
|
||||
<div class="collection-list-wrapper page-width isolate{% if show_mobile_slider %} page-width-desktop{% endif %}{% if section.settings.title == blank %} no-heading{% endif %}{% if section.settings.show_view_all == false or section.blocks.size > collections.size %} no-mobile-link{% endif %} section-{{ section.id }}-padding">
|
||||
{%- unless section.settings.title == blank -%}
|
||||
<div class="title-wrapper-with-link{% if show_mobile_slider %} title-wrapper--self-padded-tablet-down{% else %} title-wrapper--self-padded-mobile{% endif %} title-wrapper--no-top-margin">
|
||||
<h2
|
||||
id="SectionHeading-{{ section.id }}"
|
||||
class="collection-list-title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
>
|
||||
{{ section.settings.title }}
|
||||
</h2>
|
||||
|
||||
{%- if section.settings.show_view_all and show_mobile_slider -%}
|
||||
<a
|
||||
href="{{ routes.collections_url }}"
|
||||
id="ViewAll-{{ section.id }}"
|
||||
class="link underlined-link large-up-hide{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
aria-labelledby="ViewAll-{{ section.id }} SectionHeading-{{ section.id }}"
|
||||
>
|
||||
{{- 'sections.collection_list.view_all' | t -}}
|
||||
</a>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- endunless -%}
|
||||
|
||||
<slider-component class="slider-mobile-gutter{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
|
||||
<ul
|
||||
class="collection-list contains-card contains-card--collection{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down{% if section.settings.swipe_on_mobile %} slider slider--tablet grid--peek{% endif %} collection-list--{{ section.blocks.size }}-items"
|
||||
id="Slider-{{ section.id }}"
|
||||
role="list"
|
||||
>
|
||||
{%- liquid
|
||||
assign columns = section.blocks.size
|
||||
if columns > 3
|
||||
assign columns = 3
|
||||
endif
|
||||
-%}
|
||||
{%- for block in section.blocks -%}
|
||||
<li
|
||||
id="Slide-{{ section.id }}-{{ forloop.index }}"
|
||||
class="collection-list__item grid__item{% if show_mobile_slider %} slider__slide{% endif %}{% if block.settings.collection.featured_image == nil %} collection-list__item--no-media{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{{ block.shopify_attributes }}
|
||||
{% if settings.animations_reveal_on_scroll %}
|
||||
data-cascade
|
||||
style="--animation-order: {{ forloop.index }};"
|
||||
{% endif %}
|
||||
>
|
||||
{%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}
|
||||
{%- assign placeholder_image = 'collection-apparel-' | append: placeholder_image_index -%}
|
||||
{% render 'card-collection',
|
||||
card_collection: block.settings.collection,
|
||||
media_aspect_ratio: section.settings.image_ratio,
|
||||
columns: columns,
|
||||
placeholder_image: placeholder_image
|
||||
%}
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
{%- if show_mobile_slider -%}
|
||||
<div class="slider-buttons">
|
||||
<button
|
||||
type="button"
|
||||
class="slider-button slider-button--prev"
|
||||
name="previous"
|
||||
aria-label="{{ 'general.slider.previous_slide' | t }}"
|
||||
>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-caret.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</button>
|
||||
<div class="slider-counter caption">
|
||||
<span class="slider-counter--current">1</span>
|
||||
<span aria-hidden="true"> / </span>
|
||||
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
|
||||
<span class="slider-counter--total">{{ section.blocks.size }}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="slider-button slider-button--next"
|
||||
name="next"
|
||||
aria-label="{{ 'general.slider.next_slide' | t }}"
|
||||
>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-caret.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</slider-component>
|
||||
|
||||
{%- if section.settings.show_view_all and section.blocks.size < collections.size -%}
|
||||
<div
|
||||
class="center collection-list-view-all{% if show_mobile_slider %} small-hide medium-hide{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{% if settings.animations_reveal_on_scroll %}
|
||||
data-cascade
|
||||
{% endif %}
|
||||
>
|
||||
<a
|
||||
href="{{ routes.collections_url }}"
|
||||
class="button"
|
||||
id="ViewAllButton-{{ section.id }}"
|
||||
aria-labelledby="ViewAllButton-{{ section.id }} SectionHeading-{{ section.id }}"
|
||||
>
|
||||
{{- 'sections.collection_list.view_all' | t -}}
|
||||
</a>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.collection-list.name",
|
||||
"tag": "section",
|
||||
"class": "section section-collection-list",
|
||||
"max_blocks": 15,
|
||||
"disabled_on": {
|
||||
"groups": ["header", "footer"]
|
||||
},
|
||||
"settings": [
|
||||
{
|
||||
"type": "inline_richtext",
|
||||
"id": "title",
|
||||
"default": "t:sections.collection-list.settings.title.default",
|
||||
"label": "t:sections.collection-list.settings.title.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "heading_size",
|
||||
"options": [
|
||||
{
|
||||
"value": "h2",
|
||||
"label": "t:sections.all.heading_size.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "h1",
|
||||
"label": "t:sections.all.heading_size.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "h0",
|
||||
"label": "t:sections.all.heading_size.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "hxl",
|
||||
"label": "t:sections.all.heading_size.options__4.label"
|
||||
},
|
||||
{
|
||||
"value": "hxxl",
|
||||
"label": "t:sections.all.heading_size.options__5.label"
|
||||
}
|
||||
],
|
||||
"default": "h1",
|
||||
"label": "t:sections.all.heading_size.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.collection-list.settings.header_layout.content"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "image_ratio",
|
||||
"options": [
|
||||
{
|
||||
"value": "adapt",
|
||||
"label": "t:sections.collection-list.settings.image_ratio.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "portrait",
|
||||
"label": "t:sections.collection-list.settings.image_ratio.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "square",
|
||||
"label": "t:sections.collection-list.settings.image_ratio.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "square",
|
||||
"label": "t:sections.collection-list.settings.image_ratio.label"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "columns_desktop",
|
||||
"min": 1,
|
||||
"max": 6,
|
||||
"step": 1,
|
||||
"default": 3,
|
||||
"label": "t:sections.collection-list.settings.columns_desktop.label"
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"info": "t:sections.all.colors.has_cards_info",
|
||||
"default": "scheme-1"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_view_all",
|
||||
"default": false,
|
||||
"label": "t:sections.collection-list.settings.show_view_all.label",
|
||||
"info": "t:sections.collection-list.settings.show_view_all.info"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.collection-list.settings.header_mobile.content"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "columns_mobile",
|
||||
"options": [
|
||||
{
|
||||
"value": "1",
|
||||
"label": "t:sections.collection-list.settings.columns_mobile.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "2",
|
||||
"label": "t:sections.collection-list.settings.columns_mobile.options__2.label"
|
||||
}
|
||||
],
|
||||
"default": "1",
|
||||
"label": "t:sections.collection-list.settings.columns_mobile.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "swipe_on_mobile",
|
||||
"default": false,
|
||||
"label": "t:sections.collection-list.settings.swipe_on_mobile.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 36
|
||||
}
|
||||
],
|
||||
"blocks": [
|
||||
{
|
||||
"type": "featured_collection",
|
||||
"name": "t:sections.collection-list.blocks.featured_collection.name",
|
||||
"settings": [
|
||||
{
|
||||
"type": "collection",
|
||||
"id": "collection",
|
||||
"label": "t:sections.collection-list.blocks.featured_collection.settings.collection.label"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "t:sections.collection-list.presets.name",
|
||||
"blocks": [
|
||||
{
|
||||
"type": "featured_collection"
|
||||
},
|
||||
{
|
||||
"type": "featured_collection"
|
||||
},
|
||||
{
|
||||
"type": "featured_collection"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,218 @@
|
||||
{{ 'section-contact-form.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
<div class="color-{{ section.settings.color_scheme }} gradient">
|
||||
<div class="contact page-width page-width--narrow section-{{ section.id }}-padding">
|
||||
{%- if section.settings.heading != blank -%}
|
||||
<h2 class="title title-wrapper--no-top-margin inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
|
||||
{{ section.settings.heading }}
|
||||
</h2>
|
||||
{%- else -%}
|
||||
<h2 class="visually-hidden">{{ 'templates.contact.form.title' | t }}</h2>
|
||||
{%- endif -%}
|
||||
{%- liquid
|
||||
assign contact_form_class = 'isolate'
|
||||
if settings.animations_reveal_on_scroll
|
||||
assign contact_form_class = 'isolate scroll-trigger animate--slide-in'
|
||||
endif
|
||||
-%}
|
||||
{%- form 'contact', id: 'ContactForm', class: contact_form_class -%}
|
||||
{%- if form.posted_successfully? -%}
|
||||
<h2 class="form-status form-status-list form__message" tabindex="-1" autofocus>
|
||||
{{- 'icon-success.svg' | inline_asset_content -}}
|
||||
{{ 'templates.contact.form.post_success' | t }}
|
||||
</h2>
|
||||
{%- elsif form.errors -%}
|
||||
<div class="form__message">
|
||||
<h2 class="form-status caption-large text-body" role="alert" tabindex="-1" autofocus>
|
||||
{{- 'icon-error.svg' | inline_asset_content -}}
|
||||
{{ 'templates.contact.form.error_heading' | t }}
|
||||
</h2>
|
||||
</div>
|
||||
<ul class="form-status-list caption-large" role="list">
|
||||
<li>
|
||||
<a href="#ContactForm-email" class="link">
|
||||
{{ form.errors.translated_fields.email | capitalize }}
|
||||
{{ form.errors.messages.email }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
{%- endif -%}
|
||||
<div class="contact__fields">
|
||||
<div class="field">
|
||||
<input
|
||||
class="field__input"
|
||||
autocomplete="name"
|
||||
type="text"
|
||||
id="ContactForm-name"
|
||||
name="contact[{{ 'templates.contact.form.name' | t }}]"
|
||||
value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
|
||||
placeholder="{{ 'templates.contact.form.name' | t }}"
|
||||
>
|
||||
<label class="field__label" for="ContactForm-name">{{ 'templates.contact.form.name' | t }}</label>
|
||||
</div>
|
||||
<div class="field field--with-error">
|
||||
<input
|
||||
autocomplete="email"
|
||||
type="email"
|
||||
id="ContactForm-email"
|
||||
class="field__input"
|
||||
name="contact[email]"
|
||||
spellcheck="false"
|
||||
autocapitalize="off"
|
||||
value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
|
||||
aria-required="true"
|
||||
{% if form.errors contains 'email' %}
|
||||
aria-invalid="true"
|
||||
aria-describedby="ContactForm-email-error"
|
||||
{% endif %}
|
||||
placeholder="{{ 'templates.contact.form.email' | t }}"
|
||||
>
|
||||
<label class="field__label" for="ContactForm-email">
|
||||
{{- 'templates.contact.form.email' | t }}
|
||||
<span aria-hidden="true">*</span></label
|
||||
>
|
||||
{%- if form.errors contains 'email' -%}
|
||||
<small class="contact__field-error" id="ContactForm-email-error">
|
||||
<span class="visually-hidden">{{ 'accessibility.error' | t }}</span>
|
||||
<span class="form__message">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-error.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{- form.errors.translated_fields.email | capitalize }}
|
||||
{{ form.errors.messages.email -}}
|
||||
</span>
|
||||
</small>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<input
|
||||
type="tel"
|
||||
id="ContactForm-phone"
|
||||
class="field__input"
|
||||
autocomplete="tel"
|
||||
name="contact[{{ 'templates.contact.form.phone' | t }}]"
|
||||
pattern="[0-9\-]*"
|
||||
value="{% if form.phone %}{{ form.phone }}{% elsif customer %}{{ customer.phone }}{% endif %}"
|
||||
placeholder="{{ 'templates.contact.form.phone' | t }}"
|
||||
>
|
||||
<label class="field__label" for="ContactForm-phone">{{ 'templates.contact.form.phone' | t }}</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<textarea
|
||||
rows="10"
|
||||
id="ContactForm-body"
|
||||
class="text-area field__input"
|
||||
name="contact[{{ 'templates.contact.form.comment' | t }}]"
|
||||
placeholder="{{ 'templates.contact.form.comment' | t }}"
|
||||
>
|
||||
{{- form.body -}}
|
||||
</textarea>
|
||||
<label class="form__label field__label" for="ContactForm-body">
|
||||
{{- 'templates.contact.form.comment' | t -}}
|
||||
</label>
|
||||
</div>
|
||||
<div class="contact__button">
|
||||
<button type="submit" class="button">
|
||||
{{ 'templates.contact.form.send' | t }}
|
||||
</button>
|
||||
</div>
|
||||
{%- endform -%}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.contact-form.name",
|
||||
"tag": "section",
|
||||
"class": "section",
|
||||
"disabled_on": {
|
||||
"groups": ["header", "footer"]
|
||||
},
|
||||
"settings": [
|
||||
{
|
||||
"type": "inline_richtext",
|
||||
"id": "heading",
|
||||
"default": "t:sections.contact-form.settings.title.default",
|
||||
"label": "t:sections.contact-form.settings.title.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "heading_size",
|
||||
"options": [
|
||||
{
|
||||
"value": "h2",
|
||||
"label": "t:sections.all.heading_size.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "h1",
|
||||
"label": "t:sections.all.heading_size.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "h0",
|
||||
"label": "t:sections.all.heading_size.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "hxl",
|
||||
"label": "t:sections.all.heading_size.options__4.label"
|
||||
},
|
||||
{
|
||||
"value": "hxxl",
|
||||
"label": "t:sections.all.heading_size.options__5.label"
|
||||
}
|
||||
],
|
||||
"default": "h1",
|
||||
"label": "t:sections.all.heading_size.label"
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"default": "scheme-1"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 36
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "t:sections.contact-form.presets.name"
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,69 @@
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: calc({{ section.settings.padding_top }}px * 0.75);
|
||||
padding-bottom: calc({{ section.settings.padding_bottom }}px * 0.75);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
<div class="color-{{ section.settings.color_scheme }} gradient">
|
||||
<div class="section-{{ section.id }}-padding">
|
||||
{{ section.settings.custom_liquid }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.custom-liquid.name",
|
||||
"tag": "section",
|
||||
"class": "section",
|
||||
"settings": [
|
||||
{
|
||||
"type": "liquid",
|
||||
"id": "custom_liquid",
|
||||
"label": "t:sections.custom-liquid.settings.custom_liquid.label",
|
||||
"info": "t:sections.custom-liquid.settings.custom_liquid.info"
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"default": "scheme-1"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 40
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 52
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "t:sections.custom-liquid.presets.name"
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,113 @@
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
{%- capture disclosures_content -%}
|
||||
{%- render 'product-disclosures',
|
||||
product: product,
|
||||
heading: section.settings.heading,
|
||||
heading_size: section.settings.heading_size,
|
||||
open_by_default: section.settings.open_by_default,
|
||||
surface: 'product_page'
|
||||
-%}
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- unless disclosures_content == blank -%}
|
||||
<div class="color-{{ section.settings.color_scheme }} gradient">
|
||||
<div class="page-width section-{{ section.id }}-padding">
|
||||
{{ disclosures_content }}
|
||||
</div>
|
||||
</div>
|
||||
{%- endunless -%}
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.disclosures.name",
|
||||
"enabled_on": {
|
||||
"templates": ["product"]
|
||||
},
|
||||
"settings": [
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": "t:sections.disclosures.settings.paragraph.content"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "heading",
|
||||
"label": "t:sections.disclosures.settings.heading.label",
|
||||
"default": "t:sections.disclosures.name"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "heading_size",
|
||||
"options": [
|
||||
{
|
||||
"value": "h2",
|
||||
"label": "t:sections.all.heading_size.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "h1",
|
||||
"label": "t:sections.all.heading_size.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "h0",
|
||||
"label": "t:sections.all.heading_size.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "h2",
|
||||
"label": "t:sections.all.heading_size.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "open_by_default",
|
||||
"label": "t:sections.disclosures.settings.open_by_default.label",
|
||||
"default": false
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"default": "scheme-1"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 36
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "t:sections.disclosures.name"
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,409 @@
|
||||
{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'newsletter-section.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'section-email-signup-banner.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- style -%}
|
||||
#Banner-{{ section.id }}::after {
|
||||
opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
|
||||
}
|
||||
|
||||
{%- if section.settings.image_height == 'adapt-image' and section.settings.image != blank -%}
|
||||
@media screen and (max-width: 749px) {
|
||||
#Banner-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
|
||||
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#Banner-{{ section.id }}::before,
|
||||
#Banner-{{ section.id }} .banner__media::before {
|
||||
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
{%- endif -%}
|
||||
{%- endstyle -%}
|
||||
|
||||
<div
|
||||
id="Banner-{{ section.id }}"
|
||||
class="email-signup-banner banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.image_height == 'adapt-image' and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}"
|
||||
>
|
||||
{%- if section.settings.show_background_image -%}
|
||||
<div class="banner__media{% if section.settings.image != blank %} media{% endif %}">
|
||||
{%- if section.settings.image != blank -%}
|
||||
<img
|
||||
srcset="
|
||||
{%- if section.settings.image.width >= 375 -%}{{ section.settings.image | image_url: width: 375 }} 375w,{%- endif -%}
|
||||
{%- if section.settings.image.width >= 750 -%}{{ section.settings.image | image_url: width: 750 }} 750w,{%- endif -%}
|
||||
{%- if section.settings.image.width >= 1100 -%}{{ section.settings.image | image_url: width: 1100 }} 1100w,{%- endif -%}
|
||||
{%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | image_url: width: 1500 }} 1500w,{%- endif -%}
|
||||
{%- if section.settings.image.width >= 1780 -%}{{ section.settings.image | image_url: width: 1780 }} 1780w,{%- endif -%}
|
||||
{%- if section.settings.image.width >= 2000 -%}{{ section.settings.image | image_url: width: 2000 }} 2000w,{%- endif -%}
|
||||
{%- if section.settings.image.width >= 3000 -%}{{ section.settings.image | image_url: width: 3000 }} 3000w,{%- endif -%}
|
||||
{%- if section.settings.image.width >= 3840 -%}{{ section.settings.image | image_url: width: 3840 }} 3840w,{%- endif -%}
|
||||
{{ section.settings.image | image_url }} {{ section.settings.image.width }}w
|
||||
"
|
||||
sizes="100vw"
|
||||
src="{{ section.settings.image | image_url: width: 1500 }}"
|
||||
loading="lazy"
|
||||
alt="{{ section.settings.image.alt | escape }}"
|
||||
width="{{ section.settings.image.width }}"
|
||||
height="{{ section.settings.image.width | divided_by: section.settings.image.aspect_ratio }}"
|
||||
>
|
||||
{%- else -%}
|
||||
{{- 'email-signup-banner-background.svg' | inline_asset_content -}}
|
||||
{{- 'email-signup-banner-background-mobile.svg' | inline_asset_content -}}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
<div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width">
|
||||
<div class="email-signup-banner__box banner__box newsletter newsletter__wrapper isolate{% if section.settings.show_background_image == false %} email-signup-banner__box--no-image{% endif %} content-container color-{{ section.settings.color_scheme }} gradient content-container--full-width-mobile">
|
||||
{%- for block in section.blocks -%}
|
||||
{%- case block.type -%}
|
||||
{%- when 'heading' -%}
|
||||
<h2 class="email-signup-banner__heading {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
|
||||
{{ block.settings.heading | escape }}
|
||||
</h2>
|
||||
{%- when 'paragraph' -%}
|
||||
<div class="newsletter__subheading rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
|
||||
{{ block.settings.text }}
|
||||
</div>
|
||||
{%- when 'email_form' -%}
|
||||
<div {{ block.shopify_attributes }}>
|
||||
{% form 'customer', class: 'newsletter-form' %}
|
||||
<input type="hidden" name="contact[tags]" value="newsletter">
|
||||
<div class="newsletter-form__field-wrapper">
|
||||
<div class="field">
|
||||
<input
|
||||
id="NewsletterForm--{{ section.id }}"
|
||||
type="email"
|
||||
name="contact[email]"
|
||||
class="field__input"
|
||||
value="{{ form.email }}"
|
||||
aria-required="true"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
autocomplete="email"
|
||||
{% if form.errors %}
|
||||
autofocus
|
||||
aria-invalid="true"
|
||||
aria-describedby="Newsletter-error--{{ section.id }}"
|
||||
{% elsif form.posted_successfully? %}
|
||||
aria-describedby="Newsletter-success--{{ section.id }}"
|
||||
{% endif %}
|
||||
placeholder="{{ 'newsletter.label' | t }}"
|
||||
required
|
||||
>
|
||||
<label class="field__label" for="NewsletterForm--{{ section.id }}">
|
||||
{{ 'newsletter.label' | t }}
|
||||
</label>
|
||||
<button
|
||||
type="submit"
|
||||
class="newsletter-form__button field__button"
|
||||
name="commit"
|
||||
id="Subscribe"
|
||||
aria-label="{{ 'newsletter.button_label' | t }}"
|
||||
>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-arrow.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
{%- if form.errors -%}
|
||||
<small class="newsletter-form__message form__message" id="Newsletter-error--{{ section.id }}">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-error.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{- form.errors.translated_fields.email | capitalize }}
|
||||
{{ form.errors.messages.email -}}
|
||||
</small>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- if form.posted_successfully? -%}
|
||||
<h3
|
||||
class="newsletter-form__message newsletter-form__message--success form__message"
|
||||
id="Newsletter-success--{{ section.id }}"
|
||||
tabindex="-1"
|
||||
autofocus
|
||||
>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-success.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{- 'newsletter.success' | t }}
|
||||
</h3>
|
||||
{%- endif -%}
|
||||
{% endform %}
|
||||
</div>
|
||||
{%- endcase -%}
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.email-signup-banner.name",
|
||||
"tag": "section",
|
||||
"class": "section",
|
||||
"enabled_on": {
|
||||
"templates": ["password"]
|
||||
},
|
||||
"settings": [
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": "t:sections.email-signup-banner.settings.paragraph.content"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_background_image",
|
||||
"label": "t:sections.email-signup-banner.settings.show_background_image.label",
|
||||
"default": true
|
||||
},
|
||||
{
|
||||
"type": "image_picker",
|
||||
"id": "image",
|
||||
"label": "t:sections.email-signup-banner.settings.image.label"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "image_overlay_opacity",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 10,
|
||||
"unit": "%",
|
||||
"label": "t:sections.email-signup-banner.settings.image_overlay_opacity.label",
|
||||
"default": 0
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "image_height",
|
||||
"options": [
|
||||
{
|
||||
"value": "adapt-image",
|
||||
"label": "t:sections.email-signup-banner.settings.image_height.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "small",
|
||||
"label": "t:sections.email-signup-banner.settings.image_height.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "medium",
|
||||
"label": "t:sections.email-signup-banner.settings.image_height.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "large",
|
||||
"label": "t:sections.email-signup-banner.settings.image_height.options__4.label"
|
||||
}
|
||||
],
|
||||
"default": "medium",
|
||||
"label": "t:sections.email-signup-banner.settings.image_height.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.email-signup-banner.settings.content_header.content"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "desktop_content_position",
|
||||
"options": [
|
||||
{
|
||||
"value": "top-left",
|
||||
"label": "t:sections.email-signup-banner.settings.desktop_content_position.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "top-center",
|
||||
"label": "t:sections.email-signup-banner.settings.desktop_content_position.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "top-right",
|
||||
"label": "t:sections.email-signup-banner.settings.desktop_content_position.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "middle-left",
|
||||
"label": "t:sections.email-signup-banner.settings.desktop_content_position.options__4.label"
|
||||
},
|
||||
{
|
||||
"value": "middle-center",
|
||||
"label": "t:sections.email-signup-banner.settings.desktop_content_position.options__5.label"
|
||||
},
|
||||
{
|
||||
"value": "middle-right",
|
||||
"label": "t:sections.email-signup-banner.settings.desktop_content_position.options__6.label"
|
||||
},
|
||||
{
|
||||
"value": "bottom-left",
|
||||
"label": "t:sections.email-signup-banner.settings.desktop_content_position.options__7.label"
|
||||
},
|
||||
{
|
||||
"value": "bottom-center",
|
||||
"label": "t:sections.email-signup-banner.settings.desktop_content_position.options__8.label"
|
||||
},
|
||||
{
|
||||
"value": "bottom-right",
|
||||
"label": "t:sections.email-signup-banner.settings.desktop_content_position.options__9.label"
|
||||
}
|
||||
],
|
||||
"default": "middle-center",
|
||||
"label": "t:sections.email-signup-banner.settings.desktop_content_position.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "desktop_content_alignment",
|
||||
"options": [
|
||||
{
|
||||
"value": "left",
|
||||
"label": "t:sections.email-signup-banner.settings.desktop_content_alignment.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "center",
|
||||
"label": "t:sections.email-signup-banner.settings.desktop_content_alignment.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "right",
|
||||
"label": "t:sections.email-signup-banner.settings.desktop_content_alignment.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "center",
|
||||
"label": "t:sections.email-signup-banner.settings.desktop_content_alignment.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_text_box",
|
||||
"default": true,
|
||||
"label": "t:sections.email-signup-banner.settings.show_text_box.label"
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"info": "t:sections.email-signup-banner.settings.color_scheme.info",
|
||||
"default": "scheme-1"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.email-signup-banner.settings.header.content"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "mobile_content_alignment",
|
||||
"options": [
|
||||
{
|
||||
"value": "left",
|
||||
"label": "t:sections.email-signup-banner.settings.mobile_content_alignment.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "center",
|
||||
"label": "t:sections.email-signup-banner.settings.mobile_content_alignment.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "right",
|
||||
"label": "t:sections.email-signup-banner.settings.mobile_content_alignment.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "center",
|
||||
"label": "t:sections.email-signup-banner.settings.mobile_content_alignment.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_text_below",
|
||||
"default": true,
|
||||
"label": "t:sections.email-signup-banner.settings.show_text_below.label"
|
||||
}
|
||||
],
|
||||
"blocks": [
|
||||
{
|
||||
"type": "heading",
|
||||
"name": "t:sections.email-signup-banner.blocks.heading.name",
|
||||
"limit": 1,
|
||||
"settings": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "heading",
|
||||
"default": "t:sections.email-signup-banner.blocks.heading.settings.heading.default",
|
||||
"label": "t:sections.email-signup-banner.blocks.heading.settings.heading.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "heading_size",
|
||||
"options": [
|
||||
{
|
||||
"value": "h2",
|
||||
"label": "t:sections.all.heading_size.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "h1",
|
||||
"label": "t:sections.all.heading_size.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "h0",
|
||||
"label": "t:sections.all.heading_size.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "hxl",
|
||||
"label": "t:sections.all.heading_size.options__4.label"
|
||||
},
|
||||
{
|
||||
"value": "hxxl",
|
||||
"label": "t:sections.all.heading_size.options__5.label"
|
||||
}
|
||||
],
|
||||
"default": "h1",
|
||||
"label": "t:sections.all.heading_size.label"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "paragraph",
|
||||
"name": "t:sections.email-signup-banner.blocks.paragraph.name",
|
||||
"limit": 1,
|
||||
"settings": [
|
||||
{
|
||||
"type": "richtext",
|
||||
"id": "text",
|
||||
"default": "t:sections.email-signup-banner.blocks.paragraph.settings.paragraph.default",
|
||||
"label": "t:sections.email-signup-banner.blocks.paragraph.settings.paragraph.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "text_style",
|
||||
"options": [
|
||||
{
|
||||
"value": "body",
|
||||
"label": "t:sections.email-signup-banner.blocks.paragraph.settings.text_style.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "subtitle",
|
||||
"label": "t:sections.email-signup-banner.blocks.paragraph.settings.text_style.options__2.label"
|
||||
}
|
||||
],
|
||||
"default": "body",
|
||||
"label": "t:sections.email-signup-banner.blocks.paragraph.settings.text_style.label"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "email_form",
|
||||
"name": "t:sections.email-signup-banner.blocks.email_form.name",
|
||||
"limit": 1
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "t:sections.email-signup-banner.presets.name",
|
||||
"blocks": [
|
||||
{
|
||||
"type": "heading"
|
||||
},
|
||||
{
|
||||
"type": "paragraph"
|
||||
},
|
||||
{
|
||||
"type": "email_form"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,329 @@
|
||||
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-card.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-article-card.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'section-featured-blog.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
{%- liquid
|
||||
assign posts_displayed = section.settings.blog.articles_count
|
||||
if section.settings.post_limit <= section.settings.blog.articles_count or section.settings.post_limit <= 4
|
||||
assign posts_exceed_limit = true
|
||||
assign posts_displayed = section.settings.post_limit
|
||||
endif
|
||||
-%}
|
||||
<div class="blog color-{{ section.settings.color_scheme }} gradient{% if section.settings.heading == blank %} no-heading{% endif %}">
|
||||
<div class="page-width-desktop isolate{% if posts_displayed < 3 %} page-width-tablet{% endif %} section-{{ section.id }}-padding">
|
||||
{%- unless section.settings.heading == blank -%}
|
||||
<div class="title-wrapper-with-link{% if posts_displayed > 2 %} title-wrapper--self-padded-tablet-down{% else %} title-wrapper--self-padded-mobile{% endif %} title-wrapper--no-top-margin">
|
||||
<h2
|
||||
id="SectionHeading-{{ section.id }}"
|
||||
class="blog__title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{% if settings.animations_reveal_on_scroll %}
|
||||
data-cascade
|
||||
{% endif %}
|
||||
>
|
||||
{{ section.settings.heading }}
|
||||
</h2>
|
||||
|
||||
{%- if section.settings.blog != blank
|
||||
and section.settings.show_view_all
|
||||
and section.settings.post_limit < section.settings.blog.articles_count
|
||||
-%}
|
||||
<a
|
||||
href="{{ section.settings.blog.url }}"
|
||||
class="link underlined-link large-up-hide{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
>
|
||||
{{ 'sections.featured_blog.view_all' | t }}
|
||||
</a>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- endunless -%}
|
||||
|
||||
<slider-component class="slider-mobile-gutter{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
|
||||
<ul
|
||||
id="Slider-{{ section.id }}"
|
||||
class="blog__posts articles-wrapper contains-card contains-card--article{% if settings.blog_card_style == 'standard' %} contains-card--standard{% endif %} grid grid--peek grid--2-col-tablet grid--{{ section.settings.columns_desktop }}-col-desktop slider {% if posts_displayed > 2 %}slider--tablet{% else %}slider--mobile{% endif %}"
|
||||
role="list"
|
||||
>
|
||||
{%- if section.settings.blog != blank and section.settings.blog.articles_count > 0 -%}
|
||||
{%- for article in section.settings.blog.articles limit: section.settings.post_limit -%}
|
||||
<li
|
||||
id="Slide-{{ section.id }}-{{ forloop.index }}"
|
||||
class="blog__post grid__item article slider__slide slider__slide--full-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{% if settings.animations_reveal_on_scroll %}
|
||||
data-cascade
|
||||
style="--animation-order: {{ forloop.index }};"
|
||||
{% endif %}
|
||||
>
|
||||
{% render 'article-card',
|
||||
blog: section.settings.blog,
|
||||
article: article,
|
||||
media_aspect_ratio: 1.66,
|
||||
show_image: section.settings.show_image,
|
||||
show_date: section.settings.show_date,
|
||||
show_author: section.settings.show_author,
|
||||
show_excerpt: true
|
||||
%}
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
{%- else -%}
|
||||
{% for i in (1..section.settings.post_limit) -%}
|
||||
{%- assign placeholder_image_index = forloop.index0 | modulo: 3 | plus: 1 -%}
|
||||
{%- assign placeholder_image = 'blog-apparel-' | append: placeholder_image_index -%}
|
||||
<li
|
||||
id="Slide-{{ section.id }}-{{ forloop.index }}"
|
||||
class="blog__post grid__item article slider__slide slider__slide--full-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{% if settings.animations_reveal_on_scroll %}
|
||||
data-cascade
|
||||
style="--animation-order: {{ forloop.index }};"
|
||||
{% endif %}
|
||||
>
|
||||
<div class="article-card-wrapper card-wrapper{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
|
||||
<div
|
||||
class="
|
||||
card article-card card--{{ settings.blog_card_style }}
|
||||
{% if settings.blog_card_style == 'card' %} color-{{ settings.blog_card_color_scheme }} gradient{% endif %}
|
||||
{% if section.settings.show_image %} card--media{% else %} card--text{% endif %}
|
||||
"
|
||||
style=" {% if settings.blog_card_style == 'standard' %} --ratio-percent: 100%;{% elsif settings.blog_card_style == 'card' %} --ratio-percent: 0%;{% endif %}"
|
||||
>
|
||||
<div
|
||||
class="card__inner{% if settings.blog_card_style == 'standard' %} color-{{ settings.blog_card_color_scheme }} gradient{% endif %} ratio"
|
||||
style="--ratio-percent: 80%;"
|
||||
>
|
||||
{%- if section.settings.show_image == true -%}
|
||||
<div class="article-card__image-wrapper card__media">
|
||||
<div class="article-card__image media">
|
||||
{{ placeholder_image | placeholder_svg_tag: 'blog-placeholder-svg' }}
|
||||
</div>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
<div class="card__content">
|
||||
<div class="card__information">
|
||||
<h3 class="card__heading h2">
|
||||
{{ 'sections.featured_blog.onboarding_title' | t }}
|
||||
</h3>
|
||||
<p class="article-card__excerpt rte-width">
|
||||
{{ 'sections.featured_blog.onboarding_content' | t }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card__content">
|
||||
<div class="card__information">
|
||||
<h3 class="card__heading h2">
|
||||
{{ 'sections.featured_blog.onboarding_title' | t }}
|
||||
</h3>
|
||||
<p class="article-card__excerpt rte-width">
|
||||
{{ 'sections.featured_blog.onboarding_content' | t }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
{%- endif -%}
|
||||
</ul>
|
||||
{%- if posts_exceed_limit -%}
|
||||
<div class="slider-buttons{% if section.settings.post_limit < 3 %} medium-hide{% endif %}{% if section.settings.post_limit < 2 %} small-hide{% endif %}">
|
||||
<button
|
||||
type="button"
|
||||
class="slider-button slider-button--prev"
|
||||
name="previous"
|
||||
aria-label="{{ 'general.slider.previous_slide' | t }}"
|
||||
>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-caret.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</button>
|
||||
<div class="slider-counter caption">
|
||||
<span class="slider-counter--current">1</span>
|
||||
<span aria-hidden="true"> / </span>
|
||||
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
|
||||
<span class="slider-counter--total">{{ section.settings.post_limit }}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="slider-button slider-button--next"
|
||||
name="next"
|
||||
aria-label="{{ 'general.slider.next_slide' | t }}"
|
||||
>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-caret.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</slider-component>
|
||||
|
||||
{%- if section.settings.show_view_all and section.settings.post_limit < section.settings.blog.articles_count -%}
|
||||
<div
|
||||
class="blog__view-all center small-hide medium-hide{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{% if settings.animations_reveal_on_scroll %}
|
||||
data-cascade
|
||||
{% endif %}
|
||||
>
|
||||
<a
|
||||
href="{{ section.settings.blog.url }}"
|
||||
id="ViewAll-{{ section.id }}"
|
||||
class="blog__button button"
|
||||
aria-labelledby="ViewAll-{{ section.id }} SectionHeading-{{ section.id }}"
|
||||
>
|
||||
{{ 'sections.featured_blog.view_all' | t }}
|
||||
</a>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.featured-blog.name",
|
||||
"tag": "section",
|
||||
"disabled_on": {
|
||||
"groups": ["header", "footer"]
|
||||
},
|
||||
"settings": [
|
||||
{
|
||||
"type": "blog",
|
||||
"id": "blog",
|
||||
"label": "t:sections.featured-blog.settings.blog.label"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "post_limit",
|
||||
"min": 2,
|
||||
"max": 4,
|
||||
"step": 1,
|
||||
"default": 3,
|
||||
"label": "t:sections.featured-blog.settings.post_limit.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.featured-blog.settings.text_header.content"
|
||||
},
|
||||
{
|
||||
"type": "inline_richtext",
|
||||
"id": "heading",
|
||||
"default": "t:sections.featured-blog.settings.heading.default",
|
||||
"label": "t:sections.featured-blog.settings.heading.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "heading_size",
|
||||
"options": [
|
||||
{
|
||||
"value": "h2",
|
||||
"label": "t:sections.all.heading_size.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "h1",
|
||||
"label": "t:sections.all.heading_size.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "h0",
|
||||
"label": "t:sections.all.heading_size.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "hxl",
|
||||
"label": "t:sections.all.heading_size.options__4.label"
|
||||
},
|
||||
{
|
||||
"value": "hxxl",
|
||||
"label": "t:sections.all.heading_size.options__5.label"
|
||||
}
|
||||
],
|
||||
"default": "h1",
|
||||
"label": "t:sections.all.heading_size.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.featured-blog.settings.layout_header.content"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "columns_desktop",
|
||||
"min": 1,
|
||||
"max": 4,
|
||||
"step": 1,
|
||||
"default": 3,
|
||||
"label": "t:sections.featured-blog.settings.columns_desktop.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_view_all",
|
||||
"default": true,
|
||||
"label": "t:sections.featured-blog.settings.show_view_all.label",
|
||||
"info": "t:sections.featured-blog.settings.show_view_all.info"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_image",
|
||||
"default": true,
|
||||
"label": "t:sections.featured-blog.settings.show_image.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_date",
|
||||
"default": true,
|
||||
"label": "t:sections.featured-blog.settings.show_date.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_author",
|
||||
"default": false,
|
||||
"label": "t:sections.featured-blog.settings.show_author.label"
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"info": "t:sections.all.colors.has_cards_info",
|
||||
"default": "scheme-1"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 36
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "t:sections.featured-blog.presets.name"
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,529 @@
|
||||
{{ 'component-card.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-price.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'template-collection.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{% if section.settings.image_shape == 'blob' %}
|
||||
{{ 'mask-blobs.css' | asset_url | stylesheet_tag }}
|
||||
{%- endif -%}
|
||||
|
||||
{%- unless section.settings.quick_add == 'none' -%}
|
||||
{{ 'quick-add.css' | asset_url | stylesheet_tag }}
|
||||
<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
|
||||
{%- endunless -%}
|
||||
|
||||
{%- if section.settings.quick_add == 'standard' -%}
|
||||
<script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
|
||||
{%- endif -%}
|
||||
|
||||
{%- if section.settings.quick_add == 'bulk' -%}
|
||||
<script src="{{ 'quick-add-bulk.js' | asset_url }}" defer="defer"></script>
|
||||
<script src="{{ 'quantity-popover.js' | asset_url }}" defer="defer"></script>
|
||||
<script src="{{ 'price-per-item.js' | asset_url }}" defer="defer"></script>
|
||||
<script src="{{ 'quick-order-list.js' | asset_url }}" defer="defer"></script>
|
||||
{%- endif -%}
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
{%- liquid
|
||||
assign products_to_display = section.settings.collection.all_products_count
|
||||
|
||||
if section.settings.collection.all_products_count > section.settings.products_to_show
|
||||
assign products_to_display = section.settings.products_to_show
|
||||
assign more_in_collection = true
|
||||
endif
|
||||
|
||||
assign columns_mobile_int = section.settings.columns_mobile | plus: 0
|
||||
assign columns_desktop_int = section.settings.columns_desktop | plus: 0
|
||||
assign show_mobile_slider = false
|
||||
if section.settings.swipe_on_mobile and products_to_display > columns_mobile_int
|
||||
assign show_mobile_slider = true
|
||||
endif
|
||||
|
||||
assign max_columns_to_show = columns_mobile_int
|
||||
if columns_desktop_int > columns_mobile_int
|
||||
assign max_columns_to_show = columns_desktop_int
|
||||
endif
|
||||
|
||||
assign show_desktop_slider = false
|
||||
if section.settings.enable_desktop_slider and products_to_display > section.settings.columns_desktop
|
||||
assign show_desktop_slider = true
|
||||
endif
|
||||
-%}
|
||||
|
||||
<div
|
||||
class="color-{{ section.settings.color_scheme }} isolate gradient"
|
||||
>
|
||||
<div
|
||||
class="collection{% if section.settings.quick_add == 'bulk' %} collection-quick-add-bulk{% endif %} section-{{ section.id }}-padding{% if section.settings.full_width %} collection--full-width{% endif %}"
|
||||
id="collection-{{ section.id }}"
|
||||
data-id="{{ section.id }}"
|
||||
>
|
||||
<div class="collection__title title-wrapper title-wrapper--no-top-margin page-width{% if show_mobile_slider %} title-wrapper--self-padded-tablet-down{% endif %}{% if show_desktop_slider %} collection__title--desktop-slider{% endif %}">
|
||||
{%- if section.settings.title != blank -%}
|
||||
<h2 class="title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
|
||||
{{ section.settings.title }}
|
||||
</h2>
|
||||
{%- endif -%}
|
||||
{%- if section.settings.description != blank
|
||||
or section.settings.show_description
|
||||
and section.settings.collection.description != empty
|
||||
-%}
|
||||
<div class="collection__description {{ section.settings.description_style }} rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
|
||||
{%- if section.settings.show_description -%}
|
||||
{{ section.settings.collection.description }}
|
||||
{%- else -%}
|
||||
{{ section.settings.description -}}
|
||||
{%- endif %}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
||||
<slider-component class="slider-mobile-gutter{% if section.settings.full_width %} slider-component-full-width{% endif %}{% if show_mobile_slider == false %} page-width{% endif %}{% if show_desktop_slider == false and section.settings.full_width == false %} page-width-desktop{% endif %}{% if show_desktop_slider %} slider-component-desktop{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
|
||||
<ul
|
||||
id="Slider-{{ section.id }}"
|
||||
data-id="{{ section.id }}"
|
||||
class="grid product-grid contains-card contains-card--product{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--{{ section.settings.columns_desktop }}-col-desktop{% if section.settings.collection == blank %} grid--2-col-tablet-down{% else %} grid--{{ section.settings.columns_mobile }}-col-tablet-down{% endif %}{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}"
|
||||
role="list"
|
||||
aria-label="{{ 'general.slider.name' | t }}"
|
||||
>
|
||||
{% assign skip_card_product_styles = false %}
|
||||
|
||||
{%- if section.settings.collection.products.size > 0 -%}
|
||||
{% assign lazy_load = false %}
|
||||
{% paginate section.settings.collection.products by section.settings.products_to_show %}
|
||||
{%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
|
||||
{% if lazy_load == false and forloop.index > max_columns_to_show %}
|
||||
{% assign lazy_load = true %}
|
||||
{% endif %}
|
||||
<li
|
||||
id="Slide-{{ section.id }}-{{ forloop.index }}"
|
||||
class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{% if settings.animations_reveal_on_scroll %}
|
||||
data-cascade
|
||||
style="--animation-order: {{ forloop.index }};"
|
||||
{% endif %}
|
||||
>
|
||||
{% render 'card-product',
|
||||
card_product: product,
|
||||
media_aspect_ratio: section.settings.image_ratio,
|
||||
image_shape: section.settings.image_shape,
|
||||
lazy_load: lazy_load,
|
||||
show_secondary_image: section.settings.show_secondary_image,
|
||||
show_vendor: section.settings.show_vendor,
|
||||
show_rating: section.settings.show_rating,
|
||||
skip_styles: skip_card_product_styles,
|
||||
section_id: section.id,
|
||||
quick_add: section.settings.quick_add,
|
||||
product_view_context: 'collection'
|
||||
%}
|
||||
</li>
|
||||
{%- assign skip_card_product_styles = true -%}
|
||||
{%- endfor -%}
|
||||
{% endpaginate %}
|
||||
{%- else -%}
|
||||
{%- for i in (1..section.settings.columns_desktop) -%}
|
||||
<li
|
||||
class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{% if settings.animations_reveal_on_scroll %}
|
||||
data-cascade
|
||||
style="--animation-order: {{ forloop.index }};"
|
||||
{% endif %}
|
||||
>
|
||||
{% liquid
|
||||
assign ridx = forloop.rindex
|
||||
case ridx
|
||||
when 5
|
||||
assign ridx = 1
|
||||
when 6
|
||||
assign ridx = 2
|
||||
endcase
|
||||
%}
|
||||
{%- assign placeholder_image = 'product-apparel-' | append: ridx -%}
|
||||
{% render 'card-product',
|
||||
show_vendor: section.settings.show_vendor,
|
||||
media_aspect_ratio: section.settings.image_ratio,
|
||||
image_shape: section.settings.image_shape,
|
||||
lazy_load: false,
|
||||
placeholder_image: placeholder_image
|
||||
%}
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
{%- endif -%}
|
||||
</ul>
|
||||
{%- if show_mobile_slider or show_desktop_slider -%}
|
||||
<div class="slider-buttons">
|
||||
<button
|
||||
type="button"
|
||||
class="slider-button slider-button--prev"
|
||||
name="previous"
|
||||
aria-label="{{ 'general.slider.previous_slide' | t }}"
|
||||
aria-controls="Slider-{{ section.id }}"
|
||||
>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-caret.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</button>
|
||||
<div class="slider-counter caption">
|
||||
<span class="slider-counter--current">1</span>
|
||||
<span aria-hidden="true"> / </span>
|
||||
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
|
||||
<span class="slider-counter--total">{{ products_to_display }}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="slider-button slider-button--next"
|
||||
name="next"
|
||||
aria-label="{{ 'general.slider.next_slide' | t }}"
|
||||
aria-controls="Slider-{{ section.id }}"
|
||||
>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-caret.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</slider-component>
|
||||
|
||||
{%- if section.settings.show_view_all and more_in_collection -%}
|
||||
<div class="center collection__view-all{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
|
||||
<a
|
||||
href="{{ section.settings.collection.url }}"
|
||||
class="{% if section.settings.view_all_style == 'link' %}link underlined-link{% elsif section.settings.view_all_style == 'solid' %}button{% else %}button button--secondary{% endif %}"
|
||||
aria-label="{{ 'sections.featured_collection.view_all_label' | t: collection_name: section.settings.collection.title | escape }}"
|
||||
>
|
||||
{{ 'sections.featured_collection.view_all' | t }}
|
||||
</a>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{% if section.settings.image_shape == 'arch' %}
|
||||
{{ 'mask-arch.svg' | inline_asset_content }}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.featured-collection.name",
|
||||
"tag": "section",
|
||||
"class": "section",
|
||||
"disabled_on": {
|
||||
"groups": ["header", "footer"]
|
||||
},
|
||||
"settings": [
|
||||
{
|
||||
"type": "collection",
|
||||
"id": "collection",
|
||||
"label": "t:sections.featured-collection.settings.collection.label"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "products_to_show",
|
||||
"min": 2,
|
||||
"max": 25,
|
||||
"step": 1,
|
||||
"default": 4,
|
||||
"label": "t:sections.featured-collection.settings.products_to_show.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.featured-collection.settings.header_text.content"
|
||||
},
|
||||
{
|
||||
"type": "inline_richtext",
|
||||
"id": "title",
|
||||
"default": "t:sections.featured-collection.settings.title.default",
|
||||
"label": "t:sections.featured-collection.settings.title.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "heading_size",
|
||||
"options": [
|
||||
{
|
||||
"value": "h2",
|
||||
"label": "t:sections.all.heading_size.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "h1",
|
||||
"label": "t:sections.all.heading_size.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "h0",
|
||||
"label": "t:sections.all.heading_size.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "hxl",
|
||||
"label": "t:sections.all.heading_size.options__4.label"
|
||||
},
|
||||
{
|
||||
"value": "hxxl",
|
||||
"label": "t:sections.all.heading_size.options__5.label"
|
||||
}
|
||||
],
|
||||
"default": "h1",
|
||||
"label": "t:sections.all.heading_size.label"
|
||||
},
|
||||
{
|
||||
"type": "richtext",
|
||||
"id": "description",
|
||||
"label": "t:sections.featured-collection.settings.description.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_description",
|
||||
"label": "t:sections.featured-collection.settings.show_description.label",
|
||||
"default": false
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "description_style",
|
||||
"label": "t:sections.featured-collection.settings.description_style.label",
|
||||
"options": [
|
||||
{
|
||||
"value": "body",
|
||||
"label": "t:sections.featured-collection.settings.description_style.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "subtitle",
|
||||
"label": "t:sections.featured-collection.settings.description_style.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "uppercase",
|
||||
"label": "t:sections.featured-collection.settings.description_style.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "body"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.featured-collection.settings.header_collection.content"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "columns_desktop",
|
||||
"min": 1,
|
||||
"max": 6,
|
||||
"step": 1,
|
||||
"default": 4,
|
||||
"label": "t:sections.featured-collection.settings.columns_desktop.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "enable_desktop_slider",
|
||||
"label": "t:sections.featured-collection.settings.enable_desktop_slider.label",
|
||||
"default": false
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "full_width",
|
||||
"label": "t:sections.featured-collection.settings.full_width.label",
|
||||
"default": false
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_view_all",
|
||||
"default": true,
|
||||
"label": "t:sections.featured-collection.settings.show_view_all.label",
|
||||
"info": "t:sections.featured-collection.settings.show_view_all.info"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "view_all_style",
|
||||
"label": "t:sections.featured-collection.settings.view_all_style.label",
|
||||
"options": [
|
||||
{
|
||||
"value": "link",
|
||||
"label": "t:sections.featured-collection.settings.view_all_style.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "outline",
|
||||
"label": "t:sections.featured-collection.settings.view_all_style.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "solid",
|
||||
"label": "t:sections.featured-collection.settings.view_all_style.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "solid"
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"info": "t:sections.all.colors.has_cards_info",
|
||||
"default": "scheme-1"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.featured-collection.settings.header.content"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "image_ratio",
|
||||
"options": [
|
||||
{
|
||||
"value": "adapt",
|
||||
"label": "t:sections.featured-collection.settings.image_ratio.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "portrait",
|
||||
"label": "t:sections.featured-collection.settings.image_ratio.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "square",
|
||||
"label": "t:sections.featured-collection.settings.image_ratio.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "adapt",
|
||||
"label": "t:sections.featured-collection.settings.image_ratio.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "image_shape",
|
||||
"options": [
|
||||
{
|
||||
"value": "default",
|
||||
"label": "t:sections.all.image_shape.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "arch",
|
||||
"label": "t:sections.all.image_shape.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "blob",
|
||||
"label": "t:sections.all.image_shape.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "chevronleft",
|
||||
"label": "t:sections.all.image_shape.options__4.label"
|
||||
},
|
||||
{
|
||||
"value": "chevronright",
|
||||
"label": "t:sections.all.image_shape.options__5.label"
|
||||
},
|
||||
{
|
||||
"value": "diamond",
|
||||
"label": "t:sections.all.image_shape.options__6.label"
|
||||
},
|
||||
{
|
||||
"value": "parallelogram",
|
||||
"label": "t:sections.all.image_shape.options__7.label"
|
||||
},
|
||||
{
|
||||
"value": "round",
|
||||
"label": "t:sections.all.image_shape.options__8.label"
|
||||
}
|
||||
],
|
||||
"default": "default",
|
||||
"label": "t:sections.all.image_shape.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_secondary_image",
|
||||
"default": false,
|
||||
"label": "t:sections.featured-collection.settings.show_secondary_image.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_vendor",
|
||||
"default": false,
|
||||
"label": "t:sections.featured-collection.settings.show_vendor.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_rating",
|
||||
"default": false,
|
||||
"label": "t:sections.featured-collection.settings.show_rating.label",
|
||||
"info": "t:sections.featured-collection.settings.show_rating.info"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "quick_add",
|
||||
"default": "none",
|
||||
"label": "t:sections.main-collection-product-grid.settings.quick_add.label",
|
||||
"options": [
|
||||
{
|
||||
"value": "none",
|
||||
"label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_1"
|
||||
},
|
||||
{
|
||||
"value": "standard",
|
||||
"label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_2"
|
||||
},
|
||||
{
|
||||
"value": "bulk",
|
||||
"label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_3"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.featured-collection.settings.header_mobile.content"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "columns_mobile",
|
||||
"default": "2",
|
||||
"label": "t:sections.featured-collection.settings.columns_mobile.label",
|
||||
"options": [
|
||||
{
|
||||
"value": "1",
|
||||
"label": "t:sections.featured-collection.settings.columns_mobile.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "2",
|
||||
"label": "t:sections.featured-collection.settings.columns_mobile.options__2.label"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "swipe_on_mobile",
|
||||
"default": false,
|
||||
"label": "t:sections.featured-collection.settings.swipe_on_mobile.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 36
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "t:sections.featured-collection.presets.name"
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1 @@
|
||||
{"name":"t:sections.footer.name","type":"footer","sections":{"footer":{"type":"footer","blocks":{"link_list_PR3imM":{"type":"link_list","settings":{"heading":"Quick-Links","menu":"footer"}},"text_rkXHnJ":{"type":"text","settings":{"heading":"Kontaktinformationen","subtext":"<p>Telefon: <a href=\"tel:+43 720 971 722\" title=\"tel:+43 720 971 722\">+43 720 971 722<\/a><br\/>E-Mail: <a href=\"mailto:support@linumiq.com\" target=\"_blank\" title=\"mailto:support@linumiq.com\">support@linumiq.com<\/a><br\/>Adresse: Anton-Kleinoscheg-Straße 64c\/5 - 8051 Graz - Austria<\/p>"}}},"block_order":["link_list_PR3imM","text_rkXHnJ"],"settings":{"color_scheme":"scheme-1","newsletter_enable":false,"newsletter_heading":"Subscribe to our emails","enable_follow_on_shop":false,"show_social":true,"enable_country_selector":true,"enable_language_selector":true,"payment_enable":true,"show_policy":true,"margin_top":0,"padding_top":36,"padding_bottom":36}}},"order":["footer"]}
|
||||
@@ -0,0 +1,545 @@
|
||||
{% comment %}theme-check-disable UndefinedObject{% endcomment %}
|
||||
{{ 'section-footer.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-list-menu.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-list-payment.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-list-social.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- style -%}
|
||||
.footer {
|
||||
margin-top: {{ section.settings.margin_top | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.footer {
|
||||
margin-top: {{ section.settings.margin_top }}px;
|
||||
}
|
||||
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
<footer class="footer color-{{ section.settings.color_scheme }} gradient section-{{ section.id }}-padding">
|
||||
{%- liquid
|
||||
assign has_social_icons = true
|
||||
if settings.social_facebook_link == blank and settings.social_instagram_link == blank and settings.social_youtube_link == blank and settings.social_tiktok_link == blank and settings.social_twitter_link == blank and settings.social_pinterest_link == blank and settings.social_snapchat_link == blank and settings.social_tumblr_link == blank and settings.social_vimeo_link == blank
|
||||
assign has_social_icons = false
|
||||
endif
|
||||
|
||||
if settings.brand_image == blank and settings.brand_headline == blank and settings.brand_description == blank
|
||||
assign brand_empty = true
|
||||
endif
|
||||
|
||||
if section.blocks.size == 1 and section.blocks[0].type == 'brand_information' and brand_empty and has_social_icons == false and section.settings.newsletter_enable == false and section.settings.enable_follow_on_shop == false
|
||||
assign only_empty_brand = true
|
||||
endif
|
||||
-%}
|
||||
{%- if section.blocks.size > 0
|
||||
or section.settings.newsletter_enable
|
||||
or section.settings.show_social
|
||||
and has_social_icons == true
|
||||
or section.settings.enable_follow_on_shop
|
||||
-%}
|
||||
{%- unless only_empty_brand -%}
|
||||
<div class="footer__content-top page-width">
|
||||
{%- if section.blocks.size > 0 -%}
|
||||
{%- liquid
|
||||
if section.blocks.size == 9
|
||||
assign footer_grid_class = 'grid--3-col-tablet'
|
||||
elsif section.blocks.size > 6
|
||||
assign footer_grid_class = 'grid--4-col-desktop'
|
||||
elsif section.blocks.size > 4
|
||||
assign footer_grid_class = 'grid--3-col-tablet'
|
||||
endif
|
||||
-%}
|
||||
<div
|
||||
class="footer__blocks-wrapper grid grid--1-col grid--2-col grid--4-col-tablet {{ footer_grid_class }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{% if settings.animations_reveal_on_scroll %}
|
||||
data-cascade
|
||||
{% endif %}
|
||||
>
|
||||
{%- for block in section.blocks -%}
|
||||
<div
|
||||
class="footer-block grid__item{% if block.type == 'link_list' %} footer-block--menu{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{{ block.shopify_attributes }}
|
||||
{% if settings.animations_reveal_on_scroll %}
|
||||
data-cascade
|
||||
style="--animation-order: {{ forloop.index }};"
|
||||
{% endif %}
|
||||
>
|
||||
{%- if block.settings.heading != blank -%}
|
||||
<h2 class="footer-block__heading inline-richtext">{{- block.settings.heading -}}</h2>
|
||||
{%- endif -%}
|
||||
|
||||
{%- case block.type -%}
|
||||
{%- when '@app' -%}
|
||||
{% render block %}
|
||||
{%- when 'text' -%}
|
||||
<div class="footer-block__details-content rte">
|
||||
{{ block.settings.subtext }}
|
||||
</div>
|
||||
{%- when 'link_list' -%}
|
||||
{%- if block.settings.menu != blank -%}
|
||||
<ul class="footer-block__details-content list-unstyled">
|
||||
{%- for link in block.settings.menu.links -%}
|
||||
<li>
|
||||
<a
|
||||
href="{{ link.url }}"
|
||||
class="link link--text list-menu__item list-menu__item--link{% if link.active %} list-menu__item--active{% endif %}"
|
||||
>
|
||||
{{ link.title | escape }}
|
||||
</a>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
{%- endif -%}
|
||||
{%- when 'brand_information' -%}
|
||||
<div class="footer-block__brand-info">
|
||||
{%- if settings.brand_image != blank -%}
|
||||
{%- assign brand_image_height = settings.brand_image_width
|
||||
| divided_by: settings.brand_image.aspect_ratio
|
||||
-%}
|
||||
<div
|
||||
class="footer-block__image-wrapper"
|
||||
style="max-width: min(100%, {{ settings.brand_image_width }}px);"
|
||||
>
|
||||
{{
|
||||
settings.brand_image
|
||||
| image_url: width: 1100
|
||||
| image_tag:
|
||||
loading: 'lazy',
|
||||
widths: '50, 100, 150, 200, 300, 400, 550, 800, 1100',
|
||||
height: brand_image_height,
|
||||
width: settings.brand_image_width
|
||||
}}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- if settings.brand_headline != blank -%}
|
||||
<h2 class="footer-block__heading rte">{{ settings.brand_headline }}</h2>
|
||||
{%- endif -%}
|
||||
{%- if settings.brand_description != blank -%}
|
||||
<div class="rte">{{ settings.brand_description }}</div>
|
||||
{%- endif -%}
|
||||
{%- if block.settings.show_social and has_social_icons -%}
|
||||
{%- render 'social-icons', class: 'footer__list-social' -%}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- when 'image' -%}
|
||||
<div class="footer-block__details-content footer-block-image {{ block.settings.alignment }}">
|
||||
{%- if block.settings.image != blank -%}
|
||||
{%- assign image_size_2x = block.settings.image_width | times: 2 | at_most: 5760 -%}
|
||||
<div
|
||||
class="footer-block__image-wrapper"
|
||||
style="max-width: min(100%, {{ block.settings.image_width }}px);"
|
||||
>
|
||||
<img
|
||||
srcset="{{ block.settings.image | image_url: width: block.settings.image_width }}, {{ block.settings.image | image_url: width: image_size_2x }} 2x"
|
||||
src="{{ block.settings.image | image_url: width: 760 }}"
|
||||
alt="{{ block.settings.image.alt | escape }}"
|
||||
loading="lazy"
|
||||
width="{{ block.settings.image.width }}"
|
||||
height="{{ block.settings.image.height }}"
|
||||
>
|
||||
</div>
|
||||
{%- else -%}
|
||||
{{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- endcase -%}
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
|
||||
<div
|
||||
class="footer-block--newsletter{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{% if settings.animations_reveal_on_scroll %}
|
||||
data-cascade
|
||||
{% endif %}
|
||||
>
|
||||
{%- if section.settings.newsletter_enable -%}
|
||||
<div class="footer-block__newsletter">
|
||||
{%- if section.settings.newsletter_heading != blank -%}
|
||||
<h2 class="footer-block__heading inline-richtext">{{ section.settings.newsletter_heading }}</h2>
|
||||
{%- endif -%}
|
||||
{%- form 'customer', id: 'ContactFooter', class: 'footer__newsletter newsletter-form' -%}
|
||||
<input type="hidden" name="contact[tags]" value="newsletter">
|
||||
<div class="newsletter-form__field-wrapper">
|
||||
<div class="field">
|
||||
<input
|
||||
id="NewsletterForm--{{ section.id }}"
|
||||
type="email"
|
||||
name="contact[email]"
|
||||
class="field__input"
|
||||
value="{{ form.email }}"
|
||||
aria-required="true"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
autocomplete="email"
|
||||
{% if form.errors %}
|
||||
autofocus
|
||||
aria-invalid="true"
|
||||
aria-describedby="ContactFooter-error"
|
||||
{% elsif form.posted_successfully? %}
|
||||
aria-describedby="ContactFooter-success"
|
||||
{% endif %}
|
||||
placeholder="{{ 'newsletter.label' | t }}"
|
||||
required
|
||||
>
|
||||
<label class="field__label" for="NewsletterForm--{{ section.id }}">
|
||||
{{ 'newsletter.label' | t }}
|
||||
</label>
|
||||
<button
|
||||
type="submit"
|
||||
class="newsletter-form__button field__button"
|
||||
name="commit"
|
||||
id="Subscribe"
|
||||
aria-label="{{ 'newsletter.button_label' | t }}"
|
||||
>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-arrow.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
{%- if form.errors -%}
|
||||
<small class="newsletter-form__message form__message" id="ContactFooter-error">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-error.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{- form.errors.translated_fields.email | capitalize }}
|
||||
{{ form.errors.messages.email -}}
|
||||
</small>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- if form.posted_successfully? -%}
|
||||
<h3
|
||||
class="newsletter-form__message newsletter-form__message--success form__message"
|
||||
id="ContactFooter-success"
|
||||
tabindex="-1"
|
||||
autofocus
|
||||
>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-success.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{- 'newsletter.success' | t }}
|
||||
</h3>
|
||||
{%- endif -%}
|
||||
{%- endform -%}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
|
||||
{%- if shop.features.follow_on_shop? and section.settings.enable_follow_on_shop -%}
|
||||
<div class="footer__follow-on-shop">
|
||||
{{ shop | login_button: action: 'follow' }}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
|
||||
{%- if section.settings.show_social and has_social_icons -%}
|
||||
{%- render 'social-icons', class: 'footer__list-social' -%}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
{%- endunless -%}
|
||||
{%- endif -%}
|
||||
|
||||
<div
|
||||
class="footer__content-bottom{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{% if settings.animations_reveal_on_scroll %}
|
||||
data-cascade
|
||||
{% endif %}
|
||||
>
|
||||
<div class="footer__content-bottom-wrapper page-width">
|
||||
<div class="footer__column footer__localization isolate">
|
||||
{%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
|
||||
<localization-form>
|
||||
{%- form 'localization', id: 'FooterCountryForm', class: 'localization-form' -%}
|
||||
<div>
|
||||
<h2 class="caption-large text-body" id="FooterCountryLabel">{{ 'localization.country_label' | t }}</h2>
|
||||
{%- render 'country-localization', localPosition: 'FooterCountry' -%}
|
||||
</div>
|
||||
{%- endform -%}
|
||||
</localization-form>
|
||||
{%- endif -%}
|
||||
|
||||
{%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
|
||||
<localization-form>
|
||||
{%- form 'localization', id: 'FooterLanguageForm', class: 'localization-form' -%}
|
||||
<div>
|
||||
<h2 class="caption-large text-body" id="FooterLanguageLabel">
|
||||
{{ 'localization.language_label' | t }}
|
||||
</h2>
|
||||
{%- render 'language-localization', localPosition: 'FooterLanguage' -%}
|
||||
</div>
|
||||
{%- endform -%}
|
||||
</localization-form>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
<div class="footer__column footer__column--info">
|
||||
{%- if section.settings.payment_enable -%}
|
||||
<div class="footer__payment">
|
||||
<span class="visually-hidden">{{ 'sections.footer.payment' | t }}</span>
|
||||
<ul class="list list-payment" role="list">
|
||||
{%- for type in shop.enabled_payment_types -%}
|
||||
<li class="list-payment__item">
|
||||
{{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer__content-bottom-wrapper page-width{% if section.settings.enable_country_selector == false and section.settings.enable_language_selector == false %} footer__content-bottom-wrapper--center{% endif %}">
|
||||
<div class="footer__copyright caption">
|
||||
<small class="copyright__content"
|
||||
>© {{ 'now' | date: '%Y' }}, {{ shop.name | link_to: routes.root_url -}}
|
||||
</small>
|
||||
<small class="copyright__content">{{ powered_by_link }}</small>
|
||||
{%- if section.settings.show_policy -%}
|
||||
<ul class="policies list-unstyled">
|
||||
{%- for policy in shop.policies -%}
|
||||
{%- if policy != blank -%}
|
||||
<li>
|
||||
<small class="copyright__content"
|
||||
><a href="{{ policy.url }}">{{ policy.title | escape }}</a></small
|
||||
>
|
||||
</li>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.footer.name",
|
||||
"blocks": [
|
||||
{
|
||||
"type": "@app"
|
||||
},
|
||||
{
|
||||
"type": "link_list",
|
||||
"name": "t:sections.footer.blocks.link_list.name",
|
||||
"settings": [
|
||||
{
|
||||
"type": "inline_richtext",
|
||||
"id": "heading",
|
||||
"default": "t:sections.footer.blocks.link_list.settings.heading.default",
|
||||
"label": "t:sections.footer.blocks.link_list.settings.heading.label"
|
||||
},
|
||||
{
|
||||
"type": "link_list",
|
||||
"id": "menu",
|
||||
"default": "footer",
|
||||
"label": "t:sections.footer.blocks.link_list.settings.menu.label"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "brand_information",
|
||||
"name": "t:sections.footer.blocks.brand_information.name",
|
||||
"settings": [
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": "t:sections.footer.blocks.brand_information.settings.paragraph.content"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_social",
|
||||
"default": true,
|
||||
"label": "t:sections.footer.blocks.brand_information.settings.show_social.label",
|
||||
"info": "t:sections.footer.blocks.brand_information.settings.show_social.info"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"name": "t:sections.footer.blocks.text.name",
|
||||
"settings": [
|
||||
{
|
||||
"type": "inline_richtext",
|
||||
"id": "heading",
|
||||
"default": "t:sections.footer.blocks.text.settings.heading.default",
|
||||
"label": "t:sections.footer.blocks.text.settings.heading.label"
|
||||
},
|
||||
{
|
||||
"type": "richtext",
|
||||
"id": "subtext",
|
||||
"default": "t:sections.footer.blocks.text.settings.subtext.default",
|
||||
"label": "t:sections.footer.blocks.text.settings.subtext.label"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "image",
|
||||
"name": "Image",
|
||||
"settings": [
|
||||
{
|
||||
"type": "image_picker",
|
||||
"id": "image",
|
||||
"label": "Image"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "image_width",
|
||||
"min": 50,
|
||||
"max": 550,
|
||||
"step": 5,
|
||||
"unit": "px",
|
||||
"label": "Width",
|
||||
"default": 100
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "alignment",
|
||||
"label": "Alignment",
|
||||
"options": [
|
||||
{
|
||||
"value": "",
|
||||
"label": "Left"
|
||||
},
|
||||
{
|
||||
"value": "center",
|
||||
"label": "Center"
|
||||
},
|
||||
{
|
||||
"value": "right",
|
||||
"label": "Right"
|
||||
}
|
||||
],
|
||||
"default": "center"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"settings": [
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"default": "scheme-1"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.footer.settings.header__1.content",
|
||||
"info": "t:sections.footer.settings.header__1.info"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "newsletter_enable",
|
||||
"default": true,
|
||||
"label": "t:sections.footer.settings.newsletter_enable.label"
|
||||
},
|
||||
{
|
||||
"type": "inline_richtext",
|
||||
"id": "newsletter_heading",
|
||||
"default": "t:sections.footer.settings.newsletter_heading.default",
|
||||
"label": "t:sections.footer.settings.newsletter_heading.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.footer.settings.header__9.content"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "enable_follow_on_shop",
|
||||
"default": true,
|
||||
"label": "t:sections.footer.settings.enable_follow_on_shop.label",
|
||||
"info": "t:sections.footer.settings.enable_follow_on_shop.info"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_social",
|
||||
"default": true,
|
||||
"label": "t:sections.footer.settings.show_social.label",
|
||||
"info": "t:sections.footer.settings.show_social.info"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "enable_country_selector",
|
||||
"default": true,
|
||||
"label": "t:sections.footer.settings.enable_country_selector.label",
|
||||
"info": "t:sections.footer.settings.enable_country_selector.info"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "enable_language_selector",
|
||||
"default": true,
|
||||
"label": "t:sections.footer.settings.enable_language_selector.label",
|
||||
"info": "t:sections.footer.settings.enable_language_selector.info"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "payment_enable",
|
||||
"default": true,
|
||||
"label": "t:sections.footer.settings.payment_enable.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_policy",
|
||||
"default": true,
|
||||
"label": "t:sections.footer.settings.show_policy.label",
|
||||
"info": "t:sections.footer.settings.show_policy.info"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.spacing"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "margin_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.footer.settings.margin_top.label",
|
||||
"default": 0
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 36
|
||||
}
|
||||
],
|
||||
"default": {
|
||||
"blocks": [
|
||||
{
|
||||
"type": "link_list"
|
||||
},
|
||||
{
|
||||
"type": "text"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1 @@
|
||||
{"name":"t:sections.header.name","type":"header","sections":{"announcement-bar":{"type":"announcement-bar","blocks":{"announcement-bar-0":{"type":"announcement","disabled":true,"settings":{"text":"Willkommen bei LInumIQ","link":""}}},"block_order":["announcement-bar-0"],"settings":{"auto_rotate":false,"change_slides_speed":5,"color_scheme":"scheme-1","show_line_separator":true,"show_social":false,"enable_country_selector":false,"enable_language_selector":false}},"header":{"type":"header","settings":{"logo_position":"middle-left","mobile_logo_position":"center","menu":"main-menu","menu_type_desktop":"dropdown","sticky_header_type":"on-scroll-up","show_line_separator":true,"color_scheme":"scheme-1","menu_color_scheme":"scheme-1","enable_country_selector":true,"enable_language_selector":true,"enable_customer_avatar":true,"margin_bottom":0,"padding_top":20,"padding_bottom":20}},"linumiq_hero_2_EPAYeA":{"type":"linumiq-hero-2","disabled":true,"name":"Hero","settings":{"heading":"Dein Smart Home","subheading":"Einfach. Sicher. Offline.","text":"","content_alignment":"center","section_height":500,"background_image":"shopify:\/\/shop_images\/hero.png","overlay_color":"#000000","overlay_opacity":70,"heading_size":66,"heading_color":"#5e9ff4","subheading_size":46,"subheading_color":"#cad4e1","text_size":24,"text_color":"#c1cade"}}},"order":["announcement-bar","header","linumiq_hero_2_EPAYeA"]}
|
||||
@@ -0,0 +1,658 @@
|
||||
<link rel="stylesheet" href="{{ 'component-list-menu.css' | asset_url }}" media="print" onload="this.media='all'">
|
||||
<link rel="stylesheet" href="{{ 'component-search.css' | asset_url }}" media="print" onload="this.media='all'">
|
||||
<link rel="stylesheet" href="{{ 'component-menu-drawer.css' | asset_url }}" media="print" onload="this.media='all'">
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="{{ 'component-cart-notification.css' | asset_url }}"
|
||||
media="print"
|
||||
onload="this.media='all'"
|
||||
>
|
||||
|
||||
{%- if settings.predictive_search_enabled -%}
|
||||
<link rel="stylesheet" href="{{ 'component-price.css' | asset_url }}" media="print" onload="this.media='all'">
|
||||
{%- endif -%}
|
||||
|
||||
{%- if section.settings.menu_type_desktop == 'mega' -%}
|
||||
<link rel="stylesheet" href="{{ 'component-mega-menu.css' | asset_url }}" media="print" onload="this.media='all'">
|
||||
{%- endif -%}
|
||||
|
||||
<style>
|
||||
header-drawer {
|
||||
justify-self: start;
|
||||
margin-left: -1.2rem;
|
||||
}
|
||||
|
||||
{%- if section.settings.sticky_header_type == 'reduce-logo-size' -%}
|
||||
.scrolled-past-header .header__heading-logo-wrapper {
|
||||
width: 75%;
|
||||
}
|
||||
{%- endif -%}
|
||||
|
||||
{%- if section.settings.menu_type_desktop != "drawer" -%}
|
||||
@media screen and (min-width: 990px) {
|
||||
header-drawer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
{%- endif -%}
|
||||
|
||||
.menu-drawer-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.list-menu {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.list-menu--inline {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
summary.list-menu__item {
|
||||
padding-right: 2.7rem;
|
||||
}
|
||||
|
||||
.list-menu__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: calc(1 + 0.3 / var(--font-body-scale));
|
||||
}
|
||||
|
||||
.list-menu__item--link {
|
||||
text-decoration: none;
|
||||
padding-bottom: 1rem;
|
||||
padding-top: 1rem;
|
||||
line-height: calc(1 + 0.8 / var(--font-body-scale));
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.list-menu__item--link {
|
||||
padding-bottom: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{%- style -%}
|
||||
.header {
|
||||
padding: {{ section.settings.padding_top | times: 0.5 | round: 0 }}px 3rem {{ section.settings.padding_bottom | times: 0.5 | round: 0 }}px 3rem;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
position: sticky; /* This is for fixing a Safari z-index issue. PR #2147 */
|
||||
margin-bottom: {{ section.settings.margin_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-header {
|
||||
margin-bottom: {{ section.settings.margin_bottom }}px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 990px) {
|
||||
.header {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
<script src="{{ 'cart-notification.js' | asset_url }}" defer="defer"></script>
|
||||
|
||||
{%- liquid
|
||||
for block in section.blocks
|
||||
if block.type == '@app'
|
||||
assign has_app_block = true
|
||||
endif
|
||||
endfor
|
||||
-%}
|
||||
|
||||
{% liquid
|
||||
assign header_tag = 'div'
|
||||
|
||||
if section.settings.sticky_header_type != 'none'
|
||||
assign header_tag = 'sticky-header'
|
||||
endif
|
||||
%}
|
||||
|
||||
<{{ header_tag }}
|
||||
{% if header_tag == 'sticky-header' %}
|
||||
data-sticky-type="{{ section.settings.sticky_header_type }}"
|
||||
{% endif %}
|
||||
class="header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}"
|
||||
>
|
||||
{%- liquid
|
||||
assign social_links = false
|
||||
assign localization_forms = false
|
||||
|
||||
if settings.social_twitter_link != blank or settings.social_facebook_link != blank or settings.social_pinterest_link != blank or settings.social_instagram_link != blank or settings.social_youtube_link != blank or settings.social_vimeo_link != blank or settings.social_tiktok_link != blank or settings.social_tumblr_link != blank or settings.social_snapchat_link != blank
|
||||
assign social_links = true
|
||||
endif
|
||||
|
||||
if localization.available_countries.size > 1 and section.settings.enable_country_selector or section.settings.enable_language_selector and localization.available_languages.size > 1
|
||||
assign localization_forms = true
|
||||
endif
|
||||
-%}
|
||||
<header class="header header--{{ section.settings.logo_position }} header--mobile-{{ section.settings.mobile_logo_position }} page-width{% if section.settings.menu_type_desktop == 'drawer' %} drawer-menu{% endif %}{% if section.settings.menu != blank %} header--has-menu{% endif %}{% if has_app_block %} header--has-app{% endif %}{% if social_links %} header--has-social{% endif %}{% if shop.customer_accounts_enabled %} header--has-account{% endif %}{% if localization_forms %} header--has-localizations{% endif %}">
|
||||
{%- liquid
|
||||
if section.settings.menu != blank
|
||||
render 'header-drawer'
|
||||
endif
|
||||
|
||||
if section.settings.logo_position == 'top-center' or section.settings.menu == blank
|
||||
render 'header-search', input_id: 'Search-In-Modal-1'
|
||||
endif
|
||||
-%}
|
||||
|
||||
{%- if section.settings.logo_position != 'middle-center' -%}
|
||||
{%- if request.page_type == 'index' -%}
|
||||
<h1 class="header__heading">
|
||||
{%- endif -%}
|
||||
<a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset">
|
||||
{%- if settings.logo != blank -%}
|
||||
<div class="header__heading-logo-wrapper">
|
||||
{%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%}
|
||||
{%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
|
||||
{% capture sizes %}(max-width: {{ settings.logo_width | times: 2 }}px) 50vw, {{ settings.logo_width }}px{% endcapture %}
|
||||
{% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %}
|
||||
{{
|
||||
settings.logo
|
||||
| image_url: width: 600
|
||||
| image_tag:
|
||||
class: 'header__heading-logo motion-reduce',
|
||||
widths: widths,
|
||||
height: logo_height,
|
||||
width: settings.logo_width,
|
||||
alt: logo_alt,
|
||||
sizes: sizes,
|
||||
preload: true
|
||||
}}
|
||||
</div>
|
||||
{%- else -%}
|
||||
<span class="h2">{{ shop.name }}</span>
|
||||
{%- endif -%}
|
||||
</a>
|
||||
{%- if request.page_type == 'index' -%}
|
||||
</h1>
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
|
||||
{%- liquid
|
||||
if section.settings.menu != blank
|
||||
if section.settings.menu_type_desktop == 'dropdown'
|
||||
render 'header-dropdown-menu'
|
||||
elsif section.settings.menu_type_desktop != 'drawer'
|
||||
render 'header-mega-menu'
|
||||
endif
|
||||
endif
|
||||
%}
|
||||
|
||||
{%- if section.settings.logo_position == 'middle-center' -%}
|
||||
{%- if request.page_type == 'index' -%}
|
||||
<h1 class="header__heading">
|
||||
{%- endif -%}
|
||||
<a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset">
|
||||
{%- if settings.logo != blank -%}
|
||||
<div class="header__heading-logo-wrapper">
|
||||
{%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%}
|
||||
{%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
|
||||
{% capture sizes %}(min-width: 750px) {{ settings.logo_width }}px, 50vw{% endcapture %}
|
||||
{% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %}
|
||||
{{
|
||||
settings.logo
|
||||
| image_url: width: 600
|
||||
| image_tag:
|
||||
class: 'header__heading-logo',
|
||||
widths: widths,
|
||||
height: logo_height,
|
||||
width: settings.logo_width,
|
||||
alt: logo_alt,
|
||||
sizes: sizes,
|
||||
preload: true
|
||||
}}
|
||||
</div>
|
||||
{%- else -%}
|
||||
<span class="h2">{{ shop.name }}</span>
|
||||
{%- endif -%}
|
||||
</a>
|
||||
{%- if request.page_type == 'index' -%}
|
||||
</h1>
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
|
||||
<div class="header__icons{% if section.settings.enable_country_selector or section.settings.enable_language_selector %} header__icons--localization header-localization{% endif %}">
|
||||
<div class="desktop-localization-wrapper">
|
||||
{%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
|
||||
<localization-form class="small-hide medium-hide" data-prevent-hide>
|
||||
{%- form 'localization', id: 'HeaderCountryForm', class: 'localization-form' -%}
|
||||
<div>
|
||||
<h2 class="visually-hidden" id="HeaderCountryLabel">{{ 'localization.country_label' | t }}</h2>
|
||||
{%- render 'country-localization', localPosition: 'HeaderCountry' -%}
|
||||
</div>
|
||||
{%- endform -%}
|
||||
</localization-form>
|
||||
{% endif %}
|
||||
|
||||
{%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
|
||||
<localization-form class="small-hide medium-hide" data-prevent-hide>
|
||||
{%- form 'localization', id: 'HeaderLanguageForm', class: 'localization-form' -%}
|
||||
<div>
|
||||
<h2 class="visually-hidden" id="HeaderLanguageLabel">{{ 'localization.language_label' | t }}</h2>
|
||||
{%- render 'language-localization', localPosition: 'HeaderLanguage' -%}
|
||||
</div>
|
||||
{%- endform -%}
|
||||
</localization-form>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{% render 'header-search', input_id: 'Search-In-Modal' %}
|
||||
|
||||
{%- if shop.customer_accounts_enabled -%}
|
||||
<a
|
||||
href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}"
|
||||
class="header__icon header__icon--account link focus-inset{% if section.settings.menu != blank %} small-hide{% endif %}"
|
||||
rel="nofollow"
|
||||
>
|
||||
{%- if section.settings.enable_customer_avatar -%}
|
||||
<account-icon>
|
||||
{%- if customer and customer.has_avatar? -%}
|
||||
{{ customer | avatar }}
|
||||
{%- else -%}
|
||||
<span class="svg-wrapper">{{ 'icon-account.svg' | inline_asset_content }}</span>
|
||||
{%- endif -%}
|
||||
</account-icon>
|
||||
{%- else -%}
|
||||
<span class="svg-wrapper">{{ 'icon-account.svg' | inline_asset_content }}</span>
|
||||
{%- endif -%}
|
||||
<span class="visually-hidden">
|
||||
{%- liquid
|
||||
if customer
|
||||
echo 'customer.account_fallback' | t
|
||||
else
|
||||
echo 'customer.log_in' | t
|
||||
endif
|
||||
-%}
|
||||
</span>
|
||||
</a>
|
||||
{%- endif -%}
|
||||
|
||||
{%- for block in section.blocks -%}
|
||||
{%- case block.type -%}
|
||||
{%- when '@app' -%}
|
||||
{% render block %}
|
||||
{%- endcase -%}
|
||||
{%- endfor -%}
|
||||
|
||||
<a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">
|
||||
{% if cart == empty %}
|
||||
<span class="svg-wrapper">{{ 'icon-cart-empty.svg' | inline_asset_content }}</span>
|
||||
{% else %}
|
||||
<span class="svg-wrapper">{{ 'icon-cart.svg' | inline_asset_content }}</span>
|
||||
{% endif %}
|
||||
<span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>
|
||||
{%- if cart != empty -%}
|
||||
<div class="cart-count-bubble">
|
||||
{%- if cart.item_count < 100 -%}
|
||||
<span aria-hidden="true">{{ cart.item_count }}</span>
|
||||
{%- endif -%}
|
||||
<span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
</{{ header_tag }}>
|
||||
|
||||
{%- if settings.cart_type == 'notification' -%}
|
||||
{%- render 'cart-notification',
|
||||
color_scheme: section.settings.color_scheme,
|
||||
desktop_menu_type: section.settings.menu_type_desktop
|
||||
-%}
|
||||
{%- endif -%}
|
||||
|
||||
{% javascript %}
|
||||
class StickyHeader extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.header = document.querySelector('.section-header');
|
||||
this.headerIsAlwaysSticky =
|
||||
this.getAttribute('data-sticky-type') === 'always' ||
|
||||
this.getAttribute('data-sticky-type') === 'reduce-logo-size';
|
||||
this.headerBounds = {};
|
||||
|
||||
this.setHeaderHeight();
|
||||
|
||||
window.matchMedia('(max-width: 990px)').addEventListener('change', this.setHeaderHeight.bind(this));
|
||||
|
||||
if (this.headerIsAlwaysSticky) {
|
||||
this.header.classList.add('shopify-section-header-sticky');
|
||||
}
|
||||
|
||||
this.currentScrollTop = 0;
|
||||
this.preventReveal = false;
|
||||
this.predictiveSearch = this.querySelector('predictive-search');
|
||||
|
||||
this.onScrollHandler = this.onScroll.bind(this);
|
||||
this.hideHeaderOnScrollUp = () => (this.preventReveal = true);
|
||||
|
||||
this.addEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
|
||||
window.addEventListener('scroll', this.onScrollHandler, false);
|
||||
|
||||
this.createObserver();
|
||||
}
|
||||
|
||||
setHeaderHeight() {
|
||||
document.documentElement.style.setProperty('--header-height', `${this.header.offsetHeight}px`);
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this.removeEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
|
||||
window.removeEventListener('scroll', this.onScrollHandler);
|
||||
}
|
||||
|
||||
createObserver() {
|
||||
let observer = new IntersectionObserver((entries, observer) => {
|
||||
this.headerBounds = entries[0].intersectionRect;
|
||||
observer.disconnect();
|
||||
});
|
||||
|
||||
observer.observe(this.header);
|
||||
}
|
||||
|
||||
onScroll() {
|
||||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
|
||||
if (this.predictiveSearch && this.predictiveSearch.isOpen) return;
|
||||
|
||||
if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
|
||||
this.header.classList.add('scrolled-past-header');
|
||||
if (this.preventHide) return;
|
||||
requestAnimationFrame(this.hide.bind(this));
|
||||
} else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
|
||||
this.header.classList.add('scrolled-past-header');
|
||||
if (!this.preventReveal) {
|
||||
requestAnimationFrame(this.reveal.bind(this));
|
||||
} else {
|
||||
window.clearTimeout(this.isScrolling);
|
||||
|
||||
this.isScrolling = setTimeout(() => {
|
||||
this.preventReveal = false;
|
||||
}, 66);
|
||||
|
||||
requestAnimationFrame(this.hide.bind(this));
|
||||
}
|
||||
} else if (scrollTop <= this.headerBounds.top) {
|
||||
this.header.classList.remove('scrolled-past-header');
|
||||
requestAnimationFrame(this.reset.bind(this));
|
||||
}
|
||||
|
||||
this.currentScrollTop = scrollTop;
|
||||
}
|
||||
|
||||
hide() {
|
||||
if (this.headerIsAlwaysSticky) return;
|
||||
this.header.classList.add('shopify-section-header-hidden', 'shopify-section-header-sticky');
|
||||
this.closeMenuDisclosure();
|
||||
this.closeSearchModal();
|
||||
}
|
||||
|
||||
reveal() {
|
||||
if (this.headerIsAlwaysSticky) return;
|
||||
this.header.classList.add('shopify-section-header-sticky', 'animate');
|
||||
this.header.classList.remove('shopify-section-header-hidden');
|
||||
}
|
||||
|
||||
reset() {
|
||||
if (this.headerIsAlwaysSticky) return;
|
||||
this.header.classList.remove('shopify-section-header-hidden', 'shopify-section-header-sticky', 'animate');
|
||||
}
|
||||
|
||||
closeMenuDisclosure() {
|
||||
this.disclosures = this.disclosures || this.header.querySelectorAll('header-menu');
|
||||
this.disclosures.forEach((disclosure) => disclosure.close());
|
||||
}
|
||||
|
||||
closeSearchModal() {
|
||||
this.searchModal = this.searchModal || this.header.querySelector('details-modal');
|
||||
this.searchModal.close(false);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('sticky-header', StickyHeader);
|
||||
{% endjavascript %}
|
||||
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "Organization",
|
||||
"name": {{ shop.name | json }},
|
||||
{% if settings.logo %}
|
||||
"logo": {{ settings.logo | image_url: width: 500 | prepend: "https:" | json }},
|
||||
{% endif %}
|
||||
"sameAs": [
|
||||
{{ settings.social_twitter_link | json }},
|
||||
{{ settings.social_facebook_link | json }},
|
||||
{{ settings.social_pinterest_link | json }},
|
||||
{{ settings.social_instagram_link | json }},
|
||||
{{ settings.social_tiktok_link | json }},
|
||||
{{ settings.social_tumblr_link | json }},
|
||||
{{ settings.social_snapchat_link | json }},
|
||||
{{ settings.social_youtube_link | json }},
|
||||
{{ settings.social_vimeo_link | json }}
|
||||
],
|
||||
"url": {{ request.origin | append: page.url | json }}
|
||||
}
|
||||
</script>
|
||||
|
||||
{%- if request.page_type == 'index' -%}
|
||||
{% assign potential_action_target = request.origin | append: routes.search_url | append: '?q={search_term_string}' %}
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "WebSite",
|
||||
"name": {{ shop.name | json }},
|
||||
"potentialAction": {
|
||||
"@type": "SearchAction",
|
||||
"target": {{ potential_action_target | json }},
|
||||
"query-input": "required name=search_term_string"
|
||||
},
|
||||
"url": {{ request.origin | append: page.url | json }}
|
||||
}
|
||||
</script>
|
||||
{%- endif -%}
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.header.name",
|
||||
"class": "section-header",
|
||||
"max_blocks": 3,
|
||||
"settings": [
|
||||
{
|
||||
"type": "select",
|
||||
"id": "logo_position",
|
||||
"options": [
|
||||
{
|
||||
"value": "top-left",
|
||||
"label": "t:sections.header.settings.logo_position.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "top-center",
|
||||
"label": "t:sections.header.settings.logo_position.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "middle-left",
|
||||
"label": "t:sections.header.settings.logo_position.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "middle-center",
|
||||
"label": "t:sections.header.settings.logo_position.options__4.label"
|
||||
}
|
||||
],
|
||||
"default": "middle-left",
|
||||
"label": "t:sections.header.settings.logo_position.label",
|
||||
"info": "t:sections.header.settings.logo_help.content"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "mobile_logo_position",
|
||||
"options": [
|
||||
{
|
||||
"value": "center",
|
||||
"label": "t:sections.header.settings.mobile_logo_position.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "left",
|
||||
"label": "t:sections.header.settings.mobile_logo_position.options__2.label"
|
||||
}
|
||||
],
|
||||
"default": "center",
|
||||
"label": "t:sections.header.settings.mobile_logo_position.label"
|
||||
},
|
||||
{
|
||||
"type": "link_list",
|
||||
"id": "menu",
|
||||
"default": "main-menu",
|
||||
"label": "t:sections.header.settings.menu.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "menu_type_desktop",
|
||||
"options": [
|
||||
{
|
||||
"value": "dropdown",
|
||||
"label": "t:sections.header.settings.menu_type_desktop.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "mega",
|
||||
"label": "t:sections.header.settings.menu_type_desktop.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "drawer",
|
||||
"label": "t:sections.header.settings.menu_type_desktop.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "dropdown",
|
||||
"label": "t:sections.header.settings.menu_type_desktop.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "sticky_header_type",
|
||||
"options": [
|
||||
{
|
||||
"value": "none",
|
||||
"label": "t:sections.header.settings.sticky_header_type.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "on-scroll-up",
|
||||
"label": "t:sections.header.settings.sticky_header_type.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "always",
|
||||
"label": "t:sections.header.settings.sticky_header_type.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "reduce-logo-size",
|
||||
"label": "t:sections.header.settings.sticky_header_type.options__4.label"
|
||||
}
|
||||
],
|
||||
"default": "on-scroll-up",
|
||||
"label": "t:sections.header.settings.sticky_header_type.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_line_separator",
|
||||
"default": true,
|
||||
"label": "t:sections.header.settings.show_line_separator.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.header.settings.header__1.content"
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"default": "scheme-1"
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "menu_color_scheme",
|
||||
"label": "t:sections.header.settings.menu_color_scheme.label",
|
||||
"default": "scheme-1"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.header.settings.header__utilities.content"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "enable_country_selector",
|
||||
"default": true,
|
||||
"label": "t:sections.header.settings.enable_country_selector.label",
|
||||
"info": "t:sections.header.settings.enable_country_selector.info"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "enable_language_selector",
|
||||
"default": true,
|
||||
"label": "t:sections.header.settings.enable_language_selector.label",
|
||||
"info": "t:sections.header.settings.enable_language_selector.info"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "enable_customer_avatar",
|
||||
"default": true,
|
||||
"label": "t:sections.header.settings.enable_customer_avatar.label",
|
||||
"info": "t:sections.header.settings.enable_customer_avatar.info"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.spacing"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "margin_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.header.settings.margin_bottom.label",
|
||||
"default": 0
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 36,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 20
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 36,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 20
|
||||
}
|
||||
],
|
||||
"blocks": [
|
||||
{
|
||||
"type": "@app"
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,507 @@
|
||||
{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- if section.settings.image_height == 'adapt' and section.settings.image != blank -%}
|
||||
{%- style -%}
|
||||
@media screen and (max-width: 749px) {
|
||||
#Banner-{{ section.id }}::before,
|
||||
#Banner-{{ section.id }} .banner__media::before,
|
||||
#Banner-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
|
||||
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
#Banner-{{ section.id }}::before,
|
||||
#Banner-{{ section.id }} .banner__media::before {
|
||||
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
{%- endif -%}
|
||||
|
||||
{%- style -%}
|
||||
#Banner-{{ section.id }}::after {
|
||||
opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
{%- liquid
|
||||
assign full_width = '100vw'
|
||||
assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
|
||||
|
||||
if section.settings.image_behavior == 'ambient'
|
||||
assign half_width = '60vw'
|
||||
assign full_width = '120vw'
|
||||
assign stacked_sizes = '(min-width: 750px) 60vw, 120vw'
|
||||
assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
|
||||
elsif section.settings.image_behavior == 'fixed' or section.settings.image_behavior == 'zoom-in'
|
||||
assign half_width = '100vw'
|
||||
assign stacked_sizes = '100vw'
|
||||
else
|
||||
assign half_width = '50vw'
|
||||
assign stacked_sizes = '(min-width: 750px) 50vw, 100vw'
|
||||
endif
|
||||
assign fetch_priority = 'auto'
|
||||
if section.index == 1
|
||||
assign fetch_priority = 'high'
|
||||
endif
|
||||
-%}
|
||||
|
||||
<div
|
||||
id="Banner-{{ section.id }}"
|
||||
class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.image_height == 'adapt' and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
|
||||
>
|
||||
{%- if section.settings.image != blank -%}
|
||||
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
|
||||
{%- liquid
|
||||
assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
|
||||
if section.settings.image_2 != blank
|
||||
assign image_class = 'banner__media-image-half'
|
||||
endif
|
||||
if section.settings.image_2 != blank and section.settings.stack_images_on_mobile
|
||||
assign sizes = stacked_sizes
|
||||
elsif section.settings.image_2 != blank
|
||||
assign sizes = half_width
|
||||
else
|
||||
assign sizes = full_width
|
||||
endif
|
||||
-%}
|
||||
{{
|
||||
section.settings.image
|
||||
| image_url: width: 3840
|
||||
| image_tag:
|
||||
width: section.settings.image.width,
|
||||
height: image_height,
|
||||
class: image_class,
|
||||
sizes: sizes,
|
||||
widths: widths,
|
||||
fetchpriority: fetch_priority
|
||||
}}
|
||||
</div>
|
||||
{%- elsif section.settings.image_2 == blank -%}
|
||||
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
|
||||
{{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- if section.settings.image_2 != blank -%}
|
||||
<div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
|
||||
{%- liquid
|
||||
assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
|
||||
if section.settings.image != blank
|
||||
assign image_class_2 = 'banner__media-image-half'
|
||||
endif
|
||||
if section.settings.image != blank and section.settings.stack_images_on_mobile
|
||||
assign sizes = stacked_sizes
|
||||
elsif section.settings.image_2 != blank
|
||||
assign sizes = half_width
|
||||
else
|
||||
assign sizes = full_width
|
||||
endif
|
||||
-%}
|
||||
{{
|
||||
section.settings.image_2
|
||||
| image_url: width: 3840
|
||||
| image_tag:
|
||||
width: section.settings.image_2.width,
|
||||
height: image_height_2,
|
||||
class: image_class_2,
|
||||
sizes: sizes,
|
||||
widths: widths,
|
||||
fetchpriority: fetch_priority
|
||||
}}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
<div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
|
||||
<div class="banner__box content-container content-container--full-width-mobile color-{{ section.settings.color_scheme }} gradient">
|
||||
{%- for block in section.blocks -%}
|
||||
{%- case block.type -%}
|
||||
{%- when 'heading' -%}
|
||||
<h2
|
||||
class="banner__heading inline-richtext {{ block.settings.heading_size }}"
|
||||
{{ block.shopify_attributes }}
|
||||
>
|
||||
{{ block.settings.heading }}
|
||||
</h2>
|
||||
{%- when 'text' -%}
|
||||
<div class="banner__text rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
|
||||
<p>{{ block.settings.text }}</p>
|
||||
</div>
|
||||
{%- when 'buttons' -%}
|
||||
<div
|
||||
class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_label_2 != blank %} banner__buttons--multiple{% endif %}"
|
||||
{{ block.shopify_attributes }}
|
||||
>
|
||||
{%- if block.settings.button_label_1 != blank -%}
|
||||
<a
|
||||
{% if block.settings.button_link_1 == blank %}
|
||||
role="link" aria-disabled="true"
|
||||
{% else %}
|
||||
href="{{ block.settings.button_link_1 }}"
|
||||
{% endif %}
|
||||
class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}"
|
||||
>
|
||||
{{- block.settings.button_label_1 | escape -}}
|
||||
</a>
|
||||
{%- endif -%}
|
||||
{%- if block.settings.button_label_2 != blank -%}
|
||||
<a
|
||||
{% if block.settings.button_link_2 == blank %}
|
||||
role="link" aria-disabled="true"
|
||||
{% else %}
|
||||
href="{{ block.settings.button_link_2 }}"
|
||||
{% endif %}
|
||||
class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}"
|
||||
>
|
||||
{{- block.settings.button_label_2 | escape -}}
|
||||
</a>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- endcase -%}
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.image-banner.name",
|
||||
"tag": "section",
|
||||
"class": "section",
|
||||
"disabled_on": {
|
||||
"groups": ["header", "footer"]
|
||||
},
|
||||
"settings": [
|
||||
{
|
||||
"type": "image_picker",
|
||||
"id": "image",
|
||||
"label": "t:sections.image-banner.settings.image.label"
|
||||
},
|
||||
{
|
||||
"type": "image_picker",
|
||||
"id": "image_2",
|
||||
"label": "t:sections.image-banner.settings.image_2.label"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "image_overlay_opacity",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 10,
|
||||
"unit": "%",
|
||||
"label": "t:sections.image-banner.settings.image_overlay_opacity.label",
|
||||
"default": 0
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "image_height",
|
||||
"options": [
|
||||
{
|
||||
"value": "adapt",
|
||||
"label": "t:sections.image-banner.settings.image_height.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "small",
|
||||
"label": "t:sections.image-banner.settings.image_height.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "medium",
|
||||
"label": "t:sections.image-banner.settings.image_height.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "large",
|
||||
"label": "t:sections.image-banner.settings.image_height.options__4.label"
|
||||
}
|
||||
],
|
||||
"default": "medium",
|
||||
"label": "t:sections.image-banner.settings.image_height.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "image_behavior",
|
||||
"options": [
|
||||
{
|
||||
"value": "none",
|
||||
"label": "t:sections.all.animation.image_behavior.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "ambient",
|
||||
"label": "t:sections.all.animation.image_behavior.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "fixed",
|
||||
"label": "t:sections.all.animation.image_behavior.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "zoom-in",
|
||||
"label": "t:sections.all.animation.image_behavior.options__4.label"
|
||||
}
|
||||
],
|
||||
"default": "none",
|
||||
"label": "t:sections.all.animation.image_behavior.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.image-banner.settings.content.content"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "desktop_content_position",
|
||||
"options": [
|
||||
{
|
||||
"value": "top-left",
|
||||
"label": "t:sections.image-banner.settings.desktop_content_position.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "top-center",
|
||||
"label": "t:sections.image-banner.settings.desktop_content_position.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "top-right",
|
||||
"label": "t:sections.image-banner.settings.desktop_content_position.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "middle-left",
|
||||
"label": "t:sections.image-banner.settings.desktop_content_position.options__4.label"
|
||||
},
|
||||
{
|
||||
"value": "middle-center",
|
||||
"label": "t:sections.image-banner.settings.desktop_content_position.options__5.label"
|
||||
},
|
||||
{
|
||||
"value": "middle-right",
|
||||
"label": "t:sections.image-banner.settings.desktop_content_position.options__6.label"
|
||||
},
|
||||
{
|
||||
"value": "bottom-left",
|
||||
"label": "t:sections.image-banner.settings.desktop_content_position.options__7.label"
|
||||
},
|
||||
{
|
||||
"value": "bottom-center",
|
||||
"label": "t:sections.image-banner.settings.desktop_content_position.options__8.label"
|
||||
},
|
||||
{
|
||||
"value": "bottom-right",
|
||||
"label": "t:sections.image-banner.settings.desktop_content_position.options__9.label"
|
||||
}
|
||||
],
|
||||
"default": "middle-center",
|
||||
"label": "t:sections.image-banner.settings.desktop_content_position.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "desktop_content_alignment",
|
||||
"options": [
|
||||
{
|
||||
"value": "left",
|
||||
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "center",
|
||||
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "right",
|
||||
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "center",
|
||||
"label": "t:sections.image-banner.settings.desktop_content_alignment.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_text_box",
|
||||
"default": true,
|
||||
"label": "t:sections.image-banner.settings.show_text_box.label"
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"default": "scheme-1"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.image-banner.settings.mobile.content"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "stack_images_on_mobile",
|
||||
"default": true,
|
||||
"label": "t:sections.image-banner.settings.stack_images_on_mobile.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "mobile_content_alignment",
|
||||
"options": [
|
||||
{
|
||||
"value": "left",
|
||||
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "center",
|
||||
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "right",
|
||||
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "center",
|
||||
"label": "t:sections.image-banner.settings.mobile_content_alignment.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_text_below",
|
||||
"default": true,
|
||||
"label": "t:sections.image-banner.settings.show_text_below.label"
|
||||
}
|
||||
],
|
||||
"blocks": [
|
||||
{
|
||||
"type": "heading",
|
||||
"name": "t:sections.image-banner.blocks.heading.name",
|
||||
"limit": 1,
|
||||
"settings": [
|
||||
{
|
||||
"type": "inline_richtext",
|
||||
"id": "heading",
|
||||
"default": "t:sections.image-banner.blocks.heading.settings.heading.default",
|
||||
"label": "t:sections.image-banner.blocks.heading.settings.heading.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "heading_size",
|
||||
"options": [
|
||||
{
|
||||
"value": "h2",
|
||||
"label": "t:sections.all.heading_size.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "h1",
|
||||
"label": "t:sections.all.heading_size.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "h0",
|
||||
"label": "t:sections.all.heading_size.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "hxl",
|
||||
"label": "t:sections.all.heading_size.options__4.label"
|
||||
},
|
||||
{
|
||||
"value": "hxxl",
|
||||
"label": "t:sections.all.heading_size.options__5.label"
|
||||
}
|
||||
],
|
||||
"default": "h1",
|
||||
"label": "t:sections.all.heading_size.label"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"name": "t:sections.image-banner.blocks.text.name",
|
||||
"limit": 1,
|
||||
"settings": [
|
||||
{
|
||||
"type": "inline_richtext",
|
||||
"id": "text",
|
||||
"default": "t:sections.image-banner.blocks.text.settings.text.default",
|
||||
"label": "t:sections.image-banner.blocks.text.settings.text.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "text_style",
|
||||
"options": [
|
||||
{
|
||||
"value": "body",
|
||||
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "subtitle",
|
||||
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "caption-with-letter-spacing",
|
||||
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "body",
|
||||
"label": "t:sections.image-banner.blocks.text.settings.text_style.label"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "buttons",
|
||||
"name": "t:sections.image-banner.blocks.buttons.name",
|
||||
"limit": 1,
|
||||
"settings": [
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.image-banner.blocks.buttons.settings.header_1.content"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "button_label_1",
|
||||
"default": "t:sections.image-banner.blocks.buttons.settings.button_label_1.default",
|
||||
"label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
|
||||
"info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
|
||||
},
|
||||
{
|
||||
"type": "url",
|
||||
"id": "button_link_1",
|
||||
"label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "button_style_secondary_1",
|
||||
"default": false,
|
||||
"label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.image-banner.blocks.buttons.settings.header_2.content"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "button_label_2",
|
||||
"default": "t:sections.image-banner.blocks.buttons.settings.button_label_2.default",
|
||||
"label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
|
||||
"info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info"
|
||||
},
|
||||
{
|
||||
"type": "url",
|
||||
"id": "button_link_2",
|
||||
"label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "button_style_secondary_2",
|
||||
"default": false,
|
||||
"label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "t:sections.image-banner.presets.name",
|
||||
"blocks": [
|
||||
{
|
||||
"type": "heading"
|
||||
},
|
||||
{
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"type": "buttons"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,487 @@
|
||||
{{ 'component-image-with-text.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
{%- liquid
|
||||
assign fetch_priority = 'auto'
|
||||
if section.index == 1
|
||||
assign fetch_priority = 'high'
|
||||
endif
|
||||
if section.settings.color_scheme == section.settings.section_color_scheme and section.settings.content_layout == 'no-overlap'
|
||||
assign remove_color_classes = true
|
||||
endif
|
||||
-%}
|
||||
|
||||
<div class="section-{{ section.id }}-padding gradient color-{{ section.settings.section_color_scheme }}">
|
||||
<div class="page-width">
|
||||
<div class="image-with-text image-with-text--{{ section.settings.content_layout }} isolate{% if settings.text_boxes_border_thickness > 0 and settings.text_boxes_border_opacity > 0 and settings.media_border_thickness > 0 and settings.media_border_opacity > 0 %} collapse-borders{% endif %}{% unless section.settings.color_scheme == section.settings.section_color_scheme and settings.media_border_thickness > 0 and settings.text_boxes_shadow_opacity == 0 and settings.text_boxes_border_thickness == 0 or settings.text_boxes_border_opacity == 0 %} collapse-corners{% endunless %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
|
||||
<div class="image-with-text__grid grid grid--gapless grid--1-col grid--{% if section.settings.desktop_image_width == 'medium' %}2-col-tablet{% else %}3-col-tablet{% endif %}{% if section.settings.layout == 'text_first' %} image-with-text__grid--reverse{% endif %}">
|
||||
<div class="image-with-text__media-item image-with-text__media-item--{{ section.settings.desktop_image_width }} image-with-text__media-item--{{ section.settings.desktop_content_position }} grid__item">
|
||||
<div
|
||||
class="image-with-text__media image-with-text__media--{{ section.settings.height }} global-media-settings{% unless remove_color_classes %} gradient color-{{ section.settings.color_scheme }}{% else %} background-transparent{% endunless %}{% if section.settings.image != blank %} media{% else %} image-with-text__media--placeholder placeholder{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}"
|
||||
{% if section.settings.height == 'adapt' and section.settings.image != blank %}
|
||||
style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"
|
||||
{% endif %}
|
||||
>
|
||||
{%- if section.settings.image != blank -%}
|
||||
{%- if section.settings.image_behavior == 'ambient' or section.settings.image_behavior == 'zoom-in' -%}
|
||||
{%- assign widths = '198, 432, 642, 900, 1284, 1800' -%}
|
||||
{%- capture sizes -%}
|
||||
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1.6667 }}px,
|
||||
(min-width: 750px) calc((100vw - 130px) / 1.667), calc((100vw - 50px) / 1.667)
|
||||
{%- endcapture -%}
|
||||
{%- else -%}
|
||||
{%- assign widths = '165, 360, 535, 750, 1070, 1500' -%}
|
||||
{%- capture sizes -%}
|
||||
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px,
|
||||
(min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)
|
||||
{%- endcapture -%}
|
||||
{%- endif -%}
|
||||
{{
|
||||
section.settings.image
|
||||
| image_url: width: 1500
|
||||
| image_tag: sizes: sizes, widths: widths, fetchpriority: fetch_priority
|
||||
}}
|
||||
{%- else -%}
|
||||
{{ 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-with-text__text-item grid__item">
|
||||
<div
|
||||
id="ImageWithText--{{ section.id }}"
|
||||
class="image-with-text__content image-with-text__content--{{ section.settings.desktop_content_position }} image-with-text__content--desktop-{{ section.settings.desktop_content_alignment }} image-with-text__content--mobile-{{ section.settings.mobile_content_alignment }} image-with-text__content--{{ section.settings.height }} content-container{% unless remove_color_classes %} gradient color-{{ section.settings.color_scheme }}{% else %} background-transparent{% endunless %}"
|
||||
>
|
||||
{%- for block in section.blocks -%}
|
||||
{% case block.type %}
|
||||
{%- when 'heading' -%}
|
||||
<h2
|
||||
class="image-with-text__heading inline-richtext {{ block.settings.heading_size }}"
|
||||
{{ block.shopify_attributes }}
|
||||
>
|
||||
{{ block.settings.heading }}
|
||||
</h2>
|
||||
{%- when 'caption' -%}
|
||||
<p
|
||||
class="image-with-text__text image-with-text__text--caption {{ block.settings.text_style }} {{ block.settings.text_style }}--{{ block.settings.text_size }} {{ block.settings.text_style }}"
|
||||
{{ block.shopify_attributes }}
|
||||
>
|
||||
{{ block.settings.caption | escape }}
|
||||
</p>
|
||||
{%- when 'text' -%}
|
||||
<div class="image-with-text__text rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
|
||||
{{ block.settings.text }}
|
||||
</div>
|
||||
{%- when 'button' -%}
|
||||
{%- if block.settings.button_label != blank -%}
|
||||
<a
|
||||
{% if block.settings.button_link == blank %}
|
||||
role="link" aria-disabled="true"
|
||||
{% else %}
|
||||
href="{{ block.settings.button_link }}"
|
||||
{% endif %}
|
||||
class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"
|
||||
{{ block.shopify_attributes }}
|
||||
>
|
||||
{{ block.settings.button_label | escape }}
|
||||
</a>
|
||||
{%- endif -%}
|
||||
{%- endcase -%}
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.image-with-text.name",
|
||||
"class": "section",
|
||||
"disabled_on": {
|
||||
"groups": ["header", "footer"]
|
||||
},
|
||||
"settings": [
|
||||
{
|
||||
"type": "image_picker",
|
||||
"id": "image",
|
||||
"label": "t:sections.image-with-text.settings.image.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "height",
|
||||
"options": [
|
||||
{
|
||||
"value": "adapt",
|
||||
"label": "t:sections.image-with-text.settings.height.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "small",
|
||||
"label": "t:sections.image-with-text.settings.height.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "medium",
|
||||
"label": "t:sections.image-with-text.settings.height.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "large",
|
||||
"label": "t:sections.image-with-text.settings.height.options__4.label"
|
||||
}
|
||||
],
|
||||
"default": "adapt",
|
||||
"label": "t:sections.image-with-text.settings.height.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "desktop_image_width",
|
||||
"options": [
|
||||
{
|
||||
"value": "small",
|
||||
"label": "t:sections.image-with-text.settings.desktop_image_width.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "medium",
|
||||
"label": "t:sections.image-with-text.settings.desktop_image_width.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "large",
|
||||
"label": "t:sections.image-with-text.settings.desktop_image_width.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "medium",
|
||||
"label": "t:sections.image-with-text.settings.desktop_image_width.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "layout",
|
||||
"options": [
|
||||
{
|
||||
"value": "image_first",
|
||||
"label": "t:sections.image-with-text.settings.layout.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "text_first",
|
||||
"label": "t:sections.image-with-text.settings.layout.options__2.label"
|
||||
}
|
||||
],
|
||||
"default": "image_first",
|
||||
"label": "t:sections.image-with-text.settings.layout.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "image_behavior",
|
||||
"options": [
|
||||
{
|
||||
"value": "none",
|
||||
"label": "t:sections.all.animation.image_behavior.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "ambient",
|
||||
"label": "t:sections.all.animation.image_behavior.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "zoom-in",
|
||||
"label": "t:sections.all.animation.image_behavior.options__4.label"
|
||||
}
|
||||
],
|
||||
"default": "none",
|
||||
"label": "t:sections.all.animation.image_behavior.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.image-with-text.settings.header.content"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "content_layout",
|
||||
"options": [
|
||||
{
|
||||
"value": "no-overlap",
|
||||
"label": "t:sections.image-with-text.settings.content_layout.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "overlap",
|
||||
"label": "t:sections.image-with-text.settings.content_layout.options__2.label"
|
||||
}
|
||||
],
|
||||
"default": "no-overlap",
|
||||
"label": "t:sections.image-with-text.settings.content_layout.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "desktop_content_position",
|
||||
"options": [
|
||||
{
|
||||
"value": "top",
|
||||
"label": "t:sections.image-with-text.settings.desktop_content_position.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "middle",
|
||||
"label": "t:sections.image-with-text.settings.desktop_content_position.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "bottom",
|
||||
"label": "t:sections.image-with-text.settings.desktop_content_position.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "top",
|
||||
"label": "t:sections.image-with-text.settings.desktop_content_position.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "desktop_content_alignment",
|
||||
"options": [
|
||||
{
|
||||
"value": "left",
|
||||
"label": "t:sections.image-with-text.settings.desktop_content_alignment.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "center",
|
||||
"label": "t:sections.image-with-text.settings.desktop_content_alignment.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "right",
|
||||
"label": "t:sections.image-with-text.settings.desktop_content_alignment.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "left",
|
||||
"label": "t:sections.image-with-text.settings.desktop_content_alignment.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "mobile_content_alignment",
|
||||
"options": [
|
||||
{
|
||||
"value": "left",
|
||||
"label": "t:sections.image-with-text.settings.mobile_content_alignment.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "center",
|
||||
"label": "t:sections.image-with-text.settings.mobile_content_alignment.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "right",
|
||||
"label": "t:sections.image-with-text.settings.mobile_content_alignment.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "left",
|
||||
"label": "t:sections.image-with-text.settings.mobile_content_alignment.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.image-with-text.settings.header_colors.content"
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "section_color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"default": "scheme-1"
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.multirow.settings.container_color_scheme.label",
|
||||
"default": "scheme-1"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 36
|
||||
}
|
||||
],
|
||||
"blocks": [
|
||||
{
|
||||
"type": "heading",
|
||||
"name": "t:sections.image-with-text.blocks.heading.name",
|
||||
"limit": 1,
|
||||
"settings": [
|
||||
{
|
||||
"type": "inline_richtext",
|
||||
"id": "heading",
|
||||
"default": "t:sections.image-with-text.blocks.heading.settings.heading.default",
|
||||
"label": "t:sections.image-with-text.blocks.heading.settings.heading.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "heading_size",
|
||||
"options": [
|
||||
{
|
||||
"value": "h2",
|
||||
"label": "t:sections.all.heading_size.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "h1",
|
||||
"label": "t:sections.all.heading_size.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "h0",
|
||||
"label": "t:sections.all.heading_size.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "hxl",
|
||||
"label": "t:sections.all.heading_size.options__4.label"
|
||||
},
|
||||
{
|
||||
"value": "hxxl",
|
||||
"label": "t:sections.all.heading_size.options__5.label"
|
||||
}
|
||||
],
|
||||
"default": "h1",
|
||||
"label": "t:sections.all.heading_size.label"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "caption",
|
||||
"name": "t:sections.image-with-text.blocks.caption.name",
|
||||
"limit": 1,
|
||||
"settings": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "caption",
|
||||
"default": "t:sections.image-with-text.blocks.caption.settings.text.default",
|
||||
"label": "t:sections.image-with-text.blocks.caption.settings.text.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "text_style",
|
||||
"options": [
|
||||
{
|
||||
"value": "subtitle",
|
||||
"label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "caption-with-letter-spacing",
|
||||
"label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__2.label"
|
||||
}
|
||||
],
|
||||
"default": "caption-with-letter-spacing",
|
||||
"label": "t:sections.image-with-text.blocks.caption.settings.text_style.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "text_size",
|
||||
"options": [
|
||||
{
|
||||
"value": "small",
|
||||
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "medium",
|
||||
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "large",
|
||||
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "medium",
|
||||
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.label"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"name": "t:sections.image-with-text.blocks.text.name",
|
||||
"limit": 1,
|
||||
"settings": [
|
||||
{
|
||||
"type": "richtext",
|
||||
"id": "text",
|
||||
"default": "t:sections.image-with-text.blocks.text.settings.text.default",
|
||||
"label": "t:sections.image-with-text.blocks.text.settings.text.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "text_style",
|
||||
"options": [
|
||||
{
|
||||
"value": "body",
|
||||
"label": "t:sections.image-with-text.blocks.text.settings.text_style.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "subtitle",
|
||||
"label": "t:sections.image-with-text.blocks.text.settings.text_style.options__2.label"
|
||||
}
|
||||
],
|
||||
"default": "body",
|
||||
"label": "t:sections.image-with-text.blocks.text.settings.text_style.label"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"name": "t:sections.image-with-text.blocks.button.name",
|
||||
"limit": 1,
|
||||
"settings": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "button_label",
|
||||
"default": "t:sections.image-with-text.blocks.button.settings.button_label.default",
|
||||
"label": "t:sections.image-with-text.blocks.button.settings.button_label.label",
|
||||
"info": "t:sections.image-with-text.blocks.button.settings.button_label.info"
|
||||
},
|
||||
{
|
||||
"type": "url",
|
||||
"id": "button_link",
|
||||
"label": "t:sections.image-with-text.blocks.button.settings.button_link.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "button_style_secondary",
|
||||
"default": false,
|
||||
"label": "t:sections.image-with-text.blocks.button.settings.outline_button.label"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "t:sections.image-with-text.presets.name",
|
||||
"blocks": [
|
||||
{
|
||||
"type": "heading"
|
||||
},
|
||||
{
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"type": "button"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,278 @@
|
||||
{%- comment -%}
|
||||
LinumIQ Features Section
|
||||
Displays the main value propositions in a 3-column grid.
|
||||
{%- endcomment -%}
|
||||
|
||||
{%- style -%}
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');
|
||||
|
||||
.linumiq-features-{{ section.id }} {
|
||||
/* Typography Scale */
|
||||
--font-main: 'Inter', sans-serif;
|
||||
--font-heading: 'Roboto', sans-serif;
|
||||
|
||||
--text-base: 1rem;
|
||||
--text-lg: clamp(1.25rem, 3vw + 0.5rem, 1.5rem);
|
||||
--text-xl: clamp(1.5rem, 3vw + 0.5rem, 2.0rem);
|
||||
--text-2xl: clamp(2rem, 5vw + 1rem, 2.5rem);
|
||||
--text-3xl: clamp(2.5rem, 5vw + 1rem, 3.0rem);
|
||||
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
font-family: var(--font-main);
|
||||
border-top: 1px solid rgba(var(--color-foreground), 0.08);
|
||||
border-bottom: 1px solid rgba(var(--color-foreground), 0.08);
|
||||
}
|
||||
|
||||
.lq-feat-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.lq-feat-header {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.lq-feat-h2 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-3xl);
|
||||
font-weight: 700;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
color: rgb(var(--color-foreground));
|
||||
}
|
||||
|
||||
.lq-feat-subtitle {
|
||||
font-size: var(--text-lg);
|
||||
color: rgba(var(--color-foreground), 0.75);
|
||||
max-width: 42rem;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.lq-feat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.lq-feat-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.lq-feat-card {
|
||||
border: 1px solid rgba(var(--color-foreground), 0.1);
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.lq-feat-card:hover {
|
||||
transform: translateY(-0.5rem);
|
||||
}
|
||||
|
||||
.lq-feat-icon-wrapper {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-radius: 0.75rem;
|
||||
background-color: rgba(var(--color-foreground), 0.04);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1.5rem;
|
||||
border: 1px solid rgba(var(--color-foreground), 0.1);
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.lq-icon-orange { color: {{ section.settings.icon_color_accent }}; }
|
||||
.lq-icon-blue { color: rgb(var(--color-button)); }
|
||||
|
||||
.lq-feat-title {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 600;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
color: rgb(var(--color-foreground));
|
||||
}
|
||||
|
||||
.lq-feat-desc {
|
||||
color: rgba(var(--color-foreground), 0.75);
|
||||
font-size: var(--text-lg);
|
||||
/*line-height: 1.6;*/
|
||||
margin: 0;
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
<div class="linumiq-features-{{ section.id }} color-{{ section.settings.color_scheme }} gradient">
|
||||
<div class="lq-feat-container">
|
||||
<div class="lq-feat-header">
|
||||
<h2 class="lq-feat-h2">{{ section.settings.heading }}</h2>
|
||||
<p class="lq-feat-subtitle">{{ section.settings.subtitle }}</p>
|
||||
</div>
|
||||
|
||||
<div class="lq-feat-grid">
|
||||
{%- for block in section.blocks -%}
|
||||
<div class="lq-feat-card" {{ block.shopify_attributes }}>
|
||||
<div class="lq-feat-icon-wrapper">
|
||||
{%- case block.settings.icon -%}
|
||||
{%- when 'zap' -%}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lq-icon-orange"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
|
||||
{%- when 'wifi_off' -%}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lq-icon-blue">
|
||||
<defs>
|
||||
<mask id="slash-cutout">
|
||||
<rect width="24" height="24" fill="white" />
|
||||
<line x1="2" y1="2" x2="22" y2="22" stroke="black" stroke-width="6" />
|
||||
</mask>
|
||||
</defs>
|
||||
|
||||
<g mask="url(#slash-cutout)">
|
||||
<path d="M1.42 9a16 16 0 0 1 21.16 0" />
|
||||
<path d="M5 12.55a11 11 0 0 1 14.08 0" />
|
||||
<path d="M8.53 16.11a6 6 0 0 1 6.95 0" />
|
||||
<path d="M12 20h.01" />
|
||||
</g>
|
||||
|
||||
<line x1="2" y1="2" x2="22" y2="22" />
|
||||
</svg>
|
||||
{%- when 'shield' -%}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lq-icon-blue"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path><path d="m9 12 2 2 4-4"></path></svg>
|
||||
{%- endcase -%}
|
||||
</div>
|
||||
<h3 class="lq-feat-title">{{ block.settings.title }}</h3>
|
||||
<p class="lq-feat-desc">{{ block.settings.text }}</p>
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "LinumIQ Features",
|
||||
"settings": [
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "Color scheme",
|
||||
"default": "background-2"
|
||||
},
|
||||
{
|
||||
"type": "color",
|
||||
"id": "icon_color_accent",
|
||||
"label": "Accent icon color",
|
||||
"default": "#FF9D0B"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 120,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "Padding Top",
|
||||
"default": 96
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 120,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "Padding Bottom",
|
||||
"default": 96
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "heading",
|
||||
"label": "Heading",
|
||||
"default": "Warum LinumIQ die bessere Wahl ist"
|
||||
},
|
||||
{
|
||||
"type": "textarea",
|
||||
"id": "subtitle",
|
||||
"label": "Subtitle",
|
||||
"default": "Wir glauben, dass ein Smart Home dein Leben einfacher machen sollte - nicht komplizierter. Deshalb haben wir das Konzept für dich neu gedacht."
|
||||
}
|
||||
],
|
||||
"blocks": [
|
||||
{
|
||||
"type": "feature",
|
||||
"name": "Feature",
|
||||
"limit": 6,
|
||||
"settings": [
|
||||
{
|
||||
"type": "select",
|
||||
"id": "icon",
|
||||
"label": "Icon",
|
||||
"options": [
|
||||
{
|
||||
"value": "zap",
|
||||
"label": "Blitz (Orange)"
|
||||
},
|
||||
{
|
||||
"value": "wifi_off",
|
||||
"label": "Offline/Privacy (Blau)"
|
||||
},
|
||||
{
|
||||
"value": "shield",
|
||||
"label": "Schutzschild (Blau)"
|
||||
}
|
||||
],
|
||||
"default": "zap"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "title",
|
||||
"label": "Title",
|
||||
"default": "Echtes Plug & Play"
|
||||
},
|
||||
{
|
||||
"type": "textarea",
|
||||
"id": "text",
|
||||
"label": "Description",
|
||||
"default": "Kein IT-Studium nötig. Unsere Kits kommen komplett vorkonfiguriert zu dir. Einfach anstecken und die Automationen sofort nutzen."
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "LinumIQ Features",
|
||||
"category": "Custom Elements",
|
||||
"blocks": [
|
||||
{
|
||||
"type": "feature",
|
||||
"settings": {
|
||||
"icon": "zap",
|
||||
"title": "Echtes Plug & Play",
|
||||
"text": "Kein IT-Studium nötig. Unsere Kits kommen komplett vorkonfiguriert zu dir. Einfach anstecken und die Automationen sofort nutzen."
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "feature",
|
||||
"settings": {
|
||||
"icon": "wifi_off",
|
||||
"title": "100% Offline-fähig",
|
||||
"text": "Deine Daten bleiben bei dir im Haus. Keine Cloud, keine Abo-Kosten, keine externen Server. Volle Funktion auch ohne Internet."
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "feature",
|
||||
"settings": {
|
||||
"icon": "shield",
|
||||
"title": "Grenzenlos erweiterbar",
|
||||
"text": "Basierend auf Home Assistant und Zigbee. Du bist nicht in unserem Ökosystem gefangen und kannst tausende Geräte integrieren."
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,284 @@
|
||||
{%- style -%}
|
||||
.hero-{{ section.id }} {
|
||||
position: relative;
|
||||
min-height: {{ section.settings.section_height }}px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-{{ section.id }}::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
background-color: rgba(
|
||||
{{ section.settings.overlay_color | color_extract: 'red' }},
|
||||
{{ section.settings.overlay_color | color_extract: 'green' }},
|
||||
{{ section.settings.overlay_color | color_extract: 'blue' }},
|
||||
{{ section.settings.overlay_opacity | times: 0.01 }}
|
||||
);
|
||||
}
|
||||
|
||||
.hero-{{ section.id }}__bg-image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.hero-{{ section.id }}__content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
padding: 60px 40px;
|
||||
text-align: {{ section.settings.content_alignment }};
|
||||
}
|
||||
|
||||
.hero-{{ section.id }}__heading {
|
||||
font-size: {{ section.settings.heading_size }}px;
|
||||
color: {{ section.settings.heading_color }};
|
||||
margin: 0 0 8px;
|
||||
line-height: 1.2;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hero-{{ section.id }}__subheading {
|
||||
font-size: {{ section.settings.subheading_size }}px;
|
||||
color: {{ section.settings.subheading_color }};
|
||||
margin: 0;
|
||||
line-height: 1.3;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hero-{{ section.id }}__text {
|
||||
font-size: {{ section.settings.text_size }}px;
|
||||
color: {{ section.settings.text_color }};
|
||||
margin: 24px 0 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 749px) {
|
||||
.hero-{{ section.id }}__content {
|
||||
padding: 40px 16px;
|
||||
}
|
||||
.hero-{{ section.id }}__heading,
|
||||
.hero-{{ section.id }}__subheading {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
<section
|
||||
class="hero-{{ section.id }}"
|
||||
aria-label="{{ section.settings.heading | escape }}"
|
||||
>
|
||||
{%- if section.settings.background_image != blank -%}
|
||||
<img
|
||||
class="hero-{{ section.id }}__bg-image"
|
||||
src="{{ section.settings.background_image | image_url: width: 1920 }}"
|
||||
alt="{{ section.settings.background_image.alt | default: '' | escape }}"
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
width="{{ section.settings.background_image.width }}"
|
||||
height="{{ section.settings.background_image.height }}"
|
||||
>
|
||||
{%- endif -%}
|
||||
|
||||
<div class="hero-{{ section.id }}__content">
|
||||
{%- if section.settings.heading != blank -%}
|
||||
<h1 class="hero-{{ section.id }}__heading">
|
||||
{{ section.settings.heading | escape }}
|
||||
</h1>
|
||||
{%- endif -%}
|
||||
|
||||
{%- if section.settings.subheading != blank -%}
|
||||
<h2 class="hero-{{ section.id }}__subheading">
|
||||
{{ section.settings.subheading | escape }}
|
||||
</h2>
|
||||
{%- endif -%}
|
||||
|
||||
{%- if section.settings.text != blank -%}
|
||||
<div class="hero-{{ section.id }}__text">
|
||||
{{ section.settings.text }}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
function fitHeroHeadings() {
|
||||
if (window.innerWidth >= 750) return;
|
||||
[
|
||||
'.hero-{{ section.id }}__heading',
|
||||
'.hero-{{ section.id }}__subheading'
|
||||
].forEach(function (sel) {
|
||||
var el = document.querySelector(sel);
|
||||
if (!el) return;
|
||||
el.style.fontSize = '';
|
||||
var fontSize = parseFloat(window.getComputedStyle(el).fontSize);
|
||||
while (el.scrollWidth > el.clientWidth && fontSize > 10) {
|
||||
fontSize -= 0.5;
|
||||
el.style.fontSize = fontSize + 'px';
|
||||
}
|
||||
});
|
||||
}
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', fitHeroHeadings);
|
||||
} else {
|
||||
fitHeroHeadings();
|
||||
}
|
||||
window.addEventListener('resize', fitHeroHeadings);
|
||||
})();
|
||||
</script>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "Hero",
|
||||
"tag": "section",
|
||||
"class": "section-hero",
|
||||
"settings": [
|
||||
{
|
||||
"type": "header",
|
||||
"content": "Inhalt"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "heading",
|
||||
"label": "Hauptüberschrift",
|
||||
"default": "Willkommen in unserem Shop"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "subheading",
|
||||
"label": "Zweitüberschrift",
|
||||
"default": "Entdecke unsere Kollektion"
|
||||
},
|
||||
{
|
||||
"type": "richtext",
|
||||
"id": "text",
|
||||
"label": "Sub-Text",
|
||||
"default": "<p>Hochwertiger Stil für jeden Anlass – jetzt entdecken.</p>"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "Layout"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "content_alignment",
|
||||
"label": "Textausrichtung",
|
||||
"options": [
|
||||
{ "value": "left", "label": "Links" },
|
||||
{ "value": "center", "label": "Zentriert" },
|
||||
{ "value": "right", "label": "Rechts" }
|
||||
],
|
||||
"default": "center"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "section_height",
|
||||
"label": "Sektionshöhe (px)",
|
||||
"min": 200,
|
||||
"max": 900,
|
||||
"step": 10,
|
||||
"default": 500
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "Hintergrundbild"
|
||||
},
|
||||
{
|
||||
"type": "image_picker",
|
||||
"id": "background_image",
|
||||
"label": "Hintergrundbild"
|
||||
},
|
||||
{
|
||||
"type": "color",
|
||||
"id": "overlay_color",
|
||||
"label": "Overlay-Farbe",
|
||||
"default": "#000000"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "overlay_opacity",
|
||||
"label": "Overlay-Deckkraft (%)",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 5,
|
||||
"default": 40,
|
||||
"info": "0 = komplett transparent, 100 = vollständig deckend"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "Hauptüberschrift"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "heading_size",
|
||||
"label": "Schriftgröße (px)",
|
||||
"min": 20,
|
||||
"max": 100,
|
||||
"step": 2,
|
||||
"default": 56
|
||||
},
|
||||
{
|
||||
"type": "color",
|
||||
"id": "heading_color",
|
||||
"label": "Textfarbe",
|
||||
"default": "#ffffff"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "Zweitüberschrift"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "subheading_size",
|
||||
"label": "Schriftgröße (px)",
|
||||
"min": 16,
|
||||
"max": 72,
|
||||
"step": 2,
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "color",
|
||||
"id": "subheading_color",
|
||||
"label": "Textfarbe",
|
||||
"default": "#ffffff"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "Sub-Text"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "text_size",
|
||||
"label": "Schriftgröße (px)",
|
||||
"min": 12,
|
||||
"max": 36,
|
||||
"step": 1,
|
||||
"default": 18
|
||||
},
|
||||
{
|
||||
"type": "color",
|
||||
"id": "text_color",
|
||||
"label": "Textfarbe",
|
||||
"default": "#eeeeee"
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "Hero"
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,136 @@
|
||||
{%- style -%}
|
||||
/* Import Brand Fonts */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');
|
||||
|
||||
#linumiq-hero-{{ section.id }} {
|
||||
/* Brand Typography Scale */
|
||||
--font-main: 'Inter', sans-serif;
|
||||
--font-heading: 'Roboto', sans-serif;
|
||||
--text-sm: 0.875rem;
|
||||
--text-base: 1rem;
|
||||
--text-lg: clamp(1.25rem, 2vw + 0.5rem, 1.5rem);
|
||||
--text-xl: clamp(1.5rem, 3vw + 0.5rem, 2.0rem);
|
||||
--text-2xl: clamp(2.5rem, 5vw + 1rem, 3.0rem);
|
||||
--text-3xl: clamp(3.5rem, 6vw + 1.5rem, 4.0rem);
|
||||
|
||||
font-family: var(--font-main);
|
||||
padding: 2rem 1rem 2rem;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
line-height: 1.5;
|
||||
border-bottom: 1px solid rgba(var(--color-foreground), 0.1);
|
||||
}
|
||||
|
||||
#linumiq-hero-{{ section.id }} .hero-container {
|
||||
max-width: 80rem;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#linumiq-hero-{{ section.id }} .hero-badge {
|
||||
display: inline-block;
|
||||
padding: 0.35rem 1rem;
|
||||
border-radius: 9999px;
|
||||
background-color: rgba(var(--color-button), 0.1);
|
||||
color: rgb(var(--color-button));
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 600;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
#linumiq-hero-{{ section.id }} h1 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-3xl);
|
||||
font-weight: 700;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.2;
|
||||
color: rgb(var(--color-foreground));
|
||||
}
|
||||
|
||||
#linumiq-hero-{{ section.id }} .highlight-text {
|
||||
color: rgb(var(--color-button));
|
||||
}
|
||||
|
||||
#linumiq-hero-{{ section.id }} .hero-description {
|
||||
margin-top: 1rem;
|
||||
color: rgba(var(--color-foreground), 0.75);
|
||||
max-width: 48rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
<div id="linumiq-hero-{{ section.id }}" class="color-{{ section.settings.color_scheme }} gradient">
|
||||
<div class="hero-container">
|
||||
|
||||
{% if section.settings.hero_badge != blank %}
|
||||
<span class="hero-badge">
|
||||
{{ section.settings.hero_badge | escape }}
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
<h1>
|
||||
{{ section.settings.heading_main | escape }}<br>
|
||||
<span class="highlight-text">
|
||||
{{ section.settings.heading_highlight | escape }}
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
{% if section.settings.description != blank %}
|
||||
<p class="hero-description">
|
||||
{{ section.settings.description | escape }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "LinumIQ Hero Section",
|
||||
"tag": "section",
|
||||
"class": "section-hero",
|
||||
"settings": [
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "Color scheme",
|
||||
"default": "background-1"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "hero_badge",
|
||||
"label": "Badge Text",
|
||||
"default": "Be smart. Start easy."
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "heading_main",
|
||||
"label": "Main Headline",
|
||||
"default": "Dein Smart Home."
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "heading_highlight",
|
||||
"label": "Highlighted Headline Part",
|
||||
"default": "Einfach. Sicher. Offline."
|
||||
},
|
||||
{
|
||||
"type": "textarea",
|
||||
"id": "description",
|
||||
"label": "Description",
|
||||
"default": "Das erste Smart Home System, das komplett vorkonfiguriert zu dir kommt. Keine Cloud, kein Datenklau, kein IT-Studium nötig. Einstecken und loslegen."
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "LinumIQ Hero Section",
|
||||
"category": "Custom Elements"
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,593 @@
|
||||
{%- comment -%}
|
||||
LinumIQ Starter Kits Comparison Section
|
||||
Features: Fluid Typography, Shopify Color Schemes, Product Integration, 3 Kits
|
||||
{%- endcomment -%}
|
||||
|
||||
{%- style -%}
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');
|
||||
|
||||
.linumiq-section-{{ section.id }} {
|
||||
--font-main: 'Inter', sans-serif;
|
||||
--font-heading: 'Roboto', sans-serif;
|
||||
|
||||
--text-sm: 1rem;
|
||||
--text-base: clamp(1.125rem, 2vw + 0.5rem, 1.25rem);
|
||||
--text-lg: clamp(1.25rem, 3vw + 0.5rem, 1.5rem);
|
||||
--text-xl: clamp(1.5rem, 4vw + 1rem, 2rem);
|
||||
--text-2xl: clamp(2rem, 5vw + 1rem, 2.5rem);
|
||||
--text-4xl: clamp(2.5rem, 6vw + 1rem, 3rem);
|
||||
--text-5xl: clamp(3rem, 7vw + 1.5rem, 4rem);
|
||||
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
font-family: var(--font-main);
|
||||
}
|
||||
|
||||
.linumiq-section-{{ section.id }} .lq-container {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.linumiq-section-{{ section.id }} .lq-text-center { text-align: center; }
|
||||
.linumiq-section-{{ section.id }} .lq-mb-16 { margin-bottom: 4rem; }
|
||||
.linumiq-section-{{ section.id }} .lq-mb-8 { margin-bottom: 2rem; }
|
||||
.linumiq-section-{{ section.id }} .lq-mb-6 { margin-bottom: 1.5rem; }
|
||||
.linumiq-section-{{ section.id }} .lq-mb-2 { margin-bottom: 0.5rem; }
|
||||
|
||||
.linumiq-section-{{ section.id }} .lq-h2 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-4xl);
|
||||
font-weight: 700;
|
||||
color: rgb(var(--color-foreground));
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.linumiq-section-{{ section.id }} .lq-subtitle {
|
||||
font-size: var(--text-lg);
|
||||
color: rgba(var(--color-foreground), 0.75);
|
||||
max-width: 42rem;
|
||||
margin: 0 auto;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.linumiq-section-{{ section.id }} .lq-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
align-items: stretch;
|
||||
max-width: 100rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.linumiq-section-{{ section.id }} .lq-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.linumiq-section-{{ section.id }} .lq-card {
|
||||
border: 2px solid rgba(var(--color-foreground), 0.15);
|
||||
border-radius: 1.5rem;
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.linumiq-section-{{ section.id }} .lq-card { padding: 2.5rem; }
|
||||
}
|
||||
|
||||
.linumiq-section-{{ section.id }} .lq-card:hover {
|
||||
box-shadow: 0 10px 25px rgba(var(--color-foreground), 0.08);
|
||||
}
|
||||
|
||||
.linumiq-section-{{ section.id }} .lq-card-premium {
|
||||
border: 3px solid rgb(var(--color-button));
|
||||
box-shadow: 0 20px 25px -5px rgba(var(--color-foreground), 0.12), 0 10px 10px -5px rgba(var(--color-foreground), 0.05);
|
||||
}
|
||||
|
||||
.linumiq-section-{{ section.id }} .lq-card-title {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: 600;
|
||||
color: rgb(var(--color-foreground));
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.linumiq-section-{{ section.id }} .lq-card-desc {
|
||||
color: rgba(var(--color-foreground), 0.75);
|
||||
font-size: var(--text-lg);
|
||||
min-height: 3rem;
|
||||
}
|
||||
|
||||
.linumiq-section-{{ section.id }} .lq-price-block {
|
||||
padding-bottom: 2rem;
|
||||
border-bottom: 1px solid rgba(var(--color-foreground), 0.15);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.linumiq-section-{{ section.id }} .lq-price-flex {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.linumiq-section-{{ section.id }} .lq-price {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-5xl);
|
||||
font-weight: 700;
|
||||
color: #FFFFFF;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.linumiq-section-{{ section.id }} .lq-compare-price {
|
||||
font-size: var(--text-lg);
|
||||
color: rgba(var(--color-foreground), 0.6);
|
||||
text-decoration: line-through;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.linumiq-section-{{ section.id }} .lq-badge {
|
||||
display: inline-block;
|
||||
background-color: rgba(var(--color-button), 0.1);
|
||||
color: #FFB54E;
|
||||
font-size: var(--text-base);
|
||||
font-weight: 600;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.linumiq-section-{{ section.id }} .lq-premium-flag {
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: rgb(var(--color-button));
|
||||
color: rgb(var(--color-button-text));
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-radius: 9999px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
box-shadow: 0 4px 6px -1px rgba(var(--color-foreground), 0.15);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.linumiq-section-{{ section.id }} .lq-feature-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 2.5rem 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.linumiq-section-{{ section.id }} .lq-feature-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.linumiq-section-{{ section.id }} .lq-feature-icon {
|
||||
flex-shrink: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: rgb(var(--color-button));
|
||||
}
|
||||
|
||||
.linumiq-section-{{ section.id }} .lq-feature-text {
|
||||
font-size: var(--text-lg);
|
||||
color: rgb(var(--color-foreground));
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.linumiq-section-{{ section.id }} .lq-feature-text strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.linumiq-section-{{ section.id }} .lq-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
font-family: var(--font-main);
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 600;
|
||||
border-radius: 0.5rem;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-align: center;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.linumiq-section-{{ section.id }} .lq-btn-outline {
|
||||
background-color: transparent;
|
||||
color: #FFFFFF;
|
||||
border: 2px solid rgb(var(--color-foreground));
|
||||
}
|
||||
|
||||
.linumiq-section-{{ section.id }} .lq-btn-outline:hover {
|
||||
background-color: #FFFFFF;
|
||||
color: rgb(var(--color-background));
|
||||
}
|
||||
|
||||
.linumiq-section-{{ section.id }} .lq-btn-accent {
|
||||
background-color: rgb(var(--color-button));
|
||||
color: rgb(var(--color-button-text));
|
||||
border: none;
|
||||
box-shadow: 0 10px 15px -3px rgba(var(--color-button), 0.3);
|
||||
}
|
||||
|
||||
.linumiq-section-{{ section.id }} .lq-btn-accent:hover {
|
||||
opacity: 0.92;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 15px -3px rgba(var(--color-button), 0.5);
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
<div
|
||||
class="linumiq-section-{{ section.id }} color-{{ section.settings.color_scheme }} gradient"
|
||||
id="{{ section.id }}"
|
||||
>
|
||||
<div class="lq-container">
|
||||
|
||||
<div class="lq-text-center lq-mb-16">
|
||||
<h2 class="lq-h2 lq-mb-2">{{ section.settings.heading }}</h2>
|
||||
<p class="lq-subtitle">{{ section.settings.subtitle }}</p>
|
||||
</div>
|
||||
|
||||
<div class="lq-grid">
|
||||
|
||||
{%- comment -%} KIT 1: LITE (LEFT) {%- endcomment -%}
|
||||
{%- assign product_1 = all_products[section.settings.kit1_product] -%}
|
||||
<div class="lq-card">
|
||||
<div class="lq-mb-6">
|
||||
<h3 class="lq-card-title lq-mb-2">{{ section.settings.kit1_title }}</h3>
|
||||
<p class="lq-card-desc">{{ section.settings.kit1_desc }}</p>
|
||||
</div>
|
||||
|
||||
<div class="lq-price-block">
|
||||
<div class="lq-price-flex">
|
||||
<span class="lq-price">
|
||||
{%- if product_1 != blank -%}
|
||||
{{ product_1.price | money_without_trailing_zeros }}
|
||||
{%- else -%}
|
||||
€199
|
||||
{%- endif -%}
|
||||
</span>
|
||||
{%- if product_1 != blank and product_1.compare_at_price > product_1.price -%}
|
||||
<span class="lq-compare-price">{{ product_1.compare_at_price | money_without_trailing_zeros }}</span>
|
||||
{%- elsif section.settings.kit1_compare_price != blank -%}
|
||||
<span class="lq-compare-price">{{ section.settings.kit1_compare_price }}</span>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- if product_1 != blank and product_1.compare_at_price > product_1.price -%}
|
||||
{%- assign savings_1 = product_1.compare_at_price | minus: product_1.price -%}
|
||||
<span class="lq-badge">{{ 'sections.linumiq_landing.you_save' | t }} {{ savings_1 | money_without_trailing_zeros }}</span>
|
||||
{%- elsif section.settings.kit1_badge != blank -%}
|
||||
<span class="lq-badge">{{ section.settings.kit1_badge }}</span>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
||||
<ul class="lq-feature-list">
|
||||
{%- assign features_1 = section.settings.kit1_features | newline_to_br | split: '<br />' -%}
|
||||
{%- for feature in features_1 -%}
|
||||
{%- if feature != blank -%}
|
||||
<li class="lq-feature-item">
|
||||
<svg class="lq-feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
||||
<span class="lq-feature-text">{{ feature | strip }}</span>
|
||||
</li>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
|
||||
<a href="{% if product_1 != blank %}{{ product_1.url }}{% else %}#{% endif %}" class="lq-btn lq-btn-outline">
|
||||
{{ section.settings.btn_text }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{%- comment -%} KIT 2: ALL-IN-ONE PREMIUM (CENTER) {%- endcomment -%}
|
||||
{%- assign product_2 = all_products[section.settings.kit2_product] -%}
|
||||
<div class="lq-card lq-card-premium">
|
||||
{%- if section.settings.kit2_flag != blank -%}
|
||||
<div class="lq-premium-flag">{{ section.settings.kit2_flag }}</div>
|
||||
{%- endif -%}
|
||||
|
||||
<div class="lq-mb-6">
|
||||
<h3 class="lq-card-title lq-mb-2">{{ section.settings.kit2_title }}</h3>
|
||||
<p class="lq-card-desc">{{ section.settings.kit2_desc }}</p>
|
||||
</div>
|
||||
|
||||
<div class="lq-price-block">
|
||||
<div class="lq-price-flex">
|
||||
<span class="lq-price">
|
||||
{%- if product_2 != blank -%}
|
||||
{{ product_2.price | money_without_trailing_zeros }}
|
||||
{%- else -%}
|
||||
€449
|
||||
{%- endif -%}
|
||||
</span>
|
||||
{%- if product_2 != blank and product_2.compare_at_price > product_2.price -%}
|
||||
<span class="lq-compare-price">{{ product_2.compare_at_price | money_without_trailing_zeros }}</span>
|
||||
{%- elsif section.settings.kit2_compare_price != blank -%}
|
||||
<span class="lq-compare-price">{{ section.settings.kit2_compare_price }}</span>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- if product_2 != blank and product_2.compare_at_price > product_2.price -%}
|
||||
{%- assign savings_2 = product_2.compare_at_price | minus: product_2.price -%}
|
||||
<span class="lq-badge">{{ 'sections.linumiq_landing.you_save' | t }} {{ savings_2 | money_without_trailing_zeros }}</span>
|
||||
{%- elsif section.settings.kit2_badge != blank -%}
|
||||
<span class="lq-badge">{{ section.settings.kit2_badge }}</span>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
||||
<ul class="lq-feature-list">
|
||||
{%- assign features_2 = section.settings.kit2_features | newline_to_br | split: '<br />' -%}
|
||||
{%- for feature in features_2 -%}
|
||||
{%- if feature != blank -%}
|
||||
<li class="lq-feature-item">
|
||||
<svg class="lq-feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
||||
<span class="lq-feature-text">{{ feature | strip }}</span>
|
||||
</li>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
|
||||
<a href="{% if product_2 != blank %}{{ product_2.url }}{% else %}#{% endif %}" class="lq-btn lq-btn-accent">
|
||||
{{ section.settings.btn_text }}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{%- comment -%} KIT 3: PRO (RIGHT) {%- endcomment -%}
|
||||
{%- assign product_3 = all_products[section.settings.kit3_product] -%}
|
||||
<div class="lq-card">
|
||||
<div class="lq-mb-6">
|
||||
<h3 class="lq-card-title lq-mb-2">{{ section.settings.kit3_title }}</h3>
|
||||
<p class="lq-card-desc">{{ section.settings.kit3_desc }}</p>
|
||||
</div>
|
||||
|
||||
<div class="lq-price-block">
|
||||
<div class="lq-price-flex">
|
||||
<span class="lq-price">
|
||||
{%- if product_3 != blank -%}
|
||||
{{ product_3.price | money_without_trailing_zeros }}
|
||||
{%- else -%}
|
||||
€699
|
||||
{%- endif -%}
|
||||
</span>
|
||||
{%- if product_3 != blank and product_3.compare_at_price > product_3.price -%}
|
||||
<span class="lq-compare-price">{{ product_3.compare_at_price | money_without_trailing_zeros }}</span>
|
||||
{%- elsif section.settings.kit3_compare_price != blank -%}
|
||||
<span class="lq-compare-price">{{ section.settings.kit3_compare_price }}</span>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- if product_3 != blank and product_3.compare_at_price > product_3.price -%}
|
||||
{%- assign savings_3 = product_3.compare_at_price | minus: product_3.price -%}
|
||||
<span class="lq-badge">{{ 'sections.linumiq_landing.you_save' | t }} {{ savings_3 | money_without_trailing_zeros }}</span>
|
||||
{%- elsif section.settings.kit3_badge != blank -%}
|
||||
<span class="lq-badge">{{ section.settings.kit3_badge }}</span>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
||||
<ul class="lq-feature-list">
|
||||
{%- assign features_3 = section.settings.kit3_features | newline_to_br | split: '<br />' -%}
|
||||
{%- for feature in features_3 -%}
|
||||
{%- if feature != blank -%}
|
||||
<li class="lq-feature-item">
|
||||
<svg class="lq-feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
||||
<span class="lq-feature-text">{{ feature | strip }}</span>
|
||||
</li>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
|
||||
<a href="{% if product_3 != blank %}{{ product_3.url }}{% else %}#{% endif %}" class="lq-btn lq-btn-outline">
|
||||
{{ section.settings.btn_text }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "LinumIQ Starter Kits",
|
||||
"settings": [
|
||||
{
|
||||
"type": "header",
|
||||
"content": "Section Layout"
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "Color scheme",
|
||||
"default": "background-1"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 120,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "Padding Top",
|
||||
"default": 80
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 120,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "Padding Bottom",
|
||||
"default": 80
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "heading",
|
||||
"label": "t:sections.linumiq_landing.heading.label",
|
||||
"default": "Wähle dein perfektes Setup"
|
||||
},
|
||||
{
|
||||
"type": "textarea",
|
||||
"id": "subtitle",
|
||||
"label": "Subtitle",
|
||||
"default": "Egal ob du klein anfangen oder gleich das volle Potenzial nutzen möchtest - unsere vorkonfigurierten Kits machen den Einstieg kinderleicht."
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "btn_text",
|
||||
"label": "Button Text",
|
||||
"default": "In den Warenkorb"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "Kit 1: Lite (Left)"
|
||||
},
|
||||
{
|
||||
"type": "product",
|
||||
"id": "kit1_product",
|
||||
"label": "Link to Product (Auto-fetches price & URL)"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "kit1_title",
|
||||
"label": "Title",
|
||||
"default": "Starter Kit Lite"
|
||||
},
|
||||
{
|
||||
"type": "textarea",
|
||||
"id": "kit1_desc",
|
||||
"label": "Description",
|
||||
"default": "Die kostengünstige Variante für den perfekten Einstieg ins smarte Wohnen."
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "kit1_compare_price",
|
||||
"label": "Compare Price Fallback",
|
||||
"info": "Only used if no product is selected above.",
|
||||
"default": "€209,85"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "kit1_badge",
|
||||
"label": "Highlight Badge (Fallback)",
|
||||
"info": "Nur verwendet wenn kein Produkt verknüpft ist oder kein Vergleichspreis gesetzt wurde.",
|
||||
"default": "Angebot - Du sparst €10,85"
|
||||
},
|
||||
{
|
||||
"type": "textarea",
|
||||
"id": "kit1_features",
|
||||
"label": "Features (One per line)",
|
||||
"default": "Home Assistant Green (Zentrale)\n1x Zigbee Tür-/Fenster-Sensor\n1x ZigBee Smart Plug 20A\nBasis Vorkonfiguration\n100% Offline-fähig & Privat"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "Kit 2: All-in-One Premium (Center)"
|
||||
},
|
||||
{
|
||||
"type": "product",
|
||||
"id": "kit2_product",
|
||||
"label": "Link to Product (Auto-fetches price & URL)"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "kit2_flag",
|
||||
"label": "Top Flag Text",
|
||||
"default": "Premium Wahl"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "kit2_title",
|
||||
"label": "Title",
|
||||
"default": "All-in-One Kit"
|
||||
},
|
||||
{
|
||||
"type": "textarea",
|
||||
"id": "kit2_desc",
|
||||
"label": "Description",
|
||||
"default": "Das Rundum-Sorglos-Paket. Inklusive smartem Türschloss und Premium-Sensoren."
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "kit2_compare_price",
|
||||
"label": "Compare Price Fallback",
|
||||
"info": "Only used if no product is selected above.",
|
||||
"default": "€478,00"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "kit2_badge",
|
||||
"label": "Highlight Badge (Fallback)",
|
||||
"info": "Nur verwendet wenn kein Produkt verknüpft ist oder kein Vergleichspreis gesetzt wurde.",
|
||||
"default": "Bestseller - Du sparst €29,00"
|
||||
},
|
||||
{
|
||||
"type": "textarea",
|
||||
"id": "kit2_features",
|
||||
"label": "Features (One per line. Use <strong>...</strong> for bold)",
|
||||
"default": "<strong>Home Assistant Green</strong> (Zentrale)\n<strong>Nuki Smart Lock Pro</strong> (5. Gen.)\nZigbee Präsenzmelder (PIR + RADAR)\nMehrere Zigbee Sensoren & Buttons\nPremium Vorkonfiguration\nPriority Support & Updates"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "Kit 3: Pro (Right)"
|
||||
},
|
||||
{
|
||||
"type": "product",
|
||||
"id": "kit3_product",
|
||||
"label": "Link to Product (Auto-fetches price & URL)"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "kit3_title",
|
||||
"label": "Title",
|
||||
"default": "Pro Kit"
|
||||
},
|
||||
{
|
||||
"type": "textarea",
|
||||
"id": "kit3_desc",
|
||||
"label": "Description",
|
||||
"default": "Maximale Ausstattung für anspruchsvolle Smart Homes mit erweiterter Automatisierung."
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "kit3_compare_price",
|
||||
"label": "Compare Price Fallback",
|
||||
"info": "Only used if no product is selected above.",
|
||||
"default": "€749,00"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "kit3_badge",
|
||||
"label": "Highlight Badge (Fallback)",
|
||||
"info": "Nur verwendet wenn kein Produkt verknüpft ist oder kein Vergleichspreis gesetzt wurde.",
|
||||
"default": "Du sparst €50,00"
|
||||
},
|
||||
{
|
||||
"type": "textarea",
|
||||
"id": "kit3_features",
|
||||
"label": "Features (One per line. Use <strong>...</strong> for bold)",
|
||||
"default": "<strong>Home Assistant Yellow</strong> (Zentrale)\n<strong>Nuki Smart Lock Pro</strong> (5. Gen.)\nZigbee Präsenzmelder (PIR + RADAR)\nErweitertes Sensoren-Set\nMulti-Room Audio Vorbereitung\nIndividuelle Vorkonfiguration\nDedicated Support & Updates"
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "LinumIQ Starter Kits",
|
||||
"category": "Custom Elements"
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,23 @@
|
||||
<style type="text/css">
|
||||
.template-404 .title + * {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.template-404 .title + * {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="template-404 page-width page-margin center">
|
||||
<p>
|
||||
{{ 'templates.404.subtext' | t }}
|
||||
</p>
|
||||
<h1 class="title">
|
||||
{{ 'templates.404.title' | t }}
|
||||
</h1>
|
||||
<a href="{{ routes.all_products_collection_url }}" class="button">
|
||||
{{ 'general.continue_shopping' | t }}
|
||||
</a>
|
||||
</div>
|
||||
@@ -0,0 +1,183 @@
|
||||
{{ 'customer.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
<div class="customer account section-{{ section.id }}-padding">
|
||||
<div>
|
||||
<h1 class="customer__title">{{ 'customer.account.title' | t }}</h1>
|
||||
<a href="{{ routes.account_logout_url }}">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-account.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{ 'customer.log_out' | t }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<h2>{{ 'customer.orders.title' | t }}</h2>
|
||||
|
||||
{% paginate customer.orders by 20 %}
|
||||
{%- if customer.orders.size > 0 -%}
|
||||
<table role="table" class="order-history">
|
||||
<caption class="visually-hidden">
|
||||
{{ 'customer.orders.title' | t }}
|
||||
</caption>
|
||||
<thead role="rowgroup">
|
||||
<tr role="row">
|
||||
<th id="ColumnOrder" scope="col" role="columnheader">{{ 'customer.orders.order_number' | t }}</th>
|
||||
<th id="ColumnDate" scope="col" role="columnheader">{{ 'customer.orders.date' | t }}</th>
|
||||
<th id="ColumnPayment" scope="col" role="columnheader">{{ 'customer.orders.payment_status' | t }}</th>
|
||||
<th id="ColumnFulfillment" scope="col" role="columnheader">
|
||||
{{ 'customer.orders.fulfillment_status' | t }}
|
||||
</th>
|
||||
<th id="ColumnTotal" scope="col" role="columnheader">{{ 'customer.orders.total' | t }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody role="rowgroup">
|
||||
{%- for order in customer.orders -%}
|
||||
<tr role="row">
|
||||
<td
|
||||
id="RowOrder"
|
||||
role="cell"
|
||||
headers="ColumnOrder"
|
||||
data-label="{{ 'customer.orders.order_number' | t }}"
|
||||
>
|
||||
<a
|
||||
href="{{ order.customer_url }}"
|
||||
aria-label="{{ 'customer.orders.order_number_link' | t: number: order.name }}"
|
||||
>
|
||||
{{ order.name }}
|
||||
</a>
|
||||
</td>
|
||||
<td headers="RowOrder ColumnDate" role="cell" data-label="{{ 'customer.orders.date' | t }}">
|
||||
{{ order.created_at | time_tag: format: 'date' }}
|
||||
</td>
|
||||
<td
|
||||
headers="RowOrder ColumnPayment"
|
||||
role="cell"
|
||||
data-label="{{ 'customer.orders.payment_status' | t }}"
|
||||
>
|
||||
{{ order.financial_status_label }}
|
||||
</td>
|
||||
<td
|
||||
headers="RowOrder ColumnFulfillment"
|
||||
role="cell"
|
||||
data-label="{{ 'customer.orders.fulfillment_status' | t }}"
|
||||
>
|
||||
{{ order.fulfillment_status_label }}
|
||||
</td>
|
||||
<td headers="RowOrder ColumnTotal" role="cell" data-label="{{ 'customer.orders.total' | t }}">
|
||||
{{ order.total_net_amount | money_with_currency }}
|
||||
</td>
|
||||
</tr>
|
||||
{%- endfor -%}
|
||||
</tbody>
|
||||
</table>
|
||||
{%- else -%}
|
||||
<p>{{ 'customer.orders.none' | t }}</p>
|
||||
{%- endif -%}
|
||||
|
||||
{%- if paginate.pages > 1 -%}
|
||||
{%- if paginate.parts.size > 0 -%}
|
||||
<nav class="pagination" role="navigation" aria-label="{{ 'general.pagination.label' | t }}">
|
||||
<ul role="list">
|
||||
{%- if paginate.previous -%}
|
||||
<li>
|
||||
<a href="{{ paginate.previous.url }}" aria-label="{{ 'general.pagination.previous' | t }}">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-caret.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{%- endif -%}
|
||||
|
||||
{%- for part in paginate.parts -%}
|
||||
<li>
|
||||
{%- if part.is_link -%}
|
||||
<a href="{{ part.url }}" aria-label="{{ 'general.pagination.page' | t: number: part.title }}">
|
||||
{{- part.title -}}
|
||||
</a>
|
||||
{%- else -%}
|
||||
{%- if part.title == paginate.current_page -%}
|
||||
<span aria-current="page" aria-label="{{ 'general.pagination.page' | t: number: part.title }}">
|
||||
{{- part.title -}}
|
||||
</span>
|
||||
{%- else -%}
|
||||
<span>{{ part.title }}</span>
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
|
||||
{%- if paginate.next -%}
|
||||
<li>
|
||||
<a href="{{ paginate.next.url }}" aria-label="{{ 'general.pagination.next' | t }}">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-caret.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{%- endif -%}
|
||||
</ul>
|
||||
</nav>
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
{% endpaginate %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>{{ 'customer.account.details' | t }}</h2>
|
||||
|
||||
{{ customer.default_address | format_address }}
|
||||
|
||||
<a href="{{ routes.account_addresses_url }}">
|
||||
{{ 'customer.account.view_addresses' | t }} ({{ customer.addresses_count }})
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.main-account.name",
|
||||
"settings": [
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 36
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,139 @@
|
||||
{{ 'customer.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
<div class="customer activate section-{{ section.id }}-padding">
|
||||
<h1>
|
||||
{{ 'customer.activate_account.title' | t }}
|
||||
</h1>
|
||||
<p>
|
||||
{{ 'customer.activate_account.subtext' | t }}
|
||||
</p>
|
||||
{%- form 'activate_customer_password' -%}
|
||||
{%- if form.errors -%}
|
||||
<h2 class="form__message" tabindex="-1" autofocus>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-error.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{ 'templates.contact.form.error_heading' | t }}
|
||||
</h2>
|
||||
<ul>
|
||||
{%- for field in form.errors -%}
|
||||
<li>
|
||||
{%- if field == 'form' -%}
|
||||
{{ form.errors.messages[field] }}
|
||||
{%- else -%}
|
||||
<a href="#{{ field }}">
|
||||
{{ form.errors.translated_fields[field] | capitalize }}
|
||||
{{ form.errors.messages[field] }}
|
||||
</a>
|
||||
{%- endif -%}
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
{%- endif -%}
|
||||
|
||||
<div class="field">
|
||||
<input
|
||||
type="password"
|
||||
name="customer[password]"
|
||||
id="password"
|
||||
autocomplete="new-password"
|
||||
placeholder="{{ 'customer.activate_account.password' | t }}"
|
||||
{% if form.errors contains 'password' %}
|
||||
aria-invalid="true"
|
||||
aria-describedby="password-error"
|
||||
{% endif %}
|
||||
>
|
||||
<label for="password">
|
||||
{{ 'customer.activate_account.password' | t }}
|
||||
</label>
|
||||
{%- if form.errors contains 'password' -%}
|
||||
<small id="password-error" class="form__message">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-error.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{ form.errors.translated_fields.password | capitalize }}
|
||||
{{ form.errors.messages.password }}
|
||||
</small>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<input
|
||||
type="password"
|
||||
name="customer[password_confirmation]"
|
||||
id="password_confirmation"
|
||||
autocomplete="new-password"
|
||||
placeholder="{{ 'customer.activate_account.password_confirm' | t }}"
|
||||
{% if form.errors contains 'password' %}
|
||||
aria-invalid="true"
|
||||
aria-describedby="password_confirmation-error"
|
||||
{% endif %}
|
||||
>
|
||||
<label for="password_confirmation">
|
||||
{{ 'customer.activate_account.password_confirm' | t }}
|
||||
</label>
|
||||
{%- if form.errors contains 'password_confirmation' -%}
|
||||
<small id="password_confirmation-error" class="form__message">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-error.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{ form.errors.translated_fields.password_confirmation | capitalize }}
|
||||
{{ form.errors.messages.password_confirmation }}
|
||||
</small>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
||||
<button>
|
||||
{{ 'customer.activate_account.submit' | t }}
|
||||
</button>
|
||||
<button name="decline">
|
||||
{{ 'customer.activate_account.cancel' | t }}
|
||||
</button>
|
||||
{%- endform -%}
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.main-activate-account.name",
|
||||
"settings": [
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 36
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,421 @@
|
||||
{{ 'customer.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
<script src="{{ 'customer.js' | asset_url }}" defer></script>
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
{%- paginate customer.addresses by 5 -%}
|
||||
<div class="customer addresses section-{{ section.id }}-padding" data-customer-addresses>
|
||||
<h1>{{ 'customer.addresses.title' | t }}</h1>
|
||||
<a href="{{ routes.account_url }}">
|
||||
{{ 'customer.account.return' | t }}
|
||||
</a>
|
||||
|
||||
<div data-address>
|
||||
<button
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
aria-controls="AddAddress"
|
||||
>
|
||||
{{ 'customer.addresses.add_new' | t }}
|
||||
</button>
|
||||
<div id="AddAddress">
|
||||
<h2 id="AddressNewHeading">{{ 'customer.addresses.add_new' | t }}</h2>
|
||||
{%- form 'customer_address', customer.new_address, aria-labelledBy: 'AddressNewHeading' -%}
|
||||
<div class="field">
|
||||
<input
|
||||
type="text"
|
||||
id="AddressFirstNameNew"
|
||||
name="address[first_name]"
|
||||
value="{{ form.first_name }}"
|
||||
autocomplete="given-name"
|
||||
placeholder="{{ 'customer.addresses.first_name' | t }}"
|
||||
>
|
||||
<label for="AddressFirstNameNew">{{ 'customer.addresses.first_name' | t }}</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<input
|
||||
type="text"
|
||||
id="AddressLastNameNew"
|
||||
name="address[last_name]"
|
||||
value="{{ form.last_name }}"
|
||||
autocomplete="family-name"
|
||||
placeholder="{{ 'customer.addresses.last_name' | t }}"
|
||||
>
|
||||
<label for="AddressLastNameNew">{{ 'customer.addresses.last_name' | t }}</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<input
|
||||
type="text"
|
||||
id="AddressCompanyNew"
|
||||
name="address[company]"
|
||||
value="{{ form.company }}"
|
||||
autocomplete="organization"
|
||||
placeholder="{{ 'customer.addresses.company' | t }}"
|
||||
>
|
||||
<label for="AddressCompanyNew">{{ 'customer.addresses.company' | t }}</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<input
|
||||
type="text"
|
||||
id="AddressAddress1New"
|
||||
name="address[address1]"
|
||||
value="{{ form.address1 }}"
|
||||
autocomplete="address-line1"
|
||||
placeholder="{{ 'customer.addresses.address1' | t }}"
|
||||
>
|
||||
<label for="AddressAddress1New">{{ 'customer.addresses.address1' | t }}</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<input
|
||||
type="text"
|
||||
id="AddressAddress2New"
|
||||
name="address[address2]"
|
||||
value="{{ form.address2 }}"
|
||||
autocomplete="address-line2"
|
||||
placeholder="{{ 'customer.addresses.address2' | t }}"
|
||||
>
|
||||
<label for="AddressAddress2New">{{ 'customer.addresses.address2' | t }}</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<input
|
||||
type="text"
|
||||
id="AddressCityNew"
|
||||
name="address[city]"
|
||||
value="{{ form.city }}"
|
||||
autocomplete="address-level2"
|
||||
placeholder="{{ 'customer.addresses.city' | t }}"
|
||||
>
|
||||
<label for="AddressCityNew">{{ 'customer.addresses.city' | t }}</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="AddressCountryNew">{{ 'customer.addresses.country' | t }}</label>
|
||||
<div class="select">
|
||||
<select
|
||||
id="AddressCountryNew"
|
||||
name="address[country]"
|
||||
data-default="{{ form.country }}"
|
||||
autocomplete="country"
|
||||
>
|
||||
{{ all_country_option_tags }}
|
||||
</select>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-caret.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="AddressProvinceContainerNew" style="display: none">
|
||||
<label for="AddressProvinceNew">{{ 'customer.addresses.province' | t }}</label>
|
||||
<div class="select">
|
||||
<select
|
||||
id="AddressProvinceNew"
|
||||
name="address[province]"
|
||||
data-default="{{ form.province }}"
|
||||
autocomplete="address-level1"
|
||||
></select>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-caret.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<input
|
||||
type="text"
|
||||
id="AddressZipNew"
|
||||
name="address[zip]"
|
||||
value="{{ form.zip }}"
|
||||
autocapitalize="characters"
|
||||
autocomplete="postal-code"
|
||||
placeholder="{{ 'customer.addresses.zip' | t }}"
|
||||
>
|
||||
<label for="AddressZipNew">{{ 'customer.addresses.zip' | t }}</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<input
|
||||
type="tel"
|
||||
id="AddressPhoneNew"
|
||||
name="address[phone]"
|
||||
value="{{ form.phone }}"
|
||||
autocomplete="tel"
|
||||
placeholder="{{ 'customer.addresses.phone' | t }}"
|
||||
>
|
||||
<label for="AddressPhoneNew">{{ 'customer.addresses.phone' | t }}</label>
|
||||
</div>
|
||||
<div>
|
||||
{{ form.set_as_default_checkbox }}
|
||||
<label for="address_default_address_new">{{ 'customer.addresses.set_default' | t }}</label>
|
||||
</div>
|
||||
<div>
|
||||
<button>{{ 'customer.addresses.add' | t }}</button>
|
||||
<button type="reset">{{ 'customer.addresses.cancel' | t }}</button>
|
||||
</div>
|
||||
{%- endform -%}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul role="list">
|
||||
{%- for address in customer.addresses -%}
|
||||
<li data-address>
|
||||
{%- if address == customer.default_address -%}
|
||||
<h2>{{ 'customer.addresses.default' | t }}</h2>
|
||||
{%- endif -%}
|
||||
{{ address | format_address }}
|
||||
<button
|
||||
type="button"
|
||||
id="EditFormButton_{{ address.id }}"
|
||||
aria-label="{{ 'customer.addresses.edit_address' | t }} {{ forloop.index }}"
|
||||
aria-controls="EditAddress_{{ address.id }}"
|
||||
aria-expanded="false"
|
||||
data-address-id="{{ address.id }}"
|
||||
>
|
||||
{{ 'customer.addresses.edit' | t }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="{{ 'customer.addresses.delete' | t }} {{ forloop.index }}"
|
||||
data-target="{{ address.url }}"
|
||||
data-confirm-message="{{ 'customer.addresses.delete_confirm' | t }}"
|
||||
>
|
||||
{{ 'customer.addresses.delete' | t }}
|
||||
</button>
|
||||
<div id="EditAddress_{{ address.id }}">
|
||||
<h2>{{ 'customer.addresses.edit_address' | t }}</h2>
|
||||
{%- form 'customer_address', address -%}
|
||||
<div class="field">
|
||||
<input
|
||||
type="text"
|
||||
id="AddressFirstName_{{ form.id }}"
|
||||
name="address[first_name]"
|
||||
value="{{ form.first_name }}"
|
||||
autocomplete="given-name"
|
||||
placeholder="{{ 'customer.addresses.first_name' | t }}"
|
||||
>
|
||||
<label for="AddressFirstName_{{ form.id }}">{{ 'customer.addresses.first_name' | t }}</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<input
|
||||
type="text"
|
||||
id="AddressLastName_{{ form.id }}"
|
||||
name="address[last_name]"
|
||||
value="{{ form.last_name }}"
|
||||
autocomplete="family-name"
|
||||
placeholder="{{ 'customer.addresses.last_name' | t }}"
|
||||
>
|
||||
<label for="AddressLastName_{{ form.id }}">{{ 'customer.addresses.last_name' | t }}</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<input
|
||||
type="text"
|
||||
id="AddressCompany_{{ form.id }}"
|
||||
name="address[company]"
|
||||
value="{{ form.company }}"
|
||||
autocomplete="organization"
|
||||
placeholder="{{ 'customer.addresses.company' | t }}"
|
||||
>
|
||||
<label for="AddressCompany_{{ form.id }}">{{ 'customer.addresses.company' | t }}</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<input
|
||||
type="text"
|
||||
id="AddressAddress1_{{ form.id }}"
|
||||
name="address[address1]"
|
||||
value="{{ form.address1 }}"
|
||||
autocomplete="address-line1"
|
||||
placeholder="{{ 'customer.addresses.address1' | t }}"
|
||||
>
|
||||
<label for="AddressAddress1_{{ form.id }}">{{ 'customer.addresses.address1' | t }}</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<input
|
||||
type="text"
|
||||
id="AddressAddress2_{{ form.id }}"
|
||||
name="address[address2]"
|
||||
value="{{ form.address2 }}"
|
||||
autocomplete="address-line2"
|
||||
placeholder="{{ 'customer.addresses.address2' | t }}"
|
||||
>
|
||||
<label for="AddressAddress2_{{ form.id }}">{{ 'customer.addresses.address2' | t }}</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<input
|
||||
type="text"
|
||||
id="AddressCity_{{ form.id }}"
|
||||
name="address[city]"
|
||||
value="{{ form.city }}"
|
||||
autocomplete="address-level2"
|
||||
placeholder="{{ 'customer.addresses.city' | t }}"
|
||||
>
|
||||
<label for="AddressCity_{{ form.id }}">{{ 'customer.addresses.city' | t }}</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="AddressCountry_{{ form.id }}">
|
||||
{{ 'customer.addresses.country' | t }}
|
||||
</label>
|
||||
<div class="select">
|
||||
<select
|
||||
id="AddressCountry_{{ form.id }}"
|
||||
name="address[country]"
|
||||
data-address-country-select
|
||||
data-default="{{ form.country }}"
|
||||
data-form-id="{{ form.id }}"
|
||||
autocomplete="country"
|
||||
>
|
||||
{{ all_country_option_tags }}
|
||||
</select>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-caret.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="AddressProvinceContainer_{{ form.id }}" style="display:none;">
|
||||
<label for="AddressProvince_{{ form.id }}">
|
||||
{{ 'customer.addresses.province' | t }}
|
||||
</label>
|
||||
<div class="select">
|
||||
<select
|
||||
id="AddressProvince_{{ form.id }}"
|
||||
name="address[province]"
|
||||
data-default="{{ form.province }}"
|
||||
autocomplete="address-level1"
|
||||
></select>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-caret.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<input
|
||||
type="text"
|
||||
id="AddressZip_{{ form.id }}"
|
||||
name="address[zip]"
|
||||
value="{{ form.zip }}"
|
||||
autocapitalize="characters"
|
||||
autocomplete="postal-code"
|
||||
placeholder="{{ 'customer.addresses.zip' | t }}"
|
||||
>
|
||||
<label for="AddressZip_{{ form.id }}">{{ 'customer.addresses.zip' | t }}</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<input
|
||||
type="tel"
|
||||
id="AddressPhone_{{ form.id }}"
|
||||
name="address[phone]"
|
||||
value="{{ form.phone }}"
|
||||
autocomplete="tel"
|
||||
placeholder="{{ 'customer.addresses.phone' | t }}"
|
||||
>
|
||||
<label for="AddressPhone_{{ form.id }}">{{ 'customer.addresses.phone' | t }}</label>
|
||||
</div>
|
||||
<div>
|
||||
{{ form.set_as_default_checkbox }}
|
||||
<label for="address_default_address_{{ form.id }}">
|
||||
{{ 'customer.addresses.set_default' | t }}
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<button>{{ 'customer.addresses.update' | t }}</button>
|
||||
<button type="reset">{{ 'customer.addresses.cancel' | t }}</button>
|
||||
</div>
|
||||
{%- endform -%}
|
||||
</div>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
|
||||
{%- if paginate.pages > 1 -%}
|
||||
{%- if paginate.parts.size > 0 -%}
|
||||
<nav class="pagination" role="navigation" aria-label="{{ 'general.pagination.label' | t }}">
|
||||
<ul role="list">
|
||||
{%- if paginate.previous -%}
|
||||
<li>
|
||||
<a href="{{ paginate.previous.url }}" aria-label="{{ 'general.pagination.previous' | t }}">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-caret.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{%- endif -%}
|
||||
|
||||
{%- for part in paginate.parts -%}
|
||||
<li>
|
||||
{%- if part.is_link -%}
|
||||
<a href="{{ part.url }}" aria-label="{{ 'general.pagination.page' | t: number: part.title }}">
|
||||
{{- part.title -}}
|
||||
</a>
|
||||
{%- else -%}
|
||||
{%- if part.title == paginate.current_page -%}
|
||||
<span aria-current="page" aria-label="{{ 'general.pagination.page' | t: number: part.title }}">
|
||||
{{- part.title -}}
|
||||
</span>
|
||||
{%- else -%}
|
||||
<span>{{ part.title }}</span>
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
|
||||
{%- if paginate.next -%}
|
||||
<li>
|
||||
<a href="{{ paginate.next.url }}" aria-label="{{ 'general.pagination.next' | t }}">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-caret.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{%- endif -%}
|
||||
</ul>
|
||||
</nav>
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- endpaginate -%}
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', () => {
|
||||
typeof CustomerAddresses !== 'undefined' && new CustomerAddresses();
|
||||
});
|
||||
</script>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.main-addresses.name",
|
||||
"settings": [
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 36
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,374 @@
|
||||
{{ 'section-blog-post.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
<article class="article-template">
|
||||
{%- for block in section.blocks -%}
|
||||
{%- case block.type -%}
|
||||
{%- when '@app' -%}
|
||||
<div class="page-width page-width--narrow">
|
||||
{% render block %}
|
||||
</div>
|
||||
{%- when 'featured_image' -%}
|
||||
{%- if article.image -%}
|
||||
<div
|
||||
class="article-template__hero-container{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
|
||||
{{ block.shopify_attributes }}
|
||||
>
|
||||
<div
|
||||
class="article-template__hero-{{ block.settings.image_height }} media"
|
||||
{% if block.settings.image_height == 'adapt' and article.image %}
|
||||
style="padding-bottom: {{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;"
|
||||
{% endif %}
|
||||
>
|
||||
<img
|
||||
srcset="
|
||||
{% if article.image.width >= 350 %}{{ article.image | image_url: width: 350 }} 350w,{% endif %}
|
||||
{% if article.image.width >= 750 %}{{ article.image | image_url: width: 750 }} 750w,{% endif %}
|
||||
{% if article.image.width >= 1100 %}{{ article.image | image_url: width: 1100 }} 1100w,{% endif %}
|
||||
{% if article.image.width >= 1500 %}{{ article.image | image_url: width: 1500 }} 1500w,{% endif %}
|
||||
{% if article.image.width >= 2200 %}{{ article.image | image_url: width: 2200 }} 2200w,{% endif %}
|
||||
{% if article.image.width >= 3000 %}{{ article.image | image_url: width: 3000 }} 3000w,{% endif %}
|
||||
{{ article.image | image_url }} {{ article.image.width }}w
|
||||
"
|
||||
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw"
|
||||
src="{{ article.image | image_url: width: 1100 }}"
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
width="{{ article.image.width }}"
|
||||
height="{{ article.image.height }}"
|
||||
alt="{{ article.image.alt | escape }}"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
|
||||
{%- when 'title' -%}
|
||||
<header
|
||||
class="page-width page-width--narrow{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
|
||||
{{ block.shopify_attributes }}
|
||||
>
|
||||
<h1
|
||||
class="article-template__title"
|
||||
>
|
||||
{{ article.title | escape }}
|
||||
</h1>
|
||||
{%- if block.settings.blog_show_date -%}
|
||||
<span class="circle-divider caption-with-letter-spacing">
|
||||
{{- article.published_at | time_tag: format: 'date' -}}
|
||||
</span>
|
||||
{%- endif -%}
|
||||
{%- if block.settings.blog_show_author -%}
|
||||
<span class="caption-with-letter-spacing">
|
||||
<span>{{ article.author }}</span>
|
||||
</span>
|
||||
{%- endif -%}
|
||||
</header>
|
||||
|
||||
{%- when 'content' -%}
|
||||
<div
|
||||
class="article-template__content page-width page-width--narrow rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{{ block.shopify_attributes }}
|
||||
>
|
||||
{{ article.content }}
|
||||
</div>
|
||||
|
||||
{%- when 'share' -%}
|
||||
<div
|
||||
class="article-template__social-sharing page-width page-width--narrow{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{{ block.shopify_attributes }}
|
||||
>
|
||||
{% assign share_url = request.origin | append: article.url %}
|
||||
{% render 'share-button', block: block, share_link: share_url %}
|
||||
</div>
|
||||
{%- endcase -%}
|
||||
{%- endfor -%}
|
||||
|
||||
<div class="article-template__back element-margin-top center{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
|
||||
<a href="{{ blog.url }}" class="article-template__link link animate-arrow">
|
||||
<span class="icon-wrap">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-arrow.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</span>
|
||||
{{ 'blogs.article.back_to_blog' | t: title: blog.title | escape }}
|
||||
</a>
|
||||
</div>
|
||||
{%- if blog.comments_enabled? -%}
|
||||
<div class="article-template__comment-wrapper background-secondary">
|
||||
<div
|
||||
id="comments"
|
||||
class="page-width page-width--narrow{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
>
|
||||
{%- if article.comments_count > 0 -%}
|
||||
{%- assign anchorId = '#Comments-' | append: article.id -%}
|
||||
|
||||
<h2 id="Comments-{{ article.id }}" tabindex="-1">
|
||||
{{ 'blogs.article.comments' | t: count: article.comments_count }}
|
||||
</h2>
|
||||
{% paginate article.comments by 5 %}
|
||||
<div class="article-template__comments">
|
||||
{%- if comment.status == 'pending' and comment.content -%}
|
||||
<article id="{{ comment.id }}" class="article-template__comments-comment">
|
||||
{{ comment.content }}
|
||||
<footer class="right">
|
||||
<span class="circle-divider caption-with-letter-spacing">{{ comment.author }}</span>
|
||||
</footer>
|
||||
</article>
|
||||
{%- endif -%}
|
||||
|
||||
{%- for comment in article.comments -%}
|
||||
<article id="{{ comment.id }}" class="article-template__comments-comment">
|
||||
{{ comment.content }}
|
||||
<footer class="right">
|
||||
<span class="circle-divider caption-with-letter-spacing">{{ comment.author }}</span
|
||||
><span class="caption-with-letter-spacing">
|
||||
{{- comment.created_at | time_tag: format: 'date' -}}
|
||||
</span>
|
||||
</footer>
|
||||
</article>
|
||||
{%- endfor -%}
|
||||
{% render 'pagination', paginate: paginate, anchor: anchorId %}
|
||||
</div>
|
||||
{% endpaginate %}
|
||||
{%- endif -%}
|
||||
{% form 'new_comment', article %}
|
||||
{%- liquid
|
||||
assign post_message = 'blogs.article.success'
|
||||
if blog.moderated? and comment.status == 'unapproved'
|
||||
assign post_message = 'blogs.article.success_moderated'
|
||||
endif
|
||||
-%}
|
||||
<h2>{{ 'blogs.article.comment_form_title' | t }}</h2>
|
||||
{%- if form.errors -%}
|
||||
<div class="form__message" role="alert">
|
||||
<h3 class="form-status caption-large text-body" tabindex="-1" autofocus>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-error.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{ 'templates.contact.form.error_heading' | t }}
|
||||
</h3>
|
||||
</div>
|
||||
<ul class="form-status-list caption-large">
|
||||
{%- for field in form.errors -%}
|
||||
<li>
|
||||
<a href="#CommentForm-{{ field }}" class="link">
|
||||
{%- if form.errors.translated_fields[field] contains 'author' -%}
|
||||
{{ 'blogs.article.name' | t }}
|
||||
{%- elsif form.errors.translated_fields[field] contains 'body' -%}
|
||||
{{ 'blogs.article.message' | t }}
|
||||
{%- else -%}
|
||||
{{ form.errors.translated_fields[field] }}
|
||||
{%- endif -%}
|
||||
{{ form.errors.messages[field] }}
|
||||
</a>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
{%- elsif form.posted_successfully? -%}
|
||||
<div class="form-status-list form__message" role="status">
|
||||
<h3 class="form-status" tabindex="-1" autofocus>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-success.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{ post_message | t }}
|
||||
</h3>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
|
||||
<div
|
||||
{% if blog.moderated? == false %}
|
||||
class="article-template__comments-fields"
|
||||
{% endif %}
|
||||
>
|
||||
<div class="article-template__comment-fields">
|
||||
<div class="field field--with-error">
|
||||
<input
|
||||
type="text"
|
||||
name="comment[author]"
|
||||
id="CommentForm-author"
|
||||
class="field__input"
|
||||
autocomplete="name"
|
||||
value="{{ form.author }}"
|
||||
aria-required="true"
|
||||
required
|
||||
{% if form.errors contains 'author' %}
|
||||
aria-invalid="true"
|
||||
aria-describedby="CommentForm-author-error"
|
||||
{% endif %}
|
||||
placeholder="{{ 'blogs.article.name' | t }}"
|
||||
>
|
||||
<label class="field__label" for="CommentForm-author">
|
||||
{{- 'blogs.article.name' | t }}
|
||||
<span aria-hidden="true">*</span></label
|
||||
>
|
||||
{%- if form.errors contains 'author' -%}
|
||||
<small id="CommentForm-author-error">
|
||||
<span class="form__message">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-error.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{- 'blogs.article.name' | t }}
|
||||
{{ form.errors.messages.author }}.</span
|
||||
>
|
||||
</small>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
<div class="field field--with-error">
|
||||
<input
|
||||
type="email"
|
||||
name="comment[email]"
|
||||
id="CommentForm-email"
|
||||
autocomplete="email"
|
||||
class="field__input"
|
||||
value="{{ form.email }}"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
aria-required="true"
|
||||
required
|
||||
{% if form.errors contains 'email' %}
|
||||
aria-invalid="true"
|
||||
aria-describedby="CommentForm-email-error"
|
||||
{% endif %}
|
||||
placeholder="{{ 'blogs.article.email' | t }}"
|
||||
>
|
||||
<label class="field__label" for="CommentForm-email">
|
||||
{{- 'blogs.article.email' | t }}
|
||||
<span aria-hidden="true">*</span></label
|
||||
>
|
||||
{%- if form.errors contains 'email' -%}
|
||||
<small id="CommentForm-email-error">
|
||||
<span class="form__message">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-error.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{- 'blogs.article.email' | t }}
|
||||
{{ form.errors.messages.email }}.</span
|
||||
>
|
||||
</small>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
<div class="field field--with-error">
|
||||
<textarea
|
||||
rows="5"
|
||||
name="comment[body]"
|
||||
id="CommentForm-body"
|
||||
class="text-area field__input"
|
||||
aria-required="true"
|
||||
required
|
||||
{% if form.errors contains 'body' %}
|
||||
aria-invalid="true"
|
||||
aria-describedby="CommentForm-body-error"
|
||||
{% endif %}
|
||||
placeholder="{{ 'blogs.article.message' | t }}"
|
||||
>{{ form.body }}</textarea>
|
||||
<label class="form__label field__label" for="CommentForm-body">
|
||||
{{- 'blogs.article.message' | t }}
|
||||
<span aria-hidden="true">*</span></label
|
||||
>
|
||||
</div>
|
||||
{%- if form.errors contains 'body' -%}
|
||||
<small id="CommentForm-body-error">
|
||||
<span class="form__message">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-error.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{- 'blogs.article.message' | t }}
|
||||
{{ form.errors.messages.body }}.</span
|
||||
>
|
||||
</small>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- if blog.moderated? -%}
|
||||
<p class="article-template__comment-warning caption">{{ 'blogs.article.moderated' | t }}</p>
|
||||
{%- endif -%}
|
||||
<input type="submit" class="button" value="{{ 'blogs.article.post' | t }}">
|
||||
{% endform %}
|
||||
</div>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</article>
|
||||
|
||||
<script type="application/ld+json">
|
||||
{{ article | structured_data }}
|
||||
</script>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.main-article.name",
|
||||
"tag": "section",
|
||||
"class": "section",
|
||||
"blocks": [
|
||||
{
|
||||
"type": "@app"
|
||||
},
|
||||
{
|
||||
"type": "featured_image",
|
||||
"name": "t:sections.main-article.blocks.featured_image.name",
|
||||
"limit": 1,
|
||||
"settings": [
|
||||
{
|
||||
"type": "select",
|
||||
"id": "image_height",
|
||||
"options": [
|
||||
{
|
||||
"value": "adapt",
|
||||
"label": "t:sections.main-article.blocks.featured_image.settings.image_height.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "small",
|
||||
"label": "t:sections.main-article.blocks.featured_image.settings.image_height.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "medium",
|
||||
"label": "t:sections.main-article.blocks.featured_image.settings.image_height.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "large",
|
||||
"label": "t:sections.main-article.blocks.featured_image.settings.image_height.options__4.label"
|
||||
}
|
||||
],
|
||||
"default": "adapt",
|
||||
"label": "t:sections.main-article.blocks.featured_image.settings.image_height.label"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "title",
|
||||
"name": "t:sections.main-article.blocks.title.name",
|
||||
"limit": 1,
|
||||
"settings": [
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "blog_show_date",
|
||||
"default": true,
|
||||
"label": "t:sections.main-article.blocks.title.settings.blog_show_date.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "blog_show_author",
|
||||
"default": false,
|
||||
"label": "t:sections.main-article.blocks.title.settings.blog_show_author.label"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "content",
|
||||
"name": "t:sections.main-article.blocks.content.name",
|
||||
"limit": 1
|
||||
},
|
||||
{
|
||||
"type": "share",
|
||||
"name": "t:sections.main-article.blocks.share.name",
|
||||
"limit": 2,
|
||||
"settings": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "share_label",
|
||||
"label": "t:sections.main-article.blocks.share.settings.text.label",
|
||||
"default": "t:sections.main-article.blocks.share.settings.text.default"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,143 @@
|
||||
{{ 'component-article-card.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-card.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'section-main-blog.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
{%- paginate blog.articles by 6 -%}
|
||||
<div class="main-blog page-width section-{{ section.id }}-padding">
|
||||
<h1 class="title--primary{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
|
||||
{{ blog.title | escape }}
|
||||
</h1>
|
||||
|
||||
<div class="blog-articles {% if section.settings.layout == 'collage' %}blog-articles--collage{% endif %}">
|
||||
{%- for article in blog.articles -%}
|
||||
<div
|
||||
class="blog-articles__article article{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{% if settings.animations_reveal_on_scroll %}
|
||||
data-cascade
|
||||
style="--animation-order: {{ forloop.index }};"
|
||||
{% endif %}
|
||||
>
|
||||
{%- render 'article-card',
|
||||
article: article,
|
||||
media_height: section.settings.image_height,
|
||||
media_aspect_ratio: article.image.aspect_ratio,
|
||||
show_image: section.settings.show_image,
|
||||
show_date: section.settings.show_date,
|
||||
show_author: section.settings.show_author,
|
||||
show_excerpt: true
|
||||
-%}
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
|
||||
{%- if paginate.pages > 1 -%}
|
||||
{%- render 'pagination', paginate: paginate -%}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- endpaginate -%}
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.main-blog.name",
|
||||
"tag": "section",
|
||||
"class": "section",
|
||||
"settings": [
|
||||
{
|
||||
"type": "select",
|
||||
"id": "layout",
|
||||
"options": [
|
||||
{
|
||||
"value": "grid",
|
||||
"label": "t:sections.main-blog.settings.layout.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "collage",
|
||||
"label": "t:sections.main-blog.settings.layout.options__2.label"
|
||||
}
|
||||
],
|
||||
"default": "collage",
|
||||
"label": "t:sections.main-blog.settings.layout.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_image",
|
||||
"default": true,
|
||||
"label": "t:sections.main-blog.settings.show_image.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "image_height",
|
||||
"options": [
|
||||
{
|
||||
"value": "adapt",
|
||||
"label": "t:sections.main-blog.settings.image_height.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "small",
|
||||
"label": "t:sections.main-blog.settings.image_height.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "medium",
|
||||
"label": "t:sections.main-blog.settings.image_height.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "large",
|
||||
"label": "t:sections.main-blog.settings.image_height.options__4.label"
|
||||
}
|
||||
],
|
||||
"default": "medium",
|
||||
"label": "t:sections.main-blog.settings.image_height.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_date",
|
||||
"default": true,
|
||||
"label": "t:sections.main-blog.settings.show_date.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_author",
|
||||
"default": false,
|
||||
"label": "t:sections.main-blog.settings.show_author.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 36
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,188 @@
|
||||
{{ 'component-cart.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-totals.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-price.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-discounts.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
<div
|
||||
class="gradient color-{{ section.settings.color_scheme }}{% if cart == empty %} is-empty{% endif %}"
|
||||
id="main-cart-footer"
|
||||
data-id="{{ section.id }}"
|
||||
>
|
||||
<div class="page-width">
|
||||
<div class="cart__footer isolate section-{{ section.id }}-padding">
|
||||
{%- if settings.show_cart_note -%}
|
||||
<cart-note class="cart__note field">
|
||||
<label for="Cart-note">{{ 'sections.cart.note' | t }}</label>
|
||||
<textarea
|
||||
class="text-area field__input"
|
||||
name="note"
|
||||
form="cart"
|
||||
id="Cart-note"
|
||||
placeholder="{{ 'sections.cart.note' | t }}"
|
||||
>{{ cart.note }}</textarea>
|
||||
</cart-note>
|
||||
{%- endif -%}
|
||||
|
||||
<div class="cart__blocks">
|
||||
{% for block in section.blocks %}
|
||||
{%- case block.type -%}
|
||||
{%- when '@app' -%}
|
||||
{% render block %}
|
||||
{%- when 'subtotal' -%}
|
||||
<div class="js-contents" {{ block.shopify_attributes }}>
|
||||
<div>
|
||||
{%- if cart.cart_level_discount_applications.size > 0 -%}
|
||||
<ul class="discounts list-unstyled" role="list" aria-label="{{ 'customer.order.discount' | t }}">
|
||||
{%- for discount in cart.cart_level_discount_applications -%}
|
||||
<li class="discounts__discount discounts__discount--position">
|
||||
{{- 'icon-discount.svg' | inline_asset_content -}}
|
||||
{{ discount.title | escape }}
|
||||
(-{{ discount.total_allocated_amount | money }})
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
||||
<div class="totals">
|
||||
<h2 class="totals__total">{{ 'sections.cart.estimated_total' | t }}</h2>
|
||||
<p class="totals__total-value">{{ cart.total_price | money_with_currency }}</p>
|
||||
</div>
|
||||
|
||||
<small class="tax-note caption-large rte">
|
||||
{%- if cart.duties_included and cart.taxes_included -%}
|
||||
{%- if shop.shipping_policy.body == blank -%}
|
||||
{{ 'sections.cart.duties_and_taxes_included_shipping_at_checkout_without_policy' | t }}
|
||||
{%- else -%}
|
||||
{{
|
||||
'sections.cart.duties_and_taxes_included_shipping_at_checkout_with_policy_html'
|
||||
| t: link: shop.shipping_policy.url
|
||||
}}
|
||||
{%- endif -%}
|
||||
{%- elsif cart.duties_included == false and cart.taxes_included -%}
|
||||
{%- if shop.shipping_policy.body == blank -%}
|
||||
{{ 'sections.cart.taxes_included_shipping_at_checkout_without_policy' | t }}
|
||||
{%- else -%}
|
||||
{{
|
||||
'sections.cart.taxes_included_shipping_at_checkout_with_policy_html'
|
||||
| t: link: shop.shipping_policy.url
|
||||
}}
|
||||
{%- endif -%}
|
||||
{%- elsif cart.duties_included and cart.taxes_included == false -%}
|
||||
{%- if shop.shipping_policy.body == blank -%}
|
||||
{{ 'sections.cart.duties_included_taxes_at_checkout_shipping_at_checkout_without_policy' | t }}
|
||||
{%- else -%}
|
||||
{{
|
||||
'sections.cart.duties_included_taxes_at_checkout_shipping_at_checkout_with_policy_html'
|
||||
| t: link: shop.shipping_policy.url
|
||||
}}
|
||||
{%- endif -%}
|
||||
{%- elsif cart.duties_included == false and cart.taxes_included == false -%}
|
||||
{%- if shop.shipping_policy.body == blank -%}
|
||||
{{ 'sections.cart.taxes_at_checkout_shipping_at_checkout_without_policy' | t }}
|
||||
{%- else -%}
|
||||
{{
|
||||
'sections.cart.taxes_at_checkout_shipping_at_checkout_with_policy_html'
|
||||
| t: link: shop.shipping_policy.url
|
||||
}}
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
</small>
|
||||
</div>
|
||||
{%- else -%}
|
||||
<div class="cart__ctas" {{ block.shopify_attributes }}>
|
||||
<button
|
||||
type="submit"
|
||||
id="checkout"
|
||||
class="cart__checkout-button button"
|
||||
name="checkout"
|
||||
{% if cart == empty %}
|
||||
disabled
|
||||
{% endif %}
|
||||
form="cart"
|
||||
>
|
||||
{{ 'sections.cart.checkout' | t }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{%- if additional_checkout_buttons -%}
|
||||
<div class="cart__dynamic-checkout-buttons additional-checkout-buttons">
|
||||
{{ content_for_additional_checkout_buttons }}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- endcase -%}
|
||||
{% endfor %}
|
||||
|
||||
<div id="cart-errors"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.main-cart-footer.name",
|
||||
"class": "cart__footer-wrapper",
|
||||
"settings": [
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"default": "scheme-1"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 40
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 40
|
||||
}
|
||||
],
|
||||
"blocks": [
|
||||
{
|
||||
"type": "subtotal",
|
||||
"name": "t:sections.main-cart-footer.blocks.subtotal.name",
|
||||
"limit": 1
|
||||
},
|
||||
{
|
||||
"type": "buttons",
|
||||
"name": "t:sections.main-cart-footer.blocks.buttons.name",
|
||||
"limit": 1
|
||||
},
|
||||
{
|
||||
"type": "@app"
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,507 @@
|
||||
{{ 'component-cart.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-cart-items.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-totals.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-price.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-discounts.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'quantity-popover.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
{%- unless settings.cart_type == 'drawer' -%}
|
||||
<script src="{{ 'cart.js' | asset_url }}" defer="defer"></script>
|
||||
{%- endunless -%}
|
||||
|
||||
<script src="{{ 'quantity-popover.js' | asset_url }}" defer="defer"></script>
|
||||
|
||||
<cart-items
|
||||
class="gradient color-{{ section.settings.color_scheme }} isolate{% if cart == empty %} is-empty{% else %} section-{{ section.id }}-padding{% endif %}"
|
||||
view-event-payload="{{ cart | standard_event_data: 'view', context: 'page' | escape }}"
|
||||
>
|
||||
<div class="page-width">
|
||||
<div class="title-wrapper-with-link">
|
||||
<h1 class="title title--primary">{{ 'sections.cart.title' | t }}</h1>
|
||||
<a href="{{ routes.all_products_collection_url }}" class="underlined-link">
|
||||
{{- 'general.continue_shopping' | t -}}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="cart__warnings">
|
||||
<h1 class="cart__empty-text">{{ 'sections.cart.empty' | t }}</h1>
|
||||
<a href="{{ routes.all_products_collection_url }}" class="button">
|
||||
{{ 'general.continue_shopping' | t }}
|
||||
</a>
|
||||
|
||||
{%- if shop.customer_accounts_enabled and customer == null -%}
|
||||
<h2 class="cart__login-title">{{ 'sections.cart.login.title' | t }}</h2>
|
||||
<p class="cart__login-paragraph">
|
||||
{{ 'sections.cart.login.paragraph_html' | t: link: routes.account_login_url }}
|
||||
</p>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
||||
<form action="{{ routes.cart_url }}" class="cart__contents critical-hidden" method="post" id="cart">
|
||||
<div class="cart__items" id="main-cart-items" data-id="{{ section.id }}">
|
||||
<div class="js-contents">
|
||||
{%- if cart != empty -%}
|
||||
<table class="cart-items">
|
||||
<caption class="visually-hidden">
|
||||
{{ 'sections.cart.title' | t }}
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="caption-with-letter-spacing" colspan="2" scope="col">
|
||||
{{ 'sections.cart.headings.product' | t }}
|
||||
</th>
|
||||
<th class="medium-hide large-up-hide right caption-with-letter-spacing" colspan="1" scope="col">
|
||||
{{ 'sections.cart.headings.total' | t }}
|
||||
</th>
|
||||
<th
|
||||
class="cart-items__heading--wide cart-items__heading--quantity small-hide caption-with-letter-spacing"
|
||||
colspan="1"
|
||||
scope="col"
|
||||
>
|
||||
{{ 'sections.cart.headings.quantity' | t }}
|
||||
</th>
|
||||
<th class="small-hide right caption-with-letter-spacing" colspan="1" scope="col">
|
||||
{{ 'sections.cart.headings.total' | t }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{%- for item in cart.items -%}
|
||||
<tr
|
||||
class="cart-item {% if item.parent_relationship.parent != null %}cart-item__nested-line{% endif %}"
|
||||
id="CartItem-{{ item.index | plus: 1 }}"
|
||||
{% if item.parent_relationship.parent != null %}
|
||||
aria-label="{{- 'products.product.nested_label' | t: title: item.product.title, parent_title: item.parent_relationship.parent.title | escape -}}"
|
||||
{% endif %}
|
||||
>
|
||||
<td class="cart-item__media">
|
||||
{% if item.image %}
|
||||
{% comment %} Leave empty space due to a:empty CSS display: none rule {% endcomment %}
|
||||
<a href="{{ item.url }}" class="cart-item__link" aria-hidden="true" tabindex="-1"> </a>
|
||||
<div class="cart-item__image-container gradient {% if item.parent_relationship.parent == null %}global-media-settings{% endif %}">
|
||||
<img
|
||||
src="{{ item.image | image_url: width: 300 }}"
|
||||
class="cart-item__image {% if item.parent_relationship.parent != null %}global-media-settings{% endif %}"
|
||||
alt="{{ item.image.alt | escape }}"
|
||||
loading="lazy"
|
||||
width="150"
|
||||
height="{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"
|
||||
>
|
||||
</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
|
||||
<td class="cart-item__details">
|
||||
{%- if settings.show_vendor -%}
|
||||
<p class="caption-with-letter-spacing">{{ item.product.vendor }}</p>
|
||||
{%- endif -%}
|
||||
|
||||
<div class="cart-item__title">
|
||||
<a href="{{ item.url }}" class="cart-item__name h4 break">{{ item.product.title | escape }}</a>
|
||||
{%- assign cart_disclosure_modal_id = 'CartDisclosureModal-cart-' | append: item.key | replace: ':', '-' -%}
|
||||
{%- render 'cart-disclosure-indicator',
|
||||
product: item.product,
|
||||
modal_id: cart_disclosure_modal_id
|
||||
-%}
|
||||
</div>
|
||||
|
||||
{%- if item.original_price != item.final_price -%}
|
||||
<div class="cart-item__discounted-prices">
|
||||
<span class="visually-hidden">
|
||||
{{ 'products.product.price.regular_price' | t }}
|
||||
</span>
|
||||
<s class="cart-item__old-price product-option">
|
||||
{{- item.original_price | money -}}
|
||||
</s>
|
||||
<span class="visually-hidden">
|
||||
{{ 'products.product.price.sale_price' | t }}
|
||||
</span>
|
||||
<strong class="cart-item__final-price product-option">
|
||||
{{ item.final_price | money }}
|
||||
</strong>
|
||||
</div>
|
||||
{%- else -%}
|
||||
<div class="product-option">
|
||||
{{ item.original_price | money }}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
|
||||
{%- if item.product.has_only_default_variant == false
|
||||
or item.properties.size != 0
|
||||
or item.selling_plan_allocation != null
|
||||
-%}
|
||||
<dl>
|
||||
{%- if item.product.has_only_default_variant == false -%}
|
||||
{%- for option in item.options_with_values -%}
|
||||
<div class="product-option">
|
||||
<dt>{{ option.name }}:</dt>
|
||||
<dd>{{ option.value }}</dd>
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
{%- endif -%}
|
||||
|
||||
{%- for property in item.properties -%}
|
||||
{%- assign property_first_char = property.first | slice: 0 -%}
|
||||
{%- if property.last != blank and property_first_char != '_' -%}
|
||||
<div class="product-option">
|
||||
<dt>{{ property.first }}:</dt>
|
||||
<dd>
|
||||
{%- if property.last contains '/uploads/' -%}
|
||||
<a href="{{ property.last }}" class="link" target="_blank">
|
||||
{{ property.last | split: '/' | last }}
|
||||
</a>
|
||||
{%- else -%}
|
||||
{{ property.last }}
|
||||
{%- endif -%}
|
||||
</dd>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</dl>
|
||||
|
||||
<p class="product-option">{{ item.selling_plan_allocation.selling_plan.name }}</p>
|
||||
{%- endif -%}
|
||||
|
||||
<ul class="discounts list-unstyled" role="list" aria-label="{{ 'customer.order.discount' | t }}">
|
||||
{%- for discount in item.line_level_discount_allocations -%}
|
||||
<li class="discounts__discount">
|
||||
{{- 'icon-discount.svg' | inline_asset_content -}}
|
||||
{{ discount.discount_application.title | escape }}
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
</td>
|
||||
|
||||
<td class="cart-item__totals right medium-hide large-up-hide">
|
||||
{%- render 'loading-spinner' -%}
|
||||
<div class="cart-item__price-wrapper">
|
||||
{%- if item.original_line_price != item.final_line_price -%}
|
||||
<dl class="cart-item__discounted-prices">
|
||||
<dt class="visually-hidden">
|
||||
{{ 'products.product.price.regular_price' | t }}
|
||||
</dt>
|
||||
<dd>
|
||||
<s class="cart-item__old-price price price--end">
|
||||
{{ item.original_line_price | money }}
|
||||
</s>
|
||||
</dd>
|
||||
<dt class="visually-hidden">
|
||||
{{ 'products.product.price.sale_price' | t }}
|
||||
</dt>
|
||||
<dd class="price price--end">
|
||||
{{ item.final_line_price | money }}
|
||||
</dd>
|
||||
</dl>
|
||||
{%- else -%}
|
||||
<span class="price price--end">
|
||||
{{ item.original_line_price | money }}
|
||||
</span>
|
||||
{%- endif -%}
|
||||
|
||||
{%- if item.variant.available and item.unit_price_measurement -%}
|
||||
{% render 'unit-price', price: item.unit_price, measurement: item.unit_price_measurement %}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</td>
|
||||
{%- liquid
|
||||
assign has_qty_rules = false
|
||||
if item.variant.quantity_rule.increment > 1 or item.variant.quantity_rule.min > 1 or item.variant.quantity_rule.max != null
|
||||
assign has_qty_rules = true
|
||||
endif
|
||||
|
||||
assign has_vol_pricing = false
|
||||
if item.variant.quantity_price_breaks.size > 0
|
||||
assign has_vol_pricing = true
|
||||
endif
|
||||
-%}
|
||||
<td class="cart-item__quantity{% if has_qty_rules or has_vol_pricing %} cart-item__quantity--info{% endif %}">
|
||||
<quantity-popover>
|
||||
<div class="cart-item__quantity-wrapper quantity-popover-wrapper">
|
||||
<label class="visually-hidden" for="Quantity-{{ item.index | plus: 1 }}">
|
||||
{{ 'products.product.quantity.label' | t }}
|
||||
</label>
|
||||
<div class="quantity-popover-container{% if has_qty_rules or has_vol_pricing %} quantity-popover-container--hover{% endif %}">
|
||||
{%- if has_qty_rules or has_vol_pricing -%}
|
||||
<button
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
class="quantity-popover__info-button quantity-popover__info-button--icon-only button button--tertiary small-hide medium-hide"
|
||||
>
|
||||
{{- 'icon-info.svg' | inline_asset_content -}}
|
||||
</button>
|
||||
{%- endif -%}
|
||||
<quantity-input class="quantity cart-quantity">
|
||||
{% assign can_update_quantity = item.instructions.can_update_quantity | default: true %}
|
||||
<button
|
||||
class="quantity__button"
|
||||
name="minus"
|
||||
type="button"
|
||||
{% if can_update_quantity == false %}
|
||||
disabled
|
||||
{% endif %}
|
||||
>
|
||||
<span class="visually-hidden">
|
||||
{{- 'products.product.quantity.decrease' | t: product: item.product.title | escape -}}
|
||||
</span>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-minus.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</button>
|
||||
<input
|
||||
class="quantity__input"
|
||||
data-quantity-variant-id="{{ item.variant.id }}"
|
||||
data-quantity-line-key="{{ item.key }}"
|
||||
type="number"
|
||||
name="updates[]"
|
||||
value="{{ item.quantity }}"
|
||||
{% # theme-check-disable %}
|
||||
data-cart-quantity="{{ cart | item_count_for_variant: item.variant.id }}"
|
||||
min="0"
|
||||
data-min="{{ item.variant.quantity_rule.min }}"
|
||||
{% if item.variant.quantity_rule.max != null %}
|
||||
max="{{ item.variant.quantity_rule.max }}"
|
||||
{% endif %}
|
||||
step="{{ item.variant.quantity_rule.increment }}"
|
||||
{% # theme-check-enable %}
|
||||
aria-label="{{ 'products.product.quantity.input_label' | t: product: item.product.title | escape }}"
|
||||
id="Quantity-{{ item.index | plus: 1 }}"
|
||||
data-index="{{ item.index | plus: 1 }}"
|
||||
{% if can_update_quantity == false %}
|
||||
disabled
|
||||
{% endif %}
|
||||
>
|
||||
<button
|
||||
class="quantity__button"
|
||||
name="plus"
|
||||
type="button"
|
||||
{% if can_update_quantity == false %}
|
||||
disabled
|
||||
{% endif %}
|
||||
>
|
||||
<span class="visually-hidden">
|
||||
{{- 'products.product.quantity.increase' | t: product: item.product.title | escape -}}
|
||||
</span>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-plus.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</button>
|
||||
</quantity-input>
|
||||
</div>
|
||||
<cart-remove-button
|
||||
id="Remove-{{ item.index | plus: 1 }}"
|
||||
data-index="{{ item.index | plus: 1 }}"
|
||||
{% assign can_remove = item.instructions.can_remove | default: true %}
|
||||
{% if can_remove == false %}
|
||||
class="hidden"
|
||||
{% endif %}
|
||||
>
|
||||
<a
|
||||
href="{{ item.url_to_remove }}"
|
||||
class="button button--tertiary"
|
||||
aria-label="{{ 'sections.cart.remove_title' | t: title: item.title | escape }}"
|
||||
>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-remove.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</a>
|
||||
</cart-remove-button>
|
||||
</div>
|
||||
{%- if has_qty_rules or has_vol_pricing -%}
|
||||
<button
|
||||
type="button"
|
||||
class="quantity-popover__info-button quantity-popover__info-button--icon-with-label button button--tertiary large-up-hide"
|
||||
aria-expanded="false"
|
||||
>
|
||||
{{- 'icon-info.svg' | inline_asset_content -}}
|
||||
<span>
|
||||
{%- if has_vol_pricing -%}
|
||||
{{ 'products.product.volume_pricing.note' | t }}
|
||||
{%- elsif has_qty_rules -%}
|
||||
{{ 'products.product.quantity.note' | t }}
|
||||
{%- endif -%}
|
||||
</span>
|
||||
</button>
|
||||
{%- endif -%}
|
||||
{%- if has_vol_pricing or has_qty_rules -%}
|
||||
<div
|
||||
class="cart-items__info global-settings-popup quantity-popover__info"
|
||||
tabindex="-1"
|
||||
hidden
|
||||
>
|
||||
{%- if has_qty_rules == false -%}
|
||||
<span class="volume-pricing-label caption">
|
||||
{{- 'products.product.volume_pricing.title' | t -}}
|
||||
</span>
|
||||
{%- endif -%}
|
||||
<div class="quantity__rules caption">
|
||||
{%- if item.variant.quantity_rule.increment > 1 -%}
|
||||
<span class="divider">
|
||||
{{-
|
||||
'products.product.quantity.multiples_of'
|
||||
| t: quantity: item.variant.quantity_rule.increment
|
||||
-}}
|
||||
</span>
|
||||
{%- endif -%}
|
||||
{%- if item.variant.quantity_rule.min > 1 -%}
|
||||
<span class="divider">
|
||||
{{-
|
||||
'products.product.quantity.min_of'
|
||||
| t: quantity: item.variant.quantity_rule.min
|
||||
-}}
|
||||
</span>
|
||||
{%- endif -%}
|
||||
{%- if item.variant.quantity_rule.max != null -%}
|
||||
<span class="divider">
|
||||
{{-
|
||||
'products.product.quantity.max_of'
|
||||
| t: quantity: item.variant.quantity_rule.max
|
||||
-}}
|
||||
</span>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
<button
|
||||
class="button-close button button--tertiary large-up-hide"
|
||||
type="button"
|
||||
aria-label="{{ 'accessibility.close' | t }}"
|
||||
>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-close.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</button>
|
||||
{%- if item.variant.quantity_price_breaks.size > 0 -%}
|
||||
<volume-pricing class="parent-display">
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<span>{{ item.variant.quantity_rule.min }}+</span>
|
||||
{%- assign price = item.variant.price | money_with_currency -%}
|
||||
<span> {{ 'sections.quick_order_list.each' | t: money: price }}</span>
|
||||
</li>
|
||||
{%- for price_break in item.variant.quantity_price_breaks -%}
|
||||
<li>
|
||||
<span>
|
||||
{{- price_break.minimum_quantity -}}
|
||||
<span aria-hidden="true">+</span></span
|
||||
>
|
||||
{%- assign price = price_break.price | money_with_currency -%}
|
||||
<span> {{ 'sections.quick_order_list.each' | t: money: price }}</span>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
</volume-pricing>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
<div class="cart-item__error" id="Line-item-error-{{ item.index | plus: 1 }}" role="alert">
|
||||
<small class="cart-item__error-text"></small>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-error.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</div>
|
||||
</quantity-popover>
|
||||
</td>
|
||||
|
||||
<td class="cart-item__totals right small-hide">
|
||||
{%- render 'loading-spinner' -%}
|
||||
<div class="cart-item__price-wrapper">
|
||||
{%- if item.original_line_price != item.final_line_price -%}
|
||||
<dl class="cart-item__discounted-prices">
|
||||
<dt class="visually-hidden">
|
||||
{{ 'products.product.price.regular_price' | t }}
|
||||
</dt>
|
||||
<dd>
|
||||
<s class="cart-item__old-price price price--end">
|
||||
{{ item.original_line_price | money }}
|
||||
</s>
|
||||
</dd>
|
||||
<dt class="visually-hidden">
|
||||
{{ 'products.product.price.sale_price' | t }}
|
||||
</dt>
|
||||
<dd class="price price--end">
|
||||
{{ item.final_line_price | money }}
|
||||
</dd>
|
||||
</dl>
|
||||
{%- else -%}
|
||||
<span class="price price--end">
|
||||
{{ item.original_line_price | money }}
|
||||
</span>
|
||||
{%- endif -%}
|
||||
|
||||
{%- if item.variant.available and item.unit_price_measurement -%}
|
||||
{% render 'unit-price', price: item.unit_price, measurement: item.unit_price_measurement %}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{%- endfor -%}
|
||||
</tbody>
|
||||
</table>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="visually-hidden" id="cart-live-region-text" aria-live="polite" role="status"></p>
|
||||
<p
|
||||
class="visually-hidden"
|
||||
id="shopping-cart-line-item-status"
|
||||
aria-live="polite"
|
||||
aria-hidden="true"
|
||||
role="status"
|
||||
>
|
||||
{{ 'accessibility.loading' | t }}
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</cart-items>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.main-cart-items.name",
|
||||
"settings": [
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"default": "scheme-1"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 36
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,77 @@
|
||||
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
|
||||
{{ 'component-collection-hero.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- style -%}
|
||||
@media screen and (max-width: 749px) {
|
||||
.collection-hero--with-image .collection-hero__inner {
|
||||
padding-bottom: calc({{ settings.media_shadow_vertical_offset | at_least: 0 }}px + 2rem);
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
<div class="collection-hero{% if section.settings.show_collection_image and collection.image %} collection-hero--with-image{% endif %} color-{{ section.settings.color_scheme }} gradient">
|
||||
<div class="collection-hero__inner page-width {% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
|
||||
<div class="collection-hero__text-wrapper">
|
||||
<h1 class="collection-hero__title">
|
||||
<span class="visually-hidden">{{ 'sections.collection_template.title' | t }}: </span>
|
||||
{{- collection.title | escape -}}
|
||||
</h1>
|
||||
|
||||
{%- if section.settings.show_collection_description -%}
|
||||
<div class="collection-hero__description rte">{{ collection.description }}</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
||||
{%- if section.settings.show_collection_image and collection.image -%}
|
||||
<div class="collection-hero__image-container media gradient">
|
||||
<img
|
||||
srcset="
|
||||
{%- if collection.image.width >= 165 -%}{{ collection.image | image_url: width: 165 }} 165w,{%- endif -%}
|
||||
{%- if collection.image.width >= 360 -%}{{ collection.image | image_url: width: 360 }} 360w,{%- endif -%}
|
||||
{%- if collection.image.width >= 535 -%}{{ collection.image | image_url: width: 535 }} 535w,{%- endif -%}
|
||||
{%- if collection.image.width >= 750 -%}{{ collection.image | image_url: width: 750 }} 750w,{%- endif -%}
|
||||
{%- if collection.image.width >= 1070 -%}{{ collection.image | image_url: width: 1070 }} 1070w,{%- endif -%}
|
||||
{%- if collection.image.width >= 1500 -%}{{ collection.image | image_url: width: 1500 }} 1500w,{%- endif -%}
|
||||
{{ collection.image | image_url }} {{ collection.image.width }}w
|
||||
"
|
||||
src="{{ collection.image | image_url: width: 750 }}"
|
||||
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc(50vw - 130px), calc(50vw - 55px)"
|
||||
alt="{{ collection.image.alt | escape }}"
|
||||
width="{{ collection.image.width }}"
|
||||
height="{{ collection.image.height }}"
|
||||
>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.main-collection-banner.name",
|
||||
"class": "section",
|
||||
"settings": [
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": "t:sections.main-collection-banner.settings.paragraph.content"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_collection_description",
|
||||
"default": true,
|
||||
"label": "t:sections.main-collection-banner.settings.show_collection_description.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_collection_image",
|
||||
"default": false,
|
||||
"label": "t:sections.main-collection-banner.settings.show_collection_image.label"
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"default": "scheme-1"
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,416 @@
|
||||
{{ 'template-collection.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-card.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-price.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{% if section.settings.image_shape == 'blob' %}
|
||||
{{ 'mask-blobs.css' | asset_url | stylesheet_tag }}
|
||||
{%- endif -%}
|
||||
|
||||
{%- unless section.settings.quick_add == 'none' -%}
|
||||
{{ 'quick-add.css' | asset_url | stylesheet_tag }}
|
||||
{%- endunless -%}
|
||||
|
||||
{%- if section.settings.quick_add == 'standard' -%}
|
||||
<script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
|
||||
<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
|
||||
{%- endif -%}
|
||||
|
||||
{%- if section.settings.quick_add == 'bulk' -%}
|
||||
<script src="{{ 'quick-add-bulk.js' | asset_url }}" defer="defer"></script>
|
||||
<script src="{{ 'quantity-popover.js' | asset_url }}" defer="defer"></script>
|
||||
<script src="{{ 'price-per-item.js' | asset_url }}" defer="defer"></script>
|
||||
<script src="{{ 'quick-order-list.js' | asset_url }}" defer="defer"></script>
|
||||
{%- endif -%}
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
<collection-component
|
||||
view-event-payload="{{ collection | standard_event_data: 'view' | escape }}"
|
||||
data-collection-id="{{ collection.id }}"
|
||||
>
|
||||
<div class="section-{{ section.id }}-padding gradient color-{{ section.settings.color_scheme }}">
|
||||
{%- paginate collection.products by section.settings.products_per_page -%}
|
||||
{% comment %} Sort is the first tabbable element when filter type is vertical {% endcomment %}
|
||||
{%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' -%}
|
||||
<facet-filters-form class="facets facets-vertical-sort page-width small-hide">
|
||||
<form class="facets-vertical-form" id="FacetSortForm">
|
||||
<div class="facet-filters sorting caption">
|
||||
<div class="facet-filters__field">
|
||||
<h2 class="facet-filters__label caption-large text-body">
|
||||
<label for="SortBy">{{ 'products.facets.sort_by_label' | t }}</label>
|
||||
</h2>
|
||||
<div class="select">
|
||||
{%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
|
||||
<select
|
||||
name="sort_by"
|
||||
class="facet-filters__sort select__select caption-large"
|
||||
id="SortBy"
|
||||
aria-describedby="a11y-refresh-page-message"
|
||||
>
|
||||
{%- for option in collection.sort_options -%}
|
||||
<option
|
||||
value="{{ option.value | escape }}"
|
||||
{% if option.value == sort_by %}
|
||||
selected="selected"
|
||||
{% endif %}
|
||||
>
|
||||
{{ option.name | escape }}
|
||||
</option>
|
||||
{%- endfor -%}
|
||||
</select>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-caret.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-count-vertical light" role="status">
|
||||
<h2 class="product-count__text text-body">
|
||||
<span id="ProductCountDesktop">
|
||||
{%- if collection.results_count -%}
|
||||
{{
|
||||
'templates.search.results_with_count'
|
||||
| t: terms: collection.terms, count: collection.results_count
|
||||
}}
|
||||
{%- elsif collection.products_count == collection.all_products_count -%}
|
||||
{{ 'products.facets.product_count_simple' | t: count: collection.products_count }}
|
||||
{%- else -%}
|
||||
{{
|
||||
'products.facets.product_count'
|
||||
| t: product_count: collection.products_count, count: collection.all_products_count
|
||||
}}
|
||||
{%- endif -%}
|
||||
</span>
|
||||
</h2>
|
||||
{%- render 'loading-spinner' -%}
|
||||
</div>
|
||||
</form>
|
||||
</facet-filters-form>
|
||||
{%- endif -%}
|
||||
|
||||
<div class="{% if section.settings.filter_type == 'vertical' %} facets-vertical page-width{% endif %}">
|
||||
{{ 'component-facets.css' | asset_url | stylesheet_tag }}
|
||||
<script src="{{ 'facets.js' | asset_url }}" defer="defer"></script>
|
||||
{%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
|
||||
<aside
|
||||
aria-labelledby="verticalTitle"
|
||||
class="facets-wrapper{% unless section.settings.enable_filtering %} facets-wrapper--no-filters{% endunless %}{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}"
|
||||
id="main-collection-filters"
|
||||
data-id="{{ section.id }}"
|
||||
>
|
||||
{% render 'facets',
|
||||
results: collection,
|
||||
enable_filtering: section.settings.enable_filtering,
|
||||
enable_sorting: section.settings.enable_sorting,
|
||||
filter_type: section.settings.filter_type,
|
||||
paginate: paginate
|
||||
%}
|
||||
</aside>
|
||||
{%- endif -%}
|
||||
|
||||
<div
|
||||
class="product-grid-container{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
id="ProductGridContainer"
|
||||
{% if settings.animations_reveal_on_scroll %}
|
||||
data-cascade
|
||||
{% endif %}
|
||||
>
|
||||
{%- if collection.products.size == 0 -%}
|
||||
<div class="collection collection--empty page-width" id="product-grid" data-id="{{ section.id }}">
|
||||
<div class="loading-overlay gradient"></div>
|
||||
<div class="title-wrapper center">
|
||||
<h2 class="title title--primary">
|
||||
{{ 'sections.collection_template.empty' | t -}}
|
||||
<br>
|
||||
{{
|
||||
'sections.collection_template.use_fewer_filters_html'
|
||||
| t: link: collection.url, class: 'underlined-link link'
|
||||
}}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
{%- else -%}
|
||||
<div
|
||||
class="collection{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}"
|
||||
>
|
||||
<div class="loading-overlay gradient"></div>
|
||||
<ul
|
||||
id="product-grid"
|
||||
data-id="{{ section.id }}"
|
||||
class="
|
||||
grid product-grid grid--{{ section.settings.columns_mobile }}-col-tablet-down
|
||||
grid--{{ section.settings.columns_desktop }}-col-desktop
|
||||
{% if section.settings.quick_add == 'bulk' %} collection-quick-add-bulk{% endif %}
|
||||
"
|
||||
>
|
||||
{% assign skip_card_product_styles = false %}
|
||||
{%- for product in collection.products -%}
|
||||
{% assign lazy_load = false %}
|
||||
{%- if forloop.index > 2 -%}
|
||||
{%- assign lazy_load = true -%}
|
||||
{%- endif -%}
|
||||
<li
|
||||
class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{% if settings.animations_reveal_on_scroll %}
|
||||
data-cascade
|
||||
style="--animation-order: {{ forloop.index }};"
|
||||
{% endif %}
|
||||
>
|
||||
{% render 'card-product',
|
||||
card_product: product,
|
||||
media_aspect_ratio: section.settings.image_ratio,
|
||||
image_shape: section.settings.image_shape,
|
||||
show_secondary_image: section.settings.show_secondary_image,
|
||||
show_vendor: section.settings.show_vendor,
|
||||
show_rating: section.settings.show_rating,
|
||||
lazy_load: lazy_load,
|
||||
skip_styles: skip_card_product_styles,
|
||||
quick_add: section.settings.quick_add,
|
||||
section_id: section.id,
|
||||
product_view_context: 'collection'
|
||||
%}
|
||||
</li>
|
||||
{%- assign skip_card_product_styles = true -%}
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
|
||||
{%- if paginate.pages > 1 -%}
|
||||
{% render 'pagination', paginate: paginate, anchor: '' %}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
{%- endpaginate -%}
|
||||
{% if section.settings.image_shape == 'arch' %}
|
||||
{{ 'mask-arch.svg' | inline_asset_content }}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</collection-component>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.main-collection-product-grid.name",
|
||||
"class": "section",
|
||||
"settings": [
|
||||
{
|
||||
"type": "range",
|
||||
"id": "products_per_page",
|
||||
"min": 8,
|
||||
"max": 36,
|
||||
"step": 4,
|
||||
"default": 16,
|
||||
"label": "t:sections.main-collection-product-grid.settings.products_per_page.label"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "columns_desktop",
|
||||
"min": 1,
|
||||
"max": 6,
|
||||
"step": 1,
|
||||
"default": 4,
|
||||
"label": "t:sections.main-collection-product-grid.settings.columns_desktop.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "columns_mobile",
|
||||
"default": "2",
|
||||
"label": "t:sections.main-collection-product-grid.settings.columns_mobile.label",
|
||||
"options": [
|
||||
{
|
||||
"value": "1",
|
||||
"label": "t:sections.main-collection-product-grid.settings.columns_mobile.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "2",
|
||||
"label": "t:sections.main-collection-product-grid.settings.columns_mobile.options__2.label"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"info": "t:sections.all.colors.has_cards_info",
|
||||
"default": "scheme-1"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.main-collection-product-grid.settings.header__3.content"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "image_ratio",
|
||||
"options": [
|
||||
{
|
||||
"value": "adapt",
|
||||
"label": "t:sections.main-collection-product-grid.settings.image_ratio.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "portrait",
|
||||
"label": "t:sections.main-collection-product-grid.settings.image_ratio.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "square",
|
||||
"label": "t:sections.main-collection-product-grid.settings.image_ratio.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "adapt",
|
||||
"label": "t:sections.main-collection-product-grid.settings.image_ratio.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "image_shape",
|
||||
"options": [
|
||||
{
|
||||
"value": "default",
|
||||
"label": "t:sections.all.image_shape.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "arch",
|
||||
"label": "t:sections.all.image_shape.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "blob",
|
||||
"label": "t:sections.all.image_shape.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "chevronleft",
|
||||
"label": "t:sections.all.image_shape.options__4.label"
|
||||
},
|
||||
{
|
||||
"value": "chevronright",
|
||||
"label": "t:sections.all.image_shape.options__5.label"
|
||||
},
|
||||
{
|
||||
"value": "diamond",
|
||||
"label": "t:sections.all.image_shape.options__6.label"
|
||||
},
|
||||
{
|
||||
"value": "parallelogram",
|
||||
"label": "t:sections.all.image_shape.options__7.label"
|
||||
},
|
||||
{
|
||||
"value": "round",
|
||||
"label": "t:sections.all.image_shape.options__8.label"
|
||||
}
|
||||
],
|
||||
"default": "default",
|
||||
"label": "t:sections.all.image_shape.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_secondary_image",
|
||||
"default": false,
|
||||
"label": "t:sections.main-collection-product-grid.settings.show_secondary_image.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_vendor",
|
||||
"default": false,
|
||||
"label": "t:sections.main-collection-product-grid.settings.show_vendor.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_rating",
|
||||
"default": false,
|
||||
"label": "t:sections.main-collection-product-grid.settings.show_rating.label",
|
||||
"info": "t:sections.main-collection-product-grid.settings.show_rating.info"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "quick_add",
|
||||
"default": "none",
|
||||
"label": "t:sections.main-collection-product-grid.settings.quick_add.label",
|
||||
"options": [
|
||||
{
|
||||
"value": "none",
|
||||
"label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_1"
|
||||
},
|
||||
{
|
||||
"value": "standard",
|
||||
"label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_2"
|
||||
},
|
||||
{
|
||||
"value": "bulk",
|
||||
"label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_3"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.main-collection-product-grid.settings.header__1.content"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "enable_filtering",
|
||||
"default": true,
|
||||
"label": "t:sections.main-collection-product-grid.settings.enable_filtering.label",
|
||||
"info": "t:sections.main-collection-product-grid.settings.enable_filtering.info"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "filter_type",
|
||||
"options": [
|
||||
{
|
||||
"value": "horizontal",
|
||||
"label": "t:sections.main-collection-product-grid.settings.filter_type.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "vertical",
|
||||
"label": "t:sections.main-collection-product-grid.settings.filter_type.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "drawer",
|
||||
"label": "t:sections.main-collection-product-grid.settings.filter_type.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "horizontal",
|
||||
"label": "t:sections.main-collection-product-grid.settings.filter_type.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "enable_sorting",
|
||||
"default": true,
|
||||
"label": "t:sections.main-collection-product-grid.settings.enable_sorting.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 36
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,140 @@
|
||||
{{ 'component-card.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'section-collection-list.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
<div class="page-width">
|
||||
<h1 class="title title--primary inline-richtext{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
|
||||
{{ section.settings.title }}
|
||||
</h1>
|
||||
{%- liquid
|
||||
case section.settings.sort
|
||||
when 'products_high', 'products_low'
|
||||
assign collections = collections | sort: 'all_products_count'
|
||||
when 'date', 'date_reversed'
|
||||
assign collections = collections | sort: 'published_at'
|
||||
endcase
|
||||
|
||||
if section.settings.sort == 'products_high' or section.settings.sort == 'date_reversed' or section.settings.sort == 'alphabetical_reversed'
|
||||
assign collections = collections | reverse
|
||||
endif
|
||||
|
||||
assign moduloResult = 28 | modulo: section.settings.columns_desktop
|
||||
assign paginate_by = 30
|
||||
if moduloResult == 0
|
||||
assign paginate_by = 28
|
||||
endif
|
||||
-%}
|
||||
{%- paginate collections by paginate_by -%}
|
||||
<ul
|
||||
class="collection-list grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down"
|
||||
role="list"
|
||||
>
|
||||
{%- for collection in collections -%}
|
||||
<li
|
||||
class="collection-list__item grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{% if settings.animations_reveal_on_scroll %}
|
||||
data-cascade
|
||||
style="--animation-order: {{ forloop.index }};"
|
||||
{% endif %}
|
||||
>
|
||||
{% render 'card-collection',
|
||||
card_collection: collection,
|
||||
media_aspect_ratio: section.settings.image_ratio,
|
||||
columns: 3
|
||||
%}
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
{% render 'pagination', paginate: paginate %}
|
||||
{%- endpaginate -%}
|
||||
</div>
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.main-list-collections.name",
|
||||
"class": "section",
|
||||
"settings": [
|
||||
{
|
||||
"type": "inline_richtext",
|
||||
"id": "title",
|
||||
"label": "t:sections.main-list-collections.settings.title.label",
|
||||
"default": "t:sections.main-list-collections.settings.title.default"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "sort",
|
||||
"options": [
|
||||
{
|
||||
"value": "alphabetical",
|
||||
"label": "t:sections.main-list-collections.settings.sort.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "alphabetical_reversed",
|
||||
"label": "t:sections.main-list-collections.settings.sort.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "date_reversed",
|
||||
"label": "t:sections.main-list-collections.settings.sort.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "date",
|
||||
"label": "t:sections.main-list-collections.settings.sort.options__4.label"
|
||||
},
|
||||
{
|
||||
"value": "products_high",
|
||||
"label": "t:sections.main-list-collections.settings.sort.options__5.label"
|
||||
},
|
||||
{
|
||||
"value": "products_low",
|
||||
"label": "t:sections.main-list-collections.settings.sort.options__6.label"
|
||||
}
|
||||
],
|
||||
"default": "alphabetical",
|
||||
"label": "t:sections.main-list-collections.settings.sort.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "image_ratio",
|
||||
"options": [
|
||||
{
|
||||
"value": "adapt",
|
||||
"label": "t:sections.main-list-collections.settings.image_ratio.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "portrait",
|
||||
"label": "t:sections.main-list-collections.settings.image_ratio.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "square",
|
||||
"label": "t:sections.main-list-collections.settings.image_ratio.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "adapt",
|
||||
"label": "t:sections.main-list-collections.settings.image_ratio.label"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "columns_desktop",
|
||||
"min": 1,
|
||||
"max": 6,
|
||||
"step": 1,
|
||||
"default": 3,
|
||||
"label": "t:sections.main-list-collections.settings.columns_desktop.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "columns_mobile",
|
||||
"options": [
|
||||
{
|
||||
"value": "1",
|
||||
"label": "t:sections.main-list-collections.settings.columns_mobile.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "2",
|
||||
"label": "t:sections.main-list-collections.settings.columns_mobile.options__2.label"
|
||||
}
|
||||
],
|
||||
"default": "2",
|
||||
"label": "t:sections.main-list-collections.settings.columns_mobile.label"
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,208 @@
|
||||
{{ 'customer.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
{%- if section.settings.enable_shop_login_button == false -%}
|
||||
{%- assign hide_shop_login_button = true -%}
|
||||
{%- endif -%}
|
||||
|
||||
<div class="customer login section-{{ section.id }}-padding">
|
||||
<h1 id="recover" tabindex="-1">
|
||||
{{ 'customer.recover_password.title' | t }}
|
||||
</h1>
|
||||
<div>
|
||||
<p>
|
||||
{{ 'customer.recover_password.subtext' | t }}
|
||||
</p>
|
||||
|
||||
{%- form 'recover_customer_password' -%}
|
||||
{% assign recover_success = form.posted_successfully? %}
|
||||
<div class="field">
|
||||
<input
|
||||
type="email"
|
||||
value=""
|
||||
name="email"
|
||||
id="RecoverEmail"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
autocomplete="email"
|
||||
{% if form.errors %}
|
||||
aria-invalid="true"
|
||||
aria-describedby="RecoverEmail-email-error"
|
||||
autofocus
|
||||
{% endif %}
|
||||
placeholder="{{ 'customer.login_page.email' | t }}"
|
||||
>
|
||||
<label for="RecoverEmail">
|
||||
{{ 'customer.login_page.email' | t }}
|
||||
</label>
|
||||
</div>
|
||||
{%- if form.errors -%}
|
||||
<small id="RecoverEmail-email-error" class="form__message">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-error.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{ form.errors.messages.form }}
|
||||
</small>
|
||||
{%- endif -%}
|
||||
|
||||
<button>
|
||||
{{ 'customer.login_page.submit' | t }}
|
||||
</button>
|
||||
|
||||
<a href="#login">
|
||||
{{ 'customer.login_page.cancel' | t }}
|
||||
</a>
|
||||
{%- endform -%}
|
||||
</div>
|
||||
|
||||
<h1 id="login" tabindex="-1">
|
||||
{{ 'customer.login_page.title' | t }}
|
||||
</h1>
|
||||
<div>
|
||||
{%- if recover_success == true -%}
|
||||
<h3 class="form__message" tabindex="-1" autofocus>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-success.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{ 'customer.recover_password.success' | t }}
|
||||
</h3>
|
||||
{%- endif -%}
|
||||
{%- form 'customer_login', novalidate: 'novalidate' -%}
|
||||
{%- if form.errors -%}
|
||||
<h2 class="form__message" tabindex="-1" autofocus>
|
||||
<span class="visually-hidden">{{ 'accessibility.error' | t }} </span>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-error.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{ 'templates.contact.form.error_heading' | t }}
|
||||
</h2>
|
||||
{{ form.errors | default_errors }}
|
||||
{%- endif -%}
|
||||
|
||||
{%- if shop.features.login_with_shop_classic_customer_accounts? -%}
|
||||
<section name="sign-in-with-shop-provider">
|
||||
{{ shop | login_button: hide_button: hide_shop_login_button }}
|
||||
|
||||
{%- unless hide_shop_login_button -%}
|
||||
<p>
|
||||
{{ 'customer.login_page.alternate_provider_separator' | t }}
|
||||
</p>
|
||||
{%- endunless -%}
|
||||
</section>
|
||||
{%- endif -%}
|
||||
|
||||
<div class="field">
|
||||
<input
|
||||
type="email"
|
||||
name="customer[email]"
|
||||
id="CustomerEmail"
|
||||
autocomplete="email"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
{% if form.errors contains 'form' %}
|
||||
aria-invalid="true"
|
||||
{% endif %}
|
||||
placeholder="{{ 'customer.login_page.email' | t }}"
|
||||
>
|
||||
<label for="CustomerEmail">
|
||||
{{ 'customer.login_page.email' | t }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{%- if form.password_needed -%}
|
||||
<div class="field">
|
||||
<input
|
||||
type="password"
|
||||
value=""
|
||||
name="customer[password]"
|
||||
id="CustomerPassword"
|
||||
autocomplete="current-password"
|
||||
{% if form.errors contains 'form' %}
|
||||
aria-invalid="true"
|
||||
{% endif %}
|
||||
placeholder="{{ 'customer.login_page.password' | t }}"
|
||||
>
|
||||
<label for="CustomerPassword">
|
||||
{{ 'customer.login_page.password' | t }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<a href="#recover">
|
||||
{{ 'customer.login_page.forgot_password' | t }}
|
||||
</a>
|
||||
{%- endif -%}
|
||||
|
||||
<button>
|
||||
{{ 'customer.login_page.sign_in' | t }}
|
||||
</button>
|
||||
|
||||
<a href="{{ routes.account_register_url }}">
|
||||
{{ 'customer.login_page.create_account' | t }}
|
||||
</a>
|
||||
{%- endform -%}
|
||||
</div>
|
||||
|
||||
{%- if shop.checkout.guest_login -%}
|
||||
<div>
|
||||
<hr>
|
||||
<h2>{{ 'customer.login_page.guest_title' | t }}</h2>
|
||||
|
||||
{%- form 'guest_login' -%}
|
||||
<button>
|
||||
{{ 'customer.login_page.guest_continue' | t }}
|
||||
</button>
|
||||
{%- endform -%}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.main-login.name",
|
||||
"settings": [
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "enable_shop_login_button",
|
||||
"label": "t:sections.main-login.shop_login_button.enable",
|
||||
"default": true
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 36
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,358 @@
|
||||
{{ 'customer.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
<div class="customer order section-{{ section.id }}-padding">
|
||||
<div>
|
||||
<h1 class="customer__title">{{ 'customer.account.title' | t }}</h1>
|
||||
<a href="{{ routes.account_url }}">{{ 'customer.account.return' | t }}</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<h2>{{ 'customer.order.title' | t: name: order.name }}</h2>
|
||||
{%- assign order_date = order.created_at | time_tag: format: 'date_at_time' -%}
|
||||
<p>{{ 'customer.order.date_html' | t: date: order_date }}</p>
|
||||
{%- if order.cancelled -%}
|
||||
{%- assign cancelled_at = order.cancelled_at | time_tag: format: 'date_at_time' -%}
|
||||
<p>{{ 'customer.order.cancelled_html' | t: date: cancelled_at }}</p>
|
||||
<p>{{ 'customer.order.cancelled_reason' | t: reason: order.cancel_reason_label }}</p>
|
||||
{%- endif -%}
|
||||
|
||||
<table role="table" class="order-details">
|
||||
<caption class="visually-hidden">
|
||||
{{ 'customer.order.title' | t: name: order.name }}
|
||||
</caption>
|
||||
<thead role="rowgroup">
|
||||
<tr role="row">
|
||||
<th id="ColumnProduct" scope="col" role="columnheader">{{ 'customer.order.product' | t }}</th>
|
||||
<th id="ColumnSku" scope="col" role="columnheader">{{ 'customer.order.sku' | t }}</th>
|
||||
<th id="ColumnPrice" scope="col" role="columnheader">{{ 'customer.order.price' | t }}</th>
|
||||
<th id="ColumnQuantity" scope="col" role="columnheader">{{ 'customer.order.quantity' | t }}</th>
|
||||
<th id="ColumnTotal" scope="col" role="columnheader">{{ 'customer.order.total' | t }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody role="rowgroup">
|
||||
{%- for line_item in order.line_items -%}
|
||||
<tr role="row">
|
||||
<td
|
||||
id="Row{{ line_item.key }}"
|
||||
headers="ColumnProduct"
|
||||
role="rowheader"
|
||||
scope="row"
|
||||
data-label="{{ 'customer.order.product' | t }}"
|
||||
>
|
||||
<div>
|
||||
{%- if line_item.url != blank -%}
|
||||
<a href="{{ line_item.url }}">{{ line_item.title | escape }}</a>
|
||||
{%- else -%}
|
||||
<p>{{ line_item.title | escape }}</p>
|
||||
{%- endif -%}
|
||||
{%- assign property_size = line_item.properties | size -%}
|
||||
{%- unless line_item.selling_plan_allocation == null and property_size == 0 -%}
|
||||
<div class="properties">
|
||||
{%- unless line_item.product.has_only_default_variant -%}
|
||||
<span>
|
||||
{{ line_item.variant.title | escape }}
|
||||
</span>
|
||||
{%- endunless -%}
|
||||
{%- unless line_item.selling_plan_allocation == null -%}
|
||||
<span>
|
||||
{{ line_item.selling_plan_allocation.selling_plan.name }}
|
||||
</span>
|
||||
{%- endunless -%}
|
||||
{%- if property_size != 0 -%}
|
||||
{%- for property in line_item.properties -%}
|
||||
{% assign property_first_char = property.first | slice: 0 %}
|
||||
{%- if property.last != blank and property_first_char != '_' -%}
|
||||
<span>{{ property.first }}:</span>
|
||||
<span>
|
||||
{%- if property.last contains '/uploads/' -%}
|
||||
<a href="{{ property.last }}">{{ property.last | split: '/' | last }}</a>
|
||||
{%- else -%}
|
||||
{{ property.last }}
|
||||
{%- endif -%}
|
||||
</span>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- endunless -%}
|
||||
|
||||
{%- if line_item.line_level_discount_allocations != blank -%}
|
||||
<ul role="list" aria-label="{{ 'customer.order.discount' | t }}">
|
||||
{%- for discount_allocation in line_item.line_level_discount_allocations -%}
|
||||
<li>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-discount.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{- discount_allocation.discount_application.title | escape }} (-
|
||||
{{- discount_allocation.amount | money -}}
|
||||
)
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
{%- endif -%}
|
||||
|
||||
{%- if line_item.fulfillment -%}
|
||||
<div class="fulfillment">
|
||||
{%- assign created_at = line_item.fulfillment.created_at | time_tag: format: 'date' -%}
|
||||
<span>{{ 'customer.order.fulfilled_at_html' | t: date: created_at }}</span>
|
||||
|
||||
{%- if line_item.fulfillment.tracking_url -%}
|
||||
<a href="{{ line_item.fulfillment.tracking_url }}">
|
||||
{{ 'customer.order.track_shipment' | t }}
|
||||
</a>
|
||||
{%- endif -%}
|
||||
<span>
|
||||
{{ line_item.fulfillment.tracking_company }}
|
||||
{%- if line_item.fulfillment.tracking_number -%}
|
||||
#{{ line_item.fulfillment.tracking_number }}
|
||||
{%- endif -%}
|
||||
</span>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
headers="Row{{ line_item.key }} ColumnSku"
|
||||
role="cell"
|
||||
data-label="{{ 'customer.order.sku' | t }}"
|
||||
>
|
||||
{{ line_item.sku }}
|
||||
</td>
|
||||
<td
|
||||
headers="Row{{ line_item.key }} ColumnPrice"
|
||||
role="cell"
|
||||
data-label="{{ 'customer.order.price' | t }}"
|
||||
>
|
||||
{%- if line_item.original_price != line_item.final_price or line_item.unit_price_measurement -%}
|
||||
<dl>
|
||||
{%- if line_item.original_price != line_item.final_price -%}
|
||||
<dt>
|
||||
<span class="visually-hidden">{{ 'products.product.price.regular_price' | t }}</span>
|
||||
</dt>
|
||||
<dd class="regular-price">
|
||||
<s>{{ line_item.original_price | money }}</s>
|
||||
</dd>
|
||||
<dt>
|
||||
<span class="visually-hidden">{{ 'products.product.price.sale_price' | t }}</span>
|
||||
</dt>
|
||||
<dd>
|
||||
<span>{{ line_item.final_price | money }}</span>
|
||||
</dd>
|
||||
{%- else -%}
|
||||
<dt>
|
||||
<span class="visually-hidden">{{ 'products.product.price.regular_price' | t }}</span>
|
||||
</dt>
|
||||
<dd>
|
||||
{{ line_item.original_price | money }}
|
||||
</dd>
|
||||
{%- endif -%}
|
||||
{%- if line_item.unit_price_measurement -%}
|
||||
<dt>
|
||||
<span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
|
||||
</dt>
|
||||
<dd class="unit-price">
|
||||
{% render 'unit-price', price: line_item.unit_price, measurement: line_item.unit_price_measurement, hide_accessibility_label: true %}
|
||||
</dd>
|
||||
{%- endif -%}
|
||||
</dl>
|
||||
{%- else -%}
|
||||
<span>{{ line_item.final_price | money }}</span>
|
||||
{%- endif -%}
|
||||
</td>
|
||||
<td
|
||||
headers="Row{{ line_item.key }} ColumnQuantity"
|
||||
role="cell"
|
||||
data-label="{{ 'customer.order.quantity' | t }}"
|
||||
>
|
||||
{{ line_item.quantity }}
|
||||
</td>
|
||||
<td
|
||||
headers="Row{{ line_item.key }} ColumnTotal"
|
||||
role="cell"
|
||||
data-label="{{ 'customer.order.total' | t }}"
|
||||
>
|
||||
{%- if line_item.original_line_price != line_item.final_line_price -%}
|
||||
<dl>
|
||||
<dt>
|
||||
<span class="visually-hidden">{{ 'products.product.price.regular_price' | t }}</span>
|
||||
</dt>
|
||||
<dd class="regular-price">
|
||||
<s>{{ line_item.original_line_price | money }}</s>
|
||||
</dd>
|
||||
<dt>
|
||||
<span class="visually-hidden">{{ 'products.product.price.sale_price' | t }}</span>
|
||||
</dt>
|
||||
<dd>
|
||||
<span>{{ line_item.final_line_price | money }}</span>
|
||||
</dd>
|
||||
</dl>
|
||||
{%- else -%}
|
||||
{{ line_item.original_line_price | money }}
|
||||
{%- endif -%}
|
||||
</td>
|
||||
</tr>
|
||||
{%- endfor -%}
|
||||
</tbody>
|
||||
<tfoot role="rowgroup">
|
||||
<tr role="row">
|
||||
<td id="RowSubtotal" role="rowheader" scope="row" colspan="4">
|
||||
{{ 'customer.order.subtotal' | t }}
|
||||
</td>
|
||||
<td headers="RowSubtotal" role="cell" data-label="{{ 'customer.order.subtotal' | t }}">
|
||||
{{ order.line_items_subtotal_price | money }}
|
||||
</td>
|
||||
</tr>
|
||||
{%- if order.cart_level_discount_applications != blank -%}
|
||||
<tr role="row">
|
||||
{%- for discount_application in order.cart_level_discount_applications -%}
|
||||
<td id="RowDiscount" role="rowheader" scope="row" colspan="4">
|
||||
{{ 'customer.order.discount' | t }}
|
||||
<span class="cart-discount">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-discount.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{- discount_application.title | escape -}}
|
||||
</span>
|
||||
</td>
|
||||
<td headers="RowDiscount" role="cell" data-label="{{ 'customer.order.discount' | t }}">
|
||||
<div>
|
||||
<span>-{{ discount_application.total_allocated_amount | money }}</span>
|
||||
<span class="cart-discount">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-discount.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{- discount_application.title | escape -}}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
{%- endfor -%}
|
||||
</tr>
|
||||
{%- endif -%}
|
||||
{%- for shipping_method in order.shipping_methods -%}
|
||||
<tr role="row">
|
||||
<td id="RowShipping" role="rowheader" scope="row" colspan="4">
|
||||
{{ 'customer.order.shipping' | t }} ({{ shipping_method.title | escape }})
|
||||
</td>
|
||||
<td
|
||||
headers="RowShipping"
|
||||
role="cell"
|
||||
data-label="{{ 'customer.order.shipping' | t }} ({{ shipping_method.title | escape }})"
|
||||
>
|
||||
{{ shipping_method.price | money }}
|
||||
</td>
|
||||
</tr>
|
||||
{%- endfor -%}
|
||||
{%- for tax_line in order.tax_lines -%}
|
||||
<tr role="row">
|
||||
<td id="RowTax" role="rowheader" scope="row" colspan="4">
|
||||
{{ 'customer.order.tax' | t }} ({{ tax_line.title | escape }}
|
||||
{{ tax_line.rate | times: 100 }}%)
|
||||
</td>
|
||||
<td
|
||||
headers="RowTax"
|
||||
role="cell"
|
||||
data-label="{{ 'customer.order.tax' | t }} ({{ tax_line.title | escape }} {{ tax_line.rate | times: 100 }}%)"
|
||||
>
|
||||
{{ tax_line.price | money }}
|
||||
</td>
|
||||
</tr>
|
||||
{%- endfor -%}
|
||||
{%- if order.total_duties -%}
|
||||
<tr role="row">
|
||||
<td id="RowDuties" role="rowheader" scope="row" colspan="4">{{ 'customer.order.total_duties' | t }}</td>
|
||||
<td headers="RowDuties" role="cell" data-label="{{ 'customer.order.total_duties' | t }}">
|
||||
{{ order.total_duties | money }}
|
||||
</td>
|
||||
</tr>
|
||||
{%- endif -%}
|
||||
{%- if order.total_refunded_amount > 0 -%}
|
||||
<tr role="row">
|
||||
<td id="RowTotalRefund" role="rowheader" scope="row" colspan="3">
|
||||
{{ 'customer.order.total_refunded' | t }}
|
||||
</td>
|
||||
<td
|
||||
headers="RowTotalRefund"
|
||||
role="cell"
|
||||
colspan="2"
|
||||
data-label="{{ 'customer.order.total_refunded' | t }}"
|
||||
>
|
||||
-{{ order.total_refunded_amount | money_with_currency }}
|
||||
</td>
|
||||
</tr>
|
||||
{%- endif -%}
|
||||
<tr role="row">
|
||||
<td id="RowTotal" role="rowheader" scope="row" colspan="3">{{ 'customer.order.total' | t }}</td>
|
||||
<td headers="RowTotal" role="cell" colspan="2" data-label="{{ 'customer.order.total' | t }}">
|
||||
{{ order.total_net_amount | money_with_currency }}
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h2>{{ 'customer.order.billing_address' | t }}</h2>
|
||||
<p>
|
||||
<strong>{{ 'customer.order.payment_status' | t }}:</strong>
|
||||
{{ order.financial_status_label }}
|
||||
</p>
|
||||
{{ order.billing_address | format_address }}
|
||||
</div>
|
||||
<div>
|
||||
<h2>{{ 'customer.order.shipping_address' | t }}</h2>
|
||||
<p>
|
||||
<strong>{{ 'customer.order.fulfillment_status' | t }}:</strong>
|
||||
{{ order.fulfillment_status_label }}
|
||||
</p>
|
||||
{{ order.shipping_address | format_address }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.main-order.name",
|
||||
"settings": [
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 36
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,58 @@
|
||||
{{ 'section-main-page.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
<div class="page-width page-width--narrow section-{{ section.id }}-padding">
|
||||
<h1 class="main-page-title page-title h0{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
|
||||
{{ page.title | escape }}
|
||||
</h1>
|
||||
<div class="rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
|
||||
{{ page.content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.main-page.name",
|
||||
"tag": "section",
|
||||
"class": "section",
|
||||
"settings": [
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 36
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,126 @@
|
||||
{% assign scheme1 = settings.color_schemes | first %}
|
||||
{%- if section.settings.color_scheme == scheme1 -%}<hr>{%- endif -%}
|
||||
<div class="password__footer color-{{ section.settings.color_scheme }} gradient">
|
||||
<ul class="list-social list-unstyled" role="list">
|
||||
{%- if settings.social_twitter_link != blank -%}
|
||||
<li class="list-social__item">
|
||||
<a href="{{ settings.social_twitter_link }}" class="link list-social__link">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-twitter.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
<span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{%- endif -%}
|
||||
{%- if settings.social_facebook_link != blank -%}
|
||||
<li class="list-social__item">
|
||||
<a href="{{ settings.social_facebook_link }}" class="link list-social__link">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-facebook.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
<span class="visually-hidden">{{ 'general.social.links.facebook' | t }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{%- endif -%}
|
||||
{%- if settings.social_pinterest_link != blank -%}
|
||||
<li class="list-social__item">
|
||||
<a href="{{ settings.social_pinterest_link }}" class="link list-social__link">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-pinterest.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
<span class="visually-hidden">{{ 'general.social.links.pinterest' | t }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{%- endif -%}
|
||||
{%- if settings.social_instagram_link != blank -%}
|
||||
<li class="list-social__item">
|
||||
<a href="{{ settings.social_instagram_link }}" class="link list-social__link">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-instagram.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
<span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{%- endif -%}
|
||||
{%- if settings.social_tiktok_link != blank -%}
|
||||
<li class="list-social__item">
|
||||
<a href="{{ settings.social_tiktok_link }}" class="link list-social__link">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-tiktok.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
<span class="visually-hidden">{{ 'general.social.links.tiktok' | t }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{%- endif -%}
|
||||
{%- if settings.social_tumblr_link != blank -%}
|
||||
<li class="list-social__item">
|
||||
<a href="{{ settings.social_tumblr_link }}" class="link list-social__link">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-tumblr.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
<span class="visually-hidden">{{ 'general.social.links.tumblr' | t }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{%- endif -%}
|
||||
{%- if settings.social_snapchat_link != blank -%}
|
||||
<li class="list-social__item">
|
||||
<a href="{{ settings.social_snapchat_link }}" class="link list-social__link">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-snapchat.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
<span class="visually-hidden">{{ 'general.social.links.snapchat' | t }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{%- endif -%}
|
||||
{%- if settings.social_youtube_link != blank -%}
|
||||
<li class="list-social__item">
|
||||
<a href="{{ settings.social_youtube_link }}" class="link list-social__link">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-youtube.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
<span class="visually-hidden">{{ 'general.social.links.youtube' | t }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{%- endif -%}
|
||||
{%- if settings.social_vimeo_link != blank -%}
|
||||
<li class="list-social__item">
|
||||
<a href="{{ settings.social_vimeo_link }}" class="link list-social__link">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-vimeo.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
<span class="visually-hidden">{{ 'general.social.links.vimeo' | t }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{%- endif -%}
|
||||
</ul>
|
||||
{% capture shopify %}
|
||||
<a
|
||||
class="shopify-link"
|
||||
href="//www.shopify.com"
|
||||
rel="nofollow"
|
||||
target="_blank"
|
||||
aria-describedby="a11y-new-window-message"
|
||||
aria-label="Shopify"
|
||||
>
|
||||
{{ 'icon-shopify.svg' | inline_asset_content }}
|
||||
</a>
|
||||
{% endcapture %}
|
||||
<small class="password__footer-caption password__footer-text">
|
||||
{{- 'general.password_page.powered_by_shopify_html' | t: shopify: shopify -}}
|
||||
</small>
|
||||
<small class="password__footer-login password__footer-text">{{ 'general.password_page.admin_link_html' | t }}</small>
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.main-password-footer.name",
|
||||
"settings": [
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"default": "scheme-1"
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,121 @@
|
||||
<style type="text/css">
|
||||
.password-logo {
|
||||
max-width: {{ settings.logo_width }}px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="color-{{ section.settings.color_scheme }} gradient">
|
||||
<div class="password-header">
|
||||
{%- if settings.logo != blank -%}
|
||||
{%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%}
|
||||
{%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
|
||||
{{
|
||||
settings.logo
|
||||
| image_url: width: 500
|
||||
| image_tag:
|
||||
class: 'password-logo',
|
||||
widths: '50, 100, 150, 200, 250, 300, 400, 500',
|
||||
width: settings.logo_width,
|
||||
height: logo_height,
|
||||
alt: logo_alt
|
||||
}}
|
||||
{%- else -%}
|
||||
<h1 class="h2">{{ shop.name }}</h1>
|
||||
{%- endif -%}
|
||||
|
||||
{%- if shop.password_message != blank -%}
|
||||
<div class="password-content">
|
||||
{{ shop.password_message }}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
|
||||
<password-modal>
|
||||
<details class="password-modal modal">
|
||||
<summary class="modal__toggle" aria-haspopup="dialog">
|
||||
<div class="modal__toggle-open password-link link underlined-link">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-padlock.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{ 'general.password_page.login_password_button' | t }}
|
||||
</div>
|
||||
<div class="modal__toggle-close" aria-hidden="true">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-close.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</div>
|
||||
</summary>
|
||||
<div
|
||||
class="modal__content"
|
||||
role="dialog"
|
||||
aria-labelledby="DialogHeading"
|
||||
aria-modal="true"
|
||||
>
|
||||
<div class="password-modal__content" tabindex="-1">
|
||||
<button type="button" class="modal__close-button link" aria-label="{{ 'accessibility.close' | t }}">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-close.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</button>
|
||||
<h2 class="password-modal__content-heading" id="DialogHeading">
|
||||
{{ 'general.password_page.login_form_heading' | t }}
|
||||
</h2>
|
||||
{%- form 'storefront_password', class: 'password-form' -%}
|
||||
<div class="password-field field{% if form.errors %} password-field--error{% endif %}">
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
id="Password"
|
||||
class="field__input"
|
||||
autocomplete="current-password"
|
||||
{% if form.errors %}
|
||||
aria-invalid="true"
|
||||
aria-describedby="PasswordLoginForm-password-error"
|
||||
{%- endif -%}
|
||||
placeholder="{{ 'general.password_page.login_form_password_placeholder' | t }}"
|
||||
>
|
||||
<label class="field__label" for="{{ 'general.password_page.login_form_password_label' | t }}">
|
||||
{{- 'general.password_page.login_form_password_placeholder' | t -}}
|
||||
</label>
|
||||
{%- if form.errors -%}
|
||||
<div id="PasswordLoginForm-password-error" role="status">
|
||||
<span class="visually-hidden">{{ 'accessibility.error' | t }}</span>
|
||||
<span class="form__message">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-error' | inline_asset_content -}}
|
||||
</span>
|
||||
{{ 'general.password_page.login_form_error' | t -}}
|
||||
</span>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
<button name="commit" class="password-button button button--outline">
|
||||
{{ 'general.password_page.login_form_submit' | t }}
|
||||
</button>
|
||||
{%- endform -%}
|
||||
<small class="password__footer-text">{{ 'general.password_page.admin_link_html' | t }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</password-modal>
|
||||
</div>
|
||||
</div>
|
||||
{% assign scheme1 = settings.color_schemes | first %}
|
||||
{%- if section.settings.color_scheme == scheme1 -%}<hr>{%- endif -%}
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.main-password-header.name",
|
||||
"settings": [
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": "t:sections.main-password-header.settings.logo_help.content"
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"default": "scheme-1"
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,166 @@
|
||||
{{ 'customer.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
<div class="customer register section-{{ section.id }}-padding">
|
||||
<h1>
|
||||
{{ 'customer.register.title' | t }}
|
||||
</h1>
|
||||
{%- form 'create_customer', novalidate: 'novalidate' -%}
|
||||
{%- if form.errors -%}
|
||||
<h2 class="form__message" tabindex="-1" autofocus>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-error.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{ 'templates.contact.form.error_heading' | t }}
|
||||
</h2>
|
||||
<ul>
|
||||
{%- for field in form.errors -%}
|
||||
<li>
|
||||
{%- if field == 'form' -%}
|
||||
{{ form.errors.messages[field] }}
|
||||
{%- else -%}
|
||||
<a href="#RegisterForm-{{ field }}">
|
||||
{{ form.errors.translated_fields[field] | capitalize }}
|
||||
{{ form.errors.messages[field] }}
|
||||
</a>
|
||||
{%- endif -%}
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
{%- endif -%}
|
||||
<div class="field">
|
||||
<input
|
||||
type="text"
|
||||
name="customer[first_name]"
|
||||
id="RegisterForm-FirstName"
|
||||
{% if form.first_name %}
|
||||
value="{{ form.first_name }}"
|
||||
{% endif %}
|
||||
autocomplete="given-name"
|
||||
placeholder="{{ 'customer.register.first_name' | t }}"
|
||||
>
|
||||
<label for="RegisterForm-FirstName">
|
||||
{{ 'customer.register.first_name' | t }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<input
|
||||
type="text"
|
||||
name="customer[last_name]"
|
||||
id="RegisterForm-LastName"
|
||||
{% if form.last_name %}
|
||||
value="{{ form.last_name }}"
|
||||
{% endif %}
|
||||
autocomplete="family-name"
|
||||
placeholder="{{ 'customer.register.last_name' | t }}"
|
||||
>
|
||||
<label for="RegisterForm-LastName">
|
||||
{{ 'customer.register.last_name' | t }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<input
|
||||
type="email"
|
||||
name="customer[email]"
|
||||
id="RegisterForm-email"
|
||||
{% if form.email %}
|
||||
value="{{ form.email }}"
|
||||
{% endif %}
|
||||
spellcheck="false"
|
||||
autocapitalize="off"
|
||||
autocomplete="email"
|
||||
aria-required="true"
|
||||
{% if form.errors contains 'email' %}
|
||||
aria-invalid="true"
|
||||
aria-describedby="RegisterForm-email-error"
|
||||
{% endif %}
|
||||
placeholder="{{ 'customer.register.email' | t }}"
|
||||
>
|
||||
<label for="RegisterForm-email">
|
||||
{{ 'customer.register.email' | t }}
|
||||
</label>
|
||||
</div>
|
||||
{%- if form.errors contains 'email' -%}
|
||||
<span id="RegisterForm-email-error" class="form__message">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-error.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{ form.errors.translated_fields.email | capitalize }}
|
||||
{{ form.errors.messages.email }}.
|
||||
</span>
|
||||
{%- endif -%}
|
||||
<div class="field">
|
||||
<input
|
||||
type="password"
|
||||
name="customer[password]"
|
||||
id="RegisterForm-password"
|
||||
aria-required="true"
|
||||
{% if form.errors contains 'password' %}
|
||||
aria-invalid="true"
|
||||
aria-describedby="RegisterForm-password-error"
|
||||
{% endif %}
|
||||
placeholder="{{ 'customer.register.password' | t }}"
|
||||
>
|
||||
<label for="RegisterForm-password">
|
||||
{{ 'customer.register.password' | t }}
|
||||
</label>
|
||||
</div>
|
||||
{%- if form.errors contains 'password' -%}
|
||||
<span id="RegisterForm-password-error" class="form__message">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-error.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{ form.errors.translated_fields.password | capitalize }}
|
||||
{{ form.errors.messages.password }}.
|
||||
</span>
|
||||
{%- endif -%}
|
||||
<button>
|
||||
{{ 'customer.register.submit' | t }}
|
||||
</button>
|
||||
{%- endform -%}
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.main-register.name",
|
||||
"settings": [
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 36
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,137 @@
|
||||
{{ 'customer.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
<div class="customer reset-password section-{{ section.id }}-padding">
|
||||
<h1>
|
||||
{{ 'customer.reset_password.title' | t }}
|
||||
</h1>
|
||||
<p>
|
||||
{{ 'customer.reset_password.subtext' | t }}
|
||||
</p>
|
||||
{%- form 'reset_customer_password' -%}
|
||||
{%- if form.errors -%}
|
||||
<h2 class="form__message" tabindex="-1" autofocus>
|
||||
<span class="visually-hidden">{{ 'accessibility.error' | t }} </span>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-error.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{ 'templates.contact.form.error_heading' | t }}
|
||||
</h2>
|
||||
<ul>
|
||||
{%- for field in form.errors -%}
|
||||
<li>
|
||||
{%- if field == 'form' -%}
|
||||
{{ form.errors.messages[field] }}
|
||||
{%- else -%}
|
||||
<a href="#{{ field }}">
|
||||
{{ form.errors.translated_fields[field] | capitalize }}
|
||||
{{ form.errors.messages[field] }}
|
||||
</a>
|
||||
{%- endif -%}
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
{%- endif -%}
|
||||
|
||||
<div class="field">
|
||||
<input
|
||||
type="password"
|
||||
name="customer[password]"
|
||||
id="password"
|
||||
autocomplete="new-password"
|
||||
{% if form.errors contains 'password' %}
|
||||
aria-invalid="true"
|
||||
aria-describedby="password-error"
|
||||
{% endif %}
|
||||
placeholder="{{ 'customer.reset_password.password' | t }}"
|
||||
>
|
||||
<label for="password">
|
||||
{{ 'customer.reset_password.password' | t }}
|
||||
</label>
|
||||
{%- if form.errors contains 'password' -%}
|
||||
<small id="password-error" class="form__message">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-error.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{ form.errors.translated_fields.password | capitalize }}
|
||||
{{ form.errors.messages.password }}
|
||||
</small>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<input
|
||||
type="password"
|
||||
name="customer[password_confirmation]"
|
||||
id="password_confirmation"
|
||||
autocomplete="new-password"
|
||||
{% if form.errors contains 'password_confirmation' %}
|
||||
aria-invalid="true"
|
||||
aria-describedby="password_confirmation-error"
|
||||
{% endif %}
|
||||
placeholder="{{ 'customer.reset_password.password_confirm' | t }}"
|
||||
>
|
||||
<label for="password_confirmation">
|
||||
{{ 'customer.reset_password.password_confirm' | t }}
|
||||
</label>
|
||||
{%- if form.errors contains 'password_confirmation' -%}
|
||||
<small id="password_confirmation-error" class="form__message">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-error.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{ form.errors.translated_fields.password_confirmation | capitalize }}
|
||||
{{ form.errors.messages.password_confirmation }}
|
||||
</small>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
||||
<button>
|
||||
{{ 'customer.reset_password.submit' | t }}
|
||||
</button>
|
||||
{%- endform -%}
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.main-reset-password.name",
|
||||
"settings": [
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 36
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,530 @@
|
||||
{{ 'template-collection.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-card.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-price.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-search.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
|
||||
{{ 'component-facets.css' | asset_url | stylesheet_tag }}
|
||||
<script src="{{ 'facets.js' | asset_url }}" defer="defer"></script>
|
||||
{%- endif -%}
|
||||
|
||||
{% if section.settings.image_shape == 'blob' %}
|
||||
{{ 'mask-blobs.css' | asset_url | stylesheet_tag }}
|
||||
{%- endif -%}
|
||||
|
||||
<script src="{{ 'main-search.js' | asset_url }}" defer="defer"></script>
|
||||
|
||||
<style>
|
||||
.template-search__header {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.template-search__search {
|
||||
margin: 0 auto 3.5rem;
|
||||
max-width: 74.1rem;
|
||||
}
|
||||
|
||||
.template-search__search .search {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.template-search--empty {
|
||||
padding-bottom: 18rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.template-search__header {
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.search__button .icon {
|
||||
height: 1.8rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
{%- liquid
|
||||
assign sort_by = search.sort_by | default: search.default_sort_by
|
||||
assign terms = search.terms | escape
|
||||
assign search_url = '?q=' | append: terms | append: '&options%5Bprefix%5D=last&sort_by=' | append: sort_by
|
||||
-%}
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
{% paginate search.results by 24 %}
|
||||
<div class="template-search{% unless search.performed and search.results_count > 0 %} template-search--empty{% endunless %} section-{{ section.id }}-padding">
|
||||
<div class="template-search__header page-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
|
||||
<h1 class="h2 center">
|
||||
{%- if search.performed -%}
|
||||
{{- 'templates.search.title' | t -}}
|
||||
{%- else -%}
|
||||
{{- 'general.search.search' | t -}}
|
||||
{%- endif -%}
|
||||
</h1>
|
||||
<div class="template-search__search">
|
||||
{%- if settings.predictive_search_enabled -%}
|
||||
<predictive-search data-loading-text="{{ 'accessibility.loading' | t }}">
|
||||
{%- endif -%}
|
||||
<main-search>
|
||||
<form action="{{ routes.search_url }}" method="get" role="search" class="search">
|
||||
<div class="field">
|
||||
<input
|
||||
class="search__input field__input"
|
||||
id="Search-In-Template"
|
||||
type="search"
|
||||
name="q"
|
||||
value="{{ search.terms | escape }}"
|
||||
placeholder="{{ 'general.search.search' | t }}"
|
||||
{%- if settings.predictive_search_enabled -%}
|
||||
role="combobox"
|
||||
aria-expanded="false"
|
||||
aria-owns="predictive-search-results"
|
||||
aria-controls="predictive-search-results"
|
||||
aria-haspopup="listbox"
|
||||
aria-autocomplete="list"
|
||||
autocorrect="off"
|
||||
autocomplete="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
{%- endif -%}
|
||||
>
|
||||
<label class="field__label" for="Search-In-Template">{{ 'general.search.search' | t }}</label>
|
||||
<input name="options[prefix]" type="hidden" value="last">
|
||||
|
||||
{%- if settings.predictive_search_enabled -%}
|
||||
<div class="predictive-search predictive-search--search-template" tabindex="-1" data-predictive-search>
|
||||
{%- render 'loading-spinner', class: 'predictive-search__loading-state' -%}
|
||||
</div>
|
||||
|
||||
<span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
|
||||
{%- endif -%}
|
||||
|
||||
<button
|
||||
type="reset"
|
||||
class="reset__button field__button{% if search.terms == blank %} hidden{% endif %}"
|
||||
aria-label="{{ 'general.search.reset' | t }}"
|
||||
>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-reset.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</button>
|
||||
<button type="submit" class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-search.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</main-search>
|
||||
{%- if settings.predictive_search_enabled -%}
|
||||
</predictive-search>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- if search.performed -%}
|
||||
{%- unless section.settings.enable_filtering or section.settings.enable_sorting -%}
|
||||
{%- if search.results_count > 0 -%}
|
||||
<p role="status">
|
||||
{{ 'templates.search.results_with_count_and_term' | t: terms: search.terms, count: search.results_count }}
|
||||
</p>
|
||||
{%- endif -%}
|
||||
{%- endunless -%}
|
||||
{%- if search.results_count == 0 and search.filters == empty -%}
|
||||
<p role="status">{{ 'templates.search.no_results' | t: terms: search.terms }}</p>
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- if search.performed -%}
|
||||
{%- if section.settings.enable_sorting
|
||||
and section.settings.filter_type == 'vertical'
|
||||
and search.filters != empty
|
||||
-%}
|
||||
<facet-filters-form class="facets facets-vertical-sort page-width small-hide">
|
||||
<form class="facets-vertical-form" id="FacetSortForm">
|
||||
<div class="facet-filters sorting caption">
|
||||
<div class="facet-filters__field">
|
||||
<h2 class="facet-filters__label caption-large text-body">
|
||||
<label for="SortBy">{{ 'products.facets.sort_by_label' | t }}</label>
|
||||
</h2>
|
||||
<div class="select">
|
||||
{%- assign sort_by = search.sort_by | default: search.default_sort_by -%}
|
||||
<select
|
||||
name="sort_by"
|
||||
class="facet-filters__sort select__select caption-large"
|
||||
id="SortBy"
|
||||
aria-describedby="a11y-refresh-page-message"
|
||||
>
|
||||
{%- for option in search.sort_options -%}
|
||||
<option
|
||||
value="{{ option.value | escape }}"
|
||||
{% if option.value == sort_by %}
|
||||
selected="selected"
|
||||
{% endif %}
|
||||
>
|
||||
{{ option.name | escape }}
|
||||
</option>
|
||||
{%- endfor -%}
|
||||
</select>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-caret.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-count-vertical light" role="status">
|
||||
<h2 class="product-count__text text-body">
|
||||
<span id="ProductCountDesktop">
|
||||
{%- if search.results_count -%}
|
||||
{{ 'templates.search.results_with_count' | t: terms: search.terms, count: search.results_count }}
|
||||
{%- elsif search.products_count == search.all_products_count -%}
|
||||
{{ 'products.facets.product_count_simple' | t: count: search.products_count }}
|
||||
{%- else -%}
|
||||
{{
|
||||
'products.facets.product_count'
|
||||
| t: product_count: search.products_count, count: search.all_products_count
|
||||
}}
|
||||
{%- endif -%}
|
||||
</span>
|
||||
</h2>
|
||||
{%- render 'loading-spinner' -%}
|
||||
</div>
|
||||
</form>
|
||||
</facet-filters-form>
|
||||
{%- endif -%}
|
||||
<div
|
||||
{% if section.settings.filter_type == 'vertical' %}
|
||||
class="facets-vertical page-width"
|
||||
{% endif %}
|
||||
>
|
||||
{%- if search.filters != empty -%}
|
||||
{%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
|
||||
<aside
|
||||
aria-labelledby="verticalTitle"
|
||||
class="facets-wrapper{% unless section.settings.enable_filtering %} facets-wrapper--no-filters{% endunless %}{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}"
|
||||
id="main-search-filters"
|
||||
data-id="{{ section.id }}"
|
||||
>
|
||||
{% render 'facets',
|
||||
results: search,
|
||||
enable_filtering: section.settings.enable_filtering,
|
||||
enable_sorting: section.settings.enable_sorting,
|
||||
filter_type: section.settings.filter_type,
|
||||
paginate: paginate
|
||||
%}
|
||||
</aside>
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
<div class="product-grid-container" id="ProductGridContainer">
|
||||
{%- if search.results.size == 0 and search.filters != empty -%}
|
||||
<div
|
||||
class="template-search__results collection collection--empty{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}"
|
||||
id="product-grid"
|
||||
data-id="{{ section.id }}"
|
||||
>
|
||||
<div class="loading-overlay gradient"></div>
|
||||
<div class="title-wrapper center">
|
||||
<h2 class="title title--primary">
|
||||
{{ 'sections.collection_template.empty' | t -}}
|
||||
<br>
|
||||
{{
|
||||
'sections.collection_template.use_fewer_filters_html'
|
||||
| t: link: search_url, class: 'underlined-link link'
|
||||
}}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
{%- else -%}
|
||||
<div
|
||||
class="template-search__results collection{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}"
|
||||
id="product-grid"
|
||||
data-id="{{ section.id }}"
|
||||
>
|
||||
<div class="loading-overlay gradient"></div>
|
||||
<ul
|
||||
class="grid product-grid grid--{{ section.settings.columns_mobile }}-col-tablet-down grid--{{ section.settings.columns_desktop }}-col-desktop"
|
||||
role="list"
|
||||
>
|
||||
{%- assign skip_card_product_styles = false -%}
|
||||
{%- for item in search.results -%}
|
||||
{% assign lazy_load = false %}
|
||||
{%- if forloop.index > 2 -%}
|
||||
{%- assign lazy_load = true -%}
|
||||
{%- endif -%}
|
||||
|
||||
<li
|
||||
class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{% if settings.animations_reveal_on_scroll %}
|
||||
data-cascade
|
||||
{% endif %}
|
||||
>
|
||||
{%- case item.object_type -%}
|
||||
{%- when 'product' -%}
|
||||
{%- capture product_settings -%}{%- if section.settings.product_show_vendor -%}vendor,{%- endif -%}title,price{%- endcapture -%}
|
||||
{% render 'card-product',
|
||||
card_product: item,
|
||||
media_aspect_ratio: section.settings.image_ratio,
|
||||
image_shape: section.settings.image_shape,
|
||||
show_secondary_image: section.settings.show_secondary_image,
|
||||
show_vendor: section.settings.show_vendor,
|
||||
show_rating: section.settings.show_rating,
|
||||
lazy_load: lazy_load,
|
||||
skip_styles: skip_card_product_styles,
|
||||
product_view_context: 'search'
|
||||
%}
|
||||
{%- assign skip_card_product_styles = true -%}
|
||||
{%- when 'article' -%}
|
||||
{% render 'article-card',
|
||||
article: item,
|
||||
show_image: true,
|
||||
show_date: section.settings.article_show_date,
|
||||
show_author: section.settings.article_show_author,
|
||||
show_badge: true,
|
||||
media_aspect_ratio: 1,
|
||||
lazy_load: lazy_load
|
||||
%}
|
||||
{%- when 'page' -%}
|
||||
<div class="article-card-wrapper card-wrapper underline-links-hover">
|
||||
<div
|
||||
class="card card--card card--text ratio color-{{ settings.blog_card_color_scheme }}"
|
||||
style="--ratio-percent: 100%;"
|
||||
>
|
||||
<div class="card__content">
|
||||
<div class="card__information">
|
||||
<h3 class="card__heading">
|
||||
<a href="{{ item.url }}" class="full-unstyled-link">
|
||||
{{ item.title | truncate: 50 | escape }}
|
||||
</a>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card__badge {{ settings.badge_position }}">
|
||||
<span class="badge color-{{ settings.color_schemes | first }}">
|
||||
{{- 'templates.search.page' | t -}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcase -%}
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
{%- if paginate.pages > 1 -%}
|
||||
{% render 'pagination', paginate: paginate %}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{% endpaginate %}
|
||||
{% if section.settings.image_shape == 'arch' %}
|
||||
{{ 'mask-arch.svg' | inline_asset_content }}
|
||||
{%- endif -%}
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.main-search.name",
|
||||
"tag": "section",
|
||||
"class": "section",
|
||||
"settings": [
|
||||
{
|
||||
"type": "range",
|
||||
"id": "columns_desktop",
|
||||
"min": 1,
|
||||
"max": 6,
|
||||
"step": 1,
|
||||
"default": 4,
|
||||
"label": "t:sections.main-search.settings.columns_desktop.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "columns_mobile",
|
||||
"default": "2",
|
||||
"label": "t:sections.main-search.settings.columns_mobile.label",
|
||||
"options": [
|
||||
{
|
||||
"value": "1",
|
||||
"label": "t:sections.main-search.settings.columns_mobile.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "2",
|
||||
"label": "t:sections.main-search.settings.columns_mobile.options__2.label"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.main-search.settings.header__1.content"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "image_ratio",
|
||||
"options": [
|
||||
{
|
||||
"value": "adapt",
|
||||
"label": "t:sections.main-search.settings.image_ratio.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "portrait",
|
||||
"label": "t:sections.main-search.settings.image_ratio.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "square",
|
||||
"label": "t:sections.main-search.settings.image_ratio.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "adapt",
|
||||
"label": "t:sections.main-search.settings.image_ratio.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "image_shape",
|
||||
"options": [
|
||||
{
|
||||
"value": "default",
|
||||
"label": "t:sections.all.image_shape.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "arch",
|
||||
"label": "t:sections.all.image_shape.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "blob",
|
||||
"label": "t:sections.all.image_shape.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "chevronleft",
|
||||
"label": "t:sections.all.image_shape.options__4.label"
|
||||
},
|
||||
{
|
||||
"value": "chevronright",
|
||||
"label": "t:sections.all.image_shape.options__5.label"
|
||||
},
|
||||
{
|
||||
"value": "diamond",
|
||||
"label": "t:sections.all.image_shape.options__6.label"
|
||||
},
|
||||
{
|
||||
"value": "parallelogram",
|
||||
"label": "t:sections.all.image_shape.options__7.label"
|
||||
},
|
||||
{
|
||||
"value": "round",
|
||||
"label": "t:sections.all.image_shape.options__8.label"
|
||||
}
|
||||
],
|
||||
"default": "default",
|
||||
"label": "t:sections.all.image_shape.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_secondary_image",
|
||||
"default": false,
|
||||
"label": "t:sections.main-search.settings.show_secondary_image.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_vendor",
|
||||
"default": false,
|
||||
"label": "t:sections.main-search.settings.show_vendor.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_rating",
|
||||
"default": false,
|
||||
"label": "t:sections.main-search.settings.show_rating.label",
|
||||
"info": "t:sections.main-search.settings.show_rating.info"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.main-collection-product-grid.settings.header__1.content"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "enable_filtering",
|
||||
"default": true,
|
||||
"label": "t:sections.main-collection-product-grid.settings.enable_filtering.label",
|
||||
"info": "t:sections.main-collection-product-grid.settings.enable_filtering.info"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "filter_type",
|
||||
"options": [
|
||||
{
|
||||
"value": "horizontal",
|
||||
"label": "t:sections.main-collection-product-grid.settings.filter_type.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "vertical",
|
||||
"label": "t:sections.main-collection-product-grid.settings.filter_type.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "drawer",
|
||||
"label": "t:sections.main-collection-product-grid.settings.filter_type.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "horizontal",
|
||||
"label": "t:sections.main-collection-product-grid.settings.filter_type.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "enable_sorting",
|
||||
"default": true,
|
||||
"label": "t:sections.main-collection-product-grid.settings.enable_sorting.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.main-search.settings.header__2.content"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "article_show_date",
|
||||
"default": true,
|
||||
"label": "t:sections.main-search.settings.article_show_date.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "article_show_author",
|
||||
"default": false,
|
||||
"label": "t:sections.main-search.settings.article_show_author.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 36
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,455 @@
|
||||
{{ 'section-multicolumn.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
{%- liquid
|
||||
assign columns_mobile_int = section.settings.columns_mobile | plus: 0
|
||||
assign show_mobile_slider = false
|
||||
if section.settings.swipe_on_mobile and section.blocks.size > columns_mobile_int
|
||||
assign show_mobile_slider = true
|
||||
endif
|
||||
-%}
|
||||
|
||||
<div class="multicolumn color-{{ section.settings.color_scheme }} gradient{% unless section.settings.background_style == 'none' and settings.text_boxes_border_thickness > 0 or settings.text_boxes_shadow_opacity > 0 %} background-{{ section.settings.background_style }}{% endunless %}{% if section.settings.title == blank %} no-heading{% endif %}">
|
||||
<div
|
||||
class="page-width section-{{ section.id }}-padding isolate{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{% if settings.animations_reveal_on_scroll %}
|
||||
data-cascade
|
||||
{% endif %}
|
||||
>
|
||||
{%- unless section.settings.title == blank -%}
|
||||
<div class="title-wrapper-with-link title-wrapper--self-padded-mobile title-wrapper--no-top-margin multicolumn__title">
|
||||
<h2 class="title inline-richtext {{ section.settings.heading_size }}">
|
||||
{{ section.settings.title }}
|
||||
</h2>
|
||||
{%- if section.settings.button_label != blank and show_mobile_slider -%}
|
||||
<a href="{{ section.settings.button_link }}" class="link underlined-link large-up-hide">
|
||||
{{- section.settings.button_label | escape -}}
|
||||
</a>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- endunless -%}
|
||||
<slider-component class="slider-mobile-gutter">
|
||||
<ul
|
||||
class="multicolumn-list contains-content-container grid grid--{{ section.settings.columns_mobile }}-col-tablet-down grid--{{ section.settings.columns_desktop }}-col-desktop{% if show_mobile_slider %} slider slider--tablet grid--peek{% endif %}"
|
||||
id="Slider-{{ section.id }}"
|
||||
role="list"
|
||||
>
|
||||
{%- liquid
|
||||
assign highest_ratio = 0
|
||||
for block in section.blocks
|
||||
if block.settings.image.aspect_ratio > highest_ratio
|
||||
assign highest_ratio = block.settings.image.aspect_ratio
|
||||
endif
|
||||
endfor
|
||||
-%}
|
||||
{%- for block in section.blocks -%}
|
||||
{%- assign empty_column = '' -%}
|
||||
{%- if block.settings.image == blank
|
||||
and block.settings.title == blank
|
||||
and block.settings.text == blank
|
||||
and block.settings.link_label == blank
|
||||
-%}
|
||||
{%- assign empty_column = ' multicolumn-list__item--empty' -%}
|
||||
{%- endif -%}
|
||||
|
||||
<li
|
||||
id="Slide-{{ section.id }}-{{ forloop.index }}"
|
||||
class="multicolumn-list__item grid__item{% if section.settings.swipe_on_mobile %} slider__slide{% endif %}{% if section.settings.column_alignment == 'center' %} center{% endif %}{{ empty_column }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{{ block.shopify_attributes }}
|
||||
{% if settings.animations_reveal_on_scroll %}
|
||||
data-cascade
|
||||
style="--animation-order: {{ forloop.index }};"
|
||||
{% endif %}
|
||||
>
|
||||
<div class="multicolumn-card content-container">
|
||||
{%- if block.settings.image != blank -%}
|
||||
{% if section.settings.image_ratio == 'adapt' or section.settings.image_ratio == 'circle' %}
|
||||
{% assign spaced_image = true %}
|
||||
{% endif %}
|
||||
<div class="multicolumn-card__image-wrapper multicolumn-card__image-wrapper--{{ section.settings.image_width }}-width{% if section.settings.image_width != 'full' or spaced_image %} multicolumn-card-spacing{% endif %}">
|
||||
<div
|
||||
class="media media--transparent media--{{ section.settings.image_ratio }}"
|
||||
{% if section.settings.image_ratio == 'adapt' %}
|
||||
style="padding-bottom: {{ 1 | divided_by: highest_ratio | times: 100 }}%;"
|
||||
{% endif %}
|
||||
>
|
||||
{%- liquid
|
||||
assign number_of_columns = section.settings.columns_desktop
|
||||
assign number_of_columns_mobile = section.settings.columns_mobile
|
||||
assign grid_space_desktop = number_of_columns | minus: 1 | times: settings.spacing_grid_horizontal | plus: 100 | append: 'px'
|
||||
assign grid_space_tablet = number_of_columns_mobile | minus: 1 | times: settings.spacing_grid_horizontal | plus: 100 | append: 'px'
|
||||
assign grid_space_mobile = number_of_columns_mobile | minus: 1 | times: settings.spacing_grid_horizontal | divided_by: 2 | plus: 30 | append: 'px'
|
||||
if section.settings.image_width == 'half'
|
||||
assign image_width = 0.5
|
||||
elsif section.settings.image_width == 'third'
|
||||
assign image_width = 0.33
|
||||
else
|
||||
assign image_width = 1
|
||||
endif
|
||||
-%}
|
||||
{% capture sizes %}
|
||||
(min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - {{ grid_space_desktop }}) * {{ image_width }} / {{ number_of_columns }}),
|
||||
(min-width: 990px) calc((100vw - {{ grid_space_desktop }}) * {{ image_width }} / {{ number_of_columns }}),
|
||||
(min-width: 750px) calc((100vw - {{ grid_space_tablet }}) * {{ image_width }} / {{ number_of_columns_mobile }}),
|
||||
calc((100vw - {{ grid_space_mobile }}) * {{ image_width }} / {{ number_of_columns_mobile }})
|
||||
{% endcapture %}
|
||||
{{
|
||||
block.settings.image
|
||||
| image_url: width: 3200
|
||||
| image_tag:
|
||||
widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200',
|
||||
sizes: sizes,
|
||||
class: 'multicolumn-card__image'
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
<div class="multicolumn-card__info">
|
||||
{%- if block.settings.title != blank -%}
|
||||
<h3 class="inline-richtext">{{ block.settings.title }}</h3>
|
||||
{%- endif -%}
|
||||
{%- if block.settings.text != blank -%}
|
||||
<div class="rte">{{ block.settings.text }}</div>
|
||||
{%- endif -%}
|
||||
{%- if block.settings.link_label != blank -%}
|
||||
<a
|
||||
class="link animate-arrow"
|
||||
{% if block.settings.link == blank %}
|
||||
role="link" aria-disabled="true"
|
||||
{% else %}
|
||||
href="{{ block.settings.link }}"
|
||||
{% endif %}
|
||||
>
|
||||
{{- block.settings.link_label | escape -}}
|
||||
<span class="svg-wrapper"
|
||||
><span class="icon-wrap"> {{ 'icon-arrow.svg' | inline_asset_content }}</span></span
|
||||
>
|
||||
</a>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
|
||||
{%- if show_mobile_slider -%}
|
||||
<div class="slider-buttons large-up-hide">
|
||||
<button
|
||||
type="button"
|
||||
class="slider-button slider-button--prev"
|
||||
name="previous"
|
||||
aria-label="{{ 'general.slider.previous_slide' | t }}"
|
||||
>
|
||||
<span class="svg-wrapper">{{ 'icon-caret.svg' | inline_asset_content }}</span>
|
||||
</button>
|
||||
<div class="slider-counter caption">
|
||||
<span class="slider-counter--current">1</span>
|
||||
<span aria-hidden="true"> / </span>
|
||||
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
|
||||
<span class="slider-counter--total">{{ section.blocks.size }}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="slider-button slider-button--next"
|
||||
name="next"
|
||||
aria-label="{{ 'general.slider.next_slide' | t }}"
|
||||
>
|
||||
<span class="svg-wrapper">{{ 'icon-caret.svg' | inline_asset_content }}</span>
|
||||
</button>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</slider-component>
|
||||
<div class="center{% if show_mobile_slider %} small-hide medium-hide{% endif %}">
|
||||
{%- if section.settings.button_label != blank -%}
|
||||
<a
|
||||
class="button button--primary"
|
||||
{% if section.settings.button_link == blank %}
|
||||
role="link" aria-disabled="true"
|
||||
{% else %}
|
||||
href="{{ section.settings.button_link }}"
|
||||
{% endif %}
|
||||
>
|
||||
{{ section.settings.button_label | escape }}
|
||||
</a>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.multicolumn.name",
|
||||
"class": "section",
|
||||
"tag": "section",
|
||||
"disabled_on": {
|
||||
"groups": ["header", "footer"]
|
||||
},
|
||||
"settings": [
|
||||
{
|
||||
"type": "inline_richtext",
|
||||
"id": "title",
|
||||
"default": "t:sections.multicolumn.settings.title.default",
|
||||
"label": "t:sections.multicolumn.settings.title.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "heading_size",
|
||||
"options": [
|
||||
{
|
||||
"value": "h2",
|
||||
"label": "t:sections.all.heading_size.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "h1",
|
||||
"label": "t:sections.all.heading_size.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "h0",
|
||||
"label": "t:sections.all.heading_size.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "hxl",
|
||||
"label": "t:sections.all.heading_size.options__4.label"
|
||||
},
|
||||
{
|
||||
"value": "hxxl",
|
||||
"label": "t:sections.all.heading_size.options__5.label"
|
||||
}
|
||||
],
|
||||
"default": "h1",
|
||||
"label": "t:sections.all.heading_size.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.multicolumn.settings.header_image.content"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "image_width",
|
||||
"options": [
|
||||
{
|
||||
"value": "third",
|
||||
"label": "t:sections.multicolumn.settings.image_width.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "half",
|
||||
"label": "t:sections.multicolumn.settings.image_width.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "full",
|
||||
"label": "t:sections.multicolumn.settings.image_width.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "full",
|
||||
"label": "t:sections.multicolumn.settings.image_width.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "image_ratio",
|
||||
"options": [
|
||||
{
|
||||
"value": "adapt",
|
||||
"label": "t:sections.multicolumn.settings.image_ratio.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "portrait",
|
||||
"label": "t:sections.multicolumn.settings.image_ratio.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "square",
|
||||
"label": "t:sections.multicolumn.settings.image_ratio.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "circle",
|
||||
"label": "t:sections.multicolumn.settings.image_ratio.options__4.label"
|
||||
}
|
||||
],
|
||||
"default": "adapt",
|
||||
"label": "t:sections.multicolumn.settings.image_ratio.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.multicolumn.settings.header_button.content"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "button_label",
|
||||
"default": "t:sections.multicolumn.settings.button_label.default",
|
||||
"label": "t:sections.multicolumn.settings.button_label.label",
|
||||
"info": "t:sections.multicolumn.settings.button_label.info"
|
||||
},
|
||||
{
|
||||
"type": "url",
|
||||
"id": "button_link",
|
||||
"label": "t:sections.multicolumn.settings.button_link.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.multicolumn.settings.header_layout.content"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "columns_desktop",
|
||||
"min": 1,
|
||||
"max": 6,
|
||||
"step": 1,
|
||||
"default": 3,
|
||||
"label": "t:sections.multicolumn.settings.columns_desktop.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "column_alignment",
|
||||
"options": [
|
||||
{
|
||||
"value": "left",
|
||||
"label": "t:sections.multicolumn.settings.column_alignment.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "center",
|
||||
"label": "t:sections.multicolumn.settings.column_alignment.options__2.label"
|
||||
}
|
||||
],
|
||||
"default": "left",
|
||||
"label": "t:sections.multicolumn.settings.column_alignment.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "background_style",
|
||||
"options": [
|
||||
{
|
||||
"value": "none",
|
||||
"label": "t:sections.multicolumn.settings.background_style.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "primary",
|
||||
"label": "t:sections.multicolumn.settings.background_style.options__2.label"
|
||||
}
|
||||
],
|
||||
"default": "primary",
|
||||
"label": "t:sections.multicolumn.settings.background_style.label"
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"default": "scheme-1"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.multicolumn.settings.header_mobile.content"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "columns_mobile",
|
||||
"options": [
|
||||
{
|
||||
"value": "1",
|
||||
"label": "t:sections.multicolumn.settings.columns_mobile.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "2",
|
||||
"label": "t:sections.multicolumn.settings.columns_mobile.options__2.label"
|
||||
}
|
||||
],
|
||||
"default": "1",
|
||||
"label": "t:sections.multicolumn.settings.columns_mobile.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "swipe_on_mobile",
|
||||
"default": false,
|
||||
"label": "t:sections.multicolumn.settings.swipe_on_mobile.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 36
|
||||
}
|
||||
],
|
||||
"blocks": [
|
||||
{
|
||||
"type": "column",
|
||||
"name": "t:sections.multicolumn.blocks.column.name",
|
||||
"settings": [
|
||||
{
|
||||
"type": "image_picker",
|
||||
"id": "image",
|
||||
"label": "t:sections.multicolumn.blocks.column.settings.image.label"
|
||||
},
|
||||
{
|
||||
"type": "inline_richtext",
|
||||
"id": "title",
|
||||
"default": "t:sections.multicolumn.blocks.column.settings.title.default",
|
||||
"label": "t:sections.multicolumn.blocks.column.settings.title.label"
|
||||
},
|
||||
{
|
||||
"type": "richtext",
|
||||
"id": "text",
|
||||
"default": "t:sections.multicolumn.blocks.column.settings.text.default",
|
||||
"label": "t:sections.multicolumn.blocks.column.settings.text.label"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "link_label",
|
||||
"label": "t:sections.multicolumn.blocks.column.settings.link_label.label",
|
||||
"info": "t:sections.multicolumn.blocks.column.settings.link_label.info"
|
||||
},
|
||||
{
|
||||
"type": "url",
|
||||
"id": "link",
|
||||
"label": "t:sections.multicolumn.blocks.column.settings.link.label"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "t:sections.multicolumn.presets.name",
|
||||
"blocks": [
|
||||
{
|
||||
"type": "column"
|
||||
},
|
||||
{
|
||||
"type": "column"
|
||||
},
|
||||
{
|
||||
"type": "column"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,415 @@
|
||||
{{ 'component-image-with-text.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
{%- liquid
|
||||
if section.settings.image_layout contains 'right'
|
||||
assign odd_class = ' image-with-text__grid--reverse'
|
||||
else
|
||||
assign even_class = ' image-with-text__grid--reverse'
|
||||
endif
|
||||
|
||||
if section.settings.row_color_scheme == section.settings.section_color_scheme
|
||||
assign no_content_background = true
|
||||
endif
|
||||
|
||||
if settings.text_boxes_shadow_opacity == 0 and settings.text_boxes_border_thickness == 0 or settings.text_boxes_border_opacity == 0
|
||||
assign no_content_styles = true
|
||||
endif
|
||||
|
||||
if settings.text_boxes_border_thickness > 0 and settings.text_boxes_border_opacity > 0 and settings.media_border_thickness > 0 and settings.media_border_opacity > 0
|
||||
assign borders_class = ' collapse-borders'
|
||||
endif
|
||||
|
||||
if no_content_background and no_content_styles
|
||||
assign padding_class = ' collapse-padding'
|
||||
endif
|
||||
|
||||
unless no_content_background and no_content_styles
|
||||
assign corners_class = ' collapse-corners'
|
||||
endunless
|
||||
-%}
|
||||
|
||||
<div class="multirow section-{{ section.id }}-padding gradient color-{{ section.settings.section_color_scheme }}">
|
||||
<div class="multirow__inner page-width">
|
||||
{%- for block in section.blocks -%}
|
||||
<div
|
||||
class="image-with-text isolate{{ borders_class }}{{ corners_class }}{{ padding_class }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{{ block.shopify_attributes }}
|
||||
>
|
||||
<div class="image-with-text__grid grid grid--gapless grid--1-col grid--{% if section.settings.desktop_image_width == 'medium' %}2-col-tablet{% else %}3-col-tablet{% endif %}{% if section.settings.image_layout contains 'alternate' %}{% cycle odd_class, even_class %}{% else %}{{ odd_class }}{% endif %}">
|
||||
<div class="image-with-text__media-item image-with-text__media-item--{{ section.settings.desktop_image_width }} image-with-text__media-item--{{ section.settings.desktop_content_position }} grid__item">
|
||||
<div
|
||||
class="image-with-text__media image-with-text__media--{{ section.settings.image_height }} gradient color-{{ section.settings.row_color_scheme }} global-media-settings{% if block.settings.image != blank %} media{% else %} image-with-text__media--placeholder placeholder{% endif %}"
|
||||
{% if section.settings.image_height == 'adapt' and block.settings.image != blank %}
|
||||
style="padding-bottom: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;"
|
||||
{% endif %}
|
||||
>
|
||||
{%- if block.settings.image != blank -%}
|
||||
{%- capture sizes -%}
|
||||
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px,
|
||||
(min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)
|
||||
{%- endcapture -%}
|
||||
{{
|
||||
block.settings.image
|
||||
| image_url: width: 1500
|
||||
| image_tag: sizes: sizes, widths: '165, 360, 535, 750, 1070, 1500'
|
||||
}}
|
||||
{%- else -%}
|
||||
{{ 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-with-text__text-item grid__item">
|
||||
<div class="image-with-text__content image-with-text__content--{{ section.settings.desktop_content_position }} image-with-text__content--desktop-{{ section.settings.desktop_content_alignment }} image-with-text__content--mobile-{{ section.settings.mobile_content_alignment }} image-with-text__content--{{ section.settings.image_height }} content-container{% unless no_content_background and no_content_styles %} gradient color-{{ section.settings.row_color_scheme }}{% else %} background-transparent{% endunless %}">
|
||||
{%- if block.settings.caption -%}
|
||||
<p class="image-with-text__text image-with-text__text--caption caption-with-letter-spacing caption-with-letter-spacing--medium">
|
||||
{{ block.settings.caption | escape }}
|
||||
</p>
|
||||
{%- endif -%}
|
||||
{%- if block.settings.heading -%}
|
||||
<h2 class="image-with-text__heading {{ section.settings.heading_size }} rte">
|
||||
{{ block.settings.heading }}
|
||||
</h2>
|
||||
{%- endif -%}
|
||||
{%- if block.settings.text -%}
|
||||
<div class="image-with-text__text rte {{ section.settings.text_style }}">{{ block.settings.text }}</div>
|
||||
{%- endif -%}
|
||||
{%- if block.settings.button_label != blank -%}
|
||||
<a
|
||||
{% if block.settings.button_link == blank %}
|
||||
role="link" aria-disabled="true"
|
||||
{% else %}
|
||||
href="{{ block.settings.button_link }}"
|
||||
{% endif %}
|
||||
class="button button--{{ section.settings.button_style }}"
|
||||
>
|
||||
{{ block.settings.button_label | escape }}
|
||||
</a>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.multirow.name",
|
||||
"class": "section",
|
||||
"disabled_on": {
|
||||
"groups": ["header", "footer"]
|
||||
},
|
||||
"settings": [
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.multirow.settings.header.content"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "image_height",
|
||||
"options": [
|
||||
{
|
||||
"value": "adapt",
|
||||
"label": "t:sections.multirow.settings.image_height.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "small",
|
||||
"label": "t:sections.multirow.settings.image_height.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "medium",
|
||||
"label": "t:sections.multirow.settings.image_height.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "large",
|
||||
"label": "t:sections.multirow.settings.image_height.options__4.label"
|
||||
}
|
||||
],
|
||||
"default": "medium",
|
||||
"label": "t:sections.multirow.settings.image_height.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "desktop_image_width",
|
||||
"options": [
|
||||
{
|
||||
"value": "small",
|
||||
"label": "t:sections.multirow.settings.desktop_image_width.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "medium",
|
||||
"label": "t:sections.multirow.settings.desktop_image_width.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "large",
|
||||
"label": "t:sections.multirow.settings.desktop_image_width.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "medium",
|
||||
"label": "t:sections.multirow.settings.desktop_image_width.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "image_layout",
|
||||
"options": [
|
||||
{
|
||||
"value": "alternate-left",
|
||||
"label": "t:sections.multirow.settings.image_layout.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "alternate-right",
|
||||
"label": "t:sections.multirow.settings.image_layout.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "align-left",
|
||||
"label": "t:sections.multirow.settings.image_layout.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "align-right",
|
||||
"label": "t:sections.multirow.settings.image_layout.options__4.label"
|
||||
}
|
||||
],
|
||||
"default": "alternate-left",
|
||||
"label": "t:sections.multirow.settings.image_layout.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.multirow.settings.header_2.content"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "heading_size",
|
||||
"options": [
|
||||
{
|
||||
"value": "h2",
|
||||
"label": "t:sections.all.heading_size.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "h1",
|
||||
"label": "t:sections.all.heading_size.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "h0",
|
||||
"label": "t:sections.all.heading_size.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "hxl",
|
||||
"label": "t:sections.all.heading_size.options__4.label"
|
||||
},
|
||||
{
|
||||
"value": "hxxl",
|
||||
"label": "t:sections.all.heading_size.options__5.label"
|
||||
}
|
||||
],
|
||||
"default": "h1",
|
||||
"label": "t:sections.all.heading_size.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "text_style",
|
||||
"options": [
|
||||
{
|
||||
"value": "body",
|
||||
"label": "t:sections.multirow.settings.text_style.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "subtitle",
|
||||
"label": "t:sections.multirow.settings.text_style.options__2.label"
|
||||
}
|
||||
],
|
||||
"default": "body",
|
||||
"label": "t:sections.multirow.settings.text_style.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "button_style",
|
||||
"options": [
|
||||
{
|
||||
"value": "primary",
|
||||
"label": "t:sections.multirow.settings.button_style.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "secondary",
|
||||
"label": "t:sections.multirow.settings.button_style.options__2.label"
|
||||
}
|
||||
],
|
||||
"default": "secondary",
|
||||
"label": "t:sections.multirow.settings.button_style.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "desktop_content_position",
|
||||
"options": [
|
||||
{
|
||||
"value": "top",
|
||||
"label": "t:sections.multirow.settings.desktop_content_position.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "middle",
|
||||
"label": "t:sections.multirow.settings.desktop_content_position.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "bottom",
|
||||
"label": "t:sections.multirow.settings.desktop_content_position.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "middle",
|
||||
"label": "t:sections.multirow.settings.desktop_content_position.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "desktop_content_alignment",
|
||||
"options": [
|
||||
{
|
||||
"value": "left",
|
||||
"label": "t:sections.multirow.settings.desktop_content_alignment.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "center",
|
||||
"label": "t:sections.multirow.settings.desktop_content_alignment.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "right",
|
||||
"label": "t:sections.multirow.settings.desktop_content_alignment.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "left",
|
||||
"label": "t:sections.multirow.settings.desktop_content_alignment.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "mobile_content_alignment",
|
||||
"options": [
|
||||
{
|
||||
"value": "left",
|
||||
"label": "t:sections.multirow.settings.mobile_content_alignment.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "center",
|
||||
"label": "t:sections.multirow.settings.mobile_content_alignment.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "right",
|
||||
"label": "t:sections.multirow.settings.mobile_content_alignment.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "left",
|
||||
"label": "t:sections.multirow.settings.mobile_content_alignment.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.multirow.settings.header_3.content"
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "section_color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"default": "scheme-1"
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "row_color_scheme",
|
||||
"label": "t:sections.multirow.settings.container_color_scheme.label",
|
||||
"default": "scheme-1"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 36
|
||||
}
|
||||
],
|
||||
"blocks": [
|
||||
{
|
||||
"type": "row",
|
||||
"name": "t:sections.multirow.blocks.row.name",
|
||||
"settings": [
|
||||
{
|
||||
"type": "image_picker",
|
||||
"id": "image",
|
||||
"label": "t:sections.multirow.blocks.row.settings.image.label"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "caption",
|
||||
"default": "t:sections.multirow.blocks.row.settings.caption.default",
|
||||
"label": "t:sections.multirow.blocks.row.settings.caption.label"
|
||||
},
|
||||
{
|
||||
"type": "inline_richtext",
|
||||
"id": "heading",
|
||||
"default": "t:sections.multirow.blocks.row.settings.heading.default",
|
||||
"label": "t:sections.multirow.blocks.row.settings.heading.label"
|
||||
},
|
||||
{
|
||||
"type": "richtext",
|
||||
"id": "text",
|
||||
"default": "t:sections.multirow.blocks.row.settings.text.default",
|
||||
"label": "t:sections.multirow.blocks.row.settings.text.label"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "button_label",
|
||||
"default": "t:sections.multirow.blocks.row.settings.button_label.default",
|
||||
"label": "t:sections.multirow.blocks.row.settings.button_label.label",
|
||||
"info": "t:sections.multirow.blocks.row.settings.button_label.info"
|
||||
},
|
||||
{
|
||||
"type": "url",
|
||||
"id": "button_link",
|
||||
"label": "t:sections.multirow.blocks.row.settings.button_link.label"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "t:sections.multirow.presets.name",
|
||||
"blocks": [
|
||||
{
|
||||
"type": "row"
|
||||
},
|
||||
{
|
||||
"type": "row"
|
||||
},
|
||||
{
|
||||
"type": "row"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,254 @@
|
||||
{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'newsletter-section.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
<div class="newsletter center {% if section.settings.full_width == false %}newsletter--narrow page-width{% endif %}">
|
||||
<div class="newsletter__wrapper color-{{ section.settings.color_scheme }} gradient content-container isolate{% if section.settings.full_width %} content-container--full-width{% endif %} section-{{ section.id }}-padding">
|
||||
{%- for block in section.blocks -%}
|
||||
{%- case block.type -%}
|
||||
{%- when '@app' -%}
|
||||
{% render block %}
|
||||
{%- when 'heading' -%}
|
||||
<h2
|
||||
class="inline-richtext {{ block.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{{ block.shopify_attributes }}
|
||||
{% if settings.animations_reveal_on_scroll %}
|
||||
data-cascade
|
||||
style="--animation-order: {{ forloop.index }};"
|
||||
{% endif %}
|
||||
>
|
||||
{{ block.settings.heading }}
|
||||
</h2>
|
||||
{%- when 'paragraph' -%}
|
||||
<div
|
||||
class="newsletter__subheading rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{{ block.shopify_attributes }}
|
||||
{% if settings.animations_reveal_on_scroll %}
|
||||
data-cascade
|
||||
style="--animation-order: {{ forloop.index }};"
|
||||
{% endif %}
|
||||
>
|
||||
{{ block.settings.text }}
|
||||
</div>
|
||||
{%- when 'email_form' -%}
|
||||
<div {{ block.shopify_attributes }}>
|
||||
{% form 'customer', class: 'newsletter-form' %}
|
||||
<input type="hidden" name="contact[tags]" value="newsletter">
|
||||
<div
|
||||
class="newsletter-form__field-wrapper{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{% if settings.animations_reveal_on_scroll %}
|
||||
data-cascade
|
||||
style="--animation-order: {{ forloop.index }};"
|
||||
{% endif %}
|
||||
>
|
||||
<div class="field">
|
||||
<input
|
||||
id="NewsletterForm--{{ section.id }}"
|
||||
type="email"
|
||||
name="contact[email]"
|
||||
class="field__input"
|
||||
value="{{ form.email }}"
|
||||
aria-required="true"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
autocomplete="email"
|
||||
{% if form.errors %}
|
||||
autofocus
|
||||
aria-invalid="true"
|
||||
aria-describedby="Newsletter-error--{{ section.id }}"
|
||||
{% elsif form.posted_successfully? %}
|
||||
aria-describedby="Newsletter-success--{{ section.id }}"
|
||||
{% endif %}
|
||||
placeholder="{{ 'newsletter.label' | t }}"
|
||||
required
|
||||
>
|
||||
<label class="field__label" for="NewsletterForm--{{ section.id }}">
|
||||
{{ 'newsletter.label' | t }}
|
||||
</label>
|
||||
<button
|
||||
type="submit"
|
||||
class="newsletter-form__button field__button"
|
||||
name="commit"
|
||||
id="Subscribe"
|
||||
aria-label="{{ 'newsletter.button_label' | t }}"
|
||||
>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-arrow.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
{%- if form.errors -%}
|
||||
<small class="newsletter-form__message form__message" id="Newsletter-error--{{ section.id }}">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-error.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{- form.errors.translated_fields.email | capitalize }}
|
||||
{{ form.errors.messages.email -}}
|
||||
</small>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- if form.posted_successfully? -%}
|
||||
<h3
|
||||
class="newsletter-form__message newsletter-form__message--success form__message"
|
||||
id="Newsletter-success--{{ section.id }}"
|
||||
tabindex="-1"
|
||||
autofocus
|
||||
>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-success.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{- 'newsletter.success' | t }}
|
||||
</h3>
|
||||
{%- endif -%}
|
||||
{% endform %}
|
||||
</div>
|
||||
{%- endcase -%}
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.newsletter.name",
|
||||
"tag": "section",
|
||||
"class": "section",
|
||||
"disabled_on": {
|
||||
"groups": ["header"]
|
||||
},
|
||||
"settings": [
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": "t:sections.newsletter.settings.paragraph.content"
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"default": "scheme-1"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "full_width",
|
||||
"default": true,
|
||||
"label": "t:sections.newsletter.settings.full_width.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 40
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 52
|
||||
}
|
||||
],
|
||||
"blocks": [
|
||||
{
|
||||
"type": "heading",
|
||||
"name": "t:sections.newsletter.blocks.heading.name",
|
||||
"limit": 1,
|
||||
"settings": [
|
||||
{
|
||||
"type": "inline_richtext",
|
||||
"id": "heading",
|
||||
"default": "t:sections.newsletter.blocks.heading.settings.heading.default",
|
||||
"label": "t:sections.newsletter.blocks.heading.settings.heading.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "heading_size",
|
||||
"options": [
|
||||
{
|
||||
"value": "h2",
|
||||
"label": "t:sections.all.heading_size.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "h1",
|
||||
"label": "t:sections.all.heading_size.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "h0",
|
||||
"label": "t:sections.all.heading_size.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "hxl",
|
||||
"label": "t:sections.all.heading_size.options__4.label"
|
||||
},
|
||||
{
|
||||
"value": "hxxl",
|
||||
"label": "t:sections.all.heading_size.options__5.label"
|
||||
}
|
||||
],
|
||||
"default": "h1",
|
||||
"label": "t:sections.all.heading_size.label"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "paragraph",
|
||||
"name": "t:sections.newsletter.blocks.paragraph.name",
|
||||
"limit": 1,
|
||||
"settings": [
|
||||
{
|
||||
"type": "richtext",
|
||||
"id": "text",
|
||||
"default": "t:sections.newsletter.blocks.paragraph.settings.paragraph.default",
|
||||
"label": "t:sections.newsletter.blocks.paragraph.settings.paragraph.label"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "email_form",
|
||||
"name": "t:sections.newsletter.blocks.email_form.name",
|
||||
"limit": 1
|
||||
},
|
||||
{
|
||||
"type": "@app"
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "t:sections.newsletter.presets.name",
|
||||
"blocks": [
|
||||
{
|
||||
"type": "heading"
|
||||
},
|
||||
{
|
||||
"type": "paragraph"
|
||||
},
|
||||
{
|
||||
"type": "email_form"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,117 @@
|
||||
{{ 'section-main-page.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
<div class="color-{{ section.settings.color_scheme }} gradient">
|
||||
<div class="page-width page-width--narrow section-{{ section.id }}-padding">
|
||||
<h2 class="page-title {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
|
||||
{%- if section.settings.page.title != blank -%}
|
||||
{{ section.settings.page.title | escape }}
|
||||
{%- else -%}
|
||||
{{ 'sections.page.title' | t }}
|
||||
{%- endif -%}
|
||||
</h2>
|
||||
<div class="rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
|
||||
{%- if section.settings.page.content != blank -%}
|
||||
{{ section.settings.page.content }}
|
||||
{%- else -%}
|
||||
<div class="page-placeholder-wrapper placeholder">
|
||||
{{ 'page' | placeholder_svg_tag: 'page-placeholder' }}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.page.name",
|
||||
"tag": "section",
|
||||
"class": "section",
|
||||
"disabled_on": {
|
||||
"groups": ["header", "footer"]
|
||||
},
|
||||
"settings": [
|
||||
{
|
||||
"type": "page",
|
||||
"id": "page",
|
||||
"label": "t:sections.page.settings.page.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "heading_size",
|
||||
"options": [
|
||||
{
|
||||
"value": "h2",
|
||||
"label": "t:sections.all.heading_size.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "h1",
|
||||
"label": "t:sections.all.heading_size.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "h0",
|
||||
"label": "t:sections.all.heading_size.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "hxl",
|
||||
"label": "t:sections.all.heading_size.options__4.label"
|
||||
},
|
||||
{
|
||||
"value": "hxxl",
|
||||
"label": "t:sections.all.heading_size.options__5.label"
|
||||
}
|
||||
],
|
||||
"default": "h1",
|
||||
"label": "t:sections.all.heading_size.label"
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"default": "scheme-1"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 36
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "t:sections.page.presets.name"
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,108 @@
|
||||
{% comment %}theme-check-disable UndefinedObject{% endcomment %}
|
||||
{%- assign pick_up_availabilities = product_variant.store_availabilities | where: 'pick_up_enabled', true -%}
|
||||
|
||||
{%- if pick_up_availabilities.size > 0 -%}
|
||||
<pickup-availability-preview class="pickup-availability-preview">
|
||||
{% assign closest_location = pick_up_availabilities.first %}
|
||||
|
||||
{% if closest_location.available %}
|
||||
<span class="svg-wrapper">{{ 'icon-tick.svg' | inline_asset_content }}</span>
|
||||
{% endif %}
|
||||
|
||||
<div class="pickup-availability-info">
|
||||
{%- if closest_location.available -%}
|
||||
<p class="caption-large">
|
||||
{{
|
||||
'products.product.pickup_availability.pick_up_available_at_html'
|
||||
| t: location_name: closest_location.location.name
|
||||
}}
|
||||
</p>
|
||||
<p class="caption">{{ closest_location.pick_up_time }}</p>
|
||||
<button
|
||||
id="ShowPickupAvailabilityDrawer"
|
||||
class="pickup-availability-button link link--text underlined-link"
|
||||
aria-haspopup="dialog"
|
||||
>
|
||||
{%- if pick_up_availabilities.size == 1 -%}
|
||||
{{ 'products.product.pickup_availability.view_store_info' | t }}
|
||||
{%- else -%}
|
||||
{{ 'products.product.pickup_availability.check_other_stores' | t }}
|
||||
{%- endif -%}
|
||||
</button>
|
||||
{%- else -%}
|
||||
<p class="caption-large">
|
||||
{{
|
||||
'products.product.pickup_availability.pick_up_unavailable_at_html'
|
||||
| t: location_name: closest_location.location.name
|
||||
}}
|
||||
</p>
|
||||
{%- if pick_up_availabilities.size > 1 -%}
|
||||
<button
|
||||
id="ShowPickupAvailabilityDrawer"
|
||||
class="pickup-availability-button link link--text underlined-link"
|
||||
aria-haspopup="dialog"
|
||||
>
|
||||
{{ 'products.product.pickup_availability.check_other_stores' | t }}
|
||||
</button>
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</pickup-availability-preview>
|
||||
|
||||
<pickup-availability-drawer
|
||||
class="gradient"
|
||||
tabindex="-1"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="PickupAvailabilityHeading"
|
||||
>
|
||||
<div class="pickup-availability-header">
|
||||
<h2 class="h3 pickup-availability-drawer-title" id="PickupAvailabilityHeading">
|
||||
{{ product_variant.product.title | escape }}
|
||||
</h2>
|
||||
<button class="pickup-availability-drawer-button" type="button" aria-label="{{ 'accessibility.close' | t }}">
|
||||
{{- 'icon-close.svg' | inline_asset_content -}}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{%- unless product_variant.product.has_only_default_variant -%}
|
||||
<p class="pickup-availability-variant">
|
||||
{%- for product_option in product_variant.product.options_with_values -%}
|
||||
{{ product_option.name | escape }}:
|
||||
{%- for value in product_option.values -%}
|
||||
{%- if product_option.selected_value == value -%}
|
||||
<span>{{ value | escape }}</span>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
{%- unless forloop.last -%}, {%- endunless -%}
|
||||
{%- endfor -%}
|
||||
</p>
|
||||
{%- endunless -%}
|
||||
|
||||
<ul class="pickup-availability-list list-unstyled" role="list" data-store-availability-drawer-content>
|
||||
{%- for availability in pick_up_availabilities -%}
|
||||
<li class="pickup-availability-list__item">
|
||||
<h3 class="h4">{{ availability.location.name | escape }}</h3>
|
||||
<p class="pickup-availability-preview caption-large">
|
||||
{%- if availability.available -%}
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-tick.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
{{ 'products.product.pickup_availability.pick_up_available' | t }},
|
||||
{{ availability.pick_up_time | downcase }}
|
||||
{%- endif -%}
|
||||
</p>
|
||||
|
||||
{%- assign address = availability.location.address -%}
|
||||
<address class="pickup-availability-address">
|
||||
{{ address | format_address }}
|
||||
|
||||
{%- if address.phone.size > 0 -%}
|
||||
<p>{{ address.phone }}</p>
|
||||
{%- endif -%}
|
||||
</address>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
</pickup-availability-drawer>
|
||||
{%- endif -%}
|
||||
@@ -0,0 +1,268 @@
|
||||
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
|
||||
<div id="predictive-search-results" role="listbox">
|
||||
{%- if predictive_search.performed -%}
|
||||
{% assign first_column_results_size = predictive_search.resources.queries.size
|
||||
| plus: predictive_search.resources.collections.size
|
||||
| plus: predictive_search.resources.pages.size
|
||||
| plus: predictive_search.resources.articles.size
|
||||
%}
|
||||
{%- if first_column_results_size > 0 or predictive_search.resources.products.size > 0 -%}
|
||||
<div
|
||||
id="predictive-search-results-groups-wrapper"
|
||||
class="predictive-search__results-groups-wrapper{% unless predictive_search.resources.products.size > 0 %} predictive-search__results-groups-wrapper--no-products{% endunless %}{% unless predictive_search.resources.queries.size > 0 or predictive_search.resources.collections.size > 0 %} predictive-search__results-groups-wrapper--no-suggestions{% endunless %}"
|
||||
>
|
||||
{%- endif -%}
|
||||
{%- if first_column_results_size > 0 -%}
|
||||
<div class="predictive-search__result-group">
|
||||
{%- endif -%}
|
||||
{%- if predictive_search.resources.queries.size > 0 or predictive_search.resources.collections.size > 0 -%}
|
||||
<div>
|
||||
<h2 id="predictive-search-queries" class="predictive-search__heading text-body caption-with-letter-spacing">
|
||||
{{- 'templates.search.suggestions' | t -}}
|
||||
</h2>
|
||||
<ul
|
||||
id="predictive-search-results-queries-list"
|
||||
class="predictive-search__results-list list-unstyled"
|
||||
role="group"
|
||||
aria-labelledby="predictive-search-queries"
|
||||
>
|
||||
{%- for query in predictive_search.resources.queries -%}
|
||||
<li
|
||||
id="predictive-search-option-query-{{ forloop.index }}"
|
||||
class="predictive-search__list-item"
|
||||
role="option"
|
||||
aria-selected="false"
|
||||
>
|
||||
<a href="{{ query.url }}" class="predictive-search__item link link--text" tabindex="-1">
|
||||
<div class="predictive-search__item-content predictive-search__item-content--centered">
|
||||
<p
|
||||
class="predictive-search__item-heading predictive-search__item-query-result h5"
|
||||
aria-label="{{ query.text }}"
|
||||
>
|
||||
{{ query.styled_text }}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
{%- for collection in predictive_search.resources.collections -%}
|
||||
<li
|
||||
id="predictive-search-option-collection-{{ forloop.index }}"
|
||||
class="predictive-search__list-item"
|
||||
role="option"
|
||||
aria-selected="false"
|
||||
>
|
||||
<a href="{{ collection.url }}" class="predictive-search__item link link--text" tabindex="-1">
|
||||
<div class="predictive-search__item-content predictive-search__item-content--centered">
|
||||
<p class="predictive-search__item-heading h5">{{ collection.title | escape }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- if predictive_search.resources.articles.size > 0 or predictive_search.resources.pages.size > 0 -%}
|
||||
<div class="predictive-search__pages-wrapper">
|
||||
<h2
|
||||
id="predictive-search-pages-desktop"
|
||||
class="predictive-search__heading text-body caption-with-letter-spacing"
|
||||
>
|
||||
{{- 'templates.search.pages' | t -}}
|
||||
</h2>
|
||||
<ul
|
||||
id="predictive-search-results-pages-list-desktop"
|
||||
class="predictive-search__results-list list-unstyled"
|
||||
role="group"
|
||||
aria-labelledby="predictive-search-pages-desktop"
|
||||
>
|
||||
{%- for page in predictive_search.resources.pages -%}
|
||||
<li
|
||||
id="predictive-search-option-page-desktop-{{ forloop.index }}"
|
||||
class="predictive-search__list-item"
|
||||
role="option"
|
||||
aria-selected="false"
|
||||
>
|
||||
<a href="{{ page.url }}" class="predictive-search__item link link--text" tabindex="-1">
|
||||
<div class="predictive-search__item-content predictive-search__item-content--centered">
|
||||
<p class="predictive-search__item-heading h5">{{ page.title | escape }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
{%- for article in predictive_search.resources.articles -%}
|
||||
<li
|
||||
id="predictive-search-option-article-desktop-{{ forloop.index }}"
|
||||
class="predictive-search__list-item"
|
||||
role="option"
|
||||
aria-selected="false"
|
||||
>
|
||||
<a href="{{ article.url }}" class="predictive-search__item link link--text" tabindex="-1">
|
||||
<div class="predictive-search__item-content predictive-search__item-content--centered">
|
||||
<p class="predictive-search__item-heading h5">{{ article.title | escape }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- if first_column_results_size > 0 -%}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- if predictive_search.resources.products.size > 0
|
||||
or predictive_search.resources.articles.size > 0
|
||||
or predictive_search.resources.pages.size > 0
|
||||
-%}
|
||||
<div class="predictive-search__result-group">
|
||||
{%- if predictive_search.resources.products.size > 0 -%}
|
||||
<div>
|
||||
<h2
|
||||
id="predictive-search-products"
|
||||
class="predictive-search__heading text-body caption-with-letter-spacing"
|
||||
>
|
||||
{{- 'templates.search.products' | t -}}
|
||||
</h2>
|
||||
<ul
|
||||
id="predictive-search-results-products-list"
|
||||
class="predictive-search__results-list list-unstyled"
|
||||
role="group"
|
||||
aria-labelledby="predictive-search-products"
|
||||
>
|
||||
{%- for product in predictive_search.resources.products -%}
|
||||
<li
|
||||
id="predictive-search-option-product-{{ forloop.index }}"
|
||||
class="predictive-search__list-item"
|
||||
role="option"
|
||||
aria-selected="false"
|
||||
>
|
||||
<product-component view-event-payload="{{ product | standard_event_data: 'view', context: 'search' | escape }}">
|
||||
<a
|
||||
href="{{ product.url }}"
|
||||
class="predictive-search__item predictive-search__item--link-with-thumbnail link link--text"
|
||||
tabindex="-1"
|
||||
>
|
||||
{%- if product.featured_media != blank -%}
|
||||
<img
|
||||
class="predictive-search__image"
|
||||
src="{{ product.featured_media | image_url: width: 150 }}"
|
||||
alt="{{ product.featured_media.alt | escape }}"
|
||||
width="50"
|
||||
height="{{ 50 | divided_by: product.featured_media.preview_image.aspect_ratio }}"
|
||||
>
|
||||
{%- endif -%}
|
||||
<div class="predictive-search__item-content{% unless settings.predictive_search_show_vendor or settings.predictive_search_show_price %} predictive-search__item-content--centered{% endunless %}">
|
||||
{%- if settings.predictive_search_show_vendor -%}
|
||||
<span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
|
||||
<div class="predictive-search__item-vendor caption-with-letter-spacing">
|
||||
{{ product.vendor }}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
<p class="predictive-search__item-heading h5">{{ product.title | escape }}</p>
|
||||
{%- if settings.predictive_search_show_price -%}
|
||||
{% render 'price', product: product, use_variant: true, show_badges: false %}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</a>
|
||||
</product-component>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- if predictive_search.resources.articles.size > 0 or predictive_search.resources.pages.size > 0 -%}
|
||||
<div class="predictive-search__pages-wrapper">
|
||||
<h2
|
||||
id="predictive-search-pages-mobile"
|
||||
class="predictive-search__heading text-body caption-with-letter-spacing"
|
||||
>
|
||||
{{- 'templates.search.pages' | t -}}
|
||||
</h2>
|
||||
<ul
|
||||
id="predictive-search-results-pages-list-mobile"
|
||||
class="predictive-search__results-list list-unstyled"
|
||||
role="group"
|
||||
aria-labelledby="predictive-search-pages-mobile"
|
||||
>
|
||||
{%- for page in predictive_search.resources.pages -%}
|
||||
<li
|
||||
id="predictive-search-option-page-mobile-{{ forloop.index }}"
|
||||
class="predictive-search__list-item"
|
||||
role="option"
|
||||
aria-selected="false"
|
||||
>
|
||||
<a href="{{ page.url }}" class="predictive-search__item link link--text" tabindex="-1">
|
||||
<div class="predictive-search__item-content predictive-search__item-content--centered">
|
||||
<p class="predictive-search__item-heading h5">{{ page.title | escape }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
{%- for article in predictive_search.resources.articles -%}
|
||||
<li
|
||||
id="predictive-search-option-article-mobile-{{ forloop.index }}"
|
||||
class="predictive-search__list-item"
|
||||
role="option"
|
||||
aria-selected="false"
|
||||
>
|
||||
<a href="{{ article.url }}" class="predictive-search__item link link--text" tabindex="-1">
|
||||
<div class="predictive-search__item-content predictive-search__item-content--centered">
|
||||
<p class="predictive-search__item-heading h5">{{ article.title | escape }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- if first_column_results_size > 0 or predictive_search.resources.products.size > 0 -%}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
|
||||
{%- render 'loading-spinner', class: 'predictive-search__loading-state' -%}
|
||||
|
||||
<div id="predictive-search-option-search-keywords" class="predictive-search__search-for-button">
|
||||
<button
|
||||
class="predictive-search__item predictive-search__item--term link link--text h5 animate-arrow"
|
||||
tabindex="-1"
|
||||
role="option"
|
||||
aria-selected="false"
|
||||
>
|
||||
<span data-predictive-search-search-for-text>
|
||||
{{- 'templates.search.search_for' | t: terms: predictive_search.terms -}}
|
||||
</span>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-arrow.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="hidden"
|
||||
data-predictive-search-live-region-count-value
|
||||
data-total-results="{{ predictive_search.resources.products.size | plus: first_column_results_size }}"
|
||||
>
|
||||
{% liquid
|
||||
assign total_results = predictive_search.resources.products.size | plus: first_column_results_size
|
||||
if total_results == 0
|
||||
echo 'templates.search.no_results' | t: terms: predictive_search.terms
|
||||
else
|
||||
echo 'templates.search.results_with_count' | t: count: total_results | append: ': '
|
||||
if predictive_search.resources.queries.size > 0
|
||||
assign count = predictive_search.resources.queries.size | plus: predictive_search.resources.collections.size
|
||||
echo 'templates.search.results_suggestions_with_count' | t: count: count | append: ', '
|
||||
endif
|
||||
if predictive_search.resources.pages.size > 0
|
||||
assign count = predictive_search.resources.pages.size | plus: predictive_search.resources.articles.size
|
||||
echo 'templates.search.results_pages_with_count' | t: count: count | append: ', '
|
||||
endif
|
||||
if predictive_search.resources.products.size > 0
|
||||
echo 'templates.search.results_products_with_count' | t: count: predictive_search.resources.products.size
|
||||
endif
|
||||
endif
|
||||
%}
|
||||
</span>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
@@ -0,0 +1,95 @@
|
||||
{{ 'component-price.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'quick-order-list.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'quantity-popover.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
<script src="{{ 'quantity-popover.js' | asset_url }}" defer="defer"></script>
|
||||
<script src="{{ 'price-per-item.js' | asset_url }}" defer="defer"></script>
|
||||
<script src="{{ 'quick-order-list.js' | asset_url }}" defer="defer"></script>
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
{% render 'quick-order-list',
|
||||
product: product,
|
||||
show_image: section.settings.show_image,
|
||||
show_sku: section.settings.show_sku
|
||||
%}
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.quick-order-list.name",
|
||||
"limit": 1,
|
||||
"enabled_on": {
|
||||
"templates": ["product"]
|
||||
},
|
||||
"settings": [
|
||||
{
|
||||
"type": "range",
|
||||
"id": "variants_per_page",
|
||||
"min": 5,
|
||||
"max": 50,
|
||||
"step": 1,
|
||||
"default": 50,
|
||||
"label": "t:sections.quick-order-list.settings.variants_per_page.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_image",
|
||||
"default": false,
|
||||
"label": "t:sections.quick-order-list.settings.show_image.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_sku",
|
||||
"default": false,
|
||||
"label": "t:sections.quick-order-list.settings.show_sku.label"
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"default": "scheme-1"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 36
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "t:sections.quick-order-list.presets.name"
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,256 @@
|
||||
{{ 'component-card.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-price.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'section-related-products.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{% if section.settings.image_shape == 'blob' %}
|
||||
{{ 'mask-blobs.css' | asset_url | stylesheet_tag }}
|
||||
{%- endif -%}
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
<div class="color-{{ section.settings.color_scheme }} gradient">
|
||||
<product-recommendations
|
||||
class="related-products page-width section-{{ section.id }}-padding isolate{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
data-url="{{ routes.product_recommendations_url }}?limit={{ section.settings.products_to_show }}"
|
||||
data-section-id="{{ section.id }}"
|
||||
data-product-id="{{ product.id }}"
|
||||
>
|
||||
{% if recommendations.performed and recommendations.products_count > 0 %}
|
||||
<h2 class="related-products__heading inline-richtext {{ section.settings.heading_size }}">
|
||||
{{ section.settings.heading }}
|
||||
</h2>
|
||||
<ul
|
||||
class="grid product-grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down"
|
||||
role="list"
|
||||
>
|
||||
{% assign skip_card_product_styles = false %}
|
||||
{% for recommendation in recommendations.products %}
|
||||
<li class="grid__item">
|
||||
{% render 'card-product',
|
||||
card_product: recommendation,
|
||||
media_aspect_ratio: section.settings.image_ratio,
|
||||
image_shape: section.settings.image_shape,
|
||||
show_secondary_image: section.settings.show_secondary_image,
|
||||
show_vendor: section.settings.show_vendor,
|
||||
show_rating: section.settings.show_rating,
|
||||
skip_styles: skip_card_product_styles,
|
||||
product_view_context: 'recommendation'
|
||||
%}
|
||||
</li>
|
||||
{%- assign skip_card_product_styles = true -%}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</product-recommendations>
|
||||
{% if section.settings.image_shape == 'arch' %}
|
||||
{{ 'mask-arch.svg' | inline_asset_content }}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.related-products.name",
|
||||
"tag": "section",
|
||||
"class": "section",
|
||||
"settings": [
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": "t:sections.related-products.settings.paragraph__1.content"
|
||||
},
|
||||
{
|
||||
"type": "inline_richtext",
|
||||
"id": "heading",
|
||||
"default": "t:sections.related-products.settings.paragraph__1.default",
|
||||
"label": "t:sections.related-products.settings.heading.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "heading_size",
|
||||
"options": [
|
||||
{
|
||||
"value": "h2",
|
||||
"label": "t:sections.all.heading_size.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "h1",
|
||||
"label": "t:sections.all.heading_size.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "h0",
|
||||
"label": "t:sections.all.heading_size.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "hxl",
|
||||
"label": "t:sections.all.heading_size.options__4.label"
|
||||
},
|
||||
{
|
||||
"value": "hxxl",
|
||||
"label": "t:sections.all.heading_size.options__5.label"
|
||||
}
|
||||
],
|
||||
"default": "h1",
|
||||
"label": "t:sections.all.heading_size.label"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "products_to_show",
|
||||
"min": 2,
|
||||
"max": 10,
|
||||
"step": 1,
|
||||
"default": 4,
|
||||
"label": "t:sections.related-products.settings.products_to_show.label"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "columns_desktop",
|
||||
"min": 1,
|
||||
"max": 6,
|
||||
"step": 1,
|
||||
"default": 4,
|
||||
"label": "t:sections.related-products.settings.columns_desktop.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "columns_mobile",
|
||||
"default": "2",
|
||||
"label": "t:sections.related-products.settings.columns_mobile.label",
|
||||
"options": [
|
||||
{
|
||||
"value": "1",
|
||||
"label": "t:sections.related-products.settings.columns_mobile.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "2",
|
||||
"label": "t:sections.related-products.settings.columns_mobile.options__2.label"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"info": "t:sections.all.colors.has_cards_info",
|
||||
"default": "scheme-1"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.related-products.settings.header__2.content"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "image_ratio",
|
||||
"options": [
|
||||
{
|
||||
"value": "adapt",
|
||||
"label": "t:sections.related-products.settings.image_ratio.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "portrait",
|
||||
"label": "t:sections.related-products.settings.image_ratio.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "square",
|
||||
"label": "t:sections.related-products.settings.image_ratio.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "adapt",
|
||||
"label": "t:sections.related-products.settings.image_ratio.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "image_shape",
|
||||
"options": [
|
||||
{
|
||||
"value": "default",
|
||||
"label": "t:sections.all.image_shape.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "arch",
|
||||
"label": "t:sections.all.image_shape.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "blob",
|
||||
"label": "t:sections.all.image_shape.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "chevronleft",
|
||||
"label": "t:sections.all.image_shape.options__4.label"
|
||||
},
|
||||
{
|
||||
"value": "chevronright",
|
||||
"label": "t:sections.all.image_shape.options__5.label"
|
||||
},
|
||||
{
|
||||
"value": "diamond",
|
||||
"label": "t:sections.all.image_shape.options__6.label"
|
||||
},
|
||||
{
|
||||
"value": "parallelogram",
|
||||
"label": "t:sections.all.image_shape.options__7.label"
|
||||
},
|
||||
{
|
||||
"value": "round",
|
||||
"label": "t:sections.all.image_shape.options__8.label"
|
||||
}
|
||||
],
|
||||
"default": "default",
|
||||
"label": "t:sections.all.image_shape.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_secondary_image",
|
||||
"default": false,
|
||||
"label": "t:sections.related-products.settings.show_secondary_image.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_vendor",
|
||||
"default": false,
|
||||
"label": "t:sections.related-products.settings.show_vendor.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_rating",
|
||||
"default": false,
|
||||
"label": "t:sections.related-products.settings.show_rating.label",
|
||||
"info": "t:sections.related-products.settings.show_rating.info"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 36
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,355 @@
|
||||
{{ 'section-rich-text.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
<div class="isolate{% unless section.settings.full_width %} page-width{% endunless %}">
|
||||
<div class="rich-text content-container color-{{ section.settings.color_scheme }} gradient{% if section.settings.full_width %} rich-text--full-width content-container--full-width{% endif %} section-{{ section.id }}-padding">
|
||||
<div class="rich-text__wrapper rich-text__wrapper--{{ section.settings.desktop_content_position }}{% if section.settings.full_width %} page-width{% endif %}">
|
||||
<div class="rich-text__blocks {{ section.settings.content_alignment }}">
|
||||
{%- for block in section.blocks -%}
|
||||
{%- case block.type -%}
|
||||
{%- when 'heading' -%}
|
||||
<h2
|
||||
class="rich-text__heading rte inline-richtext {{ block.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{{ block.shopify_attributes }}
|
||||
{% if settings.animations_reveal_on_scroll %}
|
||||
data-cascade
|
||||
style="--animation-order: {{ forloop.index }};"
|
||||
{% endif %}
|
||||
>
|
||||
{{ block.settings.heading }}
|
||||
</h2>
|
||||
{%- when 'caption' -%}
|
||||
<p
|
||||
class="rich-text__caption {{ block.settings.text_style }} {{ block.settings.text_style }}--{{ block.settings.text_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{{ block.shopify_attributes }}
|
||||
{% if settings.animations_reveal_on_scroll %}
|
||||
data-cascade
|
||||
style="--animation-order: {{ forloop.index }};"
|
||||
{% endif %}
|
||||
>
|
||||
{{ block.settings.caption | escape }}
|
||||
</p>
|
||||
{%- when 'text' -%}
|
||||
<div
|
||||
class="rich-text__text rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{{ block.shopify_attributes }}
|
||||
{% if settings.animations_reveal_on_scroll %}
|
||||
data-cascade
|
||||
style="--animation-order: {{ forloop.index }};"
|
||||
{% endif %}
|
||||
>
|
||||
{{ block.settings.text }}
|
||||
</div>
|
||||
{%- when 'button' -%}
|
||||
<div
|
||||
class="rich-text__buttons{% if block.settings.button_label != blank and block.settings.button_label_2 != blank %} rich-text__buttons--multiple{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
{{ block.shopify_attributes }}
|
||||
{% if settings.animations_reveal_on_scroll %}
|
||||
data-cascade
|
||||
style="--animation-order: {{ forloop.index }};"
|
||||
{% endif %}
|
||||
>
|
||||
{%- if block.settings.button_label != blank -%}
|
||||
<a
|
||||
{% if block.settings.button_link == blank %}
|
||||
role="link" aria-disabled="true"
|
||||
{% else %}
|
||||
href="{{ block.settings.button_link }}"
|
||||
{% endif %}
|
||||
class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"
|
||||
>
|
||||
{{- block.settings.button_label | escape -}}
|
||||
</a>
|
||||
{%- endif -%}
|
||||
{%- if block.settings.button_label_2 != blank -%}
|
||||
<a
|
||||
{% if block.settings.button_link_2 == blank %}
|
||||
role="link" aria-disabled="true"
|
||||
{% else %}
|
||||
href="{{ block.settings.button_link_2 }}"
|
||||
{% endif %}
|
||||
class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}"
|
||||
>
|
||||
{{- block.settings.button_label_2 | escape -}}
|
||||
</a>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- endcase -%}
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.rich-text.name",
|
||||
"tag": "section",
|
||||
"class": "section",
|
||||
"disabled_on": {
|
||||
"groups": ["header", "footer"]
|
||||
},
|
||||
"settings": [
|
||||
{
|
||||
"type": "select",
|
||||
"id": "desktop_content_position",
|
||||
"options": [
|
||||
{
|
||||
"value": "left",
|
||||
"label": "t:sections.rich-text.settings.desktop_content_position.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "center",
|
||||
"label": "t:sections.rich-text.settings.desktop_content_position.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "right",
|
||||
"label": "t:sections.rich-text.settings.desktop_content_position.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "center",
|
||||
"label": "t:sections.rich-text.settings.desktop_content_position.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "content_alignment",
|
||||
"options": [
|
||||
{
|
||||
"value": "left",
|
||||
"label": "t:sections.rich-text.settings.content_alignment.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "center",
|
||||
"label": "t:sections.rich-text.settings.content_alignment.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "right",
|
||||
"label": "t:sections.rich-text.settings.content_alignment.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "center",
|
||||
"label": "t:sections.rich-text.settings.content_alignment.label"
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"default": "scheme-1"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "full_width",
|
||||
"default": true,
|
||||
"label": "t:sections.rich-text.settings.full_width.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 40
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 52
|
||||
}
|
||||
],
|
||||
"blocks": [
|
||||
{
|
||||
"type": "heading",
|
||||
"name": "t:sections.rich-text.blocks.heading.name",
|
||||
"limit": 3,
|
||||
"settings": [
|
||||
{
|
||||
"type": "inline_richtext",
|
||||
"id": "heading",
|
||||
"default": "t:sections.rich-text.blocks.heading.settings.heading.default",
|
||||
"label": "t:sections.rich-text.blocks.heading.settings.heading.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "heading_size",
|
||||
"options": [
|
||||
{
|
||||
"value": "h2",
|
||||
"label": "t:sections.all.heading_size.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "h1",
|
||||
"label": "t:sections.all.heading_size.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "h0",
|
||||
"label": "t:sections.all.heading_size.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "hxl",
|
||||
"label": "t:sections.all.heading_size.options__4.label"
|
||||
},
|
||||
{
|
||||
"value": "hxxl",
|
||||
"label": "t:sections.all.heading_size.options__5.label"
|
||||
}
|
||||
],
|
||||
"default": "h1",
|
||||
"label": "t:sections.all.heading_size.label"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "caption",
|
||||
"name": "t:sections.rich-text.blocks.caption.name",
|
||||
"limit": 3,
|
||||
"settings": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "caption",
|
||||
"default": "t:sections.rich-text.blocks.caption.settings.text.default",
|
||||
"label": "t:sections.rich-text.blocks.caption.settings.text.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "text_style",
|
||||
"options": [
|
||||
{
|
||||
"value": "subtitle",
|
||||
"label": "t:sections.rich-text.blocks.caption.settings.text_style.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "caption-with-letter-spacing",
|
||||
"label": "t:sections.rich-text.blocks.caption.settings.text_style.options__2.label"
|
||||
}
|
||||
],
|
||||
"default": "caption-with-letter-spacing",
|
||||
"label": "t:sections.rich-text.blocks.caption.settings.text_style.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "text_size",
|
||||
"options": [
|
||||
{
|
||||
"value": "small",
|
||||
"label": "t:sections.rich-text.blocks.caption.settings.caption_size.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "medium",
|
||||
"label": "t:sections.rich-text.blocks.caption.settings.caption_size.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "large",
|
||||
"label": "t:sections.rich-text.blocks.caption.settings.caption_size.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "medium",
|
||||
"label": "t:sections.rich-text.blocks.caption.settings.caption_size.label"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"name": "t:sections.rich-text.blocks.text.name",
|
||||
"limit": 3,
|
||||
"settings": [
|
||||
{
|
||||
"type": "richtext",
|
||||
"id": "text",
|
||||
"default": "t:sections.rich-text.blocks.text.settings.text.default",
|
||||
"label": "t:sections.rich-text.blocks.text.settings.text.label"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"name": "t:sections.rich-text.blocks.buttons.name",
|
||||
"limit": 2,
|
||||
"settings": [
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.rich-text.blocks.buttons.settings.header_button1.content"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "button_label",
|
||||
"default": "t:sections.rich-text.blocks.buttons.settings.button_label_1.default",
|
||||
"label": "t:sections.rich-text.blocks.buttons.settings.button_label_1.label",
|
||||
"info": "t:sections.rich-text.blocks.buttons.settings.button_label_1.info"
|
||||
},
|
||||
{
|
||||
"type": "url",
|
||||
"id": "button_link",
|
||||
"label": "t:sections.rich-text.blocks.buttons.settings.button_link_1.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "button_style_secondary",
|
||||
"default": false,
|
||||
"label": "t:sections.rich-text.blocks.buttons.settings.button_style_secondary_1.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.rich-text.blocks.buttons.settings.header_button2.content"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "button_label_2",
|
||||
"label": "t:sections.rich-text.blocks.buttons.settings.button_label_2.label",
|
||||
"info": "t:sections.rich-text.blocks.buttons.settings.button_label_2.info"
|
||||
},
|
||||
{
|
||||
"type": "url",
|
||||
"id": "button_link_2",
|
||||
"label": "t:sections.rich-text.blocks.buttons.settings.button_link_2.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "button_style_secondary_2",
|
||||
"default": false,
|
||||
"label": "t:sections.rich-text.blocks.buttons.settings.button_style_secondary_2.label"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "t:sections.rich-text.presets.name",
|
||||
"blocks": [
|
||||
{
|
||||
"type": "heading"
|
||||
},
|
||||
{
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"type": "button"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,591 @@
|
||||
{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-slideshow.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- if section.settings.slide_height == 'adapt_image' and section.blocks.first.settings.image != blank -%}
|
||||
{%- style -%}
|
||||
@media screen and (max-width: 749px) {
|
||||
#Slider-{{ section.id }}::before,
|
||||
#Slider-{{ section.id }} .media::before,
|
||||
#Slider-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
|
||||
padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
#Slider-{{ section.id }}::before,
|
||||
#Slider-{{ section.id }} .media::before {
|
||||
padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
{%- endif -%}
|
||||
|
||||
<slideshow-component
|
||||
class="slider-mobile-gutter{% if section.settings.layout == 'grid' %} page-width{% endif %}{% if section.settings.show_text_below %} mobile-text-below{% endif %}"
|
||||
role="region"
|
||||
aria-roledescription="{{ 'sections.slideshow.carousel' | t }}"
|
||||
aria-label="{{ section.settings.accessibility_info | escape }}"
|
||||
>
|
||||
{%- if section.settings.auto_rotate and section.blocks.size > 1 -%}
|
||||
<div class="slideshow__controls slideshow__controls--top slider-buttons{% if section.settings.show_text_below %} slideshow__controls--border-radius-mobile{% endif %}">
|
||||
<button
|
||||
type="button"
|
||||
class="slider-button slider-button--prev"
|
||||
name="previous"
|
||||
aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"
|
||||
aria-controls="Slider-{{ section.id }}"
|
||||
>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-caret.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</button>
|
||||
<div class="slider-counter slider-counter--{{ section.settings.slider_visual }}{% if section.settings.slider_visual == 'counter' or section.settings.slider_visual == 'numbers' %} caption{% endif %}">
|
||||
{%- if section.settings.slider_visual == 'counter' -%}
|
||||
<span class="slider-counter--current">1</span>
|
||||
<span aria-hidden="true"> / </span>
|
||||
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
|
||||
<span class="slider-counter--total">{{ section.blocks.size }}</span>
|
||||
{%- else -%}
|
||||
<div class="slideshow__control-wrapper">
|
||||
{%- for block in section.blocks -%}
|
||||
<button
|
||||
class="slider-counter__link slider-counter__link--{{ section.settings.slider_visual }} link"
|
||||
aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
|
||||
aria-controls="Slider-{{ section.id }}"
|
||||
>
|
||||
{%- if section.settings.slider_visual == 'numbers' -%}
|
||||
{{ forloop.index -}}
|
||||
{%- else -%}
|
||||
<span class="dot"></span>
|
||||
{%- endif -%}
|
||||
</button>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="slider-button slider-button--next"
|
||||
name="next"
|
||||
aria-label="{{ 'sections.slideshow.next_slideshow' | t }}"
|
||||
aria-controls="Slider-{{ section.id }}"
|
||||
>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-caret.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{%- if section.settings.auto_rotate -%}
|
||||
<button
|
||||
type="button"
|
||||
class="slideshow__autoplay slider-button{% if section.settings.auto_rotate == false %} slideshow__autoplay--paused{% endif %}"
|
||||
aria-label="{{ 'sections.slideshow.pause_slideshow' | t }}"
|
||||
>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-pause.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-play.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</button>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
|
||||
<div
|
||||
class="slideshow banner banner--{{ section.settings.slide_height }} grid grid--1-col slider slider--everywhere{% if section.settings.show_text_below %} banner--mobile-bottom{% endif %}{% if section.blocks.first.settings.image == blank %} slideshow--placeholder{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
|
||||
id="Slider-{{ section.id }}"
|
||||
aria-live="polite"
|
||||
aria-atomic="true"
|
||||
data-autoplay="{{ section.settings.auto_rotate }}"
|
||||
data-speed="{{ section.settings.change_slides_speed }}"
|
||||
>
|
||||
{%- for block in section.blocks -%}
|
||||
<style>
|
||||
#Slide-{{ section.id }}-{{ forloop.index }} .banner__media::after {
|
||||
opacity: {{ block.settings.image_overlay_opacity | divided_by: 100.0 }};
|
||||
}
|
||||
</style>
|
||||
<div
|
||||
class="slideshow__slide grid__item grid--1-col slider__slide"
|
||||
id="Slide-{{ section.id }}-{{ forloop.index }}"
|
||||
{{ block.shopify_attributes }}
|
||||
role="group"
|
||||
aria-roledescription="{{ 'sections.slideshow.slide' | t }}"
|
||||
aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div class="slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}">
|
||||
{%- if block.settings.image -%}
|
||||
{%- liquid
|
||||
assign height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round
|
||||
if section.settings.image_behavior == 'ambient'
|
||||
assign sizes = '120vw'
|
||||
assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
|
||||
else
|
||||
assign sizes = '100vw'
|
||||
assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
|
||||
endif
|
||||
assign fetch_priority = 'auto'
|
||||
if section.index == 1
|
||||
assign fetch_priority = 'high'
|
||||
endif
|
||||
-%}
|
||||
{%- if forloop.first %}
|
||||
{{
|
||||
block.settings.image
|
||||
| image_url: width: 3840
|
||||
| image_tag: height: height, sizes: sizes, widths: widths, fetchpriority: fetch_priority
|
||||
}}
|
||||
{%- else -%}
|
||||
{{
|
||||
block.settings.image
|
||||
| image_url: width: 3840
|
||||
| image_tag: loading: 'lazy', height: height, sizes: sizes, widths: widths
|
||||
}}
|
||||
{%- endif -%}
|
||||
{%- else -%}
|
||||
{%- assign placeholder_slide = forloop.index | modulo: 2 -%}
|
||||
{%- if placeholder_slide == 1 -%}
|
||||
{{ 'hero-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }}
|
||||
{%- else -%}
|
||||
{{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
<div class="slideshow__text-wrapper banner__content banner__content--{{ block.settings.box_align }} page-width{% if block.settings.show_text_box == false %} banner--desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll and forloop.index == 1 %} scroll-trigger animate--slide-in{% endif %}">
|
||||
<div class="slideshow__text banner__box content-container content-container--full-width-mobile color-{{ block.settings.color_scheme }} gradient slideshow__text--{{ block.settings.text_alignment }} slideshow__text-mobile--{{ block.settings.text_alignment_mobile }}">
|
||||
{%- if block.settings.heading != blank -%}
|
||||
<h2 class="banner__heading inline-richtext {{ block.settings.heading_size }}">
|
||||
{{ block.settings.heading }}
|
||||
</h2>
|
||||
{%- endif -%}
|
||||
{%- if block.settings.subheading != blank -%}
|
||||
<div class="banner__text rte">
|
||||
<p>{{ block.settings.subheading }}</p>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- if block.settings.button_label != blank -%}
|
||||
<div class="banner__buttons">
|
||||
<a
|
||||
{% if block.settings.link %}
|
||||
href="{{ block.settings.link }}"
|
||||
{% else %}
|
||||
role="link" aria-disabled="true"
|
||||
{% endif %}
|
||||
class="button {% if block.settings.button_style_secondary %}button--secondary{% else %}button--primary{% endif %}"
|
||||
>
|
||||
{{- block.settings.button_label | escape -}}
|
||||
</a>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
|
||||
{%- if section.blocks.size > 1 and section.settings.auto_rotate == false -%}
|
||||
<div class="slideshow__controls slider-buttons{% if section.settings.show_text_below %} slideshow__controls--border-radius-mobile{% endif %}">
|
||||
<button
|
||||
type="button"
|
||||
class="slider-button slider-button--prev"
|
||||
name="previous"
|
||||
aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"
|
||||
aria-controls="Slider-{{ section.id }}"
|
||||
>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-caret.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</button>
|
||||
<div class="slider-counter slider-counter--{{ section.settings.slider_visual }}{% if section.settings.slider_visual == 'counter' or section.settings.slider_visual == 'numbers' %} caption{% endif %}">
|
||||
{%- if section.settings.slider_visual == 'counter' -%}
|
||||
<span class="slider-counter--current">1</span>
|
||||
<span aria-hidden="true"> / </span>
|
||||
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
|
||||
<span class="slider-counter--total">{{ section.blocks.size }}</span>
|
||||
{%- else -%}
|
||||
<div class="slideshow__control-wrapper">
|
||||
{%- for block in section.blocks -%}
|
||||
<button
|
||||
class="slider-counter__link slider-counter__link--{{ section.settings.slider_visual }} link"
|
||||
aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
|
||||
aria-controls="Slider-{{ section.id }}"
|
||||
>
|
||||
{%- if section.settings.slider_visual == 'numbers' -%}
|
||||
{{ forloop.index -}}
|
||||
{%- else -%}
|
||||
<span class="dot"></span>
|
||||
{%- endif -%}
|
||||
</button>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="slider-button slider-button--next"
|
||||
name="next"
|
||||
aria-label="{{ 'sections.slideshow.next_slideshow' | t }}"
|
||||
aria-controls="Slider-{{ section.id }}"
|
||||
>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-caret.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{%- if section.settings.auto_rotate -%}
|
||||
<button
|
||||
type="button"
|
||||
class="slideshow__autoplay slider-button{% if section.settings.auto_rotate == false %} slideshow__autoplay--paused{% endif %}"
|
||||
aria-label="{{ 'sections.slideshow.pause_slideshow' | t }}"
|
||||
>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-pause.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-play.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</button>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</slideshow-component>
|
||||
|
||||
{%- if request.design_mode -%}
|
||||
<script src="{{ 'theme-editor.js' | asset_url }}" defer="defer"></script>
|
||||
{%- endif -%}
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.slideshow.name",
|
||||
"tag": "section",
|
||||
"class": "section",
|
||||
"disabled_on": {
|
||||
"groups": ["header", "footer"]
|
||||
},
|
||||
"settings": [
|
||||
{
|
||||
"type": "select",
|
||||
"id": "layout",
|
||||
"options": [
|
||||
{
|
||||
"value": "full_bleed",
|
||||
"label": "t:sections.slideshow.settings.layout.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "grid",
|
||||
"label": "t:sections.slideshow.settings.layout.options__2.label"
|
||||
}
|
||||
],
|
||||
"default": "full_bleed",
|
||||
"label": "t:sections.slideshow.settings.layout.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "slide_height",
|
||||
"options": [
|
||||
{
|
||||
"value": "adapt_image",
|
||||
"label": "t:sections.slideshow.settings.slide_height.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "small",
|
||||
"label": "t:sections.slideshow.settings.slide_height.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "medium",
|
||||
"label": "t:sections.slideshow.settings.slide_height.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "large",
|
||||
"label": "t:sections.slideshow.settings.slide_height.options__4.label"
|
||||
}
|
||||
],
|
||||
"default": "medium",
|
||||
"label": "t:sections.slideshow.settings.slide_height.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "slider_visual",
|
||||
"options": [
|
||||
{
|
||||
"value": "dots",
|
||||
"label": "t:sections.slideshow.settings.slider_visual.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "counter",
|
||||
"label": "t:sections.slideshow.settings.slider_visual.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "numbers",
|
||||
"label": "t:sections.slideshow.settings.slider_visual.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "counter",
|
||||
"label": "t:sections.slideshow.settings.slider_visual.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "auto_rotate",
|
||||
"label": "t:sections.slideshow.settings.auto_rotate.label",
|
||||
"default": false
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "change_slides_speed",
|
||||
"min": 3,
|
||||
"max": 9,
|
||||
"step": 2,
|
||||
"unit": "s",
|
||||
"label": "t:sections.slideshow.settings.change_slides_speed.label",
|
||||
"default": 5
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "image_behavior",
|
||||
"options": [
|
||||
{
|
||||
"value": "none",
|
||||
"label": "t:sections.all.animation.image_behavior.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "ambient",
|
||||
"label": "t:sections.all.animation.image_behavior.options__2.label"
|
||||
}
|
||||
],
|
||||
"default": "none",
|
||||
"label": "t:sections.all.animation.image_behavior.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.slideshow.settings.mobile.content"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_text_below",
|
||||
"label": "t:sections.slideshow.settings.show_text_below.label",
|
||||
"default": true
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.slideshow.settings.accessibility.content"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "accessibility_info",
|
||||
"label": "t:sections.slideshow.settings.accessibility.label",
|
||||
"info": "t:sections.slideshow.settings.accessibility.info",
|
||||
"default": "t:sections.slideshow.settings.accessibility.default"
|
||||
}
|
||||
],
|
||||
"blocks": [
|
||||
{
|
||||
"type": "slide",
|
||||
"name": "t:sections.slideshow.blocks.slide.name",
|
||||
"limit": 5,
|
||||
"settings": [
|
||||
{
|
||||
"type": "image_picker",
|
||||
"id": "image",
|
||||
"label": "t:sections.slideshow.blocks.slide.settings.image.label"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "image_overlay_opacity",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 10,
|
||||
"unit": "%",
|
||||
"label": "t:sections.slideshow.blocks.slide.settings.image_overlay_opacity.label",
|
||||
"default": 0
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.slideshow.blocks.slide.settings.header_text.content"
|
||||
},
|
||||
{
|
||||
"type": "inline_richtext",
|
||||
"id": "heading",
|
||||
"default": "t:sections.slideshow.blocks.slide.settings.heading.default",
|
||||
"label": "t:sections.slideshow.blocks.slide.settings.heading.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "heading_size",
|
||||
"options": [
|
||||
{
|
||||
"value": "h2",
|
||||
"label": "t:sections.all.heading_size.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "h1",
|
||||
"label": "t:sections.all.heading_size.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "h0",
|
||||
"label": "t:sections.all.heading_size.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "hxl",
|
||||
"label": "t:sections.all.heading_size.options__4.label"
|
||||
},
|
||||
{
|
||||
"value": "hxxl",
|
||||
"label": "t:sections.all.heading_size.options__5.label"
|
||||
}
|
||||
],
|
||||
"default": "h1",
|
||||
"label": "t:sections.all.heading_size.label"
|
||||
},
|
||||
{
|
||||
"type": "inline_richtext",
|
||||
"id": "subheading",
|
||||
"default": "t:sections.slideshow.blocks.slide.settings.subheading.default",
|
||||
"label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.slideshow.blocks.slide.settings.header_button.content"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "button_label",
|
||||
"default": "t:sections.slideshow.blocks.slide.settings.button_label.default",
|
||||
"label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
|
||||
"info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
|
||||
},
|
||||
{
|
||||
"type": "url",
|
||||
"id": "link",
|
||||
"label": "t:sections.slideshow.blocks.slide.settings.link.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "button_style_secondary",
|
||||
"label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
|
||||
"default": false
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.slideshow.blocks.slide.settings.header_layout.content"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "show_text_box",
|
||||
"label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
|
||||
"default": true
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "box_align",
|
||||
"options": [
|
||||
{
|
||||
"value": "top-left",
|
||||
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "top-center",
|
||||
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "top-right",
|
||||
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "middle-left",
|
||||
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__4.label"
|
||||
},
|
||||
{
|
||||
"value": "middle-center",
|
||||
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__5.label"
|
||||
},
|
||||
{
|
||||
"value": "middle-right",
|
||||
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__6.label"
|
||||
},
|
||||
{
|
||||
"value": "bottom-left",
|
||||
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__7.label"
|
||||
},
|
||||
{
|
||||
"value": "bottom-center",
|
||||
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__8.label"
|
||||
},
|
||||
{
|
||||
"value": "bottom-right",
|
||||
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__9.label"
|
||||
}
|
||||
],
|
||||
"default": "middle-center",
|
||||
"label": "t:sections.slideshow.blocks.slide.settings.box_align.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "text_alignment",
|
||||
"options": [
|
||||
{
|
||||
"value": "left",
|
||||
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_1.label"
|
||||
},
|
||||
{
|
||||
"value": "center",
|
||||
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_2.label"
|
||||
},
|
||||
{
|
||||
"value": "right",
|
||||
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_3.label"
|
||||
}
|
||||
],
|
||||
"default": "center",
|
||||
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "text_alignment_mobile",
|
||||
"options": [
|
||||
{
|
||||
"value": "left",
|
||||
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "center",
|
||||
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "right",
|
||||
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__3.label"
|
||||
}
|
||||
],
|
||||
"default": "center",
|
||||
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.label"
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"default": "scheme-1"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "t:sections.slideshow.presets.name",
|
||||
"blocks": [
|
||||
{
|
||||
"type": "slide"
|
||||
},
|
||||
{
|
||||
"type": "slide"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,255 @@
|
||||
{{ 'video-section.css' | asset_url | stylesheet_tag }}
|
||||
{{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}
|
||||
|
||||
{%- style -%}
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.section-{{ section.id }}-padding {
|
||||
padding-top: {{ section.settings.padding_top }}px;
|
||||
padding-bottom: {{ section.settings.padding_bottom }}px;
|
||||
}
|
||||
}
|
||||
{%- endstyle -%}
|
||||
|
||||
{%- liquid
|
||||
assign video_id = section.settings.video.id | default: section.settings.video_url.id
|
||||
assign video_alt = section.settings.video.alt | default: section.settings.description
|
||||
assign alt = 'sections.video.load_video' | t: description: video_alt | escape
|
||||
assign poster = section.settings.video.preview_image | default: section.settings.cover_image
|
||||
|
||||
if section.settings.video != null
|
||||
assign ratio_diff = section.settings.video.aspect_ratio | minus: poster.aspect_ratio | abs
|
||||
if ratio_diff < 0.01 and ratio_diff > 0
|
||||
assign fix_ratio = true
|
||||
endif
|
||||
endif
|
||||
-%}
|
||||
|
||||
{%- capture sizes -%}
|
||||
{% if section.settings.full_width -%}
|
||||
100vw
|
||||
{%- else -%}
|
||||
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px)
|
||||
calc(100vw - 10rem), 100vw
|
||||
{%- endif %}
|
||||
{%- endcapture -%}
|
||||
|
||||
<div class="color-{{ section.settings.color_scheme }} gradient">
|
||||
<div class="video-section isolate{% unless section.settings.full_width %} page-width{% endunless %} section-{{ section.id }}-padding">
|
||||
<div
|
||||
{% if section.settings.full_width %}
|
||||
class="page-width"
|
||||
{% endif %}
|
||||
>
|
||||
{%- unless section.settings.heading == blank -%}
|
||||
<div class="title-wrapper title-wrapper--no-top-margin{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
|
||||
<h2 class="title inline-richtext {{ section.settings.heading_size }}">{{ section.settings.heading }}</h2>
|
||||
</div>
|
||||
{%- endunless -%}
|
||||
</div>
|
||||
<deferred-media
|
||||
class="video-section__media deferred-media gradient global-media-settings{% if section.settings.full_width %} global-media-settings--full-width{% endif %}{% if fix_ratio %} media-fit-cover{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
|
||||
data-media-id="{{ video_id }}"
|
||||
{% if poster != null %}
|
||||
style="--ratio-percent: {{ 1 | divided_by: poster.aspect_ratio | times: 100 }}%;"
|
||||
{% endif %}
|
||||
>
|
||||
<button
|
||||
id="Deferred-Poster-Modal-{{ video_id }}"
|
||||
class="video-section__poster media deferred-media__poster media--landscape"
|
||||
type="button"
|
||||
aria-label="{{ alt }}"
|
||||
>
|
||||
{%- if poster != null -%}
|
||||
{{
|
||||
poster
|
||||
| image_url: width: 3840
|
||||
| image_tag: sizes: sizes, widths: '375, 750, 1100, 1500, 1780, 2000, 3000, 3840', alt: alt
|
||||
}}
|
||||
{%- else -%}
|
||||
{{ 'hero-apparel-3' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
|
||||
{%- endif -%}
|
||||
<span class="deferred-media__poster-button motion-reduce">
|
||||
<span class="svg-wrapper">
|
||||
{{- 'icon-play.svg' | inline_asset_content -}}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<template>
|
||||
{%- if section.settings.video == null and section.settings.video_url != null -%}
|
||||
{%- liquid
|
||||
assign loop = ''
|
||||
if section.settings.enable_video_looping
|
||||
assign loop = '&loop=1&playlist=' | append: video_id
|
||||
endif
|
||||
-%}
|
||||
{%- if section.settings.video_url.type == 'youtube' -%}
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/{{ video_id }}?enablejsapi=1&autoplay=1{{ loop }}"
|
||||
class="js-youtube"
|
||||
allow="autoplay; encrypted-media"
|
||||
allowfullscreen
|
||||
title="{{ section.settings.description | escape }}"
|
||||
></iframe>
|
||||
{%- else -%}
|
||||
<iframe
|
||||
src="https://player.vimeo.com/video/{{ video_id }}?autoplay=1{{ loop }}"
|
||||
class="js-vimeo"
|
||||
allow="autoplay; encrypted-media"
|
||||
allowfullscreen
|
||||
title="{{ section.settings.description | escape }}"
|
||||
></iframe>
|
||||
{%- endif -%}
|
||||
{%- else -%}
|
||||
{{
|
||||
section.settings.video
|
||||
| video_tag:
|
||||
image_size: '1100x',
|
||||
autoplay: true,
|
||||
loop: section.settings.enable_video_looping,
|
||||
controls: true,
|
||||
muted: false
|
||||
}}
|
||||
{%- endif -%}
|
||||
</template>
|
||||
</deferred-media>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "t:sections.video.name",
|
||||
"tag": "section",
|
||||
"class": "section",
|
||||
"disabled_on": {
|
||||
"groups": ["header", "footer"]
|
||||
},
|
||||
"settings": [
|
||||
{
|
||||
"type": "inline_richtext",
|
||||
"id": "heading",
|
||||
"default": "t:sections.video.settings.heading.default",
|
||||
"label": "t:sections.video.settings.heading.label"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "heading_size",
|
||||
"options": [
|
||||
{
|
||||
"value": "h2",
|
||||
"label": "t:sections.all.heading_size.options__1.label"
|
||||
},
|
||||
{
|
||||
"value": "h1",
|
||||
"label": "t:sections.all.heading_size.options__2.label"
|
||||
},
|
||||
{
|
||||
"value": "h0",
|
||||
"label": "t:sections.all.heading_size.options__3.label"
|
||||
},
|
||||
{
|
||||
"value": "hxl",
|
||||
"label": "t:sections.all.heading_size.options__4.label"
|
||||
},
|
||||
{
|
||||
"value": "hxxl",
|
||||
"label": "t:sections.all.heading_size.options__5.label"
|
||||
}
|
||||
],
|
||||
"default": "h1",
|
||||
"label": "t:sections.all.heading_size.label"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "enable_video_looping",
|
||||
"label": "t:sections.video.settings.enable_video_looping.label",
|
||||
"default": false
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.video.settings.header__1.content"
|
||||
},
|
||||
{
|
||||
"type": "video",
|
||||
"id": "video",
|
||||
"label": "t:sections.video.settings.video.label"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.video.settings.header__2.content"
|
||||
},
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": "t:sections.video.settings.paragraph.content"
|
||||
},
|
||||
{
|
||||
"type": "video_url",
|
||||
"id": "video_url",
|
||||
"accept": ["youtube", "vimeo"],
|
||||
"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
|
||||
"label": "t:sections.video.settings.video_url.label",
|
||||
"info": "t:sections.video.settings.video_url.info"
|
||||
},
|
||||
{
|
||||
"type": "image_picker",
|
||||
"id": "cover_image",
|
||||
"label": "t:sections.video.settings.cover_image.label"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "description",
|
||||
"label": "t:sections.video.settings.description.label",
|
||||
"info": "t:sections.video.settings.description.info"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.video.settings.header__3.content"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "full_width",
|
||||
"label": "t:sections.video.settings.full_width.label",
|
||||
"default": false
|
||||
},
|
||||
{
|
||||
"type": "color_scheme",
|
||||
"id": "color_scheme",
|
||||
"label": "t:sections.all.colors.label",
|
||||
"default": "scheme-1"
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"content": "t:sections.all.padding.section_padding_heading"
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_top",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_top",
|
||||
"default": 36
|
||||
},
|
||||
{
|
||||
"type": "range",
|
||||
"id": "padding_bottom",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"step": 4,
|
||||
"unit": "px",
|
||||
"label": "t:sections.all.padding.padding_bottom",
|
||||
"default": 36
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "t:sections.video.presets.name"
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
Reference in New Issue
Block a user