From 4c90f1de9bbdb3481bdeaf772e7d009ca623fdbc Mon Sep 17 00:00:00 2001 From: Simon Flaherty Date: Thu, 27 Jul 2023 15:37:33 +0200 Subject: [PATCH] Merging updates on main to branch (#2920) * Price per item, Popover and global style bugs (#2851) * Fix cart submission on Quick Order List (#2868) * replace translation string to have the translation visible (#2869) * B2B compare at price with price range (#2858) * Add sale badge and price-range for volume-pricing * Add compare_at price to PDP and Feat Prod. * Change opacity to 100% for price per item. * Update the logic * Hide price per item for unavailable variants. * Remove margin for dl. * Refactoring * Correct a mistake in liquid. * Change the JS logic back for updating price per item * Add compare at to prod card. Add style to compare at * Add missing shadow styles to inputs in Quick Order List (#2879) * Fix cart drawer for variant list and tablet spacing (#2880) * Replace generic section name with section ID. (#2884) * Fix error misalignment for Quick order list (#2887) * Fix error misalignment * Reduce top space. Address feedback. * Fix hardcoded info color (#2893) * Fix an error (#2903) * Fix social list styles loading (#2900) * v11.0.0 version bump and release notes (#2906) * Update quantity-popover.css Add new line at end of file * Revert "v11.0.0 version bump and release notes (#2906)" (#2915) This reverts commit 13dec2a98f18dca3a0d5d04319f31f5d3c9a77fc. * v11.0.0 version bump and release notes (#2916) --------- Co-authored-by: Sofia Matulis Co-authored-by: melissaperreault Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com> Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Co-authored-by: Kai --- assets/component-price.css | 7 +- assets/component-volume-pricing.css | 16 ++++ assets/global.js | 3 + assets/price-per-item.js | 2 - assets/quantity-popover.css | 15 ++++ assets/quick-order-list.css | 22 +++++- assets/quick-order-list.js | 36 ++++++++- config/settings_schema.json | 2 +- release-notes.md | 38 +++++----- sections/announcement-bar.liquid | 4 + sections/featured-product.liquid | 107 +++++++++++++++++++-------- sections/main-cart-items.liquid | 4 +- sections/main-product.liquid | 76 ++++++++++++++----- sections/quick-order-list.liquid | 39 +++++++--- sections/related-products.liquid | 2 +- snippets/card-product.liquid | 5 +- snippets/cart-drawer.liquid | 32 +++++--- snippets/icon-info.liquid | 2 +- snippets/price.liquid | 22 +++++- snippets/quick-order-list-row.liquid | 82 +++++++++++++------- 20 files changed, 389 insertions(+), 127 deletions(-) diff --git a/assets/component-price.css b/assets/component-price.css index c73146bf24e..17d6cf969b7 100644 --- a/assets/component-price.css +++ b/assets/component-price.css @@ -64,10 +64,15 @@ } .price--sold-out .price__badge-sold-out, -.price--on-sale .price__badge-sale { +.price--on-sale .price__badge-sale, +.volume-pricing--sale-badge .price__badge-sale { display: inline-block; } +.volume-pricing--sale-badge .price__badge-sale { + margin-left: 0.5rem; +} + .price--on-sale .price__sale { display: initial; flex-direction: row; diff --git a/assets/component-volume-pricing.css b/assets/component-volume-pricing.css index dc4ed2ae388..2729866c343 100644 --- a/assets/component-volume-pricing.css +++ b/assets/component-volume-pricing.css @@ -49,6 +49,22 @@ volume-pricing show-more-button { } .product-form__input .price-per-item { + color: rgba(var(--color-foreground)); font-size: 1.4rem; letter-spacing: 0.06rem; } + +.price-per-item dl { + margin: 0; +} + +.price-per-item dd { + margin-left: 0; +} + +.price-per-item__container .variant-item__old-price, +.price__regular .variant-item__old-price { + color: rgba(var(--color-foreground), 0.75); + font-size: 1.2rem; + letter-spacing: 0.07rem; +} diff --git a/assets/global.js b/assets/global.js index c4bda9ec3bf..c128d2dedc4 100644 --- a/assets/global.js +++ b/assets/global.js @@ -1124,6 +1124,7 @@ class VariantSelects extends HTMLElement { if (pricePerItemSource && pricePerItemDestination) { pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML; + pricePerItemDestination.classList.toggle('visibility-hidden', pricePerItemSource.classList.contains('visibility-hidden')); } const price = document.getElementById(`price-${this.dataset.section}`); @@ -1174,12 +1175,14 @@ class VariantSelects extends HTMLElement { const price = document.getElementById(`price-${this.dataset.section}`); const inventory = document.getElementById(`Inventory-${this.dataset.section}`); const sku = document.getElementById(`Sku-${this.dataset.section}`); + const pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`); if (!addButton) return; addButtonText.textContent = window.variantStrings.unavailable; if (price) price.classList.add('visibility-hidden'); if (inventory) inventory.classList.add('visibility-hidden'); if (sku) sku.classList.add('visibility-hidden'); + if (pricePerItem) pricePerItem.classList.add('visibility-hidden'); } getVariantData() { diff --git a/assets/price-per-item.js b/assets/price-per-item.js index 7bf83f3ab65..fdf37eb9700 100644 --- a/assets/price-per-item.js +++ b/assets/price-per-item.js @@ -72,7 +72,6 @@ if (!customElements.get('price-per-item')) { if (this.classList.contains('variant-item__price-per-item')) { this.currentQtyForVolumePricing = this.getCartQuantity(updatedCartQuantity); } - for (let pair of this.qtyPricePairs) { if (this.currentQtyForVolumePricing >= pair[0]) { const pricePerItemCurrent = document.querySelector(`price-per-item[id^="Price-Per-Item-${this.dataset.sectionId || this.dataset.variantId}"] .price-per-item span`); @@ -97,7 +96,6 @@ if (!customElements.get('price-per-item')) { this.qtyPricePairs.push([qty, price]); }); } - this.qtyPricePairs.reverse(); } } diff --git a/assets/quantity-popover.css b/assets/quantity-popover.css index eae0a897fbd..48645e71dd9 100644 --- a/assets/quantity-popover.css +++ b/assets/quantity-popover.css @@ -1,5 +1,6 @@ quantity-popover { position: relative; + display: block; } quantity-popover volume-pricing li:nth-child(odd) { @@ -22,12 +23,22 @@ quantity-popover volume-pricing li { max-width: 36rem; } +.quantity-popover__info .button-close, +.variant-remove-total quick-order-list-remove-all-button .button, +.quick-order-list-total__confirmation quick-order-list-remove-all-button .button, +quantity-popover quick-order-list-remove-button .button { + --shadow-opacity: 0; + --border-opacity: 0; +} + .quantity-popover__info-button { display: flex; align-items: center; margin: 0 0.4rem 0 0; min-width: 1.5rem; min-height: 1.5rem; + --shadow-opacity: 0; + --border-opacity: 0; } .quantity-popover__info-button--icon-with-label { @@ -79,6 +90,10 @@ quantity-popover volume-pricing li { justify-content: flex-end; } +.quantity-popover__info .volume-pricing-label~.button { + top: -0.2rem; +} + .quantity-popover__info .button .icon { width: 1.5rem; height: 1.5rem; diff --git a/assets/quick-order-list.css b/assets/quick-order-list.css index a29a2b95ea6..22a8fac96de 100644 --- a/assets/quick-order-list.css +++ b/assets/quick-order-list.css @@ -32,6 +32,14 @@ quick-order-list .quantity__button { text-align: center; } +.variant-item__quantity .quantity:before { + z-index: 0; +} + +.variant-item__quantity .quantity__button { + z-index: 1; +} + @media screen and (min-width: 990px) { .quick-order-list__total { position: sticky; @@ -281,6 +289,10 @@ quick-order-list-remove-button .icon-remove { padding: 0; } +.variant-remove-total .button--tertiary { + width: max-content; +} + .variant-remove-total .icon-remove { width: 1.2rem; height: 1.2rem; @@ -517,6 +529,10 @@ quick-order-list-remove-button:hover .icon-remove { vertical-align: middle; } + .quick-order-list__table .desktop-row-error td { + padding-top: 0; + } + .quick-order-list__table .variant-item--unit-price td { vertical-align: top; @@ -672,10 +688,14 @@ quick-order-list-remove-button { width: 100%; max-width: 36rem; } + + quick-order-list .tax-note { + text-align: center + } } quick-order-list .tax-note { margin-bottom: 2rem; display: block; width: 100%; -} \ No newline at end of file +} diff --git a/assets/quick-order-list.js b/assets/quick-order-list.js index ee0e966e6e9..7a597594774 100644 --- a/assets/quick-order-list.js +++ b/assets/quick-order-list.js @@ -62,12 +62,17 @@ customElements.define('quick-order-list-remove-all-button', QuickOrderListRemove class QuickOrderList extends HTMLElement { constructor() { super(); + this.cart = document.querySelector('cart-drawer'); this.actions = { add: 'ADD', update: 'UPDATE' } this.quickOrderListId = 'quick-order-list' this.variantItemStatusElement = document.getElementById('shopping-cart-variant-item-status'); + const form = this.querySelector('form'); + + form.addEventListener('submit', this.onSubmit.bind(this)); + const debouncedOnChange = debounce((event) => { this.onChange(event); }, ON_CHANGE_DEBOUNCE_TIMER); @@ -76,6 +81,10 @@ class QuickOrderList extends HTMLElement { cartUpdateUnsubscriber = undefined; + onSubmit(event) { + event.preventDefault(); + } + connectedCallback() { this.cartUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.cartUpdate, (event) => { if (event.source === this.quickOrderListId) { @@ -109,7 +118,7 @@ class QuickOrderList extends HTMLElement { } onCartUpdate() { - fetch(`${window.location.pathname}?section_id=quick-order-list`) + fetch(`${window.location.pathname}?section_id=${this.sectionId}`) .then((response) => response.text()) .then((responseText) => { const html = new DOMParser().parseFromString(responseText, 'text/html'); @@ -142,6 +151,11 @@ class QuickOrderList extends HTMLElement { id: 'quick-order-list-total', section: document.getElementById(this.quickOrderListId).dataset.id, selector: '.quick-order-list__total' + }, + { + id: 'CartDrawer', + selector: '#CartDrawer', + section: 'cart-drawer' } ]; } @@ -149,12 +163,20 @@ class QuickOrderList extends HTMLElement { renderSections(parsedState) { this.getSectionsToRender().forEach((section => { const sectionElement = document.getElementById(section.id); + if (sectionElement && sectionElement.parentElement && sectionElement.parentElement.classList.contains('drawer')) { + parsedState.items.length > 0 ? sectionElement.parentElement.classList.remove('is-empty') : sectionElement.parentElement.classList.add('is-empty'); + + setTimeout(() => { + document.querySelector('#CartDrawer-Overlay').addEventListener('click', this.cart.close.bind(this.cart)); + }); + } const elementToReplace = sectionElement && sectionElement.querySelector(section.selector) ? sectionElement.querySelector(section.selector) : sectionElement; if (elementToReplace) { elementToReplace.innerHTML = this.getSectionInnerHTML(parsedState.sections[section.section], section.selector); } })); + } updateMultipleQty(items) { @@ -262,9 +284,10 @@ class QuickOrderList extends HTMLElement { } else { this.updateMessage(-parseInt(quantityElement.dataset.cartQuantity)) } - }).catch(() => { + }).catch((error) => { this.querySelectorAll('.loading-overlay').forEach((overlay) => overlay.classList.add('hidden')); this.resetQuantityInput(id); + console.error(error); this.setErrorMessage(window.cartStrings.error); }) .finally(() => { @@ -326,8 +349,13 @@ class QuickOrderList extends HTMLElement { } updateLiveRegions(id, message) { - const variantItemError = document.getElementById(`Quick-order-list-item-error-${id}`); - if (variantItemError) variantItemError.querySelector('.variant-item__error-text').innerHTML = message; + const variantItemErrorDesktop = document.getElementById(`Quick-order-list-item-error-desktop-${id}`); + const variantItemErrorMobile = document.getElementById(`Quick-order-list-item-error-mobile-${id}`); + if (variantItemErrorDesktop) { + variantItemErrorDesktop.querySelector('.variant-item__error-text').innerHTML = message; + variantItemErrorDesktop.closest('tr').classList.remove('hidden'); + } + if (variantItemErrorMobile) variantItemErrorMobile.querySelector('.variant-item__error-text').innerHTML = message; this.variantItemStatusElement.setAttribute('aria-hidden', true); diff --git a/config/settings_schema.json b/config/settings_schema.json index e5836f0b756..90bdeaa356d 100644 --- a/config/settings_schema.json +++ b/config/settings_schema.json @@ -2,7 +2,7 @@ { "name": "theme_info", "theme_name": "Dawn", - "theme_version": "10.0.0", + "theme_version": "11.0.0", "theme_author": "Shopify", "theme_documentation_url": "https://help.shopify.com/manual/online-store/themes", "theme_support_url": "https://support.shopify.com/" diff --git a/release-notes.md b/release-notes.md index 3125a87b6be..d4dc701125b 100644 --- a/release-notes.md +++ b/release-notes.md @@ -1,26 +1,24 @@ -Dawn 10.0.0 introduces new color schemes, animation options across templates and sections, performance improvements for large images, an improved announcement bar, and the ability to change the shape of product cards images. +Dawn 11.0.0 introduces new customization options to the announcement bar, new animations and hover effects, and a Quick order list section to product pages. ### Added -- Important: Fade in animations will now be enabled by default on your theme. If you’d like to disable them, navigate to your theme settings → animations → uncheck “Reveal sections on scroll”. -- Important: We’ve introduced a new visual way of setting your theme's colors. In your theme settings, you can now configure 5+ color schemes and apply them across sections in your themes. The default colors are created based on your theme’s current color settings, but we recommend reviewing them before publishing. -- We’ve added new animations to your theme settings where you can have sections fade in or slide in when the user scrolls. -- You can pick a new hover effect for buttons and cards - 3D lift. -- You now have options to add animations on the Image with Text and Image Banner sections. -- We added options to change the shape of the product card images. -- We introduced the ability to send and schedule a gift card to a recipient. -- You can now create different color schemes and apply them across your pages and sections. +- You can now add multiple Announcement bar sections to your Header. +- You can now display social media icons in the Announcement bar. +- You can now add the country/region selector and the language selector to the Announcement bar. +- You can now set a different color scheme for your navigation menu than for your Header. +- We added a new “Zoom in on scroll” animation option to the Image with text and Image banner sections. +- We added a new “Vertical lift” hover effect option to cards and buttons. +- You can now apply the outline button style to the button on Image with text. +- You can now adjust the bottom padding on the Subtotal section in the cart. +- We introduced a new Quick order list section to the product template. This allows you to optimize your product pages for bulk buying. +- Customers who qualify for volume pricing will now see the different price breaks on your product pages. ### Changed -- Important: Color schemes now apply to content on the Image Banner and Slideshow sections, regardless of container visibility. Please review and adjust color schemes to ensure the content is readable. -- There are now unique identifiers on navigation links, which lets you add custom CSS in the Header section. -- We improved the announcement bar by adding a slider for each announcement instead of stacking them on top of each other. -- We introduced new placeholder images across all theme sections. +- We reduced the height of the Announcement bar section. +- You can now choose to auto rotate the Announcement bar slides every 3 seconds. The minimum was previously 5 seconds. +- Your mobile menu drawer will now appear full-width. +- The Featured collection section will now display placeholder product images until a collection is selected. ### Fixes and improvements -- We fixed some spacing issues in the mobile drawer. -- We improved the performance of the Collage section images. -- We fixed some accessibility issues with the language and currency picker in the mobile drawer. -- We fixed the facet filter animation duration to match the menu drawer. - -### Removed -- Important: Decorative icons will now always inherit text color. +- We fixed a bug where text links were not styled properly in the heading of the Related products section. +- We made light stylistic improvements to link styles, alignment and spacing for both the dropdown and mega menu types in the Header. +- We fixed a bug where the Footer would display extra white space when the “Show email signup” setting was left unchecked. \ No newline at end of file diff --git a/sections/announcement-bar.liquid b/sections/announcement-bar.liquid index 2dd6f21fa9d..92426f1261d 100644 --- a/sections/announcement-bar.liquid +++ b/sections/announcement-bar.liquid @@ -14,6 +14,10 @@ endif -%} +{% if social_icons %} + {{ 'component-list-social.css' | asset_url | stylesheet_tag }} +{% endif %} +
{%- if product.selected_or_first_available_variant.quantity_rule.increment > 1 -%} diff --git a/sections/main-cart-items.liquid b/sections/main-cart-items.liquid index c93eb7f6018..068f6840eed 100644 --- a/sections/main-cart-items.liquid +++ b/sections/main-cart-items.liquid @@ -319,7 +319,9 @@ hidden > {%- if has_qty_rules == false -%} - Volume pricing + + {{- 'products.product.volume_pricing.title' | t -}} + {%- endif -%}
{%- if item.variant.quantity_rule.increment > 1 -%} diff --git a/sections/main-product.liquid b/sections/main-product.liquid index 609aaf9bf84..8b9e9fc9b4c 100644 --- a/sections/main-product.liquid +++ b/sections/main-product.liquid @@ -275,24 +275,64 @@ endif -%} - - {%- if product.quantity_price_breaks_configured? -%} -
- {%- if current_qty_for_volume_pricing < volume_pricing_array.last.minimum_quantity -%} - {%- assign variant_price = product.selected_or_first_available_variant.price | money_with_currency -%} - {{ 'products.product.volume_pricing.price_at_each' | t: price: variant_price }} - {%- else -%} - {%- for price_break in volume_pricing_array -%} - {%- if current_qty_for_volume_pricing >= price_break.minimum_quantity -%} - {%- assign price_break_price = price_break.price | money_with_currency -%} - {{ 'products.product.volume_pricing.price_at_each' | t: price: price_break_price }} - {%- break -%} - {%- endif -%} - {%- endfor -%} - {%- endif -%} -
- {%- endif -%} - + {%- if product.quantity_price_breaks_configured? -%} + + {%- if product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%} + {%- assign variant_price_compare = product.selected_or_first_available_variant.compare_at_price -%} +
+ {%- if variant_price_compare -%} +
+ +
+ + {{ variant_price_compare | money_with_currency }} + +
+
+ {%- endif -%} + {%- if current_qty_for_volume_pricing < volume_pricing_array.last.minimum_quantity -%} + {%- assign variant_price = product.selected_or_first_available_variant.price | money_with_currency -%} + {{ 'products.product.volume_pricing.price_at_each' | t: price: variant_price }} + {%- else -%} + {%- for price_break in volume_pricing_array -%} + {%- if current_qty_for_volume_pricing >= price_break.minimum_quantity -%} + {%- assign price_break_price = price_break.price | money_with_currency -%} + {{ 'products.product.volume_pricing.price_at_each' | t: price: price_break_price }} + {%- break -%} + {%- endif -%} + {%- endfor -%} + {%- endif -%} +
+ {%- else -%} + {%- assign variant_price = product.selected_or_first_available_variant.price | money_with_currency -%} + {%- assign variant_price_compare = product.selected_or_first_available_variant.compare_at_price -%} +
+ {%- if variant_price_compare -%} +
+ +
+ + {{ variant_price_compare | money_with_currency }} + +
+ +
+ {{ 'products.product.volume_pricing.price_at_each' | t: price: variant_price }} +
+
+ {%- else -%} + {{ 'products.product.volume_pricing.price_at_each' | t: price: variant_price }} + {%- endif -%} +
+ {%- endif -%} + + {%- endif -%}
{%- if product.selected_or_first_available_variant.quantity_rule.increment > 1 -%} diff --git a/sections/quick-order-list.liquid b/sections/quick-order-list.liquid index ab2c4081aff..b2eb96dbfe6 100644 --- a/sections/quick-order-list.liquid +++ b/sections/quick-order-list.liquid @@ -140,9 +140,14 @@
{%- render 'loading-overlay' -%} - - {% render 'icon-remove' %} - {{ 'sections.quick_order_list.remove_all' | t }} + +
@@ -197,9 +202,15 @@
{%- render 'loading-overlay' -%} - - {% render 'icon-remove' %} - {{ 'sections.quick_order_list.remove_all' | t }} + +
@@ -217,16 +228,24 @@ {{ 'sections.quick_order_list.remove_all_items_confirmation' | t: quantity: items_in_cart }} - {{- 'sections.quick_order_list.remove_all' | t -}} + - {{- 'sections.quick_order_list.cancel' | t -}} + diff --git a/sections/related-products.liquid b/sections/related-products.liquid index 2a74777c93e..610e0d31144 100644 --- a/sections/related-products.liquid +++ b/sections/related-products.liquid @@ -111,7 +111,7 @@ "type": "color_scheme", "id": "color_scheme", "label": "t:sections.all.colors.label", - "info": "t:sections.image-banner.settings.color_scheme.info", + "info": "t:sections.all.colors.has_cards_info", "default": "background-1" }, { diff --git a/snippets/card-product.liquid b/snippets/card-product.liquid index e4944714e0b..b8be5fb6b86 100644 --- a/snippets/card-product.liquid +++ b/snippets/card-product.liquid @@ -21,6 +21,7 @@ {% endcomment %} {{ 'component-rating.css' | asset_url | stylesheet_tag }} +{{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }} {%- if card_product and card_product != empty -%} {%- liquid @@ -198,7 +199,7 @@

{%- endif -%} - {% render 'price', product: card_product, price_class: '' %} + {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %} {%- if card_product.quantity_price_breaks_configured? -%}
{{ 'products.product.volume_pricing.note' | t }} @@ -377,7 +378,7 @@
{{ 'products.product.vendor' | t }}
{%- endif -%} - {% render 'price' %} + {% render 'price', show_compare_at_price: true %}
diff --git a/snippets/cart-drawer.liquid b/snippets/cart-drawer.liquid index e403cf59b8b..c5a9d5300d7 100644 --- a/snippets/cart-drawer.liquid +++ b/snippets/cart-drawer.liquid @@ -275,20 +275,28 @@ if item.variant.quantity_rule.increment > 1 or item.variant.quantity_rule.min > 1 or item.variant.quantity_rule.max != null assign has_qty_rules = true endif - + assign has_vol_pricing = false if item.variant.quantity_price_breaks.size > 0 assign has_vol_pricing = true endif -%} - +
-
+
@@ -312,7 +320,11 @@ > @@ -341,13 +353,13 @@ {% render 'icon-info' %} {%- if has_vol_pricing -%} - Volume pricing available + {{ 'products.product.volume_pricing.note' | t }} {%- elsif has_qty_rules -%} - View quantity rules + {{ 'products.product.quantity.note' | t }} {%- endif -%} - {%- endif -%} + {%- endif -%} {%- if has_vol_pricing or has_qty_rules -%}