Merge pull request #636 from tblivet/issue-559

Fix: issue-559
PrestaShop · Jun 7, 2024 · 0ef2d0f · 0ef2d0f
2 parents 06f4e14 + 473d247
commit 0ef2d0f
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 24 deletions.
diff --git 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
@@ -87,26 +87,39 @@
       .variant {
         margin-bottom: 1.5rem;
 
-        ul {
+        // RADIO
+        .radio-variants {
           display: flex;
-          align-items: center;
+          flex-wrap: wrap;
+          row-gap: 0.5rem;
+          column-gap: 0.875rem;
+          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
@@ -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
@@ -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}