From c25500b132fddbfb6f9dcf841b6e48ff68a6e725 Mon Sep 17 00:00:00 2001 From: Marija Scuric Date: Thu, 2 Feb 2023 19:01:14 +0000 Subject: [PATCH 01/14] Fix blurry product/collection grid images --- sections/collection-list.liquid | 2 ++ sections/featured-collection.liquid | 2 ++ sections/main-collection-product-grid.liquid | 2 ++ sections/main-list-collections.liquid | 2 ++ sections/main-search.liquid | 2 ++ sections/related-products.liquid | 2 ++ snippets/card-collection.liquid | 9 ++++++--- snippets/card-product.liquid | 8 ++++++-- 8 files changed, 24 insertions(+), 5 deletions(-) diff --git a/sections/collection-list.liquid b/sections/collection-list.liquid index 70b991fea45..71b8786eaf6 100644 --- a/sections/collection-list.liquid +++ b/sections/collection-list.liquid @@ -68,6 +68,8 @@ {% render 'card-collection', card_collection: block.settings.collection, media_aspect_ratio: section.settings.image_ratio, + columns_desktop: section.settings.columns_desktop, + columns_mobile: section.settings.columns_mobile, columns: columns %} diff --git a/sections/featured-collection.liquid b/sections/featured-collection.liquid index d6bb6b6635f..5d98779ea32 100644 --- a/sections/featured-collection.liquid +++ b/sections/featured-collection.liquid @@ -79,6 +79,8 @@ class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}" > {% render 'card-product', + columns_desktop: section.settings.columns_desktop, + columns_mobile: section.settings.columns_mobile, card_product: product, media_aspect_ratio: section.settings.image_ratio, show_secondary_image: section.settings.show_secondary_image, diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid index 03250b57150..80bf00eeb6a 100644 --- a/sections/main-collection-product-grid.liquid +++ b/sections/main-collection-product-grid.liquid @@ -158,6 +158,8 @@ {%- endif -%}
  • {% render 'card-product', + columns_desktop: section.settings.columns_desktop, + columns_mobile: section.settings.columns_mobile, card_product: product, media_aspect_ratio: section.settings.image_ratio, show_secondary_image: section.settings.show_secondary_image, diff --git a/sections/main-list-collections.liquid b/sections/main-list-collections.liquid index 67efec36362..b38c909315f 100644 --- a/sections/main-list-collections.liquid +++ b/sections/main-list-collections.liquid @@ -29,6 +29,8 @@ {%- for collection in collections -%}
  • {% render 'card-collection', + columns_desktop: section.settings.columns_desktop, + columns_mobile: section.settings.columns_mobile, card_collection: collection, media_aspect_ratio: section.settings.image_ratio, columns: 3 diff --git a/sections/main-search.liquid b/sections/main-search.liquid index 6795167771d..8c7986a72e5 100644 --- a/sections/main-search.liquid +++ b/sections/main-search.liquid @@ -222,6 +222,8 @@ {%- when 'product' -%} {%- capture product_settings -%}{%- if section.settings.product_show_vendor -%}vendor,{%- endif -%}title,price{%- endcapture -%} {% render 'card-product', + columns_desktop: section.settings.columns_desktop, + columns_mobile: section.settings.columns_mobile, card_product: item, media_aspect_ratio: section.settings.image_ratio, show_secondary_image: section.settings.show_secondary_image, diff --git a/sections/related-products.liquid b/sections/related-products.liquid index f9d2ec2f3b1..09de6fccfbc 100644 --- a/sections/related-products.liquid +++ b/sections/related-products.liquid @@ -37,6 +37,8 @@ {% for recommendation in recommendations.products %}
  • {% render 'card-product', + columns_desktop: section.settings.columns_desktop, + columns_mobile: section.settings.columns_mobile, card_product: recommendation, media_aspect_ratio: section.settings.image_ratio, show_secondary_image: section.settings.show_secondary_image, diff --git a/snippets/card-collection.liquid b/snippets/card-collection.liquid index 42dacd7e5be..cf47a0465cb 100644 --- a/snippets/card-collection.liquid +++ b/snippets/card-collection.liquid @@ -4,7 +4,8 @@ Accepts: - card_collection: {Object} Collection Liquid object - media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional) - - columns: {Number} + - columns_desktop: {Number} Number of columns on desktop. Default: 3 (optional) + - columns_mobile: {Number} Number of columns on mobile. Default: 2 (optional) - extend_height: {Boolean} Card height extends to available container space. Default: false (optional) - wrapper_class: {String} Wrapper class for card (optional) @@ -28,6 +29,8 @@ assign card_color_scheme = settings.collection_card_color_scheme assign card_style = settings.collection_card_style endif + assign desktop = columns_desktop | at_least: 1 + assign mobile = columns_mobile | at_least: 1 -%}
    @@ -62,8 +65,8 @@ " src="{{ card_collection.featured_image | image_url: width: 1500 }}" sizes=" - (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: columns }}px, - (min-width: 750px) {% if columns > 1 %}calc((100vw - 10rem) / 2){% else %}calc(100vw - 10rem){% endif %}, + (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: desktop }}px, + (min-width: 750px) {% if mobile > 1 %}calc((100vw - 10rem) / 2){% else %}calc(100vw - 10rem){% endif %}, calc(100vw - 3rem) " alt="" diff --git a/snippets/card-product.liquid b/snippets/card-product.liquid index 704636f239c..a642ac9e302 100644 --- a/snippets/card-product.liquid +++ b/snippets/card-product.liquid @@ -13,6 +13,8 @@ - section_id: {String} The ID of the section that contains this card. - horizontal_class: {Boolean} Add a card--horizontal class if set to true. Default: false (optional) - horizontal_quick_add: {Boolean} Changes the quick add button styles when set to true. Default: false (optional) + - columns_desktop: {Number} Number of columns on desktop. Default: 4 (optional) + - columns_mobile: {Number} Number of columns on mobile. Default: 2 (optional) Usage: {% render 'card-product', show_vendor: section.settings.show_vendor %} @@ -31,6 +33,8 @@ if ratio == 0 or ratio == null assign ratio = 1 endif + assign desktop = columns_desktop | at_least: 1 + assign mobile = columns_mobile | at_least: 1 -%}
    Date: Wed, 15 Mar 2023 11:49:27 +0000 Subject: [PATCH 02/14] Removes references to columns --- sections/collection-list.liquid | 9 +-------- sections/main-list-collections.liquid | 3 +-- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/sections/collection-list.liquid b/sections/collection-list.liquid index 71b8786eaf6..ab0e38d02b0 100644 --- a/sections/collection-list.liquid +++ b/sections/collection-list.liquid @@ -53,12 +53,6 @@ id="Slider-{{ section.id }}" role="list" > - {%- liquid - assign columns = section.blocks.size - if columns > 3 - assign columns = 3 - endif - -%} {%- for block in section.blocks -%}
  • {%- endfor -%} diff --git a/sections/main-list-collections.liquid b/sections/main-list-collections.liquid index b38c909315f..ed135550ce6 100644 --- a/sections/main-list-collections.liquid +++ b/sections/main-list-collections.liquid @@ -32,8 +32,7 @@ columns_desktop: section.settings.columns_desktop, columns_mobile: section.settings.columns_mobile, card_collection: collection, - media_aspect_ratio: section.settings.image_ratio, - columns: 3 + media_aspect_ratio: section.settings.image_ratio %}
    • {%- endfor -%} From 262e4e3a1c8ec8cde108b0deafbe6abc1c559334 Mon Sep 17 00:00:00 2001 From: Roi-Arthur <48017311+Roi-Arthur@users.noreply.github.com> Date: Fri, 14 Apr 2023 17:33:36 +0100 Subject: [PATCH 03/14] Update to Dawn 9.0.0 (#2531) 9.0.0 Update --- .github/workflows/ci.yml | 8 +- .prettierrc.json | 12 + .vscode/extensions.json | 2 +- .vscode/settings.json | 12 + assets/animations.js | 28 + assets/base.css | 447 ++++++++++-- assets/cart-drawer.js | 58 +- assets/cart-notification.js | 38 +- assets/cart.js | 76 +- assets/collage.css | 5 +- assets/collapsible-content.css | 2 +- assets/component-article-card.css | 2 +- assets/component-card.css | 106 ++- assets/component-cart-drawer.css | 11 +- assets/component-cart-items.css | 4 +- assets/component-cart-notification.css | 22 +- assets/component-cart.css | 6 +- assets/component-collection-hero.css | 7 +- assets/component-complementary-products.css | 13 +- assets/component-deferred-media.css | 15 +- assets/component-facets.css | 53 +- assets/component-image-with-text.css | 92 ++- assets/component-loading-overlay.css | 2 +- assets/component-localization-form.css | 303 ++++++++ assets/component-mega-menu.css | 1 - assets/component-menu-drawer.css | 48 +- assets/component-model-viewer-ui.css | 3 +- assets/component-newsletter.css | 4 +- assets/component-pickup-availability.css | 9 +- assets/component-predictive-search.css | 40 +- assets/component-rating.css | 3 +- assets/component-rte.css | 67 -- assets/component-search.css | 1 - assets/component-show-more.css | 3 +- assets/component-slider.css | 21 +- assets/component-slideshow.css | 5 +- assets/constants.js | 3 +- assets/customer.js | 43 +- assets/details-disclosure.js | 11 +- assets/details-modal.js | 22 +- assets/disclosure.css | 52 -- assets/facets.js | 55 +- assets/global.js | 394 ++++++---- assets/localization-form.js | 58 ++ assets/magnify.js | 39 +- assets/main-search.js | 14 +- assets/mask-blobs.css | 8 + assets/media-gallery.js | 176 ++--- assets/password-modal.js | 2 +- assets/pickup-availability.js | 177 ++--- assets/predictive-search.js | 70 +- assets/product-form.js | 170 +++-- assets/product-info.js | 168 ++--- assets/product-modal.js | 58 +- assets/product-model.js | 51 +- assets/pubsub.js | 14 +- assets/quick-add.css | 2 +- assets/quick-add.js | 194 ++--- assets/recipient-form.js | 142 ++++ assets/search-form.js | 17 +- assets/section-email-signup-banner.css | 3 +- assets/section-featured-blog.css | 3 +- assets/section-featured-product.css | 2 +- assets/section-footer.css | 139 +--- assets/section-image-banner.css | 19 +- assets/section-main-blog.css | 2 +- assets/section-main-product.css | 213 +++++- assets/section-multicolumn.css | 22 +- assets/share.js | 85 ++- assets/show-more.js | 9 +- assets/template-giftcard.css | 177 ++--- assets/theme-editor.js | 10 +- assets/video-section.css | 21 +- config/settings_schema.json | 13 +- layout/theme.liquid | 4 + locales/bg-BG.json | 34 +- locales/cs.json | 32 +- locales/cs.schema.json | 117 ++- locales/da.json | 34 +- locales/da.schema.json | 117 ++- locales/de.json | 34 +- locales/de.schema.json | 117 ++- locales/el.json | 34 +- locales/en.default.json | 37 +- locales/en.default.schema.json | 115 ++- locales/es.json | 34 +- locales/es.schema.json | 117 ++- locales/fi.json | 34 +- locales/fi.schema.json | 121 +++- locales/fr.json | 36 +- locales/fr.schema.json | 129 +++- locales/hr-HR.json | 34 +- locales/hu.json | 30 +- locales/id.json | 36 +- locales/it.json | 30 +- locales/it.schema.json | 117 ++- locales/ja.json | 30 +- locales/ja.schema.json | 117 ++- locales/ko.json | 34 +- locales/ko.schema.json | 117 ++- locales/lt-LT.json | 32 +- locales/nb.json | 36 +- locales/nb.schema.json | 125 +++- locales/nl.json | 34 +- locales/nl.schema.json | 117 ++- locales/pl.json | 36 +- locales/pl.schema.json | 119 +++- locales/pt-BR.json | 34 +- locales/pt-BR.schema.json | 117 ++- locales/pt-PT.json | 34 +- locales/pt-PT.schema.json | 117 ++- locales/ro-RO.json | 34 +- locales/ru.json | 30 +- locales/sk-SK.json | 34 +- locales/sl-SI.json | 34 +- locales/sv.json | 32 +- locales/sv.schema.json | 119 +++- locales/th.json | 38 +- locales/th.schema.json | 121 +++- locales/tr.json | 34 +- locales/tr.schema.json | 117 ++- locales/vi.json | 40 +- locales/vi.schema.json | 117 ++- locales/zh-CN.json | 34 +- locales/zh-CN.schema.json | 117 ++- locales/zh-TW.json | 34 +- locales/zh-TW.schema.json | 117 ++- release-notes.md | 21 + sections/announcement-bar.liquid | 208 ++++-- sections/apps.liquid | 2 +- sections/collage.liquid | 57 +- sections/collapsible-content.liquid | 9 +- sections/collection-list.liquid | 29 +- sections/contact-form.liquid | 14 +- sections/email-signup-banner.liquid | 1 - sections/featured-blog.liquid | 47 +- sections/featured-collection.liquid | 74 +- sections/featured-product.liquid | 32 +- sections/footer.liquid | 277 ++++---- sections/header-group.json | 2 + sections/header.liquid | 711 ++++++------------- sections/image-banner.liquid | 76 +- sections/image-with-text.liquid | 53 +- sections/main-addresses.liquid | 4 +- sections/main-collection-product-grid.liquid | 238 ++++--- sections/main-list-collections.liquid | 4 +- sections/main-order.liquid | 2 +- sections/main-page.liquid | 6 +- sections/main-product.liquid | 26 +- sections/main-search.liquid | 330 +++++---- sections/multicolumn.liquid | 48 +- sections/multirow.liquid | 3 +- sections/newsletter.liquid | 12 +- sections/page.liquid | 10 +- sections/related-products.liquid | 66 +- sections/rich-text.liquid | 26 +- sections/slideshow.liquid | 207 ++++-- sections/video.liquid | 190 +++-- snippets/buy-buttons.liquid | 27 +- snippets/card-product.liquid | 4 +- snippets/cart-notification.liquid | 3 +- snippets/country-localization.liquid | 45 ++ snippets/facets.liquid | 3 +- snippets/gift-card-recipient-form.liquid | 198 ++++++ snippets/header-drawer.liquid | 298 ++++++++ snippets/header-dropdown-menu.liquid | 94 +++ snippets/header-mega-menu.liquid | 88 +++ snippets/header-search.liquid | 91 +++ snippets/icon-with-text.liquid | 6 +- snippets/language-localization.liquid | 40 ++ snippets/mask-arch.liquid | 5 + snippets/pagination.liquid | 3 +- snippets/product-thumbnail.liquid | 11 + templates/gift_card.liquid | 131 ++-- templates/index.json | 3 +- translation.yml | 5 +- 176 files changed, 8158 insertions(+), 3413 deletions(-) create mode 100644 .prettierrc.json create mode 100644 .vscode/settings.json create mode 100644 assets/animations.js create mode 100644 assets/component-localization-form.css delete mode 100644 assets/component-rte.css delete mode 100644 assets/disclosure.css create mode 100644 assets/localization-form.js create mode 100644 assets/mask-blobs.css create mode 100644 assets/recipient-form.js create mode 100644 snippets/country-localization.liquid create mode 100644 snippets/gift-card-recipient-form.liquid create mode 100644 snippets/header-drawer.liquid create mode 100644 snippets/header-dropdown-menu.liquid create mode 100644 snippets/header-mega-menu.liquid create mode 100644 snippets/header-search.liquid create mode 100644 snippets/language-localization.liquid create mode 100644 snippets/mask-arch.liquid diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 346d62ab98e..5eee9633412 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -5,21 +5,21 @@ jobs: name: Lighthouse runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 + - uses: actions/checkout@v3 - name: Lighthouse - uses: shopify/lighthouse-ci-action@v1 + uses: shopify/lighthouse-ci-action@v1.1.1 with: store: ${{ secrets.SHOP_STORE_OS2 }} password: ${{ secrets.SHOP_PASSWORD_OS2 }} access_token: ${{ secrets.SHOP_ACCESS_TOKEN }} - product_handle: puppy collection_handle: all lhci_github_app_token: ${{ secrets.LHCI_GITHUB_TOKEN }} + pull_theme: ${{ secrets.SHOP_PULL_THEME }} theme-check: name: Theme Check runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 + - uses: actions/checkout@v3 - name: Theme Check uses: shopify/theme-check-action@v1 with: diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 00000000000..a7785dfc0e2 --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,12 @@ +{ + "printWidth": 120, + "singleQuote": true, + "overrides": [ + { + "files": "*.liquid", + "options": { + "singleQuote": false + } + } + ] +} diff --git a/.vscode/extensions.json b/.vscode/extensions.json index f2e1a7d0fa3..f6480c2e7a5 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,3 +1,3 @@ { - "recommendations": ["shopify.theme-check-vscode"] + "recommendations": ["shopify.theme-check-vscode", "esbenp.prettier-vscode"] } diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000000..0689f6914bd --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,12 @@ +{ + "editor.formatOnSave": false, + "[javascript]": { + "editor.formatOnSave": true + }, + "[css]": { + "editor.formatOnSave": true + }, + "[liquid]": { + "editor.formatOnSave": true + } +} diff --git a/assets/animations.js b/assets/animations.js new file mode 100644 index 00000000000..e3b560cf9e6 --- /dev/null +++ b/assets/animations.js @@ -0,0 +1,28 @@ +const SCROLL_ANIMATION_TRIGGER_CLASSNAME = 'scroll-trigger'; +const SCROLL_ANIMATION_ACTIVE_CLASSNAME = 'scroll-trigger--active'; + +function onIntersection(elements, observer) { + elements.forEach((element, index) => { + if (element.isIntersecting) { + const elementTarget = element.target; + elementTarget.classList.add(SCROLL_ANIMATION_ACTIVE_CLASSNAME); + if (elementTarget.hasAttribute('data-cascade')) + elementTarget.setAttribute('style', `--animation-order: ${index};`); + observer.unobserve(elementTarget); + } + }); +} + +function initializeScrollAnimationTrigger(rootEl = document) { + const animationTriggerElements = Array.from(rootEl.getElementsByClassName(SCROLL_ANIMATION_TRIGGER_CLASSNAME)); + if (animationTriggerElements.length === 0) return; + + const observer = new IntersectionObserver(onIntersection, { + threshold: 0.1, + }); + animationTriggerElements.forEach((element) => observer.observe(element)); +} + +window.addEventListener('DOMContentLoaded', () => initializeScrollAnimationTrigger()); + +document.addEventListener('shopify:section:load', (event) => initializeScrollAnimationTrigger(event.target)); diff --git a/assets/base.css b/assets/base.css index 4f67f0c2159..779890416d5 100644 --- a/assets/base.css +++ b/assets/base.css @@ -249,6 +249,14 @@ html.no-js .no-js-hidden { padding: 0 1.5rem; } +body:has(.section-header .drawer-menu) .announcement-bar-section slideshow-component { + max-width: 100%; +} + +.page-width.drawer-menu { + max-width: 100%; +} + .page-width-desktop { padding: 0; margin: 0 auto; @@ -259,6 +267,11 @@ html.no-js .no-js-hidden { padding: 0 5rem; } + .header.page-width { + padding-left: 3.2rem; + padding-right: 3.2rem; + } + .page-width--narrow { padding: 0 9rem; } @@ -273,6 +286,11 @@ html.no-js .no-js-hidden { } @media screen and (min-width: 990px) { + .header:not(.drawer-menu).page-width { + padding-left: 5rem; + padding-right: 5rem; + } + .page-width--narrow { max-width: 72.6rem; padding: 0; @@ -536,7 +554,7 @@ blockquote { .caption-with-letter-spacing--medium { font-size: 1.2rem; - letter-spacing: .16rem; + letter-spacing: 0.16rem; } .caption-with-letter-spacing--large { @@ -727,18 +745,31 @@ details > * { --duration-short: 100ms; --duration-default: 200ms; --duration-long: 500ms; + --duration-extra-long: 600ms; + --animation-slide-in: slideIn var(--duration-extra-long) cubic-bezier(0,0,.3,1) forwards; } .underlined-link, -.customer a { - color: rgba(var(--color-link), var(--alpha-link)); +.customer a, +.inline-richtext a { text-underline-offset: 0.3rem; text-decoration-thickness: 0.1rem; transition: text-decoration-thickness ease 100ms; } +.underlined-link, +.customer a { + color: rgba(var(--color-link), var(--alpha-link)); +} + +.inline-richtext a, +.rte.inline-richtext a { + color: currentColor; +} + .underlined-link:hover, -.customer a:hover { +.customer a:hover, +.inline-richtext a:hover { color: rgb(var(--color-link)); text-decoration-thickness: 0.2rem; } @@ -828,8 +859,7 @@ summary::-webkit-details-marker { *:focus-visible { outline: 0.2rem solid rgba(var(--color-foreground), 0.5); outline-offset: 0.3rem; - box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), - 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3); + box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3); } /* Fallback - for browsers that don't support :focus-visible, a fallback is set for :focus */ @@ -837,8 +867,7 @@ summary::-webkit-details-marker { .no-js *:focus { outline: 0.2rem solid rgba(var(--color-foreground), 0.5); outline-offset: 0.3rem; - box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), - 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3); + box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3); } /* Negate the fallback side-effect for browsers that support :focus-visible */ @@ -882,16 +911,14 @@ summary::-webkit-details-marker { .focus-offset:focus-visible { outline: 0.2rem solid rgba(var(--color-foreground), 0.5); outline-offset: 1rem; - box-shadow: 0 0 0 1rem rgb(var(--color-background)), - 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3); + box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3); } .focus-offset.focused, .no-js .focus-offset:focus { outline: 0.2rem solid rgba(var(--color-foreground), 0.5); outline-offset: 1rem; - box-shadow: 0 0 0 1rem rgb(var(--color-background)), - 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3); + box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3); } .no-js .focus-offset:focus:not(:focus-visible) { @@ -979,7 +1006,6 @@ summary::-webkit-details-marker { } .title-wrapper-with-link a { - color: rgb(var(--color-link)); margin-top: 0; flex-shrink: 0; } @@ -1109,6 +1135,16 @@ summary::-webkit-details-marker { box-sizing: content-box; margin: 0; } + + .slider--tablet .scroll-trigger.animate--slide-in, + .slider--mobile .scroll-trigger.animate--slide-in { + animation: none; + opacity: 1; + } + + .scroll-trigger--active .slider--tablet { + animation: var(--animation-slide-in); + } } @media screen and (min-width: 990px) { @@ -1136,6 +1172,15 @@ summary::-webkit-details-marker { width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2); max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2); } + + .slider--desktop .scroll-trigger.animate--slide-in { + animation: none; + opacity: 1; + } + + .scroll-trigger--active .slider--desktop { + animation: var(--animation-slide-in); + } } @media screen and (min-width: 990px) { @@ -1184,7 +1229,7 @@ summary::-webkit-details-marker { } .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item, - .slider--mobile.grid--peek.grid--1-col-tablet-down .grid__item { + .slider--mobile.grid--peek.grid--1-col-tablet-down .grid__item { width: calc(100% - var(--grid-mobile-horizontal-spacing) - 3rem); } } @@ -1291,7 +1336,7 @@ deferred-media { .shopify-challenge__button, .customer button, button.shopify-payment-button__button--unbranded, -.shopify-payment-button [role="button"], +.shopify-payment-button [role='button'], .cart__dynamic-checkout-buttons [role='button'], .cart__dynamic-checkout-buttons iframe { --shadow-horizontal-offset: var(--buttons-shadow-horizontal-offset); @@ -1318,7 +1363,8 @@ button.shopify-payment-button__button--unbranded { } .cart__dynamic-checkout-buttons iframe { - box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-base-text), var(--shadow-opacity)); + box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) + rgba(var(--color-base-text), var(--shadow-opacity)); } .button, @@ -1344,7 +1390,7 @@ button.shopify-payment-button__button--unbranded { .shopify-challenge__button:before, .customer button:before, .shopify-payment-button__button--unbranded:before, -.shopify-payment-button [role="button"]:before, +.shopify-payment-button [role='button']:before, .cart__dynamic-checkout-buttons [role='button']:before { content: ''; position: absolute; @@ -1354,7 +1400,8 @@ button.shopify-payment-button__button--unbranded { left: 0; z-index: -1; border-radius: var(--buttons-radius-outset); - box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity)); + box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) + rgba(var(--color-shadow), var(--shadow-opacity)); } .button:after, @@ -1369,7 +1416,8 @@ button.shopify-payment-button__button--unbranded { left: var(--buttons-border-width); z-index: 1; border-radius: var(--buttons-radius); - box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(var(--color-button-text), var(--border-opacity)), + box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) + rgba(var(--color-button-text), var(--border-opacity)), 0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background)); transition: box-shadow var(--duration-short) ease; } @@ -1379,7 +1427,8 @@ button.shopify-payment-button__button--unbranded { .customer button:hover::after, .shopify-payment-button__button--unbranded:hover::after { --border-offset: 1.3px; - box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(var(--color-button-text), var(--border-opacity)), + box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) + rgba(var(--color-button-text), var(--border-opacity)), 0 0 0 calc(var(--buttons-border-width) + 1px) rgba(var(--color-button), var(--alpha-button-background)); } @@ -1391,18 +1440,17 @@ button.shopify-payment-button__button--unbranded { .button:focus, .button.focused, .shopify-payment-button__button--unbranded:focus-visible, -.shopify-payment-button [role="button"]:focus-visible, +.shopify-payment-button [role='button']:focus-visible, .shopify-payment-button__button--unbranded:focus, -.shopify-payment-button [role="button"]:focus { +.shopify-payment-button [role='button']:focus { outline: 0; - box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), - 0 0 0 0.5rem rgba(var(--color-foreground), 0.5), + box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.5), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3); } .button:focus:not(:focus-visible):not(.focused), .shopify-payment-button__button--unbranded:focus:not(:focus-visible):not(.focused), -.shopify-payment-button [role="button"]:focus:not(:focus-visible):not(.focused) { +.shopify-payment-button [role='button']:focus:not(:focus-visible):not(.focused) { box-shadow: inherit; } @@ -1560,7 +1608,8 @@ details[open] > .share-button__fallback { bottom: 0; left: 0; border-radius: var(--inputs-radius-outset); - box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius) rgba(var(--color-base-text), var(--inputs-shadow-opacity)); + box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) + var(--inputs-shadow-blur-radius) rgba(var(--color-base-text), var(--inputs-shadow-opacity)); z-index: -1; } @@ -1625,9 +1674,9 @@ details[open] > .share-button__fallback { .share-button__fallback .field__input:focus, .share-button__fallback .field__input:-webkit-autofill { - outline: 0.2rem solid rgba(var(--color-foreground),.5); + outline: 0.2rem solid rgba(var(--color-foreground), 0.5); outline-offset: 0.1rem; - box-shadow: 0 0 0 0.1rem rgb(var(--color-background)),0 0 0.5rem 0.4rem rgba(var(--color-foreground),.3); + box-shadow: 0 0 0 0.1rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3); } .share-button__fallback .field__input { @@ -1697,7 +1746,8 @@ details[open] > .share-button__fallback { bottom: 0; left: 0; border-radius: var(--inputs-radius-outset); - box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius) rgba(var(--color-base-text), var(--inputs-shadow-opacity)); + box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) + var(--inputs-shadow-blur-radius) rgba(var(--color-base-text), var(--inputs-shadow-opacity)); z-index: -1; } @@ -1734,7 +1784,8 @@ details[open] > .share-button__fallback { .customer .field:hover.field:after, .customer select:hover.select:after, .localization-form__select:hover.localization-form__select:after { - box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground),var(--inputs-border-opacity)); + box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) + rgba(var(--color-foreground), var(--inputs-border-opacity)); outline: 0; border-radius: var(--inputs-radius); } @@ -1825,8 +1876,7 @@ details[open] > .share-button__fallback { margin-bottom: 0; pointer-events: none; position: absolute; - transition: top var(--duration-short) ease, - font-size var(--duration-short) ease; + transition: top var(--duration-short) ease, font-size var(--duration-short) ease; color: rgba(var(--color-foreground), 0.75); letter-spacing: 0.1rem; line-height: 1.5; @@ -2004,7 +2054,8 @@ input[type='checkbox'] { bottom: 0; left: 0; border-radius: var(--inputs-radius-outset); - box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius) rgba(var(--color-base-text), var(--inputs-shadow-opacity)); + box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) + var(--inputs-shadow-blur-radius) rgba(var(--color-base-text), var(--inputs-shadow-opacity)); z-index: -1; } @@ -2201,22 +2252,83 @@ product-info .loading-overlay:not(.hidden) ~ *, line-height: calc(1 + 0.1 / var(--font-body-scale)); } -/* section-announcement-bar */ -.announcement-bar { +/* utility-bar */ +.utility-bar { + height: 100%; +} + +.utility-bar--bottom-border { border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08); +} + +.announcement-bar, +.announcement-bar__announcement { color: rgb(var(--color-foreground)); + width: 100%; + height: 100%; + display: flex; + justify-content: center; + flex-wrap: wrap; + align-content: center; +} + +.announcement-bar .slider--everywhere { + margin-bottom: 0; +} + +.announcement-bar-slider, +.announcement-bar-slider .slider { + width: 100%; +} + +.announcement-bar .slider-button--next { + margin-right: -1.6rem; + min-width: 44px; +} + +.announcement-bar .slider-button--prev { + margin-left: -1.6rem; + min-width: 44px; +} + +.announcement-bar .slider-button--next:focus-visible, +.announcement-bar .slider-button--prev:focus-visible { + outline-offset: -0.3rem; + box-shadow: 0 0 0 -0.2rem rgb(var(--color-foreground)); +} + +@media screen and (min-width: 750px) { + .announcement-bar .slider-button--next { + margin-right: -3.8rem; + } + + .announcement-bar .slider-button--prev { + margin-left: -3.8rem; + } +} + +@media screen and (min-width: 990px) { + body:has(.section-header .header:not(.drawer-menu)) .announcement-bar-section .announcement-bar .slider-button--next { + margin-right: -1.8rem; + } + + body:has(.section-header .header:not(.drawer-menu)) .announcement-bar-section .announcement-bar .slider-button--prev { + margin-left: -1.8rem; + } } .announcement-bar__link { - display: block; + display: flex; width: 100%; padding: 1rem 0; text-decoration: none; + height: 100%; + justify-content: center; + align-items: center; } .announcement-bar__link:hover { - color: rgb(var(--color-foreground)); - background-color: rgba(var(--color-card-hover), 0.06); + text-decoration: underline; } .announcement-bar__link .icon-arrow { @@ -2232,6 +2344,7 @@ product-info .loading-overlay:not(.hidden) ~ *, } .announcement-bar__message { + text-align: center; padding: 1rem 0; margin: 0; letter-spacing: 0.1rem; @@ -2280,12 +2393,22 @@ product-info .loading-overlay:not(.hidden) ~ *, .header { display: grid; - grid-template-areas: 'left-icon heading icons'; + grid-template-areas: 'left-icons heading icons'; grid-template-columns: 1fr 2fr 1fr; align-items: center; } +@media screen and (max-width: 749px) { + .header--has-app { + grid-template-columns: auto 1fr auto; + } +} + @media screen and (min-width: 990px) { + .header { + grid-template-columns: 1fr auto 1fr; + } + .header--top-left, .header--middle-left:not(.header--has-menu) { grid-template-areas: @@ -2294,13 +2417,20 @@ product-info .loading-overlay:not(.hidden) ~ *, grid-template-columns: 1fr auto; } + .header--top-left.drawer-menu, + .header--middle-left.drawer-menu { + grid-template-areas: 'navigation heading icons'; + grid-template-columns: auto 1fr auto; + column-gap: 1rem; + } + .header--middle-left { grid-template-areas: 'heading navigation icons'; grid-template-columns: auto auto 1fr; column-gap: 2rem; } - .header--middle-center { + .header--middle-center:not(.drawer-menu) { grid-template-areas: 'navigation heading icons'; grid-template-columns: 1fr auto 1fr; column-gap: 2rem; @@ -2312,10 +2442,15 @@ product-info .loading-overlay:not(.hidden) ~ *, .header--top-center { grid-template-areas: - 'left-icon heading icons' + 'left-icons heading icons' 'navigation navigation navigation'; } + .header--top-center.drawer-menu { + grid-template-areas: 'left-icons heading icons'; + grid-template-columns: 1fr auto 1fr; + } + .header:not(.header--middle-left, .header--middle-center) .header__inline-menu { margin-top: 1.05rem; } @@ -2358,7 +2493,12 @@ product-info .loading-overlay:not(.hidden) ~ *, .header__heading-logo { height: auto; + max-width: 100%; +} + +.header__heading-logo-wrapper { width: 100%; + display: inline-block; transition: width 0.3s cubic-bezier(0.52, 0, 0.61, 0.99); } @@ -2380,7 +2520,8 @@ product-info .loading-overlay:not(.hidden) ~ *, } @media screen and (min-width: 990px) { - .header__heading-link { + .header--middle-left .header__heading-link, + .header--top-left .header__heading-link { margin-left: -0.75rem; } @@ -2389,6 +2530,12 @@ product-info .loading-overlay:not(.hidden) ~ *, justify-self: start; } + .header--middle-center .header__heading-link, + .header--middle-center .header__heading { + justify-self: center; + text-align: center; + } + .header--top-center .header__heading-link, .header--top-center .header__heading { justify-self: center; @@ -2403,6 +2550,12 @@ product-info .loading-overlay:not(.hidden) ~ *, justify-self: end; } +.header__icons .shopify-app-block { + max-width: 4.4rem; + max-height: 4.4rem; + overflow: hidden; +} + .header__icon:not(.header__icon--summary), .header__icon span { display: flex; @@ -2446,14 +2599,8 @@ product-info .loading-overlay:not(.hidden) ~ *, margin-right: -1.2rem; } -@media screen and (max-width: 989px) { - menu-drawer ~ .header__icons .header__icon--account { - display: none; - } -} - -.header__icon--menu[aria-expanded="true"]::before { - content: ""; +.header__icon--menu[aria-expanded='true']::before { + content: ''; top: 100%; left: 0; height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%))); @@ -2469,10 +2616,18 @@ menu-drawer + .header__search { } .header > .header__search { - grid-area: left-icon; + grid-area: left-icons; justify-self: start; } +.header--top-center.drawer-menu > .header__search { + margin-left: 3.2rem; +} + +.header--top-center header-drawer { + grid-area: left-icons; +} + .header:not(.header--has-menu) * > .header__search { display: none; } @@ -2549,11 +2704,11 @@ details[open] .modal-overlay::after { } .search-modal__content-bottom { - bottom: calc((var(--inputs-margin-offset) / 2) ); + bottom: calc((var(--inputs-margin-offset) / 2)); } .search-modal__content-top { - top: calc((var(--inputs-margin-offset) / 2) ); + top: calc((var(--inputs-margin-offset) / 2)); } .search-modal__form { @@ -2707,8 +2862,7 @@ details[open] > .header__menu-item .icon-caret { } .header__submenu { - transition: opacity var(--duration-default) ease, - transform var(--duration-default) ease; + transition: opacity var(--duration-default) ease, transform var(--duration-default) ease; } .global-settings-popup, @@ -2717,7 +2871,8 @@ details[open] > .header__menu-item .icon-caret { border-color: rgba(var(--color-foreground), var(--popup-border-opacity)); border-style: solid; border-width: var(--popup-border-width); - box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow), var(--popup-shadow-opacity)); + box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) + rgba(var(--color-shadow), var(--popup-shadow-opacity)); z-index: -1; } @@ -2772,7 +2927,8 @@ details-disclosure > details { } .overflow-hidden-mobile, -.overflow-hidden-tablet { +.overflow-hidden-tablet, +.overflow-hidden-desktop { overflow: hidden; } @@ -2847,10 +3003,8 @@ details-disclosure > details { bottom: calc(var(--text-boxes-border-width) * -1); left: calc(var(--text-boxes-border-width) * -1); border-radius: var(--text-boxes-radius); - box-shadow: var(--text-boxes-shadow-horizontal-offset) - var(--text-boxes-shadow-vertical-offset) - var(--text-boxes-shadow-blur-radius) - rgba(var(--color-shadow), var(--text-boxes-shadow-opacity)); + box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset) + var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity)); z-index: -1; } @@ -2887,7 +3041,8 @@ details-disclosure > details { bottom: calc(var(--media-border-width) * -1); left: calc(var(--media-border-width) * -1); border-radius: var(--media-radius); - box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius) rgba(var(--color-shadow), var(--media-shadow-opacity)); + box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius) + rgba(var(--color-shadow), var(--media-shadow-opacity)); z-index: -1; pointer-events: none; } @@ -2909,7 +3064,9 @@ details-disclosure > details { .content-container--full-width, .global-media-settings--full-width, -.global-media-settings--full-width img { +.global-media-settings--full-width img, +.global-media-settings--full-width video, +.global-media-settings--full-width iframe { border-radius: 0; border-left: none; border-right: none; @@ -2975,9 +3132,9 @@ details-disclosure > details { .button:focus, .button.focused, .shopify-payment-button__button--unbranded:focus-visible, - .shopify-payment-button [role="button"]:focus-visible, + .shopify-payment-button [role='button']:focus-visible, .shopify-payment-button__button--unbranded:focus, - .shopify-payment-button [role="button"]:focus { + .shopify-payment-button [role='button']:focus { outline: solid transparent 1px; } @@ -2993,3 +3150,163 @@ details-disclosure > details { outline: transparent solid 1px; } } + +.rte:after { + clear: both; + content: ''; + display: block; +} + +.rte > p:first-child { + margin-top: 0; +} + +.rte > p:last-child { + margin-bottom: 0; +} + +.rte table { + table-layout: fixed; +} + +@media screen and (min-width: 750px) { + .rte table td { + padding-left: 1.2rem; + padding-right: 1.2rem; + } +} + +.rte img { + height: auto; + max-width: 100%; + border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity)); + border-radius: var(--media-radius); + box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius) + rgba(var(--color-shadow), var(--media-shadow-opacity)); + margin-bottom: var(--media-shadow-vertical-offset); +} + +.rte ul, +.rte ol { + list-style-position: inside; + padding-left: 2rem; +} + +.rte li { + list-style: inherit; +} + +.rte li:last-child { + margin-bottom: 0; +} + +.rte a { + color: rgba(var(--color-link), var(--alpha-link)); + text-underline-offset: 0.3rem; + text-decoration-thickness: 0.1rem; + transition: text-decoration-thickness var(--duration-short) ease; +} + +.rte a:hover { + color: rgb(var(--color-link)); + text-decoration-thickness: 0.2rem; +} + +.rte blockquote { + display: inline-flex; +} + +.rte blockquote > * { + margin: -0.5rem 0 -0.5rem 0; +} + +/* Image mask global styles */ + +.shape--mask { + display: block; + height: 0; + width: 0; +} + +.shape--arch { + clip-path: url('#Shape-Arch'); +} + +.shape--blob { + clip-path: polygon(var(--shape--blob-1)); +} + +.shape--chevronleft { + clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 15% 100%, 0% 50%, 15% 0%); +} + +.shape--chevronright { + clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 0% 100%, 15% 50%, 0% 0%); +} + +.shape--circle { + clip-path: circle(closest-side); +} + +.shape--diamond { + clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); +} + +.shape--parallelogram { + clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%); +} + +.shape--round { + clip-path: ellipse(45% 45% at 50% 50%); +} + +/* Animations */ + +@media (prefers-reduced-motion: no-preference) { + .animate--ambient > img, + .animate--ambient > svg { + animation: animateAmbient 30s linear infinite; + } + + @keyframes animateAmbient { + 0% { + transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2); + } + 100% { + transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2); + } + } + + .scroll-trigger.animate--fade-in, + .scroll-trigger.animate--slide-in { + transition: opacity var(--duration-extra-long) ease-out; + opacity: 0; + } + + .scroll-trigger--active.animate--fade-in { + opacity: 1; + } + + .scroll-trigger--active.animate--slide-in { + animation: var(--animation-slide-in); + animation-delay: calc(var(--animation-order) * 75ms); + } + + /* Turn off animations if JS is turned off. */ + .no-js .scroll-trigger.animate--fade-in, + .no-js .scroll-trigger.animate--slide-in { + opacity: 1; + animation: none; + } + + @keyframes slideIn { + from { + transform: translateY(2rem); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } + } +} diff --git a/assets/cart-drawer.js b/assets/cart-drawer.js index 0a4b61b227b..048e43232d2 100644 --- a/assets/cart-drawer.js +++ b/assets/cart-drawer.js @@ -13,7 +13,7 @@ class CartDrawer extends HTMLElement { cartLink.setAttribute('aria-haspopup', 'dialog'); cartLink.addEventListener('click', (event) => { event.preventDefault(); - this.open(cartLink) + this.open(cartLink); }); cartLink.addEventListener('keydown', (event) => { if (event.code.toUpperCase() === 'SPACE') { @@ -28,13 +28,21 @@ class CartDrawer extends HTMLElement { const cartDrawerNote = this.querySelector('[id^="Details-"] summary'); if (cartDrawerNote && !cartDrawerNote.hasAttribute('role')) this.setSummaryAccessibility(cartDrawerNote); // here the animation doesn't seem to always get triggered. A timeout seem to help - setTimeout(() => {this.classList.add('animate', 'active')}); + setTimeout(() => { + this.classList.add('animate', 'active'); + }); - this.addEventListener('transitionend', () => { - const containerToTrapFocusOn = this.classList.contains('is-empty') ? this.querySelector('.drawer__inner-empty') : document.getElementById('CartDrawer'); - const focusElement = this.querySelector('.drawer__inner') || this.querySelector('.drawer__close'); - trapFocus(containerToTrapFocusOn, focusElement); - }, { once: true }); + this.addEventListener( + 'transitionend', + () => { + const containerToTrapFocusOn = this.classList.contains('is-empty') + ? this.querySelector('.drawer__inner-empty') + : document.getElementById('CartDrawer'); + const focusElement = this.querySelector('.drawer__inner') || this.querySelector('.drawer__close'); + trapFocus(containerToTrapFocusOn, focusElement); + }, + { once: true } + ); document.body.classList.add('overflow-hidden'); } @@ -49,7 +57,7 @@ class CartDrawer extends HTMLElement { cartDrawerNote.setAttribute('role', 'button'); cartDrawerNote.setAttribute('aria-expanded', 'false'); - if(cartDrawerNote.nextElementSibling.getAttribute('id')) { + if (cartDrawerNote.nextElementSibling.getAttribute('id')) { cartDrawerNote.setAttribute('aria-controls', cartDrawerNote.nextElementSibling.id); } @@ -61,13 +69,15 @@ class CartDrawer extends HTMLElement { } renderContents(parsedState) { - this.querySelector('.drawer__inner').classList.contains('is-empty') && this.querySelector('.drawer__inner').classList.remove('is-empty'); + this.querySelector('.drawer__inner').classList.contains('is-empty') && + this.querySelector('.drawer__inner').classList.remove('is-empty'); this.productId = parsedState.id; - this.getSectionsToRender().forEach((section => { - const sectionElement = section.selector ? document.querySelector(section.selector) : document.getElementById(section.id); - sectionElement.innerHTML = - this.getSectionInnerHTML(parsedState.sections[section.id], section.selector); - })); + this.getSectionsToRender().forEach((section) => { + const sectionElement = section.selector + ? document.querySelector(section.selector) + : document.getElementById(section.id); + sectionElement.innerHTML = this.getSectionInnerHTML(parsedState.sections[section.id], section.selector); + }); setTimeout(() => { this.querySelector('#CartDrawer-Overlay').addEventListener('click', this.close.bind(this)); @@ -76,27 +86,23 @@ class CartDrawer extends HTMLElement { } getSectionInnerHTML(html, selector = '.shopify-section') { - return new DOMParser() - .parseFromString(html, 'text/html') - .querySelector(selector).innerHTML; + return new DOMParser().parseFromString(html, 'text/html').querySelector(selector).innerHTML; } getSectionsToRender() { return [ { id: 'cart-drawer', - selector: '#CartDrawer' + selector: '#CartDrawer', }, { - id: 'cart-icon-bubble' - } + id: 'cart-icon-bubble', + }, ]; } getSectionDOM(html, selector = '.shopify-section') { - return new DOMParser() - .parseFromString(html, 'text/html') - .querySelector(selector); + return new DOMParser().parseFromString(html, 'text/html').querySelector(selector); } setActiveElement(element) { @@ -112,13 +118,13 @@ class CartDrawerItems extends CartItems { { id: 'CartDrawer', section: 'cart-drawer', - selector: '.drawer__inner' + selector: '.drawer__inner', }, { id: 'cart-icon-bubble', section: 'cart-icon-bubble', - selector: '.shopify-section' - } + selector: '.shopify-section', + }, ]; } } diff --git a/assets/cart-notification.js b/assets/cart-notification.js index 2474ce60b2a..7e8a06cdf2e 100644 --- a/assets/cart-notification.js +++ b/assets/cart-notification.js @@ -15,10 +15,14 @@ class CartNotification extends HTMLElement { open() { this.notification.classList.add('animate', 'active'); - this.notification.addEventListener('transitionend', () => { - this.notification.focus(); - trapFocus(this.notification); - }, { once: true }); + this.notification.addEventListener( + 'transitionend', + () => { + this.notification.focus(); + trapFocus(this.notification); + }, + { once: true } + ); document.body.addEventListener('click', this.onBodyClick); } @@ -31,14 +35,16 @@ class CartNotification extends HTMLElement { } renderContents(parsedState) { - this.cartItemKey = parsedState.key; - this.getSectionsToRender().forEach((section => { - document.getElementById(section.id).innerHTML = - this.getSectionInnerHTML(parsedState.sections[section.id], section.selector); - })); + this.cartItemKey = parsedState.key; + this.getSectionsToRender().forEach((section) => { + document.getElementById(section.id).innerHTML = this.getSectionInnerHTML( + parsedState.sections[section.id], + section.selector + ); + }); - if (this.header) this.header.reveal(); - this.open(); + if (this.header) this.header.reveal(); + this.open(); } getSectionsToRender() { @@ -48,18 +54,16 @@ class CartNotification extends HTMLElement { selector: `[id="cart-notification-product-${this.cartItemKey}"]`, }, { - id: 'cart-notification-button' + id: 'cart-notification-button', }, { - id: 'cart-icon-bubble' - } + id: 'cart-icon-bubble', + }, ]; } getSectionInnerHTML(html, selector = '.shopify-section') { - return new DOMParser() - .parseFromString(html, 'text/html') - .querySelector(selector).innerHTML; + return new DOMParser().parseFromString(html, 'text/html').querySelector(selector).innerHTML; } handleBodyClick(evt) { diff --git a/assets/cart.js b/assets/cart.js index 746c0d522ec..51a61f17df0 100644 --- a/assets/cart.js +++ b/assets/cart.js @@ -15,7 +15,8 @@ customElements.define('cart-remove-button', CartRemoveButton); class CartItems extends HTMLElement { constructor() { super(); - this.lineItemStatusElement = document.getElementById('shopping-cart-line-item-status') || document.getElementById('CartDrawer-LineItemStatus'); + this.lineItemStatusElement = + document.getElementById('shopping-cart-line-item-status') || document.getElementById('CartDrawer-LineItemStatus'); const debouncedOnChange = debounce((event) => { this.onChange(event); @@ -46,14 +47,14 @@ class CartItems extends HTMLElement { } onCartUpdate() { - fetch('/cart?section_id=main-cart-items') + fetch(`${routes.cart_url}?section_id=main-cart-items`) .then((response) => response.text()) .then((responseText) => { const html = new DOMParser().parseFromString(responseText, 'text/html'); const sourceQty = html.querySelector('cart-items'); this.innerHTML = sourceQty.innerHTML; }) - .catch(e => { + .catch((e) => { console.error(e); }); } @@ -63,23 +64,23 @@ class CartItems extends HTMLElement { { id: 'main-cart-items', section: document.getElementById('main-cart-items').dataset.id, - selector: '.js-contents' + selector: '.js-contents', }, { id: 'cart-icon-bubble', section: 'cart-icon-bubble', - selector: '.shopify-section' + selector: '.shopify-section', }, { id: 'cart-live-region-text', section: 'cart-live-region-text', - selector: '.shopify-section' + selector: '.shopify-section', }, { id: 'main-cart-footer', section: document.getElementById('main-cart-footer').dataset.id, - selector: '.js-contents' - } + selector: '.js-contents', + }, ]; } @@ -90,7 +91,7 @@ class CartItems extends HTMLElement { line, quantity, sections: this.getSectionsToRender().map((section) => section.section), - sections_url: window.location.pathname + sections_url: window.location.pathname, }); fetch(`${routes.cart_change_url}`, { ...fetchConfig(), ...{ body } }) @@ -99,7 +100,8 @@ class CartItems extends HTMLElement { }) .then((state) => { const parsedState = JSON.parse(state); - const quantityElement = document.getElementById(`Quantity-${line}`) || document.getElementById(`Drawer-quantity-${line}`); + const quantityElement = + document.getElementById(`Quantity-${line}`) || document.getElementById(`Drawer-quantity-${line}`); const items = document.querySelectorAll('.cart-item'); if (parsedState.errors) { @@ -115,12 +117,14 @@ class CartItems extends HTMLElement { if (cartFooter) cartFooter.classList.toggle('is-empty', parsedState.item_count === 0); if (cartDrawerWrapper) cartDrawerWrapper.classList.toggle('is-empty', parsedState.item_count === 0); - this.getSectionsToRender().forEach((section => { - const elementToReplace = + this.getSectionsToRender().forEach((section) => { + const elementToReplace = document.getElementById(section.id).querySelector(section.selector) || document.getElementById(section.id); - elementToReplace.innerHTML = - this.getSectionInnerHTML(parsedState.sections[section.section], section.selector); - })); + elementToReplace.innerHTML = this.getSectionInnerHTML( + parsedState.sections[section.section], + section.selector + ); + }); const updatedValue = parsedState.items[line - 1] ? parsedState.items[line - 1].quantity : undefined; let message = ''; if (items.length === parsedState.items.length && updatedValue !== parseInt(quantityElement.value)) { @@ -132,16 +136,20 @@ class CartItems extends HTMLElement { } this.updateLiveRegions(line, message); - const lineItem = document.getElementById(`CartItem-${line}`) || document.getElementById(`CartDrawer-Item-${line}`); + const lineItem = + document.getElementById(`CartItem-${line}`) || document.getElementById(`CartDrawer-Item-${line}`); if (lineItem && lineItem.querySelector(`[name="${name}"]`)) { - cartDrawerWrapper ? trapFocus(cartDrawerWrapper, lineItem.querySelector(`[name="${name}"]`)) : lineItem.querySelector(`[name="${name}"]`).focus(); + cartDrawerWrapper + ? trapFocus(cartDrawerWrapper, lineItem.querySelector(`[name="${name}"]`)) + : lineItem.querySelector(`[name="${name}"]`).focus(); } else if (parsedState.item_count === 0 && cartDrawerWrapper) { - trapFocus(cartDrawerWrapper.querySelector('.drawer__inner-empty'), cartDrawerWrapper.querySelector('a')) + trapFocus(cartDrawerWrapper.querySelector('.drawer__inner-empty'), cartDrawerWrapper.querySelector('a')); } else if (document.querySelector('.cart-item') && cartDrawerWrapper) { - trapFocus(cartDrawerWrapper, document.querySelector('.cart-item__name')) + trapFocus(cartDrawerWrapper, document.querySelector('.cart-item__name')); } - publish(PUB_SUB_EVENTS.cartUpdate, {source: 'cart-items'}); - }).catch(() => { + publish(PUB_SUB_EVENTS.cartUpdate, { source: 'cart-items' }); + }) + .catch(() => { this.querySelectorAll('.loading-overlay').forEach((overlay) => overlay.classList.add('hidden')); const errors = document.getElementById('cart-errors') || document.getElementById('CartDrawer-CartErrors'); errors.textContent = window.cartStrings.error; @@ -152,12 +160,14 @@ class CartItems extends HTMLElement { } updateLiveRegions(line, message) { - const lineItemError = document.getElementById(`Line-item-error-${line}`) || document.getElementById(`CartDrawer-LineItemError-${line}`); + const lineItemError = + document.getElementById(`Line-item-error-${line}`) || document.getElementById(`CartDrawer-LineItemError-${line}`); if (lineItemError) lineItemError.querySelector('.cart-item__error-text').innerHTML = message; this.lineItemStatusElement.setAttribute('aria-hidden', true); - const cartStatus = document.getElementById('cart-live-region-text') || document.getElementById('CartDrawer-LiveRegionText'); + const cartStatus = + document.getElementById('cart-live-region-text') || document.getElementById('CartDrawer-LiveRegionText'); cartStatus.setAttribute('aria-hidden', false); setTimeout(() => { @@ -166,9 +176,7 @@ class CartItems extends HTMLElement { } getSectionInnerHTML(html, selector) { - return new DOMParser() - .parseFromString(html, 'text/html') - .querySelector(selector).innerHTML; + return new DOMParser().parseFromString(html, 'text/html').querySelector(selector).innerHTML; } enableLoading(line) { @@ -199,14 +207,20 @@ class CartItems extends HTMLElement { customElements.define('cart-items', CartItems); if (!customElements.get('cart-note')) { - customElements.define('cart-note', class CartNote extends HTMLElement { + customElements.define( + 'cart-note', + class CartNote extends HTMLElement { constructor() { super(); - this.addEventListener('change', debounce((event) => { + this.addEventListener( + 'change', + debounce((event) => { const body = JSON.stringify({ note: event.target.value }); fetch(`${routes.cart_update_url}`, { ...fetchConfig(), ...{ body } }); - }, ON_CHANGE_DEBOUNCE_TIMER)) + }, ON_CHANGE_DEBOUNCE_TIMER) + ); } - }); -}; + } + ); +} diff --git a/assets/collage.css b/assets/collage.css index 23128f078a1..66dc3a13292 100644 --- a/assets/collage.css +++ b/assets/collage.css @@ -124,7 +124,8 @@ position: absolute; z-index: -1; border-radius: var(--border-radius); - box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity)); + box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) + rgba(var(--color-shadow), var(--shadow-opacity)); width: calc(var(--border-width) * 2 + 100%); height: calc(var(--border-width) * 2 + 100%); top: calc(var(--border-width) * -1); @@ -165,7 +166,7 @@ } .collage-card .deferred-media__poster:after { - content: ""; + content: ''; position: absolute; z-index: 1; outline-offset: 0.3rem; diff --git a/assets/collapsible-content.css b/assets/collapsible-content.css index fe7af5ba23a..3b3fd1f65b6 100644 --- a/assets/collapsible-content.css +++ b/assets/collapsible-content.css @@ -80,7 +80,7 @@ } .collapsible-row-layout .accordion { - border: var(--text-boxes-border-width) solid rgba(var(--color-foreground),var(--text-boxes-border-opacity)); + border: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity)); margin-bottom: 1.5rem; } diff --git a/assets/component-article-card.css b/assets/component-article-card.css index 0fa43b7205d..998f100cbe9 100644 --- a/assets/component-article-card.css +++ b/assets/component-article-card.css @@ -28,7 +28,7 @@ .article-card__title a:after { bottom: 0; - content: ""; + content: ''; height: 100%; left: 0; position: absolute; diff --git a/assets/component-card.css b/assets/component-card.css index 1e837d7c97f..090a47c2f93 100644 --- a/assets/component-card.css +++ b/assets/component-card.css @@ -58,7 +58,8 @@ top: calc(var(--border-width) * -1); left: calc(var(--border-width) * -1); border-radius: var(--border-radius); - box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity)); + box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) + rgba(var(--color-shadow), var(--shadow-opacity)); } .card .card__inner .card__media { @@ -112,14 +113,14 @@ .card__content { display: grid; - grid-template-rows: minmax(0,1fr) max-content minmax(0,1fr); + grid-template-rows: minmax(0, 1fr) max-content minmax(0, 1fr); padding: 1rem; width: 100%; flex-grow: 1; } .card__content--auto-margins { - grid-template-rows: minmax(0,auto) max-content minmax(0,auto); + grid-template-rows: minmax(0, auto) max-content minmax(0, auto); } .card__information { @@ -128,7 +129,7 @@ } .card:not(.ratio) > .card__content { - grid-template-rows: max-content minmax(0,1fr) max-content auto; + grid-template-rows: max-content minmax(0, 1fr) max-content auto; } @media screen and (min-width: 750px) { @@ -213,7 +214,7 @@ .card__heading a::after { bottom: 0; - content: ""; + content: ''; left: 0; position: absolute; right: 0; @@ -256,9 +257,7 @@ transform: scale(1.03); } - .card-wrapper:hover - .media.media--hover-effect - > img:first-child:not(:only-child) { + .card-wrapper:hover .media.media--hover-effect > img:first-child:not(:only-child) { opacity: 0; } @@ -349,9 +348,7 @@ margin-top: 0.4rem; } -.card-information - > *:not(.visually-hidden:first-child) - + *:not(.rating) { +.card-information > *:not(.visually-hidden:first-child) + *:not(.rating) { margin-top: 0.7rem; } @@ -362,3 +359,90 @@ .card-article-info { margin-top: 1rem; } + +/* Card Shapes */ + +.card--shape .card__content { + padding-top: 0; +} + +.card--shape.card--standard:not(.card--text) .card__inner { + border: 0; /* Border is not currently compatible with image shapes for standard cards. */ + background-color: transparent; + filter: drop-shadow( + var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) + rgba(var(--color-shadow), var(--shadow-opacity)) + ); +} + +.card--shape.card--standard:not(.card--text) .card__inner:after { + display: none; +} + +.grid__item:nth-child(2n) .shape--blob { + clip-path: polygon(var(--shape--blob-2)); +} + +.grid__item:nth-child(3n) .shape--blob { + clip-path: polygon(var(--shape--blob-3)); +} + +.grid__item:nth-child(4n) .shape--blob { + clip-path: polygon(var(--shape--blob-4)); +} + +.grid__item:nth-child(5n) .shape--blob { + clip-path: polygon(var(--shape--blob-5)); +} + +.grid__item:nth-child(7n) .shape--blob { + clip-path: polygon(var(--shape--blob-6)); +} + +.grid__item:nth-child(8n) .shape--blob { + clip-path: polygon(var(--shape--blob-1)); +} + +/* Card Shape Hover Rules */ + +@media (prefers-reduced-motion: no-preference) { + .product-card-wrapper .shape--round { + transition: clip-path var(--duration-long) ease; + } + + .product-card-wrapper:hover .shape--round { + clip-path: ellipse(47% 47% at 50% 50%); + } + + .product-card-wrapper .shape--blob { + transition: clip-path var(--duration-long) ease-in-out; + } + + .product-card-wrapper:hover .shape--blob { + clip-path: polygon(var(--shape--blob-5)); + } + + .grid__item:nth-child(2n) .product-card-wrapper:hover .shape--blob { + clip-path: polygon(var(--shape--blob-6)); + } + + .grid__item:nth-child(3n) .product-card-wrapper:hover .shape--blob { + clip-path: polygon(var(--shape--blob-1)); + } + + .grid__item:nth-child(4n) .product-card-wrapper:hover .shape--blob { + clip-path: polygon(var(--shape--blob-2)); + } + + .grid__item:nth-child(5n) .product-card-wrapper:hover .shape--blob { + clip-path: polygon(var(--shape--blob-3)); + } + + .grid__item:nth-child(7n) .product-card-wrapper:hover .shape--blob { + clip-path: polygon(var(--shape--blob-4)); + } + + .grid__item:nth-child(8n) .product-card-wrapper:hover .shape--blob { + clip-path: polygon(var(--shape--blob-5)); + } +} diff --git a/assets/component-cart-drawer.css b/assets/component-cart-drawer.css index 2cea86354e5..70389c1f293 100644 --- a/assets/component-cart-drawer.css +++ b/assets/component-cart-drawer.css @@ -177,7 +177,8 @@ cart-drawer { flex-grow: 1; } -.cart-drawer .cart-items, .cart-drawer tbody { +.cart-drawer .cart-items, +.cart-drawer tbody { display: block; width: 100%; } @@ -208,7 +209,7 @@ cart-drawer-items { .cart-drawer .cart-item { display: grid; - grid-template: repeat(2,auto) / repeat(4,1fr); + grid-template: repeat(2, auto) / repeat(4, 1fr); gap: 1.5rem; margin-bottom: 0; } @@ -324,7 +325,7 @@ cart-drawer-items { word-break: break-word; } -.cart-drawer details[open]>summary .icon-caret { +.cart-drawer details[open] > summary .icon-caret { transform: rotate(180deg); } @@ -348,7 +349,7 @@ cart-drawer-items { } .drawer__footer #dynamic-checkout-cart ul > li { - flex-basis: calc(50% - 0.5rem) !important; + flex-basis: calc(50% - 0.5rem) !important; margin: 0 !important; } @@ -367,7 +368,7 @@ cart-drawer-items { .drawer__footer #dynamic-checkout-cart ul > li:first-child:nth-last-child(2) ~ li, .drawer__footer #dynamic-checkout-cart ul > li:first-child:nth-last-child(4), .drawer__footer #dynamic-checkout-cart ul > li:first-child:nth-last-child(4) ~ li { - flex-basis: calc(50% - 0.5rem) !important; + flex-basis: calc(50% - 0.5rem) !important; } } diff --git a/assets/component-cart-items.css b/assets/component-cart-items.css index e9c97556119..296d2a2387e 100644 --- a/assets/component-cart-items.css +++ b/assets/component-cart-items.css @@ -107,7 +107,7 @@ .product-option { font-size: 1.4rem; - word-break: break-all; + word-break: break-word; line-height: calc(1 + 0.5 / var(--font-body-scale)); } @@ -131,7 +131,7 @@ cart-remove-button .button { } cart-remove-button .button:before, -cart-remove-button .button:after { +cart-remove-button .button:after { content: none; } diff --git a/assets/component-cart-notification.css b/assets/component-cart-notification.css index fe6dd46ad67..7af62a676ce 100644 --- a/assets/component-cart-notification.css +++ b/assets/component-cart-notification.css @@ -18,18 +18,21 @@ transform: translateY(-100%); visibility: hidden; width: 100%; - box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow), var(--popup-shadow-opacity)); + box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) + rgba(var(--color-shadow), var(--popup-shadow-opacity)); z-index: -1; } .cart-notification.focused { - box-shadow: 0 0 .2rem 0 rgba(var(--color-foreground), .3), - var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow), var(--popup-shadow-opacity)); + box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3), + var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) + rgba(var(--color-shadow), var(--popup-shadow-opacity)); } .cart-notification:focus-visible { - box-shadow: 0 0 .2rem 0 rgba(var(--color-foreground), .3), - var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow), var(--popup-shadow-opacity)); + box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3), + var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) + rgba(var(--color-shadow), var(--popup-shadow-opacity)); } @media screen and (min-width: 750px) { @@ -40,13 +43,18 @@ .cart-notification { border-width: 0 var(--popup-border-width) var(--popup-border-width); max-width: 36.8rem; + right: 2.2rem; + } +} + +@media screen and (min-width: 990px) { + .cart-notification-wrapper:is(.page-width) > .cart-notification { right: 4rem; } } .cart-notification.animate { - transition: transform var(--duration-short) ease, - visibility 0s var(--duration-short) ease; + transition: transform var(--duration-short) ease, visibility 0s var(--duration-short) ease; } .cart-notification.active { diff --git a/assets/component-cart.css b/assets/component-cart.css index 8041223a438..682904d572e 100644 --- a/assets/component-cart.css +++ b/assets/component-cart.css @@ -110,8 +110,10 @@ cart-items { resize: vertical; } -.cart__note:after, .cart__note:hover.cart__note:after, -.cart__note:before, .cart__note:hover.cart__note:before, +.cart__note:after, +.cart__note:hover.cart__note:after, +.cart__note:before, +.cart__note:hover.cart__note:before, .cart__note .field__input:focus, .cart__note .field__input { border-bottom-right-radius: 0; diff --git a/assets/component-collection-hero.css b/assets/component-collection-hero.css index 3f7699d0229..9ceadf0ca2a 100644 --- a/assets/component-collection-hero.css +++ b/assets/component-collection-hero.css @@ -10,8 +10,7 @@ @media screen and (min-width: 750px) { .collection-hero.collection-hero--with-image { - padding: calc(4rem + var(--page-width-margin)) 0 - calc(4rem + var(--page-width-margin)); + padding: calc(4rem + var(--page-width-margin)) 0 calc(4rem + var(--page-width-margin)); overflow: hidden; } @@ -74,9 +73,7 @@ .collection-hero__image-container { border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity)); border-radius: var(--media-radius); - box-shadow: var(--media-shadow-horizontal-offset) - var(--media-shadow-vertical-offset) - var(--media-shadow-blur-radius) + box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius) rgba(var(--color-shadow), var(--media-shadow-opacity)); } diff --git a/assets/component-complementary-products.css b/assets/component-complementary-products.css index 44e42d213f5..5555777868f 100644 --- a/assets/component-complementary-products.css +++ b/assets/component-complementary-products.css @@ -19,7 +19,9 @@ product-recommendations:not(.is-accordion) .complementary-products__container { .complementary-slide { --shadow-padding-sides: calc((var(--shadow-horizontal-offset) + var(--shadow-blur-radius)) * var(--shadow-visible)); - --shadow-padding-sides-negative: calc((var(--shadow-horizontal-offset) * -1 + var(--shadow-blur-radius)) * var(--shadow-visible)); + --shadow-padding-sides-negative: calc( + (var(--shadow-horizontal-offset) * -1 + var(--shadow-blur-radius)) * var(--shadow-visible) + ); } .complementary-slide > ul { @@ -44,7 +46,7 @@ product-recommendations:not(.is-accordion) .complementary-products__container { .complementary-slide.grid__item { width: 100%; - padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top)); + padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top)); padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom)); padding-right: max(var(--focus-outline-padding), var(--shadow-padding-sides)); padding-left: max(var(--focus-outline-padding), var(--shadow-padding-sides-negative)); @@ -82,17 +84,16 @@ product-recommendations.is-accordion + .accordion { max-width: 20%; } -@media screen and (min-width: 750px) and (max-width: 1200px){ +@media screen and (min-width: 750px) and (max-width: 1200px) { .complementary-products__container .card--horizontal .card__inner { - max-width: 25% + max-width: 25%; } } .complementary-slide .card--text .card__content { - grid-template-rows: minmax(0,1fr) max-content auto; + grid-template-rows: minmax(0, 1fr) max-content auto; } - .complementary-products__container .card--card.card--media > .card__content { margin-top: 0; } diff --git a/assets/component-deferred-media.css b/assets/component-deferred-media.css index 4c3470deb09..978d9c97250 100644 --- a/assets/component-deferred-media.css +++ b/assets/component-deferred-media.css @@ -7,6 +7,7 @@ height: 100%; width: 100%; overflow: hidden; + border-radius: calc(var(--border-radius) - var(--border-width)); } .media > .deferred-media__poster { @@ -35,16 +36,25 @@ .deferred-media__poster:focus-visible { outline: none; - box-shadow: 0 0 0 var(--media-border-width) rgba(var(--color-foreground), var(--media-border-opacity)), 0 0 0 calc(var(--media-border-width) + 0.3rem) rgb(var(--color-background)),0 0 0 calc(var(--media-border-width) + 0.5rem) rgba(var(--color-foreground),.5); + box-shadow: 0 0 0 var(--media-border-width) rgba(var(--color-foreground), var(--media-border-opacity)), + 0 0 0 calc(var(--media-border-width) + 0.3rem) rgb(var(--color-background)), + 0 0 0 calc(var(--media-border-width) + 0.5rem) rgba(var(--color-foreground), 0.5); border-radius: calc(var(--media-radius) - var(--media-border-width)); } .deferred-media__poster:focus { outline: none; - box-shadow: 0 0 0 var(--media-border-width) rgba(var(--color-foreground), var(--media-border-opacity)), 0 0 0 calc(var(--media-border-width) + 0.3rem) rgb(var(--color-background)),0 0 0 calc(var(--media-border-width) + 0.5rem) rgba(var(--color-foreground),.5); + box-shadow: 0 0 0 var(--media-border-width) rgba(var(--color-foreground), var(--media-border-opacity)), + 0 0 0 calc(var(--media-border-width) + 0.3rem) rgb(var(--color-background)), + 0 0 0 calc(var(--media-border-width) + 0.5rem) rgba(var(--color-foreground), 0.5); border-radius: calc(var(--media-radius) - var(--media-border-width)); } +.global-media-settings--full-width .deferred-media__poster, +.global-media-settings--full-width .deferred-media__poster:is(:focus, :focus-visible) { + border-radius: 0; +} + /* outline styling for Windows High Contrast Mode */ @media (forced-colors: active) { .deferred-media__poster:focus { @@ -86,4 +96,3 @@ .deferred-media__poster-button .icon-play { margin-left: 0.2rem; } - diff --git a/assets/component-facets.css b/assets/component-facets.css index 42a9e52e857..5c80707aace 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -131,31 +131,27 @@ .mobile-facets__sort .select__select:focus-visible { outline: 0.2rem solid rgba(var(--color-foreground), 0.5); outline-offset: 0.3rem; - box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), - 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3); + box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3); } .mobile-facets__sort .select__select.focused, .no-js .mobile-facets__sort .select__select:focus { outline: 0.2rem solid rgba(var(--color-foreground), 0.5); outline-offset: 0.3rem; - box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), - 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3); + box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3); } .facet-filters__sort:focus-visible { outline: 0.2rem solid rgba(var(--color-foreground), 0.5); outline-offset: 1rem; - box-shadow: 0 0 0 1rem rgb(var(--color-background)), - 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3); + box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3); } .facet-filters__sort.focused, .no-js .facet-filters__sort:focus { outline: 0.2rem solid rgba(var(--color-foreground), 0.5); outline-offset: 1rem; - box-shadow: 0 0 0 1rem rgb(var(--color-background)), - 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3); + box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3); } .no-js .facet-filters__sort:focus:not(:focus-visible), @@ -219,7 +215,7 @@ } .facets__disclosure[open] .facets__display, -.facets__disclosure-vertical[open] .facets__display-vertical { +.facets__disclosure-vertical[open] .facets__display-vertical { animation: animateMenuOpen var(--duration-default) ease; } @@ -249,7 +245,8 @@ border-style: solid; border-color: rgba(var(--color-foreground), var(--popup-border-opacity)); border-radius: var(--popup-corner-radius); - box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow), var(--popup-shadow-opacity)); + box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) + rgba(var(--color-shadow), var(--popup-shadow-opacity)); background-color: rgb(var(--color-background)); position: absolute; top: calc(100% + 0.5rem); @@ -486,16 +483,14 @@ a.active-facets__button.focused, } a.active-facets__button:focus-visible .active-facets__button-inner { - box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2), - 0 0 0 0.2rem rgb(var(--color-background)), + box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2), 0 0 0 0.2rem rgb(var(--color-background)), 0 0 0 0.4rem rgb(var(--color-foreground)); outline: none; } a.active-facets__button.focused .active-facets__button-inner, .no-js a.active-facets__button:focus .active-facets__button-inner { - box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2), - 0 0 0 0.2rem rgb(var(--color-background)), + box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2), 0 0 0 0.2rem rgb(var(--color-background)), 0 0 0 0.4rem rgb(var(--color-foreground)); outline: none; } @@ -592,10 +587,8 @@ a.active-facets__button.focused .active-facets__button-inner, border-style: solid; border-width: 0 0 0 var(--drawer-border-width); filter: drop-shadow( - var(--drawer-shadow-horizontal-offset) - var(--drawer-shadow-vertical-offset) - var(--drawer-shadow-blur-radius) - rgba(var(--color-shadow), var(--drawer-shadow-opacity)) + var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius) + rgba(var(--color-shadow), var(--drawer-shadow-opacity)) ); } @@ -795,8 +788,7 @@ details.menu-opening .mobile-facets__close svg { } .js details[open] > .mobile-facets__submenu { - transition: transform 0.4s cubic-bezier(0.29, 0.63, 0.44, 1), - visibility 0.4s cubic-bezier(0.29, 0.63, 0.44, 1); + transition: transform 0.4s cubic-bezier(0.29, 0.63, 0.44, 1), visibility 0.4s cubic-bezier(0.29, 0.63, 0.44, 1); } .js details[open].menu-opening > .mobile-facets__submenu { @@ -874,7 +866,7 @@ input.mobile-facets__checkbox { display: flex; z-index: 2; margin-top: auto; - background-color:rgb(var(--color-background)); + background-color: rgb(var(--color-background)); background: var(--gradient-background); } @@ -940,7 +932,7 @@ input.mobile-facets__checkbox { } .product-count .loading-overlay__spinner, -.product-count-vertical .loading-overlay__spinner { +.product-count-vertical .loading-overlay__spinner { display: none; position: absolute; right: 0; @@ -962,7 +954,7 @@ input.mobile-facets__checkbox { border: none; padding-left: 0; } - + .facets__form-vertical { display: flex; flex-direction: column; @@ -973,13 +965,13 @@ input.mobile-facets__checkbox { border-top: 0.1rem solid rgba(var(--color-foreground), 0.1); margin-right: 0; } - + .facets-vertical .facets__summary { padding-top: 1.5rem; margin-bottom: 0; padding-bottom: 1.5rem; } - + .facets__heading--vertical { margin: 0 0 1.5rem 0; font-size: 1.5rem; @@ -989,11 +981,11 @@ input.mobile-facets__checkbox { padding: 1.5rem 2rem 1.5rem 0; font-size: 1.4rem; } - + .facets__display-vertical { padding-bottom: 1.5rem; } - + .facets-vertical .facets-wrapper { padding-right: 3rem; } @@ -1072,15 +1064,15 @@ input.mobile-facets__checkbox { .facets__disclosure-vertical[open] .facets__summary .icon-caret { transform: rotate(180deg); } - + .facets-container-drawer { - display: flex;; + display: flex; flex-flow: row wrap; align-items: center; column-gap: 0; } - .facets-container-drawer .mobile-facets__wrapper { + .facets-container-drawer .mobile-facets__wrapper { margin-right: 2rem; flex-grow: 1; } @@ -1093,7 +1085,6 @@ input.mobile-facets__checkbox { width: 100%; } - .facets-container-drawer .facets__form { display: block; } diff --git a/assets/component-image-with-text.css b/assets/component-image-with-text.css index 7f763e703e0..2aabc77948d 100644 --- a/assets/component-image-with-text.css +++ b/assets/component-image-with-text.css @@ -100,26 +100,20 @@ .image-with-text:not(.image-with-text--overlap) .image-with-text__media-item:after { border-radius: var(--media-radius); - box-shadow: var(--media-shadow-horizontal-offset) - var(--media-shadow-vertical-offset) - var(--media-shadow-blur-radius) + box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius) rgba(var(--color-shadow), var(--media-shadow-opacity)); } .image-with-text:not(.image-with-text--overlap) .image-with-text__text-item:after { border-radius: var(--text-boxes-radius); - box-shadow: var(--text-boxes-shadow-horizontal-offset) - var(--text-boxes-shadow-vertical-offset) - var(--text-boxes-shadow-blur-radius) - rgba(var(--color-shadow), var(--text-boxes-shadow-opacity)); + box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset) + var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity)); } .image-with-text .image-with-text__media-item > * { border-radius: var(--media-radius); overflow: hidden; - box-shadow: var(--media-shadow-horizontal-offset) - var(--media-shadow-vertical-offset) - var(--media-shadow-blur-radius) + box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius) rgba(var(--color-shadow), var(--media-shadow-opacity)); } @@ -130,10 +124,8 @@ .image-with-text .image-with-text__text-item > * { border-radius: var(--text-boxes-radius); overflow: hidden; - box-shadow: var(--text-boxes-shadow-horizontal-offset) - var(--text-boxes-shadow-vertical-offset) - var(--text-boxes-shadow-blur-radius) - rgba(var(--color-shadow), var(--text-boxes-shadow-opacity)); + box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset) + var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity)); } .image-with-text:not(.image-with-text--overlap) .image-with-text__media-item > *, @@ -244,31 +236,61 @@ flex-grow: 0; } - .image-with-text.collapse-corners:not(.image-with-text--overlap) .grid:not(.image-with-text__grid--reverse) .image-with-text__media-item:after, - .image-with-text.collapse-corners:not(.image-with-text--overlap) .grid:not(.image-with-text__grid--reverse) .image-with-text__media, - .image-with-text.collapse-corners:not(.image-with-text--overlap) .grid:not(.image-with-text__grid--reverse) .image-with-text__media img, - .image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__grid--reverse .image-with-text__text-item:after, - .image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__grid--reverse .image-with-text__content, - .image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__grid--reverse .image-with-text__content:after { + .image-with-text.collapse-corners:not(.image-with-text--overlap) + .grid:not(.image-with-text__grid--reverse) + .image-with-text__media-item:after, + .image-with-text.collapse-corners:not(.image-with-text--overlap) + .grid:not(.image-with-text__grid--reverse) + .image-with-text__media, + .image-with-text.collapse-corners:not(.image-with-text--overlap) + .grid:not(.image-with-text__grid--reverse) + .image-with-text__media + img, + .image-with-text.collapse-corners:not(.image-with-text--overlap) + .image-with-text__grid--reverse + .image-with-text__text-item:after, + .image-with-text.collapse-corners:not(.image-with-text--overlap) + .image-with-text__grid--reverse + .image-with-text__content, + .image-with-text.collapse-corners:not(.image-with-text--overlap) + .image-with-text__grid--reverse + .image-with-text__content:after { border-top-right-radius: 0; border-bottom-right-radius: 0; } - .image-with-text.collapse-corners:not(.image-with-text--overlap) .grid:not(.image-with-text__grid--reverse) .image-with-text__text-item:after, - .image-with-text.collapse-corners:not(.image-with-text--overlap) .grid:not(.image-with-text__grid--reverse) .image-with-text__content, - .image-with-text.collapse-corners:not(.image-with-text--overlap) .grid:not(.image-with-text__grid--reverse) .image-with-text__content:after, - .image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__grid--reverse .image-with-text__media-item:after, - .image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__grid--reverse .image-with-text__media, - .image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__grid--reverse .image-with-text__media img { + .image-with-text.collapse-corners:not(.image-with-text--overlap) + .grid:not(.image-with-text__grid--reverse) + .image-with-text__text-item:after, + .image-with-text.collapse-corners:not(.image-with-text--overlap) + .grid:not(.image-with-text__grid--reverse) + .image-with-text__content, + .image-with-text.collapse-corners:not(.image-with-text--overlap) + .grid:not(.image-with-text__grid--reverse) + .image-with-text__content:after, + .image-with-text.collapse-corners:not(.image-with-text--overlap) + .image-with-text__grid--reverse + .image-with-text__media-item:after, + .image-with-text.collapse-corners:not(.image-with-text--overlap) + .image-with-text__grid--reverse + .image-with-text__media, + .image-with-text.collapse-corners:not(.image-with-text--overlap) + .image-with-text__grid--reverse + .image-with-text__media + img { border-top-left-radius: 0; border-bottom-left-radius: 0; } - .image-with-text.collapse-borders:not(.image-with-text--overlap) .grid:not(.image-with-text__grid--reverse) .image-with-text__content { + .image-with-text.collapse-borders:not(.image-with-text--overlap) + .grid:not(.image-with-text__grid--reverse) + .image-with-text__content { border-left: 0; } - .image-with-text.collapse-borders:not(.image-with-text--overlap) .image-with-text__grid--reverse .image-with-text__content { + .image-with-text.collapse-borders:not(.image-with-text--overlap) + .image-with-text__grid--reverse + .image-with-text__content { border-right: 0; } } @@ -279,10 +301,8 @@ .image-with-text__content { border-radius: var(--text-boxes-radius); - box-shadow: var(--text-boxes-shadow-horizontal-offset) - var(--text-boxes-shadow-vertical-offset) - var(--text-boxes-shadow-blur-radius) - rgba(var(--color-shadow), var(--text-boxes-shadow-opacity)); + box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset) + var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity)); word-break: break-word; } @@ -336,11 +356,15 @@ } @media screen and (min-width: 750px) { - .collapse-padding .image-with-text__grid:not(.image-with-text__grid--reverse) .image-with-text__content:not(.image-with-text__content--desktop-center) { + .collapse-padding + .image-with-text__grid:not(.image-with-text__grid--reverse) + .image-with-text__content:not(.image-with-text__content--desktop-center) { padding-right: 0; } - .collapse-padding .image-with-text__grid--reverse .image-with-text__content:not(.image-with-text__content--desktop-center) { + .collapse-padding + .image-with-text__grid--reverse + .image-with-text__content:not(.image-with-text__content--desktop-center) { padding-left: 0; } } diff --git a/assets/component-loading-overlay.css b/assets/component-loading-overlay.css index 5308926a48c..60930144254 100644 --- a/assets/component-loading-overlay.css +++ b/assets/component-loading-overlay.css @@ -44,7 +44,7 @@ } @media screen and (forced-colors: active) { - .path{ + .path { stroke: CanvasText; } } diff --git a/assets/component-localization-form.css b/assets/component-localization-form.css new file mode 100644 index 00000000000..543e0c7a32c --- /dev/null +++ b/assets/component-localization-form.css @@ -0,0 +1,303 @@ +.localization-form { + display: flex; + flex-direction: column; + flex: auto 1 0; + padding: 1rem; + margin: 0 auto; +} + +.localization-form:only-child { + display: inline-flex; + flex-wrap: wrap; + flex: initial; + padding: 1rem 0; +} + +.localization-form:only-child .button, +.localization-form:only-child .localization-form__select { + margin: 1rem 1rem 0.5rem; + flex-grow: 1; +} + +@media screen and (min-width: 750px) { + .localization-form { + padding: 1rem 2rem 1rem 0; + } + + .localization-form:first-of-type { + padding-left: 0; + } + + .localization-form:only-child { + justify-content: start; + width: auto; + margin: 0 1rem 0 0; + } + + .localization-form:only-child .button, + .localization-form:only-child .localization-form__select { + margin: 1rem 0; + } +} + +@media screen and (max-width: 989px) { + noscript .localization-form:only-child { + width: 100%; + } +} + +.localization-form .button { + padding: 1rem; +} + +.localization-form__currency { + display: inline-block; +} + +@media screen and (max-width: 749px) { + .localization-form .button { + word-break: break-all; + } +} + +.localization-form__select { + border-radius: var(--inputs-radius-outset); + position: relative; + margin-bottom: 1.5rem; + padding-left: 1rem; + text-align: left; + min-height: calc(4rem + var(--inputs-border-width) * 2); + min-width: calc(7rem + var(--inputs-border-width) * 2); +} + +.disclosure__button.localization-form__select { + padding: calc(2rem + var(--inputs-border-width)); + background: rgb(var(--color-background)); +} + +noscript .localization-form__select { + padding-left: 0rem; +} + +@media screen and (min-width: 750px) { + noscript .localization-form__select { + min-width: 20rem; + } +} + +.localization-form__select .icon-caret { + position: absolute; + content: ''; + height: 0.6rem; + right: calc(var(--inputs-border-width) + 1.5rem); + top: calc(50% - 0.2rem); +} + +.localization-selector.link { + text-decoration: none; + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + color: rgb(var(--color-foreground)); + width: 100%; + padding-right: 4rem; + padding-bottom: 1.5rem; +} + +noscript .localization-selector.link { + padding-top: 1.5rem; + padding-left: 1.5rem; +} + +.disclosure .localization-form__select { + padding-top: 1.5rem; +} + +.localization-selector option { + color: #000000; +} + +.localization-selector + .disclosure__list-wrapper { + margin-left: 1rem; + opacity: 1; + animation: animateLocalization var(--duration-default) ease; +} + +.disclosure { + position: relative; +} + +.disclosure__button { + align-items: center; + cursor: pointer; + display: flex; + height: 4rem; + padding: 0 1.5rem 0 1.5rem; + font-size: 1.3rem; + background-color: transparent; +} + +.disclosure__list-wrapper { + border-width: var(--popup-border-width); + border-style: solid; + border-color: rgba(var(--color-foreground), var(--popup-border-opacity)); + overflow: hidden; + position: absolute; + bottom: 100%; + transform: translateY(-1rem); + z-index: 2; + background-color: rgb(var(--color-background)); + border-radius: var(--popup-corner-radius); + box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) + rgba(var(--color-shadow), var(--popup-shadow-opacity)); +} + +.disclosure__list { + position: relative; + overflow-y: auto; + font-size: 1.4rem; + padding-bottom: 0.5rem; + padding-top: 0.5rem; + scroll-padding: 0.5rem 0; + min-height: 8.2rem; + max-height: 20.65rem; + max-width: 22rem; + min-width: 12rem; + width: max-content; +} + +.disclosure__item { + position: relative; +} + +.disclosure__link { + display: block; + padding: 0.95rem 3.5rem 0.95rem 2rem; + text-decoration: none; + line-height: calc(1 + 0.8 / var(--font-body-scale)); + color: rgba(var(--color-foreground), 0.75); + word-break: break-word; +} + +.disclosure__link:hover { + color: rgb(var(--color-foreground)); +} + +.disclosure__link--active { + text-decoration: underline; +} + +.disclosure__button[aria-expanded='true'] .icon-caret { + transform: rotate(180deg); +} + +/* Header localization */ +.header__localization .localization-form:only-child { + margin: 0; +} + +.header__localization .disclosure .localization-form__select { + font-size: 1.4rem; + letter-spacing: 0.06rem; + height: auto; + background: transparent; +} + +.header__localization .disclosure .localization-form__select:hover { + text-decoration: underline; +} + +.header__localization .localization-form__select.link:after, +.header__localization .localization-form__select.link:before { + box-shadow: none; +} + +.header__localization .localization-form__select.link:focus-visible { + outline: 0.2rem solid rgba(var(--color-foreground), 0.5); + outline-offset: -0.2rem; + box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3); +} + +/* Header icons (desktop) */ +.desktop-localization-wrapper { + display: flex; + flex-wrap: wrap; + justify-content: flex-end; +} + +.desktop-localization-wrapper .localization-selector + .disclosure__list-wrapper { + animation: animateMenuOpen var(--duration-default) ease; +} + +.desktop-localization-wrapper .localization-form:only-child { + padding: 0; +} + +.header__icons--localization { + align-items: center; + min-height: 4.4rem; +} + +.js .header__icons--localization .localization-form__select { + padding: 0 2.7rem 0 1.2rem; + width: max-content; +} + +.header__icons--localization .localization-form:only-child .localization-form__select { + margin: 0; +} + +.header__icons--localization .localization-form__select > span { + max-width: 20ch; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +.header__icons--localization localization-form:only-child .localization-form__select > span { + max-width: 26ch; +} + +.header__icons--localization .localization-form__select .icon-caret { + right: 0.8rem; +} + +.header__icons--localization .disclosure__list-wrapper { + bottom: initial; + top: 100%; + right: 0; + transform: translateY(0); +} + +/* Menu drawer */ +@media screen and (min-width: 990px) { + .menu-drawer__localization { + display: none; + } +} + +.menu-drawer__localization localization-form { + display: block; +} + +.menu-drawer__localization .localization-form__select { + background-color: initial; + margin-top: 0; + padding: 1.5rem 3.6rem 1.5rem 1rem; +} + +.menu-drawer__localization .localization-form { + padding: 0; +} + +.menu-drawer__localization .localization-form:only-child .localization-form__select { + margin: 0; +} + +.menu-drawer__localization + .list-social { + margin-top: 1rem; +} + +.menu-drawer__localization noscript .localization-form__select { + padding: initial; +} diff --git a/assets/component-mega-menu.css b/assets/component-mega-menu.css index a76313719b8..ec02e7520a6 100644 --- a/assets/component-mega-menu.css +++ b/assets/component-mega-menu.css @@ -32,7 +32,6 @@ .mega-menu[open] .mega-menu__content { opacity: 1; transform: translateY(0); - } .mega-menu__list { diff --git a/assets/component-menu-drawer.css b/assets/component-menu-drawer.css index 85cfbe13e53..a255dc91c51 100644 --- a/assets/component-menu-drawer.css +++ b/assets/component-menu-drawer.css @@ -9,9 +9,7 @@ cursor: default; width: 100%; height: calc(100vh - 100%); - height: calc( - var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)) - ); + height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%))); top: 100%; left: 0; background: rgba(var(--color-foreground), 0.5); @@ -24,8 +22,7 @@ menu-drawer > details[open] > summary::before { visibility: visible; opacity: 1; - transition: opacity var(--duration-default) ease, - visibility var(--duration-default) ease; + transition: opacity var(--duration-default) ease, visibility var(--duration-default) ease; } .menu-drawer { @@ -43,24 +40,19 @@ menu-drawer > details[open] > summary::before { border-style: solid; border-color: rgba(var(--color-foreground), var(--drawer-border-opacity)); filter: drop-shadow( - var(--drawer-shadow-horizontal-offset) - var(--drawer-shadow-vertical-offset) - var(--drawer-shadow-blur-radius) - rgba(var(--color-shadow), var(--drawer-shadow-opacity)) + var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius) + rgba(var(--color-shadow), var(--drawer-shadow-opacity)) ); } .js .menu-drawer { height: calc(100vh - 100%); - height: calc( - var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)) - ); + height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%))); } .js details[open] > .menu-drawer, .js details[open] > .menu-drawer__submenu { - transition: transform var(--duration-default) ease, - visibility var(--duration-default) ease; + transition: transform var(--duration-default) ease, visibility var(--duration-default) ease; } .no-js details[open] > .menu-drawer, @@ -215,8 +207,25 @@ details[open].menu-opening > .menu-drawer__submenu { } .menu-drawer__utility-links { - padding: 2rem; + padding: 0; background-color: rgba(var(--color-foreground), 0.03); + position: relative; +} + +.header--has-social .menu-drawer__utility-links { + padding: 2rem; +} + +@media screen and (max-width: 749px) { + .header--has-account:where(:not(.header--has-social):not(.header--has-localizations)) .menu-drawer__utility-links { + padding: 2rem; + } +} + +@media screen and (max-width: 989px) { + .header--has-localizations:where(:not(.header--has-social)) .menu-drawer__utility-links { + padding: 2rem; + } } .menu-drawer__account { @@ -224,9 +233,14 @@ details[open].menu-opening > .menu-drawer__submenu { align-items: center; text-decoration: none; padding: 1.2rem; - margin-left: -1.2rem; font-size: 1.4rem; color: rgb(var(--color-foreground)); + margin-bottom: 2rem; +} + +.menu-drawer__utility-links:has(ul:empty) .menu-drawer__account, +.menu-drawer__utility-links:has(.menu-drawer__localization) .menu-drawer__account { + margin-bottom: 0; } .menu-drawer__account .icon-account { @@ -241,8 +255,6 @@ details[open].menu-opening > .menu-drawer__submenu { .menu-drawer .list-social { justify-content: flex-start; - margin-left: -1.25rem; - margin-top: 2rem; } .menu-drawer .list-social:empty { diff --git a/assets/component-model-viewer-ui.css b/assets/component-model-viewer-ui.css index 0d548571a70..8da5b150d20 100644 --- a/assets/component-model-viewer-ui.css +++ b/assets/component-model-viewer-ui.css @@ -33,11 +33,10 @@ .shopify-model-viewer-ui .shopify-model-viewer-ui__poster-control-icon { width: 4.8rem; height: 4.8rem; - margin-top: .3rem; + margin-top: 0.3rem; } .shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:hover, .shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:focus { transform: translate(-50%, -50%) scale(1.1); } - diff --git a/assets/component-newsletter.css b/assets/component-newsletter.css index 157670057c7..719c13fd20e 100644 --- a/assets/component-newsletter.css +++ b/assets/component-newsletter.css @@ -52,12 +52,12 @@ } .newsletter-form__button:focus-visible { - box-shadow: 0 0 0 .3rem rgb(var(--color-background)),0 0 0 .4rem rgba(var(--color-foreground)); + box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.4rem rgba(var(--color-foreground)); background-color: rgb(var(--color-background)); } .newsletter-form__button:focus { - box-shadow: 0 0 0 .3rem rgb(var(--color-background)),0 0 0 .4rem rgba(var(--color-foreground)); + box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.4rem rgba(var(--color-foreground)); background-color: rgb(var(--color-background)); } diff --git a/assets/component-pickup-availability.css b/assets/component-pickup-availability.css index 091a0c491c7..d99933b5cc2 100644 --- a/assets/component-pickup-availability.css +++ b/assets/component-pickup-availability.css @@ -50,18 +50,15 @@ pickup-availability-drawer { top: 0; right: 0; z-index: 4; - transition: opacity var(--duration-default) ease, - transform var(--duration-default) ease; + transition: opacity var(--duration-default) ease, transform var(--duration-default) ease; transform: translateX(100%); width: 100%; border-width: 0 0 0 var(--drawer-border-width); border-color: rgba(var(--color-foreground), var(--drawer-border-opacity)); border-style: solid; filter: drop-shadow( - var(--drawer-shadow-horizontal-offset) - var(--drawer-shadow-vertical-offset) - var(--drawer-shadow-blur-radius) - rgba(var(--color-shadow), var(--drawer-shadow-opacity)) + var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius) + rgba(var(--color-shadow), var(--drawer-shadow-opacity)) ); } diff --git a/assets/component-predictive-search.css b/assets/component-predictive-search.css index cd7d2bd28a2..13718b01fc6 100644 --- a/assets/component-predictive-search.css +++ b/assets/component-predictive-search.css @@ -10,8 +10,7 @@ z-index: 3; border-bottom-right-radius: var(--popup-corner-radius); border-bottom-left-radius: var(--popup-corner-radius); - box-shadow: var(--popup-shadow-horizontal-offset) - var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) + box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow), var(--popup-shadow-opacity)); overflow-y: auto; -webkit-overflow-scrolling: touch; @@ -39,9 +38,7 @@ flex-direction: column; } - .predictive-search__results-groups-wrapper:not( - .predictive-search__results-groups-wrapper--no-suggestions - ) { + .predictive-search__results-groups-wrapper:not(.predictive-search__results-groups-wrapper--no-suggestions) { /* On mobile, when there are no suggestions the first .predictive-search__results-groups-wrapper * is virtually empty due to a display: hidden on the predictive-search__pages-wrapper child. * This causes the gap to render and look like a big top margin */ @@ -77,21 +74,17 @@ predictive-search[loading] .predictive-search { } @media screen and (min-width: 750px) { - .predictive-search__results-groups-wrapper--no-products - .predictive-search__result-group:nth-child(2), - .predictive-search__result-group:last-child - .predictive-search__pages-wrapper { + .predictive-search__results-groups-wrapper--no-products .predictive-search__result-group:nth-child(2), + .predictive-search__result-group:last-child .predictive-search__pages-wrapper { display: none; } - .predictive-search__result-group:first-child - .predictive-search__pages-wrapper { + .predictive-search__result-group:first-child .predictive-search__pages-wrapper { display: initial; } .predictive-search__result-group:first-child { flex: 0 0 26.4rem; } - .predictive-search__results-groups-wrapper--no-products - .predictive-search__result-group:first-child, + .predictive-search__results-groups-wrapper--no-products .predictive-search__result-group:first-child, .predictive-search__result-group:only-child { flex-grow: 1; } @@ -125,28 +118,23 @@ predictive-search[loading] .predictive-search__search-for-button { display: none; } -predictive-search[loading] - .predictive-search__results-groups-wrapper - ~ .predictive-search__loading-state { +predictive-search[loading] .predictive-search__results-groups-wrapper ~ .predictive-search__loading-state { display: none; } -predictive-search[loading] - .predictive-search__results-groups-wrapper - ~ .predictive-search__search-for-button { +predictive-search[loading] .predictive-search__results-groups-wrapper ~ .predictive-search__search-for-button { display: initial; } -.predictive-search__list-item[aria-selected="true"] > *, +.predictive-search__list-item[aria-selected='true'] > *, .predictive-search__list-item:hover > *, -.predictive-search__item[aria-selected="true"], +.predictive-search__item[aria-selected='true'], .predictive-search__item:hover { color: rgb(var(--color-foreground)); background-color: rgba(var(--color-foreground), 0.04); } -.predictive-search__list-item[aria-selected="true"] - .predictive-search__item-heading, +.predictive-search__list-item[aria-selected='true'] .predictive-search__item-heading, .predictive-search__list-item:hover .predictive-search__item-heading { text-decoration: underline; text-underline-offset: 0.3rem; @@ -164,7 +152,7 @@ predictive-search[loading] display: grid; grid-template-columns: 5rem 1fr; grid-column-gap: 2rem; - grid-template-areas: "product-image product-content"; + grid-template-areas: 'product-image product-content'; } .predictive-search__item-content { @@ -190,7 +178,7 @@ predictive-search[loading] } .predictive-search__item-query-result mark { - opacity: 75%; + color: rgba(var(--color-foreground), 0.75); } .predictive-search__item-query-result mark { @@ -233,5 +221,5 @@ predictive-search[loading] .predictive-search__image { grid-area: product-image; object-fit: contain; - font-family: "object-fit: contain"; + font-family: 'object-fit: contain'; } diff --git a/assets/component-rating.css b/assets/component-rating.css index 5b3c9895773..4f40a7a5a8a 100644 --- a/assets/component-rating.css +++ b/assets/component-rating.css @@ -16,8 +16,7 @@ .rating-star { --percent: calc( ( - var(--rating) / var(--rating-max) + var(--rating-decimal) * - var(--font-size) / + var(--rating) / var(--rating-max) + var(--rating-decimal) * var(--font-size) / (var(--rating-max) * (var(--letter-spacing) + var(--font-size))) ) * 100% ); diff --git a/assets/component-rte.css b/assets/component-rte.css deleted file mode 100644 index dc412b63546..00000000000 --- a/assets/component-rte.css +++ /dev/null @@ -1,67 +0,0 @@ -.rte:after { - clear: both; - content: ''; - display: block; -} - -.rte > p:first-child { - margin-top: 0; -} - -.rte > p:last-child { - margin-bottom: 0; -} - -.rte table { - table-layout: fixed; -} - -@media screen and (min-width: 750px) { - .rte table td { - padding-left: 1.2rem; - padding-right: 1.2rem; - } -} - -.rte img { - height: auto; - max-width: 100%; - border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity)); - border-radius: var(--media-radius); - box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius) rgba(var(--color-shadow), var(--media-shadow-opacity)); - margin-bottom: var(--media-shadow-vertical-offset); -} - -.rte ul, -.rte ol { - list-style-position: inside; - padding-left: 2rem; -} - -.rte li { - list-style: inherit; -} - -.rte li:last-child { - margin-bottom: 0; -} - -.rte a { - color: rgba(var(--color-link), var(--alpha-link)); - text-underline-offset: 0.3rem; - text-decoration-thickness: 0.1rem; - transition: text-decoration-thickness var(--duration-short) ease; -} - -.rte a:hover { - color: rgb(var(--color-link)); - text-decoration-thickness: 0.2rem; -} - -.rte blockquote { - display: inline-flex; -} - -.rte blockquote > * { - margin: -0.5rem 0 -0.5rem 0; -} diff --git a/assets/component-search.css b/assets/component-search.css index 4885accec41..08acd4a64d9 100644 --- a/assets/component-search.css +++ b/assets/component-search.css @@ -53,7 +53,6 @@ transform: scale(1.07); } - .search__button .icon { height: 1.8rem; width: 1.8rem; diff --git a/assets/component-show-more.css b/assets/component-show-more.css index eb207088230..7e39d02e070 100644 --- a/assets/component-show-more.css +++ b/assets/component-show-more.css @@ -1,11 +1,10 @@ - .button-show-more { padding-left: 0; justify-content: flex-start; padding-bottom: 1.1rem; } -.button-show-more, +.button-show-more, .button-show-less { margin-top: 1.5rem; } diff --git a/assets/component-slider.css b/assets/component-slider.css index 4b882e4a0bb..a9c911827fb 100644 --- a/assets/component-slider.css +++ b/assets/component-slider.css @@ -1,5 +1,8 @@ slider-component { - --desktop-margin-left-first-item: max(5rem, calc((100vw - var(--page-width) + 10rem - var(--grid-desktop-horizontal-spacing)) / 2)); + --desktop-margin-left-first-item: max( + 5rem, + calc((100vw - var(--page-width) + 10rem - var(--grid-desktop-horizontal-spacing)) / 2) + ); position: relative; display: block; } @@ -49,7 +52,7 @@ slider-component.slider-component-full-width { /* Fix to show some space at the end of our sliders in all browsers */ .slider--mobile:after { - content: ""; + content: ''; width: 0; padding-left: 1.5rem; } @@ -99,7 +102,7 @@ slider-component.slider-component-full-width { /* Fix to show some space at the end of our sliders in all browsers */ .slider--tablet:after { - content: ""; + content: ''; width: 0; padding-left: 1.5rem; margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing)); @@ -153,7 +156,7 @@ slider-component.slider-component-full-width { /* Fix to show some space at the end of our sliders in all browsers */ .slider--desktop:after { - content: ""; + content: ''; width: 0; padding-left: 5rem; margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing)); @@ -185,23 +188,23 @@ slider-component.slider-component-full-width { } .slider--desktop.grid--5-col-desktop .grid__item { - width: calc( (100% - var(--desktop-margin-left-first-item)) / 5 - var(--grid-desktop-horizontal-spacing) * 2); + width: calc((100% - var(--desktop-margin-left-first-item)) / 5 - var(--grid-desktop-horizontal-spacing) * 2); } .slider--desktop.grid--4-col-desktop .grid__item { - width: calc( (100% - var(--desktop-margin-left-first-item)) / 4 - var(--grid-desktop-horizontal-spacing) * 3); + width: calc((100% - var(--desktop-margin-left-first-item)) / 4 - var(--grid-desktop-horizontal-spacing) * 3); } .slider--desktop.grid--3-col-desktop .grid__item { - width: calc( (100% - var(--desktop-margin-left-first-item)) / 3 - var(--grid-desktop-horizontal-spacing) * 4); + width: calc((100% - var(--desktop-margin-left-first-item)) / 3 - var(--grid-desktop-horizontal-spacing) * 4); } .slider--desktop.grid--2-col-desktop .grid__item { - width: calc( (100% - var(--desktop-margin-left-first-item)) / 2 - var(--grid-desktop-horizontal-spacing) * 5); + width: calc((100% - var(--desktop-margin-left-first-item)) / 2 - var(--grid-desktop-horizontal-spacing) * 5); } .slider--desktop.grid--1-col-desktop .grid__item { - width: calc( (100% - var(--desktop-margin-left-first-item)) - var(--grid-desktop-horizontal-spacing) * 9); + width: calc((100% - var(--desktop-margin-left-first-item)) - var(--grid-desktop-horizontal-spacing) * 9); } .slider.slider--desktop.contains-card--standard .slider__slide:not(.collection-list__item--no-media) { diff --git a/assets/component-slideshow.css b/assets/component-slideshow.css index 539cf894372..c117cd131ee 100644 --- a/assets/component-slideshow.css +++ b/assets/component-slideshow.css @@ -93,7 +93,6 @@ slideshow-component .slideshow.banner { } } - .slideshow:not(.banner--mobile-bottom) .slideshow__text-wrapper { height: 100%; } @@ -189,7 +188,7 @@ slideshow-component:not(.page-width) .slider-buttons { @media screen and (forced-colors: active) { .slideshow__autoplay path, - .slideshow__autoplay:hover path{ + .slideshow__autoplay:hover path { fill: CanvasText; } } @@ -202,5 +201,5 @@ slideshow-component:not(.page-width) .slider-buttons { .slideshow__autoplay:not(.slideshow__autoplay--paused) .icon-play { visibility: hidden; opacity: 0; - transform: scale(.8) + transform: scale(0.8); } diff --git a/assets/constants.js b/assets/constants.js index 6de93431a4b..01a2fb4e0ed 100644 --- a/assets/constants.js +++ b/assets/constants.js @@ -3,5 +3,6 @@ const ON_CHANGE_DEBOUNCE_TIMER = 300; const PUB_SUB_EVENTS = { cartUpdate: 'cart-update', quantityUpdate: 'quantity-update', - variantChange: 'variant-change' + variantChange: 'variant-change', + cartError: 'cart-error', }; diff --git a/assets/customer.js b/assets/customer.js index 70d21035adf..c608ccedd2e 100644 --- a/assets/customer.js +++ b/assets/customer.js @@ -4,12 +4,12 @@ const selectors = { addressContainer: '[data-address]', toggleAddressButton: 'button[aria-expanded]', cancelAddressButton: 'button[type="reset"]', - deleteAddressButton: 'button[data-confirm-message]' + deleteAddressButton: 'button[data-confirm-message]', }; const attributes = { expanded: 'aria-expanded', - confirmMessage: 'data-confirm-message' + confirmMessage: 'data-confirm-message', }; class CustomerAddresses { @@ -22,27 +22,29 @@ class CustomerAddresses { _getElements() { const container = document.querySelector(selectors.customerAddresses); - return container ? { - container, - addressContainer: container.querySelector(selectors.addressContainer), - toggleButtons: document.querySelectorAll(selectors.toggleAddressButton), - cancelButtons: container.querySelectorAll(selectors.cancelAddressButton), - deleteButtons: container.querySelectorAll(selectors.deleteAddressButton), - countrySelects: container.querySelectorAll(selectors.addressCountrySelect) - } : {}; + return container + ? { + container, + addressContainer: container.querySelector(selectors.addressContainer), + toggleButtons: document.querySelectorAll(selectors.toggleAddressButton), + cancelButtons: container.querySelectorAll(selectors.cancelAddressButton), + deleteButtons: container.querySelectorAll(selectors.deleteAddressButton), + countrySelects: container.querySelectorAll(selectors.addressCountrySelect), + } + : {}; } _setupCountries() { if (Shopify && Shopify.CountryProvinceSelector) { // eslint-disable-next-line no-new new Shopify.CountryProvinceSelector('AddressCountryNew', 'AddressProvinceNew', { - hideElement: 'AddressProvinceContainerNew' + hideElement: 'AddressProvinceContainerNew', }); this.elements.countrySelects.forEach((select) => { const formId = select.dataset.formId; // eslint-disable-next-line no-new new Shopify.CountryProvinceSelector(`AddressCountry_${formId}`, `AddressProvince_${formId}`, { - hideElement: `AddressProvinceContainer_${formId}` + hideElement: `AddressProvinceContainer_${formId}`, }); }); } @@ -61,23 +63,16 @@ class CustomerAddresses { } _toggleExpanded(target) { - target.setAttribute( - attributes.expanded, - (target.getAttribute(attributes.expanded) === 'false').toString() - ); + target.setAttribute(attributes.expanded, (target.getAttribute(attributes.expanded) === 'false').toString()); } _handleAddEditButtonClick = ({ currentTarget }) => { this._toggleExpanded(currentTarget); - } + }; _handleCancelButtonClick = ({ currentTarget }) => { - this._toggleExpanded( - currentTarget - .closest(selectors.addressContainer) - .querySelector(`[${attributes.expanded}]`) - ) - } + this._toggleExpanded(currentTarget.closest(selectors.addressContainer).querySelector(`[${attributes.expanded}]`)); + }; _handleDeleteButtonClick = ({ currentTarget }) => { // eslint-disable-next-line no-alert @@ -86,5 +81,5 @@ class CustomerAddresses { parameters: { _method: 'delete' }, }); } - } + }; } diff --git a/assets/details-disclosure.js b/assets/details-disclosure.js index cc12836bcd0..b4680b7db8f 100644 --- a/assets/details-disclosure.js +++ b/assets/details-disclosure.js @@ -11,16 +11,16 @@ class DetailsDisclosure extends HTMLElement { onFocusOut() { setTimeout(() => { if (!this.contains(document.activeElement)) this.close(); - }) + }); } onToggle() { if (!this.animations) this.animations = this.content.getAnimations(); if (this.mainDetailsToggle.hasAttribute('open')) { - this.animations.forEach(animation => animation.play()); + this.animations.forEach((animation) => animation.play()); } else { - this.animations.forEach(animation => animation.cancel()); + this.animations.forEach((animation) => animation.cancel()); } } @@ -43,7 +43,10 @@ class HeaderMenu extends DetailsDisclosure { this.header.preventHide = this.mainDetailsToggle.open; if (document.documentElement.style.getPropertyValue('--header-bottom-position-desktop') !== '') return; - document.documentElement.style.setProperty('--header-bottom-position-desktop', `${Math.floor(this.header.getBoundingClientRect().bottom)}px`); + document.documentElement.style.setProperty( + '--header-bottom-position-desktop', + `${Math.floor(this.header.getBoundingClientRect().bottom)}px` + ); } } diff --git a/assets/details-modal.js b/assets/details-modal.js index 9f6b20ff274..4d7002db6da 100644 --- a/assets/details-modal.js +++ b/assets/details-modal.js @@ -4,18 +4,9 @@ class DetailsModal extends HTMLElement { this.detailsContainer = this.querySelector('details'); this.summaryToggle = this.querySelector('summary'); - this.detailsContainer.addEventListener( - 'keyup', - (event) => event.code.toUpperCase() === 'ESCAPE' && this.close() - ); - this.summaryToggle.addEventListener( - 'click', - this.onSummaryClick.bind(this) - ); - this.querySelector('button[type="button"]').addEventListener( - 'click', - this.close.bind(this) - ); + this.detailsContainer.addEventListener('keyup', (event) => event.code.toUpperCase() === 'ESCAPE' && this.close()); + this.summaryToggle.addEventListener('click', this.onSummaryClick.bind(this)); + this.querySelector('button[type="button"]').addEventListener('click', this.close.bind(this)); this.summaryToggle.setAttribute('role', 'button'); } @@ -26,9 +17,7 @@ class DetailsModal extends HTMLElement { onSummaryClick(event) { event.preventDefault(); - event.target.closest('details').hasAttribute('open') - ? this.close() - : this.open(event); + event.target.closest('details').hasAttribute('open') ? this.close() : this.open(event); } onBodyClick(event) { @@ -36,8 +25,7 @@ class DetailsModal extends HTMLElement { } open(event) { - this.onBodyClickEvent = - this.onBodyClickEvent || this.onBodyClick.bind(this); + this.onBodyClickEvent = this.onBodyClickEvent || this.onBodyClick.bind(this); event.target.closest('details').setAttribute('open', true); document.body.addEventListener('click', this.onBodyClickEvent); document.body.classList.add('overflow-hidden'); diff --git a/assets/disclosure.css b/assets/disclosure.css deleted file mode 100644 index 1226497283a..00000000000 --- a/assets/disclosure.css +++ /dev/null @@ -1,52 +0,0 @@ -.disclosure { - position: relative; -} - -.disclosure__button { - align-items: center; - cursor: pointer; - display: flex; - height: 4rem; - padding: 0 1.5rem 0 1.5rem; - font-size: 1.3rem; - background-color: transparent; -} - -.disclosure__list-wrapper { - border-width: var(--popup-border-width); - border-style: solid; - border-color: rgba(var(--color-foreground), var(--popup-border-opacity)); - overflow: hidden; - position: absolute; - bottom: 100%; - transform: translateY(-1rem); - z-index: 2; - background-color: rgb(var(--color-background)); - border-radius: var(--popup-corner-radius); - box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow), var(--popup-shadow-opacity)); -} - -.disclosure__list { - position: relative; - overflow-y: auto; - font-size: 1.4rem; - padding-bottom: 0.5rem; - padding-top: 0.5rem; - scroll-padding: 0.5rem 0; - min-height: 8.2rem; - max-height: 19rem; - max-width: 22rem; - min-width: 12rem; - width: max-content; -} - -.disclosure__item { - position: relative; -} - -.disclosure__link { - display: block; - padding: 0.5rem 2.2rem; - text-decoration: none; - line-height: calc(1 + 0.8 / var(--font-body-scale)); -} diff --git a/assets/facets.js b/assets/facets.js index 240ad0ad3a1..17ae1f87624 100644 --- a/assets/facets.js +++ b/assets/facets.js @@ -19,7 +19,7 @@ class FacetFiltersForm extends HTMLElement { const searchParams = event.state ? event.state.searchParams : FacetFiltersForm.searchParamsInitial; if (searchParams === FacetFiltersForm.searchParamsPrev) return; FacetFiltersForm.renderPage(searchParams, null, false); - } + }; window.addEventListener('popstate', onHistoryChange); } @@ -35,20 +35,20 @@ class FacetFiltersForm extends HTMLElement { const countContainer = document.getElementById('ProductCount'); const countContainerDesktop = document.getElementById('ProductCountDesktop'); document.getElementById('ProductGridContainer').querySelector('.collection').classList.add('loading'); - if (countContainer){ + if (countContainer) { countContainer.classList.add('loading'); } - if (countContainerDesktop){ + if (countContainerDesktop) { countContainerDesktop.classList.add('loading'); } sections.forEach((section) => { const url = `${window.location.pathname}?section_id=${section.section}&${searchParams}`; - const filterDataUrl = element => element.url === url; + const filterDataUrl = (element) => element.url === url; - FacetFiltersForm.filterData.some(filterDataUrl) ? - FacetFiltersForm.renderSectionFromCache(filterDataUrl, event) : - FacetFiltersForm.renderSectionFromFetch(url, event); + FacetFiltersForm.filterData.some(filterDataUrl) + ? FacetFiltersForm.renderSectionFromCache(filterDataUrl, event) + : FacetFiltersForm.renderSectionFromFetch(url, event); }); if (updateURLHash) FacetFiltersForm.updateURLHash(searchParams); @@ -56,13 +56,14 @@ class FacetFiltersForm extends HTMLElement { static renderSectionFromFetch(url, event) { fetch(url) - .then(response => response.text()) + .then((response) => response.text()) .then((responseText) => { const html = responseText; FacetFiltersForm.filterData = [...FacetFiltersForm.filterData, { html, url }]; FacetFiltersForm.renderFilters(html, event); FacetFiltersForm.renderProductGridContainer(html); FacetFiltersForm.renderProductCount(html); + if (typeof initializeScrollAnimationTrigger === 'function') initializeScrollAnimationTrigger(html.innerHTML); }); } @@ -71,14 +72,17 @@ class FacetFiltersForm extends HTMLElement { FacetFiltersForm.renderFilters(html, event); FacetFiltersForm.renderProductGridContainer(html); FacetFiltersForm.renderProductCount(html); + if (typeof initializeScrollAnimationTrigger === 'function') initializeScrollAnimationTrigger(html.innerHTML); } static renderProductGridContainer(html) { - document.getElementById('ProductGridContainer').innerHTML = new DOMParser().parseFromString(html, 'text/html').getElementById('ProductGridContainer').innerHTML; + document.getElementById('ProductGridContainer').innerHTML = new DOMParser() + .parseFromString(html, 'text/html') + .getElementById('ProductGridContainer').innerHTML; } static renderProductCount(html) { - const count = new DOMParser().parseFromString(html, 'text/html').getElementById('ProductCount').innerHTML + const count = new DOMParser().parseFromString(html, 'text/html').getElementById('ProductCount').innerHTML; const container = document.getElementById('ProductCount'); const containerDesktop = document.getElementById('ProductCountDesktop'); container.innerHTML = count; @@ -92,13 +96,14 @@ class FacetFiltersForm extends HTMLElement { static renderFilters(html, event) { const parsedHTML = new DOMParser().parseFromString(html, 'text/html'); - const facetDetailsElements = - parsedHTML.querySelectorAll('#FacetFiltersForm .js-filter, #FacetFiltersFormMobile .js-filter, #FacetFiltersPillsForm .js-filter'); + const facetDetailsElements = parsedHTML.querySelectorAll( + '#FacetFiltersForm .js-filter, #FacetFiltersFormMobile .js-filter, #FacetFiltersPillsForm .js-filter' + ); const matchesIndex = (element) => { const jsFilter = event ? event.target.closest('.js-filter') : undefined; return jsFilter ? element.dataset.index === jsFilter.dataset.index : false; - } - const facetsToRender = Array.from(facetDetailsElements).filter(element => !matchesIndex(element)); + }; + const facetsToRender = Array.from(facetDetailsElements).filter((element) => !matchesIndex(element)); const countsToRender = Array.from(facetDetailsElements).find(matchesIndex); facetsToRender.forEach((element) => { @@ -118,7 +123,7 @@ class FacetFiltersForm extends HTMLElement { const activeFacetsElement = html.querySelector(selector); if (!activeFacetsElement) return; document.querySelector(selector).innerHTML = activeFacetsElement.innerHTML; - }) + }); FacetFiltersForm.toggleActiveFacets(false); } @@ -158,8 +163,8 @@ class FacetFiltersForm extends HTMLElement { return [ { section: document.getElementById('product-grid').dataset.id, - } - ] + }, + ]; } createSearchParams(form) { @@ -175,8 +180,8 @@ class FacetFiltersForm extends HTMLElement { event.preventDefault(); const sortFilterForms = document.querySelectorAll('facet-filters-form form'); if (event.srcElement.className == 'mobile-facets__checkbox') { - const searchParams = this.createSearchParams(event.target.closest('form')) - this.onSubmitForm(searchParams, event) + const searchParams = this.createSearchParams(event.target.closest('form')); + this.onSubmitForm(searchParams, event); } else { const forms = []; const isMobile = event.target.closest('form').id === 'FacetFiltersFormMobile'; @@ -192,14 +197,17 @@ class FacetFiltersForm extends HTMLElement { forms.push(this.createSearchParams(form)); } }); - this.onSubmitForm(forms.join('&'), event) + this.onSubmitForm(forms.join('&'), event); } } onActiveFilterClick(event) { event.preventDefault(); FacetFiltersForm.toggleActiveFacets(); - const url = event.currentTarget.href.indexOf('?') == -1 ? '' : event.currentTarget.href.slice(event.currentTarget.href.indexOf('?') + 1); + const url = + event.currentTarget.href.indexOf('?') == -1 + ? '' + : event.currentTarget.href.slice(event.currentTarget.href.indexOf('?') + 1); FacetFiltersForm.renderPage(url); } } @@ -213,8 +221,9 @@ FacetFiltersForm.setListeners(); class PriceRange extends HTMLElement { constructor() { super(); - this.querySelectorAll('input') - .forEach(element => element.addEventListener('change', this.onRangeChange.bind(this))); + this.querySelectorAll('input').forEach((element) => + element.addEventListener('change', this.onRangeChange.bind(this)) + ); this.setMinAndMaxValues(); } diff --git a/assets/global.js b/assets/global.js index 2ec7b4b2be2..38423dc1867 100644 --- a/assets/global.js +++ b/assets/global.js @@ -10,7 +10,7 @@ document.querySelectorAll('[id^="Details-"] summary').forEach((summary) => { summary.setAttribute('role', 'button'); summary.setAttribute('aria-expanded', summary.parentNode.hasAttribute('open')); - if(summary.nextElementSibling.getAttribute('id')) { + if (summary.nextElementSibling.getAttribute('id')) { summary.setAttribute('aria-controls', summary.nextElementSibling.id); } @@ -18,7 +18,7 @@ document.querySelectorAll('[id^="Details-"] summary').forEach((summary) => { event.currentTarget.setAttribute('aria-expanded', !event.currentTarget.closest('details').hasAttribute('open')); }); - if (summary.closest('header-drawer')) return; + if (summary.closest('header-drawer, menu-drawer')) return; summary.parentElement.addEventListener('keyup', onKeyUpEscape); }); @@ -32,21 +32,16 @@ function trapFocus(container, elementToFocus = container) { removeTrapFocus(); trapFocusHandlers.focusin = (event) => { - if ( - event.target !== container && - event.target !== last && - event.target !== first - ) - return; + if (event.target !== container && event.target !== last && event.target !== first) return; document.addEventListener('keydown', trapFocusHandlers.keydown); }; - trapFocusHandlers.focusout = function() { + trapFocusHandlers.focusout = function () { document.removeEventListener('keydown', trapFocusHandlers.keydown); }; - trapFocusHandlers.keydown = function(event) { + trapFocusHandlers.keydown = function (event) { if (event.code.toUpperCase() !== 'TAB') return; // If not TAB key // On the last focusable element and tab forward, focus the first element. if (event.target === last && !event.shiftKey) { @@ -55,10 +50,7 @@ function trapFocus(container, elementToFocus = container) { } // On the first focusable element and tab backward, focus the last element. - if ( - (event.target === container || event.target === first) && - event.shiftKey - ) { + if ((event.target === container || event.target === first) && event.shiftKey) { event.preventDefault(); last.focus(); } @@ -69,27 +61,42 @@ function trapFocus(container, elementToFocus = container) { elementToFocus.focus(); - if (elementToFocus.tagName === 'INPUT' && + if ( + elementToFocus.tagName === 'INPUT' && ['search', 'text', 'email', 'url'].includes(elementToFocus.type) && - elementToFocus.value) { + elementToFocus.value + ) { elementToFocus.setSelectionRange(0, elementToFocus.value.length); } } // Here run the querySelector to figure out if the browser supports :focus-visible or not and run code based on it. try { - document.querySelector(":focus-visible"); -} catch(e) { + document.querySelector(':focus-visible'); +} catch (e) { focusVisiblePolyfill(); } function focusVisiblePolyfill() { - const navKeys = ['ARROWUP', 'ARROWDOWN', 'ARROWLEFT', 'ARROWRIGHT', 'TAB', 'ENTER', 'SPACE', 'ESCAPE', 'HOME', 'END', 'PAGEUP', 'PAGEDOWN'] + const navKeys = [ + 'ARROWUP', + 'ARROWDOWN', + 'ARROWLEFT', + 'ARROWRIGHT', + 'TAB', + 'ENTER', + 'SPACE', + 'ESCAPE', + 'HOME', + 'END', + 'PAGEUP', + 'PAGEDOWN', + ]; let currentFocusedElement = null; let mouseClick = null; window.addEventListener('keydown', (event) => { - if(navKeys.includes(event.code.toUpperCase())) { + if (navKeys.includes(event.code.toUpperCase())) { mouseClick = false; } }); @@ -98,15 +105,18 @@ function focusVisiblePolyfill() { mouseClick = true; }); - window.addEventListener('focus', () => { - if (currentFocusedElement) currentFocusedElement.classList.remove('focused'); - - if (mouseClick) return; + window.addEventListener( + 'focus', + () => { + if (currentFocusedElement) currentFocusedElement.classList.remove('focused'); - currentFocusedElement = document.activeElement; - currentFocusedElement.classList.add('focused'); + if (mouseClick) return; - }, true); + currentFocusedElement = document.activeElement; + currentFocusedElement.classList.add('focused'); + }, + true + ); } function pauseAllMedia() { @@ -149,8 +159,8 @@ class QuantityInput extends HTMLElement { this.changeEvent = new Event('change', { bubbles: true }); this.input.addEventListener('change', this.onInputChange.bind(this)); - this.querySelectorAll('button').forEach( - (button) => button.addEventListener('click', this.onButtonClick.bind(this)) + this.querySelectorAll('button').forEach((button) => + button.addEventListener('click', this.onButtonClick.bind(this)) ); } @@ -190,7 +200,7 @@ class QuantityInput extends HTMLElement { const max = parseInt(this.input.max); const buttonPlus = this.querySelector(".quantity__button[name='plus']"); buttonPlus.classList.toggle('disabled', value >= max); - } + } } } @@ -207,7 +217,7 @@ function debounce(fn, wait) { function fetchConfig(type = 'json') { return { method: 'POST', - headers: { 'Content-Type': 'application/json', 'Accept': `application/${type}` } + headers: { 'Content-Type': 'application/json', Accept: `application/${type}` }, }; } @@ -215,17 +225,17 @@ function fetchConfig(type = 'json') { * Shopify Common JS * */ -if ((typeof window.Shopify) == 'undefined') { +if (typeof window.Shopify == 'undefined') { window.Shopify = {}; } -Shopify.bind = function(fn, scope) { - return function() { +Shopify.bind = function (fn, scope) { + return function () { return fn.apply(scope, arguments); - } + }; }; -Shopify.setSelectorByValue = function(selector, value) { +Shopify.setSelectorByValue = function (selector, value) { for (var i = 0, count = selector.options.length; i < count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) { @@ -235,24 +245,26 @@ Shopify.setSelectorByValue = function(selector, value) { } }; -Shopify.addListener = function(target, eventName, callback) { - target.addEventListener ? target.addEventListener(eventName, callback, false) : target.attachEvent('on'+eventName, callback); +Shopify.addListener = function (target, eventName, callback) { + target.addEventListener + ? target.addEventListener(eventName, callback, false) + : target.attachEvent('on' + eventName, callback); }; -Shopify.postLink = function(path, options) { +Shopify.postLink = function (path, options) { options = options || {}; var method = options['method'] || 'post'; var params = options['parameters'] || {}; - var form = document.createElement("form"); - form.setAttribute("method", method); - form.setAttribute("action", path); + var form = document.createElement('form'); + form.setAttribute('method', method); + form.setAttribute('action', path); - for(var key in params) { - var hiddenField = document.createElement("input"); - hiddenField.setAttribute("type", "hidden"); - hiddenField.setAttribute("name", key); - hiddenField.setAttribute("value", params[key]); + for (var key in params) { + var hiddenField = document.createElement('input'); + hiddenField.setAttribute('type', 'hidden'); + hiddenField.setAttribute('name', key); + hiddenField.setAttribute('value', params[key]); form.appendChild(hiddenField); } document.body.appendChild(form); @@ -260,34 +272,34 @@ Shopify.postLink = function(path, options) { document.body.removeChild(form); }; -Shopify.CountryProvinceSelector = function(country_domid, province_domid, options) { - this.countryEl = document.getElementById(country_domid); - this.provinceEl = document.getElementById(province_domid); +Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) { + this.countryEl = document.getElementById(country_domid); + this.provinceEl = document.getElementById(province_domid); this.provinceContainer = document.getElementById(options['hideElement'] || province_domid); - Shopify.addListener(this.countryEl, 'change', Shopify.bind(this.countryHandler,this)); + Shopify.addListener(this.countryEl, 'change', Shopify.bind(this.countryHandler, this)); this.initCountry(); this.initProvince(); }; Shopify.CountryProvinceSelector.prototype = { - initCountry: function() { + initCountry: function () { var value = this.countryEl.getAttribute('data-default'); Shopify.setSelectorByValue(this.countryEl, value); this.countryHandler(); }, - initProvince: function() { + initProvince: function () { var value = this.provinceEl.getAttribute('data-default'); if (value && this.provinceEl.options.length > 0) { Shopify.setSelectorByValue(this.provinceEl, value); } }, - countryHandler: function(e) { - var opt = this.countryEl.options[this.countryEl.selectedIndex]; - var raw = opt.getAttribute('data-provinces'); + countryHandler: function (e) { + var opt = this.countryEl.options[this.countryEl.selectedIndex]; + var raw = opt.getAttribute('data-provinces'); var provinces = JSON.parse(raw); this.clearOptions(this.provinceEl); @@ -301,24 +313,24 @@ Shopify.CountryProvinceSelector.prototype = { this.provinceEl.appendChild(opt); } - this.provinceContainer.style.display = ""; + this.provinceContainer.style.display = ''; } }, - clearOptions: function(selector) { + clearOptions: function (selector) { while (selector.firstChild) { selector.removeChild(selector.firstChild); } }, - setOptions: function(selector, values) { + setOptions: function (selector, values) { for (var i = 0, count = values.length; i < values.length; i++) { var opt = document.createElement('option'); opt.value = values[i]; opt.innerHTML = values[i]; selector.appendChild(opt); } - } + }, }; class MenuDrawer extends HTMLElement { @@ -333,17 +345,23 @@ class MenuDrawer extends HTMLElement { } bindEvents() { - this.querySelectorAll('summary').forEach(summary => summary.addEventListener('click', this.onSummaryClick.bind(this))); - this.querySelectorAll('button').forEach(button => button.addEventListener('click', this.onCloseButtonClick.bind(this))); + this.querySelectorAll('summary').forEach((summary) => + summary.addEventListener('click', this.onSummaryClick.bind(this)) + ); + this.querySelectorAll('button:not(.localization-selector)').forEach((button) => + button.addEventListener('click', this.onCloseButtonClick.bind(this)) + ); } onKeyUp(event) { - if(event.code.toUpperCase() !== 'ESCAPE') return; + if (event.code.toUpperCase() !== 'ESCAPE') return; const openDetailsElement = event.target.closest('details[open]'); - if(!openDetailsElement) return; + if (!openDetailsElement) return; - openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector('summary')) : this.closeSubmenu(openDetailsElement); + openDetailsElement === this.mainDetailsToggle + ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector('summary')) + : this.closeSubmenu(openDetailsElement); } onSummaryClick(event) { @@ -351,7 +369,7 @@ class MenuDrawer extends HTMLElement { const detailsElement = summaryElement.parentNode; const parentMenuElement = detailsElement.closest('.has-submenu'); const isOpen = detailsElement.hasAttribute('open'); - const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)"); + const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)'); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector('button')); @@ -359,7 +377,7 @@ class MenuDrawer extends HTMLElement { } if (detailsElement === this.mainDetailsToggle) { - if(isOpen) event.preventDefault(); + if (isOpen) event.preventDefault(); isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement); if (window.matchMedia('(max-width: 990px)')) { @@ -370,7 +388,9 @@ class MenuDrawer extends HTMLElement { detailsElement.classList.add('menu-opening'); summaryElement.setAttribute('aria-expanded', true); parentMenuElement && parentMenuElement.classList.add('submenu-open'); - !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener('transitionend', addTrapFocus); + !reducedMotion || reducedMotion.matches + ? addTrapFocus() + : summaryElement.nextElementSibling.addEventListener('transitionend', addTrapFocus); }, 100); } } @@ -388,21 +408,24 @@ class MenuDrawer extends HTMLElement { if (event === undefined) return; this.mainDetailsToggle.classList.remove('menu-opening'); - this.mainDetailsToggle.querySelectorAll('details').forEach(details => { + this.mainDetailsToggle.querySelectorAll('details').forEach((details) => { details.removeAttribute('open'); details.classList.remove('menu-opening'); }); - this.mainDetailsToggle.querySelectorAll('.submenu-open').forEach(submenu => { + this.mainDetailsToggle.querySelectorAll('.submenu-open').forEach((submenu) => { submenu.classList.remove('submenu-open'); }); document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`); removeTrapFocus(elementToFocus); this.closeAnimation(this.mainDetailsToggle); + + if (event instanceof KeyboardEvent) elementToFocus?.setAttribute('aria-expanded', false); } - onFocusOut(event) { + onFocusOut() { setTimeout(() => { - if (this.mainDetailsToggle.hasAttribute('open') && !this.mainDetailsToggle.contains(document.activeElement)) this.closeMenuDrawer(); + if (this.mainDetailsToggle.hasAttribute('open') && !this.mainDetailsToggle.contains(document.activeElement)) + this.closeMenuDrawer(); }); } @@ -438,7 +461,7 @@ class MenuDrawer extends HTMLElement { trapFocus(detailsElement.closest('details[open]'), detailsElement.querySelector('summary')); } } - } + }; window.requestAnimationFrame(handleAnimation); } @@ -453,8 +476,12 @@ class HeaderDrawer extends MenuDrawer { openMenuDrawer(summaryElement) { this.header = this.header || document.querySelector('.section-header'); - this.borderOffset = this.borderOffset || this.closest('.header-wrapper').classList.contains('header-wrapper--border-bottom') ? 1 : 0; - document.documentElement.style.setProperty('--header-bottom-position', `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`); + this.borderOffset = + this.borderOffset || this.closest('.header-wrapper').classList.contains('header-wrapper--border-bottom') ? 1 : 0; + document.documentElement.style.setProperty( + '--header-bottom-position', + `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px` + ); this.header.classList.add('menu-open'); setTimeout(() => { @@ -462,14 +489,26 @@ class HeaderDrawer extends MenuDrawer { }); summaryElement.setAttribute('aria-expanded', true); + window.addEventListener('resize', this.onResize); trapFocus(this.mainDetailsToggle, summaryElement); document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`); } closeMenuDrawer(event, elementToFocus) { + if (!elementToFocus) return; super.closeMenuDrawer(event, elementToFocus); this.header.classList.remove('menu-open'); + window.removeEventListener('resize', this.onResize); } + + onResize = () => { + this.header && + document.documentElement.style.setProperty( + '--header-bottom-position', + `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px` + ); + document.documentElement.style.setProperty('--viewport-height', `${window.innerHeight}px`); + }; } customElements.define('header-drawer', HeaderDrawer); @@ -477,10 +516,7 @@ customElements.define('header-drawer', HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(); - this.querySelector('[id^="ModalClose-"]').addEventListener( - 'click', - this.hide.bind(this, false) - ); + this.querySelector('[id^="ModalClose-"]').addEventListener('click', this.hide.bind(this, false)); this.addEventListener('keyup', (event) => { if (event.code.toUpperCase() === 'ESCAPE') this.hide(); }); @@ -553,6 +589,10 @@ class DeferredMedia extends HTMLElement { this.setAttribute('loaded', true); const deferredElement = this.appendChild(content.querySelector('video, model-viewer, iframe')); if (focus) deferredElement.focus(); + if (deferredElement.nodeName == 'VIDEO' && deferredElement.getAttribute('autoplay')) { + // force autoplay for safari + deferredElement.play(); + } } } } @@ -573,7 +613,7 @@ class SliderComponent extends HTMLElement { if (!this.slider || !this.nextButton) return; this.initPages(); - const resizeObserver = new ResizeObserver(entries => this.initPages()); + const resizeObserver = new ResizeObserver((entries) => this.initPages()); resizeObserver.observe(this.slider); this.slider.addEventListener('scroll', this.update.bind(this)); @@ -582,10 +622,12 @@ class SliderComponent extends HTMLElement { } initPages() { - this.sliderItemsToShow = Array.from(this.sliderItems).filter(element => element.clientWidth > 0); + this.sliderItemsToShow = Array.from(this.sliderItems).filter((element) => element.clientWidth > 0); if (this.sliderItemsToShow.length < 2) return; this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft; - this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset); + this.slidesPerPage = Math.floor( + (this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset + ); this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1; this.update(); } @@ -609,10 +651,14 @@ class SliderComponent extends HTMLElement { } if (this.currentPage != previousPage) { - this.dispatchEvent(new CustomEvent('slideChanged', { detail: { - currentPage: this.currentPage, - currentElement: this.sliderItemsToShow[this.currentPage - 1] - }})); + this.dispatchEvent( + new CustomEvent('slideChanged', { + detail: { + currentPage: this.currentPage, + currentElement: this.sliderItemsToShow[this.currentPage - 1], + }, + }) + ); } if (this.enableSliderLooping) return; @@ -632,15 +678,18 @@ class SliderComponent extends HTMLElement { isSlideVisible(element, offset = 0) { const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset; - return (element.offsetLeft + element.clientWidth) <= lastVisibleSlide && element.offsetLeft >= this.slider.scrollLeft; + return element.offsetLeft + element.clientWidth <= lastVisibleSlide && element.offsetLeft >= this.slider.scrollLeft; } onButtonClick(event) { event.preventDefault(); const step = event.currentTarget.dataset.step || 1; - this.slideScrollPosition = event.currentTarget.name === 'next' ? this.slider.scrollLeft + (step * this.sliderItemOffset) : this.slider.scrollLeft - (step * this.sliderItemOffset); + this.slideScrollPosition = + event.currentTarget.name === 'next' + ? this.slider.scrollLeft + step * this.sliderItemOffset + : this.slider.scrollLeft - step * this.sliderItemOffset; this.slider.scrollTo({ - left: this.slideScrollPosition + left: this.slideScrollPosition, }); } } @@ -659,25 +708,33 @@ class SlideshowComponent extends SliderComponent { if (this.sliderItemsToShow.length > 0) this.currentPage = 1; this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll('.slider-counter__link')); - this.sliderControlLinksArray.forEach(link => link.addEventListener('click', this.linkToSlide.bind(this))); + this.sliderControlLinksArray.forEach((link) => link.addEventListener('click', this.linkToSlide.bind(this))); this.slider.addEventListener('scroll', this.setSlideVisibility.bind(this)); this.setSlideVisibility(); + this.reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)'); + this.reducedMotion.addEventListener('change', () => { + if (this.slider.getAttribute('data-autoplay') === 'true') this.setAutoPlay(); + }); + if (this.slider.getAttribute('data-autoplay') === 'true') this.setAutoPlay(); } setAutoPlay() { - this.sliderAutoplayButton = this.querySelector('.slideshow__autoplay'); this.autoplaySpeed = this.slider.dataset.speed * 1000; - - this.sliderAutoplayButton.addEventListener('click', this.autoPlayToggle.bind(this)); 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.play(); - this.autoplayButtonIsSetToPlay = true; + if (this.querySelector('.slideshow__autoplay')) { + this.sliderAutoplayButton = this.querySelector('.slideshow__autoplay'); + this.sliderAutoplayButton.addEventListener('click', this.autoPlayToggle.bind(this)); + this.autoplayButtonIsSetToPlay = true; + this.play(); + } else { + this.reducedMotion.matches ? this.pause() : this.play(); + } } onButtonClick(event) { @@ -688,12 +745,13 @@ class SlideshowComponent extends SliderComponent { if (!isFirstSlide && !isLastSlide) return; if (isFirstSlide && event.currentTarget.name === 'previous') { - this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length; + this.slideScrollPosition = + this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length; } else if (isLastSlide && event.currentTarget.name === 'next') { this.slideScrollPosition = 0; } this.slider.scrollTo({ - left: this.slideScrollPosition + left: this.slideScrollPosition, }); } @@ -704,7 +762,7 @@ class SlideshowComponent extends SliderComponent { if (!this.sliderControlButtons.length) return; - this.sliderControlButtons.forEach(link => { + this.sliderControlButtons.forEach((link) => { link.classList.remove('slider-counter__link--active'); link.removeAttribute('aria-current'); }); @@ -719,16 +777,26 @@ class SlideshowComponent extends SliderComponent { } focusOutHandling(event) { - const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); - if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; - this.play(); + if (this.sliderAutoplayButton) { + const focusedOnAutoplayButton = + event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); + if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return; + this.play(); + } else if (!this.reducedMotion.matches) { + this.play(); + } } focusInHandling(event) { - const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); - if (focusedOnAutoplayButton && this.autoplayButtonIsSetToPlay) { - this.play(); - } else if (this.autoplayButtonIsSetToPlay) { + if (this.sliderAutoplayButton) { + const focusedOnAutoplayButton = + event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target); + if (focusedOnAutoplayButton && this.autoplayButtonIsSetToPlay) { + this.play(); + } else if (this.autoplayButtonIsSetToPlay) { + this.pause(); + } + } else if (this.querySelector('.announcement-bar-slider').contains(event.target)) { this.pause(); } } @@ -755,9 +823,12 @@ class SlideshowComponent extends SliderComponent { } autoRotateSlides() { - const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.slider.querySelector('.slideshow__slide').clientWidth; + const slideScrollPosition = + this.currentPage === this.sliderItems.length + ? 0 + : this.slider.scrollLeft + this.slider.querySelector('.slideshow__slide').clientWidth; this.slider.scrollTo({ - left: slideScrollPosition + left: slideScrollPosition, }); } @@ -765,15 +836,17 @@ class SlideshowComponent extends SliderComponent { this.sliderItemsToShow.forEach((item, index) => { const linkElements = item.querySelectorAll('a'); if (index === this.currentPage - 1) { - if (linkElements.length) linkElements.forEach(button => { - button.removeAttribute('tabindex'); - }); + if (linkElements.length) + linkElements.forEach((button) => { + button.removeAttribute('tabindex'); + }); item.setAttribute('aria-hidden', 'false'); item.removeAttribute('tabindex'); } else { - if (linkElements.length) linkElements.forEach(button => { - button.setAttribute('tabindex', '-1'); - }); + if (linkElements.length) + linkElements.forEach((button) => { + button.setAttribute('tabindex', '-1'); + }); item.setAttribute('aria-hidden', 'true'); item.setAttribute('tabindex', '-1'); } @@ -782,9 +855,12 @@ class SlideshowComponent extends SliderComponent { linkToSlide(event) { event.preventDefault(); - const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); + const slideScrollPosition = + this.slider.scrollLeft + + this.sliderFirstItemNode.clientWidth * + (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage); this.slider.scrollTo({ - left: slideScrollPosition + left: slideScrollPosition, }); } } @@ -823,9 +899,11 @@ class VariantSelects extends HTMLElement { updateMasterId() { this.currentVariant = this.getVariantData().find((variant) => { - return !variant.options.map((option, index) => { - return this.options[index] === option; - }).includes(false); + return !variant.options + .map((option, index) => { + return this.options[index] === option; + }) + .includes(false); }); } @@ -834,17 +912,19 @@ class VariantSelects extends HTMLElement { if (!this.currentVariant.featured_media) return; const mediaGalleries = document.querySelectorAll(`[id^="MediaGallery-${this.dataset.section}"]`); - mediaGalleries.forEach(mediaGallery => mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, true)); + mediaGalleries.forEach((mediaGallery) => + mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, true) + ); const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); if (!modalContent) return; - const newMediaModal = modalContent.querySelector( `[data-media-id="${this.currentVariant.featured_media.id}"]`); + const newMediaModal = modalContent.querySelector(`[data-media-id="${this.currentVariant.featured_media.id}"]`); modalContent.prepend(newMediaModal); } updateURL() { if (!this.currentVariant || this.dataset.updateUrl === 'false') return; - window.history.replaceState({ }, '', `${this.dataset.url}?variant=${this.currentVariant.id}`); + window.history.replaceState({}, '', `${this.dataset.url}?variant=${this.currentVariant.id}`); } updateShareUrl() { @@ -854,7 +934,9 @@ class VariantSelects extends HTMLElement { } updateVariantInput() { - const productForms = document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`); + const productForms = document.querySelectorAll( + `#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}` + ); productForms.forEach((productForm) => { const input = productForm.querySelector('input[name="id"]'); input.value = this.currentVariant.id; @@ -863,19 +945,23 @@ class VariantSelects extends HTMLElement { } updateVariantStatuses() { - const selectedOptionOneVariants = this.variantData.filter(variant => this.querySelector(':checked').value === variant.option1); + const selectedOptionOneVariants = this.variantData.filter( + (variant) => this.querySelector(':checked').value === variant.option1 + ); const inputWrappers = [...this.querySelectorAll('.product-form__input')]; inputWrappers.forEach((option, index) => { if (index === 0) return; - const optionInputs = [...option.querySelectorAll('input[type="radio"], option')] + const optionInputs = [...option.querySelectorAll('input[type="radio"], option')]; const previousOptionSelected = inputWrappers[index - 1].querySelector(':checked').value; - const availableOptionInputsValue = selectedOptionOneVariants.filter(variant => variant.available && variant[`option${ index }`] === previousOptionSelected).map(variantOption => variantOption[`option${ index + 1 }`]); - this.setInputAvailability(optionInputs, availableOptionInputsValue) + const availableOptionInputsValue = selectedOptionOneVariants + .filter((variant) => variant.available && variant[`option${index}`] === previousOptionSelected) + .map((variantOption) => variantOption[`option${index + 1}`]); + this.setInputAvailability(optionInputs, availableOptionInputsValue); }); } setInputAvailability(listOfOptions, listOfAvailableOptions) { - listOfOptions.forEach(input => { + listOfOptions.forEach((input) => { if (listOfAvailableOptions.includes(input.getAttribute('value'))) { input.innerText = input.getAttribute('value'); } else { @@ -908,18 +994,28 @@ class VariantSelects extends HTMLElement { const requestedVariantId = this.currentVariant.id; const sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; - fetch(`${this.dataset.url}?variant=${requestedVariantId}§ion_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`) + fetch( + `${this.dataset.url}?variant=${requestedVariantId}§ion_id=${ + this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section + }` + ) .then((response) => response.text()) .then((responseText) => { // prevent unnecessary ui changes from abandoned selections if (this.currentVariant.id !== requestedVariantId) return; - const html = new DOMParser().parseFromString(responseText, 'text/html') + const html = new DOMParser().parseFromString(responseText, 'text/html'); const destination = document.getElementById(`price-${this.dataset.section}`); - const source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`); - const skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`); + const source = html.getElementById( + `price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}` + ); + const skuSource = html.getElementById( + `Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}` + ); const skuDestination = document.getElementById(`Sku-${this.dataset.section}`); - const inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`); + const inventorySource = html.getElementById( + `Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}` + ); const inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`); if (source && destination) destination.innerHTML = source.innerHTML; @@ -933,16 +1029,22 @@ class VariantSelects extends HTMLElement { if (price) price.classList.remove('visibility-hidden'); - if (inventoryDestination) inventoryDestination.classList.toggle('visibility-hidden', inventorySource.innerText === ''); + if (inventoryDestination) + inventoryDestination.classList.toggle('visibility-hidden', inventorySource.innerText === ''); const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`); - this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute('disabled') : true, window.variantStrings.soldOut); - - publish(PUB_SUB_EVENTS.variantChange, {data: { - sectionId, - html, - variant: this.currentVariant - }}); + this.toggleAddButton( + addButtonUpdated ? addButtonUpdated.hasAttribute('disabled') : true, + window.variantStrings.soldOut + ); + + publish(PUB_SUB_EVENTS.variantChange, { + data: { + sectionId, + html, + variant: this.currentVariant, + }, + }); }); } @@ -993,7 +1095,7 @@ class VariantRadios extends VariantSelects { } setInputAvailability(listOfOptions, listOfAvailableOptions) { - listOfOptions.forEach(input => { + listOfOptions.forEach((input) => { if (listOfAvailableOptions.includes(input.getAttribute('value'))) { input.classList.remove('disabled'); } else { @@ -1023,8 +1125,8 @@ class ProductRecommendations extends HTMLElement { observer.unobserve(this); fetch(this.dataset.url) - .then(response => response.text()) - .then(text => { + .then((response) => response.text()) + .then((text) => { const html = document.createElement('div'); html.innerHTML = text; const recommendations = html.querySelector('product-recommendations'); @@ -1041,12 +1143,12 @@ class ProductRecommendations extends HTMLElement { this.classList.add('product-recommendations--loaded'); } }) - .catch(e => { + .catch((e) => { console.error(e); }); - } + }; - new IntersectionObserver(handleIntersection.bind(this), {rootMargin: '0px 0px 400px 0px'}).observe(this); + new IntersectionObserver(handleIntersection.bind(this), { rootMargin: '0px 0px 400px 0px' }).observe(this); } } diff --git a/assets/localization-form.js b/assets/localization-form.js new file mode 100644 index 00000000000..8f8e9f8d161 --- /dev/null +++ b/assets/localization-form.js @@ -0,0 +1,58 @@ +if (!customElements.get('localization-form')) { + customElements.define( + 'localization-form', + class LocalizationForm extends HTMLElement { + constructor() { + super(); + this.elements = { + input: this.querySelector('input[name="locale_code"], input[name="country_code"]'), + button: this.querySelector('button'), + panel: this.querySelector('.disclosure__list-wrapper'), + }; + this.elements.button.addEventListener('click', this.openSelector.bind(this)); + this.elements.button.addEventListener('focusout', this.closeSelector.bind(this)); + this.addEventListener('keyup', this.onContainerKeyUp.bind(this)); + + this.querySelectorAll('a').forEach((item) => item.addEventListener('click', this.onItemClick.bind(this))); + } + + hidePanel() { + this.elements.button.setAttribute('aria-expanded', 'false'); + this.elements.panel.setAttribute('hidden', true); + } + + onContainerKeyUp(event) { + if (event.code.toUpperCase() !== 'ESCAPE') return; + + if(this.elements.button.getAttribute('aria-expanded') == 'false') return; + this.hidePanel(); + event.stopPropagation(); + this.elements.button.focus(); + } + + onItemClick(event) { + event.preventDefault(); + const form = this.querySelector('form'); + this.elements.input.value = event.currentTarget.dataset.value; + if (form) form.submit(); + } + + openSelector() { + this.elements.button.focus(); + this.elements.panel.toggleAttribute('hidden'); + this.elements.button.setAttribute( + 'aria-expanded', + (this.elements.button.getAttribute('aria-expanded') === 'false').toString() + ); + } + + closeSelector(event) { + const isChild = + this.elements.panel.contains(event.relatedTarget) || this.elements.button.contains(event.relatedTarget); + if (!event.relatedTarget || !isChild) { + this.hidePanel(); + } + } + } + ); +} diff --git a/assets/magnify.js b/assets/magnify.js index 7a896ec7f76..60a4f91a9c5 100644 --- a/assets/magnify.js +++ b/assets/magnify.js @@ -1,12 +1,33 @@ // create a container and set the full-size image as its background function createOverlay(image) { + const overlayImage = document.createElement('img'); + overlayImage.setAttribute('src', `${image.src}`); overlay = document.createElement('div'); - overlay.setAttribute('class', 'image-magnify-full-size'); - overlay.setAttribute('aria-hidden', 'true'); - overlay.style.backgroundImage = `url('${image.src}')`; - image.parentElement.insertBefore(overlay, image); + prepareOverlay(overlay, overlayImage); + + image.style.opacity = '50%'; + toggleLoadingSpinner(image); + + overlayImage.onload = () => { + toggleLoadingSpinner(image); + image.parentElement.insertBefore(overlay, image); + image.style.opacity = '100%'; + }; + return overlay; -}; +} + +function prepareOverlay(container, image) { + container.setAttribute('class', 'image-magnify-full-size'); + container.setAttribute('aria-hidden', 'true'); + container.style.backgroundImage = `url('${image.src}')`; + container.style.backgroundColor = 'var(--gradient-background)'; +} + +function toggleLoadingSpinner(image) { + const loadingSpinner = image.parentElement.parentElement.querySelector(`.loading-overlay__spinner`); + loadingSpinner.classList.toggle('hidden'); +} function moveWithHover(image, event, zoomRatio) { // calculate mouse position @@ -14,13 +35,13 @@ function moveWithHover(image, event, zoomRatio) { const container = event.target.getBoundingClientRect(); const xPosition = event.clientX - container.left; const yPosition = event.clientY - container.top; - const xPercent = `${xPosition / (overlay.clientWidth / 100)}%`; - const yPercent = `${yPosition / ((overlay.clientWidth * ratio) / 100)}%`; + const xPercent = `${xPosition / (image.clientWidth / 100)}%`; + const yPercent = `${yPosition / ((image.clientWidth * ratio) / 100)}%`; // determine what to show in the frame overlay.style.backgroundPosition = `${xPercent} ${yPercent}`; overlay.style.backgroundSize = `${image.width * zoomRatio}px`; -}; +} function magnify(image, zoomRatio) { const overlay = createOverlay(image); @@ -31,7 +52,7 @@ function magnify(image, zoomRatio) { function enableZoomOnHover(zoomRatio) { const images = document.querySelectorAll('.image-magnify-hover'); - images.forEach(image => { + images.forEach((image) => { image.onclick = (event) => { magnify(image, zoomRatio); moveWithHover(image, event, zoomRatio); diff --git a/assets/main-search.js b/assets/main-search.js index 6deaf47475f..4e0e432ff07 100644 --- a/assets/main-search.js +++ b/assets/main-search.js @@ -7,15 +7,11 @@ class MainSearch extends SearchForm { setupEventListeners() { let allSearchForms = []; - this.allSearchInputs.forEach(input => allSearchForms.push(input.form)) + this.allSearchInputs.forEach((input) => allSearchForms.push(input.form)); this.input.addEventListener('focus', this.onInputFocus.bind(this)); if (allSearchForms.length < 2) return; - allSearchForms.forEach(form => - form.addEventListener('reset', this.onFormReset.bind(this)) - ); - this.allSearchInputs.forEach(input => - input.addEventListener('input', this.onInput.bind(this)) - ); + allSearchForms.forEach((form) => form.addEventListener('reset', this.onFormReset.bind(this))); + this.allSearchInputs.forEach((input) => input.addEventListener('input', this.onInput.bind(this))); } onFormReset(event) { @@ -33,12 +29,12 @@ class MainSearch extends SearchForm { onInputFocus() { const isSmallScreen = window.innerWidth < 750; if (isSmallScreen) { - this.scrollIntoView({behavior: 'smooth'}); + this.scrollIntoView({ behavior: 'smooth' }); } } keepInSync(value, target) { - this.allSearchInputs.forEach(input => { + this.allSearchInputs.forEach((input) => { if (input !== target) { input.value = value; } diff --git a/assets/mask-blobs.css b/assets/mask-blobs.css new file mode 100644 index 00000000000..a1f576523c5 --- /dev/null +++ b/assets/mask-blobs.css @@ -0,0 +1,8 @@ +:root { + --shape--blob-1: 97.686% 33.617%, 98.392% 36.152%, 98.960% 38.721%, 99.398% 41.315%, 99.712% 43.928%, 99.909% 46.552%, 99.995% 49.182%, 99.974% 51.813%, 99.852% 54.441%, 99.630% 57.063%, 99.311% 59.675%, 98.897% 62.274%, 98.389% 64.856%, 97.787% 67.417%, 97.091% 69.955%, 96.299% 72.464%, 95.411% 74.941%, 94.422% 77.379%, 93.329% 79.773%, 92.127% 82.114%, 90.812% 84.393%, 89.377% 86.598%, 87.813% 88.714%, 86.114% 90.723%, 84.272% 92.600%, 82.279% 94.317%, 80.125% 95.828%, 77.832% 97.117%, 75.423% 98.172%, 72.920% 98.983%, 70.352% 99.552%, 67.743% 99.887%, 65.115% 100.000%, 62.485% 99.907%, 59.869% 99.627%, 57.277% 99.176%, 54.717% 98.571%, 52.193% 97.825%, 49.711% 96.954%, 47.271% 95.967%, 44.877% 94.876%, 42.529% 93.689%, 40.227% 92.414%, 37.972% 91.058%, 35.764% 89.626%, 33.604% 88.123%, 31.491% 86.555%, 29.426% 84.924%, 27.410% 83.234%, 25.441% 81.487%, 23.522% 79.687%, 21.651% 77.836%, 19.832% 75.935%, 18.064% 73.986%, 16.350% 71.990%, 14.691% 69.947%, 13.090% 67.859%, 11.549% 65.726%, 10.073% 63.547%, 8.665% 61.324%, 7.331% 59.056%, 6.076% 56.744%, 4.907% 54.386%, 3.832% 51.984%, 2.861% 49.539%, 2.006% 47.050%, 1.280% 44.521%, 0.699% 41.955%, 0.280% 39.358%, 0.044% 36.738%, 0.014% 34.107%, 0.212% 31.484%, 0.660% 28.892%, 1.371% 26.359%, 2.338% 23.913%, 3.540% 21.574%, 4.951% 19.354%, 6.546% 17.261%, 8.300% 15.300%, 10.191% 13.471%, 12.199% 11.771%, 14.307% 10.197%, 16.502% 8.746%, 18.771% 7.414%, 21.104% 6.198%, 23.493% 5.094%, 25.930% 4.101%, 28.408% 3.217%, 30.922% 2.439%, 33.466% 1.768%, 36.036% 1.203%, 38.627% 0.744%, 41.235% 0.394%, 43.855% 0.152%, 46.483% 0.023%, 49.114% 0.008%, 51.744% 0.103%, 54.366% 0.315%, 56.977% 0.648%, 59.569% 1.100%, 62.137% 1.672%, 64.676% 2.363%, 67.179% 3.173%, 69.642% 4.101%, 72.056% 5.147%, 74.416% 6.310%, 76.715% 7.590%, 78.946% 8.985%, 81.102% 10.494%, 83.174% 12.115%, 85.156% 13.846%, 87.039% 15.684%, 88.815% 17.625%, 90.477% 19.664%, 92.017% 21.797%, 93.429% 24.017%, 94.707% 26.318%, 95.844% 28.690%, 96.838% 31.126%, 97.686% 33.617%; + --shape--blob-2: 85.349% 11.712%, 87.382% 13.587%, 89.228% 15.647%, 90.886% 17.862%, 92.359% 20.204%, 93.657% 22.647%, 94.795% 25.169%, 95.786% 27.752%, 96.645% 30.382%, 97.387% 33.048%, 98.025% 35.740%, 98.564% 38.454%, 99.007% 41.186%, 99.358% 43.931%, 99.622% 46.685%, 99.808% 49.446%, 99.926% 52.210%, 99.986% 54.977%, 99.999% 57.744%, 99.975% 60.511%, 99.923% 63.278%, 99.821% 66.043%, 99.671% 68.806%, 99.453% 71.565%, 99.145% 74.314%, 98.724% 77.049%, 98.164% 79.759%, 97.433% 82.427%, 96.495% 85.030%, 95.311% 87.529%, 93.841% 89.872%, 92.062% 91.988%, 89.972% 93.796%, 87.635% 95.273%, 85.135% 96.456%, 82.532% 97.393%, 79.864% 98.127%, 77.156% 98.695%, 74.424% 99.129%, 71.676% 99.452%, 68.918% 99.685%, 66.156% 99.844%, 63.390% 99.942%, 60.624% 99.990%, 57.856% 99.999%, 55.089% 99.978%, 52.323% 99.929%, 49.557% 99.847%, 46.792% 99.723%, 44.031% 99.549%, 41.273% 99.317%, 38.522% 99.017%, 35.781% 98.639%, 33.054% 98.170%, 30.347% 97.599%, 27.667% 96.911%, 25.024% 96.091%, 22.432% 95.123%, 19.907% 93.994%, 17.466% 92.690%, 15.126% 91.216%, 12.902% 89.569%, 10.808% 87.761%, 8.854% 85.803%, 7.053% 83.703%, 5.418% 81.471%, 3.962% 79.119%, 2.702% 76.656%, 1.656% 74.095%, 0.846% 71.450%, 0.294% 68.740%, 0.024% 65.987%, 0.050% 63.221%, 0.343% 60.471%, 0.858% 57.752%, 1.548% 55.073%, 2.370% 52.431%, 3.283% 49.819%, 4.253% 47.227%, 5.249% 44.646%, 6.244% 42.063%, 7.211% 39.471%, 8.124% 36.858%, 8.958% 34.220%, 9.711% 31.558%, 10.409% 28.880%, 11.083% 26.196%, 11.760% 23.513%, 12.474% 20.839%, 13.259% 18.186%, 14.156% 15.569%, 15.214% 13.012%, 16.485% 10.556%, 18.028% 8.261%, 19.883% 6.211%, 22.041% 4.484%, 24.440% 3.110%, 26.998% 2.057%, 29.651% 1.275%, 32.360% 0.714%, 35.101% 0.337%, 37.859% 0.110%, 40.624% 0.009%, 43.391% 0.016%, 46.156% 0.113%, 48.918% 0.289%, 51.674% 0.533%, 54.425% 0.837%, 57.166% 1.215%, 59.898% 1.654%, 62.618% 2.163%, 65.322% 2.750%, 68.006% 3.424%, 70.662% 4.197%, 73.284% 5.081%, 75.860% 6.091%, 78.376% 7.242%, 80.813% 8.551%, 83.148% 10.036%, 85.349% 11.712%; + --shape--blob-3: 78.621% 12.736%, 80.746% 14.354%, 82.710% 16.163%, 84.520% 18.127%, 86.187% 20.215%, 87.721% 22.401%, 89.134% 24.668%, 90.437% 27.000%, 91.639% 29.386%, 92.748% 31.816%, 93.770% 34.284%, 94.714% 36.783%, 95.583% 39.309%, 96.382% 41.858%, 97.112% 44.428%, 97.770% 47.017%, 98.353% 49.624%, 98.858% 52.248%, 99.279% 54.886%, 99.611% 57.536%, 99.847% 60.197%, 99.977% 62.865%, 99.991% 65.537%, 99.879% 68.205%, 99.626% 70.865%, 99.217% 73.504%, 98.635% 76.111%, 97.863% 78.668%, 96.879% 81.151%, 95.683% 83.538%, 94.291% 85.818%, 92.717% 87.976%, 90.974% 89.999%, 89.075% 91.878%, 87.033% 93.599%, 84.860% 95.151%, 82.567% 96.520%, 80.167% 97.692%, 77.673% 98.647%, 75.100% 99.364%, 72.469% 99.819%, 69.805% 99.997%, 67.136% 99.893%, 64.491% 99.529%, 61.884% 98.946%, 59.324% 98.186%, 56.807% 97.290%, 54.329% 96.293%, 51.880% 95.225%, 49.451% 94.114%, 47.030% 92.984%, 44.607% 91.858%, 42.173% 90.757%, 39.719% 89.701%, 37.245% 88.695%, 34.756% 87.723%, 32.263% 86.763%, 29.775% 85.790%, 27.301% 84.782%, 24.852% 83.715%, 22.441% 82.564%, 20.085% 81.306%, 17.802% 79.919%, 15.615% 78.386%, 13.549% 76.694%, 11.627% 74.839%, 9.875% 72.824%, 8.296% 70.669%, 6.878% 68.406%, 5.612% 66.054%, 4.489% 63.630%, 3.502% 61.148%, 2.645% 58.618%, 1.914% 56.049%, 1.304% 53.448%, 0.812% 50.823%, 0.437% 48.178%, 0.177% 45.519%, 0.033% 42.852%, 0.004% 40.181%, 0.091% 37.511%, 0.299% 34.847%, 0.634% 32.197%, 1.088% 29.565%, 1.657% 26.955%, 2.344% 24.374%, 3.150% 21.827%, 4.078% 19.322%, 5.133% 16.868%, 6.321% 14.475%, 7.651% 12.159%, 9.134% 9.937%, 10.780% 7.835%, 12.604% 5.883%, 14.615% 4.127%, 16.820% 2.622%, 19.214% 1.442%, 21.758% 0.633%, 24.387% 0.168%, 27.052% 0.002%, 29.721% 0.082%, 32.378% 0.357%, 35.016% 0.781%, 37.632% 1.318%, 40.231% 1.936%, 42.817% 2.607%, 45.396% 3.304%, 47.975% 4.002%, 50.561% 4.673%, 53.163% 5.278%, 55.778% 5.822%, 58.401% 6.329%, 61.027% 6.821%, 63.650% 7.326%, 66.264% 7.878%, 68.858% 8.515%, 71.418% 9.281%, 73.919% 10.217%, 76.332% 11.362%, 78.621% 12.736%; + --shape--blob-4: 80.628% 3.397%, 82.907% 4.713%, 85.051% 6.239%, 87.055% 7.945%, 88.916% 9.806%, 90.636% 11.799%, 92.213% 13.907%, 93.650% 16.112%, 94.946% 18.403%, 96.102% 20.768%, 97.115% 23.198%, 97.983% 25.683%, 98.702% 28.215%, 99.256% 30.788%, 99.652% 33.390%, 99.898% 36.011%, 99.998% 38.642%, 99.953% 41.274%, 99.765% 43.899%, 99.436% 46.511%, 98.966% 49.101%, 98.355% 51.662%, 97.602% 54.184%, 96.703% 56.658%, 95.658% 59.074%, 94.459% 61.417%, 93.104% 63.674%, 91.610% 65.841%, 89.994% 67.919%, 88.274% 69.912%, 86.469% 71.828%, 84.595% 73.677%, 82.668% 75.471%, 80.701% 77.221%, 78.709% 78.941%, 76.701% 80.644%, 74.690% 82.343%, 72.683% 84.048%, 70.680% 85.756%, 68.669% 87.455%, 66.637% 89.129%, 64.575% 90.765%, 62.468% 92.344%, 60.307% 93.847%, 58.080% 95.251%, 55.778% 96.528%, 53.396% 97.648%, 50.934% 98.576%, 48.398% 99.281%, 45.809% 99.751%, 43.186% 99.976%, 40.555% 99.967%, 37.933% 99.738%, 35.337% 99.303%, 32.781% 98.675%, 30.276% 97.865%, 27.834% 96.884%, 25.462% 95.741%, 23.171% 94.446%, 20.969% 93.004%, 18.866% 91.420%, 16.874% 89.700%, 14.991% 87.861%, 13.220% 85.913%, 11.560% 83.870%, 10.011% 81.742%, 8.574% 79.537%, 7.246% 77.263%, 6.029% 74.929%, 4.921% 72.541%, 3.923% 70.106%, 3.034% 67.628%, 2.256% 65.113%, 1.587% 62.566%, 1.033% 59.993%, 0.595% 57.397%, 0.275% 54.784%, 0.076% 52.159%, 0.001% 49.528%, 0.052% 46.896%, 0.236% 44.270%, 0.556% 41.657%, 1.019% 39.066%, 1.631% 36.506%, 2.398% 33.988%, 3.328% 31.525%, 4.412% 29.127%, 5.654% 26.806%, 7.044% 24.570%, 8.571% 22.426%, 10.224% 20.378%, 11.993% 18.429%, 13.868% 16.581%, 15.840% 14.837%, 17.900% 13.198%, 20.041% 11.666%, 22.255% 10.243%, 24.540% 8.937%, 26.891% 7.752%, 29.296% 6.680%, 31.746% 5.718%, 34.235% 4.860%, 36.755% 4.099%, 39.300% 3.427%, 41.865% 2.833%, 44.444% 2.306%, 47.035% 1.836%, 49.633% 1.412%, 52.237% 1.025%, 54.847% 0.677%, 57.463% 0.383%, 60.086% 0.162%, 62.715% 0.029%, 65.348% 0.006%, 67.978% 0.112%, 70.597% 0.372%, 73.193% 0.808%, 75.747% 1.446%, 78.234% 2.304%, 80.628% 3.397%; + --shape--blob-5: 80.452% 2.197%, 82.761% 3.507%, 84.885% 5.101%, 86.818% 6.922%, 88.568% 8.920%, 90.147% 11.056%, 91.569% 13.300%, 92.848% 15.628%, 93.997% 18.023%, 95.026% 20.472%, 95.944% 22.966%, 96.759% 25.494%, 97.476% 28.053%, 98.100% 30.635%, 98.634% 33.238%, 99.082% 35.856%, 99.444% 38.489%, 99.714% 41.132%, 99.893% 43.782%, 99.986% 46.438%, 99.992% 49.094%, 99.909% 51.750%, 99.736% 54.401%, 99.472% 57.045%, 99.113% 59.677%, 98.656% 62.294%, 98.098% 64.892%, 97.435% 67.465%, 96.663% 70.007%, 95.776% 72.511%, 94.769% 74.969%, 93.636% 77.373%, 92.372% 79.709%, 90.970% 81.966%, 89.423% 84.125%, 87.728% 86.170%, 85.898% 88.095%, 83.943% 89.894%, 81.873% 91.560%, 79.701% 93.088%, 77.435% 94.475%, 75.087% 95.718%, 72.666% 96.811%, 70.182% 97.753%, 67.645% 98.540%, 65.063% 99.165%, 62.446% 99.622%, 59.804% 99.904%, 57.150% 100.000%, 54.495% 99.900%, 51.855% 99.607%, 49.242% 99.128%, 46.668% 98.471%, 44.142% 97.651%, 41.669% 96.680%, 39.254% 95.572%, 36.900% 94.342%, 34.605% 93.002%, 32.370% 91.566%, 30.193% 90.044%, 28.067% 88.450%, 25.999% 86.782%, 23.993% 85.040%, 22.054% 83.224%, 20.182% 81.338%, 18.380% 79.387%, 16.644% 77.375%, 14.972% 75.310%, 13.360% 73.198%, 11.802% 71.046%, 10.288% 68.863%, 8.816% 66.651%, 7.404% 64.400%, 6.063% 62.107%, 4.809% 59.765%, 3.656% 57.371%, 2.624% 54.923%, 1.730% 52.421%, 0.998% 49.868%, 0.451% 47.268%, 0.112% 44.634%, 0.000% 41.980%, 0.117% 39.327%, 0.446% 36.691%, 0.976% 34.088%, 1.696% 31.531%, 2.600% 29.033%, 3.682% 26.607%, 4.941% 24.268%, 6.375% 22.032%, 7.986% 19.921%, 9.775% 17.957%, 11.743% 16.173%, 13.876% 14.591%, 16.156% 13.229%, 18.548% 12.073%, 21.017% 11.094%, 23.538% 10.255%, 26.091% 9.521%, 28.664% 8.858%, 31.248% 8.240%, 33.837% 7.642%, 36.426% 7.045%, 39.011% 6.431%, 41.589% 5.787%, 44.157% 5.109%, 46.720% 4.407%, 49.281% 3.701%, 51.846% 3.006%, 54.418% 2.339%, 57.001% 1.717%, 59.598% 1.157%, 62.212% 0.680%, 64.842% 0.309%, 67.488% 0.072%, 70.144% 0.002%, 72.797% 0.137%, 75.424% 0.521%, 77.992% 1.197%, 80.452% 2.197%; + --shape--blob-6: 71.914% 1.829%, 74.287% 2.884%, 76.559% 4.144%, 78.723% 5.581%, 80.777% 7.171%, 82.721% 8.894%, 84.557% 10.733%, 86.284% 12.673%, 87.906% 14.703%, 89.423% 16.812%, 90.838% 18.991%, 92.151% 21.233%, 93.364% 23.531%, 94.477% 25.878%, 95.492% 28.270%, 96.406% 30.702%, 97.222% 33.169%, 97.938% 35.666%, 98.555% 38.190%, 99.069% 40.737%, 99.476% 43.303%, 99.771% 45.884%, 99.948% 48.476%, 99.999% 51.073%, 99.914% 53.670%, 99.680% 56.257%, 99.287% 58.825%, 98.717% 61.360%, 97.957% 63.844%, 96.984% 66.252%, 95.807% 68.567%, 94.448% 70.781%, 92.930% 72.889%, 91.273% 74.890%, 89.499% 76.788%, 87.625% 78.587%, 85.668% 80.296%, 83.642% 81.923%, 81.560% 83.477%, 79.431% 84.967%, 77.266% 86.402%, 75.071% 87.793%, 72.854% 89.148%, 70.624% 90.481%, 68.375% 91.783%, 66.103% 93.044%, 63.803% 94.253%, 61.470% 95.396%, 59.100% 96.459%, 56.688% 97.425%, 54.232% 98.272%, 51.732% 98.978%, 49.190% 99.518%, 46.616% 99.866%, 44.022% 99.999%, 41.427% 99.904%, 38.848% 99.589%, 36.304% 99.067%, 33.806% 98.353%, 31.365% 97.465%, 28.988% 96.417%, 26.680% 95.223%, 24.446% 93.897%, 22.289% 92.450%, 20.209% 90.892%, 18.210% 89.233%, 16.286% 87.487%, 14.442% 85.656%, 12.685% 83.743%, 11.018% 81.750%, 9.446% 79.682%, 7.974% 77.541%, 6.608% 75.331%, 5.354% 73.056%, 4.218% 70.719%, 3.208% 68.325%, 2.331% 65.880%, 1.594% 63.389%, 0.996% 60.861%, 0.535% 58.304%, 0.216% 55.726%, 0.039% 53.134%, 0.005% 50.536%, 0.119% 47.941%, 0.385% 45.356%, 0.814% 42.794%, 1.416% 40.267%, 2.207% 37.793%, 3.204% 35.394%, 4.427% 33.103%, 5.887% 30.956%, 7.572% 28.979%, 9.454% 27.190%, 11.490% 25.576%, 13.637% 24.114%, 15.862% 22.773%, 18.137% 21.517%, 20.438% 20.310%, 22.744% 19.113%, 25.034% 17.885%, 27.285% 16.589%, 29.485% 15.207%, 31.628% 13.738%, 33.730% 12.210%, 35.812% 10.656%, 37.898% 9.106%, 40.011% 7.595%, 42.174% 6.156%, 44.403% 4.820%, 46.707% 3.621%, 49.090% 2.587%, 51.535% 1.709%, 54.034% 0.998%, 56.576% 0.466%, 59.152% 0.129%, 61.746% 0.001%, 64.342% 0.097%, 66.918% 0.430%, 69.450% 1.007%, 71.914% 1.829%; +} diff --git a/assets/media-gallery.js b/assets/media-gallery.js index 63f90c37a09..5b2520fd591 100644 --- a/assets/media-gallery.js +++ b/assets/media-gallery.js @@ -1,102 +1,108 @@ if (!customElements.get('media-gallery')) { - customElements.define('media-gallery', class MediaGallery extends HTMLElement { - constructor() { - super(); - this.elements = { - liveRegion: this.querySelector('[id^="GalleryStatus"]'), - viewer: this.querySelector('[id^="GalleryViewer"]'), - thumbnails: this.querySelector('[id^="GalleryThumbnails"]') - } - this.mql = window.matchMedia('(min-width: 750px)'); - if (!this.elements.thumbnails) return; + customElements.define( + 'media-gallery', + class MediaGallery extends HTMLElement { + constructor() { + super(); + this.elements = { + liveRegion: this.querySelector('[id^="GalleryStatus"]'), + viewer: this.querySelector('[id^="GalleryViewer"]'), + thumbnails: this.querySelector('[id^="GalleryThumbnails"]'), + }; + this.mql = window.matchMedia('(min-width: 750px)'); + if (!this.elements.thumbnails) return; - this.elements.viewer.addEventListener('slideChanged', debounce(this.onSlideChanged.bind(this), 500)); - this.elements.thumbnails.querySelectorAll('[data-target]').forEach((mediaToSwitch) => { - mediaToSwitch.querySelector('button').addEventListener('click', this.setActiveMedia.bind(this, mediaToSwitch.dataset.target, false)); - }); - if (this.dataset.desktopLayout.includes('thumbnail') && this.mql.matches) this.removeListSemantic(); - } + this.elements.viewer.addEventListener('slideChanged', debounce(this.onSlideChanged.bind(this), 500)); + this.elements.thumbnails.querySelectorAll('[data-target]').forEach((mediaToSwitch) => { + mediaToSwitch + .querySelector('button') + .addEventListener('click', this.setActiveMedia.bind(this, mediaToSwitch.dataset.target, false)); + }); + if (this.dataset.desktopLayout.includes('thumbnail') && this.mql.matches) this.removeListSemantic(); + } - onSlideChanged(event) { - const thumbnail = this.elements.thumbnails.querySelector(`[data-target="${ event.detail.currentElement.dataset.mediaId }"]`); - this.setActiveThumbnail(thumbnail); - } + onSlideChanged(event) { + const thumbnail = this.elements.thumbnails.querySelector( + `[data-target="${event.detail.currentElement.dataset.mediaId}"]` + ); + this.setActiveThumbnail(thumbnail); + } - setActiveMedia(mediaId, prepend) { - const activeMedia = this.elements.viewer.querySelector(`[data-media-id="${ mediaId }"]`); - this.elements.viewer.querySelectorAll('[data-media-id]').forEach((element) => { - element.classList.remove('is-active'); - }); - activeMedia.classList.add('is-active'); + setActiveMedia(mediaId, prepend) { + const activeMedia = this.elements.viewer.querySelector(`[data-media-id="${mediaId}"]`); + this.elements.viewer.querySelectorAll('[data-media-id]').forEach((element) => { + element.classList.remove('is-active'); + }); + activeMedia.classList.add('is-active'); - if (prepend) { - activeMedia.parentElement.prepend(activeMedia); - if (this.elements.thumbnails) { - const activeThumbnail = this.elements.thumbnails.querySelector(`[data-target="${ mediaId }"]`); - activeThumbnail.parentElement.prepend(activeThumbnail); + if (prepend) { + activeMedia.parentElement.prepend(activeMedia); + if (this.elements.thumbnails) { + const activeThumbnail = this.elements.thumbnails.querySelector(`[data-target="${mediaId}"]`); + activeThumbnail.parentElement.prepend(activeThumbnail); + } + if (this.elements.viewer.slider) this.elements.viewer.resetPages(); } - if (this.elements.viewer.slider) this.elements.viewer.resetPages(); - } - this.preventStickyHeader(); - window.setTimeout(() => { - if (this.elements.thumbnails) { - activeMedia.parentElement.scrollTo({ left: activeMedia.offsetLeft }); - } - if (!this.elements.thumbnails || this.dataset.desktopLayout === 'stacked') { - activeMedia.scrollIntoView({behavior: 'smooth'}); - } - }); - this.playActiveMedia(activeMedia); + this.preventStickyHeader(); + window.setTimeout(() => { + if (this.elements.thumbnails) { + activeMedia.parentElement.scrollTo({ left: activeMedia.offsetLeft }); + } + if (!this.elements.thumbnails || this.dataset.desktopLayout === 'stacked') { + activeMedia.scrollIntoView({ behavior: 'smooth' }); + } + }); + this.playActiveMedia(activeMedia); - if (!this.elements.thumbnails) return; - const activeThumbnail = this.elements.thumbnails.querySelector(`[data-target="${ mediaId }"]`); - this.setActiveThumbnail(activeThumbnail); - this.announceLiveRegion(activeMedia, activeThumbnail.dataset.mediaPosition); - } + if (!this.elements.thumbnails) return; + const activeThumbnail = this.elements.thumbnails.querySelector(`[data-target="${mediaId}"]`); + this.setActiveThumbnail(activeThumbnail); + this.announceLiveRegion(activeMedia, activeThumbnail.dataset.mediaPosition); + } - setActiveThumbnail(thumbnail) { - if (!this.elements.thumbnails || !thumbnail) return; + setActiveThumbnail(thumbnail) { + if (!this.elements.thumbnails || !thumbnail) return; - this.elements.thumbnails.querySelectorAll('button').forEach((element) => element.removeAttribute('aria-current')); - thumbnail.querySelector('button').setAttribute('aria-current', true); - if (this.elements.thumbnails.isSlideVisible(thumbnail, 10)) return; + this.elements.thumbnails + .querySelectorAll('button') + .forEach((element) => element.removeAttribute('aria-current')); + thumbnail.querySelector('button').setAttribute('aria-current', true); + if (this.elements.thumbnails.isSlideVisible(thumbnail, 10)) return; - this.elements.thumbnails.slider.scrollTo({ left: thumbnail.offsetLeft }); - } + this.elements.thumbnails.slider.scrollTo({ left: thumbnail.offsetLeft }); + } - announceLiveRegion(activeItem, position) { - const image = activeItem.querySelector('.product__modal-opener--image img'); - if (!image) return; - image.onload = () => { - this.elements.liveRegion.setAttribute('aria-hidden', false); - this.elements.liveRegion.innerHTML = window.accessibilityStrings.imageAvailable.replace( - '[index]', - position - ); - setTimeout(() => { - this.elements.liveRegion.setAttribute('aria-hidden', true); - }, 2000); - }; - image.src = image.src; - } + announceLiveRegion(activeItem, position) { + const image = activeItem.querySelector('.product__modal-opener--image img'); + if (!image) return; + image.onload = () => { + this.elements.liveRegion.setAttribute('aria-hidden', false); + this.elements.liveRegion.innerHTML = window.accessibilityStrings.imageAvailable.replace('[index]', position); + setTimeout(() => { + this.elements.liveRegion.setAttribute('aria-hidden', true); + }, 2000); + }; + image.src = image.src; + } - playActiveMedia(activeItem) { - window.pauseAllMedia(); - const deferredMedia = activeItem.querySelector('.deferred-media'); - if (deferredMedia) deferredMedia.loadContent(false); - } + playActiveMedia(activeItem) { + window.pauseAllMedia(); + const deferredMedia = activeItem.querySelector('.deferred-media'); + if (deferredMedia) deferredMedia.loadContent(false); + } - preventStickyHeader() { - this.stickyHeader = this.stickyHeader || document.querySelector('sticky-header'); - if (!this.stickyHeader) return; - this.stickyHeader.dispatchEvent(new Event('preventHeaderReveal')); - } + preventStickyHeader() { + this.stickyHeader = this.stickyHeader || document.querySelector('sticky-header'); + if (!this.stickyHeader) return; + this.stickyHeader.dispatchEvent(new Event('preventHeaderReveal')); + } - removeListSemantic() { - if (!this.elements.viewer.slider) return; - this.elements.viewer.slider.setAttribute('role', 'presentation'); - this.elements.viewer.sliderItems.forEach(slide => slide.setAttribute('role', 'presentation')); + removeListSemantic() { + if (!this.elements.viewer.slider) return; + this.elements.viewer.slider.setAttribute('role', 'presentation'); + this.elements.viewer.sliderItems.forEach((slide) => slide.setAttribute('role', 'presentation')); + } } - }); + ); } diff --git a/assets/password-modal.js b/assets/password-modal.js index 8f8c49a8648..9df18f44809 100644 --- a/assets/password-modal.js +++ b/assets/password-modal.js @@ -2,7 +2,7 @@ class PasswordModal extends DetailsModal { constructor() { super(); - if (this.querySelector('input[aria-invalid="true"]')) this.open({target: this.querySelector('details')}); + if (this.querySelector('input[aria-invalid="true"]')) this.open({ target: this.querySelector('details') }); } } diff --git a/assets/pickup-availability.js b/assets/pickup-availability.js index 3378b3ee0c8..238d77fd1fa 100644 --- a/assets/pickup-availability.js +++ b/assets/pickup-availability.js @@ -1,106 +1,117 @@ if (!customElements.get('pickup-availability')) { - customElements.define('pickup-availability', class PickupAvailability extends HTMLElement { - constructor() { - super(); + customElements.define( + 'pickup-availability', + class PickupAvailability extends HTMLElement { + constructor() { + super(); - if(!this.hasAttribute('available')) return; + if (!this.hasAttribute('available')) return; - this.errorHtml = this.querySelector('template').content.firstElementChild.cloneNode(true); - this.onClickRefreshList = this.onClickRefreshList.bind(this); - this.fetchAvailability(this.dataset.variantId); - } - - fetchAvailability(variantId) { - let rootUrl = this.dataset.rootUrl; - if (!rootUrl.endsWith("/")) { - rootUrl = rootUrl + "/"; + this.errorHtml = this.querySelector('template').content.firstElementChild.cloneNode(true); + this.onClickRefreshList = this.onClickRefreshList.bind(this); + this.fetchAvailability(this.dataset.variantId); } - const variantSectionUrl = `${rootUrl}variants/${variantId}/?section_id=pickup-availability`; - - fetch(variantSectionUrl) - .then(response => response.text()) - .then(text => { - const sectionInnerHTML = new DOMParser() - .parseFromString(text, 'text/html') - .querySelector('.shopify-section'); - this.renderPreview(sectionInnerHTML); - }) - .catch(e => { - const button = this.querySelector('button'); - if (button) button.removeEventListener('click', this.onClickRefreshList); - this.renderError(); - }); - } - - onClickRefreshList(evt) { - this.fetchAvailability(this.dataset.variantId); - } - - renderError() { - this.innerHTML = ''; - this.appendChild(this.errorHtml); - this.querySelector('button').addEventListener('click', this.onClickRefreshList); - } + fetchAvailability(variantId) { + let rootUrl = this.dataset.rootUrl; + if (!rootUrl.endsWith('/')) { + rootUrl = rootUrl + '/'; + } + const variantSectionUrl = `${rootUrl}variants/${variantId}/?section_id=pickup-availability`; + + fetch(variantSectionUrl) + .then((response) => response.text()) + .then((text) => { + const sectionInnerHTML = new DOMParser() + .parseFromString(text, 'text/html') + .querySelector('.shopify-section'); + this.renderPreview(sectionInnerHTML); + }) + .catch((e) => { + const button = this.querySelector('button'); + if (button) button.removeEventListener('click', this.onClickRefreshList); + this.renderError(); + }); + } - renderPreview(sectionInnerHTML) { - const drawer = document.querySelector('pickup-availability-drawer'); - if (drawer) drawer.remove(); - if (!sectionInnerHTML.querySelector('pickup-availability-preview')) { - this.innerHTML = ""; - this.removeAttribute('available'); - return; + onClickRefreshList(evt) { + this.fetchAvailability(this.dataset.variantId); } - this.innerHTML = sectionInnerHTML.querySelector('pickup-availability-preview').outerHTML; - this.setAttribute('available', ''); + renderError() { + this.innerHTML = ''; + this.appendChild(this.errorHtml); - document.body.appendChild(sectionInnerHTML.querySelector('pickup-availability-drawer')); + this.querySelector('button').addEventListener('click', this.onClickRefreshList); + } - const button = this.querySelector('button'); - if (button) button.addEventListener('click', (evt) => { - document.querySelector('pickup-availability-drawer').show(evt.target); - }); + renderPreview(sectionInnerHTML) { + const drawer = document.querySelector('pickup-availability-drawer'); + if (drawer) drawer.remove(); + if (!sectionInnerHTML.querySelector('pickup-availability-preview')) { + this.innerHTML = ''; + this.removeAttribute('available'); + return; + } + + this.innerHTML = sectionInnerHTML.querySelector('pickup-availability-preview').outerHTML; + this.setAttribute('available', ''); + + document.body.appendChild(sectionInnerHTML.querySelector('pickup-availability-drawer')); + + const button = this.querySelector('button'); + if (button) + button.addEventListener('click', (evt) => { + document.querySelector('pickup-availability-drawer').show(evt.target); + }); + } } - }); + ); } if (!customElements.get('pickup-availability-drawer')) { - customElements.define('pickup-availability-drawer', class PickupAvailabilityDrawer extends HTMLElement { - constructor() { - super(); + customElements.define( + 'pickup-availability-drawer', + class PickupAvailabilityDrawer extends HTMLElement { + constructor() { + super(); - this.onBodyClick = this.handleBodyClick.bind(this); + this.onBodyClick = this.handleBodyClick.bind(this); - this.querySelector('button').addEventListener('click', () => { - this.hide(); - }); + this.querySelector('button').addEventListener('click', () => { + this.hide(); + }); - this.addEventListener('keyup', (event) => { - if(event.code.toUpperCase() === 'ESCAPE') this.hide(); - }); - } + this.addEventListener('keyup', (event) => { + if (event.code.toUpperCase() === 'ESCAPE') this.hide(); + }); + } - handleBodyClick(evt) { - const target = evt.target; - if (target != this && !target.closest('pickup-availability-drawer') && target.id != 'ShowPickupAvailabilityDrawer') { - this.hide(); + handleBodyClick(evt) { + const target = evt.target; + if ( + target != this && + !target.closest('pickup-availability-drawer') && + target.id != 'ShowPickupAvailabilityDrawer' + ) { + this.hide(); + } } - } - hide() { - this.removeAttribute('open'); - document.body.removeEventListener('click', this.onBodyClick); - document.body.classList.remove('overflow-hidden'); - removeTrapFocus(this.focusElement); - } + hide() { + this.removeAttribute('open'); + document.body.removeEventListener('click', this.onBodyClick); + document.body.classList.remove('overflow-hidden'); + removeTrapFocus(this.focusElement); + } - show(focusElement) { - this.focusElement = focusElement; - this.setAttribute('open', ''); - document.body.addEventListener('click', this.onBodyClick); - document.body.classList.add('overflow-hidden'); - trapFocus(this); + show(focusElement) { + this.focusElement = focusElement; + this.setAttribute('open', ''); + document.body.addEventListener('click', this.onBodyClick); + document.body.classList.add('overflow-hidden'); + trapFocus(this); + } } - }); + ); } diff --git a/assets/predictive-search.js b/assets/predictive-search.js index e519621f627..ed33c078d81 100644 --- a/assets/predictive-search.js +++ b/assets/predictive-search.js @@ -3,8 +3,7 @@ class PredictiveSearch extends SearchForm { super(); this.cachedResults = {}; this.predictiveSearchResults = this.querySelector('[data-predictive-search]'); - this.allPredictiveSearchInstances = - document.querySelectorAll('predictive-search'); + this.allPredictiveSearchInstances = document.querySelectorAll('predictive-search'); this.isOpen = false; this.abortController = new AbortController(); this.searchTerm = ''; @@ -31,7 +30,7 @@ class PredictiveSearch extends SearchForm { if (!this.searchTerm || !newSearchTerm.startsWith(this.searchTerm)) { // Remove the results when they are no longer relevant for the new search term // so they don't show up when the dropdown opens again - this.querySelector("#predictive-search-results-groups-wrapper")?.remove(); + this.querySelector('#predictive-search-results-groups-wrapper')?.remove(); } // Update the term asap, don't wait for the predictive search query to finish loading @@ -79,7 +78,7 @@ class PredictiveSearch extends SearchForm { onFocusOut() { setTimeout(() => { if (!this.contains(document.activeElement)) this.close(); - }) + }); } onKeyup(event) { @@ -88,7 +87,7 @@ class PredictiveSearch extends SearchForm { switch (event.code) { case 'ArrowUp': - this.switchOption('up') + this.switchOption('up'); break; case 'ArrowDown': this.switchOption('down'); @@ -101,21 +100,16 @@ class PredictiveSearch extends SearchForm { onKeydown(event) { // Prevent the cursor from moving in the input when using the up and down arrow keys - if ( - event.code === 'ArrowUp' || - event.code === 'ArrowDown' - ) { + if (event.code === 'ArrowUp' || event.code === 'ArrowDown') { event.preventDefault(); } } updateSearchForTerm(previousTerm, newTerm) { - const searchForTextElement = this.querySelector( - "[data-predictive-search-search-for-text]" - ); + const searchForTextElement = this.querySelector('[data-predictive-search-search-for-text]'); const currentButtonText = searchForTextElement?.innerText; if (currentButtonText) { - if (currentButtonText.match(new RegExp(previousTerm, "g")).length > 1) { + if (currentButtonText.match(new RegExp(previousTerm, 'g')).length > 1) { // The new term matches part of the button text and not just the search term, do not replace to avoid mistakes return; } @@ -132,9 +126,9 @@ class PredictiveSearch extends SearchForm { // Filter out hidden elements (duplicated page and article resources) thanks // to this https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent - const allVisibleElements = Array.from( - this.querySelectorAll("li, button.predictive-search__item") - ).filter((element) => element.offsetParent !== null); + const allVisibleElements = Array.from(this.querySelectorAll('li, button.predictive-search__item')).filter( + (element) => element.offsetParent !== null + ); let activeElementIndex = 0; if (moveUp && !selectedElement) return; @@ -149,18 +143,12 @@ class PredictiveSearch extends SearchForm { i++; } - this.statusElement.textContent = ""; + this.statusElement.textContent = ''; if (!moveUp && selectedElement) { - activeElementIndex = - selectedElementIndex === allVisibleElements.length - 1 - ? 0 - : selectedElementIndex + 1; + activeElementIndex = selectedElementIndex === allVisibleElements.length - 1 ? 0 : selectedElementIndex + 1; } else if (moveUp) { - activeElementIndex = - selectedElementIndex === 0 - ? allVisibleElements.length - 1 - : selectedElementIndex - 1; + activeElementIndex = selectedElementIndex === 0 ? allVisibleElements.length - 1 : selectedElementIndex - 1; } if (activeElementIndex === selectedElementIndex) return; @@ -174,15 +162,13 @@ class PredictiveSearch extends SearchForm { } selectOption() { - const selectedOption = this.querySelector( - '[aria-selected="true"] a, button[aria-selected="true"]' - ); + const selectedOption = this.querySelector('[aria-selected="true"] a, button[aria-selected="true"]'); if (selectedOption) selectedOption.click(); } getSearchResults(searchTerm) { - const queryKey = searchTerm.replace(" ", "-").toLowerCase(); + const queryKey = searchTerm.replace(' ', '-').toLowerCase(); this.setLiveRegionLoadingState(); if (this.cachedResults[queryKey]) { @@ -190,12 +176,9 @@ class PredictiveSearch extends SearchForm { return; } - fetch( - `${routes.predictive_search_url}?q=${encodeURIComponent( - searchTerm - )}§ion_id=predictive-search`, - { signal: this.abortController.signal } - ) + fetch(`${routes.predictive_search_url}?q=${encodeURIComponent(searchTerm)}§ion_id=predictive-search`, { + signal: this.abortController.signal, + }) .then((response) => { if (!response.ok) { var error = new Error(response.status); @@ -206,13 +189,13 @@ class PredictiveSearch extends SearchForm { return response.text(); }) .then((text) => { - const resultsMarkup = new DOMParser().parseFromString(text, 'text/html').querySelector('#shopify-section-predictive-search').innerHTML; + const resultsMarkup = new DOMParser() + .parseFromString(text, 'text/html') + .querySelector('#shopify-section-predictive-search').innerHTML; // Save bandwidth keeping the cache in all instances synced - this.allPredictiveSearchInstances.forEach( - (predictiveSearchInstance) => { - predictiveSearchInstance.cachedResults[queryKey] = resultsMarkup; - } - ); + this.allPredictiveSearchInstances.forEach((predictiveSearchInstance) => { + predictiveSearchInstance.cachedResults[queryKey] = resultsMarkup; + }); this.renderSearchResults(resultsMarkup); }) .catch((error) => { @@ -256,7 +239,8 @@ class PredictiveSearch extends SearchForm { } getResultsMaxHeight() { - this.resultsMaxHeight = window.innerHeight - document.querySelector('.section-header').getBoundingClientRect().bottom; + this.resultsMaxHeight = + window.innerHeight - document.querySelector('.section-header').getBoundingClientRect().bottom; return this.resultsMaxHeight; } @@ -285,7 +269,7 @@ class PredictiveSearch extends SearchForm { this.removeAttribute('loading'); this.removeAttribute('open'); this.input.setAttribute('aria-expanded', false); - this.resultsMaxHeight = false + this.resultsMaxHeight = false; this.predictiveSearchResults.removeAttribute('style'); } } diff --git a/assets/product-form.js b/assets/product-form.js index 35f9b338c10..02c6893752f 100644 --- a/assets/product-form.js +++ b/assets/product-form.js @@ -1,89 +1,113 @@ if (!customElements.get('product-form')) { - customElements.define('product-form', class ProductForm extends HTMLElement { - constructor() { - super(); + customElements.define( + 'product-form', + class ProductForm extends HTMLElement { + constructor() { + super(); - this.form = this.querySelector('form'); - this.form.querySelector('[name=id]').disabled = false; - this.form.addEventListener('submit', this.onSubmitHandler.bind(this)); - this.cart = document.querySelector('cart-notification') || document.querySelector('cart-drawer'); - this.submitButton = this.querySelector('[type="submit"]'); - if (document.querySelector('cart-drawer')) this.submitButton.setAttribute('aria-haspopup', 'dialog'); - } + this.form = this.querySelector('form'); + this.form.querySelector('[name=id]').disabled = false; + this.form.addEventListener('submit', this.onSubmitHandler.bind(this)); + this.cart = document.querySelector('cart-notification') || document.querySelector('cart-drawer'); + this.submitButton = this.querySelector('[type="submit"]'); + if (document.querySelector('cart-drawer')) this.submitButton.setAttribute('aria-haspopup', 'dialog'); - onSubmitHandler(evt) { - evt.preventDefault(); - if (this.submitButton.getAttribute('aria-disabled') === 'true') return; + this.hideErrors = this.dataset.hideErrors === 'true'; + } - this.handleErrorMessage(); + onSubmitHandler(evt) { + evt.preventDefault(); + if (this.submitButton.getAttribute('aria-disabled') === 'true') return; - this.submitButton.setAttribute('aria-disabled', true); - this.submitButton.classList.add('loading'); - this.querySelector('.loading-overlay__spinner').classList.remove('hidden'); + this.handleErrorMessage(); - const config = fetchConfig('javascript'); - config.headers['X-Requested-With'] = 'XMLHttpRequest'; - delete config.headers['Content-Type']; + this.submitButton.setAttribute('aria-disabled', true); + this.submitButton.classList.add('loading'); + this.querySelector('.loading-overlay__spinner').classList.remove('hidden'); - const formData = new FormData(this.form); - if (this.cart) { - formData.append('sections', this.cart.getSectionsToRender().map((section) => section.id)); - formData.append('sections_url', window.location.pathname); - this.cart.setActiveElement(document.activeElement); - } - config.body = formData; + const config = fetchConfig('javascript'); + config.headers['X-Requested-With'] = 'XMLHttpRequest'; + delete config.headers['Content-Type']; - fetch(`${routes.cart_add_url}`, config) - .then((response) => response.json()) - .then((response) => { - if (response.status) { - this.handleErrorMessage(response.description); + const formData = new FormData(this.form); + if (this.cart) { + formData.append( + 'sections', + this.cart.getSectionsToRender().map((section) => section.id) + ); + formData.append('sections_url', window.location.pathname); + this.cart.setActiveElement(document.activeElement); + } + config.body = formData; - const soldOutMessage = this.submitButton.querySelector('.sold-out-message'); - if (!soldOutMessage) return; - this.submitButton.setAttribute('aria-disabled', true); - this.submitButton.querySelector('span').classList.add('hidden'); - soldOutMessage.classList.remove('hidden'); - this.error = true; - return; - } else if (!this.cart) { - window.location = window.routes.cart_url; - return; - } + fetch(`${routes.cart_add_url}`, config) + .then((response) => response.json()) + .then((response) => { + if (response.status) { + publish(PUB_SUB_EVENTS.cartError, { + source: 'product-form', + productVariantId: formData.get('id'), + errors: response.description, + message: response.message, + }); + this.handleErrorMessage(response.description); - if (!this.error) publish(PUB_SUB_EVENTS.cartUpdate, {source: 'product-form'}); - this.error = false; - const quickAddModal = this.closest('quick-add-modal'); - if (quickAddModal) { - document.body.addEventListener('modalClosed', () => { - setTimeout(() => { this.cart.renderContents(response) }); - }, { once: true }); - quickAddModal.hide(true); - } else { - this.cart.renderContents(response); - } - }) - .catch((e) => { - console.error(e); - }) - .finally(() => { - this.submitButton.classList.remove('loading'); - if (this.cart && this.cart.classList.contains('is-empty')) this.cart.classList.remove('is-empty'); - if (!this.error) this.submitButton.removeAttribute('aria-disabled'); - this.querySelector('.loading-overlay__spinner').classList.add('hidden'); - }); - } + const soldOutMessage = this.submitButton.querySelector('.sold-out-message'); + if (!soldOutMessage) return; + this.submitButton.setAttribute('aria-disabled', true); + this.submitButton.querySelector('span').classList.add('hidden'); + soldOutMessage.classList.remove('hidden'); + this.error = true; + return; + } else if (!this.cart) { + window.location = window.routes.cart_url; + return; + } + + if (!this.error) + publish(PUB_SUB_EVENTS.cartUpdate, { source: 'product-form', productVariantId: formData.get('id') }); + this.error = false; + const quickAddModal = this.closest('quick-add-modal'); + if (quickAddModal) { + document.body.addEventListener( + 'modalClosed', + () => { + setTimeout(() => { + this.cart.renderContents(response); + }); + }, + { once: true } + ); + quickAddModal.hide(true); + } else { + this.cart.renderContents(response); + } + }) + .catch((e) => { + console.error(e); + }) + .finally(() => { + this.submitButton.classList.remove('loading'); + if (this.cart && this.cart.classList.contains('is-empty')) this.cart.classList.remove('is-empty'); + if (!this.error) this.submitButton.removeAttribute('aria-disabled'); + this.querySelector('.loading-overlay__spinner').classList.add('hidden'); + }); + } + + handleErrorMessage(errorMessage = false) { + if (this.hideErrors) return; - handleErrorMessage(errorMessage = false) { - this.errorMessageWrapper = this.errorMessageWrapper || this.querySelector('.product-form__error-message-wrapper'); - if (!this.errorMessageWrapper) return; - this.errorMessage = this.errorMessage || this.errorMessageWrapper.querySelector('.product-form__error-message'); + this.errorMessageWrapper = + this.errorMessageWrapper || this.querySelector('.product-form__error-message-wrapper'); + if (!this.errorMessageWrapper) return; + this.errorMessage = this.errorMessage || this.errorMessageWrapper.querySelector('.product-form__error-message'); - this.errorMessageWrapper.toggleAttribute('hidden', !errorMessage); + this.errorMessageWrapper.toggleAttribute('hidden', !errorMessage); - if (errorMessage) { - this.errorMessage.textContent = errorMessage; + if (errorMessage) { + this.errorMessage.textContent = errorMessage; + } } } - }); + ); } diff --git a/assets/product-info.js b/assets/product-info.js index 9ad85837d56..79a714b67ab 100644 --- a/assets/product-info.js +++ b/assets/product-info.js @@ -1,98 +1,100 @@ if (!customElements.get('product-info')) { - customElements.define('product-info', class ProductInfo extends HTMLElement { - constructor() { - super(); - this.input = this.querySelector('.quantity__input'); - this.currentVariant = this.querySelector('.product-variant-id'); - this.variantSelects = this.querySelector('variant-radios') - this.submitButton = this.querySelector('[type="submit"]'); - } + customElements.define( + 'product-info', + class ProductInfo extends HTMLElement { + constructor() { + super(); + this.input = this.querySelector('.quantity__input'); + this.currentVariant = this.querySelector('.product-variant-id'); + this.variantSelects = this.querySelector('variant-radios'); + this.submitButton = this.querySelector('[type="submit"]'); + } - cartUpdateUnsubscriber = undefined; - variantChangeUnsubscriber = undefined; + cartUpdateUnsubscriber = undefined; + variantChangeUnsubscriber = undefined; - connectedCallback() { - if (!this.input) return; - this.quantityForm = this.querySelector('.product-form__quantity'); - if (!this.quantityForm) return; - this.setQuantityBoundries(); - if (!this.dataset.originalSection) { - this.cartUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.cartUpdate, this.fetchQuantityRules.bind(this)); - } - this.variantChangeUnsubscriber = subscribe(PUB_SUB_EVENTS.variantChange, (event) => { - const sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; - if (event.data.sectionId !== sectionId) return; - this.updateQuantityRules(event.data.sectionId, event.data.html); + connectedCallback() { + if (!this.input) return; + this.quantityForm = this.querySelector('.product-form__quantity'); + if (!this.quantityForm) return; this.setQuantityBoundries(); - }); - } - - disconnectedCallback() { - if (this.cartUpdateUnsubscriber) { - this.cartUpdateUnsubscriber(); - } - if (this.variantChangeUnsubscriber) { - this.variantChangeUnsubscriber(); + if (!this.dataset.originalSection) { + this.cartUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.cartUpdate, this.fetchQuantityRules.bind(this)); + } + this.variantChangeUnsubscriber = subscribe(PUB_SUB_EVENTS.variantChange, (event) => { + const sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section; + if (event.data.sectionId !== sectionId) return; + this.updateQuantityRules(event.data.sectionId, event.data.html); + this.setQuantityBoundries(); + }); } - } - setQuantityBoundries() { - const data = { - cartQuantity: this.input.dataset.cartQuantity ? parseInt(this.input.dataset.cartQuantity) : 0, - min: this.input.dataset.min ? parseInt(this.input.dataset.min) : 1, - max: this.input.dataset.max ? parseInt(this.input.dataset.max) : null, - step: this.input.step ? parseInt(this.input.step) : 1 + disconnectedCallback() { + if (this.cartUpdateUnsubscriber) { + this.cartUpdateUnsubscriber(); + } + if (this.variantChangeUnsubscriber) { + this.variantChangeUnsubscriber(); + } } - let min = data.min; - const max = data.max === null ? data.max : data.max - data.cartQuantity; - if (max !== null) min = Math.min(min, max); - if (data.cartQuantity >= data.min) min = Math.min(min, data.step); + setQuantityBoundries() { + const data = { + cartQuantity: this.input.dataset.cartQuantity ? parseInt(this.input.dataset.cartQuantity) : 0, + min: this.input.dataset.min ? parseInt(this.input.dataset.min) : 1, + max: this.input.dataset.max ? parseInt(this.input.dataset.max) : null, + step: this.input.step ? parseInt(this.input.step) : 1, + }; - this.input.min = min; - this.input.max = max; - this.input.value = min; - publish(PUB_SUB_EVENTS.quantityUpdate, undefined); - } + let min = data.min; + const max = data.max === null ? data.max : data.max - data.cartQuantity; + if (max !== null) min = Math.min(min, max); + if (data.cartQuantity >= data.min) min = Math.min(min, data.step); - fetchQuantityRules() { - this.querySelector('.quantity__rules-cart .loading-overlay').classList.remove('hidden'); - fetch(`${this.dataset.url}?variant=${this.currentVariant.value}§ion_id=${this.dataset.section}`).then((response) => { - return response.text() - }) - .then((responseText) => { - const html = new DOMParser().parseFromString(responseText, 'text/html'); - this.updateQuantityRules(this.dataset.section, html); - this.setQuantityBoundries(); - }) - .catch(e => { - console.error(e); - }) - .finally(() => { - this.querySelector('.quantity__rules-cart .loading-overlay').classList.add('hidden'); - }); - } + this.input.min = min; + this.input.max = max; + this.input.value = min; + publish(PUB_SUB_EVENTS.quantityUpdate, undefined); + } - updateQuantityRules(sectionId, html) { - const quantityFormUpdated = html.getElementById(`Quantity-Form-${sectionId}`); - const selectors = ['.quantity__input', '.quantity__rules', '.quantity__label']; - for (let selector of selectors) { - const current = this.quantityForm.querySelector(selector); - const updated = quantityFormUpdated.querySelector(selector); - if (!current || !updated) continue; - if (selector === '.quantity__input') { - const attributes = ['data-cart-quantity', 'data-min', 'data-max', 'step']; - for (let attribute of attributes) { - const valueUpdated = updated.getAttribute(attribute); - if (valueUpdated !== null) current.setAttribute(attribute, valueUpdated); + fetchQuantityRules() { + if (!this.currentVariant || !this.currentVariant.value) return; + this.querySelector('.quantity__rules-cart .loading-overlay').classList.remove('hidden'); + fetch(`${this.dataset.url}?variant=${this.currentVariant.value}§ion_id=${this.dataset.section}`) + .then((response) => { + return response.text(); + }) + .then((responseText) => { + const html = new DOMParser().parseFromString(responseText, 'text/html'); + this.updateQuantityRules(this.dataset.section, html); + this.setQuantityBoundries(); + }) + .catch((e) => { + console.error(e); + }) + .finally(() => { + this.querySelector('.quantity__rules-cart .loading-overlay').classList.add('hidden'); + }); + } + + updateQuantityRules(sectionId, html) { + const quantityFormUpdated = html.getElementById(`Quantity-Form-${sectionId}`); + const selectors = ['.quantity__input', '.quantity__rules', '.quantity__label']; + for (let selector of selectors) { + const current = this.quantityForm.querySelector(selector); + const updated = quantityFormUpdated.querySelector(selector); + if (!current || !updated) continue; + if (selector === '.quantity__input') { + const attributes = ['data-cart-quantity', 'data-min', 'data-max', 'step']; + for (let attribute of attributes) { + const valueUpdated = updated.getAttribute(attribute); + if (valueUpdated !== null) current.setAttribute(attribute, valueUpdated); + } + } else { + current.innerHTML = updated.innerHTML; } - } else { - current.innerHTML = updated.innerHTML; } } } - } -)}; - - - + ); +} diff --git a/assets/product-modal.js b/assets/product-modal.js index 350e434902e..b35c7f468b8 100644 --- a/assets/product-modal.js +++ b/assets/product-modal.js @@ -1,34 +1,42 @@ if (!customElements.get('product-modal')) { - customElements.define('product-modal', class ProductModal extends ModalDialog { - constructor() { - super(); - } + customElements.define( + 'product-modal', + class ProductModal extends ModalDialog { + constructor() { + super(); + } - hide() { - super.hide(); - } + hide() { + super.hide(); + } - show(opener) { - super.show(opener); - this.showActiveMedia(); - } + show(opener) { + super.show(opener); + this.showActiveMedia(); + } - showActiveMedia() { - this.querySelectorAll(`[data-media-id]:not([data-media-id="${this.openedBy.getAttribute("data-media-id")}"])`).forEach((element) => { + showActiveMedia() { + this.querySelectorAll( + `[data-media-id]:not([data-media-id="${this.openedBy.getAttribute('data-media-id')}"])` + ).forEach((element) => { element.classList.remove('active'); - } - ) - const activeMedia = this.querySelector(`[data-media-id="${this.openedBy.getAttribute("data-media-id")}"]`); - const activeMediaTemplate = activeMedia.querySelector('template'); - const activeMediaContent = activeMediaTemplate ? activeMediaTemplate.content : null; - activeMedia.classList.add('active'); - activeMedia.scrollIntoView(); + }); + const activeMedia = this.querySelector(`[data-media-id="${this.openedBy.getAttribute('data-media-id')}"]`); + const activeMediaTemplate = activeMedia.querySelector('template'); + const activeMediaContent = activeMediaTemplate ? activeMediaTemplate.content : null; + activeMedia.classList.add('active'); + activeMedia.scrollIntoView(); - const container = this.querySelector('[role="document"]'); - container.scrollLeft = (activeMedia.width - container.clientWidth) / 2; + const container = this.querySelector('[role="document"]'); + container.scrollLeft = (activeMedia.width - container.clientWidth) / 2; - if (activeMedia.nodeName == 'DEFERRED-MEDIA' && activeMediaContent && activeMediaContent.querySelector('.js-youtube')) - activeMedia.loadContent(); + if ( + activeMedia.nodeName == 'DEFERRED-MEDIA' && + activeMediaContent && + activeMediaContent.querySelector('.js-youtube') + ) + activeMedia.loadContent(); + } } - }); + ); } diff --git a/assets/product-model.js b/assets/product-model.js index 7efe5d00c1e..db28d081aba 100644 --- a/assets/product-model.js +++ b/assets/product-model.js @@ -1,27 +1,30 @@ if (!customElements.get('product-model')) { - customElements.define('product-model', class ProductModel extends DeferredMedia { - constructor() { - super(); + customElements.define( + 'product-model', + class ProductModel extends DeferredMedia { + constructor() { + super(); + } + + loadContent() { + super.loadContent(); + + Shopify.loadFeatures([ + { + name: 'model-viewer-ui', + version: '1.0', + onLoad: this.setupModelViewerUI.bind(this), + }, + ]); + } + + setupModelViewerUI(errors) { + if (errors) return; + + this.modelViewerUI = new Shopify.ModelViewerUI(this.querySelector('model-viewer')); + } } - - loadContent() { - super.loadContent(); - - Shopify.loadFeatures([ - { - name: 'model-viewer-ui', - version: '1.0', - onLoad: this.setupModelViewerUI.bind(this), - }, - ]); - } - - setupModelViewerUI(errors) { - if (errors) return; - - this.modelViewerUI = new Shopify.ModelViewerUI(this.querySelector('model-viewer')); - } - }); + ); } window.ProductModel = { @@ -39,9 +42,7 @@ window.ProductModel = { if (errors) return; if (!window.ShopifyXR) { - document.addEventListener('shopify_xr_initialized', () => - this.setupShopifyXR() - ); + document.addEventListener('shopify_xr_initialized', () => this.setupShopifyXR()); return; } diff --git a/assets/pubsub.js b/assets/pubsub.js index 5c595145348..ad27be093c6 100644 --- a/assets/pubsub.js +++ b/assets/pubsub.js @@ -1,23 +1,23 @@ -let subscribers = {} +let subscribers = {}; function subscribe(eventName, callback) { if (subscribers[eventName] === undefined) { - subscribers[eventName] = [] + subscribers[eventName] = []; } subscribers[eventName] = [...subscribers[eventName], callback]; return function unsubscribe() { subscribers[eventName] = subscribers[eventName].filter((cb) => { - return cb !== callback + return cb !== callback; }); - } -}; + }; +} function publish(eventName, data) { if (subscribers[eventName]) { subscribers[eventName].forEach((callback) => { - callback(data) - }) + callback(data); + }); } } diff --git a/assets/quick-add.css b/assets/quick-add.css index 341e8c324e0..fa8f98de46a 100644 --- a/assets/quick-add.css +++ b/assets/quick-add.css @@ -167,7 +167,7 @@ quick-add-modal .product__column-sticky { quick-add-modal .product:not(.product--no-media) .product__info-wrapper { padding-left: 4rem; max-width: 54%; - width: calc(54% - var(--grid-desktop-horizontal-spacing) / 2) + width: calc(54% - var(--grid-desktop-horizontal-spacing) / 2); } quick-add-modal .product--columns .product__media-item:not(.product__media-item--single):not(:only-child) { diff --git a/assets/quick-add.js b/assets/quick-add.js index 36e6dc90202..253b9672443 100644 --- a/assets/quick-add.js +++ b/assets/quick-add.js @@ -1,116 +1,120 @@ if (!customElements.get('quick-add-modal')) { - customElements.define('quick-add-modal', class QuickAddModal extends ModalDialog { - constructor() { - super(); - this.modalContent = this.querySelector('[id^="QuickAddInfo-"]'); - } + customElements.define( + 'quick-add-modal', + class QuickAddModal extends ModalDialog { + constructor() { + super(); + this.modalContent = this.querySelector('[id^="QuickAddInfo-"]'); + } - hide(preventFocus = false) { - const cartNotification = document.querySelector('cart-notification') || document.querySelector('cart-drawer'); - if (cartNotification) cartNotification.setActiveElement(this.openedBy); - this.modalContent.innerHTML = ''; + hide(preventFocus = false) { + const cartNotification = document.querySelector('cart-notification') || document.querySelector('cart-drawer'); + if (cartNotification) cartNotification.setActiveElement(this.openedBy); + this.modalContent.innerHTML = ''; - if (preventFocus) this.openedBy = null; - super.hide(); - } + if (preventFocus) this.openedBy = null; + super.hide(); + } + + show(opener) { + opener.setAttribute('aria-disabled', true); + opener.classList.add('loading'); + opener.querySelector('.loading-overlay__spinner').classList.remove('hidden'); + + fetch(opener.getAttribute('data-product-url')) + .then((response) => response.text()) + .then((responseText) => { + const responseHTML = new DOMParser().parseFromString(responseText, 'text/html'); + this.productElement = responseHTML.querySelector('section[id^="MainProduct-"]'); + this.preventDuplicatedIDs(); + this.removeDOMElements(); + this.setInnerHTML(this.modalContent, this.productElement.innerHTML); + + if (window.Shopify && Shopify.PaymentButton) { + Shopify.PaymentButton.init(); + } + + if (window.ProductModel) window.ProductModel.loadShopifyXR(); + + this.removeGalleryListSemantic(); + this.updateImageSizes(); + this.preventVariantURLSwitching(); + super.show(opener); + }) + .finally(() => { + opener.removeAttribute('aria-disabled'); + opener.classList.remove('loading'); + opener.querySelector('.loading-overlay__spinner').classList.add('hidden'); + }); + } - show(opener) { - opener.setAttribute('aria-disabled', true); - opener.classList.add('loading'); - opener.querySelector('.loading-overlay__spinner').classList.remove('hidden'); - - fetch(opener.getAttribute('data-product-url')) - .then((response) => response.text()) - .then((responseText) => { - const responseHTML = new DOMParser().parseFromString(responseText, 'text/html'); - this.productElement = responseHTML.querySelector('section[id^="MainProduct-"]'); - this.preventDuplicatedIDs(); - this.removeDOMElements(); - this.setInnerHTML(this.modalContent, this.productElement.innerHTML); - - if (window.Shopify && Shopify.PaymentButton) { - Shopify.PaymentButton.init(); - } - - if (window.ProductModel) window.ProductModel.loadShopifyXR(); - - this.removeGalleryListSemantic(); - this.updateImageSizes(); - this.preventVariantURLSwitching(); - super.show(opener); - }) - .finally(() => { - opener.removeAttribute('aria-disabled'); - opener.classList.remove('loading'); - opener.querySelector('.loading-overlay__spinner').classList.add('hidden'); + setInnerHTML(element, html) { + element.innerHTML = html; + + // Reinjects the script tags to allow execution. By default, scripts are disabled when using element.innerHTML. + element.querySelectorAll('script').forEach((oldScriptTag) => { + const newScriptTag = document.createElement('script'); + Array.from(oldScriptTag.attributes).forEach((attribute) => { + newScriptTag.setAttribute(attribute.name, attribute.value); + }); + newScriptTag.appendChild(document.createTextNode(oldScriptTag.innerHTML)); + oldScriptTag.parentNode.replaceChild(newScriptTag, oldScriptTag); }); - } + } - setInnerHTML(element, html) { - element.innerHTML = html; + preventVariantURLSwitching() { + const variantPicker = this.modalContent.querySelector('variant-radios,variant-selects'); + if (!variantPicker) return; - // Reinjects the script tags to allow execution. By default, scripts are disabled when using element.innerHTML. - element.querySelectorAll('script').forEach(oldScriptTag => { - const newScriptTag = document.createElement('script'); - Array.from(oldScriptTag.attributes).forEach(attribute => { - newScriptTag.setAttribute(attribute.name, attribute.value) - }); - newScriptTag.appendChild(document.createTextNode(oldScriptTag.innerHTML)); - oldScriptTag.parentNode.replaceChild(newScriptTag, oldScriptTag); - }); - } + variantPicker.setAttribute('data-update-url', 'false'); + } - preventVariantURLSwitching() { - const variantPicker = this.modalContent.querySelector('variant-radios,variant-selects'); - if (!variantPicker) return; + removeDOMElements() { + const pickupAvailability = this.productElement.querySelector('pickup-availability'); + if (pickupAvailability) pickupAvailability.remove(); - variantPicker.setAttribute('data-update-url', 'false'); - } + const productModal = this.productElement.querySelector('product-modal'); + if (productModal) productModal.remove(); - removeDOMElements() { - const pickupAvailability = this.productElement.querySelector('pickup-availability'); - if (pickupAvailability) pickupAvailability.remove(); + const modalDialog = this.productElement.querySelectorAll('modal-dialog'); + if (modalDialog) modalDialog.forEach((modal) => modal.remove()); + } - const productModal = this.productElement.querySelector('product-modal'); - if (productModal) productModal.remove(); + preventDuplicatedIDs() { + const sectionId = this.productElement.dataset.section; + this.productElement.innerHTML = this.productElement.innerHTML.replaceAll(sectionId, `quickadd-${sectionId}`); + this.productElement.querySelectorAll('variant-selects, variant-radios, product-info').forEach((element) => { + element.dataset.originalSection = sectionId; + }); + } - const modalDialog = this.productElement.querySelectorAll('modal-dialog'); - if (modalDialog) modalDialog.forEach(modal => modal.remove()); - } + removeGalleryListSemantic() { + const galleryList = this.modalContent.querySelector('[id^="Slider-Gallery"]'); + if (!galleryList) return; - preventDuplicatedIDs() { - const sectionId = this.productElement.dataset.section; - this.productElement.innerHTML = this.productElement.innerHTML.replaceAll(sectionId, `quickadd-${ sectionId }`); - this.productElement.querySelectorAll('variant-selects, variant-radios, product-info').forEach((element) => { - element.dataset.originalSection = sectionId; - }); - } + galleryList.setAttribute('role', 'presentation'); + galleryList.querySelectorAll('[id^="Slide-"]').forEach((li) => li.setAttribute('role', 'presentation')); + } - removeGalleryListSemantic() { - const galleryList = this.modalContent.querySelector('[id^="Slider-Gallery"]'); - if (!galleryList) return; + updateImageSizes() { + const product = this.modalContent.querySelector('.product'); + const desktopColumns = product.classList.contains('product--columns'); + if (!desktopColumns) return; - galleryList.setAttribute('role', 'presentation'); - galleryList.querySelectorAll('[id^="Slide-"]').forEach(li => li.setAttribute('role', 'presentation')); - } + const mediaImages = product.querySelectorAll('.product__media img'); + if (!mediaImages.length) return; - updateImageSizes() { - const product = this.modalContent.querySelector('.product'); - const desktopColumns = product.classList.contains('product--columns'); - if (!desktopColumns) return; + let mediaImageSizes = + '(min-width: 1000px) 715px, (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)'; - const mediaImages = product.querySelectorAll('.product__media img'); - if (!mediaImages.length) return; + if (product.classList.contains('product--medium')) { + mediaImageSizes = mediaImageSizes.replace('715px', '605px'); + } else if (product.classList.contains('product--small')) { + mediaImageSizes = mediaImageSizes.replace('715px', '495px'); + } - let mediaImageSizes = '(min-width: 1000px) 715px, (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)'; - - if (product.classList.contains('product--medium')) { - mediaImageSizes = mediaImageSizes.replace('715px', '605px'); - } else if (product.classList.contains('product--small')) { - mediaImageSizes = mediaImageSizes.replace('715px', '495px'); + mediaImages.forEach((img) => img.setAttribute('sizes', mediaImageSizes)); } - - mediaImages.forEach(img => img.setAttribute('sizes', mediaImageSizes)); } - }); + ); } diff --git a/assets/recipient-form.js b/assets/recipient-form.js new file mode 100644 index 00000000000..f301bcf77de --- /dev/null +++ b/assets/recipient-form.js @@ -0,0 +1,142 @@ +if (!customElements.get('recipient-form')) { + customElements.define( + 'recipient-form', + class RecipientForm extends HTMLElement { + constructor() { + super(); + this.checkboxInput = this.querySelector(`#Recipient-Checkbox-${this.dataset.sectionId}`); + this.checkboxInput.disabled = false; + this.hiddenControlField = this.querySelector(`#Recipient-Control-${this.dataset.sectionId}`); + this.hiddenControlField.disabled = true; + this.emailInput = this.querySelector(`#Recipient-email-${this.dataset.sectionId}`); + this.nameInput = this.querySelector(`#Recipient-name-${this.dataset.sectionId}`); + this.messageInput = this.querySelector(`#Recipient-message-${this.dataset.sectionId}`); + this.errorMessageWrapper = this.querySelector('.product-form__recipient-error-message-wrapper'); + this.errorMessageList = this.errorMessageWrapper?.querySelector('ul'); + this.errorMessage = this.errorMessageWrapper?.querySelector('.error-message'); + this.defaultErrorHeader = this.errorMessage?.innerText; + this.currentProductVariantId = this.dataset.productVariantId; + this.addEventListener('change', this.onChange.bind(this)); + } + + cartUpdateUnsubscriber = undefined; + variantChangeUnsubscriber = undefined; + cartErrorUnsubscriber = undefined; + + connectedCallback() { + this.cartUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.cartUpdate, (event) => { + if (event.source === 'product-form' && event.productVariantId.toString() === this.currentProductVariantId) { + this.resetRecipientForm(); + } + }); + + this.variantChangeUnsubscriber = subscribe(PUB_SUB_EVENTS.variantChange, (event) => { + if (event.data.sectionId === this.dataset.sectionId) { + this.currentProductVariantId = event.data.variant.id.toString(); + } + }); + + this.cartUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.cartError, (event) => { + if (event.source === 'product-form' && event.productVariantId.toString() === this.currentProductVariantId) { + this.displayErrorMessage(event.message, event.errors); + } + }); + } + + disconnectedCallback() { + if (this.cartUpdateUnsubscriber) { + this.cartUpdateUnsubscriber(); + } + + if (this.variantChangeUnsubscriber) { + this.variantChangeUnsubscriber(); + } + + if (this.cartErrorUnsubscriber) { + this.cartErrorUnsubscriber(); + } + } + + onChange() { + if (!this.checkboxInput.checked) { + this.clearInputFields(); + this.clearErrorMessage(); + } + } + + clearInputFields() { + this.emailInput.value = ''; + this.nameInput.value = ''; + this.messageInput.value = ''; + } + + displayErrorMessage(title, body) { + this.clearErrorMessage(); + this.errorMessageWrapper.hidden = false; + if (typeof body === 'object') { + this.errorMessage.innerText = this.defaultErrorHeader; + return Object.entries(body).forEach(([key, value]) => { + const errorMessageId = `RecipientForm-${key}-error-${this.dataset.sectionId}`; + const fieldSelector = `#Recipient-${key}-${this.dataset.sectionId}`; + const placeholderElement = this.querySelector(`${fieldSelector}`); + const label = placeholderElement?.getAttribute('placeholder') || key; + const message = `${label} ${value}`; + const errorMessageElement = this.querySelector(`#${errorMessageId}`); + const errorTextElement = errorMessageElement?.querySelector('.error-message'); + if (!errorTextElement) return; + + if (this.errorMessageList) { + this.errorMessageList.appendChild(this.createErrorListItem(fieldSelector, message)); + } + + errorTextElement.innerText = `${message}.`; + errorMessageElement.classList.remove('hidden'); + + const inputElement = this[`${key}Input`]; + if (!inputElement) return; + + inputElement.setAttribute('aria-invalid', true); + inputElement.setAttribute('aria-describedby', errorMessageId); + }); + } + + this.errorMessage.innerText = body; + } + + createErrorListItem(target, message) { + const li = document.createElement('li'); + const a = document.createElement('a'); + a.setAttribute('href', target); + a.innerText = message; + li.appendChild(a); + li.className = 'error-message'; + return li; + } + + clearErrorMessage() { + this.errorMessageWrapper.hidden = true; + + if (this.errorMessageList) this.errorMessageList.innerHTML = ''; + + this.querySelectorAll('.recipient-fields .form__message').forEach((field) => { + field.classList.add('hidden'); + const textField = field.querySelector('.error-message'); + if (textField) textField.innerText = ''; + }); + + [this.emailInput, this.messageInput, this.nameInput].forEach((inputElement) => { + inputElement.setAttribute('aria-invalid', false); + inputElement.removeAttribute('aria-describedby'); + }); + } + + resetRecipientForm() { + if (this.checkboxInput.checked) { + this.checkboxInput.checked = false; + this.clearInputFields(); + this.clearErrorMessage(); + } + } + } + ); +} diff --git a/assets/search-form.js b/assets/search-form.js index e0be87fb054..f95e8b79cd7 100644 --- a/assets/search-form.js +++ b/assets/search-form.js @@ -6,18 +6,21 @@ class SearchForm extends HTMLElement { if (this.input) { this.input.form.addEventListener('reset', this.onFormReset.bind(this)); - this.input.addEventListener('input', debounce((event) => { - this.onChange(event); - }, 300).bind(this)) + this.input.addEventListener( + 'input', + debounce((event) => { + this.onChange(event); + }, 300).bind(this) + ); } } toggleResetButton() { const resetIsHidden = this.resetButton.classList.contains('hidden'); if (this.input.value.length > 0 && resetIsHidden) { - this.resetButton.classList.remove('hidden') - } else if (this.input.value.length === 0 && !resetIsHidden) { - this.resetButton.classList.add('hidden') + this.resetButton.classList.remove('hidden'); + } else if (this.input.value.length === 0 && !resetIsHidden) { + this.resetButton.classList.add('hidden'); } } @@ -26,7 +29,7 @@ class SearchForm extends HTMLElement { } shouldResetForm() { - return !document.querySelector('[aria-selected="true"] a') + return !document.querySelector('[aria-selected="true"] a'); } onFormReset(event) { diff --git a/assets/section-email-signup-banner.css b/assets/section-email-signup-banner.css index b49641e7b6b..b888ad288e5 100644 --- a/assets/section-email-signup-banner.css +++ b/assets/section-email-signup-banner.css @@ -57,8 +57,7 @@ .banner--desktop-transparent .email-signup-banner__box--no-image .field__button:focus-visible { outline: 0.2rem solid rgba(var(--color-base-text), 0.5); - box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), - 0 0 0.5rem 0.4rem rgba(var(--color-base-text), 0.3); + box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-base-text), 0.3); } } diff --git a/assets/section-featured-blog.css b/assets/section-featured-blog.css index 6777254ccd5..8323a3f4d76 100644 --- a/assets/section-featured-blog.css +++ b/assets/section-featured-blog.css @@ -55,7 +55,7 @@ @media screen and (max-width: 749px) { .blog__post.article { - width: calc(100% - 3rem); + width: calc(100% - 3rem - var(--grid-mobile-horizontal-spacing)); } } @@ -85,4 +85,3 @@ } } } - diff --git a/assets/section-featured-product.css b/assets/section-featured-product.css index d449f5f5c2f..1f50cdaf5ee 100644 --- a/assets/section-featured-product.css +++ b/assets/section-featured-product.css @@ -33,7 +33,7 @@ } .share-button + .product__view-details::after { - content: ""; + content: ''; clear: both; display: table; } diff --git a/assets/section-footer.css b/assets/section-footer.css index d51dcc3da9f..82d6b4985e3 100644 --- a/assets/section-footer.css +++ b/assets/section-footer.css @@ -190,8 +190,7 @@ margin: 0; } - .footer-block__newsletter:not(:only-child) - .newsletter-form__message--success { + .footer-block__newsletter:not(:only-child) .newsletter-form__message--success { left: auto; } @@ -238,7 +237,6 @@ .footer-block__newsletter { flex-direction: column; } - } @media screen and (min-width: 750px) { @@ -260,27 +258,6 @@ display: none; } -.localization-form { - display: flex; - flex-direction: column; - flex: auto 1 0; - padding: 1rem; - margin: 0 auto; -} - -.localization-form:only-child { - display: inline-flex; - flex-wrap: wrap; - flex: initial; - padding: 1rem 0; -} - -.localization-form:only-child .button, -.localization-form:only-child .localization-form__select { - margin: 1rem 1rem 0.5rem; - flex-grow: 1; -} - .footer__localization h2 { margin: 1rem 1rem 0.5rem; color: rgba(var(--color-foreground), 0.75); @@ -292,114 +269,17 @@ justify-content: flex-start; } - .localization-form { - padding: 1rem 2rem 1rem 0; - } - - .localization-form:first-of-type { - padding-left: 0; - } - - .localization-form:only-child { - justify-content: start; - width: auto; - margin: 0 1rem 0 0; - } - - .localization-form:only-child .button, - .localization-form:only-child .localization-form__select { - margin: 1rem 0; - } - .footer__localization h2 { margin: 1rem 0 0; } } @media screen and (max-width: 989px) { - noscript .localization-form:only-child, .footer__localization noscript { width: 100%; } } -.localization-form .button { - padding: 1rem; -} - -.localization-form__currency { - display: inline-block; -} - -@media screen and (max-width: 749px) { - .localization-form .button { - word-break: break-all; - } -} - -.localization-form__select { - border-radius: var(--inputs-radius-outset); - position: relative; - margin-bottom: 1.5rem; - padding-left: 1rem; - text-align: left; - min-height: calc(4rem + var(--inputs-border-width) * 2); - min-width: calc(7rem + var(--inputs-border-width) * 2); -} - -.disclosure__button.localization-form__select { - padding: calc(2rem + var(--inputs-border-width)); - background: rgb(var(--color-background)); -} - -noscript .localization-form__select { - padding-left: 0rem; -} - -@media screen and (min-width: 750px) { - noscript .localization-form__select { - min-width: 20rem; - } -} - -.localization-form__select .icon-caret { - position: absolute; - content: ''; - height: 0.6rem; - right: calc(var(--inputs-border-width) + 1.5rem); - top: calc(50% - 0.2rem); -} - -.localization-selector.link { - text-decoration: none; - appearance: none; - -webkit-appearance: none; - -moz-appearance: none; - color: rgb(var(--color-foreground)); - width: 100%; - padding-right: 4rem; - padding-bottom: 1.5rem; -} - -noscript .localization-selector.link { - padding-top: 1.5rem; - padding-left: 1.5rem; -} - -.disclosure .localization-form__select { - padding-top: 1.5rem; -} - -.localization-selector option { - color: #000000; -} - -.localization-selector + .disclosure__list-wrapper { - margin-left: 1rem; - opacity: 1; - animation: animateLocalization var(--duration-default) ease; -} - @media screen and (min-width: 750px) { .footer__payment { margin-top: 1.5rem; @@ -522,9 +402,7 @@ noscript .localization-selector.link { } .footer-block__image-wrapper { - box-shadow: var(--media-shadow-horizontal-offset) - var(--media-shadow-vertical-offset) - var(--media-shadow-blur-radius) + box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius) rgba(var(--color-shadow), var(--media-shadow-opacity)); margin-bottom: max(calc(2rem + var(--media-shadow-vertical-offset) * var(--media-shadow-visible)), 2rem); overflow: hidden !important; @@ -614,19 +492,6 @@ noscript .localization-selector.link { } } -.footer .disclosure__link { - padding: 0.95rem 3.5rem 0.95rem 2rem; - color: rgba(var(--color-foreground), 0.75); -} - -.footer .disclosure__link:hover { - color: rgb(var(--color-foreground)); -} - -.footer .disclosure__link--active { - text-decoration: underline; -} - /* check for flexbox gap in older Safari versions */ @supports not (inset: 10px) { @media screen and (max-width: 749px) { diff --git a/assets/section-image-banner.css b/assets/section-image-banner.css index 956fec3597a..d07a2933667 100644 --- a/assets/section-image-banner.css +++ b/assets/section-image-banner.css @@ -208,8 +208,7 @@ --alpha-button-background: 0; } - .banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) - .banner__content { + .banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content { position: absolute; height: auto; } @@ -436,3 +435,19 @@ .banner__box > * + .banner__buttons { margin-top: 2rem; } + +@media screen and (max-width: 749px) { + .banner:not(.slideshow) .rte a, + .banner:not(.slideshow) .inline-richtext a:hover, + .banner:not(.slideshow) .rte a:hover { + color: currentColor; + } +} + +@media screen and (min-width: 750px) { + .banner--desktop-transparent .rte a, + .banner--desktop-transparent .inline-richtext a:hover, + .banner--desktop-transparent .rte a:hover { + color: currentColor; + } +} diff --git a/assets/section-main-blog.css b/assets/section-main-blog.css index efdb47aa592..ef1587e008a 100644 --- a/assets/section-main-blog.css +++ b/assets/section-main-blog.css @@ -13,7 +13,7 @@ .blog-articles { grid-template-columns: 1fr 1fr; column-gap: var(--grid-desktop-horizontal-spacing); - row-gap: var(--grid-desktop-vertical-spacing); + row-gap: var(--grid-desktop-vertical-spacing); } .blog-articles--collage > *:nth-child(3n + 1), diff --git a/assets/section-main-product.css b/assets/section-main-product.css index 2a84a440676..e9e61bad754 100644 --- a/assets/section-main-product.css +++ b/assets/section-main-product.css @@ -88,21 +88,23 @@ min-height: 4.6rem; } -.shopify-payment-button__button [role="button"].focused, -.no-js .shopify-payment-button__button [role="button"]:focus { - outline: .2rem solid rgba(var(--color-foreground),.5) !important; +.shopify-payment-button__button [role='button'].focused, +.no-js .shopify-payment-button__button [role='button']:focus { + outline: 0.2rem solid rgba(var(--color-foreground), 0.5) !important; outline-offset: 0.3rem; - box-shadow: 0 0 0 .1rem rgba(var(--color-button),var(--alpha-button-border)),0 0 0 .3rem rgb(var(--color-background)),0 0 .5rem .4rem rgba(var(--color-foreground),.3) !important; + box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border)), + 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3) !important; } -.shopify-payment-button__button [role="button"]:focus:not(:focus-visible) { +.shopify-payment-button__button [role='button']:focus:not(:focus-visible) { outline: 0; box-shadow: none !important; } -.shopify-payment-button__button [role="button"]:focus-visible { - outline: .2rem solid rgba(var(--color-foreground),.5) !important; - box-shadow: 0 0 0 .1rem rgba(var(--color-button),var(--alpha-button-border)),0 0 0 .3rem rgb(var(--color-background)),0 0 .5rem .4rem rgba(var(--color-foreground),.3) !important; +.shopify-payment-button__button [role='button']:focus-visible { + outline: 0.2rem solid rgba(var(--color-foreground), 0.5) !important; + box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border)), + 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3) !important; } .shopify-payment-button__button--unbranded { @@ -161,7 +163,7 @@ flex: 0 0 100%; padding: 0; margin: 0 0 1.2rem 0; - max-width: 37rem; + max-width: 44rem; min-width: fit-content; border: none; } @@ -218,7 +220,8 @@ fieldset.product-form__input .form__label { left: calc(var(--variant-pills-border-width) * -1); z-index: -1; border-radius: var(--variant-pills-radius); - box-shadow: var(--variant-pills-shadow-horizontal-offset) var(--variant-pills-shadow-vertical-offset) var(--variant-pills-shadow-blur-radius) rgba(var(--color-shadow), var(--variant-pills-shadow-opacity)); + box-shadow: var(--variant-pills-shadow-horizontal-offset) var(--variant-pills-shadow-vertical-offset) + var(--variant-pills-shadow-blur-radius) rgba(var(--color-shadow), var(--variant-pills-shadow-opacity)); } .product-form__input input[type='radio'] + label:hover { @@ -235,7 +238,7 @@ fieldset.product-form__input .form__label { } @media screen and (forced-colors: active) { - .product-form__input input[type=radio]:checked + label { + .product-form__input input[type='radio']:checked + label { text-decoration: underline; } } @@ -256,15 +259,13 @@ fieldset.product-form__input .form__label { color: rgba(var(--color-background), 0.6); } .product-form__input input[type='radio']:focus-visible + label { - box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), - 0 0 0 0.5rem rgba(var(--color-foreground), 0.55); + box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.55); } /* Fallback */ .product-form__input input[type='radio'].focused + label, -.no-js .shopify-payment-button__button [role="button"]:focus + label { - box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), - 0 0 0 0.5rem rgba(var(--color-foreground), 0.55); +.no-js .shopify-payment-button__button [role='button']:focus + label { + box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.55); } /* No outline when focus-visible is available in the browser */ @@ -286,14 +287,14 @@ fieldset.product-form__input .form__label { --alpha-button-background: 1; } -.product-form__submit[aria-disabled="true"] + .shopify-payment-button .shopify-payment-button__button[disabled], +.product-form__submit[aria-disabled='true'] + .shopify-payment-button .shopify-payment-button__button[disabled], .product-form__submit[disabled] + .shopify-payment-button .shopify-payment-button__button[disabled] { cursor: not-allowed; opacity: 0.5; } @media screen and (forced-colors: active) { - .product-form__submit[aria-disabled="true"] { + .product-form__submit[aria-disabled='true'] { color: Window; } } @@ -463,7 +464,6 @@ a.product__text { margin-bottom: 1.2rem; } - .product--no-media fieldset.product-form__input { flex-wrap: wrap; margin: 0 auto 1.2rem auto; @@ -591,8 +591,7 @@ a.product__text { left: 1.2rem; top: 1.2rem; z-index: 1; - transition: color var(--duration-short) ease, - opacity var(--duration-short) ease; + transition: color var(--duration-short) ease, opacity var(--duration-short) ease; } .product__media-video .product__media-icon { @@ -699,7 +698,7 @@ a.product__text { @media (forced-colors: active) { .product__media-toggle:focus-visible, .product__media-toggle:focus-visible:after, - .product-form__input input[type="radio"]:focus-visible + label { + .product-form__input input[type='radio']:focus-visible + label { outline: transparent solid 1px; outline-offset: 2px; } @@ -906,19 +905,20 @@ a.product__text { border-color: rgba(var(--color-foreground), var(--popup-border-opacity)); border-style: solid; border-width: var(--popup-border-width); - box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow), var(--popup-shadow-opacity)); + box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) + rgba(var(--color-shadow), var(--popup-shadow-opacity)); } .product-popup-modal__content.focused { - box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), - 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3), - var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow), var(--popup-shadow-opacity)); + box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3), + var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) + rgba(var(--color-shadow), var(--popup-shadow-opacity)); } -.product-popup-modal__content:focus-visible{ - box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), - 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3), - var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow), var(--popup-shadow-opacity)); +.product-popup-modal__content:focus-visible { + box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3), + var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) + rgba(var(--color-shadow), var(--popup-shadow-opacity)); } @media screen and (min-width: 750px) { @@ -1167,6 +1167,22 @@ a.product__text { display: none; } +.product__modal-opener > .loading-overlay__spinner { + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + position: absolute; + display: flex; + align-items: center; + height: 48px; + width: 48px; +} + +.product__modal-opener .path { + stroke: rgb(var(--color-base-accent-1)); + opacity: 0.75; +} + @media (hover: hover) { .product__media-zoom-hover, .product__media-icon--hover { @@ -1186,13 +1202,13 @@ a.product__text { } .thumbnail[aria-current]:focus-visible { - box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5); + box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5); } .thumbnail[aria-current]:focus, .thumbnail.focused { outline: 0; - box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5); + box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5); } /* outline styling for Windows High Contrast Mode */ @@ -1255,7 +1271,7 @@ a.product__text { } .thumbnail-list__item::before { - content: ""; + content: ''; display: block; padding-bottom: 100%; } @@ -1298,7 +1314,7 @@ a.product__text { } .product__inventory.visibility-hidden:empty::after { - content: "#"; + content: '#'; } /* Icon with text */ @@ -1373,7 +1389,7 @@ a.product__text { /* SKU block */ .product__sku.visibility-hidden::after { - content: "#"; + content: '#'; } /* Product-thumbnail snippet */ @@ -1457,3 +1473,130 @@ a.product__text { display: none; } } + +/* Recipient form */ +.recipient-form { + /* (2.88[line-height] - 1.6rem) / 2 */ + --recipient-checkbox-margin-top: 0.64rem; + + display: block; + position: relative; + max-width: 44rem; + margin-bottom: 2.5rem; +} + +.recipient-form-field-label { + margin: 0.6rem 0; +} + +.recipient-form-field-label--space-between { + display: flex; + justify-content: space-between; +} + +.recipient-checkbox { + flex-grow: 1; + font-size: 1.6rem; + display: flex; + word-break: break-word; + align-items: flex-start; + max-width: inherit; + position: relative; + cursor: pointer; +} + +.no-js .recipient-checkbox { + display: none; +} + +.recipient-form > input[type='checkbox'] { + position: absolute; + width: 1.6rem; + height: 1.6rem; + margin: var(--recipient-checkbox-margin-top) 0; + top: 0; + left: 0; + z-index: -1; + appearance: none; + -webkit-appearance: none; +} + +.recipient-fields__field { + margin: 0 0 2rem 0; +} + +.recipient-fields .field__label { + white-space: nowrap; + text-overflow: ellipsis; + max-width: calc(100% - 3.5rem); + overflow: hidden; +} + +.recipient-checkbox > svg { + margin-top: var(--recipient-checkbox-margin-top); + margin-right: 1.2rem; + flex-shrink: 0; +} + +.recipient-form .icon-checkmark { + visibility: hidden; + position: absolute; + left: 0.28rem; + z-index: 5; + top: 0.4rem; +} + +.recipient-form > input[type='checkbox']:checked + label .icon-checkmark { + visibility: visible; +} + +.js .recipient-fields { + display: none; +} + +.recipient-fields hr { + margin: 1.6rem auto; +} + +.recipient-form > input[type='checkbox']:checked ~ .recipient-fields { + display: block; + animation: animateMenuOpen var(--duration-default) ease; +} +.recipient-form > input[type='checkbox']:not(:checked, :disabled) ~ .recipient-fields, +.recipient-email-label { + display: none; +} + +.js .recipient-email-label.required, +.no-js .recipient-email-label.optional { + display: inline; +} + +.recipient-form ul { + line-height: calc(1 + 0.6 / var(--font-body-scale)); + padding-left: 4.4rem; + text-align: left; +} + +.recipient-form ul a { + display: inline; +} + +.recipient-form .error-message::first-letter { + text-transform: capitalize; +} + +@media screen and (forced-colors: active) { + .recipient-fields > hr { + border-top: 0.1rem solid rgb(var(--color-background)); + } + + .recipient-checkbox > svg { + background-color: inherit; + border: 0.1rem solid rgb(var(--color-background)); + } + + .recipient-form > input[type='checkbox']:checked + label .icon-checkmark { + border: none; + } +} diff --git a/assets/section-multicolumn.css b/assets/section-multicolumn.css index 3b736292424..29aa27168dc 100644 --- a/assets/section-multicolumn.css +++ b/assets/section-multicolumn.css @@ -29,8 +29,7 @@ width: 50%; } -.multicolumn-list__item.center - .multicolumn-card__image-wrapper:not(.multicolumn-card__image-wrapper--full-width), +.multicolumn-list__item.center .multicolumn-card__image-wrapper:not(.multicolumn-card__image-wrapper--full-width), .multicolumn-list__item:only-child { margin-left: auto; margin-right: auto; @@ -66,7 +65,8 @@ } .multicolumn.background-primary .multicolumn-card { - background: rgb(var(--color-background)) linear-gradient(rgba(var(--color-foreground), 0.04), rgba(var(--color-foreground), 0.04)); + background: rgb(var(--color-background)) + linear-gradient(rgba(var(--color-foreground), 0.04), rgba(var(--color-foreground), 0.04)); } .multicolumn-list h3 { @@ -110,7 +110,6 @@ } } - @media screen and (min-width: 750px) { .multicolumn-list.slider, .multicolumn-list.grid--4-col-desktop { @@ -154,17 +153,11 @@ padding-left: 0.5rem; } -.background-none - .slider - .multicolumn-card__image-wrapper - + .multicolumn-card__info { +.background-none .slider .multicolumn-card__image-wrapper + .multicolumn-card__info { padding-left: 1.5rem; } -.background-none - .multicolumn-list:not(.slider) - .center - .multicolumn-card__info { +.background-none .multicolumn-list:not(.slider) .center .multicolumn-card__info { padding-left: 2.5rem; padding-right: 2.5rem; } @@ -186,10 +179,7 @@ } .background-none .multicolumn-list .multicolumn-card__info, - .background-none - .multicolumn-list:not(.slider) - .center - .multicolumn-card__info { + .background-none .multicolumn-list:not(.slider) .center .multicolumn-card__info { padding-left: 1.5rem; padding-right: 1.5rem; } diff --git a/assets/share.js b/assets/share.js index 201f07611fc..953c46ef4ed 100644 --- a/assets/share.js +++ b/assets/share.js @@ -1,49 +1,56 @@ if (!customElements.get('share-button')) { - customElements.define('share-button', class ShareButton extends DetailsDisclosure { - constructor() { - super(); + customElements.define( + 'share-button', + class ShareButton extends DetailsDisclosure { + constructor() { + super(); - this.elements = { - shareButton: this.querySelector('button'), - shareSummary: this.querySelector('summary'), - closeButton: this.querySelector('.share-button__close'), - successMessage: this.querySelector('[id^="ShareMessage"]'), - urlInput: this.querySelector('input') - } - this.urlToShare = this.elements.urlInput ? this.elements.urlInput.value : document.location.href; + this.elements = { + shareButton: this.querySelector('button'), + shareSummary: this.querySelector('summary'), + closeButton: this.querySelector('.share-button__close'), + successMessage: this.querySelector('[id^="ShareMessage"]'), + urlInput: this.querySelector('input'), + }; + this.urlToShare = this.elements.urlInput ? this.elements.urlInput.value : document.location.href; - if (navigator.share) { - this.mainDetailsToggle.setAttribute('hidden', ''); - this.elements.shareButton.classList.remove('hidden'); - this.elements.shareButton.addEventListener('click', () => { navigator.share({ url: this.urlToShare, title: document.title }) }); - } else { - this.mainDetailsToggle.addEventListener('toggle', this.toggleDetails.bind(this)); - this.mainDetailsToggle.querySelector('.share-button__copy').addEventListener('click', this.copyToClipboard.bind(this)); - this.mainDetailsToggle.querySelector('.share-button__close').addEventListener('click', this.close.bind(this)); + if (navigator.share) { + this.mainDetailsToggle.setAttribute('hidden', ''); + this.elements.shareButton.classList.remove('hidden'); + this.elements.shareButton.addEventListener('click', () => { + navigator.share({ url: this.urlToShare, title: document.title }); + }); + } else { + this.mainDetailsToggle.addEventListener('toggle', this.toggleDetails.bind(this)); + this.mainDetailsToggle + .querySelector('.share-button__copy') + .addEventListener('click', this.copyToClipboard.bind(this)); + this.mainDetailsToggle.querySelector('.share-button__close').addEventListener('click', this.close.bind(this)); + } } - } - toggleDetails() { - if (!this.mainDetailsToggle.open) { - this.elements.successMessage.classList.add('hidden'); - this.elements.successMessage.textContent = ''; - this.elements.closeButton.classList.add('hidden'); - this.elements.shareSummary.focus(); + toggleDetails() { + if (!this.mainDetailsToggle.open) { + this.elements.successMessage.classList.add('hidden'); + this.elements.successMessage.textContent = ''; + this.elements.closeButton.classList.add('hidden'); + this.elements.shareSummary.focus(); + } } - } - copyToClipboard() { - navigator.clipboard.writeText(this.elements.urlInput.value).then(() => { - this.elements.successMessage.classList.remove('hidden'); - this.elements.successMessage.textContent = window.accessibilityStrings.shareSuccess; - this.elements.closeButton.classList.remove('hidden'); - this.elements.closeButton.focus(); - }); - } + copyToClipboard() { + navigator.clipboard.writeText(this.elements.urlInput.value).then(() => { + this.elements.successMessage.classList.remove('hidden'); + this.elements.successMessage.textContent = window.accessibilityStrings.shareSuccess; + this.elements.closeButton.classList.remove('hidden'); + this.elements.closeButton.focus(); + }); + } - updateUrl(url) { - this.urlToShare = url; - this.elements.urlInput.value = url; + updateUrl(url) { + this.urlToShare = url; + this.elements.urlInput.value = url; + } } - }); + ); } diff --git a/assets/show-more.js b/assets/show-more.js index b6a9f3dbd0b..26c0d40157e 100644 --- a/assets/show-more.js +++ b/assets/show-more.js @@ -4,19 +4,18 @@ class ShowMoreButton extends HTMLElement { const button = this.querySelector('button'); button.addEventListener('click', (event) => { this.expandShowMore(event); - const nextElementToFocus = event.target.closest('.parent-display').querySelector('.show-more-item') + const nextElementToFocus = event.target.closest('.parent-display').querySelector('.show-more-item'); if (nextElementToFocus && !nextElementToFocus.classList.contains('hidden')) { - nextElementToFocus.querySelector('input').focus() + nextElementToFocus.querySelector('input').focus(); } }); } expandShowMore(event) { const parentDisplay = event.target.closest('[id^="Show-More-"]').closest('.parent-display'); const parentWrap = parentDisplay.querySelector('.parent-wrap'); - this.querySelectorAll('.label-text').forEach(element => element.classList.toggle('hidden')); - parentDisplay.querySelectorAll('.show-more-item').forEach(item => item.classList.toggle('hidden')) + this.querySelectorAll('.label-text').forEach((element) => element.classList.toggle('hidden')); + parentDisplay.querySelectorAll('.show-more-item').forEach((item) => item.classList.toggle('hidden')); } } customElements.define('show-more-button', ShowMoreButton); - diff --git a/assets/template-giftcard.css b/assets/template-giftcard.css index 913a72c7773..d0b4c8559f7 100644 --- a/assets/template-giftcard.css +++ b/assets/template-giftcard.css @@ -30,12 +30,10 @@ html { body { background-color: rgb(var(--color-base-background-1)); color: rgb(var(--color-base-text)); - font-size: 1.5rem; letter-spacing: 0.07rem; line-height: calc(1 + 0.8 / var(--font-body-scale)); max-width: var(--page-width); margin: 0 auto; - padding: 0 2rem; flex: 1 0 auto; font-family: var(--font-body-family); font-style: var(--font-body-style); @@ -44,9 +42,7 @@ body { @media only screen and (min-width: 750px) { body { - font-size: 1.6rem; line-height: calc(1 + 0.8 / var(--font-body-scale)); - padding: 0 5rem; } } @@ -63,6 +59,7 @@ h2, font-weight: var(--font-heading-weight); letter-spacing: calc(var(--font-heading-scale) * 0.06rem); line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale))); + text-align: center; } h1, @@ -89,38 +86,13 @@ h2, } } -.skip-to-content-link:focus { - z-index: 9999; - position: inherit; - overflow: auto; - width: auto; - height: auto; - clip: auto; -} - -.link { - cursor: pointer; - display: inline-block; - border: none; - box-shadow: none; - background-color: transparent; - padding: 0.4rem; - font-size: 1.6rem; - line-height: 1; - text-decoration: underline; - color: rgb(var(--color-base-outline-button-labels)); -} - -.link:hover { - color: rgba(var(--color-base-outline-button-labels), 0.75); -} - .button { font-family: inherit; cursor: pointer; display: inline-flex; justify-content: center; align-items: center; + text-align: center; border: none; padding: 1.5rem 3rem; text-decoration: none; @@ -156,19 +128,19 @@ h2, box-shadow: 0 0 0 0.2rem rgb(var(--color-base-outline-button-labels)); } -.gift-card { - padding-bottom: 3.4rem; +@media (forced-colors: active) { + .button { + border: transparent solid 1px; + } } -.gift-card__title { - text-align: center; - word-break: break-word; - padding: 4rem 0 1.7rem; +.gift-card { + padding: 3rem; } -@media only screen and (min-width: 990px) { - .gift-card__title { - padding: 6rem 0 2.6rem; +@media only screen and (min-width: 750px) { + .gift-card { + padding: 5rem 5rem 3rem; } } @@ -177,22 +149,15 @@ h2, justify-content: center; align-items: center; height: 100%; - background-color: rgb(var(--color-base-background-1)); - margin-bottom: 0.8rem; - margin: 0 auto; -} - -@media only screen and (min-width: 750px) { - .gift-card__image-wrapper { - margin-bottom: 0; - width: 40rem; - } + margin: 3rem auto; + max-width: 40rem; } .gift-card__image { max-width: 100%; - padding: 0 2rem; height: auto; + object-fit: scale-down; + max-height: 26rem; } @media only screen and (min-width: 750px) { @@ -201,76 +166,45 @@ h2, } } -.gift-card__heading { - font-weight: 400; - margin: 2.5rem 0 1rem; -} - .gift-card__price { display: flex; + flex-wrap: wrap; + gap: 0rem 1rem; align-items: center; justify-content: center; - font-size: 1.6rem; - font-weight: 400; letter-spacing: 1px; - line-height: calc(1 + 0.5 / var(--font-body-scale)); - opacity: 0.85; -} - -.gift-card__price > p:first-child { - margin-bottom: 1rem; -} - -@media only screen and (min-width: 750px) { - .gift-card__price { - font-size: 2rem; - } + opacity: 0.8; } -.gift-card__label:not(.badge) { - font-weight: 400; - opacity: 0.7; +.gift-card__price h1 { + margin: 0; } .gift-card__number { - background-color: transparent; - border: none; color: rgb(var(--color-base-text)); font-size: 1.8rem; - font-weight: 400; line-height: calc(1 + 0.6 / var(--font-body-scale)); text-align: center; - width: 100%; - margin-bottom: 1rem; + letter-spacing: 0.25rem; + opacity: 0.8; + margin: 3rem 0; } -@media only screen and (min-width: 750px) { - .gift-card__number { - font-size: 1.8rem; - } +.gift-card__text-wrapper { + max-width: 30rem; + margin: 0 auto; } .gift-card__text { - margin-bottom: 4rem; - opacity: 0.7; -} - -.gift-card__information { text-align: center; - margin-top: 3rem; -} - -.gift-card__label { - font-size: 1.3rem; - letter-spacing: 0.05rem; - font-weight: 500; - display: inline; - margin-left: 1rem; + font-size: 1.7rem; + opacity: 0.6; + margin: 0; + line-height: calc(1 + 0.5 / var(--font-body-scale)); } .badge { border: 1px solid transparent; - margin: 1.7rem 0 1rem 1rem; border-radius: 4rem; display: inline-block; font-size: 1.2rem; @@ -289,24 +223,8 @@ h2, color: rgb(var(--color-base-background-1)); } -.caption-large { - font-size: 1.3rem; - line-height: calc(1 + 0.5 / var(--font-body-scale)); - letter-spacing: 0.04rem; -} - -.gift-card__copy-code { - margin-bottom: 2.2rem; -} - .gift-card__qr-code { - margin-top: 3rem; -} - -@media only screen and (min-width: 750px) { - .gift-card__qr-code { - margin-top: 5rem; - } + margin: 3rem 0; } .gift-card__qr-code img { @@ -316,7 +234,8 @@ h2, .gift_card__apple-wallet { line-height: 0; display: block; - margin-bottom: 5rem; + margin-bottom: 3rem; + text-align: center; } .gift-card__buttons { @@ -327,9 +246,9 @@ h2, margin: 0 auto; } -.gift-card__buttons > .button:first-child { +.gift-card__buttons > .button { display: block; - margin-bottom: 2rem; + margin: 1rem 0; } /* @@ -345,21 +264,19 @@ h2, *:focus-visible { outline: 0.2rem solid rgba(var(--color-base-text), 0.5); outline-offset: 0.3rem; - box-shadow: 0 0 0 0.3rem rgb(var(--color-base-background-1)), - 0 0 0.5rem 0.4rem rgba(var(--color-base-text), 0.3); + box-shadow: 0 0 0 0.3rem rgb(var(--color-base-background-1)), 0 0 0.5rem 0.4rem rgba(var(--color-base-text), 0.3); } /* Fallback - for browsers that don't support :focus-visible, a fallback is set for :focus */ -.focused, .no-js *:focus { +.focused, +.no-js *:focus { outline: 0.2rem solid rgba(var(--color-foreground), 0.5); outline-offset: 0.3rem; - box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), - 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3); + box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3); } .button:focus-visible { - box-shadow: 0 0 0 0.1rem rgb(var(--color-base-accent-1)), - 0 0 0 0.3rem rgb(var(--color-base-background-1)), + box-shadow: 0 0 0 0.1rem rgb(var(--color-base-accent-1)), 0 0 0 0.3rem rgb(var(--color-base-background-1)), 0 0 0.5rem 0.4rem rgba(var(--color-base-text), 0.3); } @@ -370,30 +287,28 @@ h2, } .button:focus { - box-shadow: 0 0 0 0.1rem rgb(var(--color-base-accent-1)), - 0 0 0 0.3rem rgb(var(--color-base-background-1)), + box-shadow: 0 0 0 0.1rem rgb(var(--color-base-accent-1)), 0 0 0 0.3rem rgb(var(--color-base-background-1)), 0 0 0.5rem 0.4rem rgba(var(--color-base-text), 0.3); } .button--secondary:focus-visible { box-shadow: 0 0 0 0.1rem rgb(var(--color-base-outline-button-labels)), - 0 0 0 0.3rem rgb(var(--color-base-background-1)), - 0 0 0.5rem 0.4rem rgba(var(--color-base-text), 0.3); + 0 0 0 0.3rem rgb(var(--color-base-background-1)), 0 0 0.5rem 0.4rem rgba(var(--color-base-text), 0.3); } .button--secondary:focus { box-shadow: 0 0 0 0.1rem rgb(var(--color-base-outline-button-labels)), - 0 0 0 0.3rem rgb(var(--color-base-background-1)), - 0 0 0.5rem 0.4rem rgba(var(--color-base-text), 0.3); + 0 0 0 0.3rem rgb(var(--color-base-background-1)), 0 0 0.5rem 0.4rem rgba(var(--color-base-text), 0.3); } .form__message { align-items: center; display: flex; font-size: 1.2rem; - line-height: 1; - margin-top: 1rem; + line-height: 1.5rem; justify-content: center; + margin-bottom: 0.5rem; + opacity: 0.8; } .form__message .icon { diff --git a/assets/theme-editor.js b/assets/theme-editor.js index d0c797fec06..557c908a3b3 100644 --- a/assets/theme-editor.js +++ b/assets/theme-editor.js @@ -1,9 +1,9 @@ function hideProductModal() { const productModal = document.querySelectorAll('product-modal[open]'); - productModal && productModal.forEach(modal => modal.hide()); + productModal && productModal.forEach((modal) => modal.hide()); } -document.addEventListener('shopify:block:select', function(event) { +document.addEventListener('shopify:block:select', function (event) { hideProductModal(); const blockSelectedIsSlide = event.target.classList.contains('slideshow__slide'); if (!blockSelectedIsSlide) return; @@ -11,14 +11,14 @@ document.addEventListener('shopify:block:select', function(event) { const parentSlideshowComponent = event.target.closest('slideshow-component'); parentSlideshowComponent.pause(); - setTimeout(function() { + setTimeout(function () { parentSlideshowComponent.slider.scrollTo({ - left: event.target.offsetLeft + left: event.target.offsetLeft, }); }, 200); }); -document.addEventListener('shopify:block:deselect', function(event) { +document.addEventListener('shopify:block:deselect', function (event) { const blockDeselectedIsSlide = event.target.classList.contains('slideshow__slide'); if (!blockDeselectedIsSlide) return; const parentSlideshowComponent = event.target.closest('slideshow-component'); diff --git a/assets/video-section.css b/assets/video-section.css index b2d9e35333e..8acdb334128 100644 --- a/assets/video-section.css +++ b/assets/video-section.css @@ -1,10 +1,16 @@ .video-section__media { + --ratio-percent: 56.25%; position: relative; - padding-bottom: 56.25%; + padding-bottom: calc(var(--ratio-percent) - var(--media-border-width)); +} + +.video-section__media.global-media-settings--full-width { + padding-bottom: var(--ratio-percent); } .video-section__media.deferred-media { - box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius) rgba(var(--color-shadow), var(--media-shadow-opacity)); + box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius) + rgba(var(--color-shadow), var(--media-shadow-opacity)); } .video-section__media.deferred-media:after { @@ -21,8 +27,17 @@ } .video-section__poster, -.video-section__media iframe { +.video-section__media iframe, +.video-section__media video { position: absolute; width: 100%; height: 100%; } + +.video-section__media video { + background: #000000; +} + +.video-section__media.media-fit-cover video { + object-fit: cover; +} diff --git a/config/settings_schema.json b/config/settings_schema.json index 87493d1c6f4..98050540ecb 100644 --- a/config/settings_schema.json +++ b/config/settings_schema.json @@ -2,7 +2,7 @@ { "name": "theme_info", "theme_name": "Dawn", - "theme_version": "8.0.0-rc", + "theme_version": "9.0.0", "theme_author": "Shopify", "theme_documentation_url": "https://help.shopify.com/manual/online-store/themes", "theme_support_url": "https://support.shopify.com/" @@ -212,6 +212,17 @@ } ] }, + { + "name": "t:settings_schema.animations.name", + "settings": [ + { + "type": "checkbox", + "id": "animations_reveal_on_scroll", + "label": "t:settings_schema.animations.settings.animations_reveal_on_scroll.label", + "default": true + } + ] + }, { "name": "t:settings_schema.buttons.name", "settings": [ diff --git a/layout/theme.liquid b/layout/theme.liquid index 368f137fe7d..5f7a9ef8f19 100644 --- a/layout/theme.liquid +++ b/layout/theme.liquid @@ -32,6 +32,10 @@ + {%- if settings.animations_reveal_on_scroll -%} + + {%- endif -%} + {{ content_for_header }} {%- liquid diff --git a/locales/bg-BG.json b/locales/bg-BG.json index 5d5234692e1..25c3879a981 100644 --- a/locales/bg-BG.json +++ b/locales/bg-BG.json @@ -40,7 +40,7 @@ "reset": "Изчисти думата за търсене" }, "cart": { - "view": "Покажи количката ми ({{ count }})", + "view": "Покажи количката ({{ count }})", "item_added": "Артикулът е добавен в количката", "view_empty_cart": "Покажи количката" }, @@ -322,6 +322,13 @@ }, "page": { "title": "Заглавие на страница" + }, + "announcements": { + "previous_announcement": "Предишно известие", + "next_announcement": "Следващо известие", + "carousel": "Въртележка", + "announcement": "Известие", + "announcement_bar": "Лента с известия" } }, "localization": { @@ -442,17 +449,30 @@ }, "gift_cards": { "issued": { - "title": "Получавате ваучер за подарък на стойност {{ value }} за {{ shop }}!", + "title": "Това е остатъкът от вашия ваучер за подарък на стойност {{ value }} за {{ shop }}!", "gift_card_code": "Код на ваучер за подарък", - "shop_link": "Продължете да пазарувате", - "remaining_html": "остава: {{ balance }}", + "shop_link": "Посетете магазина онлайн", "add_to_apple_wallet": "Добавяне към Apple Wallet", "qr_image_alt": "QR код – сканирайте го, за да използвате ваучера за подарък", - "copy_code": "копирай кода", + "copy_code": "Копиране на кода на ваучер за подарък", "expired": "Изтекъл", "copy_code_success": "Кодът е копиран успешно", - "print_gift_card": "Печат", - "subtext": "Вашият ваучер за подарък" + "subtext": "Вашият ваучер за подарък", + "how_to_use_gift_card": "Използвайте ваучера за подарък онлайн или QR код в магазина", + "expiration_date": "Изтича на {{ expires_on }}" + } + }, + "recipient": { + "form": { + "checkbox": "Искам да изпратя като подарък", + "email_label": "Имейл на получателя", + "email": "Имейл", + "name_label": "Име на получателя (незадължително)", + "name": "Име", + "message_label": "Съобщение (незадължително)", + "message": "Съобщение", + "max_characters": "Макс. {{ max_chars }} знака", + "email_label_optional_for_no_js_behavior": "Имейл на получателя (незадължително)" } } } diff --git a/locales/cs.json b/locales/cs.json index f660ffbd9b4..d6e9d6e9097 100644 --- a/locales/cs.json +++ b/locales/cs.json @@ -42,7 +42,7 @@ "cart": { "view": "Zobrazit košík ({{ count }})", "item_added": "Položka byla přidána do košíku", - "view_empty_cart": "Zobrazit můj košík" + "view_empty_cart": "Zobrazit košík" }, "share": { "copy_to_clipboard": "Kopírovat odkaz", @@ -342,6 +342,13 @@ }, "page": { "title": "Název stránky" + }, + "announcements": { + "previous_announcement": "Předchozí oznámení", + "next_announcement": "Další oznámení", + "carousel": "Karusel", + "announcement": "Oznámení", + "announcement_bar": "Panel oznámení" } }, "localization": { @@ -462,17 +469,30 @@ }, "gift_cards": { "issued": { - "title": "Zde je vaše dárková karta v hodnotě {{ value }} pro obchod {{ shop }}!", + "title": "Zůstatek vaší dárkové karty pro obchod {{ shop }} je: {{ value }}!", "subtext": "Vaše dárková karta", "gift_card_code": "Kód dárkové karty", - "shop_link": "Pokračovat v nákupu", - "remaining_html": "Zbývající částka: {{ balance }}", + "shop_link": "Navštívit online obchod", "add_to_apple_wallet": "Přidat do Apple Wallet", "qr_image_alt": "QR kód: po naskenování můžete uplatnit svou dárkovou kartu", - "copy_code": "Kopírovat kód", + "copy_code": "Zkopírovat kód dárkové karty", "expired": "Platnost vypršela", "copy_code_success": "Kód byl úspěšně zkopírován", - "print_gift_card": "Vytisknout" + "how_to_use_gift_card": "Použijte kód dárkové karty online nebo QR kód na prodejně", + "expiration_date": "Platnost skončí {{ expires_on }}" + } + }, + "recipient": { + "form": { + "checkbox": "Chci zboží poslat jako dárek", + "email_label": "E-mail příjemce", + "email": "E-mail", + "name_label": "Jméno příjemce (volitelné)", + "name": "Jméno", + "message_label": "Zpráva (volitelné)", + "message": "Zpráva", + "max_characters": "Maximální počet znaků: {{ max_chars }}", + "email_label_optional_for_no_js_behavior": "E-mail příjemce (volitelné)" } } } diff --git a/locales/cs.schema.json b/locales/cs.schema.json index 70cec3b1779..4af09a7a5fe 100644 --- a/locales/cs.schema.json +++ b/locales/cs.schema.json @@ -382,6 +382,14 @@ "content": "Přidejte do zápatí obchodu popis značky." } } + }, + "animations": { + "name": "Animace", + "settings": { + "animations_reveal_on_scroll": { + "label": "Zobrazit sekce při skrolování" + } + } } }, "sections": { @@ -425,6 +433,46 @@ "options__4": { "label": "Extra velká" } + }, + "image_shape": { + "options__1": { + "label": "Výchozí" + }, + "options__2": { + "label": "Oblouk" + }, + "options__3": { + "label": "Blob" + }, + "options__4": { + "label": "Dvojitá šipka vlevo" + }, + "options__5": { + "label": "Dvojitá šipka vpravo" + }, + "options__6": { + "label": "Kosočtverec" + }, + "options__7": { + "label": "Rovnoběžník" + }, + "options__8": { + "label": "Kruh" + }, + "label": "Tvar obrázku", + "info": "Karty ve standardním stylu nemají ohraničení v případě, že je tvar obrázku aktivní." + }, + "animation": { + "content": "Animace", + "image_behavior": { + "options__1": { + "label": "Žádné" + }, + "options__2": { + "label": "Krouživý pohyb" + }, + "label": "Chování obrázku" + } } }, "announcement-bar": { @@ -453,6 +501,14 @@ } } } + }, + "settings": { + "auto_rotate": { + "label": "Automaticky otočit snímky" + }, + "change_slides_speed": { + "label": "Změnit snímek co" + } } }, "collage": { @@ -848,7 +904,7 @@ }, "header__9": { "content": "Sledování v aplikaci Shop", - "info": "Zobrazte tlačítko pro sledování vaší cílové stránky obchodu v aplikaci Shop. [Zjistit více](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" + "info": "Pokud chcete zákazníkům umožnit sledování vašeho obchodu v aplikaci Shop přes cílovou stránku obchodu, musíte povolit Shop Pay. [Zjistit více](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" }, "enable_follow_on_shop": { "label": "Povolit sledování v aplikaci Shop" @@ -890,6 +946,9 @@ }, "options__2": { "label": "Mega nabídka" + }, + "options__3": { + "label": "Výsuvný panel" } }, "mobile_layout": { @@ -904,9 +963,6 @@ "label": "Vlevo" } }, - "logo_header": { - "content": "Logo" - }, "logo_help": { "content": "Logo upravíte v [nastavení motivu](/editor?context=theme&category=logo)." }, @@ -924,6 +980,24 @@ "options__4": { "label": "Vždy, zmenšit logo" } + }, + "header__3": { + "content": "Selektor země/oblasti" + }, + "header__4": { + "info": "Pokud chcete přidat zemi nebo oblast, přejděte na [nastavení trhu.](/admin/settings/markets)" + }, + "enable_country_selector": { + "label": "Povolit selektor země/oblasti" + }, + "header__5": { + "content": "Selektor jazyka" + }, + "header__6": { + "info": "Pokud chcete přidat jazyk, přejděte na [jazykové nastavení.](/admin/settings/languages)" + }, + "enable_language_selector": { + "label": "Povolit selektor jazyka" } } }, @@ -942,19 +1016,12 @@ "stack_images_on_mobile": { "label": "Zobrazit obrázky na mobilním zařízení nad sebou" }, - "adapt_height_first_image": { - "label": "Přizpůsobit výšku sekce velikosti prvního obrázku", - "info": "Pokud je tato možnost zaškrtnuta, přepíše nastavení výšky obrázkového banneru." - }, "show_text_box": { "label": "Zobrazit kontejner na počítači" }, "image_overlay_opacity": { "label": "Neprůhlednost překryvu obrázku" }, - "header": { - "content": "Mobilní rozvržení" - }, "show_text_below": { "label": "Zobrazit kontejner na mobilním zařízení" }, @@ -1027,6 +1094,9 @@ "label": "Doprava" }, "label": "Zarovnání obsahu v mobilním prostředí" + }, + "mobile": { + "content": "Mobilní rozvržení" } }, "blocks": { @@ -1584,6 +1654,10 @@ "show_dynamic_checkout": { "label": "Zobrazit dynamická tlačítka pokladny", "info": "V rámci platebních metod dostupných v obchodě uvidí zákazníci tu, kterou nejvíce preferují, jako například PayPal nebo Apple Pay. [Zjistit více](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)" + }, + "show_gift_card_recipient": { + "label": "Zobrazit formulář s informacemi o příjemci u produktů dárkových karet", + "info": "Produkty dárkových karet je možné volitelně posílat přímo příslušnému příjemci společně s osobní zprávou. [Zjistit více](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields)" } } }, @@ -2343,8 +2417,7 @@ }, "video_url": { "label": "URL", - "placeholder": "Zadejte adresu URL na YouTube nebo Vimeo", - "info": "Video se přehrává na stránce." + "info": "Zadejte adresu URL z YouTube nebo Vimea" }, "description": { "label": "Alternativní text videa", @@ -2356,6 +2429,24 @@ }, "full_width": { "label": "Nastavit plnou šířku sekce" + }, + "video": { + "label": "Video" + }, + "enable_video_looping": { + "label": "Přehrát video jako smyčku" + }, + "header__1": { + "content": "Video hostované Shopify" + }, + "header__2": { + "content": "Nebo vložte video přes URL" + }, + "header__3": { + "content": "Styl" + }, + "paragraph": { + "content": "Zobrazí se v případě, že není vybráno žádné video hostované Shopify." } }, "presets": { diff --git a/locales/da.json b/locales/da.json index 832528af3b1..a95c73855ee 100644 --- a/locales/da.json +++ b/locales/da.json @@ -40,9 +40,9 @@ "reset": "Ryd søgeord" }, "cart": { - "view": "Se min indkøbskurv ({{ count }})", + "view": "Se indkøbskurv ({{ count }})", "item_added": "Varen er lagt i indkøbskurven", - "view_empty_cart": "Vis min indkøbskurv" + "view_empty_cart": "Se indkøbskurv" }, "share": { "copy_to_clipboard": "Kopiér link", @@ -322,6 +322,13 @@ }, "page": { "title": "Sidetitel" + }, + "announcements": { + "previous_announcement": "Forrige meddelelse", + "next_announcement": "Næste meddelelse", + "carousel": "Karrusel", + "announcement": "Meddelelse", + "announcement_bar": "Meddelelseslinje" } }, "localization": { @@ -442,17 +449,30 @@ }, "gift_cards": { "issued": { - "title": "Her er dit gavekort på {{ value }} til {{ shop }}!", + "title": "Her er din gavekortsaldo ({{ value }}) for {{ shop }}!", "subtext": "Dit gavekort", "gift_card_code": "Gavekortskode", - "shop_link": "Tilbage til butikken", - "remaining_html": "Der resterer {{ balance }}", + "shop_link": "Besøg webshop", "add_to_apple_wallet": "Føj til Apple Wallet", "qr_image_alt": "QR-kode – scan for at indløse gavekort", - "copy_code": "Kopiér kode", + "copy_code": "Kopiér gavekortskode", "expired": "Udløbet", "copy_code_success": "Koden er blevet kopieret", - "print_gift_card": "Udskriv" + "how_to_use_gift_card": "Brug gavekortkoden online eller som QR-kode i butikken", + "expiration_date": "Udløber {{ expires_on }}" + } + }, + "recipient": { + "form": { + "checkbox": "Jeg vil sende som en gave", + "email_label": "Modtagers mailadresse", + "email": "Mail", + "name_label": "Modtagerens navn (valgfrit)", + "name": "Navn", + "message_label": "Besked (valgfrit)", + "message": "Besked", + "max_characters": "Højst {{ max_chars }} tegn", + "email_label_optional_for_no_js_behavior": "Modtagerens mailadresse (valgfrit)" } } } diff --git a/locales/da.schema.json b/locales/da.schema.json index 4f29e64870a..c3bfa388c88 100644 --- a/locales/da.schema.json +++ b/locales/da.schema.json @@ -382,6 +382,14 @@ "content": "Føj en brandbeskrivelse til din butiks sidefod." } } + }, + "animations": { + "name": "Animationer", + "settings": { + "animations_reveal_on_scroll": { + "label": "Afslør afsnit ved rulning" + } + } } }, "sections": { @@ -425,6 +433,46 @@ "options__4": { "label": "Ekstra stor" } + }, + "image_shape": { + "options__1": { + "label": "Standard" + }, + "options__2": { + "label": "Bue" + }, + "options__3": { + "label": "Blob" + }, + "options__4": { + "label": "Venstre chevron" + }, + "options__5": { + "label": "Højre chevron" + }, + "options__6": { + "label": "Diamant" + }, + "options__7": { + "label": "Parallelogram" + }, + "options__8": { + "label": "Rund" + }, + "label": "Billedform", + "info": "Kort i standardstil har ingen kanter, når en billedform er aktiv." + }, + "animation": { + "content": "Animationer", + "image_behavior": { + "options__1": { + "label": "Ingen" + }, + "options__2": { + "label": "Omgivende bevægelse" + }, + "label": "Billedadfærd" + } } }, "announcement-bar": { @@ -453,6 +501,14 @@ } } } + }, + "settings": { + "auto_rotate": { + "label": "Roter automatisk slides" + }, + "change_slides_speed": { + "label": "Skift slide hver" + } } }, "collage": { @@ -848,7 +904,7 @@ }, "header__9": { "content": "Følg på Shop", - "info": "Vis følgknappen for din butiksfacade i Shop-appen. [Få mere at vide](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" + "info": "Hvis du vil give kunder mulighed for at følge din butik i Shop-appen via din butiksfacade, skal du have aktiveret Shop Pay. [Få mere at vide](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" }, "enable_follow_on_shop": { "label": "Aktivér Følg på Shop" @@ -890,6 +946,9 @@ }, "options__2": { "label": "Megamenu" + }, + "options__3": { + "label": "Skuffe" } }, "mobile_layout": { @@ -904,9 +963,6 @@ "label": "Venstre" } }, - "logo_header": { - "content": "Logo" - }, "logo_help": { "content": "Rediger dit logo i [temaindstillinger](/editor?context=theme&category=logo)." }, @@ -924,6 +980,24 @@ "options__4": { "label": "Altid, reducer størrelsen på logo" } + }, + "header__3": { + "content": "Lande-/områdevælger" + }, + "header__4": { + "info": "Hvis du vil tilføje et land/område, skal du gå til dine [markedsindstillinger.](/admin/settings/markets)" + }, + "enable_country_selector": { + "label": "Aktivér lande-/områdevælger" + }, + "header__5": { + "content": "Sprogvælger" + }, + "header__6": { + "info": "Hvis du vil tilføje et sprog, skal du gå til dine [sprogindstillinger.](/admin/settings/languages)" + }, + "enable_language_selector": { + "label": "Aktivér sprogvælger" } } }, @@ -942,19 +1016,12 @@ "stack_images_on_mobile": { "label": "Stabl billeder på mobilenheder" }, - "adapt_height_first_image": { - "label": "Tilpas afsnitshøjden til størrelsen af det første billede", - "info": "Overskriver indstillingerne for højden på billedbanneret, når det markeres." - }, "show_text_box": { "label": "Vis container på skrivebord" }, "image_overlay_opacity": { "label": "Billedoverlejringens uigennemsigtighed" }, - "header": { - "content": "Mobillayout" - }, "show_text_below": { "label": "Vis container på mobiltelefon" }, @@ -1027,6 +1094,9 @@ "label": "Højre" }, "label": "Justering af indhold på mobil" + }, + "mobile": { + "content": "Mobillayout" } }, "blocks": { @@ -1584,6 +1654,10 @@ "show_dynamic_checkout": { "label": "Vis dynamiske betalingsknapper", "info": "Via de tilgængelige betalingsmetoder i din butik ser kunderne deres foretrukne mulighed, som f.eks. PayPal eller Apple Pay. [Få mere at vide](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)" + }, + "show_gift_card_recipient": { + "label": "Vis formular til modtageroplysninger for gavekortprodukter", + "info": "Gavekortprodukter kan sendes direkte til modtageren sammen med en personlig besked. [Få mere at vide](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields)" } } }, @@ -2343,8 +2417,7 @@ }, "video_url": { "label": "Webadresse", - "placeholder": "Brug en YouTube- eller Vimeo-webadresse", - "info": "Video afspiller på siden." + "info": "Brug en YouTube- eller Vimeo-webadresse" }, "description": { "label": "Alternativ tekst til video", @@ -2356,6 +2429,24 @@ }, "full_width": { "label": "Gør afsnittet til fuld bredde" + }, + "video": { + "label": "Video" + }, + "enable_video_looping": { + "label": "Afspil video i loop" + }, + "header__1": { + "content": "Video hostet af Shopify" + }, + "header__2": { + "content": "Eller integrer video fra webadresse" + }, + "header__3": { + "content": "Stil" + }, + "paragraph": { + "content": "Vises, når der ikke er valgt en video, der er hostet af Shopify." } }, "presets": { diff --git a/locales/de.json b/locales/de.json index e2ad22edcf8..373ede71d77 100644 --- a/locales/de.json +++ b/locales/de.json @@ -40,9 +40,9 @@ "reset": "Suchbegriff zurücksetzen" }, "cart": { - "view": "Meinen Warenkorb ({{ count }}) anzeigen", + "view": "Warenkorb ansehen ({{ count }})", "item_added": "Artikel wurde in den Warenkorb gelegt", - "view_empty_cart": "Meinen Warenkorb anzeigen" + "view_empty_cart": "Warenkorb ansehen" }, "share": { "copy_to_clipboard": "Link kopieren", @@ -322,6 +322,13 @@ }, "page": { "title": "Seitentitel" + }, + "announcements": { + "previous_announcement": "Vorherige Ankündigung", + "next_announcement": "Nächste Ankündigung", + "carousel": "Karussell", + "announcement": "Ankündigung", + "announcement_bar": "Ankündigungsleiste" } }, "localization": { @@ -442,17 +449,30 @@ }, "gift_cards": { "issued": { - "title": "Hier ist dein Geschenkgutschein im Wert von {{ value }} für {{ shop }}!", + "title": "Hier ist dein {{ value }}-Geschenkgutschein für {{ shop }}!", "subtext": "Dein Geschenkgutschein", "gift_card_code": "Gutscheincode", - "shop_link": "Weiter shoppen", - "remaining_html": "{{ balance }} verbleibend", + "shop_link": "Onlineshop besuchen", "add_to_apple_wallet": "Zu Apple Wallet hinzufügen", "qr_image_alt": "QR-Code – Scannen, um Geschenkgutschein einzulösen", - "copy_code": "Code kopieren", + "copy_code": "Geschenkgutscheincode kopieren", "expired": "Abgelaufen", "copy_code_success": "Code erfolgreich kopiert", - "print_gift_card": "Drucken" + "how_to_use_gift_card": "Verwende diesen Geschenkgutscheincode online oder verwende den QR-Code im Shop", + "expiration_date": "Gültig bis {{ expires_on }}" + } + }, + "recipient": { + "form": { + "checkbox": "Ich möchte dies als Geschenk senden", + "email_label": "Empfänger E-Mail", + "email": "E-Mail", + "name_label": "Name des Empfängers (optional)", + "name": "Name", + "message_label": "Nachricht (optional)", + "message": "Nachricht", + "max_characters": "Maximal {{ max_chars }} Zeichen", + "email_label_optional_for_no_js_behavior": "E-Mail-Adresse des Empfängers (optional)" } } } diff --git a/locales/de.schema.json b/locales/de.schema.json index f7695a0d08e..434fed5dace 100644 --- a/locales/de.schema.json +++ b/locales/de.schema.json @@ -382,6 +382,14 @@ "content": "Füge der Fußzeile deines Shops ein Beschreibung deiner Marke hinzu." } } + }, + "animations": { + "name": "Animationen", + "settings": { + "animations_reveal_on_scroll": { + "label": "Beim Scrollen Abschnitte einblenden" + } + } } }, "sections": { @@ -425,6 +433,46 @@ "options__4": { "label": "Extra groß" } + }, + "image_shape": { + "options__1": { + "label": "Standard" + }, + "options__2": { + "label": "Bogen" + }, + "options__3": { + "label": "Klecks" + }, + "options__4": { + "label": "Chevron nach links" + }, + "options__5": { + "label": "Chevron nach rechts" + }, + "options__6": { + "label": "Diamant" + }, + "options__7": { + "label": "Parallelogramm" + }, + "options__8": { + "label": "Rund" + }, + "label": "Bildform", + "info": "Karten mit Standarddesign haben keinen Rahmen, wenn eine Bildform aktiv ist." + }, + "animation": { + "content": "Animationen", + "image_behavior": { + "options__1": { + "label": "Keine(r)" + }, + "options__2": { + "label": "Atmosphärische Bewegung" + }, + "label": "Bildverhalten" + } } }, "announcement-bar": { @@ -453,6 +501,14 @@ } } } + }, + "settings": { + "auto_rotate": { + "label": "Autorotieren der Slides" + }, + "change_slides_speed": { + "label": "Slides überall ändern" + } } }, "collage": { @@ -848,7 +904,7 @@ }, "header__9": { "content": "In Shop folgen", - "info": "Zeige die Schaltfläche zum Folgen für deine Storefront in der Shop-App an. [Mehr Informationen](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" + "info": "Damit Kunden deinem Shop in der Shop-App über deine Storefront folgen können, muss Shop Pay aktiviert sein. [Mehr Informationen](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" }, "enable_follow_on_shop": { "label": "\"In Shop folgen\" aktivieren" @@ -890,6 +946,9 @@ }, "options__2": { "label": "Mega-Menü" + }, + "options__3": { + "label": "Einschub" } }, "mobile_layout": { @@ -904,9 +963,6 @@ "label": "Links" } }, - "logo_header": { - "content": "Logo" - }, "logo_help": { "content": "Bearbeite dein Logo in den [theme settings](/editor?context=theme&category=logo)." }, @@ -924,6 +980,24 @@ "options__4": { "label": "Immer, Größe des Logos reduzieren" } + }, + "header__3": { + "content": "Auswahl für Land/Region" + }, + "header__4": { + "info": "Gehe zu den [Markteinstellungen](/admin/settings/markets), um ein Land / eine Region hinzuzufügen." + }, + "enable_country_selector": { + "label": "Auswahl für Land/Region aktivieren" + }, + "header__5": { + "content": "Sprachauswahl" + }, + "header__6": { + "info": "Gehe zu den [Spracheinstellungen](/admin/settings/languages), um eine Sprache hinzuzufügen." + }, + "enable_language_selector": { + "label": "Sprachauswahl aktivieren" } } }, @@ -942,19 +1016,12 @@ "stack_images_on_mobile": { "label": "Gestapelte Bilder auf Mobilgeräten" }, - "adapt_height_first_image": { - "label": "Abschnittshöhe an Größe des ersten Bildes anpassen", - "info": "Überschreibt bei Überprüfung die Einstellung für die Höhe des Bild-Banners." - }, "show_text_box": { "label": "Container auf dem Desktop anzeigen" }, "image_overlay_opacity": { "label": "Deckkraft der Bildüberlagerung" }, - "header": { - "content": "Mobiles Layout" - }, "show_text_below": { "label": "Container auf Mobilgerät anzeigen" }, @@ -1027,6 +1094,9 @@ "label": "Rechts" }, "label": "Mobile Inhaltsausrichtung" + }, + "mobile": { + "content": "Mobiles Layout" } }, "blocks": { @@ -1583,6 +1653,10 @@ "show_dynamic_checkout": { "label": "Dynamischer Checkout-Button anzeigen", "info": "Wenn sie die Zahlungsmethoden verwenden, die in deinem Shop verfügbar sind, sehen Kunden ihre bevorzugte Option, z. B. PayPal oder Apple Pay. [Mehr Informationen](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)" + }, + "show_gift_card_recipient": { + "label": "Formular für Empfängerinformationen für Geschenkgutscheinprodukte anzeigen", + "info": "Geschenkgutscheinprodukte können optional mit einer persönlichen Nachricht an einen Empfänger gesendet werden. [Mehr Informationen](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields)" } } }, @@ -2343,8 +2417,7 @@ }, "video_url": { "label": "URL", - "placeholder": "YouTube- oder Vimeo-URL verwenden", - "info": "Video wird auf der Seite abgespielt." + "info": "YouTube- oder Vimeo-URL verwenden" }, "description": { "label": "Video-Alt-Text", @@ -2356,6 +2429,24 @@ }, "full_width": { "label": "Abschnitt über die gesamte Breite" + }, + "video": { + "label": "Video" + }, + "enable_video_looping": { + "label": "Videoschleife abspielen" + }, + "header__1": { + "content": "Von Shopify gehostetes Video" + }, + "header__2": { + "content": "Oder Video von URL einbetten" + }, + "header__3": { + "content": "Stil" + }, + "paragraph": { + "content": "Wird angezeigt, wenn kein von Shopify gehostetes Video ausgewählt wurde." } }, "presets": { diff --git a/locales/el.json b/locales/el.json index 7fa16961fe7..8b14132dfd5 100644 --- a/locales/el.json +++ b/locales/el.json @@ -40,9 +40,9 @@ "reset": "Διαγραφή όρου αναζήτησης" }, "cart": { - "view": "Προβολή του καλαθιού μου ({{ count }})", + "view": "Προβολή καλαθιού ({{ count }})", "item_added": "Το στοιχείο προστέθηκε στο καλάθι σας", - "view_empty_cart": "Προβολή του καλαθιού μου" + "view_empty_cart": "Προβολή καλαθιού" }, "share": { "copy_to_clipboard": "Αντιγραφή συνδέσμου", @@ -322,6 +322,13 @@ }, "page": { "title": "Τίτλος σελίδας" + }, + "announcements": { + "previous_announcement": "Προηγούμενη ανακοίνωση", + "next_announcement": "Επόμενη ανακοίνωση", + "carousel": "Καρουζέλ", + "announcement": "Ανακοίνωση", + "announcement_bar": "Γραμμή ανακοινώσεων" } }, "localization": { @@ -442,17 +449,30 @@ }, "gift_cards": { "issued": { - "title": "Αυτή είναι η δωροκάρτα σας αξίας {{ value }} για το {{ shop }}!", + "title": "Αυτό είναι το υπόλοιπο της δωροκάρτας σας ύψους {{ value }} για το {{ shop }}!", "subtext": "Η δωροκάρτα σας", "gift_card_code": "Κωδικός δωροκάρτας", - "shop_link": "Συνέχιση αγορών", - "remaining_html": "Απομένουν {{ balance }}", + "shop_link": "Επισκεφτείτε το διαδικτυακό κατάστημα", "add_to_apple_wallet": "Προσθήκη στο Apple Wallet", "qr_image_alt": "Κωδικός QR — σαρώστε για να εξαργυρώσετε τη δωροκάρτα", - "copy_code": "Αντιγραφή κωδικού", + "copy_code": "Αντιγραφή κωδικού δωροκάρτας", "expired": "Έληξε", "copy_code_success": "Η αντιγραφή του κωδικού ήταν επιτυχής", - "print_gift_card": "Εκτύπωση" + "how_to_use_gift_card": "Χρησιμοποιήστε τον κωδικό της δωροκάρτας στο διαδίκτυο ή τον κωδικό QR στο κατάστημα", + "expiration_date": "Λήγει στις {{ expires_on }}" + } + }, + "recipient": { + "form": { + "checkbox": "Θέλω να το στείλω ως δώρο", + "email_label": "Email παραλήπτη", + "email": "Email", + "name_label": "Όνομα παραλήπτη (προαιρετικά)", + "name": "Όνομα", + "message_label": "Μήνυμα (προαιρετικά)", + "message": "Μήνυμα", + "max_characters": "Έως {{ max_chars }} χαρακτήρες", + "email_label_optional_for_no_js_behavior": "Email παραλήπτη (προαιρετικά)" } } } diff --git a/locales/en.default.json b/locales/en.default.json index 88cedec9a42..e0bbd7d37ff 100644 --- a/locales/en.default.json +++ b/locales/en.default.json @@ -40,8 +40,8 @@ "reset": "Clear search term" }, "cart": { - "view": "View my cart ({{ count }})", - "view_empty_cart": "View my cart", + "view": "View cart ({{ count }})", + "view_empty_cart": "View cart", "item_added": "Item added to your cart" }, "share": { @@ -252,6 +252,14 @@ } }, "sections": { + "announcements": { + "previous_announcement": "Previous announcement", + "next_announcement": "Next announcement", + "carousel": "Carousel", + "announcement": "Announcement", + "announcement_bar": "Announcement bar" + }, + "header": { "announcement": "Announcement", "menu": "Menu", @@ -442,17 +450,30 @@ }, "gift_cards": { "issued": { - "title": "Here's your {{ value }} gift card for {{ shop }}!", + "how_to_use_gift_card": "Use the gift card code online or QR code in-store", + "title": "Here's your {{ value }} gift card balance for {{ shop }}!", "subtext": "Your gift card", "gift_card_code": "Gift card code", - "shop_link": "Continue shopping", - "remaining_html": "Remaining {{ balance }}", + "shop_link": "Visit online store", "add_to_apple_wallet": "Add to Apple Wallet", "qr_image_alt": "QR code — scan to redeem gift card", - "copy_code": "Copy code", - "expired": "Expired", + "copy_code": "Copy gift card code", + "expiration_date": "Expires {{ expires_on }}", "copy_code_success": "Code copied successfully", - "print_gift_card": "Print" + "expired": "Expired" + } + }, + "recipient": { + "form": { + "checkbox": "I want to send this as a gift", + "email_label": "Recipient email", + "email_label_optional_for_no_js_behavior": "Recipient email (optional)", + "email": "Email", + "name_label": "Recipient name (optional)", + "name": "Name", + "message_label": "Message (optional)", + "message": "Message", + "max_characters": "{{ max_chars }} characters max" } } } diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json index 2c490127ace..e2fd95d1c05 100644 --- a/locales/en.default.schema.json +++ b/locales/en.default.schema.json @@ -257,6 +257,14 @@ } } }, + "animations": { + "name": "Animations", + "settings": { + "animations_reveal_on_scroll": { + "label": "Reveal sections on scroll" + } + } + }, "social-media": { "name": "Social media", "settings": { @@ -386,6 +394,18 @@ }, "sections": { "all": { + "animation": { + "content": "Animations", + "image_behavior": { + "options__1": { + "label": "None" + }, + "options__2": { + "label": "Ambient movement" + }, + "label": "Image behavior" + } + }, "padding": { "section_padding_heading": "Section padding", "padding_top": "Top padding", @@ -425,10 +445,46 @@ "options__4": { "label": "Extra large" } + }, + "image_shape": { + "options__1": { + "label": "Default" + }, + "options__2": { + "label": "Arch" + }, + "options__3": { + "label": "Blob" + }, + "options__4": { + "label": "Chevron left" + }, + "options__5": { + "label": "Chevron right" + }, + "options__6": { + "label": "Diamond" + }, + "options__7": { + "label": "Parallelogram" + }, + "options__8": { + "label": "Round" + }, + "label": "Image shape", + "info": "Standard-styled cards have no borders when an image shape is active." } }, "announcement-bar": { "name": "Announcement bar", + "settings": { + "auto_rotate": { + "label": "Auto-rotate slides" + }, + "change_slides_speed": { + "label": "Change slides every" + } + }, "blocks": { "announcement": { "name": "Announcement", @@ -995,9 +1051,9 @@ "margin_top": { "label": "Top margin" }, - "header__9": { + "header__9": { "content": "Follow on Shop", - "info": "Display follow button for your storefront on the Shop app. [Learn more](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" + "info": "To allow customers to follow your store on the Shop app from your storefront, Shop Pay must be enabled. [Learn more](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" }, "enable_follow_on_shop": { "label": "Enable Follow on Shop" @@ -1007,9 +1063,6 @@ "header": { "name": "Header", "settings": { - "logo_header": { - "content": "Logo" - }, "logo_help": { "content": "Edit your logo in [theme settings](/editor?context=theme&category=logo)." }, @@ -1039,6 +1092,9 @@ }, "options__2": { "label": "Mega menu" + }, + "options__3": { + "label": "Drawer" } }, "show_line_separator": { @@ -1059,6 +1115,24 @@ "label": "Always, reduce logo size" } }, + "header__3": { + "content": "Country/region selector" + }, + "header__4": { + "info": "To add a country/region, go to your [market settings.](/admin/settings/markets)" + }, + "enable_country_selector": { + "label": "Enable country/region selector" + }, + "header__5": { + "content": "Language selector" + }, + "header__6": { + "info": "To add a language, go to your [language settings.](/admin/settings/languages)" + }, + "enable_language_selector": { + "label": "Enable language selector" + }, "margin_bottom": { "label": "Bottom margin" }, @@ -1152,7 +1226,7 @@ "color_scheme": { "info": "Visible when container displayed." }, - "header": { + "mobile": { "content": "Mobile Layout" }, "mobile_content_alignment": { @@ -1172,10 +1246,6 @@ }, "show_text_below": { "label": "Show container on mobile" - }, - "adapt_height_first_image": { - "label": "Adapt section height to first image size", - "info": "Overwrites image banner height setting when checked." } }, "blocks": { @@ -1925,6 +1995,10 @@ "show_dynamic_checkout": { "label": "Show dynamic checkout buttons", "info": "Using the payment methods available on your store, customers see their preferred option, like PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)" + }, + "show_gift_card_recipient": { + "label": "Show recipient information form for gift card products", + "info": "Gift card products can optionally be sent direct to a recipient along with a personal message. [Learn more](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields)" } } }, @@ -2840,10 +2914,27 @@ "cover_image": { "label": "Cover image" }, + "video": { + "label": "Video" + }, + "enable_video_looping": { + "label": "Play video on loop" + }, + "header__1": { + "content": "Shopify-hosted video" + }, + "header__2": { + "content": "Or embed video from URL" + }, + "header__3": { + "content": "Style" + }, + "paragraph": { + "content": "Shows when no Shopify-hosted video is selected." + }, "video_url": { "label": "URL", - "placeholder": "Use a YouTube or Vimeo URL", - "info": "Video plays in the page." + "info": "Use a YouTube or Vimeo URL" }, "description": { "label": "Video alt text", diff --git a/locales/es.json b/locales/es.json index 8ee77eb3912..6d563eb87ab 100644 --- a/locales/es.json +++ b/locales/es.json @@ -40,9 +40,9 @@ "reset": "Borrar término de búsqueda" }, "cart": { - "view": "Ver mi carrito ({{ count }})", + "view": "Ver carrito ({{ count }})", "item_added": "Artículo agregado a tu carrito", - "view_empty_cart": "Ver mi carrito" + "view_empty_cart": "Ver carrito" }, "share": { "copy_to_clipboard": "Copiar enlace", @@ -332,6 +332,13 @@ }, "page": { "title": "Título de la página" + }, + "announcements": { + "previous_announcement": "Anuncio anterior", + "next_announcement": "Anuncio siguiente", + "carousel": "Carrusel", + "announcement": "Anuncio", + "announcement_bar": "Barra de anuncios" } }, "localization": { @@ -452,17 +459,30 @@ }, "gift_cards": { "issued": { - "title": "¡Aquí está tu tarjeta de regalo de {{ value }} para {{ shop }}!", + "title": "Este es el saldo de tu tarjeta de regalo de {{ value }} para {{ shop }}.", "subtext": "Tu tarjeta de regalo", "gift_card_code": "Código de tarjeta de regalo", - "shop_link": "Seguir comprando", - "remaining_html": "Saldo {{ balance }}", + "shop_link": "Visitar la tienda online", "add_to_apple_wallet": "Agregar a Apple Wallet", "qr_image_alt": "Código QR: escanea para canjear la tarjeta de regalo", - "copy_code": "Copiar código", + "copy_code": "Copiar el código de la tarjeta de regalo", "expired": "Vencido", "copy_code_success": "El código se copió correctamente", - "print_gift_card": "Imprimir" + "how_to_use_gift_card": "Usar el código de la tarjeta de regalo online o el código QR en la tienda", + "expiration_date": "Caduca el {{ expires_on }}" + } + }, + "recipient": { + "form": { + "checkbox": "Quiero enviar esto como un regalo.", + "email_label": "Correo electrónico de la persona destinataria", + "email": "Correo electrónico", + "name_label": "Nombre de la persona destinataria (opcional)", + "name": "Nombre", + "message_label": "Mensaje (opcional)", + "message": "Mensaje", + "max_characters": "{{ max_chars }} caracteres máx.", + "email_label_optional_for_no_js_behavior": "Correo electrónico de la persona destinataria (opcional)" } } } diff --git a/locales/es.schema.json b/locales/es.schema.json index 6ae470f2b2a..ef9584e647c 100644 --- a/locales/es.schema.json +++ b/locales/es.schema.json @@ -382,6 +382,14 @@ "content": "Agrega una descripción de marca al pie de página de la tienda." } } + }, + "animations": { + "name": "Animaciones", + "settings": { + "animations_reveal_on_scroll": { + "label": "Revelar secciones al desplazarse" + } + } } }, "sections": { @@ -425,6 +433,46 @@ "options__4": { "label": "Extra grande" } + }, + "image_shape": { + "options__1": { + "label": "Predeterminado" + }, + "options__2": { + "label": "Arco" + }, + "options__3": { + "label": "Gota" + }, + "options__4": { + "label": "Comillas angulares izquierda" + }, + "options__5": { + "label": "Comillas angulares derecha" + }, + "options__6": { + "label": "Diamante" + }, + "options__7": { + "label": "Paralelogramo" + }, + "options__8": { + "label": "Redonda" + }, + "label": "Forma de la imagen", + "info": "Las tarjetas de estilo estándar no tienen bordes cuando la forma de una imagen está activa." + }, + "animation": { + "content": "Animaciones", + "image_behavior": { + "options__1": { + "label": "Ninguna" + }, + "options__2": { + "label": "Movimiento de ambiente" + }, + "label": "Comportamiento de la imagen" + } } }, "announcement-bar": { @@ -453,6 +501,14 @@ } } } + }, + "settings": { + "auto_rotate": { + "label": "Girar las diapositivas automáticamente" + }, + "change_slides_speed": { + "label": "Cambiar de diapositiva cada" + } } }, "collage": { @@ -848,7 +904,7 @@ }, "header__9": { "content": "Seguir en Shop", - "info": "Muestra el botón de seguimiento de tu tienda en la aplicación Shop. [Más información](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" + "info": "Para que los clientes puedan seguir tu tienda en la aplicación Shop desde la tienda, Shop Pay debe estar activado. [Más información](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" }, "enable_follow_on_shop": { "label": "Activar Seguir en Shop" @@ -890,6 +946,9 @@ }, "options__2": { "label": "Mega menú" + }, + "options__3": { + "label": "Menú lateral" } }, "mobile_layout": { @@ -904,9 +963,6 @@ "label": "Izquierda" } }, - "logo_header": { - "content": "Logo" - }, "logo_help": { "content": "Edita tu logotipo en [configuración del tema](/editor?context=theme&category=logo)." }, @@ -924,6 +980,24 @@ "options__4": { "label": "Reducir el tamaño del logo siempre" } + }, + "header__3": { + "content": "Selector de país o región" + }, + "header__4": { + "info": "Para agregar un país o una región, ve a la [configuración del mercado.](/admin/settings/markets)" + }, + "enable_country_selector": { + "label": "Activar selector de país o región" + }, + "header__5": { + "content": "Selector de idioma" + }, + "header__6": { + "info": "Para agregar un idioma, ve a tu [configuración de idiomas.](/admin/settings/languages)" + }, + "enable_language_selector": { + "label": "Activar selector de idioma" } } }, @@ -942,19 +1016,12 @@ "stack_images_on_mobile": { "label": "Apilar imágenes en móviles" }, - "adapt_height_first_image": { - "label": "Adaptar altura de sección a tamaño de primera imagen", - "info": "Sobrescribe la configuración de altura del banner de imagen cuando está seleccionada." - }, "show_text_box": { "label": "Mostrar contenedor en la computadora" }, "image_overlay_opacity": { "label": "Opacidad de la sobreposición de imagen" }, - "header": { - "content": "Diseño para móviles" - }, "show_text_below": { "label": "Mostrar contenedor en el móvil" }, @@ -1027,6 +1094,9 @@ "label": "Derecha" }, "label": "Alineación del contenido en el móvil" + }, + "mobile": { + "content": "Diseño para móviles" } }, "blocks": { @@ -1584,6 +1654,10 @@ "show_dynamic_checkout": { "label": "Mostrar botones de pago dinámico", "info": "Utilizando las formas de pago disponibles en tu tienda, los clientes ven la opción de su preferencia, como PayPal o Apple Pay. [Más información](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)" + }, + "show_gift_card_recipient": { + "label": "Mostrar el formulario de información de la persona destinataria para las tarjetas de regalo", + "info": "Opcionalmente, las tarjetas de regalo se pueden enviar directamente a una persona destinataria junto con un mensaje personal. [Más información](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields)" } } }, @@ -2343,8 +2417,7 @@ }, "video_url": { "label": "URL", - "placeholder": "Utiliza una URL de YouTube o Vimeo", - "info": "El video se reproduce en la página." + "info": "Usar URL de YouTube o Vimeo" }, "description": { "label": "Texto alternativo del video", @@ -2356,6 +2429,24 @@ }, "full_width": { "label": "Definir ancho completo en sección" + }, + "video": { + "label": "Video" + }, + "enable_video_looping": { + "label": "Reproducir video en bucle" + }, + "header__1": { + "content": "Video alojado en Shopify" + }, + "header__2": { + "content": "O incrustar video a partir de una URL" + }, + "header__3": { + "content": "Estilo" + }, + "paragraph": { + "content": "Se muestra cuando no se seleccionó ningún video alojado en Shopify." } }, "presets": { diff --git a/locales/fi.json b/locales/fi.json index f7c6f385b12..4aecd754e6c 100644 --- a/locales/fi.json +++ b/locales/fi.json @@ -42,7 +42,7 @@ "cart": { "view": "Näytä ostoskori ({{ count }})", "item_added": "Tuote lisätty ostoskoriisi", - "view_empty_cart": "Näytä ostoskorini" + "view_empty_cart": "Katso ostoskori" }, "share": { "copy_to_clipboard": "Kopioi linkki", @@ -123,7 +123,7 @@ "price": { "from_price_html": "Alkaen {{ price }}", "regular_price": "Normaalihinta", - "sale_price": "Myyntihinta", + "sale_price": "Alennushinta", "unit_price": "Yksikköhinta" }, "share": "Jaa tämä tuote", @@ -322,6 +322,13 @@ }, "page": { "title": "Sivun otsikko" + }, + "announcements": { + "previous_announcement": "Edellinen ilmoitus", + "next_announcement": "Ilmoitus", + "carousel": "Karuselli", + "announcement": "Ilmoitus", + "announcement_bar": "Ilmoituspalkki" } }, "localization": { @@ -442,17 +449,30 @@ }, "gift_cards": { "issued": { - "title": "Tässä on lahjakorttisi ({{ value }}) kauppaan {{ shop }}!", + "title": "Tässä on lahjakorttisi saldo ({{ value }}) kauppaan {{ shop }}!", "subtext": "Lahjakorttisi", "gift_card_code": "Lahjakortin koodi", - "shop_link": "Jatka ostoksia", - "remaining_html": "Jäljellä {{ balance }}", + "shop_link": "Vieraile verkkokaupassa", "add_to_apple_wallet": "Lisää Apple Walletiin", "qr_image_alt": "QR-koodi – lunasta lahjakortti skannaamalla", - "copy_code": "Kopioi koodi", + "copy_code": "Kopioi lahjakortin koodi", "expired": "Vanhentunut", "copy_code_success": "Koodin kopioiminen onnistui", - "print_gift_card": "Tulosta" + "how_to_use_gift_card": "Käytä lahjakortin koodia verkossa tai QR-koodia kaupassa", + "expiration_date": "Voimassa {{ expires_on }} asti" + } + }, + "recipient": { + "form": { + "checkbox": "Haluan lähettää tämän lahjaksi", + "email_label": "Vastaanottajan sähköpostiosoite", + "email": "Sähköposti", + "name_label": "Vastaanottajan sähköpostiosoite (valinnainen)", + "name": "Nimi", + "message_label": "Viesti (valinnainen)", + "message": "Viesti", + "max_characters": "enintään {{ max_chars }} merkkiä", + "email_label_optional_for_no_js_behavior": "Vastaanottajan sähköpostiosoite (valinnainen)" } } } diff --git a/locales/fi.schema.json b/locales/fi.schema.json index ce5c5408f3d..eb6e818f2bf 100644 --- a/locales/fi.schema.json +++ b/locales/fi.schema.json @@ -382,6 +382,14 @@ "content": "Lisää brändin kuvaus kauppasi alatunnisteeseen." } } + }, + "animations": { + "name": "Animaatiot", + "settings": { + "animations_reveal_on_scroll": { + "label": "Näytä osiot vierittämällä" + } + } } }, "sections": { @@ -425,6 +433,46 @@ "options__4": { "label": "Erittäin suuri" } + }, + "image_shape": { + "options__1": { + "label": "Oletus" + }, + "options__2": { + "label": "Kaari" + }, + "options__3": { + "label": "Möykky" + }, + "options__4": { + "label": "V-merkki vasemmalle" + }, + "options__5": { + "label": "V-merkki oikealle" + }, + "options__6": { + "label": "Timantti" + }, + "options__7": { + "label": "Suunnikas" + }, + "options__8": { + "label": "Pyörylä" + }, + "label": "Kuvan muoto", + "info": "Vakiomallisissa korteissa ei ole reunuksia, kun kuvan muoto on aktiivinen." + }, + "animation": { + "content": "Animaatiot", + "image_behavior": { + "options__1": { + "label": "Ei mitään" + }, + "options__2": { + "label": "Ympäristön liike" + }, + "label": "Kuvan käyttäytyminen" + } } }, "announcement-bar": { @@ -453,6 +501,14 @@ } } } + }, + "settings": { + "auto_rotate": { + "label": "Käännä diat automaattisesti" + }, + "change_slides_speed": { + "label": "Vaihda diat joka" + } } }, "collage": { @@ -650,7 +706,7 @@ } }, "featured-collection": { - "name": "Esittelyssä oleva kokoelma", + "name": "Esittelykokoelma", "settings": { "title": { "label": "Otsikko" @@ -749,7 +805,7 @@ } }, "presets": { - "name": "Esittelyssä oleva kokoelma" + "name": "Esittelykokoelma" } }, "footer": { @@ -848,7 +904,7 @@ }, "header__9": { "content": "Seuraa Shopissa", - "info": "Näytä myyntipaikkasi Seuraa-painike Shop-sovelluksessa. [Lisätietoja](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" + "info": "Shop Pay on otettava käyttöön, jotta asiakkaat voivat seurata kauppaasi Shop-sovelluksessa myyntipaikkasi kautta. [Lisätietoja](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" }, "enable_follow_on_shop": { "label": "Ota Seuraa Shopissa käyttöön" @@ -890,6 +946,9 @@ }, "options__2": { "label": "Mega-valikko" + }, + "options__3": { + "label": "Laatikko" } }, "mobile_layout": { @@ -904,9 +963,6 @@ "label": "Vasen" } }, - "logo_header": { - "content": "Logo" - }, "logo_help": { "content": "Muokkaa logoa [teeman asetuksissa](/editor?context=theme&category=logo)." }, @@ -924,6 +980,24 @@ "options__4": { "label": "Aina, pienennä logon kokoa" } + }, + "header__3": { + "content": "Maa-/aluevalitsin" + }, + "header__4": { + "info": "Lisää maa/alue siirtymällä [markkina-asetuksiisi.](/admin/settings/markets)" + }, + "enable_country_selector": { + "label": "Ota käyttöön maa-/aluevalitsin" + }, + "header__5": { + "content": "Kielivalitsin" + }, + "header__6": { + "info": "Lisää kieli siirtymällä [kieliasetuksiisi.](/admin/settings/languages)" + }, + "enable_language_selector": { + "label": "Ota kielivalitsin käyttöön" } } }, @@ -942,19 +1016,12 @@ "stack_images_on_mobile": { "label": "Pinoa kuvat mobiilissa" }, - "adapt_height_first_image": { - "label": "Mukauta osion korkeus ensimmäisen kuvan kokoon", - "info": "Korvaa kuvabannerin korkeusasetuksen" - }, "show_text_box": { "label": "Näytä säilö pöytäkoneella" }, "image_overlay_opacity": { "label": "Peittokuvan läpikuultavuus" }, - "header": { - "content": "Mobiiliasettelu" - }, "show_text_below": { "label": "Näytä säilö mobiililaitteessa" }, @@ -1027,6 +1094,9 @@ "label": "Oikealla" }, "label": "Mobiilisisällön tasaus" + }, + "mobile": { + "content": "Mobiilipohja" } }, "blocks": { @@ -1583,6 +1653,10 @@ "show_dynamic_checkout": { "label": "Näytä dynaamiset kassapainikkeet", "info": "Kun käytät kaupallesi saatavilla olevia maksutapoja, asiakkaat näkevät ensisijaisen vaihtoehtonsa, kuten PayPalin tai Apple Payn. [Lisätietoja](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)" + }, + "show_gift_card_recipient": { + "label": "Näytä lahjakorttituotteiden vastaanottajien tietolomake", + "info": "Lahjakorttituotteet voidaan valinnaisesti lähettää suoraan vastaanottajalle siten, että niissä on mukana henkilökohtainen viesti. [Lisätietoja](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields)" } } }, @@ -2343,8 +2417,7 @@ }, "video_url": { "label": "URL-osoite", - "placeholder": "Käytä YouTube- tai Vimeo-linkkiä", - "info": "Video toistetaan sivulla." + "info": "Käytä YouTube- tai Vimeo-linkkiä" }, "description": { "label": "Videon vaihtoehtoinen teksti", @@ -2356,6 +2429,24 @@ }, "full_width": { "label": "Tee osiosta täysleveä" + }, + "video": { + "label": "Video" + }, + "enable_video_looping": { + "label": "Toista video silmukkatoistona" + }, + "header__1": { + "content": "Shopifyn isännöimä video" + }, + "header__2": { + "content": "Tai sulauta video URL-osoitteesta" + }, + "header__3": { + "content": "Tyyli" + }, + "paragraph": { + "content": "Näytetään, kun mitään Shopifyn isännöimää videota ei ole valittu." } }, "presets": { diff --git a/locales/fr.json b/locales/fr.json index 793fca50b0a..a7ff695cdb4 100644 --- a/locales/fr.json +++ b/locales/fr.json @@ -40,9 +40,9 @@ "reset": "Effacer le terme de recherche" }, "cart": { - "view": "Afficher mon panier ({{ count }})", + "view": "Voir le panier ({{ count }})", "item_added": "Article ajouté au panier", - "view_empty_cart": "Afficher mon panier" + "view_empty_cart": "Voir le panier" }, "share": { "copy_to_clipboard": "Copier le lien", @@ -124,7 +124,7 @@ "price": { "from_price_html": "Du {{ price }}", "regular_price": "Prix habituel", - "sale_price": "Prix soldé", + "sale_price": "Prix promotionnel", "unit_price": "Prix unitaire" }, "share": "Partager ce produit", @@ -332,6 +332,13 @@ }, "page": { "title": "Titre de la page" + }, + "announcements": { + "previous_announcement": "Annonce précédente", + "next_announcement": "Annonce suivante", + "carousel": "Carrousel", + "announcement": "Annonce", + "announcement_bar": "Barre d’annonces" } }, "localization": { @@ -452,17 +459,30 @@ }, "gift_cards": { "issued": { - "title": "Voici votre carte-cadeau {{ shop }} d'une valeur de {{ value }} !", + "title": "Voici le solde de votre carte‑cadeau {{ shop }} d'une valeur de {{ value }} !", "subtext": "Votre carte-cadeau", "gift_card_code": "Code de la carte-cadeau", - "shop_link": "Continuer les achats", - "remaining_html": "Reste {{ balance }}", + "shop_link": "Visiter la boutique en ligne", "add_to_apple_wallet": "Ajouter à Apple Wallet", "qr_image_alt": "Code QR : scannez-le pour utiliser votre carte-cadeau", - "copy_code": "Copier le code", + "copy_code": "Copier le code de la carte‑cadeau", "expired": "Expiré", "copy_code_success": "Le code a bien été copié", - "print_gift_card": "Imprimer" + "how_to_use_gift_card": "Utiliser le code de la carte‑cadeau en ligne ou le code QR en boutique", + "expiration_date": "Expire le {{ expires_on }}" + } + }, + "recipient": { + "form": { + "checkbox": "Je veux envoyer ce produit comme cadeau", + "email_label": "E‑mail du destinataire", + "email": "E‑mail", + "name_label": "Nom du destinataire (facultatif)", + "name": "Nom", + "message_label": "Message (facultatif)", + "message": "Message", + "max_characters": "{{ max_chars }} caractères au maximum", + "email_label_optional_for_no_js_behavior": "E‑mail du destinataire (facultatif)" } } } diff --git a/locales/fr.schema.json b/locales/fr.schema.json index dcc2dd0d7b9..9aee5d88a71 100644 --- a/locales/fr.schema.json +++ b/locales/fr.schema.json @@ -245,10 +245,10 @@ "label": "Position sur les cartes" }, "sale_badge_color_scheme": { - "label": "Combinaison de couleurs du badge de vente" + "label": "Nuancier de couleurs du badge de vente" }, "sold_out_badge_color_scheme": { - "label": "Combinaison de couleurs du badge de rupture de stock" + "label": "Nuancier de couleurs du badge de rupture de stock" } } }, @@ -382,6 +382,14 @@ "content": "Ajoutez une description de votre marque au pied de page de votre boutique." } } + }, + "animations": { + "name": "Animations", + "settings": { + "animations_reveal_on_scroll": { + "label": "Afficher les sections lors du défilement" + } + } } }, "sections": { @@ -408,8 +416,8 @@ "inverse": { "label": "Inverser" }, - "label": "Combinaison de couleurs", - "has_cards_info": "Pour modifier le schéma de la carte de couleur, mettez à jour les paramètres de votre thème." + "label": "Nuancier de couleurs", + "has_cards_info": "Pour modifier le nuancier de couleur de la carte, mettez à jour les paramètres de votre thème." }, "heading_size": { "label": "Taille du titre", @@ -425,6 +433,46 @@ "options__4": { "label": "Très grand" } + }, + "image_shape": { + "options__1": { + "label": "Forme par défaut" + }, + "options__2": { + "label": "Arche" + }, + "options__3": { + "label": "Indistincte" + }, + "options__4": { + "label": "Chevron gauche" + }, + "options__5": { + "label": "Chevron droite" + }, + "options__6": { + "label": "Losange" + }, + "options__7": { + "label": "Parallélogramme" + }, + "options__8": { + "label": "Cercle" + }, + "label": "Forme d’image", + "info": "Les cartes de style standard n’ont pas de bordures lorsqu’une forme d’image est active." + }, + "animation": { + "content": "Animations", + "image_behavior": { + "options__1": { + "label": "Aucun" + }, + "options__2": { + "label": "Mouvement ambiant" + }, + "label": "Comportement de l’image" + } } }, "announcement-bar": { @@ -453,6 +501,14 @@ } } } + }, + "settings": { + "auto_rotate": { + "label": "Rotation automatique des diapositives" + }, + "change_slides_speed": { + "label": "Changer de diapositive toutes les" + } } }, "collage": { @@ -848,7 +904,7 @@ }, "header__9": { "content": "Suivre sur Shop", - "info": "Affichez le bouton de suivi de votre boutique en ligne sur l'application Shop. [En savoir plus](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" + "info": "Pour autoriser les clients à suivre votre boutique sur l’application Shop depuis votre boutique en ligne, Shop Pay doit être activé. [En savoir plus](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" }, "enable_follow_on_shop": { "label": "Activer Suivre sur Shop" @@ -890,6 +946,9 @@ }, "options__2": { "label": "Méga menu" + }, + "options__3": { + "label": "Tiroir" } }, "mobile_layout": { @@ -904,9 +963,6 @@ "label": "Gauche" } }, - "logo_header": { - "content": "Logo" - }, "logo_help": { "content": "Modifiez votre logo dans les [paramètres du thème](/editor?context=theme&category=logo)." }, @@ -924,6 +980,24 @@ "options__4": { "label": "Réduisez toujours la taille du logo" } + }, + "header__3": { + "content": "Sélecteur de pays/région" + }, + "header__4": { + "info": "Pour ajouter un pays/une région, accédez à [market settings.](/admin/settings/markets)" + }, + "enable_country_selector": { + "label": "Activer le sélecteur de pays/région" + }, + "header__5": { + "content": "Sélecteur de langue" + }, + "header__6": { + "info": "Pour ajouter une langue, accédez à [language settings.](/admin/settings/languages)" + }, + "enable_language_selector": { + "label": "Activer le sélecteur de langue" } } }, @@ -942,19 +1016,12 @@ "stack_images_on_mobile": { "label": "Empiler des images sur un mobile" }, - "adapt_height_first_image": { - "label": "Adapter la hauteur de la section à la taille de la première image", - "info": "Remplace le paramètre de hauteur de la bannière avec image lorsqu'il est activé." - }, "show_text_box": { "label": "Afficher le conteneur sur le bureau" }, "image_overlay_opacity": { "label": "Opacité de la superposition d'images" }, - "header": { - "content": "Mise en page mobile" - }, "show_text_below": { "label": "Afficher le conteneur sur le mobile" }, @@ -1027,6 +1094,9 @@ "label": "Droite" }, "label": "Alignement du contenu sur mobile" + }, + "mobile": { + "content": "Mise en page sur mobile" } }, "blocks": { @@ -1583,6 +1653,10 @@ "show_dynamic_checkout": { "label": "Afficher les boutons de paiement dynamique", "info": "En utilisant les méthodes de paiement disponibles sur votre boutique, les clients voient leur option préférée, comme PayPal ou Apple Pay. [En savoir plus](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)" + }, + "show_gift_card_recipient": { + "label": "Afficher le formulaire d’information sur le destinataire pour les cartes‑cadeaux en tant que produit", + "info": "Les cartes‑cadeaux en tant que produits peuvent être envoyées directement au destinataire, accompagnées d’un message personnel. [En savoir plus](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields)" } } }, @@ -2343,8 +2417,7 @@ }, "video_url": { "label": "URL", - "placeholder": "Utiliser une URL YouTube ou Vimeo", - "info": "La vidéo est lue sur la page." + "info": "Utilisez une URL YouTube ou Vimeo" }, "description": { "label": "Texte alternatif de la vidéo", @@ -2356,6 +2429,24 @@ }, "full_width": { "label": "Rendre la section pleine largeur" + }, + "video": { + "label": "Vidéo" + }, + "enable_video_looping": { + "label": "Lire la vidéo en boucle" + }, + "header__1": { + "content": "Vidéo hébergée par Shopify" + }, + "header__2": { + "content": "Ou vidéo intégrée à partir d’une URL" + }, + "header__3": { + "content": "Style" + }, + "paragraph": { + "content": "Montre quand aucune vidéo hébergée par Shopify n’est sélectionnée." } }, "presets": { @@ -2818,7 +2909,7 @@ } }, "container_color_scheme": { - "label": "Combinaison de couleurs du conteneur", + "label": "Nuancier de couleurs du conteneur", "info": "Visible lorsque la Mise en page est définie comme conteneur de Ligne ou de Section." }, "open_first_collapsible_row": { @@ -3190,7 +3281,7 @@ "info": "Le placement est automatiquement optimisé pour les mobiles." }, "container_color_scheme": { - "label": "Combinaison de couleurs du conteneur" + "label": "Nuancier de couleurs du conteneur" }, "mobile_content_alignment": { "options__1": { diff --git a/locales/hr-HR.json b/locales/hr-HR.json index 08ab716cb05..6179f34251d 100644 --- a/locales/hr-HR.json +++ b/locales/hr-HR.json @@ -40,9 +40,9 @@ "reset": "Izbriši pojam za pretraživanje" }, "cart": { - "view": "Prikaži moju košaricu ({{ count }})", + "view": "Prikaži košaricu ({{ count }})", "item_added": "Artikl je dodan u vašu košaricu", - "view_empty_cart": "Prikaži moju košaricu" + "view_empty_cart": "Prikaži košaricu" }, "share": { "copy_to_clipboard": "Kopiraj poveznicu", @@ -332,6 +332,13 @@ }, "page": { "title": "Naslov stranice" + }, + "announcements": { + "previous_announcement": "Prethodna objava", + "next_announcement": "Sljedeća objava", + "carousel": "Vrtuljak", + "announcement": "Objava", + "announcement_bar": "Traka za objave" } }, "localization": { @@ -452,17 +459,30 @@ }, "gift_cards": { "issued": { - "title": "Na dar dobivate poklon-karticu od {{ value }} za trgovinu {{ shop }}!", + "title": "Poklanjamo vam darovnu karticu u vrijednosti od {{ value }} za trgovinu {{ shop }}!", "subtext": "Vaša poklon-kartica", "gift_card_code": "Kod poklon-kartice", - "shop_link": "Nastavite s kupovinom", - "remaining_html": "Preostali saldo: {{ balance }}", + "shop_link": "Posjeti internetsku trgovinu", "add_to_apple_wallet": "Dodaj u Apple Wallet", "qr_image_alt": "QR kod – skenirajte ga kako biste iskoristili poklon-karticu", - "copy_code": "Kopiraj kod", + "copy_code": "Kopiraj kod poklon-kartice", "expired": "Isteklo", "copy_code_success": "Kod je uspješno kopiran", - "print_gift_card": "Ispiši" + "how_to_use_gift_card": "Upotrijebite kod poklon-kartice na internetu ili QR kod u trgovini", + "expiration_date": "Istječe {{ expires_on }}" + } + }, + "recipient": { + "form": { + "checkbox": "Želim ovo poslati kao poklon", + "email_label": "Adresa e-pošte primatelja", + "email": "Adresa e-pošte", + "name_label": "Ime primatelja (nije obavezno)", + "name": "Ime", + "message_label": "Poruka (nije obavezno)", + "message": "Poruka", + "max_characters": "Najveći dopušteni broj znakova: {{ max_chars }}", + "email_label_optional_for_no_js_behavior": "Adresa e-pošte primatelja (nije obavezno)" } } } diff --git a/locales/hu.json b/locales/hu.json index a2943aee5f8..562c09f381a 100644 --- a/locales/hu.json +++ b/locales/hu.json @@ -322,6 +322,13 @@ }, "page": { "title": "Oldal címe" + }, + "announcements": { + "previous_announcement": "Előző közlemény", + "next_announcement": "Következő közlemény", + "carousel": "Forgótár", + "announcement": "Közlemény", + "announcement_bar": "Közleménysáv" } }, "localization": { @@ -442,17 +449,30 @@ }, "gift_cards": { "issued": { - "title": "Íme a(z) {{ shop }} boltban levásárolható, {{ value }} értékű ajándékkártyád!", + "title": "Íme a(z) {{ shop }} üzletben levásárolható, {{ value }} értékű ajándékkártyád!", "subtext": "Ajándékkártya", "gift_card_code": "Ajándékkártya kódja", - "shop_link": "Vásárlás folytatása", - "remaining_html": "Egyenleg: {{ balance }}", + "shop_link": "Webáruház megnyitása", "add_to_apple_wallet": "Hozzáadás az Apple Wallethoz", "qr_image_alt": "Ezt a QR-kódot beszkennelve beválthatod az ajándékkártyát.", - "copy_code": "Kód másolása", + "copy_code": "Ajándékkártya kódjának másolása", "expired": "Lejárt", "copy_code_success": "Sikeres volt a kód másolása", - "print_gift_card": "Nyomtatás" + "how_to_use_gift_card": "Az ajándékkártya kódja online, a QR-kód pedig az üzletben használható fel", + "expiration_date": "Lejárat dátuma: {{ expires_on }}" + } + }, + "recipient": { + "form": { + "checkbox": "Ajándékba szeretném küldeni", + "email_label": "Címzett e-mail-címe", + "email": "E-mail-cím", + "name_label": "Címzett neve (nem kötelező)", + "name": "Név", + "message_label": "Üzenet (nem kötelező)", + "message": "Üzenet", + "max_characters": "Maximum {{ max_chars }} karakter", + "email_label_optional_for_no_js_behavior": "Címzett e-mail-címe (nem kötelező)" } } } diff --git a/locales/id.json b/locales/id.json index 873ed16d561..f79ad1ce883 100644 --- a/locales/id.json +++ b/locales/id.json @@ -40,9 +40,9 @@ "reset": "Hapus kata kunci pencarian" }, "cart": { - "view": "Lihat keranjang saya ({{ count }})", + "view": "Lihat keranjang ({{ count }})", "item_added": "Item ditambahkan ke keranjang Anda", - "view_empty_cart": "Lihat keranjang saya" + "view_empty_cart": "Lihat keranjang" }, "share": { "copy_to_clipboard": "Salin tautan", @@ -117,7 +117,7 @@ "decrease": "Kurangi jumlah untuk {{ product }}", "minimum_of": "Minimum {{ quantity }}", "maximum_of": "Maksimum {{ quantity }}", - "multiples_of": "Kelipatan {{ quantity }}", + "multiples_of": "Nilai peningkatan {{ quantity }}", "in_cart_html": "{{ quantity }} di keranjang" }, "price": { @@ -322,6 +322,13 @@ }, "page": { "title": "Judul halaman" + }, + "announcements": { + "previous_announcement": "Pengumuman sebelumnya", + "next_announcement": "Pengumuman selanjutnya", + "carousel": "Carousel", + "announcement": "Pengumuman", + "announcement_bar": "Bilah pengumuman" } }, "localization": { @@ -442,17 +449,30 @@ }, "gift_cards": { "issued": { - "title": "Ini dia voucher Anda, senilai {{ value }} untuk {{ shop }}!", + "title": "Ini dia voucher senilai {{ value }} Anda untuk {{ shop }}!", "subtext": "Voucher Anda", "gift_card_code": "Kode voucher", - "shop_link": "Lanjutkan belanja", - "remaining_html": "Sisa {{ balance }}", + "shop_link": "Kunjungi toko online", "add_to_apple_wallet": "Tambahkan ke Apple Wallet", "qr_image_alt": "Kode QR — pindai untuk menukarkan voucher", - "copy_code": "Salin kode", + "copy_code": "Salin kode voucher", "expired": "Kedaluwarsa", "copy_code_success": "Kode berhasil disalin", - "print_gift_card": "Cetak" + "how_to_use_gift_card": "Gunakan kode voucher secara online atau kode QR di toko", + "expiration_date": "Kedaluwarsa pada {{ expires_on }}" + } + }, + "recipient": { + "form": { + "checkbox": "Saya ingin mengirim ini sebagai hadiah", + "email_label": "Email penerima", + "email": "Email", + "name_label": "Nama penerima (opsional)", + "name": "Nama", + "message_label": "Pesan (opsional)", + "message": "Pesan", + "max_characters": "Maksimum {{ max_chars }} karakter", + "email_label_optional_for_no_js_behavior": "Email penerima (opsional)" } } } diff --git a/locales/it.json b/locales/it.json index 61f4748b65b..7785952e65e 100644 --- a/locales/it.json +++ b/locales/it.json @@ -332,6 +332,13 @@ }, "page": { "title": "Titolo pagina" + }, + "announcements": { + "previous_announcement": "Annuncio precedente", + "next_announcement": "Annuncio successivo", + "carousel": "Carousel", + "announcement": "Annuncio", + "announcement_bar": "Barra degli annunci" } }, "localization": { @@ -452,17 +459,30 @@ }, "gift_cards": { "issued": { - "title": "Ecco il tuo buono regalo dal valore di {{ value }} per {{ shop }}!", + "title": "Ecco il saldo del tuo buono regalo dal valore di {{ value }} per {{ shop }}!", "subtext": "Il tuo buono regalo", "gift_card_code": "Codice del buono regalo", - "shop_link": "Continua lo shopping", - "remaining_html": "Saldo residuo: {{ balance }}", + "shop_link": "Visita il negozio online", "add_to_apple_wallet": "Aggiungi a Apple Wallet", "qr_image_alt": "Codice QR — scansiona per riscattare il buono regalo", - "copy_code": "Copia codice", + "copy_code": "Copia codice del buono regalo", "expired": "Scaduto", "copy_code_success": "Codice copiato correttamente", - "print_gift_card": "Stampa" + "how_to_use_gift_card": "Utilizza il codice del buono regalo online o il codice QR in negozio", + "expiration_date": "Scade il giorno {{ expires_on }}" + } + }, + "recipient": { + "form": { + "checkbox": "Voglio inviarlo come regalo", + "email_label": "Email destinatario", + "email": "email", + "name_label": "Nome destinatario (facoltativo)", + "name": "Nome", + "message_label": "Messaggio (facoltativo)", + "message": "Messaggio", + "max_characters": "Massimo {{ max_chars }} caratteri", + "email_label_optional_for_no_js_behavior": "Email destinatario (facoltativa)" } } } diff --git a/locales/it.schema.json b/locales/it.schema.json index c05918b0991..f722309f310 100644 --- a/locales/it.schema.json +++ b/locales/it.schema.json @@ -382,6 +382,14 @@ "content": "Aggiungi una descrizione del tuo brand al footer del negozio." } } + }, + "animations": { + "name": "Animazioni", + "settings": { + "animations_reveal_on_scroll": { + "label": "Mostra sezioni durante lo scorrimento" + } + } } }, "sections": { @@ -425,6 +433,46 @@ "options__4": { "label": "Extra large" } + }, + "image_shape": { + "options__1": { + "label": "Predefinito" + }, + "options__2": { + "label": "Arco" + }, + "options__3": { + "label": "Goccia" + }, + "options__4": { + "label": "Parentesi ad angolo a sinistra" + }, + "options__5": { + "label": "Parentesi ad angolo a destra" + }, + "options__6": { + "label": "Diamante" + }, + "options__7": { + "label": "Parallelogramma" + }, + "options__8": { + "label": "Cerchio" + }, + "label": "Forma immagine", + "info": "Le schede con stile Standard e una Forma immagine selezionata non hanno bordi." + }, + "animation": { + "content": "Animazioni", + "image_behavior": { + "options__1": { + "label": "Nessuno" + }, + "options__2": { + "label": "Scorrimento lento" + }, + "label": "Comportamento delle immagini" + } } }, "announcement-bar": { @@ -453,6 +501,14 @@ } } } + }, + "settings": { + "auto_rotate": { + "label": "Ruota slide automaticamente" + }, + "change_slides_speed": { + "label": "Cambia slide ogni" + } } }, "collage": { @@ -848,7 +904,7 @@ }, "header__9": { "content": "Segui su Shop", - "info": "Mostra il pulsante segui per la tua vetrina virtuale nell'app Shop. [Maggiori informazioni](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" + "info": "Shop Pay deve essere abilitato per consentire ai clienti di seguire il tuo negozio sull'app Shop dalla tua vetrina virtuale. [Maggiori informazioni](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" }, "enable_follow_on_shop": { "label": "Abilita Segui su Shop" @@ -890,6 +946,9 @@ }, "options__2": { "label": "Mega menu" + }, + "options__3": { + "label": "Finestra" } }, "mobile_layout": { @@ -904,9 +963,6 @@ "label": "A sinistra" } }, - "logo_header": { - "content": "Logo" - }, "logo_help": { "content": "Modifica il tuo logo nelle [impostazioni tema](/editor?context=theme&category=logo)." }, @@ -924,6 +980,24 @@ "options__4": { "label": "Sempre, riduci dimensione logo" } + }, + "header__3": { + "content": "Selettore paese/area geografica" + }, + "header__4": { + "info": "Per aggiungere un paese/un'area geografica, vai alle [impostazioni di mercato.](/admin/settings/markets)" + }, + "enable_country_selector": { + "label": "Abilita selettore paese/area geografica" + }, + "header__5": { + "content": "Selettore lingua" + }, + "header__6": { + "info": "Per aggiungere una lingua, vai alle [impostazioni lingua.](/admin/settings/languages)" + }, + "enable_language_selector": { + "label": "Abilita selettore lingua" } } }, @@ -942,19 +1016,12 @@ "stack_images_on_mobile": { "label": "Elenca immagini su dispositivo mobile" }, - "adapt_height_first_image": { - "label": "Adatta l'altezza della sezione alle dimensioni della prima immagine", - "info": "Se si effettua la selezione, sovrascrive le impostazioni dell'altezza del banner immagine." - }, "show_text_box": { "label": "Mostra contenitore sul desktop" }, "image_overlay_opacity": { "label": "Opacità della sovrapposizione immagine" }, - "header": { - "content": "Layout dispositivo mobile" - }, "show_text_below": { "label": "Mostra contenitore su dispositivo mobile" }, @@ -1027,6 +1094,9 @@ "label": "A destra" }, "label": "Allineamento contenuto su dispositivi mobili" + }, + "mobile": { + "content": "Layout dispositivo mobile" } }, "blocks": { @@ -1584,6 +1654,10 @@ "show_dynamic_checkout": { "label": "Mostra pulsanti di check-out dinamico", "info": "Utilizzando i metodi di pagamento disponibili sul tuo negozio, i clienti vedranno la propria opzione preferita, ad esempio PayPal o Apple Pay. [Maggiori informazioni](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)" + }, + "show_gift_card_recipient": { + "label": "Mostra il modulo informazioni del destinatario per i buoni regalo", + "info": "I buoni regalo possono essere inviati direttamente al destinatario con un messaggio personale. [Maggiori informazioni](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields)" } } }, @@ -2343,8 +2417,7 @@ }, "video_url": { "label": "URL", - "placeholder": "Utilizza un URL YouTube o Vimeo", - "info": "Il video viene riprodotto nella pagina." + "info": "Utilizza un URL YouTube o Vimeo" }, "description": { "label": "Testo alternativo del video", @@ -2356,6 +2429,24 @@ }, "full_width": { "label": "Rendi sezione a larghezza intera" + }, + "video": { + "label": "Video" + }, + "enable_video_looping": { + "label": "Riproduci il video in loop" + }, + "header__1": { + "content": "Video ospitato da Shopify" + }, + "header__2": { + "content": "Oppure incorpora il video da URL" + }, + "header__3": { + "content": "Stile" + }, + "paragraph": { + "content": "Viene mostrato quando non viene selezionato nessun video ospitato da Shopify." } }, "presets": { diff --git a/locales/ja.json b/locales/ja.json index 1e84f05bc1a..4467a6c2577 100644 --- a/locales/ja.json +++ b/locales/ja.json @@ -322,6 +322,13 @@ }, "page": { "title": "ページタイトル" + }, + "announcements": { + "previous_announcement": "前回のお知らせ", + "next_announcement": "次回のお知らせ", + "carousel": "カルーセル", + "announcement": "お知らせ", + "announcement_bar": "お知らせバー" } }, "localization": { @@ -442,17 +449,30 @@ }, "gift_cards": { "issued": { - "title": "{{ shop }}で利用可能な{{ value }}のギフトカードです。", + "title": "{{ shop }}で利用可能な{{ value }}のギフトカードの残高です。", "subtext": "あなたのギフトカード", "gift_card_code": "ギフトカードコード", - "shop_link": "買い物を続ける", - "remaining_html": "残高: {{ balance }}", + "shop_link": "オンラインストアにアクセスする", "add_to_apple_wallet": "Apple Walletに追加する", "qr_image_alt": "QRコード: スキャンしてギフトカードにクーポンを使う", - "copy_code": "コードをコピーする", + "copy_code": "ギフトカードコードをコピーする", "expired": "期限切れ", "copy_code_success": "コードは正常にコピーされました", - "print_gift_card": "印刷する" + "how_to_use_gift_card": "オンラインではギフトカードコード、実店舗ではQRコードを使用する", + "expiration_date": "{{ expires_on }}に期限が切れます" + } + }, + "recipient": { + "form": { + "checkbox": "ギフトとしてこれを送る", + "email_label": "受信者のメール", + "email": "メール", + "name_label": "受信者の名前 (任意）", + "name": "名前", + "message_label": "メッセージ (任意)", + "message": "メッセージ", + "max_characters": "最大{{ max_chars }}文字", + "email_label_optional_for_no_js_behavior": "受信者のメール (任意）" } } } diff --git a/locales/ja.schema.json b/locales/ja.schema.json index e44ced458cf..2f208c17813 100644 --- a/locales/ja.schema.json +++ b/locales/ja.schema.json @@ -382,6 +382,14 @@ "content": "ブランドの説明をストアのフッターに追加します。" } } + }, + "animations": { + "name": "アニメーション", + "settings": { + "animations_reveal_on_scroll": { + "label": "スクロールでセクションを表示する" + } + } } }, "sections": { @@ -425,6 +433,46 @@ "options__4": { "label": "特大" } + }, + "image_shape": { + "options__1": { + "label": "デフォルト" + }, + "options__2": { + "label": "アーチ" + }, + "options__3": { + "label": "塊" + }, + "options__4": { + "label": "左向き山形印" + }, + "options__5": { + "label": "右向き山形印" + }, + "options__6": { + "label": "ダイヤモンド" + }, + "options__7": { + "label": "平行四辺形" + }, + "options__8": { + "label": "丸" + }, + "label": "画像の形状", + "info": "標準スタイルのカードには、画像の形状が有効な場合、ボーダーがありません。" + }, + "animation": { + "content": "アニメーション", + "image_behavior": { + "options__1": { + "label": "なし" + }, + "options__2": { + "label": "周囲の挙動" + }, + "label": "画像の挙動" + } } }, "announcement-bar": { @@ -453,6 +501,14 @@ }, "name": "告知" } + }, + "settings": { + "auto_rotate": { + "label": "スライドの自動切り替え" + }, + "change_slides_speed": { + "label": "スライドを変更する間隔" + } } }, "collage": { @@ -848,7 +904,7 @@ }, "header__9": { "content": "Shopでフォロー", - "info": "Shop アプリのストアフロントで、フォローボタンを表示します。[詳しくはこちら](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" + "info": "お客様がストアフロントからShopアプリでストアをフォローできるようにするには、Shop Payを有効にする必要があります。[詳しくはこちら](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" }, "enable_follow_on_shop": { "label": "Shopでフォローを有効にする" @@ -890,6 +946,9 @@ }, "options__2": { "label": "メガメニュー" + }, + "options__3": { + "label": "ドロワー" } }, "mobile_layout": { @@ -904,9 +963,6 @@ "label": "左" } }, - "logo_header": { - "content": "ロゴ" - }, "logo_help": { "content": "[テーマ設定]](/editor?context=theme&category=logo) でロゴを編集する" }, @@ -924,6 +980,24 @@ "options__4": { "label": "常にロゴのサイズを小さくする" } + }, + "header__3": { + "content": "国/地域セレクター" + }, + "header__4": { + "info": "国/地域を追加するには、[マーケット設定](/admin/settings/markets) に移動します" + }, + "enable_country_selector": { + "label": "国/地域セレクターを有効にする" + }, + "header__5": { + "content": "言語セレクター" + }, + "header__6": { + "info": "言語を追加するには、[言語設定](/admin/settings/languages) に移動します" + }, + "enable_language_selector": { + "label": "言語セレクターを有効にする" } } }, @@ -942,19 +1016,12 @@ "stack_images_on_mobile": { "label": "モバイルで画像を重ねる" }, - "adapt_height_first_image": { - "label": "セクションの高さを最初の画像サイズに合わせる", - "info": "チェックすると、画像バナーの高さ設定が上書きされます。" - }, "show_text_box": { "label": "デスクトップ上にコンテナを表示" }, "image_overlay_opacity": { "label": "画像のオーバーレイ不透明率" }, - "header": { - "content": "モバイルのレイアウト" - }, "show_text_below": { "label": "モバイル上にコンテナを表示" }, @@ -1027,6 +1094,9 @@ "label": "右" }, "label": "モバイルのコンテンツアライメント" + }, + "mobile": { + "content": "モバイルのレイアウト" } }, "blocks": { @@ -1574,6 +1644,10 @@ "show_dynamic_checkout": { "label": "動的チェックアウトボタンを表示する", "info": "ストアで利用可能な決済方法を使用すると、お客様にはPayPalやApple Payなど、希望のオプションが表示されます。[もっと詳しく](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)" + }, + "show_gift_card_recipient": { + "label": "ギフトカード商品の受取人情報フォームを表示する", + "info": "ギフトカード商品は、オプションで、個人的なメッセージとともに受取人に直接送信できます。[詳しくはこちら](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields)" } }, "name": "購入ボタン" @@ -2343,8 +2417,7 @@ }, "video_url": { "label": "URL", - "placeholder": "YouTubeやVimeoのURLを使う", - "info": "ページ内で動画を再生します。" + "info": "YouTubeやVimeoのURLを使う" }, "description": { "label": "動画の代替テキスト", @@ -2356,6 +2429,24 @@ }, "full_width": { "label": "セクションを全幅にする" + }, + "video": { + "label": "ビデオ" + }, + "enable_video_looping": { + "label": "ビデオをループ再生する" + }, + "header__1": { + "content": "Shopifyがホストするビデオ" + }, + "header__2": { + "content": "または、URLからビデオを埋め込む" + }, + "header__3": { + "content": "スタイル" + }, + "paragraph": { + "content": "Shopifyがホストするビデオが選択されていない場合に表示されます。" } }, "presets": { diff --git a/locales/ko.json b/locales/ko.json index 5fdabc81a25..0ee0cdaad9d 100644 --- a/locales/ko.json +++ b/locales/ko.json @@ -40,9 +40,9 @@ "reset": "검색어 지우기" }, "cart": { - "view": "내 카트 보기({{ count }}개)", + "view": "카트 보기({{ count }})", "item_added": "카트에 추가된 품목", - "view_empty_cart": "내 카트 보기" + "view_empty_cart": "카트 보기" }, "share": { "copy_to_clipboard": "링크 복사", @@ -322,6 +322,13 @@ }, "page": { "title": "페이지 제목" + }, + "announcements": { + "previous_announcement": "이전 공지", + "next_announcement": "다음 공지", + "carousel": "캐러셀", + "announcement": "공지", + "announcement_bar": "공지 표시줄" } }, "localization": { @@ -442,17 +449,30 @@ }, "gift_cards": { "issued": { - "title": "다음은 {{ shop }}의 {{ value }} 기프트 카드입니다.", + "title": "다음은 {{ shop }}의 {{ value }} 기프트 카드 잔액입니다.", "subtext": "기프트 카드", "gift_card_code": "기프트 카드 코드", - "shop_link": "쇼핑 계속하기", - "remaining_html": "남은 금액: {{ balance }}", + "shop_link": "온라인 스토어 방문", "add_to_apple_wallet": "Apple Wallet에 추가", "qr_image_alt": "QR 코드 — 스캔하여 기프트 카드 사용", - "copy_code": "코드 복사", + "copy_code": "기프트 카드 코드 복사", "expired": "만료됨", "copy_code_success": "코드 복사 완료", - "print_gift_card": "인쇄" + "how_to_use_gift_card": "온라인 기프트 카드 코드 또는 매장 내 QR 코드 사용", + "expiration_date": "만료: {{ expires_on }}" + } + }, + "recipient": { + "form": { + "checkbox": "선물로 보내고 싶습니다.", + "email_label": "수신자 이메일", + "email": "이메일", + "name_label": "수신자 이름(선택 사항)", + "name": "이름", + "message_label": "메시지(선택 사항)", + "message": "메시지", + "max_characters": "최대 {{ max_chars }}자", + "email_label_optional_for_no_js_behavior": "수신자 이메일(선택 사항)" } } } diff --git a/locales/ko.schema.json b/locales/ko.schema.json index 0a63387c822..3181fc52d66 100644 --- a/locales/ko.schema.json +++ b/locales/ko.schema.json @@ -382,6 +382,14 @@ "content": "스토어의 바닥글에 브랜드 설명을 추가하세요." } } + }, + "animations": { + "name": "애니메이션", + "settings": { + "animations_reveal_on_scroll": { + "label": "스크롤 시 섹션 표시" + } + } } }, "sections": { @@ -425,6 +433,46 @@ "options__4": { "label": "특대" } + }, + "image_shape": { + "options__1": { + "label": "기본" + }, + "options__2": { + "label": "아치" + }, + "options__3": { + "label": "블랍" + }, + "options__4": { + "label": "왼쪽 방향 표시" + }, + "options__5": { + "label": "오른쪽 방향 표시" + }, + "options__6": { + "label": "다이아몬드" + }, + "options__7": { + "label": "평행사변형" + }, + "options__8": { + "label": "원형" + }, + "label": "이미지 모양", + "info": "이미지 모양이 활성화되어 있으면 스타일이 표준인 카드에는 테두리가 없습니다." + }, + "animation": { + "content": "애니메이션", + "image_behavior": { + "options__1": { + "label": "없음" + }, + "options__2": { + "label": "잔잔한 움직임" + }, + "label": "이미지 동작" + } } }, "announcement-bar": { @@ -453,6 +501,14 @@ }, "name": "공지" } + }, + "settings": { + "auto_rotate": { + "label": "슬라이드 자동 회전" + }, + "change_slides_speed": { + "label": "슬라이드 변경 간격" + } } }, "collage": { @@ -848,7 +904,7 @@ }, "header__9": { "content": "Shop에서 팔로우", - "info": "Shop 앱에서 상점 팔로우 버튼을 표시합니다. [자세히 알아보기](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" + "info": "고객이 상점에서 Shop 앱의 스토어를 팔로우할 수 있도록 하려면 Shop Pay를 활성화해야 합니다. [자세히 알아보기](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" }, "enable_follow_on_shop": { "label": "Shop에서 팔로우 사용" @@ -890,6 +946,9 @@ }, "options__2": { "label": "메가 메뉴" + }, + "options__3": { + "label": "서랍" } }, "mobile_layout": { @@ -904,9 +963,6 @@ "label": "왼쪽" } }, - "logo_header": { - "content": "로고" - }, "logo_help": { "content": "[테마 설정](/editor?context=theme&category=logo)에서 로고를 편집합니다." }, @@ -924,6 +980,24 @@ "options__4": { "label": "항상, 로고 크기 축소" } + }, + "header__3": { + "content": "국가/지역 선택기" + }, + "header__4": { + "info": "국가/지역을 추가하려면 [마켓 설정](/admin/settings/markets)으로 이동하십시오." + }, + "enable_country_selector": { + "label": "국가/지역 선택기 사용" + }, + "header__5": { + "content": "언어 선택기" + }, + "header__6": { + "info": "언어를 추가하려면 [언어 설정](/admin/settings/languages)으로 이동하십시오." + }, + "enable_language_selector": { + "label": "언어 선택기 사용" } } }, @@ -942,19 +1016,12 @@ "stack_images_on_mobile": { "label": "모바일 스택 이미지" }, - "adapt_height_first_image": { - "label": "첫 번째 이미지에 섹션 높이 맞추기", - "info": "확인란을 선택하면 이미지 배너 높이 설정을 덮어씁니다." - }, "show_text_box": { "label": "데스크톱에 컨테이너 표시" }, "image_overlay_opacity": { "label": "이미지 오버레이 투명도" }, - "header": { - "content": "모바일 레이아웃" - }, "show_text_below": { "label": "모바일에서 컨테이너 표시" }, @@ -1027,6 +1094,9 @@ "label": "오른쪽" }, "label": "모바일 콘텐츠 정렬" + }, + "mobile": { + "content": "모바일 레이아웃" } }, "blocks": { @@ -1574,6 +1644,10 @@ "show_dynamic_checkout": { "label": "동적 결제 버튼 표시", "info": "스토어에서 사용 가능한 결제 방법을 사용하면 고객이 PayPal 또는 ApplePay처럼 원하는 옵션을 볼 수 있습니다. [자세히 알아보기](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)" + }, + "show_gift_card_recipient": { + "label": "기프트 카드 제품의 수취인 정보 양식 표시", + "info": "기프트 카드 제품을 개인 메시지와 함께 선택적으로 수신자에게 직접 전송할 수 있습니다. [자세히 알아보기](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields)" } }, "name": "구매 버튼" @@ -2343,8 +2417,7 @@ }, "video_url": { "label": "URL", - "placeholder": "YouTube 또는 Vimeo URL 사용", - "info": "이 페이지에 동영상이 재생됩니다." + "info": "YouTube 또는 Vimeo URL 사용" }, "description": { "label": "동영상 대체 텍스트", @@ -2356,6 +2429,24 @@ }, "full_width": { "label": "섹션을 전체 폭 사용" + }, + "video": { + "label": "동영상" + }, + "enable_video_looping": { + "label": "동영상 반복 재생" + }, + "header__1": { + "content": "Shopify 호스팅 동영상" + }, + "header__2": { + "content": "또는 URL의 동영상 포함" + }, + "header__3": { + "content": "스타일" + }, + "paragraph": { + "content": "Shopify 호스팅 동영상이 선택되지 않으면 표시됩니다." } }, "presets": { diff --git a/locales/lt-LT.json b/locales/lt-LT.json index 798fb2a265c..9f2f1c668bb 100644 --- a/locales/lt-LT.json +++ b/locales/lt-LT.json @@ -40,7 +40,7 @@ "reset": "Išvalyti paieškos terminą" }, "cart": { - "view": "Peržiūrėti mano krepšelį ({{ count }})", + "view": "Peržiūrėti krepšelį ({{ count }})", "item_added": "Prekė įdėta į jūsų krepšelį", "view_empty_cart": "Peržiūrėti krepšelį" }, @@ -342,6 +342,13 @@ }, "page": { "title": "Puslapio pavadinimas" + }, + "announcements": { + "previous_announcement": "Ankstesnis skelbimas", + "next_announcement": "Kitas skelbimas", + "carousel": "Karuselė", + "announcement": "Skelbimas", + "announcement_bar": "Skelbimo juosta" } }, "localization": { @@ -462,17 +469,30 @@ }, "gift_cards": { "issued": { - "title": "Štai jūsų {{ value }} vertės parduotuvės „{{ shop }}“ dovanų kortelė!", + "title": "Štai jūsų {{ value }} vertės parduotuvės {{ shop }} dovanų kortelė!", "subtext": "Jūsų dovanų kortelė", "gift_card_code": "Dovanų kortelės kodas", - "shop_link": "Tęsti apsipirkimą", - "remaining_html": "Liko {{ balance }}", + "shop_link": "Apsilankyti internetinėje parduotuvėje", "add_to_apple_wallet": "Pridėti prie „Apple Wallet“", "qr_image_alt": "QR kodas — nuskaitykite ir panaudokite dovanų kortelę", - "copy_code": "Kopijuoti kodą", + "copy_code": "Kopijuoti dovanų kortelės kodą", "expired": "Nebegalioja", "copy_code_success": "Kodą pavyko nukopijuoti", - "print_gift_card": "Spausdinti" + "how_to_use_gift_card": "Panaudokite dovanų kortelės kodą internetinėje parduotuvėje arba QR kodą fizinėje parduotuvėje", + "expiration_date": "Baigs galioti {{ expires_on }}" + } + }, + "recipient": { + "form": { + "checkbox": "Noriu siųsti kaip dovaną", + "email_label": "Gavėjo el. pašto adresas", + "email": "El. pašto adresas", + "name_label": "Gavėjo vardas (pasirinktinai)", + "name": "Vardas", + "message_label": "Žinutė (pasirinktinai)", + "message": "Žinutė", + "max_characters": "Daugiausia {{ max_chars }} simbolių", + "email_label_optional_for_no_js_behavior": "Gavėjo el. pašto adresas (pasirinktinai)" } } } diff --git a/locales/nb.json b/locales/nb.json index d4deae1566c..3026faa0958 100644 --- a/locales/nb.json +++ b/locales/nb.json @@ -40,9 +40,9 @@ "reset": "Fjern søket" }, "cart": { - "view": "Vis handlekurven ({{ count }})", + "view": "Vis handlekurv ({{ count }})", "item_added": "Vare lagt i handlekurven", - "view_empty_cart": "Vis handlekurven" + "view_empty_cart": "Vis handlekurv" }, "share": { "copy_to_clipboard": "Kopier kobling", @@ -322,6 +322,13 @@ }, "page": { "title": "Sidetittel" + }, + "announcements": { + "previous_announcement": "Forrige kunngjøring", + "next_announcement": "Neste kunngjøring", + "carousel": "Karusell", + "announcement": "Kunngjøring", + "announcement_bar": "Kunngjøringslinje" } }, "localization": { @@ -412,7 +419,7 @@ "orders": { "title": "Bestillingshistorikk", "order_number": "Bestilling", - "order_number_link": "Bestillingsnummer {{ number }}", + "order_number_link": "Ordrenummer {{ number }}", "date": "Dato", "payment_status": "Betalingsstatus", "fulfillment_status": "Distribusjonsstatus", @@ -442,17 +449,30 @@ }, "gift_cards": { "issued": { - "title": "Her er {{ value }} gavekortet ditt for {{ shop }}!", + "title": "Her er gavekortsaldoen {{ value }} for {{ shop }}.", "subtext": "Ditt gavekort", "gift_card_code": "Gavekortkode", - "shop_link": "Fortsett å handle", - "remaining_html": "Gjenstår {{ balance }}", + "shop_link": "Besøk nettbutikken", "add_to_apple_wallet": "Legg til i Apple Wallet", "qr_image_alt": "QR-kode – skann for å løse inn gavekortet", - "copy_code": "Kopier kode", + "copy_code": "Kopier gavekortkoden", "expired": "Utløpt", "copy_code_success": "Koden er kopiert", - "print_gift_card": "Skriv ut" + "how_to_use_gift_card": "Bruk gavekortet på nettet eller QR-koden i butikken", + "expiration_date": "Utløper {{ expires_on }}" + } + }, + "recipient": { + "form": { + "checkbox": "Jeg vil sende dette som en gave", + "email_label": "Mottakerens e-post", + "email": "E-post", + "name_label": "Mottakerens navn (valgfritt)", + "name": "Navn", + "message_label": "Melding (valgfritt)", + "message": "Melding", + "max_characters": "Maks. {{ max_chars }} tegn", + "email_label_optional_for_no_js_behavior": "Mottakerens e-post (valgfritt)" } } } diff --git a/locales/nb.schema.json b/locales/nb.schema.json index 01fe6cfaeab..e2774977b06 100644 --- a/locales/nb.schema.json +++ b/locales/nb.schema.json @@ -382,6 +382,14 @@ "content": "Legg til en merkevarebeskrivelse i butikkens bunntekst." } } + }, + "animations": { + "name": "Animasjoner", + "settings": { + "animations_reveal_on_scroll": { + "label": "Vis melding ved rulling" + } + } } }, "sections": { @@ -425,6 +433,46 @@ "options__4": { "label": "Ekstra stort" } + }, + "image_shape": { + "options__1": { + "label": "Standard" + }, + "options__2": { + "label": "Bue" + }, + "options__3": { + "label": "Blob" + }, + "options__4": { + "label": "Større enn" + }, + "options__5": { + "label": "Mindre enn" + }, + "options__6": { + "label": "Diamant" + }, + "options__7": { + "label": "Parallellogram" + }, + "options__8": { + "label": "Rund" + }, + "label": "Bildeform", + "info": "Standardiserte kort har ingen linjer når bildets form er aktivt." + }, + "animation": { + "content": "Animasjoner", + "image_behavior": { + "options__1": { + "label": "Ingen" + }, + "options__2": { + "label": "Bevegelse i omgivelsene" + }, + "label": "Bildeatferd" + } } }, "announcement-bar": { @@ -453,6 +501,14 @@ } } } + }, + "settings": { + "auto_rotate": { + "label": "Autoroter lysbildene" + }, + "change_slides_speed": { + "label": "Endre lysbilde hvert" + } } }, "collage": { @@ -544,7 +600,7 @@ } }, "collection-list": { - "name": "Samlingsliste", + "name": "Liste over samlinger", "settings": { "title": { "label": "Overskrift" @@ -595,7 +651,7 @@ } }, "presets": { - "name": "Samlingsliste" + "name": "Liste over samlinger" } }, "contact-form": { @@ -650,7 +706,7 @@ } }, "featured-collection": { - "name": "Utvalgt samling", + "name": "Fremhevet samling", "settings": { "title": { "label": "Overskrift" @@ -749,7 +805,7 @@ } }, "presets": { - "name": "Utvalgt samling" + "name": "Fremhevet samling" } }, "footer": { @@ -848,7 +904,7 @@ }, "header__9": { "content": "Følg på Shop", - "info": "Vis følgeknappen for butikkfronten i Shop-appen. [Finn ut mer](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" + "info": "Shop Pay må være aktivert for å tillate at kunder følger butikken din i Shop-appen fra butikkfronten. [Finn ut mer](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" }, "enable_follow_on_shop": { "label": "Aktiver Følg på Shop" @@ -890,6 +946,9 @@ }, "options__2": { "label": "Megameny" + }, + "options__3": { + "label": "Skuff" } }, "mobile_layout": { @@ -904,9 +963,6 @@ "label": "Venstre" } }, - "logo_header": { - "content": "Logo" - }, "logo_help": { "content": "Rediger logoen i [temainnstillingene](/editor?context=theme&category=logo)." }, @@ -924,6 +980,24 @@ "options__4": { "label": "Alltid, reduser logostørrelsen" } + }, + "header__3": { + "content": "Land-/regionvelger" + }, + "header__4": { + "info": "Gå til [markedsinnstillinger](/admin/settings/markets) for å legge til land/region." + }, + "enable_country_selector": { + "label": "Aktiver land-/regionvelger" + }, + "header__5": { + "content": "Språkvelger" + }, + "header__6": { + "info": "Gå til [språkinnstillingene](/admin/settings/languages) for å legge til et språk." + }, + "enable_language_selector": { + "label": "Aktiver språkvelger" } } }, @@ -942,19 +1016,12 @@ "stack_images_on_mobile": { "label": "Stable bilder på mobil" }, - "adapt_height_first_image": { - "label": "Tilpass seksjonshøyden til den første bildestørrelsen", - "info": "Overskriver innstillingen for bildebannerhøyde når den er avmerket." - }, "show_text_box": { "label": "Vis beholder på datamaskin" }, "image_overlay_opacity": { "label": "Gjennomsiktighet for bildeoverlegg" }, - "header": { - "content": "Mobillayout" - }, "show_text_below": { "label": "Vis beholder på mobil" }, @@ -1027,6 +1094,9 @@ "label": "Høyre" }, "label": "Innholdsjustering på mobiltelefon" + }, + "mobile": { + "content": "Mobillayout" } }, "blocks": { @@ -1583,6 +1653,10 @@ "show_dynamic_checkout": { "label": "Vis dynamiske knapper for å gå til kassen", "info": "Kundene vil se sitt foretrukne alternativ, som PayPal eller Apple Pay, av betalingsmåtene som er tilgjengelig i butikken. [Finn ut mer](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)" + }, + "show_gift_card_recipient": { + "label": "Vis mottakerinformasjonsskjema for produktgavekort", + "info": "Produktgavekort kan alternativt sendes direkte til en mottaker sammen med en personlig melding. [Finn ut mer](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields)" } } }, @@ -2343,8 +2417,7 @@ }, "video_url": { "label": "URL-adresse", - "placeholder": "Bruk en YouTube- eller Vimeo-URL-adresse", - "info": "Videoen spilles av på siden." + "info": "Bruk en YouTube- eller Vimeo-URL-adresse" }, "description": { "label": "Alt. tekst for video", @@ -2356,6 +2429,24 @@ }, "full_width": { "label": "Gjør seksjonen til full bredde" + }, + "video": { + "label": "Video" + }, + "enable_video_looping": { + "label": "Spill video i loop" + }, + "header__1": { + "content": "Shopify-driftet video" + }, + "header__2": { + "content": "Eller integrer en video fra en URL-adresse" + }, + "header__3": { + "content": "Stil" + }, + "paragraph": { + "content": "Vises når ingen Shopify-driftet video er valgt." } }, "presets": { diff --git a/locales/nl.json b/locales/nl.json index 756732b25a1..cd77d35fe45 100644 --- a/locales/nl.json +++ b/locales/nl.json @@ -42,7 +42,7 @@ "cart": { "view": "Winkelwagen bekijken ({{ count }})", "item_added": "Artikel toegevoegd aan winkelwagen", - "view_empty_cart": "Mijn winkelwagen bekijken" + "view_empty_cart": "Winkelwagen bekijken" }, "share": { "copy_to_clipboard": "Link kopiëren", @@ -194,7 +194,7 @@ "reset": "Opnieuw instellen", "sort_button": "Sorteren", "sort_by_label": "Sorteer op:", - "to": "Tot", + "to": "Aan", "clear_filter": "Filter verwijderen", "filter_selected_accessibility": "{{ type }} ({{ count }} filters geselecteerd)", "show_more": "Meer weergeven", @@ -322,6 +322,13 @@ }, "page": { "title": "Paginatitel" + }, + "announcements": { + "previous_announcement": "Vorige aankondiging", + "next_announcement": "Volgende aankondiging", + "carousel": "Carrousel", + "announcement": "Aankondiging", + "announcement_bar": "Aankondigingsbalk" } }, "localization": { @@ -442,17 +449,30 @@ }, "gift_cards": { "issued": { - "title": "Hier is je cadeaubon ter waarde van {{ value }} voor {{ shop }}!", + "title": "Dit is het saldo van de cadeaubon ter waarde van {{ value }} voor {{ shop }}", "subtext": "Je cadeaubon", "gift_card_code": "Cadeaubon code", - "shop_link": "Terugkeren naar winkel", - "remaining_html": "Resterend bedrag: {{ balance }}", + "shop_link": "Onlinewinkel bezoeken", "add_to_apple_wallet": "Aan Apple Wallet toevoegen", "qr_image_alt": "QR-code — scannen om cadeaubon te verzilveren", - "copy_code": "Code kopiëren", + "copy_code": "Cadeauboncode kopiëren", "expired": "Verlopen", "copy_code_success": "Code gekopieerd", - "print_gift_card": "Afdrukken" + "how_to_use_gift_card": "Gebruik de cadeauboncode online of de QR-code in de winkel", + "expiration_date": "Verloopt op {{ expires_on }}" + } + }, + "recipient": { + "form": { + "checkbox": "Ik wil dit als cadeau sturen", + "email_label": "E-mailadres ontvanger", + "email": "E‑mailadres", + "name_label": "Naam ontvanger (optioneel)", + "name": "Naam", + "message_label": "Bericht (optioneel)", + "message": "Bericht", + "max_characters": "Maximaal {{ max_chars }} tekens", + "email_label_optional_for_no_js_behavior": "E-mailadres ontvanger (optioneel)" } } } diff --git a/locales/nl.schema.json b/locales/nl.schema.json index 021645f4f35..154100690ec 100644 --- a/locales/nl.schema.json +++ b/locales/nl.schema.json @@ -382,6 +382,14 @@ "content": "Voeg een merkbeschrijving toe aan de voettekst van de winkel." } } + }, + "animations": { + "name": "Animaties", + "settings": { + "animations_reveal_on_scroll": { + "label": "Secties laten zien bij scrollen" + } + } } }, "sections": { @@ -425,6 +433,46 @@ "options__4": { "label": "Extra groot" } + }, + "image_shape": { + "options__1": { + "label": "Standaard" + }, + "options__2": { + "label": "Boog" + }, + "options__3": { + "label": "Amorf" + }, + "options__4": { + "label": "Chevronpijl naar links" + }, + "options__5": { + "label": "Chevronpijl naar rechts" + }, + "options__6": { + "label": "Ruit" + }, + "options__7": { + "label": "Parallellogram" + }, + "options__8": { + "label": "Rond" + }, + "label": "Vorm afbeelding", + "info": "Kaarten in standaardstijl hebben geen randen wanneer een afbeeldingsvorm actief is." + }, + "animation": { + "content": "Animaties", + "image_behavior": { + "options__1": { + "label": "Geen" + }, + "options__2": { + "label": "Bewegingen van de omgeving" + }, + "label": "Gedrag van afbeeldingen" + } } }, "announcement-bar": { @@ -453,6 +501,14 @@ } } } + }, + "settings": { + "auto_rotate": { + "label": "Dia's automatisch draaien" + }, + "change_slides_speed": { + "label": "Wissel dia's elke" + } } }, "collage": { @@ -848,7 +904,7 @@ }, "header__9": { "content": "Volgen op Shop", - "info": "Toon de volgknop voor je webshop in de Shop-app. [Meer informatie](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" + "info": "Klanten kunnen de winkel alleen vanuit de webshop volgen in de Shop-app als Shop Pay is ingeschakeld. [Meer informatie](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" }, "enable_follow_on_shop": { "label": "'Volgen op Shop' inschakelen" @@ -890,6 +946,9 @@ }, "options__2": { "label": "Megamenu" + }, + "options__3": { + "label": "Lade" } }, "mobile_layout": { @@ -904,9 +963,6 @@ "label": "Links" } }, - "logo_header": { - "content": "Logo" - }, "logo_help": { "content": "Bewerk je logo in [thema-instellingen](/editor?context=theme&category=logo)." }, @@ -924,6 +980,24 @@ "options__4": { "label": "Altijd; verklein logo" } + }, + "header__3": { + "content": "Kiezer voor land/regio" + }, + "header__4": { + "info": "Ga naar de [marktinstellingen](/admin/settings/markets) om een land/regio toe te voegen." + }, + "enable_country_selector": { + "label": "Kiezer voor land/regio inschakelen" + }, + "header__5": { + "content": "Taalkiezer" + }, + "header__6": { + "info": "Ga naar je [taalinstellingen](/admin/settings/languages) om een taal toe te voegen." + }, + "enable_language_selector": { + "label": "Taalkiezer inschakelen" } } }, @@ -942,19 +1016,12 @@ "stack_images_on_mobile": { "label": "Afbeeldingen stapelen op mobiel" }, - "adapt_height_first_image": { - "label": "Sectiehoogte aanpassen aan grootte eerste afbeelding", - "info": "Overschrijft de instelling voor de hoogte van de bannerafbeelding als je deze controleert." - }, "show_text_box": { "label": "Container op desktop weergeven" }, "image_overlay_opacity": { "label": "Dekking van afbeeldingsoverlay" }, - "header": { - "content": "Mobiele opmaak" - }, "show_text_below": { "label": "Container op mobiel weergeven" }, @@ -1027,6 +1094,9 @@ "label": "Rechts" }, "label": "Uitlijning van content op mobiel" + }, + "mobile": { + "content": "Opmaak op mobiel" } }, "blocks": { @@ -1584,6 +1654,10 @@ "show_dynamic_checkout": { "label": "Dynamische checkoutknoppen weergeven", "info": "Bij de betaalmethoden die bij je winkel beschikbaar zijn, zien klanten de optie die hun voorkeur heeft, zoals PayPal of Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)" + }, + "show_gift_card_recipient": { + "label": "Formulier voor gegevens van ontvanger weergeven voor cadeaubonnen", + "info": "Klanten kunnen cadeaubonnen rechtstreeks naar de ontvanger laten sturen met een persoonlijk bericht. [Meer informatie](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields)" } } }, @@ -2343,8 +2417,7 @@ }, "video_url": { "label": "URL", - "placeholder": "Gebruik de URL van YouTube of Vimeo", - "info": "Video wordt afgespeeld in de pagina." + "info": "Een URL van YouTube of Vimeo gebruiken" }, "description": { "label": "Alt-tekst video", @@ -2356,6 +2429,24 @@ }, "full_width": { "label": "Volledige breedte voor sectie gebruiken" + }, + "video": { + "label": "Video" + }, + "enable_video_looping": { + "label": "Video continu herhalen" + }, + "header__1": { + "content": "Door Shopify gehoste video" + }, + "header__2": { + "content": "Of video via URL insluiten" + }, + "header__3": { + "content": "Stijl" + }, + "paragraph": { + "content": "Wordt weergegeven wanneer er geen door Shopify gehoste video is geselecteerd." } }, "presets": { diff --git a/locales/pl.json b/locales/pl.json index 962d8732a49..dcfdf69c8b9 100644 --- a/locales/pl.json +++ b/locales/pl.json @@ -42,7 +42,7 @@ "cart": { "view": "Pokaż koszyk ({{ count }})", "item_added": "Pozycję dodano do koszyka", - "view_empty_cart": "Wyświetl mój koszyk" + "view_empty_cart": "Pokaż koszyk" }, "share": { "copy_to_clipboard": "Kopiuj link", @@ -132,7 +132,7 @@ "price": { "from_price_html": "Od {{ price }}", "regular_price": "Cena regularna", - "sale_price": "Cena sprzedaży", + "sale_price": "Cena promocyjna", "unit_price": "Cena jednostkowa" }, "pickup_availability": { @@ -165,7 +165,7 @@ "inventory_in_stock_show_count": "{{ quantity }} w magazynie", "inventory_low_stock": "Niski poziom zapasów", "inventory_low_stock_show_count": "Niski poziom zapasów: pozostało {{ quantity }}", - "inventory_out_of_stock": "Brak na stanie", + "inventory_out_of_stock": "Zapas wyczerpany", "inventory_out_of_stock_continue_selling": "W magazynie", "sku": "SKU" }, @@ -342,6 +342,13 @@ }, "page": { "title": "Tytuł strony" + }, + "announcements": { + "previous_announcement": "Poprzednie ogłoszenie", + "next_announcement": "Kolejne ogłoszenie", + "carousel": "Karuzela", + "announcement": "Ogłoszenie", + "announcement_bar": "Pasek ogłoszeń" } }, "localization": { @@ -432,7 +439,7 @@ "orders": { "title": "Historia zamówień", "order_number": "Zamówienie", - "order_number_link": "Numer zamówienia {{ number }}", + "order_number_link": "Nr zamówienia {{ number }}", "date": "Data", "payment_status": "Status płatności", "fulfillment_status": "Status realizacji", @@ -465,14 +472,27 @@ "title": "Oto Twoja karta prezentowa o wartości {{ value }} do {{ shop }}!", "subtext": "Twoja karta prezentowa", "gift_card_code": "Kod karty prezentowej", - "shop_link": "Kontynuuj zakupy", - "remaining_html": "Pozostało {{ balance }}", + "shop_link": "Odwiedź sklep online", "add_to_apple_wallet": "Dodaj do Apple Wallet", "qr_image_alt": "Kod QR – zeskanuj, aby wykorzystać kartę prezentową", - "copy_code": "Skopiuj kod", + "copy_code": "Kopiuj kod karty prezentowej", "expired": "Utraciła ważność", "copy_code_success": "Kod został skopiowany", - "print_gift_card": "Drukuj" + "how_to_use_gift_card": "Użyj kodu karty prezentowej online lub kodu QR w sklepie", + "expiration_date": "Wygasa {{ expires_on }}" + } + }, + "recipient": { + "form": { + "checkbox": "Chcę to wysłać jako prezent", + "email_label": "E-mail odbiorcy", + "email": "E-mail", + "name_label": "Nazwa odbiorcy (opcjonalnie)", + "name": "Nazwisko", + "message_label": "Wiadomość (opcjonalna)", + "message": "Wiadomość", + "max_characters": "Maks. {{ max_chars }} znaki(-ów)", + "email_label_optional_for_no_js_behavior": "Adres e-mail odbiorcy (opcjonalnie)" } } } diff --git a/locales/pl.schema.json b/locales/pl.schema.json index 387718d4631..d794cbc6299 100644 --- a/locales/pl.schema.json +++ b/locales/pl.schema.json @@ -382,6 +382,14 @@ "content": "Dodaj opis marki do stopki swojego sklepu." } } + }, + "animations": { + "name": "Animacje", + "settings": { + "animations_reveal_on_scroll": { + "label": "Pokaż sekcje podczas przewijania" + } + } } }, "sections": { @@ -425,6 +433,46 @@ "options__4": { "label": "Bardzo duży" } + }, + "image_shape": { + "options__1": { + "label": "Domyślny" + }, + "options__2": { + "label": "Łuk" + }, + "options__3": { + "label": "Kropla" + }, + "options__4": { + "label": "Pagon skierowany w lewo" + }, + "options__5": { + "label": "Pagon skierowany w prawo" + }, + "options__6": { + "label": "Romb" + }, + "options__7": { + "label": "Równoległobok" + }, + "options__8": { + "label": "Okrągły" + }, + "label": "Kształt obrazu", + "info": "Karty w stylu standardowym nie mają obramowania, gdy aktywny jest kształt obrazu." + }, + "animation": { + "content": "Animacje", + "image_behavior": { + "options__1": { + "label": "Brak" + }, + "options__2": { + "label": "Ruch otoczenia" + }, + "label": "Zachowanie obrazu" + } } }, "announcement-bar": { @@ -453,6 +501,14 @@ } } } + }, + "settings": { + "auto_rotate": { + "label": "Automatyczna zmiana slajdów" + }, + "change_slides_speed": { + "label": "Zmieniaj slajdy co" + } } }, "collage": { @@ -848,7 +904,7 @@ }, "header__9": { "content": "Obserwuj w Shop", - "info": "Wyświetl przycisk obserwowania dla swojej witryny sklepu w aplikacji Shop. [Dowiedz się więcej](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" + "info": "Aby umożliwić klientom śledzenie Twojego sklepu w aplikacji Shop z poziomu Twojej witryny sklepu, należy włączyć funkcję Shop Pay. [Dowiedz się więcej](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" }, "enable_follow_on_shop": { "label": "Włącz opcję Obserwuj w Shop" @@ -890,6 +946,9 @@ }, "options__2": { "label": "Mega menu" + }, + "options__3": { + "label": "Szuflada" } }, "mobile_layout": { @@ -904,9 +963,6 @@ "label": "Lewa strona" } }, - "logo_header": { - "content": "Logo" - }, "logo_help": { "content": "Edytuj logo w [theme settings](/editor?context=theme&category=logo)." }, @@ -924,6 +980,24 @@ "options__4": { "label": "Zawsze, zmniejsz rozmiar logo" } + }, + "header__3": { + "content": "Selektor kraju/regionu" + }, + "header__4": { + "info": "Aby dodać kraj/region, przejdź do swoich [ustawień rynku.](/admin/settings/markets)" + }, + "enable_country_selector": { + "label": "Włącz selektor kraju/regionu" + }, + "header__5": { + "content": "Selektor języka" + }, + "header__6": { + "info": "Aby dodać język, przejdź do swoich [ustawień języka.](/admin/settings/languages)" + }, + "enable_language_selector": { + "label": "Włącz selektor języka" } } }, @@ -942,19 +1016,12 @@ "stack_images_on_mobile": { "label": "Układaj obrazy w stosy na urządzeniu mobilnym" }, - "adapt_height_first_image": { - "label": "Dostosuj wysokość sekcji do rozmiaru pierwszego obrazu", - "info": "Nadpisuje ustawienie wysokości banera obrazu, jeżeli jest zaznaczone." - }, "show_text_box": { "label": "Pokaż kontener na komputerze" }, "image_overlay_opacity": { "label": "Nieprzezroczystość nakładki obrazu" }, - "header": { - "content": "Układ na urządzeniu mobilnym" - }, "show_text_below": { "label": "Pokaż kontener na urządzeniu mobilnym" }, @@ -1027,6 +1094,9 @@ "label": "Prawa strona" }, "label": "Wyrównanie treści na urządzeniu mobilnym" + }, + "mobile": { + "content": "Układ na urządzeniu mobilnym" } }, "blocks": { @@ -1584,6 +1654,10 @@ "show_dynamic_checkout": { "label": "Pokaż dynamiczne przyciski realizacji zakupu", "info": "Korzystając z metod płatności dostępnych w Twoim sklepie, klienci widzą swoją preferowaną opcję, np. PayPal lub Apple Pay. [Dowiedz się więcej](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)" + }, + "show_gift_card_recipient": { + "label": "Pokaż formularz danych odbiorcy dla produktów typu karta prezentowa", + "info": "Produkty w postaci kart prezentowych mogą być wysyłane bezpośrednio do odbiorcy wraz z osobistą wiadomością. [Dowiedz się więcej](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields)" } } }, @@ -2343,8 +2417,7 @@ }, "video_url": { "label": "URL", - "placeholder": "Użyj adresu URL do YouTube lub Vimeo", - "info": "Film jest odtwarzany na stronie." + "info": "Użyj adresu URL do YouTube lub Vimeo" }, "description": { "label": "Alternatywny tekst filmu", @@ -2356,6 +2429,24 @@ }, "full_width": { "label": "Zrób sekcję na całą szerokość" + }, + "video": { + "label": "Film" + }, + "enable_video_looping": { + "label": "Odtwarzaj film w pętli" + }, + "header__1": { + "content": "Film hostowany przez Shopify" + }, + "header__2": { + "content": "Lub osadź film z adresu URL" + }, + "header__3": { + "content": "Styl" + }, + "paragraph": { + "content": "Pokazuje, gdy nie wybrano żadnego filmu hostowanego przez Shopify." } }, "presets": { @@ -2673,7 +2764,7 @@ } }, "auto_rotate": { - "label": "Automatycznie obracaj slajdy" + "label": "Automatyczna zmiana slajdów" }, "change_slides_speed": { "label": "Zmieniaj slajdy co" diff --git a/locales/pt-BR.json b/locales/pt-BR.json index edd4e7ecdbb..7c203216034 100644 --- a/locales/pt-BR.json +++ b/locales/pt-BR.json @@ -40,9 +40,9 @@ "reset": "Limpar termo de pesquisa" }, "cart": { - "view": "Ver o carrinho ({{ count }})", + "view": "Ver carrinho ({{ count }})", "item_added": "Item adicionado ao carrinho", - "view_empty_cart": "Ver meu carrinho" + "view_empty_cart": "Ver carrinho" }, "share": { "copy_to_clipboard": "Copiar link", @@ -332,6 +332,13 @@ }, "page": { "title": "Título da página" + }, + "announcements": { + "previous_announcement": "Comunicado anterior", + "next_announcement": "Próximo comunicado", + "carousel": "Carrossel", + "announcement": "Comunicado", + "announcement_bar": "Barra de comunicados" } }, "localization": { @@ -452,17 +459,30 @@ }, "gift_cards": { "issued": { - "title": "Aqui está seu cartão-presente da {{ shop }} no valor de {{ value }}.", + "title": "O saldo no cartão-presente da loja {{ shop }} é de {{ value }}.", "subtext": "Seu cartão-presente", "gift_card_code": "Código do cartão-presente", - "shop_link": "Voltar à loja", - "remaining_html": "{{ balance }} restantes", + "shop_link": "Visitar loja virtual", "add_to_apple_wallet": "Adicionar ao app Wallet da Apple", "qr_image_alt": "Código QR — faça a leitura para resgatar o cartão-presente", - "copy_code": "Copiar código", + "copy_code": "Copiar código do cartão-presente", "expired": "Expirado", "copy_code_success": "Código copiado", - "print_gift_card": "Imprimir" + "how_to_use_gift_card": "Use o código do cartão-presente online ou o código QR na loja", + "expiration_date": "Expira em {{ expires_on }}" + } + }, + "recipient": { + "form": { + "checkbox": "Quero enviar como presente", + "email_label": "E-mail do destinatário", + "email": "E-mail", + "name_label": "Nome do destinatário (opcional)", + "name": "Nome", + "message_label": "Mensagem (opcional)", + "message": "Mensagem", + "max_characters": "Máximo de {{ max_chars }} caracteres", + "email_label_optional_for_no_js_behavior": "E-mail do destinatário (opcional)" } } } diff --git a/locales/pt-BR.schema.json b/locales/pt-BR.schema.json index 867ca64901a..54b6814ab71 100644 --- a/locales/pt-BR.schema.json +++ b/locales/pt-BR.schema.json @@ -382,6 +382,14 @@ "content": "Adicione uma descrição da marca ao rodapé da loja." } } + }, + "animations": { + "name": "Animações", + "settings": { + "animations_reveal_on_scroll": { + "label": "Revelar seções durante a rolagem" + } + } } }, "sections": { @@ -425,6 +433,46 @@ "options__4": { "label": "Extra grande" } + }, + "image_shape": { + "options__1": { + "label": "Padrão" + }, + "options__2": { + "label": "Arco" + }, + "options__3": { + "label": "Bolha" + }, + "options__4": { + "label": "Chevron para esquerda" + }, + "options__5": { + "label": "Chevron para direita" + }, + "options__6": { + "label": "Diamante" + }, + "options__7": { + "label": "Paralelogramo" + }, + "options__8": { + "label": "Círculo" + }, + "label": "Formato da imagem", + "info": "Cartões estilo-padrão não têm bordas quando uma forma de imagem está ativa." + }, + "animation": { + "content": "Animações", + "image_behavior": { + "options__1": { + "label": "Nenhuma" + }, + "options__2": { + "label": "Movimentação do ambiente" + }, + "label": "Comportamento da imagem" + } } }, "announcement-bar": { @@ -453,6 +501,14 @@ } } } + }, + "settings": { + "auto_rotate": { + "label": "Girar automaticamente os slides" + }, + "change_slides_speed": { + "label": "Mudar os slides a cada" + } } }, "collage": { @@ -848,7 +904,7 @@ }, "header__9": { "content": "Seguir no Shop", - "info": "Mostre o botão para seguir na sua vitrine no app do Shop. [Saiba mais](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" + "info": "Para permitir que os clientes sigam a loja no app do Shop a partir de sua vitrine, o Shop Pay precisa estar habilitado. [Saiba mais](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" }, "enable_follow_on_shop": { "label": "Habilitar \"Seguir no Shop\"" @@ -890,6 +946,9 @@ }, "options__2": { "label": "Megamenu" + }, + "options__3": { + "label": "Deslizante" } }, "mobile_layout": { @@ -904,9 +963,6 @@ "label": "Esquerda" } }, - "logo_header": { - "content": "Logo" - }, "logo_help": { "content": "Edite seu logo nas [configurações do tema](/editor?context=theme&category=logo)." }, @@ -924,6 +980,24 @@ "options__4": { "label": "Sempre, reduzir o tamanho do logo" } + }, + "header__3": { + "content": "Seletor de país/região" + }, + "header__4": { + "info": "Adicione um país/uma região às [configurações de mercado.](/admin/settings/markets)" + }, + "enable_country_selector": { + "label": "Habilitar seletor de país/região" + }, + "header__5": { + "content": "Seletor de idioma" + }, + "header__6": { + "info": "Adicione um idioma às [configurações de idioma.](/admin/settings/languages)" + }, + "enable_language_selector": { + "label": "Habilitar seletor de idioma" } } }, @@ -942,19 +1016,12 @@ "stack_images_on_mobile": { "label": "Empilhar imagens em dispositivos móveis" }, - "adapt_height_first_image": { - "label": "Adaptar a altura da seção para o tamanho da primeira imagem", - "info": "Quando marcada, substitui a configuração de altura para o banner de imagem." - }, "show_text_box": { "label": "Exibir contêiner no desktop" }, "image_overlay_opacity": { "label": "Opacidade de sobreposição de imagem" }, - "header": { - "content": "Layout para dispositivo móvel" - }, "show_text_below": { "label": "Exibir contêiner em dispositivos móveis" }, @@ -1027,6 +1094,9 @@ "label": "Direita" }, "label": "Alinhamento de conteúdo em dispositivos móveis" + }, + "mobile": { + "content": "Layout em dispositivos móveis" } }, "blocks": { @@ -1583,6 +1653,10 @@ "show_dynamic_checkout": { "label": "Exibir botões de checkout dinâmico", "info": "Cada cliente vê a forma de pagamento preferencial dentre as disponíveis na loja, como PayPal ou Apple Pay. [Saiba mais](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)" + }, + "show_gift_card_recipient": { + "label": "Mostrar formulário de informações do destinatário para produtos \"cartão-presente\"", + "info": "Existe a opção de enviar produtos \"cartão-presente\" direto a um destinatário com uma mensagem pessoal. [Saiba mais](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields)" } } }, @@ -2343,8 +2417,7 @@ }, "video_url": { "label": "URL", - "placeholder": "Usar um URL do YouTube ou do Vimeo", - "info": "O vídeo é reproduzido na página." + "info": "Usar um URL do YouTube ou do Vimeo" }, "description": { "label": "Texto alternativo do vídeo", @@ -2356,6 +2429,24 @@ }, "full_width": { "label": "Definir seção com largura total" + }, + "video": { + "label": "Vídeo" + }, + "enable_video_looping": { + "label": "Reproduzir vídeo em loop" + }, + "header__1": { + "content": "Vídeo hospedado na Shopify" + }, + "header__2": { + "content": "Ou incorporar vídeo de URL" + }, + "header__3": { + "content": "Estilo" + }, + "paragraph": { + "content": "Mostra quando nenhum vídeo hospedado na Shopify é selecionado." } }, "presets": { diff --git a/locales/pt-PT.json b/locales/pt-PT.json index ad50a832fdd..f6516bc1287 100644 --- a/locales/pt-PT.json +++ b/locales/pt-PT.json @@ -40,9 +40,9 @@ "reset": "Limpar termo de pesquisa" }, "cart": { - "view": "Ver o meu carrinho ({{ count }})", + "view": "Ver carrinho ({{ count }})", "item_added": "Item adicionado ao seu carrinho", - "view_empty_cart": "Ver o meu carrinho" + "view_empty_cart": "Ver carrinho" }, "share": { "copy_to_clipboard": "Copiar ligação", @@ -332,6 +332,13 @@ }, "page": { "title": "Título da página" + }, + "announcements": { + "previous_announcement": "Comunicado anterior", + "next_announcement": "Comunicado seguinte", + "carousel": "Carrossel", + "announcement": "Comunicado", + "announcement_bar": "Barra de comunicado" } }, "localization": { @@ -452,17 +459,30 @@ }, "gift_cards": { "issued": { - "title": "Aqui está o seu cartão de oferta de {{ value }} para {{ shop }}!", + "title": "Aqui está o seu saldo do cartão de oferta de {{ value }} para {{ shop }}!", "subtext": "O seu cartão de oferta", "gift_card_code": "Código do cartão de oferta", - "shop_link": "Continuar a comprar", - "remaining_html": "{{ balance }} restante", + "shop_link": "Visite a loja online", "add_to_apple_wallet": "Adicionar a Apple Wallet", "qr_image_alt": "Código QR - digitalizar para resgatar cartão de oferta", - "copy_code": "Copiar código", + "copy_code": "Copiar código de cartão-de oferta", "expired": "Expirado", "copy_code_success": "Código copiado com sucesso", - "print_gift_card": "Imprimir" + "how_to_use_gift_card": "Utilize o código do cartão de oferta online ou o código QR na loja", + "expiration_date": "Expira em {{ expires_on }}" + } + }, + "recipient": { + "form": { + "checkbox": "Quero enviar isto como um presente", + "email_label": "E-mail do destinatário", + "email": "E-mail", + "name_label": "Nome do destinatário (opcional)", + "name": "Nome", + "message_label": "Mensagem (opcional)", + "message": "Mensagem", + "max_characters": "Máximo de {{ max_chars }} caracteres", + "email_label_optional_for_no_js_behavior": "E-mail do destinatário (opcional)" } } } diff --git a/locales/pt-PT.schema.json b/locales/pt-PT.schema.json index 6debcd35942..80cbf107ba5 100644 --- a/locales/pt-PT.schema.json +++ b/locales/pt-PT.schema.json @@ -382,6 +382,14 @@ "content": "Adicione uma descrição da marca ao rodapé da sua loja." } } + }, + "animations": { + "name": "Animações", + "settings": { + "animations_reveal_on_scroll": { + "label": "Revelar secções ao percorrer a página" + } + } } }, "sections": { @@ -425,6 +433,46 @@ "options__4": { "label": "Extra grande" } + }, + "image_shape": { + "options__1": { + "label": "Predefinição" + }, + "options__2": { + "label": "Arco" + }, + "options__3": { + "label": "Gota" + }, + "options__4": { + "label": "Divisa para a esquerda" + }, + "options__5": { + "label": "Divisa para a direita" + }, + "options__6": { + "label": "Diamante" + }, + "options__7": { + "label": "Paralelogramo" + }, + "options__8": { + "label": "Redonda" + }, + "label": "Forma de imagem", + "info": "Os cartões com o estilo padrão não têm bordas quando uma forma de imagem está ativa." + }, + "animation": { + "content": "Animações", + "image_behavior": { + "options__1": { + "label": "Nenhum" + }, + "options__2": { + "label": "Movimento de ambiente" + }, + "label": "Comportamento da imagem" + } } }, "announcement-bar": { @@ -453,6 +501,14 @@ }, "name": "Comunicado" } + }, + "settings": { + "auto_rotate": { + "label": "Rotação automática de diapositivos" + }, + "change_slides_speed": { + "label": "Mudar diapositivos a cada" + } } }, "collage": { @@ -848,7 +904,7 @@ }, "header__9": { "content": "Seguir no Shop", - "info": "Apresente um botão para seguir na sua frente de loja na aplicação Shop. [Saber mais](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" + "info": "O Shop Pay tem de estar ativo para os clientes poderem seguir a sua loja na aplicação Shop a partir da sua frente de loja. [Saber mais](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" }, "enable_follow_on_shop": { "label": "Ativar Seguir no Shop" @@ -890,6 +946,9 @@ }, "options__2": { "label": "Mega menu" + }, + "options__3": { + "label": "Menu deslizante" } }, "mobile_layout": { @@ -904,9 +963,6 @@ "label": "Esquerda" } }, - "logo_header": { - "content": "Logótipo" - }, "logo_help": { "content": "Edite o seu logótipo em [definições de tema](/editor?context=theme&category=logo)." }, @@ -924,6 +980,24 @@ "options__4": { "label": "Sempre, reduzir o tamanho do logótipo" } + }, + "header__3": { + "content": "Seletor de país/região" + }, + "header__4": { + "info": "Para adicionar um país/região, aceda a [definições de mercado.](/admin/settings/markets)" + }, + "enable_country_selector": { + "label": "Ativar seletor de país/região" + }, + "header__5": { + "content": "Seletor de idioma" + }, + "header__6": { + "info": "Para adicionar um idioma, aceda a [definições de idioma.](/admin/settings/languages)" + }, + "enable_language_selector": { + "label": "Ativar seletor de idioma" } } }, @@ -942,19 +1016,12 @@ "stack_images_on_mobile": { "label": "Empilhar imagens em dispositivos móveis" }, - "adapt_height_first_image": { - "label": "Adaptar altura da secção ao tamanho da primeira imagem", - "info": "Quando marcada, substitui a definição de altura do banner da imagem." - }, "show_text_box": { "label": "Mostrar recetores no desktop" }, "image_overlay_opacity": { "label": "Opacidade da sobreposição da imagem" }, - "header": { - "content": "Esquema para dispositivo móvel" - }, "show_text_below": { "label": "Mostrar recetor em dispositivo móvel" }, @@ -1027,6 +1094,9 @@ "label": "Direita" }, "label": "Alinhamento do conteúdo em dispositivos móveis" + }, + "mobile": { + "content": "Esquema para dispositivo móvel" } }, "blocks": { @@ -1574,6 +1644,10 @@ "show_dynamic_checkout": { "label": "Mostrar botões dinâmicos de finalização da compra", "info": "Utilizando os métodos de pagamento disponíveis na sua loja, os clientes poderão ver a sua opção preferida, como o PayPal ou Apple Pay. [Saiba mais](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)" + }, + "show_gift_card_recipient": { + "label": "Apresentar o formulário de informações do destinatário para produtos de cartões de oferta", + "info": "Os produtos de cartões de oferta podem ser opcionalmente enviados a um destinatário com uma mensagem pessoal. [Saber mais](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields)" } }, "name": "Botão de compra" @@ -2343,8 +2417,7 @@ }, "video_url": { "label": "URL", - "placeholder": "Usar um URL de YouTube ou Vimeo", - "info": "O vídeo é reproduzido na página." + "info": "Usar um URL do YouTube ou Vimeo" }, "description": { "label": "Texto alternativo do vídeo", @@ -2356,6 +2429,24 @@ }, "full_width": { "label": "Tornar a secção em largura total" + }, + "video": { + "label": "Vídeo" + }, + "enable_video_looping": { + "label": "Repetir continuamente o vídeo" + }, + "header__1": { + "content": "Vídeo hospedado na Shopify" + }, + "header__2": { + "content": "Ou incorporar vídeo a partir de URL" + }, + "header__3": { + "content": "Estilo" + }, + "paragraph": { + "content": "Exibido quando nenhum vídeo hospedado na Shopify está selecionado." } }, "presets": { diff --git a/locales/ro-RO.json b/locales/ro-RO.json index 4f4d51cbe6a..5b3fd1ca7c4 100644 --- a/locales/ro-RO.json +++ b/locales/ro-RO.json @@ -40,9 +40,9 @@ "reset": "Golește termenul de căutare" }, "cart": { - "view": "Vizualizare coș ({{ count }})", + "view": "Vezi coșul ({{ count }})", "item_added": "Articolul a fost adăugat în coș", - "view_empty_cart": "Vreau să-mi văd coșul" + "view_empty_cart": "Vezi coșul" }, "share": { "copy_to_clipboard": "Copiați linkul", @@ -332,6 +332,13 @@ }, "page": { "title": "Titlul paginii" + }, + "announcements": { + "previous_announcement": "Anunțul anterior", + "next_announcement": "Anunțul următor", + "carousel": "Carusel", + "announcement": "Anunț", + "announcement_bar": "Bară cu anunțuri" } }, "localization": { @@ -452,17 +459,30 @@ }, "gift_cards": { "issued": { - "title": "Iată cardul dvs. cadou de {{ value }} pentru {{ shop }}!", + "title": "Iată soldul aferent cardurilor cadou, în valoare de {{ value }}, pentru {{ shop }}!", "subtext": "Cardul dvs. cadou", "gift_card_code": "Codul cardului cadou", - "shop_link": "Continuați cumpărăturile", - "remaining_html": "Mai aveți {{ balance }}", + "shop_link": "Vizitează magazinul online", "add_to_apple_wallet": "Adăugați la Apple Wallet", "qr_image_alt": "Cod QR – scanați-l ca să valorificați cardul cadou", - "copy_code": "Copiați codul", + "copy_code": "Copiază codul cardului cadou", "expired": "Expirat", "copy_code_success": "Codul a fost copiat cu succes", - "print_gift_card": "Imprimați" + "how_to_use_gift_card": "Folosește codul cardului cadou online sau codul QR în magazin", + "expiration_date": "Expiră pe {{ expires_on }}" + } + }, + "recipient": { + "form": { + "checkbox": "Vreau să trimit acest lucru drept cadou", + "email_label": "Adresă de e-mail destinatar", + "email": "Adresă de e-mail", + "name_label": "Nume destinatar (opțional)", + "name": "Nume", + "message_label": "Mesaj (opțional)", + "message": "Mesaj", + "max_characters": "Maximum {{ max_chars }} (de) caractere", + "email_label_optional_for_no_js_behavior": "Adresă de e-mail destinatar (opțional)" } } } diff --git a/locales/ru.json b/locales/ru.json index 0803b719a50..1bbad01500f 100644 --- a/locales/ru.json +++ b/locales/ru.json @@ -342,6 +342,13 @@ }, "page": { "title": "Название страницы" + }, + "announcements": { + "previous_announcement": "Предыдущее объявление", + "next_announcement": "Следующее объявление", + "carousel": "Карусель", + "announcement": "Объявление", + "announcement_bar": "Строка объявления" } }, "localization": { @@ -462,17 +469,30 @@ }, "gift_cards": { "issued": { - "title": "Вот ваша подарочная карта на {{ value }} для магазина {{ shop }}!", + "title": "Вот ваша подарочная карта с номиналом {{ value }} для магазина {{ shop }}!", "subtext": "Ваша подарочная карта", "gift_card_code": "Код подарочной карты", - "shop_link": "Продолжить покупки", - "remaining_html": "Остаток на счету: {{ balance }}", + "shop_link": "Посетить онлайн-магазин", "add_to_apple_wallet": "Добавить в Apple Wallet", "qr_image_alt": "Отсканируйте QR-код, чтобы использовать подарочную карту", - "copy_code": "Копировать код", + "copy_code": "Скопировать код подарочной карты", "expired": "Срок действия истек", "copy_code_success": "Код скопирован", - "print_gift_card": "Печать" + "how_to_use_gift_card": "Используйте код подарочной карты онлайн или отсканируйте QR-код в магазине", + "expiration_date": "Срок действия истекает {{ expires_on }}" + } + }, + "recipient": { + "form": { + "checkbox": "Я хочу отправить это в качестве подарка", + "email_label": "Электронный адрес получателя", + "email": "Электронный адрес", + "name_label": "Имя получателя (необязательно)", + "name": "Имя", + "message_label": "Сообщение (необязательно)", + "message": "Сообщение", + "max_characters": "Не больше {{ max_chars }} симв.", + "email_label_optional_for_no_js_behavior": "Электронный адрес получателя (необязательно)" } } } diff --git a/locales/sk-SK.json b/locales/sk-SK.json index ef5ef7bd771..7d49a3d4206 100644 --- a/locales/sk-SK.json +++ b/locales/sk-SK.json @@ -40,9 +40,9 @@ "reset": "Vymazať hľadaný výraz" }, "cart": { - "view": "Zobraziť môj košík ({{ count }})", + "view": "Zobraziť košík ({{ count }})", "item_added": "Položka sa pridala do vášho košíka", - "view_empty_cart": "Zobraziť môj košík" + "view_empty_cart": "Zobraziť košík" }, "share": { "copy_to_clipboard": "Kopírovať prepojenie", @@ -342,6 +342,13 @@ }, "page": { "title": "Názov stránky" + }, + "announcements": { + "previous_announcement": "Predchádzajúce oznámenie", + "next_announcement": "Nasledujúce oznámenie", + "carousel": "Karusel", + "announcement": "Oznámenie", + "announcement_bar": "Panel s oznámeniami" } }, "localization": { @@ -462,17 +469,30 @@ }, "gift_cards": { "issued": { - "title": "Váš darčekový poukaz v hodnote {{ value }} do obchodu {{ shop }}.", + "title": "Váš darčekový poukaz v hodnote {{ value }} do obchodu {{ shop }}!", "subtext": "Váš darčekový poukaz", "gift_card_code": "Kód darčekového poukazu", - "shop_link": "Pokračovať v nákupe", - "remaining_html": "Zostáva {{ balance }}", + "shop_link": "Navštíviť online obchod", "add_to_apple_wallet": "Pridať do aplikácie Apple Wallet", "qr_image_alt": "QR kód – naskenujte ho a uplatnite si darčekový poukaz", - "copy_code": "Kopírovať kód", + "copy_code": "Kopírovať kód darčekového poukazu", "expired": "Platnosť uplynula", "copy_code_success": "Kód sa úspešne skopíroval", - "print_gift_card": "Tlačiť" + "how_to_use_gift_card": "Použite online kód darčekového poukazu alebo QR kód v obchode", + "expiration_date": "Platnosť skončí {{ expires_on }}" + } + }, + "recipient": { + "form": { + "checkbox": "Chcem to poslať ako darček", + "email_label": "E-mail príjemcu", + "email": "E-mail", + "name_label": "Meno príjemcu (voliteľné)", + "name": "Meno", + "message_label": "Správa (voliteľné)", + "message": "Správa", + "max_characters": "Maximálny počet znakov: {{ max_chars }}", + "email_label_optional_for_no_js_behavior": "E-mail príjemcu (voliteľné)" } } } diff --git a/locales/sl-SI.json b/locales/sl-SI.json index 0bb440fc15b..a29bc140dae 100644 --- a/locales/sl-SI.json +++ b/locales/sl-SI.json @@ -40,9 +40,9 @@ "reset": "Počisti iskalni izraz" }, "cart": { - "view": "Prikaži mojo košarico ({{ count }})", + "view": "Prikaži košarico ({{ count }})", "item_added": "Artikel je dodan v košarico", - "view_empty_cart": "Ogled moje košarice" + "view_empty_cart": "Prikaži košarico" }, "share": { "copy_to_clipboard": "Kopiraj povezavo", @@ -342,6 +342,13 @@ }, "page": { "title": "Naslov strani" + }, + "announcements": { + "previous_announcement": "Prejšnje obvestilo", + "next_announcement": "Naslednje obvestilo", + "carousel": "Vrtiljak", + "announcement": "Obvestilo", + "announcement_bar": "Vrstica za obvestila" } }, "localization": { @@ -462,17 +469,30 @@ }, "gift_cards": { "issued": { - "title": "Tukaj je vaš darilni bon za trgovino {{ shop }} v znesku {{ value }}.", + "title": "To je darilni bon v vrednosti {{ value }} za trgovino {{ shop }}!", "subtext": "Vaš darilni bon", "gift_card_code": "Koda darilnega bona", - "shop_link": "Nadaljevanje z nakupovanjem", - "remaining_html": "Preostaja {{ balance }}", + "shop_link": "Obišči spletno trgovino", "add_to_apple_wallet": "Dodaj v Apple Wallet", "qr_image_alt": "Koda QR – optično jo preberite za unovčenje darilnega bona", - "copy_code": "Kopiraj kodo", + "copy_code": "Kopiraj kodo darilnega bona", "expired": "Poteklo", "copy_code_success": "Koda je uspešno kopirana", - "print_gift_card": "Natisni" + "how_to_use_gift_card": "Uporabite kodo darilnega bona v spletu ali kodo QR v trgovini", + "expiration_date": "Poteče {{ expires_on }}" + } + }, + "recipient": { + "form": { + "checkbox": "Želim poslati kot darilo", + "email_label": "E-poštni naslov prejemnika", + "email": "E-poštni naslov", + "name_label": "Ime prejemnika (izbirno)", + "name": "Ime", + "message_label": "Sporočilo (izbirno)", + "message": "Sporočilo", + "max_characters": "Največje št. znakov: {{ max_chars }}", + "email_label_optional_for_no_js_behavior": "E-poštni naslov prejemnika (izbirno)" } } } diff --git a/locales/sv.json b/locales/sv.json index c47b5dbcec1..a194309c5f7 100644 --- a/locales/sv.json +++ b/locales/sv.json @@ -40,9 +40,9 @@ "reset": "Rensa sökord" }, "cart": { - "view": "Visa min varukorg ({{ count }})", + "view": "Visa varukorg ({{ count }})", "item_added": "Artikeln har lagts till i varukorgen", - "view_empty_cart": "Se min varukorg" + "view_empty_cart": "Visa varukorg" }, "share": { "copy_to_clipboard": "Kopiera länk", @@ -322,6 +322,13 @@ }, "page": { "title": "Sidrubrik" + }, + "announcements": { + "previous_announcement": "Tidigare meddelande", + "next_announcement": "Kommande meddelande", + "carousel": "Karusell", + "announcement": "Meddelande", + "announcement_bar": "Meddelandefält" } }, "localization": { @@ -445,14 +452,27 @@ "title": "Här är ditt presentkort värt {{ value }} för {{ shop }}!", "subtext": "Ditt presentkort", "gift_card_code": "Presentkortskod", - "shop_link": "Fortsätt shoppa", - "remaining_html": "Återstående {{ balance }}", + "shop_link": "Besök webbshop", "add_to_apple_wallet": "Lägg till i Apple Wallet", "qr_image_alt": "QR-kod – skanna för att lösa in presentkort", - "copy_code": "Kopiera kod", + "copy_code": "Kopiera presentkortskod", "expired": "Har gått ut", "copy_code_success": "Koden kopierades", - "print_gift_card": "Skriv ut" + "how_to_use_gift_card": "Använd presentkortskoden online eller QR-koden i butik", + "expiration_date": "Går ut {{ expires_on }}" + } + }, + "recipient": { + "form": { + "checkbox": "Jag vill skicka detta som en gåva", + "email_label": "Mottagarens e-postadress", + "email": "E-postadress", + "name_label": "Mottagarens namn (valfritt)", + "name": "Namn", + "message_label": "Meddelande (valfritt)", + "message": "Meddelande", + "max_characters": "Max. {{ max_chars }} tecken", + "email_label_optional_for_no_js_behavior": "Mottagarens e-postadress (valfritt)" } } } diff --git a/locales/sv.schema.json b/locales/sv.schema.json index ee992c8931a..8b42e9389d3 100644 --- a/locales/sv.schema.json +++ b/locales/sv.schema.json @@ -382,6 +382,14 @@ "content": "Lägg till en varumärkesbeskrivning i din butiks sidfot." } } + }, + "animations": { + "name": "Animeringar", + "settings": { + "animations_reveal_on_scroll": { + "label": "Visa avsnitt under bläddring" + } + } } }, "sections": { @@ -425,6 +433,46 @@ "options__4": { "label": "Extra stor" } + }, + "image_shape": { + "options__1": { + "label": "Standard" + }, + "options__2": { + "label": "Välvd" + }, + "options__3": { + "label": "Droppe" + }, + "options__4": { + "label": "Sparre vänster" + }, + "options__5": { + "label": "Sparre höger" + }, + "options__6": { + "label": "Diamant" + }, + "options__7": { + "label": "Parallelogram" + }, + "options__8": { + "label": "Rund" + }, + "label": "Bildform", + "info": "Kort i standardstil har inga ramar om en bildform är aktiv." + }, + "animation": { + "content": "Animeringar", + "image_behavior": { + "options__1": { + "label": "Inga" + }, + "options__2": { + "label": "Omgivande rörelse" + }, + "label": "Bildbeteende" + } } }, "announcement-bar": { @@ -453,6 +501,14 @@ }, "name": "Meddelande" } + }, + "settings": { + "auto_rotate": { + "label": "Rotera bilder automatiskt" + }, + "change_slides_speed": { + "label": "Byt bilder var" + } } }, "collage": { @@ -700,7 +756,7 @@ "label": "Beskrivning" }, "show_description": { - "label": "Visa produktseriebeskrivning från Shopify-admin" + "label": "Visa produktseriebeskrivning från Shopify admin" }, "description_style": { "label": "Beskrivningsstil", @@ -848,7 +904,7 @@ }, "header__9": { "content": "Följ på Shop", - "info": "Visa följarknappen för din butik i Shop-appen. [Mer information](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" + "info": "Shop Pay måste aktiveras för att kunder ska kunna följa din butik i Shop-appen från ditt skyltfönster. [Mer information](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" }, "enable_follow_on_shop": { "label": "Aktivera Följ på Shop" @@ -890,6 +946,9 @@ }, "options__2": { "label": "Megameny" + }, + "options__3": { + "label": "Låda" } }, "mobile_layout": { @@ -904,9 +963,6 @@ "label": "Vänster" } }, - "logo_header": { - "content": "Logotyp" - }, "logo_help": { "content": "Redigera din logotyp i [temainställningarna](/editor?context=theme&category=logo)." }, @@ -924,6 +980,24 @@ "options__4": { "label": "Alltid, minska logotypstorlek" } + }, + "header__3": { + "content": "Land/region-väljare" + }, + "header__4": { + "info": "Om du vill lägga till land/region går du till dina [marknadsinställningar.](/admin/settings/markets)" + }, + "enable_country_selector": { + "label": "Aktivera land/region-väljare" + }, + "header__5": { + "content": "Språkväljare" + }, + "header__6": { + "info": "Om du vill lägga till ett språk går du till dina [språkinställningar.](/admin/settings/languages)" + }, + "enable_language_selector": { + "label": "Aktivera språkväljare" } } }, @@ -942,19 +1016,12 @@ "stack_images_on_mobile": { "label": "Stapla bilder på mobil" }, - "adapt_height_first_image": { - "label": "Anpassa avsnittets höjd till storleken på första bilden.", - "info": "Skriver över inställning för bildbanner-höjden när den markeras." - }, "show_text_box": { "label": "Visa ruta på skrivbord" }, "image_overlay_opacity": { "label": "Bildens opacitet för överlagring" }, - "header": { - "content": "Mobil layout" - }, "show_text_below": { "label": "Visa ruta på mobil" }, @@ -1027,6 +1094,9 @@ "label": "Höger" }, "label": "Linjering av innehåll på mobil" + }, + "mobile": { + "content": "Mobil layout" } }, "blocks": { @@ -1574,6 +1644,10 @@ "show_dynamic_checkout": { "label": "Visa dynamiska utcheckningsknappar", "info": "Genom att använda tillgängliga betalningsmetoder i butiken kan kunder se valt alternativ, till exempel PayPal eller Apple Pay. [Läs mer](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)" + }, + "show_gift_card_recipient": { + "label": "Visa mottagarformulär för presentkortsprodukter", + "info": "Presentkortsprodukter kan skickas direkt till en mottagare med ett personligt meddelande. [Mer information](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields)" } }, "name": "Köpknappar" @@ -2343,8 +2417,7 @@ }, "video_url": { "label": "URL", - "placeholder": "Använd en YouTube- eller en Vimeo-URL", - "info": "Video spelas upp på sidan." + "info": "Använd en YouTube- eller en Vimeo-URL" }, "description": { "label": "Alternativtext för video", @@ -2356,6 +2429,24 @@ }, "full_width": { "label": "Ge avsnittet full bredd" + }, + "video": { + "label": "Video" + }, + "enable_video_looping": { + "label": "Spela video i en slinga" + }, + "header__1": { + "content": "Video på Shopify" + }, + "header__2": { + "content": "Eller bädda in video från URL" + }, + "header__3": { + "content": "Stil" + }, + "paragraph": { + "content": "Visas när ingen video på Shopify har valts." } }, "presets": { diff --git a/locales/th.json b/locales/th.json index 047ebdd6367..0f287687774 100644 --- a/locales/th.json +++ b/locales/th.json @@ -40,9 +40,9 @@ "reset": "ล้างคำที่ใช้ค้นหา" }, "cart": { - "view": "ดูรถตะกร้าสินค้าของฉัน ({{ count }})", + "view": "ดูตะกร้าสินค้า ({{ count }})", "item_added": "รายการที่เพิ่มในตะกร้าสินค้าของคุณ", - "view_empty_cart": "ดูตะกร้าสินค้าของฉัน" + "view_empty_cart": "ดูตะกร้าสินค้า" }, "share": { "copy_to_clipboard": "คัดลอกลิงก์", @@ -123,7 +123,7 @@ "price": { "from_price_html": "จาก {{ price }}", "regular_price": "ราคาปกติ", - "sale_price": "ราคาช่วงลดราคา", + "sale_price": "ราคาโปรโมชัน", "unit_price": "ราคาต่อหน่วย" }, "share": "แชร์สินค้ารายการนี้", @@ -132,7 +132,7 @@ "vendor": "ผู้ขาย", "video_exit_message": "{{ title }} เปิดวิดีโอแบบเต็มหน้าจอในหน้าต่างเดียวกัน", "xr_button": "ดูในพื้นที่ของคุณ", - "xr_button_label": "ดูในพื้นที่ของคุณ โหลดรายการในหน้าต่างการสร้างวัตถุเสมือน", + "xr_button_label": "ดูในพื้นที่ของคุณ โหลดรายการในหน้าต่างความเป็นจริงเสริม", "pickup_availability": { "view_store_info": "ดูข้อมูลร้านค้า", "check_other_stores": "ตรวจสอบความพร้อมที่ร้านค้าอื่นๆ", @@ -322,6 +322,13 @@ }, "page": { "title": "ชื่อหน้า" + }, + "announcements": { + "previous_announcement": "การประกาศก่อนหน้า", + "next_announcement": "การประกาศถัดไป", + "carousel": "ภาพสไลด์", + "announcement": "การประกาศ", + "announcement_bar": "แถบประกาศ" } }, "localization": { @@ -442,17 +449,30 @@ }, "gift_cards": { "issued": { - "title": "นี่คือบัตรของขวัญมูลค่า {{ value }} สำหรับใช้ที่ {{ shop }}!", + "title": "นี่คือยอดคงเหลือในบัตรของขวัญมูลค่า {{ value }} สำหรับใช้ที่ {{ shop }}!", "subtext": "บัตรของขวัญของคุณ", "gift_card_code": "รหัสบัตรของขวัญ", - "shop_link": "เลือกซื้อต่อ", - "remaining_html": "คงเหลือ {{ balance }}", + "shop_link": "เยี่ยมชมร้านค้าออนไลน์", "add_to_apple_wallet": "เพิ่มลงใน Apple Wallet", "qr_image_alt": "คิวอาร์โค้ด — สแกนเพื่อแลกใช้บัตรของขวัญ", - "copy_code": "คัดลอกโค้ด", + "copy_code": "คัดลอกรหัสบัตรของขวัญ", "expired": "หมดอายุแล้ว", "copy_code_success": "คัดลอกรหัสสำเร็จ", - "print_gift_card": "พิมพ์" + "how_to_use_gift_card": "ใช้รหัสบัตรของขวัญทางออนไลน์หรือใช้คิวอาร์โค้ดในร้านค้า", + "expiration_date": "หมดอายุเมื่อ {{ expires_on }}" + } + }, + "recipient": { + "form": { + "checkbox": "ฉันต้องการส่งสิ่งนี้เป็นของขวัญ", + "email_label": "อีเมลผู้รับ", + "email": "อีเมล", + "name_label": "ชื่อผู้รับ (ระบุหรือไม่ก็ได้)", + "name": "ชื่อ", + "message_label": "ข้อความ (ระบุหรือไม่ก็ได้)", + "message": "ข้อความ", + "max_characters": "สูงสุด {{ max_chars }} อักขระ", + "email_label_optional_for_no_js_behavior": "อีเมลผู้รับ (ระบุหรือไม่ก็ได้)" } } } diff --git a/locales/th.schema.json b/locales/th.schema.json index cbb0201aa2e..c927affe674 100644 --- a/locales/th.schema.json +++ b/locales/th.schema.json @@ -382,6 +382,14 @@ "content": "เพิ่มคำอธิบายแบรนด์ไปยังส่วนท้ายของหน้าร้านคุณ" } } + }, + "animations": { + "name": "ภาพเคลื่อนไหว", + "settings": { + "animations_reveal_on_scroll": { + "label": "แสดงส่วนเมื่อเลื่อนหน้าจอ" + } + } } }, "sections": { @@ -425,6 +433,46 @@ "options__4": { "label": "ขนาดใหญ่พิเศษ" } + }, + "image_shape": { + "options__1": { + "label": "ค่าเริ่มต้น" + }, + "options__2": { + "label": "รูปโค้ง" + }, + "options__3": { + "label": "หยดน้ำ" + }, + "options__4": { + "label": "บั้งชี้ไปทางซ้าย" + }, + "options__5": { + "label": "บั้งชี้ไปทางขวา" + }, + "options__6": { + "label": "เพชร" + }, + "options__7": { + "label": "สี่เหลี่ยมด้านขนาน" + }, + "options__8": { + "label": "โค้งมน" + }, + "label": "รูปทรงภาพ", + "info": "บัตรรูปแบบมาตรฐานจะไม่มีขอบเมื่อเปิดใช้รูปทรงภาพ" + }, + "animation": { + "content": "ภาพเคลื่อนไหว", + "image_behavior": { + "options__1": { + "label": "ไม่มี" + }, + "options__2": { + "label": "การเคลื่อนไหวแวดล้อม" + }, + "label": "พฤติกรรมภาพ" + } } }, "announcement-bar": { @@ -453,6 +501,14 @@ }, "name": "การประกาศ" } + }, + "settings": { + "auto_rotate": { + "label": "หมุนสไลด์อัตโนมัติ" + }, + "change_slides_speed": { + "label": "เปลี่ยนสไลด์ทุก" + } } }, "collage": { @@ -650,7 +706,7 @@ } }, "featured-collection": { - "name": "คอลเลกชันแนะนำ", + "name": "คอลเลกชันเด่น", "settings": { "title": { "label": "หัวเรื่อง" @@ -749,7 +805,7 @@ } }, "presets": { - "name": "คอลเลกชันแนะนำ" + "name": "คอลเลกชันเด่น" } }, "footer": { @@ -848,7 +904,7 @@ }, "header__9": { "content": "ติดตามบน Shop", - "info": "แสดงปุ่มติดตามบนหน้าร้านของคุณในแอป Shop [ดูข้อมูลเพิ่มเติม](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" + "info": "คุณต้องเปิดใช้งาน Shop Pay เพื่อให้ลูกค้าสามารถติดตามร้านค้าของคุณในแอป Shop ได้จากหน้าร้าน [ดูข้อมูลเพิ่มเติม](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" }, "enable_follow_on_shop": { "label": "เปิดใช้งานการติดตามบน Shop" @@ -890,6 +946,9 @@ }, "options__2": { "label": "เมกะเมนู" + }, + "options__3": { + "label": "แถบตัวเลือกแบบซ่อนได้" } }, "mobile_layout": { @@ -904,9 +963,6 @@ "label": "ซ้าย" } }, - "logo_header": { - "content": "โลโก้" - }, "logo_help": { "content": "แก้ไขโลโก้ของคุณใน [การตั้งค่าธีม ](/editor?context=theme&category=logo)" }, @@ -924,6 +980,24 @@ "options__4": { "label": "เสมอ, ลดขนาดโลโก้" } + }, + "header__3": { + "content": "ตัวเลือกประเทศ/ภูมิภาค" + }, + "header__4": { + "info": "หากต้องการเพิ่มประเทศ/ภูมิภาค ให้ไปที่ [การตั้งค่าตลาด](/admin/settings/markets)" + }, + "enable_country_selector": { + "label": "เปิดใช้งานตัวเลือกประเทศ/ภูมิภาค" + }, + "header__5": { + "content": "ตัวเลือกภาษา" + }, + "header__6": { + "info": "หากต้องการเพิ่มภาษา ให้ไปที่ [การตั้งค่าภาษา](/admin/settings/languages)" + }, + "enable_language_selector": { + "label": "เปิดใช้งานตัวเลือกภาษา" } } }, @@ -942,19 +1016,12 @@ "stack_images_on_mobile": { "label": "การรวมภาพบนมือถือ" }, - "adapt_height_first_image": { - "label": "ปรับความสูงของส่วนตามขนาดของรูปภาพแรก", - "info": "เขียนทับการตั้งค่าความสูงของแบนเนอร์รูปภาพเมื่อทำเครื่องหมาย" - }, "show_text_box": { "label": "แสดงคอนเทนเนอร์บนเดสก์ท็อป" }, "image_overlay_opacity": { "label": "ความทึบของการวางซ้อนรูปภาพ" }, - "header": { - "content": "เลย์เอาต์ของมือถือ" - }, "show_text_below": { "label": "แสดงคอนเทนเนอร์บนมือถือ" }, @@ -1027,6 +1094,9 @@ "label": "ขวา" }, "label": "การจัดวางเนื้อหาบนมือถือ" + }, + "mobile": { + "content": "เลย์เอาต์สำหรับมือถือ" } }, "blocks": { @@ -1574,6 +1644,10 @@ "show_dynamic_checkout": { "label": "แสดงปุ่มชำระเงินแบบไดนามิก", "info": "วิธีการชำระเงินที่พร้อมใช้งานบนร้านค้าของคุณ จะช่วยให้ลูกค้าเห็นตัวเลือกที่พวกเขาต้องการ เช่น PayPal หรือ Apple Pay [ดูข้อมูลเพิ่มเติม](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)" + }, + "show_gift_card_recipient": { + "label": "แสดงแบบฟอร์มข้อมูลผู้รับสำหรับผลิตภัณฑ์บัตรของขวัญ", + "info": "คุณสามารถเลือกส่งผลิตภัณฑ์บัตรของขวัญตรงถึงผู้รับพร้อมข้อความของตนเองได้ [ดูข้อมูลเพิ่มเติม](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields)" } }, "name": "ปุ่มซื้อ" @@ -2343,8 +2417,7 @@ }, "video_url": { "label": "URL", - "placeholder": "ใช้ URL ของ YouTube หรือ Vimeo", - "info": "วิดีโอจะเล่นในหน้า" + "info": "ใช้ URL ของ YouTube หรือ Vimeo" }, "description": { "label": "ข้อความกำกับวิดีโอ", @@ -2356,6 +2429,24 @@ }, "full_width": { "label": "ทำให้ส่วนเต็มความกว้าง" + }, + "video": { + "label": "วิดีโอ" + }, + "enable_video_looping": { + "label": "เล่นวิดีโอแบบวนซ้ำ" + }, + "header__1": { + "content": "วิดีโอโฮสต์โดย Shopify" + }, + "header__2": { + "content": "หรือวิดีโอที่ติดตั้งภายในจาก URL" + }, + "header__3": { + "content": "สไตล์" + }, + "paragraph": { + "content": "แสดงเมื่อไม่มีวิดีโอโฮสต์โดย Shopify ที่ถูกเลือก" } }, "presets": { diff --git a/locales/tr.json b/locales/tr.json index c9cd19365d9..108e18c8a50 100644 --- a/locales/tr.json +++ b/locales/tr.json @@ -40,9 +40,9 @@ "reset": "Arama terimini temizle" }, "cart": { - "view": "Sepeti göster ({{ count }})", + "view": "Sepeti görüntüle ({{ count }})", "item_added": "Ürün sepetinize eklendi", - "view_empty_cart": "Sepetimi görüntüle" + "view_empty_cart": "Sepeti görüntüle" }, "share": { "copy_to_clipboard": "Bağlantıyı kopyala", @@ -322,6 +322,13 @@ }, "page": { "title": "Sayfa başlığı" + }, + "announcements": { + "previous_announcement": "Önceki duyuru", + "next_announcement": "Sonraki duyuru", + "carousel": "Carousel", + "announcement": "Duyuru", + "announcement_bar": "Duyuru çubuğu" } }, "localization": { @@ -442,17 +449,30 @@ }, "gift_cards": { "issued": { - "title": "İşte {{ shop }} için {{ value }} hediye kartınız!", + "title": "İşte {{ shop }} için {{ value }} tutarındaki hediye kartı bakiyeniz!", "subtext": "Hediye kartınız", "gift_card_code": "Hediye kartı kodu", - "shop_link": "Alışverişe devam et", - "remaining_html": "{{ balance }} kaldı", + "shop_link": "Online mağazayı ziyaret edin", "add_to_apple_wallet": "Apple Wallet'a ekle", "qr_image_alt": "QR kodu: Hediye kartını kullanmak için tarayın", - "copy_code": "Kodu kopyala", + "copy_code": "Hediye kartı kodunu kopyala", "expired": "Süresi sona erdi", "copy_code_success": "Kod başarıyla kopyalandı", - "print_gift_card": "Yazdır" + "how_to_use_gift_card": "Hediye kartı kodunu online olarak veya QR kodunu mağazada kullanın", + "expiration_date": "Sona erme tarihi: {{ expires_on }}" + } + }, + "recipient": { + "form": { + "checkbox": "Bunu hediye olarak göndermek istiyorum", + "email_label": "Alıcı e-postası", + "email": "E-posta", + "name_label": "Alıcı adı (isteğe bağlı)", + "name": "Ad", + "message_label": "Mesaj (isteğe bağlı)", + "message": "Mesaj", + "max_characters": "Maksimum {{ max_chars }} karakter", + "email_label_optional_for_no_js_behavior": "Alıcı e-postası (isteğe bağlı)" } } } diff --git a/locales/tr.schema.json b/locales/tr.schema.json index 8a89e305d9c..187ce8c63c1 100644 --- a/locales/tr.schema.json +++ b/locales/tr.schema.json @@ -382,6 +382,14 @@ "content": "Mağazanızın altbilgisine bir marka açıklaması ekleyin." } } + }, + "animations": { + "name": "Animasyonlar", + "settings": { + "animations_reveal_on_scroll": { + "label": "Kaydırırken bölümleri göster" + } + } } }, "sections": { @@ -425,6 +433,46 @@ "options__4": { "label": "Çok büyük" } + }, + "image_shape": { + "options__1": { + "label": "Varsayılan" + }, + "options__2": { + "label": "Kemer" + }, + "options__3": { + "label": "Leke" + }, + "options__4": { + "label": "Sola ok" + }, + "options__5": { + "label": "Sağa ok" + }, + "options__6": { + "label": "Baklava" + }, + "options__7": { + "label": "Paralelkenar" + }, + "options__8": { + "label": "Yuvarlak" + }, + "label": "Görsel şekli", + "info": "Bir görsel şeklinin etkin olduğu standart stile sahip kartlarda sınır bulunmaz" + }, + "animation": { + "content": "Animasyonlar", + "image_behavior": { + "options__1": { + "label": "Yok" + }, + "options__2": { + "label": "Ortam içinde hareket" + }, + "label": "Görsel davranışı" + } } }, "announcement-bar": { @@ -453,6 +501,14 @@ } } } + }, + "settings": { + "auto_rotate": { + "label": "Slaytları otomatik olarak döndür" + }, + "change_slides_speed": { + "label": "Slaytları şu zaman aralığında değiştir:" + } } }, "collage": { @@ -848,7 +904,7 @@ }, "header__9": { "content": "Follow on Shop", - "info": "Shop uygulamasında, vitrininiz için takip düğmesini gösterin. [Daha fazla bilgi edinin](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" + "info": "Müşterilerin, Shop uygulamasındaki mağazanızı vitrininizden takip edebilmesi için Shop Pay'i etkinleştirmeniz gerekir. [Daha fazla bilgi edinin](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" }, "enable_follow_on_shop": { "label": "Follow on Shop'u etkinleştir" @@ -890,6 +946,9 @@ }, "options__2": { "label": "Mega menü" + }, + "options__3": { + "label": "Çekmece" } }, "mobile_layout": { @@ -904,9 +963,6 @@ "label": "Sol" } }, - "logo_header": { - "content": "Logo" - }, "logo_help": { "content": "Logonuzu şurada düzenleyin: [tema ayarları](/editor?context=theme&category=logo)." }, @@ -924,6 +980,24 @@ "options__4": { "label": "Her zaman, logo boyutunu küçült" } + }, + "header__3": { + "content": "Ülke/bölge seçici" + }, + "header__4": { + "info": "Ülke/bölge eklemek için [pazar ayarlarınıza](/admin/settings/markets) gidin." + }, + "enable_country_selector": { + "label": "Ülke/bölge seçiciyi etkinleştirin" + }, + "header__5": { + "content": "Dil seçici" + }, + "header__6": { + "info": "Dil eklemek için [dil ayarlarınıza](/admin/settings/languages) gidin." + }, + "enable_language_selector": { + "label": "Dil seçiciyi etkinleştir" } } }, @@ -942,19 +1016,12 @@ "stack_images_on_mobile": { "label": "Mobilde görselleri üst üste ekle" }, - "adapt_height_first_image": { - "label": "Bölüm yüksekliğini ilk görselin boyutuna uyarla", - "info": "İşaretlendiğinde görüntü banner'ı yükseklik ayarının üzerine yazar." - }, "show_text_box": { "label": "Masaüstünde kapsayıcıyı göster" }, "image_overlay_opacity": { "label": "Görsel yer paylaşımı opaklığı" }, - "header": { - "content": "Mobil Düzen" - }, "show_text_below": { "label": "Mobil cihaz üzerinde kapsayıcıyı göster" }, @@ -1027,6 +1094,9 @@ "label": "Sağ" }, "label": "Mobil içerik hizalaması" + }, + "mobile": { + "content": "Mobil Düzen" } }, "blocks": { @@ -1583,6 +1653,10 @@ "show_dynamic_checkout": { "label": "Dinamik ödeme düğmelerini göster", "info": "Müşteriler, mağazanızda bulunan ödeme yöntemlerini kullanarak PayPal veya Apple Pay gibi tercih ettikleri seçeneği görür. [Daha fazla bilgi edinin](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)" + }, + "show_gift_card_recipient": { + "label": "Hediye kartı ürünleri için alıcı bilgi formunu göster", + "info": "Hediye kartı ürünleri, isteğe bağlı olarak kişisel bir mesajla birlikte doğrudan bir alıcıya gönderilebilir. [Daha fazla bilgi edinin](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields)" } } }, @@ -2343,8 +2417,7 @@ }, "video_url": { "label": "URL", - "placeholder": "YouTube veya Vimeo URL'si kullanın", - "info": "Video sayfada oynatılır." + "info": "YouTube veya Vimeo URL'si kullan" }, "description": { "label": "Video alternatif metni", @@ -2356,6 +2429,24 @@ }, "full_width": { "label": "Bölümü tam genişlikli yap" + }, + "video": { + "label": "Video" + }, + "enable_video_looping": { + "label": "Videoyu döngü halinde oynat" + }, + "header__1": { + "content": "Shopify'da barındırılan videolar" + }, + "header__2": { + "content": "URL'den video ekle" + }, + "header__3": { + "content": "Stil" + }, + "paragraph": { + "content": "Shopify'da barındırılan bir video seçilmediğinde görünür." } }, "presets": { diff --git a/locales/vi.json b/locales/vi.json index bd622a6f314..3c1f42fed3f 100644 --- a/locales/vi.json +++ b/locales/vi.json @@ -40,9 +40,9 @@ "reset": "Xóa cụm từ tìm kiếm" }, "cart": { - "view": "Xem giỏ hàng của tôi ({{ count }})", + "view": "Xem giỏ hàng ({{ count }})", "item_added": "Mặt hàng đã thêm vào giỏ hàng", - "view_empty_cart": "Xem giỏ hàng của tôi" + "view_empty_cart": "Xem giỏ hàng" }, "share": { "copy_to_clipboard": "Sao chép liên kết", @@ -123,7 +123,7 @@ "price": { "from_price_html": "Từ {{ price }}", "regular_price": "Giá thông thường", - "sale_price": "Giá bán", + "sale_price": "Giá ưu đãi", "unit_price": "Đơn giá" }, "share": "Chia sẻ sản phẩm này", @@ -132,7 +132,7 @@ "vendor": "Nhà cung cấp", "video_exit_message": "{{ title }} mở video toàn màn hình ở cùng một cửa sổ.", "xr_button": "Xem tại không gian của bạn", - "xr_button_label": "Xem tại không gian của bạn, tải mặt hàng trong cửa sổ thực tế tăng cường", + "xr_button_label": "Xem tại không gian của bạn, tải mặt hàng trong cửa sổ thực tế ảo tăng cường", "pickup_availability": { "view_store_info": "Xem thông tin cửa hàng", "check_other_stores": "Kiểm tra tình trạng còn hàng tại các cửa hàng khác", @@ -322,6 +322,13 @@ }, "page": { "title": "Tiêu đề trang" + }, + "announcements": { + "previous_announcement": "Thông báo trước", + "next_announcement": "Thông báo sau", + "carousel": "Quay vòng", + "announcement": "Thông báo", + "announcement_bar": "Thanh thông báo" } }, "localization": { @@ -386,7 +393,7 @@ "orders": { "title": "Lịch sử đặt hàng", "order_number": "Đơn hàng", - "order_number_link": "Đơn hàng số {{ number }}", + "order_number_link": "Mã đơn hàng {{ number }}", "date": "Ngày", "payment_status": "Trạng thái thanh toán", "fulfillment_status": "Trạng thái thực hiện", @@ -442,17 +449,30 @@ }, "gift_cards": { "issued": { - "title": "Đây là thẻ quà tặng {{ value }} của bạn cho {{ shop }}!", + "title": "Đây là số dư thẻ quà tặng trị giá {{ value }} của bạn cho {{ shop }}!", "subtext": "Thẻ quà tặng của bạn", "gift_card_code": "Mã thẻ quà tặng", - "shop_link": "Tiếp tục mua sắm", - "remaining_html": "Còn lại {{ balance }}", + "shop_link": "Truy cập cửa hàng trực tuyến", "add_to_apple_wallet": "Thêm vào Apple Wallet", "qr_image_alt": "Mã QR — quét để đổi thẻ quà tặng", - "copy_code": "Sao chép mã", + "copy_code": "Sao chép mã thẻ quà tặng", "expired": "Đã hết hạn", "copy_code_success": "Đã sao chép mã thành công", - "print_gift_card": "In" + "how_to_use_gift_card": "Sử dụng mã thẻ quà tặng trực tuyến hoặc mã QR tại cửa hàng", + "expiration_date": "Hết hạn vào {{ expires_on }}" + } + }, + "recipient": { + "form": { + "checkbox": "Tôi muốn gửi làm quà", + "email_label": "Email người nhận", + "email": "Email", + "name_label": "Tên người nhận (không bắt buộc)", + "name": "Tên", + "message_label": "Tin nhắn (không bắt buộc)", + "message": "Tin nhắn", + "max_characters": "Tối đa {{ max_chars }} ký tự", + "email_label_optional_for_no_js_behavior": "Email người nhận (không bắt buộc)" } } } diff --git a/locales/vi.schema.json b/locales/vi.schema.json index 980128296a1..9b186d64d27 100644 --- a/locales/vi.schema.json +++ b/locales/vi.schema.json @@ -382,6 +382,14 @@ "content": "Thêm mô tả thương hiệu vào chân trang của cửa hàng." } } + }, + "animations": { + "name": "Hiệu ứng động", + "settings": { + "animations_reveal_on_scroll": { + "label": "Hiển thị các mục khi cuộn" + } + } } }, "sections": { @@ -425,6 +433,46 @@ "options__4": { "label": "Cực lớn" } + }, + "image_shape": { + "options__1": { + "label": "Mặc định" + }, + "options__2": { + "label": "Hình vòm" + }, + "options__3": { + "label": "Giọt nước" + }, + "options__4": { + "label": "Dấu chữ V trái" + }, + "options__5": { + "label": "Dấu chữ V phải" + }, + "options__6": { + "label": "Hình thoi" + }, + "options__7": { + "label": "Hình bình hành" + }, + "options__8": { + "label": "Hình tròn" + }, + "label": "Hình dạng ảnh", + "info": "Thẻ kiểu dáng tiêu chuẩn không có đường viền khi đang áp dụng hình dạng ảnh." + }, + "animation": { + "content": "Hiệu ứng động", + "image_behavior": { + "options__1": { + "label": "Không" + }, + "options__2": { + "label": "Chuyển động xung quanh" + }, + "label": "Hành vi của ảnh" + } } }, "announcement-bar": { @@ -453,6 +501,14 @@ } } } + }, + "settings": { + "auto_rotate": { + "label": "Tự động xoay vòng các trang chiếu" + }, + "change_slides_speed": { + "label": "Đổi trang chiếu sau mỗi" + } } }, "collage": { @@ -848,7 +904,7 @@ }, "header__9": { "content": "Theo dõi trên Shop", - "info": "Hiển thị nút theo dõi cho cửa hàng của bạn trên ứng dụng Shop. [Tìm hiểu thêm](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" + "info": "Bạn phải bật Shop Pay để cho phép khách hàng theo dõi cửa hàng trên ứng dụng Shop từ cửa hàng của bạn. [Tìm hiểu thêm](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" }, "enable_follow_on_shop": { "label": "Bật tính năng Theo dõi trên Shop" @@ -890,6 +946,9 @@ }, "options__2": { "label": "Menu lớn" + }, + "options__3": { + "label": "Ngăn" } }, "mobile_layout": { @@ -904,9 +963,6 @@ "label": "Bên trái" } }, - "logo_header": { - "content": "Logo" - }, "logo_help": { "content": "Chỉnh sửa logo trong [cài đặt chủ đề](/editor?context=theme&category=logo)." }, @@ -924,6 +980,24 @@ "options__4": { "label": "Luôn luôn, giảm kích cỡ logo" } + }, + "header__3": { + "content": "Hộp chọn quốc gia/vùng" + }, + "header__4": { + "info": "Để thêm quốc gia/khu vực, vào [cài đặt thị trường.](/admin/settings/markets)" + }, + "enable_country_selector": { + "label": "Bật hộp chọn quốc gia/vùng" + }, + "header__5": { + "content": "Hộp chọn ngôn ngữ" + }, + "header__6": { + "info": "Để thêm ngôn ngữ, vào [cài đặt ngôn ngữ](/admin/settings/languages)." + }, + "enable_language_selector": { + "label": "Bật hộp chọn ngôn ngữ" } } }, @@ -942,19 +1016,12 @@ "stack_images_on_mobile": { "label": "Xếp chồng hình ảnh trên điện thoại di động" }, - "adapt_height_first_image": { - "label": "Điều chỉnh độ cao mục theo cỡ hình ảnh thứ nhất", - "info": "Nếu chọn, cài đặt chiều cao biểu ngữ hình ảnh sẽ được ghi đè." - }, "show_text_box": { "label": "Hiện vùng chứa trên màn hình nền" }, "image_overlay_opacity": { "label": "Độ chắn sáng của lớp phủ hình ảnh" }, - "header": { - "content": "Bố cục trên thiết bị di động" - }, "show_text_below": { "label": "Hiện vùng chứa trên thiết bị di động" }, @@ -1027,6 +1094,9 @@ "label": "Bên phải" }, "label": "Căn chỉnh nội dung trên thiết bị di động" + }, + "mobile": { + "content": "Bố cục trên thiết bị di động" } }, "blocks": { @@ -1584,6 +1654,10 @@ "show_dynamic_checkout": { "label": "Hiển thị nút thanh toán động", "info": "Sử dụng phương thức thanh toán được hỗ trợ trong cửa hàng, khách hàng sẽ thấy tùy chọn ưu tiên của họ như PayPal hoặc Apple Pay. [Tìm hiểu thêm](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)" + }, + "show_gift_card_recipient": { + "label": "Hiển thị biểu mẫu thông tin người nhận cho sản phẩm thẻ quà tặng", + "info": "Có thể tùy ý gửi các sản phẩm thẻ quà tặng trực tiếp cho người nhận kèm tin nhắn cá nhân. [Tìm hiểu thêm](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields)" } } }, @@ -2343,8 +2417,7 @@ }, "video_url": { "label": "URL", - "placeholder": "Sử dụng URL Youtube hoặc Vimeo", - "info": "Video phát trong trang." + "info": "Sử dụng URL YouTube hoặc Vimeo" }, "description": { "label": "Văn bản thay thế cho video", @@ -2356,6 +2429,24 @@ }, "full_width": { "label": "Tạo chiều rộng đầy đủ cho mục" + }, + "video": { + "label": "Video" + }, + "enable_video_looping": { + "label": "Phát video ở chế độ vòng lặp" + }, + "header__1": { + "content": "Video được lưu trữ trên Shopify" + }, + "header__2": { + "content": "Hoặc video nhúng từ URL" + }, + "header__3": { + "content": "Kiểu" + }, + "paragraph": { + "content": "Hiển thị khi không chọn video được lưu trữ trên Shopify." } }, "presets": { diff --git a/locales/zh-CN.json b/locales/zh-CN.json index 4fa70aa6f61..01be733e3ec 100644 --- a/locales/zh-CN.json +++ b/locales/zh-CN.json @@ -40,9 +40,9 @@ "reset": "清除搜索词" }, "cart": { - "view": "查看我的购物车 ({{ count }})", + "view": "查看购物车 ({{ count }})", "item_added": "商品已加入购物车", - "view_empty_cart": "查看我的购物车" + "view_empty_cart": "查看购物车" }, "share": { "copy_to_clipboard": "复制链接", @@ -322,6 +322,13 @@ }, "page": { "title": "页面标题" + }, + "announcements": { + "previous_announcement": "上一个公告", + "next_announcement": "下一个公告", + "carousel": "轮播", + "announcement": "公告", + "announcement_bar": "公告栏" } }, "localization": { @@ -442,17 +449,30 @@ }, "gift_cards": { "issued": { - "title": "这是您获得的 {{ shop }} 的 {{ value }} 礼品卡！", + "title": "您的 {{ shop }} 的礼品卡余额为 {{ value }}！", "subtext": "您的礼品卡", "gift_card_code": "礼品卡代码", - "shop_link": "继续购物", - "remaining_html": "余额为 {{ balance }}", + "shop_link": "访问在线商店", "add_to_apple_wallet": "添加到 Apple Wallet", "qr_image_alt": "二维码 — 扫描兑换礼品卡", - "copy_code": "复制代码", + "copy_code": "复制礼品卡代码", "expired": "已过期", "copy_code_success": "已成功复制代码", - "print_gift_card": "打印" + "how_to_use_gift_card": "在线使用礼品卡代码或在店内使用二维码", + "expiration_date": "过期日期：{{ expires_on }}" + } + }, + "recipient": { + "form": { + "checkbox": "我想将此礼品卡发送为礼品", + "email_label": "收件人邮箱", + "email": "邮箱", + "name_label": "收件人姓名（可选）", + "name": "姓名", + "message_label": "消息（可选）", + "message": "消息", + "max_characters": "不超过 {{ max_chars }} 个字符", + "email_label_optional_for_no_js_behavior": "收件人邮箱（可选）" } } } diff --git a/locales/zh-CN.schema.json b/locales/zh-CN.schema.json index bf9a244d36c..bf8d1101f50 100644 --- a/locales/zh-CN.schema.json +++ b/locales/zh-CN.schema.json @@ -382,6 +382,14 @@ "content": "在商店的页脚中添加品牌描述。" } } + }, + "animations": { + "name": "动画", + "settings": { + "animations_reveal_on_scroll": { + "label": "在滚动时显示分区" + } + } } }, "sections": { @@ -425,6 +433,46 @@ "options__4": { "label": "特大" } + }, + "image_shape": { + "options__1": { + "label": "默认" + }, + "options__2": { + "label": "弧形" + }, + "options__3": { + "label": "Blob" + }, + "options__4": { + "label": "向左 V 形" + }, + "options__5": { + "label": "向右 V 形" + }, + "options__6": { + "label": "菱形" + }, + "options__7": { + "label": "平行四边形" + }, + "options__8": { + "label": "圆形" + }, + "label": "图片形状", + "info": "当“图片形状”为非“默认”选项时，标准样式的卡没有边框。" + }, + "animation": { + "content": "动画", + "image_behavior": { + "options__1": { + "label": "无" + }, + "options__2": { + "label": "环境移动" + }, + "label": "图片行为" + } } }, "announcement-bar": { @@ -453,6 +501,14 @@ }, "name": "公告" } + }, + "settings": { + "auto_rotate": { + "label": "自动旋转幻灯片" + }, + "change_slides_speed": { + "label": "幻灯片更换时间间隔" + } } }, "collage": { @@ -848,7 +904,7 @@ }, "header__9": { "content": "在 Shop 中关注", - "info": "在 Shop 应用中显示您店面的关注按钮。[了解详细信息](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" + "info": "若要使客户能够通过您的店面在 Shop 应用中关注您的商店，则必须启用 Shop Pay。[了解详细信息](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" }, "enable_follow_on_shop": { "label": "启用在 Shop 中关注" @@ -890,6 +946,9 @@ }, "options__2": { "label": "超级菜单" + }, + "options__3": { + "label": "抽屉" } }, "mobile_layout": { @@ -904,9 +963,6 @@ "label": "左" } }, - "logo_header": { - "content": "logo" - }, "logo_help": { "content": "在[模板设置]](/editor?context=theme&category=logo)中编辑您的 logo。" }, @@ -924,6 +980,24 @@ "options__4": { "label": "始终，缩小 logo 尺寸" } + }, + "header__3": { + "content": "国家/地区选择器" + }, + "header__4": { + "info": "若要添加国家/地区，请转到 [市场设置](/admin/settings/markets)。" + }, + "enable_country_selector": { + "label": "启用国家/地区选择器" + }, + "header__5": { + "content": "语言选择器" + }, + "header__6": { + "info": "若要添加语言，请转到您的 [语言设置](/admin/settings/languages)。" + }, + "enable_language_selector": { + "label": "启用语言选择器" } } }, @@ -942,19 +1016,12 @@ "stack_images_on_mobile": { "label": "在移动设备上堆叠图片" }, - "adapt_height_first_image": { - "label": "使分区高度适应第一张图片大小", - "info": "当勾选时，覆盖图像横幅高度设置。" - }, "show_text_box": { "label": "在台式设备上显示容器" }, "image_overlay_opacity": { "label": "图片叠加不透明度" }, - "header": { - "content": "移动布局" - }, "show_text_below": { "label": "在移动设备上显示容器" }, @@ -1027,6 +1094,9 @@ "label": "右" }, "label": "移动设备内容对齐方式" + }, + "mobile": { + "content": "移动设备布局" } }, "blocks": { @@ -1574,6 +1644,10 @@ "show_dynamic_checkout": { "label": "显示动态结账按钮", "info": "通过使用您商店中提供的付款方式，客户会看到他们的首选付款方式，例如 PayPal 或 Apple Pay。[了解详细信息](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)" + }, + "show_gift_card_recipient": { + "label": "显示礼品卡产品的收件人信息表单", + "info": "客户可以选择直接将礼品卡产品发送给收件人并附加私人消息。[了解详细信息](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields)" } }, "name": "Buy Button" @@ -2343,8 +2417,7 @@ }, "video_url": { "label": "URL", - "placeholder": "使用 YouTube 或 Vimeo URL", - "info": "视频在页面中播放。" + "info": "使用 YouTube 或 Vimeo URL" }, "description": { "label": "视频替代文本", @@ -2356,6 +2429,24 @@ }, "full_width": { "label": "使分区展示全宽" + }, + "video": { + "label": "视频" + }, + "enable_video_looping": { + "label": "循环播放视频" + }, + "header__1": { + "content": "Shopify 托管视频" + }, + "header__2": { + "content": "或通过 URL 嵌入视频" + }, + "header__3": { + "content": "样式" + }, + "paragraph": { + "content": "在未选择 Shopify 托管视频时显示。" } }, "presets": { diff --git a/locales/zh-TW.json b/locales/zh-TW.json index 02018de1443..aef8a309792 100644 --- a/locales/zh-TW.json +++ b/locales/zh-TW.json @@ -40,9 +40,9 @@ "reset": "清除搜尋詞彙" }, "cart": { - "view": "檢視我的購物車 ({{ count }})", + "view": "檢視購物車 ({{ count }})", "item_added": "商品已加入購物車", - "view_empty_cart": "檢視我的購物車" + "view_empty_cart": "檢視購物車" }, "share": { "copy_to_clipboard": "複製連結", @@ -322,6 +322,13 @@ }, "page": { "title": "頁面標題" + }, + "announcements": { + "previous_announcement": "前一則公告", + "next_announcement": "下一則公告", + "carousel": "輪播", + "announcement": "公告", + "announcement_bar": "公告列" } }, "localization": { @@ -442,17 +449,30 @@ }, "gift_cards": { "issued": { - "title": "這是您在 {{ shop }} 價值 {{ value }} 的禮品卡！", + "title": "這是您在 {{ shop }} 餘額為 {{ value }} 的禮品卡！", "subtext": "您的禮品卡", "gift_card_code": "禮品卡代碼", - "shop_link": "繼續購物", - "remaining_html": "餘額 {{ balance }}", + "shop_link": "造訪網路商店", "add_to_apple_wallet": "加入 Apple 錢包", "qr_image_alt": "QR 碼 — 掃描以兌換禮品卡", - "copy_code": "複製程式碼", + "copy_code": "複製禮品卡代碼", "expired": "已到期", "copy_code_success": "代碼已成功複製", - "print_gift_card": "列印" + "how_to_use_gift_card": "請在網路商店使用禮品卡代碼或在實體商店使用 QR 碼", + "expiration_date": "於 {{ expires_on }}到期" + } + }, + "recipient": { + "form": { + "checkbox": "我要將此作為禮物傳送", + "email_label": "收件者電子郵件", + "email": "電子郵件", + "name_label": "收件者姓名 (選填)", + "name": "姓名", + "message_label": "訊息 (選填)", + "message": "訊息", + "max_characters": "最多 {{ max_chars }} 個字元", + "email_label_optional_for_no_js_behavior": "收件者電子郵件 (選填)" } } } diff --git a/locales/zh-TW.schema.json b/locales/zh-TW.schema.json index ce0157282b6..7a476e98448 100644 --- a/locales/zh-TW.schema.json +++ b/locales/zh-TW.schema.json @@ -382,6 +382,14 @@ "content": "在商店頁尾新增品牌說明。" } } + }, + "animations": { + "name": "動畫", + "settings": { + "animations_reveal_on_scroll": { + "label": "捲動時顯示區段" + } + } } }, "sections": { @@ -425,6 +433,46 @@ "options__4": { "label": "超大型" } + }, + "image_shape": { + "options__1": { + "label": "預設" + }, + "options__2": { + "label": "拱形" + }, + "options__3": { + "label": "斑點" + }, + "options__4": { + "label": "＞ 形箭頭向左" + }, + "options__5": { + "label": "＞ 形箭頭向右" + }, + "options__6": { + "label": "菱形" + }, + "options__7": { + "label": "平行四邊形" + }, + "options__8": { + "label": "圓形" + }, + "label": "圖片形狀", + "info": "啟用圖片形狀後，標準樣式的卡片不會有邊框。" + }, + "animation": { + "content": "動畫", + "image_behavior": { + "options__1": { + "label": "無" + }, + "options__2": { + "label": "緩慢移動" + }, + "label": "圖片行為" + } } }, "announcement-bar": { @@ -453,6 +501,14 @@ }, "name": "公告" } + }, + "settings": { + "auto_rotate": { + "label": "自動輪播投影片" + }, + "change_slides_speed": { + "label": "每過以下時間即變更投影片" + } } }, "collage": { @@ -848,7 +904,7 @@ }, "header__9": { "content": "在 Shop 上追蹤", - "info": "為 Shop 應用程式上的店面顯示追蹤按鈕。[瞭解詳情](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" + "info": "若要允許顧客透過您的店面在 Shop 應用程式上追蹤您的商店，您必須啟用 Shop Pay。[瞭解詳情](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)" }, "enable_follow_on_shop": { "label": "啟用「在 Shop 上追蹤」" @@ -890,6 +946,9 @@ }, "options__2": { "label": "大型選單" + }, + "options__3": { + "label": "隱藏式選單" } }, "mobile_layout": { @@ -904,9 +963,6 @@ "label": "靠左" } }, - "logo_header": { - "content": "標誌" - }, "logo_help": { "content": "在 [編輯佈景主題設定](/editor?context=theme&category=logo) 中編輯標誌。" }, @@ -924,6 +980,24 @@ "options__4": { "label": "永遠顯示，縮小標誌尺寸" } + }, + "header__3": { + "content": "國家/地區選擇器" + }, + "header__4": { + "info": "若要新增國家/地區，請前往 [市場設定](/admin/settings/markets)" + }, + "enable_country_selector": { + "label": "啟用國家/地區選擇器" + }, + "header__5": { + "content": "語言選擇器" + }, + "header__6": { + "info": "若要新增語言，請前往 [語言設定。](/admin/settings/languages)" + }, + "enable_language_selector": { + "label": "啟用語言選擇器" } } }, @@ -942,19 +1016,12 @@ "stack_images_on_mobile": { "label": "在行動裝置上堆疊圖片" }, - "adapt_height_first_image": { - "label": "配合的一張圖片尺寸的區段高度", - "info": "檢查時覆寫圖片橫幅高度設定。" - }, "show_text_box": { "label": "在桌面顯示容器" }, "image_overlay_opacity": { "label": "圖片疊加層透明度" }, - "header": { - "content": "行動版版面配置" - }, "show_text_below": { "label": "在行動版顯示容器" }, @@ -1027,6 +1094,9 @@ "label": "靠右" }, "label": "行動版內容對齊方式" + }, + "mobile": { + "content": "行動版版面配置" } }, "blocks": { @@ -1574,6 +1644,10 @@ "show_dynamic_checkout": { "label": "顯示動態結帳按鈕", "info": "顧客可以使用您商店可用的付款方式，看見其偏好選項，如 PayPal 或 Apple Pay 。[深入瞭解相關資訊](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)" + }, + "show_gift_card_recipient": { + "label": "顯示禮品卡商品的收件人資訊表單", + "info": "可選擇將禮品卡商品與個人化訊息直接傳送給收件人。[瞭解詳情](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields)" } }, "name": "購買按鈕" @@ -2343,8 +2417,7 @@ }, "video_url": { "label": "網址", - "placeholder": "使用 YouTube 或 Vimeo 網址", - "info": "在頁面播放影片" + "info": "使用 YouTube 或 Vimeo 網址" }, "description": { "label": "影片替代文字", @@ -2356,6 +2429,24 @@ }, "full_width": { "label": "讓區段以全寬度呈現" + }, + "video": { + "label": "影片" + }, + "enable_video_looping": { + "label": "循環播放影片" + }, + "header__1": { + "content": "Shopify 代管影片" + }, + "header__2": { + "content": "或從網址嵌入影片" + }, + "header__3": { + "content": "樣式" + }, + "paragraph": { + "content": "在沒有已選取的 Shopify 代管影片時顯示。" } }, "presets": { diff --git a/release-notes.md b/release-notes.md index e69de29bb2d..346ece05fea 100644 --- a/release-notes.md +++ b/release-notes.md @@ -0,0 +1,21 @@ +Dawn 9.0.0 introduces app blocks in header, video upload with auto-loop, "Click and hover" zoom, new desktop header menu style, a gift card recipient form, and some performance improvements on images. + +### Added +- You can now incorporate eligible app blocks directly into your header section, to the left of your cart icon. +- You can upload video files directly to Shopify and showcase them in the Video section. Additionally, you have the option to enable automatic video looping. +- We introduced a new "Click and hover" zoom option on desktop for product page images to add a more subtle hover effect. +- We've added a new style option to the desktop header menu, allowing you to collapse it into a hamburger icon with a popout drawer for a more compact and streamlined menu experience. +- We added a language and currency switcher to the header section for shops selling in multiple currencies or languages. +- The Slideshow, Image Banner, and Image with Text sections now have a subtle background animation option, which adds depth and dynamism to the overall design. +- You can allow gift cards to be sent to a recipient with a new form on the gift card product page. + +### Changed +- Important: The Richtext section heading type has been changed. This might result in your heading text being set back to the default value "Talk about your brand". This can happen when manually upgrading to this version. +- We reordered the "Color scheme" setting to improve hierarchy in the header section. +- The “Follow on Shop” option is enabled by default in the footer. +- Section headings now provide more formatting options like bold, italic, and links. + +### Fixes and improvements +- We improved the performance of the Multicolumn section by reducing the image sizes being loaded. +- We fixed the blog post slides to show a preview of the subsequent slide. +- We optimized the logo width to ensure the image looked crisp on all device sizes. diff --git a/sections/announcement-bar.liquid b/sections/announcement-bar.liquid index e44c4351608..9b747f0fbe0 100644 --- a/sections/announcement-bar.liquid +++ b/sections/announcement-bar.liquid @@ -1,32 +1,154 @@ -{%- for block in section.blocks -%} - {%- case block.type -%} - {%- when 'announcement' -%} -
    - {%- if block.settings.text != blank -%} - {%- if block.settings.link != blank -%} - - {%- endif -%} -
    -

    - {{ block.settings.text | escape }} +{{ 'component-slideshow.css' | asset_url | stylesheet_tag }} +{{ 'component-slider.css' | asset_url | stylesheet_tag }} + +

    + {%- if section.blocks.size == 1 -%} +
    + {%- if section.blocks.first.settings.text != blank -%} + {%- if section.blocks.first.settings.link != blank -%} + + {%- endif -%} +
    +

    + {{ section.blocks.first.settings.text | escape }} + {%- if section.blocks.first.settings.link != blank -%} + {% render 'icon-arrow' %} + {%- endif -%} +

    +
    + {%- if section.blocks.first.settings.link != blank -%} +     + {%- endif -%} + {%- endif -%} +
    + {%- elsif section.blocks.size > 1 -%} + +
    + +
    + {%- for block in section.blocks -%} +
    +
    + {%- if block.settings.text != blank -%} {%- if block.settings.link != blank -%} - {% render 'icon-arrow' %} + {%- endif -%} -

    +

    + {{ block.settings.text | escape }} + {%- if block.settings.link != blank -%} + {% render 'icon-arrow' %} + {%- endif -%} +

    + {%- if block.settings.link != blank -%} +     + {%- endif -%} + {%- endif -%}
    - {%- if block.settings.link != blank -%} - - {%- endif -%} - {%- endif -%} +
    + {%- endfor -%} +
    +
    - {%- endcase -%} -{%- endfor -%} +     + {%- endif -%} +
    {% schema %} { "name": "t:sections.announcement-bar.name", "max_blocks": 12, "class": "announcement-bar-section", + "settings": [ + { + "type": "select", + "id": "color_scheme", + "options": [ + { + "value": "accent-1", + "label": "t:sections.all.colors.accent_1.label" + }, + { + "value": "accent-2", + "label": "t:sections.all.colors.accent_2.label" + }, + { + "value": "background-1", + "label": "t:sections.all.colors.background_1.label" + }, + { + "value": "background-2", + "label": "t:sections.all.colors.background_2.label" + }, + { + "value": "inverse", + "label": "t:sections.all.colors.inverse.label" + } + ], + "default": "accent-1", + "label": "t:sections.all.colors.label" + }, + { + "type": "checkbox", + "id": "show_line_separator", + "default": true, + "label": "t:sections.header.settings.show_line_separator.label" + }, + { + "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": 9, + "step": 2, + "unit": "s", + "label": "t:sections.announcement-bar.settings.change_slides_speed.label", + "default": 5 + } + ], "blocks": [ { "type": "announcement", @@ -38,54 +160,6 @@ "default": "Welcome to our store", "label": "t:sections.announcement-bar.blocks.announcement.settings.text.label" }, - { - "type": "select", - "id": "text_alignment", - "options": [ - { - "value": "left", - "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__1.label" - }, - { - "value": "center", - "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__2.label" - }, - { - "value": "right", - "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__3.label" - } - ], - "default": "center", - "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.label" - }, - { - "type": "select", - "id": "color_scheme", - "options": [ - { - "value": "accent-1", - "label": "t:sections.all.colors.accent_1.label" - }, - { - "value": "accent-2", - "label": "t:sections.all.colors.accent_2.label" - }, - { - "value": "background-1", - "label": "t:sections.all.colors.background_1.label" - }, - { - "value": "background-2", - "label": "t:sections.all.colors.background_2.label" - }, - { - "value": "inverse", - "label": "t:sections.all.colors.inverse.label" - } - ], - "default": "accent-1", - "label": "t:sections.all.colors.label" - }, { "type": "url", "id": "link", diff --git a/sections/apps.liquid b/sections/apps.liquid index 5839be4b4bc..ce3adf469e8 100644 --- a/sections/apps.liquid +++ b/sections/apps.liquid @@ -1,4 +1,4 @@ -
    +
    {%- for block in section.blocks -%} {% render block %} {%- endfor -%} diff --git a/sections/collage.liquid b/sections/collage.liquid index 3ba716e0f76..228e22f731b 100644 --- a/sections/collage.liquid +++ b/sections/collage.liquid @@ -2,6 +2,7 @@ {{ '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 { @@ -17,16 +18,17 @@ } {%- endstyle -%} - -
    -

    {{ section.settings.heading | escape }}

    +

    + {{ section.settings.heading }} +

    {%- for block in section.blocks -%}
    {%- case block.type -%} {%- when 'image' -%} @@ -40,12 +42,45 @@ {% endif %} > {%- if block.settings.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.image - | image_url: width: 3000 - | image_tag: loading: 'lazy', sizes: sizes, widths: '550, 720, 990, 1100, 1500, 2200, 3000' - }} + {%- 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: + loading: 'lazy', + 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: + loading: 'lazy', + sizes: sizes, + widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200' + }} + {%- endif -%} {%- else -%} {{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }} {%- endif -%} @@ -208,7 +243,7 @@ }, "settings": [ { - "type": "text", + "type": "inline_richtext", "id": "heading", "default": "Multimedia collage", "label": "t:sections.collage.settings.heading.label" diff --git a/sections/collapsible-content.liquid b/sections/collapsible-content.liquid index 2de16174716..01ed143a3f2 100644 --- a/sections/collapsible-content.liquid +++ b/sections/collapsible-content.liquid @@ -1,6 +1,5 @@ {{ 'component-accordion.css' | asset_url | stylesheet_tag }} {{ 'collapsible-content.css' | asset_url | stylesheet_tag }} -{{ 'component-rte.css' | asset_url | stylesheet_tag }} {%- style -%} .section-{{ section.id }}-padding { @@ -25,8 +24,8 @@

    {{ section.settings.caption | escape }}

    {% endif %} {%- if section.settings.heading != blank -%} -

    - {{ section.settings.heading | escape }} +

    + {{ section.settings.heading }}

    {%- else -%} @@ -67,7 +66,7 @@ > {% render 'icon-accordion', icon: block.settings.icon %} -

    +

    {{ block.settings.heading | default: block.settings.page.title }}

    {% render 'icon-caret' %} @@ -106,7 +105,7 @@ "label": "t:sections.collapsible_content.settings.caption.label" }, { - "type": "text", + "type": "inline_richtext", "id": "heading", "label": "t:sections.collapsible_content.settings.heading.label", "default": "Collapsible content" diff --git a/sections/collection-list.liquid b/sections/collection-list.liquid index ab0e38d02b0..fd019e63b47 100644 --- a/sections/collection-list.liquid +++ b/sections/collection-list.liquid @@ -1,8 +1,6 @@ {{ '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 { @@ -30,15 +28,18 @@
    {%- unless section.settings.title == blank -%}
    -

    - {{ section.settings.title | escape }} +

    + {{ section.settings.title }}

    {%- if section.settings.show_view_all and show_mobile_slider -%} {{- 'sections.collection_list.view_all' | t -}} @@ -47,7 +48,7 @@
    {%- endunless -%} - +