Fix the supplier page and update the brand page

src/scss/prestashop/components/_index.scss

@@ -10,6 +10,7 @@
 @import "cart";
 @import "order-confirmation";
 @import "brand";
+@import "supplier";
 @import "store";
 @import "sitemap";
 @import "address-card";

src/scss/prestashop/components/_supplier.scss

@@ -0,0 +1,64 @@
+$component-name: supplier;
+
+.#{$component-name} {
+  position: relative;
+  padding: 1rem;
+  text-align: center;
+  border: 1px solid var(--bs-border-color);
+  border-radius: var(--bs-border-radius);
+  transition: var(--bs-transition-default);
+
+  &:hover {
+    border-color: var(--bs-link-hover-color);
+  }
+
+  &__list {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 1rem;
+  }
+
+  &__image {
+    margin-block-end: 0.5rem;
+  }
+
+  &__title {
+    display: block;
+    margin-block-end: 0.5rem;
+  }
+
+  &__description {
+    margin-block-end: 0.5rem;
+    font-size: 0.75rem;
+    line-height: 1.2;
+    color: var(--bs-secondary-color);
+
+    p {
+      margin-block-end: 0;
+    }
+  }
+
+  &__products {
+    margin-block-end: 0;
+    font-size: 0.85rem;
+    color: var(--bs-secondary-color);
+  }
+
+  @include media-breakpoint-up(sm) {
+    &__list {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    &__list {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+
+  @include media-breakpoint-up(xxl) {
+    &__list {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
+}

templates/catalog/_partials/miniatures/supplier.tpl

@@ -0,0 +1,38 @@
+{**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *}
+{block name='supplier_miniature_item'}
+  <li class="supplier">
+    <div class="supplier__image">
+      <picture>
+        {if !empty($supplier.image.bySize.small_default.sources.avif)}<source srcset="{$supplier.image.bySize.small_default.sources.avif}" type="image/avif">{/if}
+        {if !empty($supplier.image.bySize.small_default.sources.webp)}<source srcset="{$supplier.image.bySize.small_default.sources.webp}" type="image/webp">{/if}
+        <img
+          class="supplier__img img-fluid"
+          src="{$supplier.image.bySize.small_default.url}"
+          alt="{if !empty($supplier.image.legend)}{$supplier.image.legend}{else}{$supplier.name}{/if}"
+          width="{$supplier.image.bySize.small_default.width}"
+          height="{$supplier.image.bySize.small_default.height}"
+          loading="lazy"
+        >
+      </picture>
+    </div>
+
+    <div class="supplier__infos">
+      <a class="supplier__title stretched-link" href="{$supplier.url}">
+        {$supplier.name}
+      </a>
+    </div>
+
+    <p class="supplier__products">
+      {if $supplier.nb_products > 1}
+        {l s='%number% products' sprintf=['%number%' => $supplier.nb_products] d='Shop.Theme.Catalog'}
+      {elseif $supplier.nb_products == 1}
+        {l s='%number% product' sprintf=['%number%' => $supplier.nb_products] d='Shop.Theme.Catalog'}
+      {else}
+        {l s='No products' d='Shop.Theme.Catalog'}
+      {/if}
+    </p>
+  </li>
+{/block}

templates/catalog/_partials/product-details.tpl

@@ -72,7 +72,7 @@
             {if $product.availability_date}
               <li class="details__item">
                 <div class="details__left">
-                  <span class="details__title">{l s='Availability date:' d='Shop.Theme.Catalog'}</span>
+                  <span class="details__title">{l s='Availability date' d='Shop.Theme.Catalog'}</span>
                 </div>
 
                 <div class="details__right">

templates/catalog/brands-suppliers.tpl → templates/catalog/brands.tpl

@@ -5,9 +5,11 @@
 {extends file=$layout}
 
 {block name='content'}
-  {block name='brand_and_suppliers_header'}{/block}
+  {block name='brand_header'}
+    {include file='components/page-title-section.tpl' title={l s='Brands' d='Shop.Theme.Catalog'}}
+  {/block}
 
-  {block name='brand_and_suppliers_miniature'}
+  {block name='brand_miniature'}
     <ul class="brand__list">
       {foreach from=$brands item=brand}
         {include file='catalog/_partials/miniatures/brand.tpl' brand=$brand}

templates/catalog/listing/supplier.tpl

@@ -5,7 +5,9 @@
 {extends file='catalog/listing/product-list.tpl'}
 
 {block name='product_list_header'}
-  {include file='components/page-title-section.tpl' title={l s='List of products by supplier %s' sprintf=[$supplier.name] d='Shop.Theme.Catalog'}}
+  {include file='components/page-title-section.tpl' title={l s='List of products by supplier %supplier_name%' sprintf=['%supplier_name%' => $supplier.name] d='Shop.Theme.Catalog'}}
 
-  <div class="rich-text">{$supplier.description nofilter}</div>
+  {if $supplier.description}
+    <div class="rich-text">{$supplier.description nofilter}</div>
+  {/if}
 {/block}

templates/catalog/suppliers.tpl

@@ -2,8 +2,18 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  *}
-{extends file='catalog/brands-suppliers.tpl'}
+{extends file=$layout}
 
-{block name='brand_and_suppliers_header'}
-  {include file='components/page-title-section.tpl' title={l s='Suppliers' d='Shop.Theme.Catalog'}}
+{block name='content'}
+  {block name='supplier_header'}
+    {include file='components/page-title-section.tpl' title={l s='Suppliers' d='Shop.Theme.Catalog'}}
+  {/block}
+
+  {block name='supplier_miniature'}
+    <ul class="supplier__list">
+      {foreach from=$suppliers item=supplier}
+        {include file='catalog/_partials/miniatures/supplier.tpl' supplier=$supplier}
+      {/foreach}
+    </ul>
+  {/block}
 {/block}