From b05fa8f0f685485438f3c18cc400f6e2eeead88e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicolas=20L=C5=93uillet?= Date: Thu, 12 Jan 2023 15:40:04 +0100 Subject: [PATCH 01/14] Improved a11y for ps-emailsubscription templates --- .../views/templates/hook/ps_emailsubscription-column.tpl | 1 + .../views/templates/hook/ps_emailsubscription.tpl | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/modules/ps_emailsubscription/views/templates/hook/ps_emailsubscription-column.tpl b/modules/ps_emailsubscription/views/templates/hook/ps_emailsubscription-column.tpl index d2a9b854b..678132609 100644 --- a/modules/ps_emailsubscription/views/templates/hook/ps_emailsubscription-column.tpl +++ b/modules/ps_emailsubscription/views/templates/hook/ps_emailsubscription-column.tpl @@ -20,6 +20,7 @@ value="{$value}" placeholder="{l s='Your email address' d='Shop.Forms.Labels'}" aria-labelledby="block-newsletter-label" + required > diff --git a/modules/ps_emailsubscription/views/templates/hook/ps_emailsubscription.tpl b/modules/ps_emailsubscription/views/templates/hook/ps_emailsubscription.tpl index 11561f371..c9d3f25b7 100644 --- a/modules/ps_emailsubscription/views/templates/hook/ps_emailsubscription.tpl +++ b/modules/ps_emailsubscription/views/templates/hook/ps_emailsubscription.tpl @@ -9,7 +9,7 @@
-

{l s='Get our latest news and special sales' d='Shop.Theme.Global'}

+

{l s='Get our latest news and special sales' d='Shop.Theme.Global'}

From 962c752b8ff1957492aa87f51f0620a67b98f4c7 Mon Sep 17 00:00:00 2001 From: Hlavtox Date: Tue, 31 Jan 2023 22:16:32 +0100 Subject: [PATCH 02/14] Fix checkout navigation, fix active button style --- src/js/pages/checkout.ts | 24 +++++++++++++++---- src/scss/core/components/_checkout-steps.scss | 8 +++++++ ...kout-steps.tpl => checkout-navigation.tpl} | 0 templates/checkout/checkout.tpl | 2 +- 4 files changed, 28 insertions(+), 6 deletions(-) rename templates/checkout/{checkout-steps.tpl => checkout-navigation.tpl} (100%) diff --git a/src/js/pages/checkout.ts b/src/js/pages/checkout.ts index 57918f547..f66a088a7 100644 --- a/src/js/pages/checkout.ts +++ b/src/js/pages/checkout.ts @@ -17,6 +17,7 @@ const initCheckout = () => { const termsModalElement = document.querySelector(CheckoutMap.checkoutModal); // Only UI things, the real toggle is handled by Bootstrap Tabs + // A thing we handle manually is the .active class on the toggling buttons const toggleStep = (content: HTMLElement, step?: HTMLElement) => { const currentContent = document.querySelector(CheckoutMap.steps.current); currentContent?.classList.remove('step--current', 'js-current-step'); @@ -51,18 +52,28 @@ const initCheckout = () => { }); }); + // Initial step settings steps.forEach((step, index) => { + + // Get step content const stepContent = document.querySelector( CheckoutMap.steps.specificStepContent(step.dataset.step), ); + // Get step selector button (toggler) + const stepButton = step.querySelector('button'); + if (stepContent) { + + // If step is finished, we mark it green if (stepContent.classList.contains('step--complete')) { step.classList.add('checkout__steps--success'); } + // Current step will get an active property if (stepContent.classList.contains('step--current')) { step.classList.add('checkout__steps--current'); + stepButton?.classList.add('active'); const responsiveStep = document.querySelector( CheckoutMap.steps.specificStep(step.dataset.step), ); @@ -74,14 +85,16 @@ const initCheckout = () => { if (setProgress) { setProgress(index + 1); } + } else { + stepButton?.classList.remove('active'); } + // If the step can be navigated if (stepContent.classList.contains('step--reachable')) { - const button = step.querySelector('button'); - button?.classList.add('btn-link'); + stepButton?.classList.add('btn-link'); - button?.addEventListener('click', () => { + stepButton?.addEventListener('click', () => { if (setProgress) { setProgress(index + 1); } @@ -90,12 +103,13 @@ const initCheckout = () => { }); } + // If the step is not finished yet, we disable the navigator if (stepContent.classList.contains('step--unreachable')) { const button = step.querySelector('button'); - button?.setAttribute('disabled', 'true'); + stepButton?.setAttribute('disabled', 'true'); - button?.addEventListener('click', () => { + stepButton?.addEventListener('click', () => { toggleStep(stepContent, step); }); } diff --git a/src/scss/core/components/_checkout-steps.scss b/src/scss/core/components/_checkout-steps.scss index b3f12acce..7767d0ecc 100644 --- a/src/scss/core/components/_checkout-steps.scss +++ b/src/scss/core/components/_checkout-steps.scss @@ -98,4 +98,12 @@ $component-name: checkout__steps; &__mobile { width: 100%; } + + /* Do not assign any styles to active tab */ + .nav-tabs .checkout__steps--success .nav-link.active { + color: var(--bs-success); + } + .nav-tabs .checkout__steps--current .nav-link.active { + color: var(--bs-gray-900); + } } diff --git a/templates/checkout/checkout-steps.tpl b/templates/checkout/checkout-navigation.tpl similarity index 100% rename from templates/checkout/checkout-steps.tpl rename to templates/checkout/checkout-navigation.tpl diff --git a/templates/checkout/checkout.tpl b/templates/checkout/checkout.tpl index fff0e2523..833423814 100644 --- a/templates/checkout/checkout.tpl +++ b/templates/checkout/checkout.tpl @@ -11,7 +11,7 @@ {/block} {block name='content_columns'} - {include file="checkout/checkout-steps.tpl"} + {include file="checkout/checkout-navigation.tpl"} {block name='checkout_notifications'} {include file='_partials/notifications.tpl'} From fbc211b5e2e27892a043d88f65aaf0415208f2d4 Mon Sep 17 00:00:00 2001 From: Hlavtox Date: Tue, 31 Jan 2023 22:23:34 +0100 Subject: [PATCH 03/14] Fix lint --- src/js/pages/checkout.ts | 6 ------ src/scss/core/components/_checkout-steps.scss | 1 + 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/src/js/pages/checkout.ts b/src/js/pages/checkout.ts index f66a088a7..a2e23358f 100644 --- a/src/js/pages/checkout.ts +++ b/src/js/pages/checkout.ts @@ -54,7 +54,6 @@ const initCheckout = () => { // Initial step settings steps.forEach((step, index) => { - // Get step content const stepContent = document.querySelector( CheckoutMap.steps.specificStepContent(step.dataset.step), @@ -64,7 +63,6 @@ const initCheckout = () => { const stepButton = step.querySelector('button'); if (stepContent) { - // If step is finished, we mark it green if (stepContent.classList.contains('step--complete')) { step.classList.add('checkout__steps--success'); @@ -91,7 +89,6 @@ const initCheckout = () => { // If the step can be navigated if (stepContent.classList.contains('step--reachable')) { - stepButton?.classList.add('btn-link'); stepButton?.addEventListener('click', () => { @@ -105,10 +102,7 @@ const initCheckout = () => { // If the step is not finished yet, we disable the navigator if (stepContent.classList.contains('step--unreachable')) { - const button = step.querySelector('button'); - stepButton?.setAttribute('disabled', 'true'); - stepButton?.addEventListener('click', () => { toggleStep(stepContent, step); }); diff --git a/src/scss/core/components/_checkout-steps.scss b/src/scss/core/components/_checkout-steps.scss index 7767d0ecc..c0f4236a5 100644 --- a/src/scss/core/components/_checkout-steps.scss +++ b/src/scss/core/components/_checkout-steps.scss @@ -103,6 +103,7 @@ $component-name: checkout__steps; .nav-tabs .checkout__steps--success .nav-link.active { color: var(--bs-success); } + .nav-tabs .checkout__steps--current .nav-link.active { color: var(--bs-gray-900); } From 73afbb955047c0ec6ada4f226235ed79dacf8dce Mon Sep 17 00:00:00 2001 From: Hlavtox Date: Tue, 31 Jan 2023 23:34:00 +0100 Subject: [PATCH 04/14] Fix weight slider breaking other sliders, fix number formatting --- src/js/modules/facetedsearch/index.ts | 67 ++++++++++++++++++--------- 1 file changed, 44 insertions(+), 23 deletions(-) diff --git a/src/js/modules/facetedsearch/index.ts b/src/js/modules/facetedsearch/index.ts index ef5388c5a..ba6b43e88 100644 --- a/src/js/modules/facetedsearch/index.ts +++ b/src/js/modules/facetedsearch/index.ts @@ -11,38 +11,59 @@ import filterHandler from './filter-handler'; const initSliders = () => { const {Theme} = window; + // Get all slider configurations found in the DOM document.querySelectorAll(Theme.selectors.facetedsearch.filterSlider).forEach((filter: HTMLElement) => { const container = filter.querySelector(Theme.selectors.facetedsearch.rangeContainer); + + // Init basic slider data + var unitPosition = 'suffix'; + var unitSymbol = container.dataset.sliderUnit; + var decimals = 2; + var decimalSeparator = '.'; + var thousandsSeparator = ''; + + // Specify further if there are more options, currently used for price slider, + // which is the only one providing price specifications. const options = JSON.parse(container.dataset.sliderSpecifications); - const signPosition = options.positivePattern.indexOf('¤') === 0 ? 'prefix' : 'suffix'; - // const sliderType = container.dataset.sliderSpecifications ? 'price' : 'weight'; - const sliderDirection = container.dataset.sliderDirection === '1' ? 'rtl' : 'ltr'; + if (options !== null) { + // Sign position + if (options.positivePattern !== undefined && options.positivePattern.indexOf('¤') === 0) { + unitPosition = 'prefix'; + } + + // Unit + if (options.currencySymbol !== undefined) { + unitSymbol = options.currencySymbol; + } + + // Separators + if (options.numberSymbols !== undefined) { + decimalSeparator = options.numberSymbols[0]; + thousandsSeparator = options.numberSymbols[1]; + } + + // Decimals + if (options.minFractionDigits !== undefined) { + decimals = options.minFractionDigits; + } + } + + // Minimum and maximum values const min = parseInt(container.dataset.sliderMin, 10); const max = parseInt(container.dataset.sliderMax, 10); + + // const sliderType = container.dataset.sliderSpecifications ? 'price' : 'weight'; + const sliderDirection = container.dataset.sliderDirection === '1' ? 'rtl' : 'ltr'; + // let format; let initiatedSlider: API; - // Not used for the moment - /* if (sliderType === 'price') { - format = wNumb({ - mark: ',', - thousand: ' ', - decimals: 0, - [signPosition]: - signPosition === 'prefix' ? options.currencySymbol : ` ${options.currencySymbol}`, - }); - } else if (sliderType === 'weight') { - format = wNumb({ - mark: ',', - thousand: ' ', - decimals: 0, - }); - } */ - + // Initialize tooltip format const tooltipsFormat = wNumb({ - decimals: 2, - [signPosition]: - signPosition === 'prefix' ? options.currencySymbol : ` ${options.currencySymbol}`, + mark: decimalSeparator, + thousand: thousandsSeparator, + decimals: decimals, + [unitPosition]: unitPosition === 'prefix' ? unitSymbol : ` ${unitSymbol}`, }); const sliderValues = JSON.parse(container.dataset.sliderValues); From 805abd38059176a8810821cb72b2ea2a382976c2 Mon Sep 17 00:00:00 2001 From: Hlavtox Date: Wed, 1 Feb 2023 00:36:51 +0100 Subject: [PATCH 05/14] Fix lint --- src/js/modules/facetedsearch/index.ts | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/js/modules/facetedsearch/index.ts b/src/js/modules/facetedsearch/index.ts index ba6b43e88..058f4ccd3 100644 --- a/src/js/modules/facetedsearch/index.ts +++ b/src/js/modules/facetedsearch/index.ts @@ -16,15 +16,16 @@ const initSliders = () => { const container = filter.querySelector(Theme.selectors.facetedsearch.rangeContainer); // Init basic slider data - var unitPosition = 'suffix'; - var unitSymbol = container.dataset.sliderUnit; - var decimals = 2; - var decimalSeparator = '.'; - var thousandsSeparator = ''; + let unitPosition = 'suffix'; + let unitSymbol = container.dataset.sliderUnit; + let decimalCount = 2; + let decimalSeparator = '.'; + let thousandsSeparator = ''; // Specify further if there are more options, currently used for price slider, // which is the only one providing price specifications. const options = JSON.parse(container.dataset.sliderSpecifications); + if (options !== null) { // Sign position if (options.positivePattern !== undefined && options.positivePattern.indexOf('¤') === 0) { @@ -44,7 +45,7 @@ const initSliders = () => { // Decimals if (options.minFractionDigits !== undefined) { - decimals = options.minFractionDigits; + decimalCount = options.minFractionDigits; } } @@ -62,7 +63,7 @@ const initSliders = () => { const tooltipsFormat = wNumb({ mark: decimalSeparator, thousand: thousandsSeparator, - decimals: decimals, + decimals: decimalCount, [unitPosition]: unitPosition === 'prefix' ? unitSymbol : ` ${unitSymbol}`, }); From 8ab9b537b55440fb2f8fb634973dcbd1d9ec5091 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20=C5=81ach?= Date: Fri, 3 Feb 2023 12:45:27 +0100 Subject: [PATCH 06/14] search results dropdown fix --- src/scss/core/components/_search.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/scss/core/components/_search.scss b/src/scss/core/components/_search.scss index 75d1fce5f..ba3dd52e8 100644 --- a/src/scss/core/components/_search.scss +++ b/src/scss/core/components/_search.scss @@ -62,7 +62,8 @@ $component-name: search; &-widgets { position: relative; - overflow: visible; + // stylelint-disable-next-line + overflow: visible !important; @include media-breakpoint-down(md) { max-width: inherit; From 5614369482764638c7a53841f2bdda4ef9c62439 Mon Sep 17 00:00:00 2001 From: nizelg <104589134+nizelg@users.noreply.github.com> Date: Mon, 13 Feb 2023 18:08:39 +0300 Subject: [PATCH 07/14] Update order-final-summary.tpl --- templates/checkout/_partials/order-final-summary.tpl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/checkout/_partials/order-final-summary.tpl b/templates/checkout/_partials/order-final-summary.tpl index 471fee5ca..e7750d267 100755 --- a/templates/checkout/_partials/order-final-summary.tpl +++ b/templates/checkout/_partials/order-final-summary.tpl @@ -86,7 +86,7 @@
{if $selected_delivery_option.logo} {/if} From d24b0c8ba01a829ffcdf17bb455259e442a890ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20=C5=81ach?= Date: Wed, 15 Feb 2023 09:57:28 +0100 Subject: [PATCH 08/14] shifted logo fix --- src/scss/core/layout/_header-bottom.scss | 4 ++++ templates/_partials/header.tpl | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/scss/core/layout/_header-bottom.scss b/src/scss/core/layout/_header-bottom.scss index 79e647e4a..ecd0d7731 100644 --- a/src/scss/core/layout/_header-bottom.scss +++ b/src/scss/core/layout/_header-bottom.scss @@ -6,4 +6,8 @@ $component-name: header-bottom; min-height: 4rem; } } + + &__h1 { + font-size: unset; + } } diff --git a/templates/_partials/header.tpl b/templates/_partials/header.tpl index 7743caf60..1bc70b868 100644 --- a/templates/_partials/header.tpl +++ b/templates/_partials/header.tpl @@ -32,7 +32,7 @@