From 33e86eecdbe57eb92da01d3aadfd68d3c27cf794 Mon Sep 17 00:00:00 2001
From: tblivet <thibault.blivet@prestashop.com>
Date: Thu, 6 Jun 2024 15:01:41 +0200
Subject: [PATCH 1/2] feat: improve variants display

---
 .../product/_product-miniature.scss           | 13 ++++--
 src/scss/custom/pages/product/_product.scss   | 41 ++++++++++++-------
 .../catalog/_partials/miniatures/product.tpl  |  2 +-
 .../catalog/_partials/product-variants.tpl    | 12 +++---
 4 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/src/scss/custom/components/product/_product-miniature.scss b/src/scss/custom/components/product/_product-miniature.scss
index 685936751..363a2a56e 100644
--- a/src/scss/custom/components/product/_product-miniature.scss
+++ b/src/scss/custom/components/product/_product-miniature.scss
@@ -108,9 +108,16 @@ $component-name: product-miniature;
     }
   }
 
-  .variant-links {
-    > a:first-child {
-      margin-left: 0;
+  & &__variants {
+    .variant-links {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+
+      > a {
+        flex-shrink: 0;
+        margin: 0;
+      }
     }
   }
 }
diff --git a/src/scss/custom/pages/product/_product.scss b/src/scss/custom/pages/product/_product.scss
index 7b720830a..4030edbb5 100644
--- a/src/scss/custom/pages/product/_product.scss
+++ b/src/scss/custom/pages/product/_product.scss
@@ -87,26 +87,39 @@
       .variant {
         margin-bottom: 1.5rem;
 
-        ul {
+        // RADIO
+        .radio-variants {
           display: flex;
-          align-items: center;
+          flex-wrap: wrap;
+          column-gap: 0.875rem;
+          row-gap: 0.5rem;
+          margin-bottom: 0;
 
-          li {
-            &:first-of-type {
-              span {
-                margin-left: 0;
-              }
-            }
+          .radio-variant {
+            margin: 0;
           }
         }
 
-        .input-color {
-          display: none;
-        }
+        // COLORS
+        .color-variants {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.5rem;
+          margin-bottom: 0;
+
+          .color-variant {
+            .input-color {
+              display: none;
+            }
+
+            label {
+              display: block;
+              line-height: 0;
+            }
 
-        .color {
-          span {
-            font-size: 0;
+            .color {
+              margin: 0;
+            }
           }
         }
       }
diff --git a/templates/catalog/_partials/miniatures/product.tpl b/templates/catalog/_partials/miniatures/product.tpl
index 1e65ecb04..6dba1ad1c 100644
--- a/templates/catalog/_partials/miniatures/product.tpl
+++ b/templates/catalog/_partials/miniatures/product.tpl
@@ -132,7 +132,7 @@
 
           <div class="{$componentName}__infos__bottom">
             {block name='product_variants'}
-              <div class="{$componentName}-variants">
+              <div class="{$componentName}__variants">
                 {if $product.main_variants}
                   {include file='catalog/_partials/variant-links.tpl' variants=$product.main_variants}
                 {/if}
diff --git a/templates/catalog/_partials/product-variants.tpl b/templates/catalog/_partials/product-variants.tpl
index 6fd5ca41e..96fa62858 100644
--- a/templates/catalog/_partials/product-variants.tpl
+++ b/templates/catalog/_partials/product-variants.tpl
@@ -24,9 +24,9 @@
           {/foreach}
         </select>
       {elseif $group.group_type == 'color'}
-        <ul id="group_{$id_attribute_group}" class="d-flex">
+        <ul id="group_{$id_attribute_group}" class="color-variants">
           {foreach from=$group.attributes key=id_attribute item=group_attribute}
-            <li>
+            <li class="color-variant">
               <label aria-label="{$group_attribute.name}">
                 <input class="input-color" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} checked="checked"{/if}>
                 <span
@@ -41,12 +41,12 @@
           {/foreach}
         </ul>
       {elseif $group.group_type == 'radio'}
-        <ul id="group_{$id_attribute_group}">
+        <ul id="group_{$id_attribute_group}" class="radio-variants">
           {foreach from=$group.attributes key=id_attribute item=group_attribute}
-            <li class="input-container">
+            <li class="radio-variant form-check">
               <label>
-                <input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} checked="checked"{/if}>
-                <span class="radio-label">{$group_attribute.name}</span>
+                <input class="form-check-input input-radio" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} checked="checked"{/if}>
+                <span class="form-check-label radio-label">{$group_attribute.name}</span>
               </label>
             </li>
           {/foreach}

From 473d247cede2e5708b7c09a081cfe0e83c1dbfa4 Mon Sep 17 00:00:00 2001
From: tblivet <thibault.blivet@prestashop.com>
Date: Thu, 6 Jun 2024 15:08:36 +0200
Subject: [PATCH 2/2] chore: lint

---
 src/scss/custom/pages/product/_product.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/scss/custom/pages/product/_product.scss b/src/scss/custom/pages/product/_product.scss
index 4030edbb5..a3d25d70c 100644
--- a/src/scss/custom/pages/product/_product.scss
+++ b/src/scss/custom/pages/product/_product.scss
@@ -91,8 +91,8 @@
         .radio-variants {
           display: flex;
           flex-wrap: wrap;
-          column-gap: 0.875rem;
           row-gap: 0.5rem;
+          column-gap: 0.875rem;
           margin-bottom: 0;
 
           .radio-variant {