fix usermenu path & breadcrumb (#63)

thelia · Oct 11, 2024 · d73fbff · d73fbff
1 parent a06b39c
commit d73fbff
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 20 deletions.
diff --git a/components/Layout/CrossSelling/CrossSelling.html.twig b/components/Layout/CrossSelling/CrossSelling.html.twig
@@ -2,8 +2,7 @@
 
 {% set button = button|default(null) %}
 
-
-
+{% if this.products is not empty %}
 <div class="pt-[56px] pb-[68px] pl-[24px] md:pl-[48px] xl:pt-[68px] xl:pb-[104px] lg:px-0 lg:container lg:mx-auto">
 	<div class='pb-6 text-black h2'>{{ title }}</div>
 	<div class='CrossSelling slider'>
@@ -17,3 +16,4 @@
 	</div>
   {% endif %}
 </div>
+{% endif %}
diff --git a/components/Molecules/Breadcrumb/Breadcrumb.html.twig b/components/Molecules/Breadcrumb/Breadcrumb.html.twig
@@ -1,16 +1,25 @@
 {% set classes = classes|default('') %}
 {% set items = items|default([]) %}
+{% set backIcon = backIcon|default(false) %}
 
+
+{% if items is not empty %}
 <nav class="Breadcrumb{{ classes }}" aria-label="Fil d'Ariane">
   <ol class="Breadcrumb-list" itemscope itemtype="https://schema.org/BreadcrumbList">
-    {% if items.length > 3 %}
+    {% if backIcon %}
+      <li class="Breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
+        <span class="w-5 h-5">{{ ux_icon('chevron-left') }}</span>
+      </li>
+    {% endif %}
+
+    {% if items|length > 3 %}
       <li id="Breadcrumb-compressed" class="Breadcrumb-item Breadcrumb-item--isLink">
         <button class="Breadcrumb-item-link Breadcrumb-compressed">...</button>
       </li>
     {% endif %}
 
     {% for item in items %}
-      <li class="Breadcrumb-item{% if item.href %} Breadcrumb-item--isLink{% endif %}{% if loop.index <= (items.length - 3) %} hide{% endif %}" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
+      <li class="Breadcrumb-item{% if item.href %} Breadcrumb-item--isLink{% endif %}{% if loop.index <= (items|length - 3) %} hide{% endif %}" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
         {% if item.href %}
           <a class="Breadcrumb-item-link" href="{{ item.href }}" itemprop="item">
             <span itemprop="name">{{ item.label }}</span>
@@ -26,3 +35,4 @@
     {% endfor %}
   </ol>
 </nav>
+{% endif %}
diff --git a/components/Molecules/Breadcrumb/Breadcrumb.stories.js b/components/Molecules/Breadcrumb/Breadcrumb.stories.js
@@ -8,11 +8,17 @@ export default {
 export const Base = {
   render: (args) => Breadcrumb(args),
   args: {
+    backIcon: false,
     items: [
-      { label: 'Page parante', href: '#' },
+      { label: 'Page parente', href: '#' },
       { label: 'Page mère', href: '#' },
       { label: 'Page actuelle' }
     ]
+  },
+  argTypes: {
+    backIcon: {
+      control: { type: 'boolean' }
+    }
   }
 };
 
@@ -25,9 +31,14 @@ export const Lengthy = {
     items: [
       { label: 'Non visible', href: '#' },
       { label: 'Non visible', href: '#' },
-      { label: 'Page parante', href: '#' },
+      { label: 'Page parente', href: '#' },
       { label: 'Page mère', href: '#' },
       { label: 'Page actuelle' }
     ]
+  },
+  argTypes: {
+    backIcon: {
+      control: { type: 'boolean' }
+    }
   }
 };
diff --git a/components/Molecules/Breadcrumb/breadcrumb.css b/components/Molecules/Breadcrumb/breadcrumb.css
@@ -12,8 +12,8 @@
     display: flex;
     gap: rem-convert(8px);
 
-    &--isLink {
-      &::after {
+    &--isLink + .Breadcrumb-item--isLink {
+      &::before {
         content: '/';
         font-size: rem-convert(10px);
       }
@@ -27,7 +27,7 @@
         color: var(--grey);
       }
 
-      &:focus-visible{
+      &:focus-visible {
         background-color: var(--theme-light);
       }
     }
@@ -43,7 +43,7 @@
     text-decoration: none;
     margin-top: rem-convert(2px);
 
-    &:focus-visible{
+    &:focus-visible {
       background-color: var(--grey-lightest);
       border: solid 1px var(--theme-medium);
     }

diff --git a/...nts/Molecules/userMenu/UserMenu.html.twig → ...nts/Molecules/UserMenu/UserMenu.html.twig b/...nts/Molecules/userMenu/UserMenu.html.twig → ...nts/Molecules/UserMenu/UserMenu.html.twig
diff --git a/...ts/Molecules/userMenu/UserMenu.stories.js → ...ts/Molecules/UserMenu/UserMenu.stories.js b/...ts/Molecules/userMenu/UserMenu.stories.js → ...ts/Molecules/UserMenu/UserMenu.stories.js
diff --git a/components/Molecules/userMenu/userMenu.css → components/Molecules/UserMenu/userMenu.css b/components/Molecules/userMenu/userMenu.css → components/Molecules/UserMenu/userMenu.css
diff --git a/product.html.twig b/product.html.twig
@@ -11,14 +11,18 @@
 {% set product = resources('/api/front/products/' ~ productId) %}
 {% set productCategory = product.productCategories|filter(c => c.defaultCategory)|first.category %}
 
-{% dump(product) %}
 {% block body %}
-  <div class="px-6 lg:px-[120px] py-6">
-    <div class="lg:justify-between lg:items-center mb-[29px] lg:flex">
-      <a href="#" class="flex gap-3 typo-button-medium">
-        {{ ux_icon('chevron-left', {class: 'w-5 h-5'}) }} {{ productCategory.i18ns.title }}
-      </a>
-    </div>
+
+	<div class="px-6 lg:px-[120px] py-6">
+		<div class="lg:justify-between lg:items-center mb-[29px] lg:flex">
+      {{ component('Molecules:Breadcrumb:Breadcrumb', {
+        items: [
+          { href: productCategory.publicUrl|default('#'), label:productCategory.i18ns.title},
+        ],
+        backIcon: true
+      }) }}
+
+		</div>
 
     <div class="lg:container lg:w-full md:w-[540px] sm:w-[340px] w-full mx-auto">
       <div class="lg:flex lg:justify-between gap-[46px]">
@@ -112,7 +116,7 @@
     </div>
   </div>
 
-  <div class="bg-theme-lighter">
-    {{ component('Flexy:CrossSelling', {categoryId: 1, title: 'Last seen products' | trans}) }}
-  </div>
+	<div class="bg-theme-lighter">
+		{{ component('Flexy:CrossSelling', {categoryId: productCategory.id, title: 'Last seen products' | trans}) }}
+	</div>
 {% endblock %}