Merge pull request #407 from JBLach/verify-the-compatibility-with-nat…

…ives-modules a few small fixes that have also been made in the classic theme in progress
PrestaShop · Jan 5, 2023 · a514114 · a514114
2 parents 0444131 + 7ca3654
commit a514114
Show file tree

Hide file tree

Showing 24 changed files with 193 additions and 63 deletions.
diff --git a/config/theme.yml b/config/theme.yml
@@ -182,3 +182,5 @@ theme_settings:
     new-products: layout-left-column
     prices-drop: layout-left-column
     contact: layout-left-column
+    manufacturer: layout-left-column
+    supplier: layout-left-column
diff --git a/modules/productcomments/views/templates/hook/confirm-modal.tpl b/modules/productcomments/views/templates/hook/confirm-modal.tpl
@@ -38,10 +38,10 @@
         </div>
         <div class="modal-footer">
           <div class="post-comment-buttons">
-            <button type="button" class="btn btn-comment-inverse btn-comment-huge refuse-button" data-bs-dismiss="modal" aria-label="{l s='No' d='Modules.Productcomments.Shop'}">
+            <button type="button" class="btn btn-outline-primary me-2 refuse-button" data-bs-dismiss="modal" aria-label="{l s='No' d='Modules.Productcomments.Shop'}">
               {l s='No' d='Modules.Productcomments.Shop'}
             </button>
-            <button type="button" class="btn btn-comment btn-comment-huge confirm-button" data-bs-dismiss="modal" aria-label="{l s='Yes' d='Modules.Productcomments.Shop'}">
+            <button type="button" class="btn btn-primary confirm-button" data-bs-dismiss="modal" aria-label="{l s='Yes' d='Modules.Productcomments.Shop'}">
               {l s='Yes' d='Modules.Productcomments.Shop'}
             </button>
           </div>

diff --git a/modules/ps_brandlist/views/templates/_partials/brand_text.tpl b/modules/ps_brandlist/views/templates/_partials/brand_text.tpl
@@ -2,12 +2,13 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  *}
+{$componentName = 'search-filters-modules'}
 
-<ul>
+<ul class="{$componentName}__list">
   {foreach from=$brands item=brand name=brand_list}
     {if $smarty.foreach.brand_list.iteration <= $text_list_nb}
-      <li class="facet-label">
-        <a href="{$brand['link']}" title="{$brand['name']}">
+      <li class="{$componentName}__item facet-label">
+        <a class="{$componentName}__item__link" href="{$brand['link']}" title="{$brand['name']}">
           {$brand['name']}
         </a>
       </li>

diff --git a/modules/ps_brandlist/views/templates/hook/ps_brandlist.tpl b/modules/ps_brandlist/views/templates/hook/ps_brandlist.tpl
@@ -2,15 +2,16 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  *}
+{$componentName = 'search-filters-modules'}
 
 <div id="search_filters_brands">
-  <section class="facet">
+  <section class="{$componentName} facet">
     {if $display_link_brand}
-      <a href="{$page_link}" class="h6 text-uppercase facet-label" title="{l s='brands' d='shop.theme.catalog'}">
+      <a href="{$page_link}" class="{$componentName}-title d-block mb-3" title="{l s='brands' d='shop.theme.catalog'}">
         {l s='Brands' d='Shop.Theme.Catalog'}
       </a>
     {else}
-      <p class="h6 text-uppercase facet-label">
+      <p class="{$componentName}-title">
         {l s='Brands' d='Shop.Theme.Catalog'}
       </p>
     {/if}
@@ -19,7 +20,7 @@
       {if $brands}
         {include file="module:ps_brandlist/views/templates/_partials/$brand_display_type.tpl" brands=$brands}
       {else}
-        <p>{l s='No brand' d='Shop.Theme.Catalog'}</p>
+        <p class="mb-0">{l s='No brand' d='Shop.Theme.Catalog'}</p>
       {/if}
     </div>
   </section>

diff --git a/modules/ps_customersignin/ps_customersignin.tpl b/modules/ps_customersignin/ps_customersignin.tpl
@@ -65,7 +65,13 @@
         </div>
       </div>
     {else}
-      <a href="{$urls.pages.my_account}" title="{l s='Log in to your customer account' d='Shop.Theme.Customeraccount'}" class="btn" rel="nofollow" role="button">
+      <a 
+        href="{$urls.pages.authentication}?back={$urls.current_url|urlencode}"
+        title="{l s='Log in to your customer account' d='Shop.Theme.Customeraccount'}"
+        class="btn"
+        rel="nofollow"
+        role="button"
+      >
         <i class="material-icons">&#xE7FD;</i>
         <span class="d-none d-md-inline">{l s='Sign in' d='Shop.Theme.Actions'}</span>
       </a>

diff --git a/modules/ps_emailalerts/views/templates/front/mailalerts-account-line.tpl b/modules/ps_emailalerts/views/templates/front/mailalerts-account-line.tpl
@@ -0,0 +1,24 @@
+{**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *}
+{$componentName = 'mailalerts-account-line'}
+
+<div class="{$componentName} d-flex flex-column position-relative"> 
+  <a href="{$mailAlert.link}" class="text-center">
+    <img src="{$mailAlert.cover_url}" alt="" />
+  </a>
+  <a class="mt-2" href="{$mailAlert.link}">
+    <div class="{$componentName}__product d-flex flex-column">
+      <span class="{$componentName}__product__name">{$mailAlert.name}</span>
+      <span class="{$componentName}__product__attributes mt-1">{$mailAlert.attributes_small}</span>
+    </div>
+  </a>
+  <a href="#"
+    title="{l s='Remove mail alert' d='Modules.Emailalerts.Shop'}"
+    class="js-remove-email-alert btn btn-link {$componentName}__remove"
+    rel="js-id-emailalerts-{$mailAlert.id_product|intval}-{$mailAlert.id_product_attribute|intval}"
+    data-url="{url entity='module' name='ps_emailalerts' controller='actions' params=['process' => 'remove']}">
+    <i class="material-icons">delete</i>
+  </a>
+</div>
diff --git a/modules/ps_emailalerts/views/templates/front/mailalerts-account.tpl b/modules/ps_emailalerts/views/templates/front/mailalerts-account.tpl
@@ -0,0 +1,21 @@
+{**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *}
+{extends file='customer/page.tpl'}
+
+{block name='page_title'}
+  {l s='My alerts' d='Modules.Emailalerts.Shop'}
+{/block}
+
+{block name='page_content'}
+  {if $mailAlerts}
+    <ul class="row">
+      {foreach from=$mailAlerts item=mailAlert}
+        <li class="col-sm-6 col-md-3">{include 'module:ps_emailalerts/views/templates/front/mailalerts-account-line.tpl' mailAlert=$mailAlert}</li>
+      {/foreach}
+    </ul>
+  {else}
+    <div class="alert alert-info" role="alert" data-alert="info">{l s='No mail alerts yet.' d='Modules.Emailalerts.Shop'}</div>
+  {/if}
+{/block}
diff --git a/modules/ps_emailalerts/views/templates/hook/product.tpl b/modules/ps_emailalerts/views/templates/hook/product.tpl
@@ -23,7 +23,7 @@
 * International Registered Trademark & Property of PrestaShop SA
 *}
 
-<div class="card card-body text-center js-mailalert mb-3 bg-light" data-url="{url entity='module' name='ps_emailalerts' controller='actions' params=['process' => 'add']}">
+<div class="card card-body text-center js-mailalert mb-3 mt-3 bg-light" data-url="{url entity='module' name='ps_emailalerts' controller='actions' params=['process' => 'add']}">
     {if isset($email) AND $email}
         <p>{l s="Interested in this product? Drop us an email and we will let you know when it's available for order." d='Modules.Emailalerts.Shop'}</p>
         <input class="form-control" type="email" placeholder="{l s='[email protected]' d='Modules.Emailalerts.Shop'}"/>

diff --git a/modules/ps_imageslider/views/templates/hook/slider.tpl b/modules/ps_imageslider/views/templates/hook/slider.tpl
@@ -4,43 +4,43 @@
  *}
 
 {if $homeslider.slides}
-    <div id="home-slider" class="ratio ratio-homeSlider">
-        <div class="carousel slide" data-bs-ride="carousel">
-            <div class="carousel-indicators">
-                {assign var="count" value=0}
-                {foreach from=$homeslider.slides item=slide name='homeslider'}
-                    <button type="button" data-bs-target="#home-slider .carousel" data-bs-slide-to="{$count}" aria-label="{$slide.title}"
-                        {if $smarty.foreach.homeslider.first} class="active" aria-current="true" {/if}></button>
-                    {$count = $count + 1}
-                {/foreach}
-            </div>
-            <div class="carousel-inner">
-                {foreach from=$homeslider.slides item=slide name='homeslider'}
-                    <li class="carousel-item{if $smarty.foreach.homeslider.first} active{/if}" role="option"
-                        aria-hidden="{if $smarty.foreach.homeslider.first}false{else}true{/if}">
-                        {if !empty($slide.url)}<a class="carousel-link" href="{$slide.url}">{/if}
-                            <figure class="carousel-content">
-                                <img src="{$slide.image_url}" alt="{$slide.legend|escape}" loading="lazy">
-                                {if $slide.title || $slide.description}
-                                    <figcaption class="carousel-caption caption">
-                                        <h2 class="display-1 text-uppercase">{$slide.title}</h2>
-                                        <div class="caption-description">{$slide.description nofilter}</div>
-                                    </figcaption>
-                                {/if}
-                            </figure>
-                        {if !empty($slide.url)}</a>{/if}
-                    </li>
-                {/foreach}
-            </div>
+  <div id="home-slider" class="ratio ratio-homeSlider">
+    <div class="carousel slide" data-bs-ride="carousel">
+      <div class="carousel-indicators">
+        {assign var="count" value=0}
+        {foreach from=$homeslider.slides item=slide name='homeslider'}
+          <button type="button" data-bs-target="#home-slider .carousel" data-bs-slide-to="{$count}" aria-label="{$slide.title}"
+          {if $smarty.foreach.homeslider.first} class="active" aria-current="true" {/if}></button>
+          {$count = $count + 1}
+        {/foreach}
+      </div>
+      <div class="carousel-inner" role="listbox" aria-label="{l s='Carousel container' d='Shop.Theme.Global'}">
+        {foreach from=$homeslider.slides item=slide name='homeslider'}
+          <li class="carousel-item{if $smarty.foreach.homeslider.first} active{/if}" role="option"
+            aria-hidden="{if $smarty.foreach.homeslider.first}false{else}true{/if}">
+            {if !empty($slide.url)}<a class="carousel-link" href="{$slide.url}">{/if}
+              <figure class="carousel-content">
+                <img src="{$slide.image_url}" alt="{$slide.legend|escape}" loading="lazy" {$slide.size|replace: '"':''}>
+                {if $slide.title || $slide.description}
+                  <figcaption class="carousel-caption caption">
+                    <h2 class="display-1 text-uppercase">{$slide.title}</h2>
+                    <div class="caption-description">{$slide.description nofilter}</div>
+                  </figcaption>
+                {/if}
+              </figure>
+            {if !empty($slide.url)}</a>{/if}
+          </li>
+        {/foreach}
+      </div>
 
-            <button class="carousel-control-prev" type="button" data-bs-target="#home-slider .carousel" data-bs-slide="prev">
-                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-                <span class="visually-hidden">Previous</span>
-            </button>
-            <button class="carousel-control-next" type="button" data-bs-target="#home-slider .carousel" data-bs-slide="next">
-                <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                <span class="visually-hidden">Next</span>
-            </button>
-        </div>
+      <button class="carousel-control-prev" type="button" data-bs-target="#home-slider .carousel" data-bs-slide="prev">
+        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">{l s='Previous' d='Shop.Theme.Actions'}</span>
+      </button>
+      <button class="carousel-control-next" type="button" data-bs-target="#home-slider .carousel" data-bs-slide="next">
+        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">{l s='Next' d='Shop.Theme.Actions'}</span>
+      </button>
     </div>
+  </div>
 {/if}
diff --git a/modules/ps_shoppingcart/modal.tpl b/modules/ps_shoppingcart/modal.tpl
@@ -58,18 +58,18 @@
               <div class="mb-3">
                 <div class="blockcart-modal__total product-subtotal">
                   <span class="label">{l s='Subtotal:' d='Shop.Theme.Checkout'}</span>
-                  <span class="value">{$cart.subtotals.products.value}</span>
+                  <span class="subtotals value">{$cart.subtotals.products.value}</span>
                 </div>
                 {if $cart.subtotals.shipping.value}
                   <div class="blockcart-modal__total product-shipping">
                     <span class="label">{l s='Shipping:' d='Shop.Theme.Checkout'}</span>
-                    <span class="value">{$cart.subtotals.shipping.value} {hook h='displayCheckoutSubtotalDetails' subtotal=$cart.subtotals.shipping}</span>
+                    <span class="shipping value">{$cart.subtotals.shipping.value} {hook h='displayCheckoutSubtotalDetails' subtotal=$cart.subtotals.shipping}</span>
                   </div>
                 {/if}
               </div>
               {if !$configuration.display_prices_tax_incl && $configuration.taxes_enabled}
                 <div class="blockcart-modal__total product-total">
-                  <span class="label">{$cart.totals.total.label}&nbsp;{$cart.labels.tax_short}</span>
+                  <span class="label">{$cart.totals.total.label}{if $configuration.display_taxes_label}&nbsp;{$cart.labels.tax_short}{/if}</span>
                   <span class="value">{$cart.totals.total.value}</span>
                 </div>
                 <div class="blockcart-modal__total product-total">
@@ -78,7 +78,7 @@
                 </div>
               {else}
                 <div class="blockcart-modal__total product-total">
-                  <span class="label">{$cart.totals.total.label}&nbsp;{if $configuration.taxes_enabled}{$cart.labels.tax_short}{/if}</span>
+                  <span class="label">{$cart.totals.total.label}&nbsp;{if $configuration.taxes_enabled && $configuration.display_taxes_label}{$cart.labels.tax_short}{/if}</span>
                   <span class="value">{$cart.totals.total.value}</span>
                 </div>
               {/if}

diff --git a/modules/ps_supplierlist/views/templates/_partials/supplier_text.tpl b/modules/ps_supplierlist/views/templates/_partials/supplier_text.tpl
@@ -2,12 +2,13 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  *}
+{$componentName = 'search-filters-modules'}
 
-<ul>
+<ul class="{$componentName}__list">
   {foreach from=$suppliers item=supplier name=supplier_list}
     {if $smarty.foreach.supplier_list.iteration <= $text_list_nb}
-      <li class="facet-label">
-        <a href="{$supplier['link']}" title="{$supplier['name']}">
+      <li class="{$componentName}__item facet-label">
+        <a class="{$componentName}__item__link" href="{$supplier['link']}" title="{$supplier['name']}">
           {$supplier['name']}
         </a>
       </li>

diff --git a/modules/ps_supplierlist/views/templates/hook/ps_supplierlist.tpl b/modules/ps_supplierlist/views/templates/hook/ps_supplierlist.tpl
@@ -2,15 +2,16 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  *}
+{$componentName = 'search-filters-modules'}
 
 <div id="search_filters_suppliers">
-  <section class="facet">
+  <section class="{$componentName} facet">
     {if $display_link_supplier}
-      <a href="{$page_link}" class="h6 text-uppercase facet-label" title="{l s='Suppliers' d='Shop.Theme.Catalog'}">
+      <a href="{$page_link}" class="{$componentName}-title d-block mb-3" title="{l s='Suppliers' d='Shop.Theme.Catalog'}">
         {l s='Suppliers' d='Shop.Theme.Catalog'}
       </a>
     {else}
-      <p class="h6 text-uppercase facet-label">
+      <p class="{$componentName}-title">
         {l s='Suppliers' d='Shop.Theme.Catalog'}
       </p>
     {/if}

diff --git a/src/scss/custom/components/_index.scss b/src/scss/custom/components/_index.scss
@@ -15,3 +15,5 @@
 @import "address";
 @import "table-wrapper";
 @import "product";
+@import "search-filters-modules";
+@import "mailalerts-account";
diff --git a/src/scss/custom/components/mailalerts-account/_index.scss b/src/scss/custom/components/mailalerts-account/_index.scss
@@ -0,0 +1 @@
+@import "mailalerts-account";
diff --git a/src/scss/custom/components/mailalerts-account/_mailalerts-account.scss b/src/scss/custom/components/mailalerts-account/_mailalerts-account.scss
@@ -0,0 +1,29 @@
+$component-name: mailalerts-account-line;
+
+.#{$component-name} {
+  padding: 1rem;
+  border: var(--bs-border-width) solid var(--bs-border-color);
+  border-radius: var(--bs-border-radius-xl);
+
+  &__product {
+    min-height: 54px;
+
+    &__name {
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: var(--bs-body-color);
+    }
+
+    &__attributes {
+      font-size: 0.75rem;
+      color: var(--bs-body-color);
+    }
+  }
+
+  &__remove {
+    position: absolute;
+    top: 0;
+    right: 0;
+    color: var(--bs-black);
+  }
+}
diff --git a/src/scss/custom/components/search-filters-modules/_index.scss b/src/scss/custom/components/search-filters-modules/_index.scss
@@ -0,0 +1 @@
+@import "search-filters-modules";
diff --git a/src/scss/custom/components/search-filters-modules/_search-filters-modules.scss b/src/scss/custom/components/search-filters-modules/_search-filters-modules.scss
@@ -0,0 +1,26 @@
+$component-name: search-filters-modules;
+
+.#{$component-name} {
+  padding-bottom: 1rem;
+  margin-bottom: 2rem;
+  border-bottom: var(--category-tree-border-bottom);
+
+  &-title {
+    font-size: var(--category-tree-title-size);
+    font-weight: 600;
+    color: var(--category-tree-title-color);
+  }
+
+  &__list {
+    margin-bottom: 0;
+  }
+
+  &__item {
+    &__link {
+      display: block;
+      font-weight: 600;
+      line-height: 2rem;
+      color: var(--category-tree-title-color);
+    }
+  }
+}
diff --git a/src/scss/custom/components/search-filters/_search-filters.scss b/src/scss/custom/components/search-filters/_search-filters.scss
@@ -1,6 +1,10 @@
 $component-name: search-filters;
 
 .#{$component-name} {
+  padding-bottom: 1rem;
+  margin-bottom: 2rem;
+  border-bottom: var(--category-tree-border-bottom);
+
   & &-title {
     font-size: var(--category-tree-title-size);
     font-weight: 600;

diff --git a/templates/catalog/_partials/category-header.tpl b/templates/catalog/_partials/category-header.tpl
@@ -5,7 +5,7 @@
 <div id="js-product-list-header">
     {if $listing.pagination.items_shown_from == 1}
         <div class="block-category">
-            <h1 class="h1 mb-4">{$category.name}</h1>
+          {include file="components/page-title-section.tpl" title={$category.name}}
             {if $category.description}
               <div id="category-description" class="rich-text mb-4">{$category.description nofilter}</div>
             {/if}
@@ -14,6 +14,7 @@
                 <img src="{$category.image.large.url}" 
                   alt="{if !empty($category.image.legend)}{$category.image.legend}{else}{$category.name}{/if}" 
                   loading="lazy" 
+                  class="img-fluid"
                   width="{$category.image.large.width}" 
                   height="{$category.image.large.height}">
               </div>

diff --git a/templates/catalog/brands.tpl b/templates/catalog/brands.tpl
@@ -6,7 +6,7 @@
 
 {block name='content'}
   {block name='brand_header'}
-    <h1>{l s='Brands' d='Shop.Theme.Catalog'}</h1>
+    {include file="components/page-title-section.tpl" title={l s='Brands' d='Shop.Theme.Catalog'}}
   {/block}
 
   {block name='brand_miniature'}

diff --git a/templates/catalog/listing/manufacturer.tpl b/templates/catalog/listing/manufacturer.tpl
@@ -5,7 +5,7 @@
 {extends file='catalog/listing/product-list.tpl'}
 
 {block name='product_list_header'}
-  <h1>{l s='List of products by brand %brand_name%' sprintf=['%brand_name%' => $manufacturer.name] d='Shop.Theme.Catalog'}</h1>
+  {include file="components/page-title-section.tpl" title={l s='List of products by brand %brand_name%' sprintf=['%brand_name%' => $manufacturer.name] d='Shop.Theme.Catalog'}}
   <div id="manufacturer-short_description" class="rich-text">{$manufacturer.short_description nofilter}</div>
   <div id="manufacturer-description" class="rich-text">{$manufacturer.description nofilter}</div>
 {/block}