From 8e9cf07bc35a214124a2d591f1a3b96bf5ae0a83 Mon Sep 17 00:00:00 2001 From: Tyler Alsbury Date: Tue, 10 Dec 2024 16:16:55 -0500 Subject: [PATCH] Release 0.4.3 --- assets/base.css | 713 -------------------------- assets/global.js | 223 -------- blocks/_slide.liquid | 7 +- blocks/buy-buttons.liquid | 67 ++- blocks/collapsible-row.liquid | 42 +- blocks/collection-card.liquid | 7 +- blocks/group.liquid | 11 +- blocks/heading.liquid | 85 --- blocks/icon.liquid | 25 +- blocks/image.liquid | 14 + blocks/link.liquid | 18 + blocks/newsletter.liquid | 62 +++ blocks/payment-icons.liquid | 9 + blocks/price.liquid | 8 + blocks/product-card.liquid | 2 +- blocks/product-medias.liquid | 42 ++ blocks/quantity-selector.liquid | 92 +++- blocks/text.liquid | 30 +- blocks/variant-picker.liquid | 49 ++ config/settings_schema.json | 2 +- layout/theme.liquid | 1 - sections/custom-section.liquid | 82 ++- sections/footer-group.json | 18 +- sections/header-group.json | 5 +- sections/image-banner.liquid | 79 ++- sections/main-collection.liquid | 89 +++- sections/main-list-collections.liquid | 2 +- sections/slideshow.liquid | 445 +++++++++++++++- templates/404.json | 9 +- templates/collection.json | 11 +- templates/index.json | 189 +------ templates/list-collections.json | 11 +- 32 files changed, 1115 insertions(+), 1334 deletions(-) delete mode 100644 assets/global.js delete mode 100644 blocks/heading.liquid diff --git a/assets/base.css b/assets/base.css index c46963f6..8e19d782 100644 --- a/assets/base.css +++ b/assets/base.css @@ -225,131 +225,6 @@ button, background-color: inherit; } -.product-form__buttons { - display: flex; - flex-direction: column; - gap: 8px; - justify-content: flex-start; - align-items: flex-start; -} - -.button--add-to-cart { - border-radius: 4px; - padding-block: 12px; - padding-inline: 12px; -} - -.shopify-payment-button .shopify-payment-button__button { - width: 100%; - line-height: normal; - padding-block: 12px; -} - -.shopify-payment-button__button.shopify-payment-button__button--unbranded:hover:not([disabled]) { - background-color: rgba(var(--color-button), 0.9); -} - -.shopify-payment-button__more-options.shopify-payment-button__button--hidden { - display: none; -} - -.product-form__buttons > * { - width: 100%; -} - -/* Image block */ -.image-block img { - height: 100%; -} - -.image-block--cover img { - object-fit: cover; -} - -.image-block--contain img { - object-fit: contain; -} - -/* Text block */ -.text-block-subtitle { - font-size: 1.8rem; - line-height: calc(1 + 0.8 / var(--font-body-scale)); - letter-spacing: 0.06rem; - color: rgba(var(--color-foreground), 0.7); -} - -.text-block-caption { - font-size: 1rem; - letter-spacing: 0.13rem; - line-height: calc(1 + 0.2 / var(--font-body-scale)); - text-transform: uppercase; -} - -.field__input { - padding-block: 12px; - padding-inline: 8px; - border: 1px solid rgb(var(--color-foreground)); -} - -/* Image banner section */ -.image-banner { - position: relative; -} - -.image-banner--small { - min-height: 300px; -} - -.image-banner--medium { - min-height: 400px; -} - -.image-banner--large { - min-height: 500px; -} - -.image-banner > *:not(.image-banner__image-wrapper) { - z-index: 1; -} - -.image-banner__image-wrapper { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - overflow: hidden; -} - -.image-banner__image-wrapper:after { - content: ""; - position: absolute; - top: 0; - background: #000000; - width: 100%; - height: 100%; -} - -.image-banner__image-wrapper .placeholder-image { - height: 100%; -} - -.image-banner--two-images .image-banner__image-wrapper img { - width: 50%; -} - -.image-banner--two-images .image-banner__image-wrapper img:last-child { - right: 0; -} - -.image-banner__image-wrapper img { - position: absolute; - object-fit: cover; - object-position: center; - height: 100%; -} - -/* Link block & links */ .link, a { display: inline-flex; @@ -366,23 +241,6 @@ a { text-decoration: underline; } -.link-block { - display: inline-flex; -} - -.link-block-icon-right { - flex-direction: row-reverse; - justify-content: flex-end; -} - -.link-block svg { - fill: rgb(var(--fill-link-icon-color)); -} - -.link--with-icon { - gap: 5px; -} - /* Resource card (product, collection) */ .resource-card { text-decoration: none; @@ -406,491 +264,6 @@ a { position: relative; } -/* Newsletter block */ -.newsletter-block { - position: relative; - overflow: auto; -} - -.newsletter-block .contact-form { - width: max(150px, 100%); - min-height: 44px; -} - -.newsletter-block__form-inputs { - position: relative; -} - -.newsletter-block input { - width: 100%; - padding: 22px 44px 8px 12px; - background: var(--gradient-background); - color: rgb(var(--color-foreground)); -} - -.newsletter-block label { - position: absolute; - top: 50%; - transform: translateY(-50%); - left: 12px; - transition: all 0.2s ease-in-out; -} - -.newsletter-block input::placeholder { - opacity: 0; -} - -.newsletter-block input:focus + label, -.newsletter-block input:not(:placeholder-shown) + label { - font-size: 0.8rem; - transform: translateY(-120%); -} - -.newsletter-block button { - position: absolute; - top: 0; - right: 0; - height: 100%; - min-width: 44px; - padding-inline: 0; - background-color: transparent; - color: var(--color-foreground); -} - -.newsletter-block svg { - width: 15px; -} - -/* Price block */ -.price-block { - display: flex; - gap: 5px; - width: fit-content; -} - -/* Product medias block */ -.media-block { - display: flex; - width: 100%; - height: 100%; - overflow: hidden; -} - -.layout--row > .media-block { - align-self: flex-start; -} - -.media-block:where(.column) { - flex-direction: column; -} - -.media-block > div { - display: flex; -} - -.media-block:not(.column) > div { - flex-grow: 1; -} - -.media-block:has(div:nth-child(2)) { - flex-wrap: wrap; -} - -.media-block > div:not(:only-child) { - max-width: 50%; -} - -.media-block.column > div { - max-width: 100%; - width: 100%; -} - -.media-block .placeholder-image svg { - position: relative; -} - -/* Quantity selector block */ -.quantity-block label { - display: inline-block; - padding-block: 8px; -} - -.quantity-button-wrapper { - display: flex; - align-items: stretch; -} - -.minus-button { - border-start-start-radius: 4px; - border-end-start-radius: 4px; -} - -.plus-button { - border-start-end-radius: 4px; - border-end-end-radius: 4px; -} - -.quantity-button { - width: min(25%, fit-content); - border: 1px solid #000; - background-color: #fff; - padding: 12px; - font-size: calc(var(--font-body-scale) * 1.8rem); -} - -.quantity-input { - width: 100%; - border-inline-width: 0px; - border-block-width: 1px; - padding: 12px; - color: currentColor; - font-size: calc(var(--font-body-scale) * 1.6rem); - font-weight: 500; - text-align: center; - background-color: #fff; - width: 100%; - flex-grow: 1; - -webkit-appearance: none; - appearance: none; -} - -.quantity-input::-webkit-outer-spin-button, -.quantity-input::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; -} - -.quantity-input[type="number"] { - -moz-appearance: textfield; -} - -/* Variant picker block */ -.variant-block label { - display: inline-block; - padding-block: 8px; -} - -.variant-select { - position: relative; -} - -.variant-select svg { - position: absolute; - height: 6px; - top: 50%; - transform: translatey(-50%); - right: 1rem; - pointer-events: none; -} - -.variant-block select { - width: 100%; - padding-block: 12px; - padding-inline: 10px 30px; - border-radius: 4px; - border: 1px solid #000; - appearance: none; -} - -/* Payment icons block */ -.payment-icons__list { - display: flex; - gap: 10px; - flex-wrap: wrap; - justify-content: center; -} - -/* Collapsible row */ -details { - width: 100%; - border-block-start: 1px solid rgba(var(--color-foreground), 0.08); -} - -summary { - display: flex; - align-items: center; - gap: 1.5rem; - position: relative; - padding-block: 1.5rem; - padding-inline: 0; - cursor: pointer; - list-style: none; -} - -summary:hover { - text-decoration: underline; - background-color: rgba(var(--color-foreground), 0.04); -} - -summary .icon-caret { - margin-inline-start: auto; - height: 0.6rem; - margin-right: 1.5rem; -} - -details[open] > summary .icon-caret { - transform: rotate(180deg); -} - -/* Icon */ -.icon-block { - display: flex; - fill: currentColor; -} - -.icon-block > svg, -.icon-block > img { - height: auto; -} - -/* Slideshow */ -slideshow-component { - display: block; - width: 100%; -} - -/* Slides container */ -.slideshow__slides { - display: grid; - overflow: hidden; - width: 100%; - grid-template-areas: "slide"; -} - -.slideshow--small .slideshow__slides { - min-height: 28rem; -} - -.slideshow--medium .slideshow__slides { - min-height: 34rem; -} - -.slideshow--large .slideshow__slides { - min-height: 39rem; -} - -@media screen and (min-width: 750px) { - .slideshow--small .slideshow__slides { - min-height: 42rem; - } - - .slideshow--medium .slideshow__slides { - min-height: 56rem; - } - - .slideshow--large .slideshow__slides { - min-height: 72rem; - } -} - -/* Individual slides */ -.slideshow__slide { - display: flex; - position: relative; - grid-area: slide; - justify-content: center; - align-items: center; - width: 100%; -} - -slideshow-component .slideshow__slide { - height: 100%; -} - -.slideshow__slide[aria-hidden="true"] { - order: 0; -} - -:is(.slideshow__slide.slide--next, .slideshow__slide.slide--previous) { - order: 1; - z-index: 1; -} - -.slideshow__slide[aria-hidden="false"] { - order: 2; - z-index: 2; -} - -.slide--transition-out-next, -.slide--transition-out-previous, -.slide--next, -.slide--previous { - animation-duration: 0.5s; - animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -} - -.slide--next, -.slide--previous { - animation-fill-mode: forwards; -} - -.slide--transition-out-next { - animation-name: slideOutRight; -} - -.slide--transition-out-previous { - animation-name: slideOutLeft; -} - -.slideshow__slide.slide--next { - animation-name: slideInLeft; -} - -.slideshow__slide.slide--previous { - animation-name: slideInRight; -} - -/* Slide content */ -.slide__content { - display: flex; - position: relative; - padding: 3.2rem; - width: 100%; - height: 100%; -} - -.slide__content > * { - margin: auto; - max-height: 100%; -} - -.slideshow__slide > .slide__image-container { - display: flex; - width: 100%; - height: 100%; - overflow: hidden; - position: absolute; -} - -.slide__image-container svg { - width: 100%; -} - -.slide__image-container img { - object-fit: cover; -} - -/* Slideshow controls */ -.slideshow__controls { - display: flex; - align-items: center; - justify-content: center; -} - -.current-slide-indicator { - display: flex; - justify-content: center; - min-width: 4.4rem; - transition: transform 0.2s ease-in-out; -} - -.slideshow-controls__dot { - width: 1rem; - height: 1rem; - border-radius: 50%; - border: 0.1rem solid black; - padding: 0; - display: block; - background-color: transparent; -} - -:where(.slideshow-controls__link--active) .slideshow-controls__dot { - background-color: rgba(var(--color-foreground), 1); -} - -.slideshow__controls .button-secondary { - display: inline-flex; - justify-content: center; - align-items: center; - padding: 1rem; - border: none; - min-height: 4.4rem; - min-width: 4.4rem; - color: rgb(var(--color-foreground)); -} - -.slideshow-control .icon { - display: block; - position: absolute; - opacity: 1; - transform: scale(1); - transition: transform 150ms ease, opacity 150ms ease; - width: 1.8rem; - height: 1.2rem; -} - -.slideshow-controls__link { - cursor: pointer; - display: inline-block; - border: none; - color: rgba(var(--color-foreground), 0.5); - box-shadow: none; - background-color: transparent; - font-size: 1.4rem; - font-family: inherit; - padding: 1.28rem; -} - -:where(.slideshow-controls__link--active).slideshow-controls__link { - color: rgba(var(--color-foreground), 1); -} - -/* Autoplay */ -.slideshow-control--autoplay { - position: absolute; - right: 0; -} - -@media screen and (min-width: 750px) { - .slideshow-control--autoplay { - position: inherit; - } -} - -.slideshow-control--autoplay--paused .icon-pause, -.slideshow-control--autoplay:not(.slideshow-control--autoplay--paused) .icon-play { - visibility: hidden; - opacity: 0; - transform: scale(0.8); -} - -/* Animation declarations */ -@keyframes slideInLeft { - from { - transform: translateX(100%); - } - to { - transform: translateX(0); - } -} - -@keyframes slideOutRight { - from { - transform: translateX(0); - } - to { - transform: translateX(-100%); - } -} - -@keyframes slideInRight { - from { - transform: translateX(-100%); - } - to { - transform: translateX(0); - } -} - -@keyframes slideOutLeft { - from { - transform: translateX(0); - } - to { - transform: translateX(100%); - } -} - /* Product grid */ .product-grid { --product-grid-gap: 20px; @@ -911,89 +284,3 @@ slideshow-component .slideshow__slide { grid-template-columns: var(--product-grid-columns-desktop); } } - -/* Pagination */ -.pagination-wrapper { - margin-top: 4rem; -} - -@media screen and (min-width: 990px) { - .pagination-wrapper { - margin-top: 5rem; - } -} - -.pagination__list { - display: flex; - flex-wrap: wrap; - justify-content: center; -} - -.pagination__list > li { - flex: 1 0 4.4rem; - max-width: 4.4rem; -} - -.pagination__item { - color: rgb(var(--color-foreground)); - display: inline-flex; - justify-content: center; - align-items: center; - position: relative; - height: 4.4rem; - width: 100%; - padding: 0; - text-decoration: none; -} - -.pagination__item.link:hover { - text-decoration: none; -} - -a.pagination__item:hover::after { - height: 0.1rem; -} - -.pagination__item .icon-caret { - height: 0.6rem; -} - -.pagination__item--current::after { - height: 0.1rem; -} - -.pagination__item--current::after, -.pagination__item:hover::after { - content: ""; - display: block; - width: 2rem; - position: absolute; - bottom: 8px; - left: 50%; - transform: translateX(-50%); - background-color: currentColor; -} - -.pagination__item--next .icon { - transform: rotate(-90deg); -} - -.pagination__item--next:hover .icon { - transform: rotate(-90deg) scale(1.07); -} - -.pagination__item--prev .icon { - transform: rotate(90deg); -} - -.pagination__item--prev:hover .icon { - transform: rotate(90deg) scale(1.07); -} - -.filters-wrapper { - display: flex; - justify-content: flex-end; - align-items: center; - margin-bottom: 1rem; - gap: 20px; -} diff --git a/assets/global.js b/assets/global.js deleted file mode 100644 index 59be89b0..00000000 --- a/assets/global.js +++ /dev/null @@ -1,223 +0,0 @@ -const inputChangeEvent = new CustomEvent('inputChangeEvent', { bubbles: true }); -class ProductInputs extends HTMLElement { - constructor() { - super(); - this.sectionId = this.dataset.section; - this.section = this.closest('.shopify-section'); - this.hiddenInputs = this.section.querySelectorAll(`[id^="product-form-${this.sectionId }"] input[name="${ this.dataset.inputName }"]`); - this.inputElement = this.querySelector(`[name="${ this.dataset.inputName }"]`); - - this.addEventListener('change', this.onInputChange); - this.section.addEventListener('inputChangeEvent', (event) => { - console.log(event.target); - this.updateHiddenInputs(); - }); - } - - onInputChange() { - this.dispatchEvent(inputChangeEvent); - } - - updateHiddenInputs() { - this.hiddenInputs.forEach((hiddenInput) => { - hiddenInput.value = this.inputElement.value; - }); - } -} - -customElements.define('product-inputs', ProductInputs); - - -class QuantityInput extends HTMLElement { - constructor() { - super(); - this.minusButton = this.querySelector('[name="minus"]'); - this.plusButton = this.querySelector('[name="plus"]'); - this.inputElement = this.querySelector('input'); - [this.minusButton, this.plusButton].forEach((button) => { - button.addEventListener('click', this.onButtonClick.bind(this)); - }); - } - - onButtonClick(event) { - event.preventDefault(); - const currentValue = parseInt(this.inputElement.value); - const newValue = event.target.name === 'plus' ? currentValue + 1 : currentValue - 1; - this.inputElement.value = newValue > 0 ? newValue : 1; - this.inputElement.dispatchEvent(inputChangeEvent); - } -} - -customElements.define('quantity-input', QuantityInput); - -// Slideshow component -class SlideshowComponent extends HTMLElement { - constructor() { - super(); - this.slides = this.querySelectorAll(".slideshow__slide"); - if ( this.slides.length <= 1) return; - - this.currentSlideIndicator = this.querySelector(".current-slide-indicator"); - this.currentSlideIndex = this.dataset.activeSlide; - this.counterControls = this.querySelectorAll(".slideshow-controls__link"); - - this.nextControl = this.querySelector(".slideshow-control--next"); - this.previousControl = this.querySelector(".slideshow-control--previous"); - - if (this.getAttribute('data-autoplay') === 'true') { - this.autoplaySpeed = parseInt(this.dataset.autoplaySpeed) * 1000; - this.isAutoplayButtonSetToPlay = true; - this.setAutoPlay(); - } - - this.initButtons(); - } - - initButtons() { - this.nextControl.addEventListener("click", () => { - this.updateSlideshow('next'); - this.resetAutoPlay(); - }); - - this.previousControl.addEventListener("click", () => { - this.updateSlideshow('previous'); - this.resetAutoPlay(); - }); - - this.counterControls.forEach(control => { - control.addEventListener("click", () => { - if (this.currentSlideIndex == control.dataset.slideNumber) return; - this.updateSlideshow(control.dataset.slideNumber); - this.resetAutoPlay(); - }); - }); - } - - updateSlideshow(target = 'next') { - let nextSlideIndex = 0; - let transitionDirection = target; - - switch (target) { - case 'next': - nextSlideIndex = parseInt(this.dataset.activeSlide) + 1; - break; - case 'previous': - nextSlideIndex = parseInt(this.dataset.activeSlide) - 1; - break; - default: - nextSlideIndex = target; - transitionDirection = nextSlideIndex > this.dataset.activeSlide ? 'next' : 'previous'; - break; - } - - if (nextSlideIndex < 0) { - nextSlideIndex = this.slides.length - 1; - } - else if (nextSlideIndex >= this.slides.length) { - nextSlideIndex = 0; - } - - this.slideTransition(this.slides[this.dataset.activeSlide], this.slides[nextSlideIndex], transitionDirection); - this.updateControls(nextSlideIndex); - this.dataset.activeSlide = nextSlideIndex; - this.currentSlideIndex = nextSlideIndex; - } - - slideTransition(currentSlide, nextSlide, transitionDirection) { - const slideshowControls = this.querySelectorAll('.slideshow-control'); - slideshowControls.forEach((control) => { control.setAttribute('disabled', 'true')}); - - currentSlide.addEventListener('animationend', (event) => { - if (event.animationName.includes('slideIn')) return; - - // Hide slides & reset transitions - this.slides.forEach((slide) => { - slide.setAttribute('aria-hidden', 'true'); - slide.classList.remove(`slide--transition-out-${transitionDirection}`); - }); - - // Set new slide to active - nextSlide.setAttribute('aria-hidden', 'false'); - nextSlide.classList.remove(`slide--${transitionDirection}`); - slideshowControls.forEach(control => { control.removeAttribute('disabled')}); - }); - - // Start slide transition - currentSlide.classList.add(`slide--transition-out-${transitionDirection}`); - nextSlide.classList.add(`slide--${transitionDirection}`); - } - - updateControls(newSlideIndex) { - // If we have a current slide indicator (i.e. 2/3), update it - if (this.currentSlideIndicator) { - this.currentSlideIndicator.innerText = `${newSlideIndex + 1}/${this.slides.length}`; - return; - } - - this.counterControls.forEach(control => { control.classList.remove("slideshow-controls__link--active")}); - this.counterControls[newSlideIndex].classList.add("slideshow-controls__link--active"); - } - - resetAutoPlay() { - if (this.isAutoplayButtonSetToPlay) { - this.play(); - } - } - - /* Handle autoplay */ - setAutoPlay() { - this.addEventListener('mouseover', this.focusInHandling.bind(this)); - this.addEventListener('mouseleave', this.focusOutHandling.bind(this)); - this.addEventListener('focusin', this.focusInHandling.bind(this)); - this.addEventListener('focusout', this.focusOutHandling.bind(this)); - - this.sliderAutoplayButton = this.querySelector('.slideshow-control--autoplay'); - this.sliderAutoplayButton.addEventListener('click', this.autoPlayToggle.bind(this)); - this.isAutoplayButtonSetToPlay = true; - this.play(); - } - - autoPlayToggle() { - this.togglePlayButtonState(this.isAutoplayButtonSetToPlay); - this.isAutoplayButtonSetToPlay ? this.pause() : this.play(); - this.isAutoplayButtonSetToPlay = !this.isAutoplayButtonSetToPlay; - } - - togglePlayButtonState(pauseAutoplay) { - this.sliderAutoplayButton.classList.toggle('slideshow-control--autoplay--paused', pauseAutoplay); - (pauseAutoplay) ? this.sliderAutoplayButton.setAttribute('aria-label', 'Play slideshow') : this.sliderAutoplayButton.setAttribute('aria-label', 'Pause slideshow'); - } - - play() { - this.setAttribute('aria-live', 'off'); - clearInterval(this.autoplay); - this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed); - } - - pause() { - this.setAttribute('aria-live', 'polite'); - clearInterval(this.autoplay); - } - - autoRotateSlides() { - this.updateSlideshow('next'); - } - - focusOutHandling(event) { - const focusedOnAutoplayButton = - event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); - - if (this.isAutoplayButtonSetToPlay && !focusedOnAutoplayButton) this.play(); - } - - focusInHandling(event) { - const focusedOnAutoplayButton = - event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); - - if (this.isAutoplayButtonSetToPlay) { - focusedOnAutoplayButton ? this.play() : this.pause(); - } - } -}; - -customElements.define('slideshow-component', SlideshowComponent); diff --git a/blocks/_slide.liquid b/blocks/_slide.liquid index f2fea6a1..3c01ce68 100644 --- a/blocks/_slide.liquid +++ b/blocks/_slide.liquid @@ -53,7 +53,7 @@ {%- endif -%}
- {% content_for "blocks" %} + {% content_for 'blocks' %}
@@ -117,10 +117,9 @@ }, "blocks": [ { - "type": "heading", + "type": "text", "settings": { - "heading": "Image slide", - "heading_size": "h1" + "text": "

Image slide

" } }, { diff --git a/blocks/buy-buttons.liquid b/blocks/buy-buttons.liquid index 3aadd9e3..9bb1d88a 100644 --- a/blocks/buy-buttons.liquid +++ b/blocks/buy-buttons.liquid @@ -1,22 +1,54 @@ {% liquid assign product = block.settings.product %} + +{% stylesheet %} + .product-form__buttons { + display: flex; + flex-direction: column; + gap: 8px; + justify-content: flex-start; + align-items: flex-start; + } + + .button--add-to-cart { + border-radius: 4px; + padding-block: 12px; + padding-inline: 12px; + } + + .product-form__buttons > * { + width: 100%; + } + .button--product-submit { + border: 1px solid rgb(var(--color-secondary-button-text)); + background: rgba(var(--color-secondary-button), 1); + color: rgb(var(--color-secondary-button-text)); + } + + .shopify-payment-button .shopify-payment-button__button { + width: 100%; + line-height: normal; + padding-block: 12px; + } + + .shopify-payment-button__button.shopify-payment-button__button--unbranded:hover:not([disabled]) { + background-color: rgba(var(--color-button), 0.9); + } + + .shopify-payment-button__more-options.shopify-payment-button__button--hidden { + display: none; + } +{% endstylesheet %} +
- {% style %} - #ProductSubmitButton-{{ section.id }}-{{ product.id }} { - border: 1px solid rgb(var(--color-secondary-button-text)); - background: rgba(var(--color-secondary-button), 1); - color: rgb(var(--color-secondary-button-text)); - } - {% endstyle %} - {%- if product != blank -%} - {%- assign product_form_id = 'product-form-' | append: section.id | append: product.id | append: block.id -%} + {%- assign product_form_id = 'product-form-' | append: section.id -%} - +
{%- form 'product', product, id: product_form_id, @@ -32,20 +64,11 @@ disabled {% endif %} > -
- +
{% schema %} { diff --git a/blocks/text.liquid b/blocks/text.liquid index 3a168a25..25b11610 100644 --- a/blocks/text.liquid +++ b/blocks/text.liquid @@ -1,10 +1,29 @@ +{% stylesheet %} + .text-block-subtitle { + font-size: 1.8rem; + line-height: calc(1 + 0.8 / var(--font-body-scale)); + letter-spacing: 0.06rem; + color: rgba(var(--color-foreground), 0.7); + } + + .text-block-caption { + font-size: 1rem; + letter-spacing: 0.13rem; + line-height: calc(1 + 0.2 / var(--font-body-scale)); + text-transform: uppercase; + } +{% endstylesheet %} + +{% comment %} [START block.markup] {% endcomment %}
{{ block.settings.text }}
+{% comment %} [END block.markup] {% endcomment %} +{% comment %} [START block.preset] {% endcomment %} {% schema %} { "name": "Text", @@ -74,6 +93,15 @@ "label": "Spacing" } ], - "presets": [{ "name": "Text" }] + "presets": [ + { "name": "Text" }, + { + "name": "Heading", + "settings": { + "text": "

Heading<\/h2>" + } + } + ] } {% endschema %} +{% comment %} [END block.preset {% endcomment %} diff --git a/blocks/variant-picker.liquid b/blocks/variant-picker.liquid index 914193da..3ebc8d1e 100644 --- a/blocks/variant-picker.liquid +++ b/blocks/variant-picker.liquid @@ -1,3 +1,52 @@ +{% stylesheet %} + .variant-block label { + display: inline-block; + padding-block: 8px; + } + + .variant-select { + position: relative; + } + + .variant-select svg { + position: absolute; + height: 6px; + top: 50%; + transform: translatey(-50%); + right: 1rem; + pointer-events: none; + } + + .variant-block select { + width: 100%; + padding-block: 12px; + padding-inline: 10px 30px; + border-radius: 4px; + border: 1px solid #000; + appearance: none; + } +{% endstylesheet %} + +{% javascript %} + class ProductInputs extends HTMLElement { + constructor() { + super(); + this.section = this.closest('.shopify-section'); + this.hiddenVariantInput = this.section.querySelector(`input[name="id"]`); + this.inputElement = this.querySelector(`[name="id"]`); + this.addEventListener('change', this.#updateHiddenInput); + } + + #updateHiddenInput = () => { + this.hiddenVariantInput.value = this.inputElement.value; + }; + } + + if (!customElements.get('product-inputs')) { + customElements.define('product-inputs', ProductInputs); + } +{% endjavascript %} + {%- liquid assign product = block.settings.product assign product_form_id = 'product-form-' | append: section.id | append: product.id diff --git a/config/settings_schema.json b/config/settings_schema.json index e4efd54e..8c98b77e 100644 --- a/config/settings_schema.json +++ b/config/settings_schema.json @@ -2,7 +2,7 @@ { "name": "theme_info", "theme_name": "Reference theme", - "theme_version": "0.4.2", + "theme_version": "0.4.3", "theme_author": "Shopify", "theme_documentation_url": "https://help.shopify.com/manual/online-store/themes", "theme_support_url": "https://support.shopify.com/" diff --git a/layout/theme.liquid b/layout/theme.liquid index 3cf0b2d7..74c9cee2 100644 --- a/layout/theme.liquid +++ b/layout/theme.liquid @@ -99,7 +99,6 @@ {%- endunless -%} {{ 'base.css' | asset_url | stylesheet_tag }} - diff --git a/sections/custom-section.liquid b/sections/custom-section.liquid index b8a7a69a..b8aadbf4 100644 --- a/sections/custom-section.liquid +++ b/sections/custom-section.liquid @@ -1,9 +1,10 @@ -{% stylesheet %}{% endstylesheet %} -
- {% content_for "blocks" %} + {% comment %} [START section.render_blocks] {% endcomment %} + {% content_for 'blocks' %} + {% comment %} [END section.render_blocks] {% endcomment %}
+{% comment %} [START section.blocks] {% endcomment %} {% schema %} { "name": "Custom section", @@ -91,10 +92,9 @@ }, "blocks": [ { - "type": "heading", + "type": "text", "settings": { - "heading": "Image with text", - "heading_size": "h1" + "text": "

Image with text

" } }, { @@ -129,9 +129,9 @@ }, "blocks": [ { - "type": "heading", + "type": "text", "settings": { - "heading": "Collapsible content" + "text": "

Collapsible content

" } }, { @@ -175,7 +175,7 @@ }, "blocks": [ { - "type": "heading" + "type": "text" }, { "type": "text" @@ -216,7 +216,7 @@ }, "blocks": [ { - "type": "heading" + "type": "text" }, { "type": "text" @@ -257,7 +257,7 @@ }, "blocks": [ { - "type": "heading" + "type": "text" }, { "type": "text" @@ -298,7 +298,7 @@ }, "blocks": [ { - "type": "heading" + "type": "text" }, { "type": "text" @@ -324,9 +324,9 @@ }, "blocks": [ { - "type": "heading", + "type": "text", "settings": { - "heading": "Collections" + "text": "

Collections

" } }, { @@ -411,9 +411,9 @@ "name": "Collage", "blocks": [ { - "type": "heading", + "type": "text", "settings": { - "heading": "Multimedia collage" + "text": "

Multimedia collage

" } }, { @@ -514,9 +514,9 @@ }, "blocks": [ { - "type": "heading", + "type": "text", "settings": { - "heading_size": "h1", + "text": "

Rich text

", "alignment": "center" } }, @@ -551,10 +551,9 @@ }, "blocks": [ { - "type": "heading", + "type": "text", "settings": { - "heading": "Multicolumn", - "heading_size": "h2" + "text": "

Multicolumn

" } }, { @@ -582,10 +581,9 @@ }, "blocks": [ { - "type": "heading", + "type": "text", "settings": { - "heading": "Column", - "heading_size": "h3" + "text": "

Column

" } }, { @@ -613,10 +611,9 @@ }, "blocks": [ { - "type": "heading", + "type": "text", "settings": { - "heading": "Column", - "heading_size": "h3" + "text": "

Column

" } }, { @@ -644,10 +641,9 @@ }, "blocks": [ { - "type": "heading", + "type": "text", "settings": { - "heading": "Column", - "heading_size": "h3" + "text": "

Column

" } }, { @@ -697,10 +693,9 @@ }, "blocks": [ { - "type": "heading", + "type": "text", "settings": { - "heading": "Subscribe to our newsletter", - "heading_size": "h2", + "text": "

Subscribe to our newsletter

", "alignment": "center" } }, @@ -753,10 +748,9 @@ } }, { - "type": "heading", + "type": "text", "settings": { - "heading": "Heading", - "heading_size": "h3", + "text": "

Heading

", "alignment": "center" } }, @@ -794,10 +788,9 @@ } }, { - "type": "heading", + "type": "text", "settings": { - "heading": "Heading", - "heading_size": "h3", + "text": "

Heading

", "alignment": "center" } }, @@ -835,10 +828,9 @@ } }, { - "type": "heading", + "type": "text", "settings": { - "heading": "Heading", - "heading_size": "h3", + "text": "

Heading

", "alignment": "center" } }, @@ -864,10 +856,9 @@ }, "blocks": [ { - "type": "heading", + "type": "text", "settings": { - "heading": "Featured collection", - "heading_size": "h2", + "text": "

Featured collection

", "alignment": "start" } }, @@ -916,3 +907,4 @@ ] } {% endschema %} +{% comment %} [END section.blocks] {% endcomment %} diff --git a/sections/footer-group.json b/sections/footer-group.json index 1fbdf42b..46fca312 100644 --- a/sections/footer-group.json +++ b/sections/footer-group.json @@ -152,11 +152,10 @@ "color_scheme": "scheme-3" }, "blocks": { - "heading_F6mpHV": { - "type": "heading", + "text_F6mpHV": { + "type": "text", "settings": { - "heading": "Get to know us", - "heading_size": "h3", + "text": "

Get to know us

", "alignment": "start" } }, @@ -184,7 +183,7 @@ } }, "block_order": [ - "heading_F6mpHV", + "text_F6mpHV", "link_AJyYJ4", "link_BGUyPc" ] @@ -207,11 +206,10 @@ "color_scheme": "scheme-3" }, "blocks": { - "heading_aGWxfA": { - "type": "heading", + "text_aGWxfA": { + "type": "text", "settings": { - "heading": "Our mission", - "heading_size": "h3", + "text": "

Our mission

", "alignment": "start" } }, @@ -225,7 +223,7 @@ } }, "block_order": [ - "heading_aGWxfA", + "text_aGWxfA", "text_mWDYXd" ] } diff --git a/sections/header-group.json b/sections/header-group.json index 3f0969d0..6abc4efe 100644 --- a/sections/header-group.json +++ b/sections/header-group.json @@ -57,10 +57,9 @@ }, "blocks": { "heading_HeFnwz": { - "type": "heading", + "type": "text", "settings": { - "heading": "Store name<\/a>", - "heading_size": "h2", + "text": "

Store name

", "alignment": "start" } } diff --git a/sections/image-banner.liquid b/sections/image-banner.liquid index 2b6ecd3f..18ba62b1 100644 --- a/sections/image-banner.liquid +++ b/sections/image-banner.liquid @@ -1,14 +1,74 @@ -{% style %} - .image-banner--{{ section.id }} .image-banner__image-wrapper:after { - opacity: {{ section.settings.overlay_opacity | times: 1.00 | divided_by: 100 }}; +{% stylesheet %} + .image-banner { + position: relative; + } + + .image-banner--small { + min-height: 300px; + } + + .image-banner--medium { + min-height: 400px; + } + + .image-banner--large { + min-height: 500px; } .image-banner--adapt { - aspect-ratio: {{ section.settings.first_image.aspect_ratio }}; + aspect-ratio: var(--aspect-ratio); + } + + .image-banner > *:not(.image-banner__image-wrapper) { + z-index: 1; + } + + .image-banner__image-wrapper { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; + } + + .image-banner__image-wrapper:after { + content: ''; + position: absolute; + top: 0; + background: #000000; + width: 100%; + height: 100%; } -{% endstyle %} -
+ .image-banner__image-wrapper .placeholder-image { + height: 100%; + } + + .image-banner--two-images .image-banner__image-wrapper img { + width: 50%; + } + + .image-banner--two-images .image-banner__image-wrapper img:last-child { + right: 0; + } + + .image-banner__image-wrapper img { + position: absolute; + object-fit: cover; + object-position: center; + height: 100%; + } + + .image-banner .image-banner__image-wrapper:after { + opacity: var(--overlay-opacity); + } +{% endstylesheet %} + +
{%- if section.settings.first_image != blank -%} {{ @@ -31,7 +91,7 @@ {%- endif -%}
- {% content_for "blocks" %} + {% content_for 'blocks' %}
{% schema %} @@ -125,10 +185,9 @@ }, "blocks": [ { - "type": "heading", + "type": "text", "settings": { - "heading": "Browse our latest products", - "heading_size": "h1" + "text": "

Browse our latest products

" } }, { diff --git a/sections/main-collection.liquid b/sections/main-collection.liquid index a0439905..5893003b 100644 --- a/sections/main-collection.liquid +++ b/sections/main-collection.liquid @@ -1,3 +1,90 @@ +{% stylesheet %} + .pagination-wrapper { + margin-top: 4rem; + } + + @media screen and (min-width: 990px) { + .pagination-wrapper { + margin-top: 5rem; + } + } + + .pagination__list { + display: flex; + flex-wrap: wrap; + justify-content: center; + } + + .pagination__list > li { + flex: 1 0 4.4rem; + max-width: 4.4rem; + } + + .pagination__item { + color: rgb(var(--color-foreground)); + display: inline-flex; + justify-content: center; + align-items: center; + position: relative; + height: 4.4rem; + width: 100%; + padding: 0; + text-decoration: none; + } + + .pagination__item.link:hover { + text-decoration: none; + } + + a.pagination__item:hover::after { + height: 0.1rem; + } + + .pagination__item .icon-caret { + height: 0.6rem; + } + + .pagination__item--current::after { + height: 0.1rem; + } + + .pagination__item--current::after, + .pagination__item:hover::after { + content: ''; + display: block; + width: 2rem; + position: absolute; + bottom: 8px; + left: 50%; + transform: translateX(-50%); + background-color: currentColor; + } + + .pagination__item--next .icon { + transform: rotate(-90deg); + } + + .pagination__item--next:hover .icon { + transform: rotate(-90deg) scale(1.07); + } + + .pagination__item--prev .icon { + transform: rotate(90deg); + } + + .pagination__item--prev:hover .icon { + transform: rotate(90deg) scale(1.07); + } + + .filters-wrapper { + display: flex; + justify-content: flex-end; + align-items: center; + margin-bottom: 1rem; + gap: 20px; + } +{% endstylesheet %} +
@@ -20,7 +107,7 @@ {% else %}

No products found.

{% endif %} - {% content_for "blocks" %} + {% content_for 'blocks' %}
{% schema %} { diff --git a/sections/main-list-collections.liquid b/sections/main-list-collections.liquid index 49c1c9f2..95f38f67 100644 --- a/sections/main-list-collections.liquid +++ b/sections/main-list-collections.liquid @@ -8,7 +8,7 @@ {% endfor %} - {% content_for "blocks" %} + {% content_for 'blocks' %}
{% schema %} diff --git a/sections/slideshow.liquid b/sections/slideshow.liquid index 7ed17a1b..3f787f84 100644 --- a/sections/slideshow.liquid +++ b/sections/slideshow.liquid @@ -1,3 +1,434 @@ +{% stylesheet %} + /* Slideshow */ + slideshow-component { + display: block; + width: 100%; + } + + /* Slides container */ + .slideshow__slides { + display: grid; + overflow: hidden; + width: 100%; + grid-template-areas: 'slide'; + } + + .slideshow--small .slideshow__slides { + min-height: 28rem; + } + + .slideshow--medium .slideshow__slides { + min-height: 34rem; + } + + .slideshow--large .slideshow__slides { + min-height: 39rem; + } + + @media screen and (min-width: 750px) { + .slideshow--small .slideshow__slides { + min-height: 42rem; + } + + .slideshow--medium .slideshow__slides { + min-height: 56rem; + } + + .slideshow--large .slideshow__slides { + min-height: 72rem; + } + } + + /* Individual slides */ + .slideshow__slide { + display: flex; + position: relative; + grid-area: slide; + justify-content: center; + align-items: center; + width: 100%; + } + + slideshow-component .slideshow__slide { + height: 100%; + } + + .slideshow__slide[aria-hidden='true'] { + order: 0; + } + + :is(.slideshow__slide.slide--next, .slideshow__slide.slide--previous) { + order: 1; + z-index: 1; + } + + .slideshow__slide[aria-hidden='false'] { + order: 2; + z-index: 2; + } + + .slide--transition-out-next, + .slide--transition-out-previous, + .slide--next, + .slide--previous { + animation-duration: 0.5s; + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + } + + .slide--next, + .slide--previous { + animation-fill-mode: forwards; + } + + .slide--transition-out-next { + animation-name: slideOutRight; + } + + .slide--transition-out-previous { + animation-name: slideOutLeft; + } + + .slideshow__slide.slide--next { + animation-name: slideInLeft; + } + + .slideshow__slide.slide--previous { + animation-name: slideInRight; + } + + /* Slide content */ + .slide__content { + display: flex; + position: relative; + padding: 3.2rem; + width: 100%; + height: 100%; + } + + .slide__content > * { + margin: auto; + max-height: 100%; + } + + .slideshow__slide > .slide__image-container { + display: flex; + width: 100%; + height: 100%; + overflow: hidden; + position: absolute; + } + + .slide__image-container svg { + width: 100%; + } + + .slide__image-container img { + object-fit: cover; + } + + /* Slideshow controls */ + .slideshow__controls { + display: flex; + align-items: center; + justify-content: center; + } + + .current-slide-indicator { + display: flex; + justify-content: center; + min-width: 4.4rem; + transition: transform 0.2s ease-in-out; + } + + .slideshow-controls__dot { + width: 1rem; + height: 1rem; + border-radius: 50%; + border: 0.1rem solid black; + padding: 0; + display: block; + background-color: transparent; + } + + :where(.slideshow-controls__link--active) .slideshow-controls__dot { + background-color: rgba(var(--color-foreground), 1); + } + + .slideshow__controls .button-secondary { + display: inline-flex; + justify-content: center; + align-items: center; + padding: 1rem; + border: none; + min-height: 4.4rem; + min-width: 4.4rem; + color: rgb(var(--color-foreground)); + } + + .slideshow-control .icon { + display: block; + position: absolute; + opacity: 1; + transform: scale(1); + transition: transform 150ms ease, opacity 150ms ease; + width: 1.8rem; + height: 1.2rem; + } + + .slideshow-controls__link { + cursor: pointer; + display: inline-block; + border: none; + color: rgba(var(--color-foreground), 0.5); + box-shadow: none; + background-color: transparent; + font-size: 1.4rem; + font-family: inherit; + padding: 1.28rem; + } + + :where(.slideshow-controls__link--active).slideshow-controls__link { + color: rgba(var(--color-foreground), 1); + } + + /* Autoplay */ + .slideshow-control--autoplay { + position: absolute; + right: 0; + } + + @media screen and (min-width: 750px) { + .slideshow-control--autoplay { + position: inherit; + } + } + + .slideshow-control--autoplay--paused .icon-pause, + .slideshow-control--autoplay:not(.slideshow-control--autoplay--paused) .icon-play { + visibility: hidden; + opacity: 0; + transform: scale(0.8); + } + + /* Animation declarations */ + @keyframes slideInLeft { + from { + transform: translateX(100%); + } + to { + transform: translateX(0); + } + } + + @keyframes slideOutRight { + from { + transform: translateX(0); + } + to { + transform: translateX(-100%); + } + } + + @keyframes slideInRight { + from { + transform: translateX(-100%); + } + to { + transform: translateX(0); + } + } + + @keyframes slideOutLeft { + from { + transform: translateX(0); + } + to { + transform: translateX(100%); + } + } +{% endstylesheet %} + +{% javascript %} + // Slideshow component + class SlideshowComponent extends HTMLElement { + constructor() { + super(); + this.slides = this.querySelectorAll('.slideshow__slide'); + if (this.slides.length <= 1) return; + + this.currentSlideIndicator = this.querySelector('.current-slide-indicator'); + this.currentSlideIndex = this.dataset.activeSlide; + this.counterControls = this.querySelectorAll('.slideshow-controls__link'); + + this.nextControl = this.querySelector('.slideshow-control--next'); + this.previousControl = this.querySelector('.slideshow-control--previous'); + + if (this.getAttribute('data-autoplay') === 'true') { + this.autoplaySpeed = parseInt(this.dataset.autoplaySpeed) * 1000; + this.isAutoplayButtonSetToPlay = true; + this.setAutoPlay(); + } + + this.initButtons(); + } + + initButtons() { + this.nextControl.addEventListener('click', () => { + this.updateSlideshow('next'); + this.resetAutoPlay(); + }); + + this.previousControl.addEventListener('click', () => { + this.updateSlideshow('previous'); + this.resetAutoPlay(); + }); + + this.counterControls.forEach((control) => { + control.addEventListener('click', () => { + if (this.currentSlideIndex == control.dataset.slideNumber) return; + this.updateSlideshow(control.dataset.slideNumber); + this.resetAutoPlay(); + }); + }); + } + + updateSlideshow(target = 'next') { + let nextSlideIndex = 0; + let transitionDirection = target; + + switch (target) { + case 'next': + nextSlideIndex = parseInt(this.dataset.activeSlide) + 1; + break; + case 'previous': + nextSlideIndex = parseInt(this.dataset.activeSlide) - 1; + break; + default: + nextSlideIndex = target; + transitionDirection = nextSlideIndex > this.dataset.activeSlide ? 'next' : 'previous'; + break; + } + + if (nextSlideIndex < 0) { + nextSlideIndex = this.slides.length - 1; + } else if (nextSlideIndex >= this.slides.length) { + nextSlideIndex = 0; + } + + this.slideTransition(this.slides[this.dataset.activeSlide], this.slides[nextSlideIndex], transitionDirection); + this.updateControls(nextSlideIndex); + this.dataset.activeSlide = nextSlideIndex; + this.currentSlideIndex = nextSlideIndex; + } + + slideTransition(currentSlide, nextSlide, transitionDirection) { + const slideshowControls = this.querySelectorAll('.slideshow-control'); + slideshowControls.forEach((control) => { + control.setAttribute('disabled', 'true'); + }); + + currentSlide.addEventListener('animationend', (event) => { + if (event.animationName.includes('slideIn')) return; + + // Hide slides & reset transitions + this.slides.forEach((slide) => { + slide.setAttribute('aria-hidden', 'true'); + slide.classList.remove(`slide--transition-out-${transitionDirection}`); + }); + + // Set new slide to active + nextSlide.setAttribute('aria-hidden', 'false'); + nextSlide.classList.remove(`slide--${transitionDirection}`); + slideshowControls.forEach((control) => { + control.removeAttribute('disabled'); + }); + }); + + // Start slide transition + currentSlide.classList.add(`slide--transition-out-${transitionDirection}`); + nextSlide.classList.add(`slide--${transitionDirection}`); + } + + updateControls(newSlideIndex) { + // If we have a current slide indicator (i.e. 2/3), update it + if (this.currentSlideIndicator) { + this.currentSlideIndicator.innerText = `${newSlideIndex + 1}/${this.slides.length}`; + return; + } + + this.counterControls.forEach((control) => { + control.classList.remove('slideshow-controls__link--active'); + }); + this.counterControls[newSlideIndex].classList.add('slideshow-controls__link--active'); + } + + resetAutoPlay() { + if (this.isAutoplayButtonSetToPlay) { + this.play(); + } + } + + /* Handle autoplay */ + setAutoPlay() { + this.addEventListener('mouseover', this.focusInHandling.bind(this)); + this.addEventListener('mouseleave', this.focusOutHandling.bind(this)); + this.addEventListener('focusin', this.focusInHandling.bind(this)); + this.addEventListener('focusout', this.focusOutHandling.bind(this)); + + this.sliderAutoplayButton = this.querySelector('.slideshow-control--autoplay'); + this.sliderAutoplayButton.addEventListener('click', this.autoPlayToggle.bind(this)); + this.isAutoplayButtonSetToPlay = true; + this.play(); + } + + autoPlayToggle() { + this.togglePlayButtonState(this.isAutoplayButtonSetToPlay); + this.isAutoplayButtonSetToPlay ? this.pause() : this.play(); + this.isAutoplayButtonSetToPlay = !this.isAutoplayButtonSetToPlay; + } + + togglePlayButtonState(pauseAutoplay) { + this.sliderAutoplayButton.classList.toggle('slideshow-control--autoplay--paused', pauseAutoplay); + pauseAutoplay + ? this.sliderAutoplayButton.setAttribute('aria-label', 'Play slideshow') + : this.sliderAutoplayButton.setAttribute('aria-label', 'Pause slideshow'); + } + + play() { + this.setAttribute('aria-live', 'off'); + clearInterval(this.autoplay); + this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed); + } + + pause() { + this.setAttribute('aria-live', 'polite'); + clearInterval(this.autoplay); + } + + autoRotateSlides() { + this.updateSlideshow('next'); + } + + focusOutHandling(event) { + const focusedOnAutoplayButton = + event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); + + if (this.isAutoplayButtonSetToPlay && !focusedOnAutoplayButton) this.play(); + } + + focusInHandling(event) { + const focusedOnAutoplayButton = + event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); + + if (this.isAutoplayButtonSetToPlay) { + focusedOnAutoplayButton ? this.play() : this.pause(); + } + } + } + + customElements.define('slideshow-component', SlideshowComponent); +{% endjavascript %} +
- {% content_for "blocks" %} + {% content_for 'blocks' %}
{% if section.blocks.size > 1 %} - {% content_for "block", type: "slideshow-controls", id: "slideshow-controls" %} + {% content_for 'block', type: 'slideshow-controls', id: 'slideshow-controls' %} {% endif %} @@ -104,10 +535,9 @@ }, "blocks": [ { - "type": "heading", + "type": "text", "settings": { - "heading": "Image slide", - "heading_size": "h1" + "text": "

Image slide

" } }, { @@ -157,10 +587,9 @@ }, "blocks": [ { - "type": "heading", + "type": "text", "settings": { - "heading": "Image slide", - "heading_size": "h1" + "text": "

Image slide

" } }, { diff --git a/templates/404.json b/templates/404.json index 2bee746d..09e282fc 100644 --- a/templates/404.json +++ b/templates/404.json @@ -1,20 +1,19 @@ -{ + { "sections": { "group": { "type": "custom-section", "blocks": { "heading_HzQryn": { - "type": "heading", + "type": "text", "settings": { - "heading": "404", - "heading_size": "h0", + "text": "

404

", "alignment": "start" } }, "text_4KQrBa": { "type": "text", "settings": { - "text": "

Page not found.<\/p>", + "text": "

Page not found.

", "text_style": "", "alignment": "start" } diff --git a/templates/collection.json b/templates/collection.json index f24e8d42..6ccd603c 100644 --- a/templates/collection.json +++ b/templates/collection.json @@ -4,15 +4,10 @@ "type": "custom-section", "blocks": { "heading_mqAgUH": { - "type": "heading", + "type": "text", "settings": { - "heading": "{{ closest.collection.title }}", - "heading_size": "h1", - "alignment": "start", - "size": { - }, - "spacing": { - } + "text": "

{{ closest.collection.title }}

", + "alignment": "start" } } }, diff --git a/templates/index.json b/templates/index.json index 36236bb9..221bfa01 100644 --- a/templates/index.json +++ b/templates/index.json @@ -36,14 +36,6 @@ "color_scheme": "" }, "blocks": { - "heading_kCqTbY": { - "type": "heading", - "settings": { - "heading": "Image slide", - "heading_size": "h1", - "alignment": "start" - } - }, "text_BFbgT7": { "type": "text", "settings": { @@ -71,7 +63,6 @@ } }, "block_order": [ - "heading_kCqTbY", "text_BFbgT7", "link_U9yyFk" ] @@ -114,14 +105,6 @@ "color_scheme": "" }, "blocks": { - "heading_Uk7RcX": { - "type": "heading", - "settings": { - "heading": "Image slide", - "heading_size": "h1", - "alignment": "start" - } - }, "text_ertfGh": { "type": "text", "settings": { @@ -149,7 +132,6 @@ } }, "block_order": [ - "heading_Uk7RcX", "text_ertfGh", "link_cgTzUH" ] @@ -175,16 +157,11 @@ "custom_section_9k9gDW": { "type": "custom-section", "blocks": { - "heading_BHYEy3": { - "type": "heading", + "text_BHYEy3": { + "type": "text", "settings": { - "heading": "Featured collection", - "heading_size": "h2", - "alignment": "start", - "size": { - }, - "spacing": { - } + "text": "

Featured collection

", + "alignment": "start" } }, "product_grid_pe83Xe": { @@ -262,7 +239,7 @@ } }, "block_order": [ - "heading_BHYEy3", + "text_BHYEy3", "product_grid_pe83Xe" ], "settings": { @@ -279,10 +256,9 @@ "type": "custom-section", "blocks": { "41e666be-a592-4acf-9961-469beb09b1eb": { - "type": "heading", + "type": "text", "settings": { - "heading": "Collections", - "heading_size": "h2", + "text": "

Collections

", "alignment": "start", "size": { }, @@ -499,16 +475,11 @@ "color_scheme": "scheme-3" }, "blocks": { - "heading_zQL3DW": { - "type": "heading", + "text_zQL3DW": { + "type": "text", "settings": { - "heading": "Image with text", - "heading_size": "h1", - "alignment": "start", - "size": { - }, - "spacing": { - } + "text": "

Image with text

", + "alignment": "start" } }, "text_mEFQnx": { @@ -544,7 +515,7 @@ } }, "block_order": [ - "heading_zQL3DW", + "text_zQL3DW", "text_mEFQnx", "link_Jq4Bj3" ] @@ -569,16 +540,11 @@ "custom_section_UB43TV": { "type": "custom-section", "blocks": { - "heading_N7jmpy": { - "type": "heading", + "text_N7jmpy": { + "type": "text", "settings": { - "heading": "Multimedia collage", - "heading_size": "h2", - "alignment": "start", - "size": { - }, - "spacing": { - } + "text": "

Multimedia collage

", + "alignment": "start" } }, "group_LrBxgw": { @@ -730,7 +696,7 @@ } }, "block_order": [ - "heading_N7jmpy", + "text_N7jmpy", "group_LrBxgw" ], "settings": { @@ -750,16 +716,11 @@ "custom_section_MiX6gV": { "type": "custom-section", "blocks": { - "heading_y84T7H": { - "type": "heading", + "text_y84T7H": { + "type": "text", "settings": { - "heading": "Collapsible content", - "heading_size": "h2", - "alignment": "start", - "size": { - }, - "spacing": { - } + "text": "

Collapsible content

", + "alignment": "start" } }, "group_iabYjG": { @@ -808,18 +769,6 @@ "color_scheme": "" }, "blocks": { - "heading_YjGWBG": { - "type": "heading", - "settings": { - "heading": "Heading", - "heading_size": "h2", - "alignment": "start", - "size": { - }, - "spacing": { - } - } - }, "text_PkQ8zn": { "type": "text", "settings": { @@ -834,7 +783,6 @@ } }, "block_order": [ - "heading_YjGWBG", "text_PkQ8zn" ] }, @@ -888,18 +836,6 @@ "color_scheme": "" }, "blocks": { - "heading_UHa3p9": { - "type": "heading", - "settings": { - "heading": "Heading", - "heading_size": "h2", - "alignment": "start", - "size": { - }, - "spacing": { - } - } - }, "text_Vkg9zR": { "type": "text", "settings": { @@ -914,7 +850,6 @@ } }, "block_order": [ - "heading_UHa3p9", "text_Vkg9zR" ] }, @@ -968,18 +903,6 @@ "color_scheme": "" }, "blocks": { - "heading_zWmidf": { - "type": "heading", - "settings": { - "heading": "Heading", - "heading_size": "h2", - "alignment": "start", - "size": { - }, - "spacing": { - } - } - }, "text_knXnFF": { "type": "text", "settings": { @@ -994,7 +917,6 @@ } }, "block_order": [ - "heading_zWmidf", "text_knXnFF" ] }, @@ -1047,18 +969,6 @@ "color_scheme": "" }, "blocks": { - "heading_DgNRJD": { - "type": "heading", - "settings": { - "heading": "Heading", - "heading_size": "h2", - "alignment": "start", - "size": { - }, - "spacing": { - } - } - }, "text_PHPiVJ": { "type": "text", "settings": { @@ -1073,7 +983,6 @@ } }, "block_order": [ - "heading_DgNRJD", "text_PHPiVJ" ] }, @@ -1112,7 +1021,7 @@ } }, "block_order": [ - "heading_y84T7H", + "text_y84T7H", "group_iabYjG" ], "settings": { @@ -1132,16 +1041,11 @@ "custom_section_YmTwNm": { "type": "custom-section", "blocks": { - "heading_HebfQi": { - "type": "heading", + "text_HebfQi": { + "type": "text", "settings": { - "heading": "Subscribe to our newsletter", - "heading_size": "h2", - "alignment": "center", - "size": { - }, - "spacing": { - } + "text": "

Subscribe to our newsletter

", + "alignment": "center" } }, "text_b37mxx": { @@ -1167,7 +1071,7 @@ } }, "block_order": [ - "heading_HebfQi", + "text_HebfQi", "text_b37mxx", "newsletter_nfLQzr" ], @@ -1220,18 +1124,6 @@ "width": 50 } }, - "heading_RkUtPK": { - "type": "heading", - "settings": { - "heading": "Heading", - "heading_size": "h3", - "alignment": "center", - "size": { - }, - "spacing": { - } - } - }, "text_gJfdq3": { "type": "text", "settings": { @@ -1247,7 +1139,6 @@ }, "block_order": [ "icon_xwdHtL", - "heading_RkUtPK", "text_gJfdq3" ] }, @@ -1283,18 +1174,6 @@ "width": 50 } }, - "heading_hdw3ft": { - "type": "heading", - "settings": { - "heading": "Heading", - "heading_size": "h3", - "alignment": "center", - "size": { - }, - "spacing": { - } - } - }, "text_9dxFC9": { "type": "text", "settings": { @@ -1310,7 +1189,6 @@ }, "block_order": [ "icon_RqBeKL", - "heading_hdw3ft", "text_9dxFC9" ] }, @@ -1346,18 +1224,6 @@ "width": 50 } }, - "heading_QjnkWX": { - "type": "heading", - "settings": { - "heading": "Heading", - "heading_size": "h3", - "alignment": "center", - "size": { - }, - "spacing": { - } - } - }, "text_TNH97M": { "type": "text", "settings": { @@ -1373,7 +1239,6 @@ }, "block_order": [ "icon_zgezqB", - "heading_QjnkWX", "text_TNH97M" ] } diff --git a/templates/list-collections.json b/templates/list-collections.json index a84612da..8840b61d 100644 --- a/templates/list-collections.json +++ b/templates/list-collections.json @@ -4,15 +4,10 @@ "type": "custom-section", "blocks": { "collection-list-heading": { - "type": "heading", + "type": "text", "settings": { - "heading": "Collections", - "heading_size": "h1", - "alignment": "start", - "size": { - }, - "spacing": { - } + "text": "

Collections

", + "alignment": "start" } } },