Merge pull request #466 from PrestaShop/develop

Release 0.1.5

config/theme.yml

@@ -1,6 +1,6 @@
 name: hummingbird 
 display_name: Hummingbird
-version: 0.1.3
+version: 0.1.5
 author:
   name: "PrestaShop Team"
   email: "[email protected]"

modules/ps_emailsubscription/views/templates/hook/ps_emailsubscription-column.tpl

@@ -5,7 +5,7 @@
 
 <div class="block_newsletter" id="blockEmailSubscription_{$hookName}">
   <form action="{$urls.current_url}#blockEmailSubscription_{$hookName}" method="post">
-    <p id="block-newsletter-label">{l s='Get our latest news and special sales' d='Shop.Theme.Global'}</p>
+    <p id="block-newsletter-label-{$hookName}">{l s='Get our latest news and special sales' d='Shop.Theme.Global'}</p>
     <div class="mb-1">
       <input
         class="btn btn-primary float-end"
@@ -19,7 +19,8 @@
           type="email"
           value="{$value}"
           placeholder="{l s='Your email address' d='Shop.Forms.Labels'}"
-          aria-labelledby="block-newsletter-label"
+          aria-labelledby="block-newsletter-label-{$hookName}"
+          required
         >
       </div>
       <input type="hidden" name="blockHookName" value="{$hookName}" />

modules/ps_emailsubscription/views/templates/hook/ps_emailsubscription.tpl

@@ -9,7 +9,7 @@
   <div class="container px-1">
     <div class="{$componentName}__content row">
       <div class="{$componentName}__content__left col-md-5">
-        <p class="{$componentName}__label">{l s='Get our latest news and special sales' d='Shop.Theme.Global'}</p>
+        <p id="block-newsletter-label-{$hookName}" class="{$componentName}__label">{l s='Get our latest news and special sales' d='Shop.Theme.Global'}</p>
       </div>
 
       <div class="{$componentName}__content__right col-md-7">
@@ -21,7 +21,7 @@
               class="form-control"
               value="{$value}"
               placeholder="{l s='Your email address' d='Shop.Forms.Labels'}"
-              aria-labelledby="block-newsletter-label"
+              aria-labelledby="block-newsletter-label-{$hookName}"
               required
            >
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "prestashop-hummingbird-dev-tools",
-  "version": "1.0.0",
+  "version": "0.1.5",
   "description": "Tools to help while developing the Hummingbird theme",
   "engines": {
     "node": ">= 14"

src/js/modules/facetedsearch/index.ts

@@ -11,38 +11,60 @@ 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 = <target>filter.querySelector(Theme.selectors.facetedsearch.rangeContainer);
+
+    // Init basic slider data
+    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(<string>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) {
+        decimalCount = options.minFractionDigits;
+      }
+    }
+
+    // Minimum and maximum values
     const min = parseInt(<string>container.dataset.sliderMin, 10);
     const max = parseInt(<string>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: decimalCount,
+      [unitPosition]: unitPosition === 'prefix' ? unitSymbol : ` ${unitSymbol}`,
     });
 
     const sliderValues = JSON.parse(<string>container.dataset.sliderValues);

src/js/pages/checkout.ts

@@ -17,6 +17,7 @@ const initCheckout = () => {
   const termsModalElement = document.querySelector<HTMLLinkElement>(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,26 @@ const initCheckout = () => {
     });
   });
 
+  // Initial step settings
   steps.forEach((step, index) => {
+    // Get step content
     const stepContent = document.querySelector<HTMLElement>(
       CheckoutMap.steps.specificStepContent(step.dataset.step),
     );
 
+    // Get step selector button (toggler)
+    const stepButton = step.querySelector<HTMLButtonElement>('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<HTMLElement>(
           CheckoutMap.steps.specificStep(step.dataset.step),
         );
@@ -74,14 +83,15 @@ 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<HTMLButtonElement>('button');
-
-        button?.classList.add('btn-link');
+        stepButton?.classList.add('btn-link');
 
-        button?.addEventListener('click', () => {
+        stepButton?.addEventListener('click', () => {
           if (setProgress) {
             setProgress(index + 1);
           }
@@ -90,12 +100,10 @@ const initCheckout = () => {
         });
       }
 
+      // If the step is not finished yet, we disable the navigator
       if (stepContent.classList.contains('step--unreachable')) {
-        const button = step.querySelector<HTMLButtonElement>('button');
-
-        button?.setAttribute('disabled', 'true');
-
-        button?.addEventListener('click', () => {
+        stepButton?.setAttribute('disabled', 'true');
+        stepButton?.addEventListener('click', () => {
           toggleStep(stepContent, step);
         });
       }

src/scss/core/components/_checkout-steps.scss

@@ -98,4 +98,13 @@ $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);
+  }
 }

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;

src/scss/core/layout/_header-bottom.scss

@@ -6,4 +6,8 @@ $component-name: header-bottom;
       min-height: 4rem;
     }
   }
+
+  &__h1 {
+    font-size: unset;
+  }
 }

templates/_partials/header.tpl

@@ -32,7 +32,7 @@
       <div class="row align-items-center gx-2 {$headerBottomName}__row">
         <div class="col-auto logo order-xl-1 ms-lg-0 ms-2 me-lg-0 me-auto">
           {if $shop.logo_details}
-            {if $page.page_name == 'index'}<h1 class="mb-0">{/if}
+            {if $page.page_name == 'index'}<h1 class="{$headerBottomName}__h1 mb-0">{/if}
               {renderLogo}
             {if $page.page_name == 'index'}</h1>{/if}
           {/if}

templates/catalog/_partials/product-discounts.tpl

@@ -6,21 +6,21 @@
   {if $product.quantity_discounts}
     <p class="h6 product__discounts__title">{l s='Volume discounts' d='Shop.Theme.Catalog'}</p>
     {block name='product_discount_table'}
-      <div class="table-wrapper p-2 px-3">
-        <table class="product__discounts__table w-100">
+      <div class="table-wrapper border border-secondary py-2 px-0 px-md-3 mb-3">
+        <table class="table product__discounts__table w-100 mb-0">
           <thead>
           <tr>
-            <th>{l s='Quantity' d='Shop.Theme.Catalog'}</th>
-            <th>{$configuration.quantity_discount.label}</th>
-            <th>{l s='You Save' d='Shop.Theme.Catalog'}</th>
+            <th class="text-center">{l s='Quantity' d='Shop.Theme.Catalog'}</th>
+            <th class="text-center">{$configuration.quantity_discount.label}</th>
+            <th class="text-center">{l s='You Save' d='Shop.Theme.Catalog'}</th>
           </tr>
           </thead>
           <tbody>
           {foreach from=$product.quantity_discounts item='quantity_discount' name='quantity_discounts'}
             <tr data-discount-type="{$quantity_discount.reduction_type}" data-discount="{$quantity_discount.real_value}" data-discount-quantity="{$quantity_discount.quantity}">
-              <td>{$quantity_discount.quantity}</td>
-              <td>{$quantity_discount.discount}</td>
-              <td>{$quantity_discount.save}</td>
+              <td class="text-center">{$quantity_discount.quantity}</td>
+              <td class="text-center">{$quantity_discount.discount}</td>
+              <td class="text-center">{$quantity_discount.save}</td>
             </tr>
           {/foreach}
           </tbody>

templates/checkout/_partials/order-final-summary.tpl

@@ -86,7 +86,7 @@
               <div class="row align-items-center">
                 {if $selected_delivery_option.logo}
                   <div class="col-md-4 carrier__logo">
-                      <img src="{$selected_delivery_option.logo}" class="rounded" alt="{$selected_delivery_option.name}" loading="lazy" />
+                      <img src="{$selected_delivery_option.logo}" class="rounded img-fluid" alt="{$selected_delivery_option.name}" loading="lazy" />
                   </div>
                 {/if}
 

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'}