Alain Afflelou Design System

Header 

<section class="pt-4 md:pt-6 pb-8 md:pb-14 flex flex-col gap-6 md:gap-8">
    <div class="container flex flex-col gap-6 md:gap-8">
        <div class="flex items-center gap-1 flex-wrap hidden md:flex">
            <a href="#" class=" text-sm link-neutral no-underline">
                Accueil
            </a>
            <span class="text-neutral-500"><svg class=" shrink-0" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M15.8171 3.82036C16.1925 3.99552 16.3548 4.44181 16.1796 4.81716L9.17957 19.8172C9.00441 20.1925 8.55813 20.3548 8.18277 20.1796C7.80742 20.0045 7.64513 19.5582 7.8203 19.1828L14.8203 4.18283C14.9955 3.80748 15.4418 3.64519 15.8171 3.82036Z" fill="currentColor" />
                </svg>
            </span>
            <a href="#" class=" text-sm link-neutral no-underline">
                Category
            </a>
            <span class="text-neutral-500"><svg class=" shrink-0" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M15.8171 3.82036C16.1925 3.99552 16.3548 4.44181 16.1796 4.81716L9.17957 19.8172C9.00441 20.1925 8.55813 20.3548 8.18277 20.1796C7.80742 20.0045 7.64513 19.5582 7.8203 19.1828L14.8203 4.18283C14.9955 3.80748 15.4418 3.64519 15.8171 3.82036Z" fill="currentColor" />
                </svg>
            </span>
            <span class="text-xs font-semibold text-neutral-800">Subcategory</span>
        </div>
        <h1 class="text-3xl md:text-4xl font-medium text-neutral-800">Product List Page<span class="ml-2 text-base text-neutral-600">(600)</span></h1>
    </div>
    <div class="overflow-hidden md:overflow-visible">
        <div class="container md:flex justify-between items-center relative">
            <div x-ref="tagsSwiper" x-data="plpTags" class="swiper mx-0 md:-ml-5 md:pl-5 md:pr-5
            md:before:absolute md:before:bg-gradient-to-l md:before:from-transparent md:before:left-0 md:before:w-5 md:before:h-full md:before:z-10 md:before:top-0
            md:after:absolute md:after:bg-gradient-to-r md:after:from-transparent md:after:right-0 md:after:w-5 md:after:h-full md:after:z-10 md:after:top-0
            md:before:to-white md:after:to-white overflow-visible md:overflow-hidden">
                <div class="swiper-wrapper">
                    <div class="swiper-slide w-auto">
                        <a href="#" class=" btn btn-dark-ghost ">
                            First tag

                        </a>
                    </div>
                    <div class="swiper-slide w-auto">
                        <a href="#" class=" btn btn-dark-ghost ">
                            Second tag

                        </a>
                    </div>
                    <div class="swiper-slide w-auto">
                        <a href="#" class=" btn btn-dark-ghost ">
                            Third tag

                        </a>
                    </div>
                    <div class="swiper-slide w-auto">
                        <a href="#" class=" btn btn-dark-ghost ">
                            Fourth tag

                        </a>
                    </div>
                </div>
            </div>

            <script>
                'use strict';

                function plpTags() {
                    return {
                        swiper: {},
                        init() {
                            this.swiper = new Swiper(this.$refs.tagsSwiper, {
                                slidesPerView: 'auto',
                                spaceBetween: 8,
                                freeMode: true,
                            });
                        }
                    }
                }
            </script>
            <div class="z-30 shrink-0 grid grid-cols-2 items-center justify-center p-2 gap-2 bg-light-white fixed bottom-0 left-0 right-0 md:relative md:bg-transparent md:p-0 md:justify-start">
                <div class="dropdown " :class="$store.screen.isMobile ? 'dropdown-fixed' : ''" x-data="{show:false}">
                    <button type="button" x-ref="dropdownButton" @click="show = ! show" class="w-full btn-icons  btn btn-dark-subtle ">
                        Trier par

                        <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
                        </svg>

                    </button>

                    <div x-show="show" x-transition.opacity class="fixed md:hidden top-0 bottom-0 left-0 right-0 z-20 bg-dark-40 backdrop-blur-xl"></div>
                    <template x-if="!$store.screen.isMobile">
                        <div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
                            <!-- Link item -->
                            <a href="#" class="dropdown-item ">
                                Prix Croissant
                            </a>
                            <!-- Link item -->
                            <a href="#" class="dropdown-item ">
                                Prix Décroissant
                            </a>
                            <!-- Link item -->
                            <a href="#" class="dropdown-item ">
                                Pertinence
                            </a>
                            <!-- Link item -->
                            <a href="#" class="dropdown-item ">
                                Nouveauté
                            </a>
                            <!-- Link item -->
                            <a href="#" class="dropdown-item ">
                                Meilleures ventes
                            </a>
                        </div>

                    </template>
                    <template x-if="$store.screen.isMobile">
                        <div class="dropdown-content" x-show="show" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="translate-y-full" x-transition:enter-end="translate-y-0" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-y-0" x-transition:leave-end="translate-y-full" x-cloak @click.outside="show = false">
                            <div class="dropdown-content-title">
                                Trier par
                                <button type="button" @click="show = false" class=" btn btn-dark-ghost btn-size-xs btn-only-icon">
                                    <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
                                    </svg>

                                </button>
                            </div>
                            <!-- Link item -->
                            <a href="#" class="dropdown-item ">
                                Prix Croissant
                            </a>
                            <!-- Link item -->
                            <a href="#" class="dropdown-item ">
                                Prix Décroissant
                            </a>
                            <!-- Link item -->
                            <a href="#" class="dropdown-item ">
                                Pertinence
                            </a>
                            <!-- Link item -->
                            <a href="#" class="dropdown-item ">
                                Nouveauté
                            </a>
                            <!-- Link item -->
                            <a href="#" class="dropdown-item ">
                                Meilleures ventes
                            </a>
                        </div>

                    </template>
                </div>
                <button type="button" x-data x-init="$store.asideBlocs.addAside('filter')" @click="$store.asideBlocs.toggleAside('filter')" class="w-full  btn btn-dark  btn-icons">
                    Filtrer

                    <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M5.37143 7.42857C5.37143 6.29244 6.29244 5.37143 7.42857 5.37143C8.5647 5.37143 9.48571 6.29244 9.48571 7.42857C9.48571 8.5647 8.5647 9.48571 7.42857 9.48571C6.29244 9.48571 5.37143 8.5647 5.37143 7.42857ZM10.7886 6.74286C10.4709 5.17789 9.08729 4 7.42857 4C5.53502 4 4 5.53502 4 7.42857C4 9.32212 5.53502 10.8571 7.42857 10.8571C9.08729 10.8571 10.4709 9.67925 10.7886 8.11429H19.3143C19.693 8.11429 20 7.80728 20 7.42857C20 7.04986 19.693 6.74286 19.3143 6.74286H10.7886ZM4.68571 15.8857C4.307 15.8857 4 16.1927 4 16.5714C4 16.9501 4.307 17.2571 4.68571 17.2571H13.2114C13.5291 18.8221 14.9127 20 16.5714 20C18.465 20 20 18.465 20 16.5714C20 14.6779 18.465 13.1429 16.5714 13.1429C14.9127 13.1429 13.5291 14.3207 13.2114 15.8857H4.68571ZM16.5714 18.6286C15.4353 18.6286 14.5143 17.7076 14.5143 16.5714C14.5143 15.4353 15.4353 14.5143 16.5714 14.5143C17.7076 14.5143 18.6286 15.4353 18.6286 16.5714C18.6286 17.7076 17.7076 18.6286 16.5714 18.6286Z" fill="currentColor" />
                    </svg>

                </button>
            </div>
        </div>
    </div>
</section>
 
<section class="pt-4 md:pt-6 pb-8 md:pb-14 flex flex-col gap-6 md:gap-8">
    <div class="container flex flex-col gap-6 md:gap-8">
        {% render "@breadcrumbs" with (breadcrumbs is defined ? breadcrumbs : {})|merge({container_classes:'hidden md:flex'}) %}
        <h1 class="text-3xl md:text-4xl font-medium text-neutral-800">{{ title }}<span class="ml-2 text-base text-neutral-600">({{ product_quantity ?: '600' }})</span></h1>
    </div>
    <div class="overflow-hidden md:overflow-visible">
        <div class="container md:flex justify-between items-center relative">
            {% render "@tag-list" with {
                tags: tags,
                color: colorType|default('dark')
            } %}
            <div class="z-30 shrink-0 grid grid-cols-2 items-center justify-center p-2 gap-2 bg-light-white fixed bottom-0 left-0 right-0 md:relative md:bg-transparent md:p-0 md:justify-start">
                {% render "@template-dropdown" with (sortDropdown is defined ? sortDropdown : {})|merge({isFixedMobile:true,button_class:'w-full',color: colorType|default('dark') ~ '-subtle'}) %}
                {% render "@template-button" with (filterButton is defined ? filterButton : {})|merge({button_class:'w-full',color: colorType|default('dark')}) %}
            </div>
        </div>
    </div>
</section>
 
{
  "title": "Product List Page",
  "filterButton": {
    "label": "Filtrer",
    "type": "trailing-icon",
    "button_attribute": "x-data x-init=\"$store.asideBlocs.addAside('filter')\" @click=\"$store.asideBlocs.toggleAside('filter')\"",
    "icon": {
      "name": "library--settings-1"
    }
  },
  "sortDropdown": {
    "label": "Trier par",
    "items": [
      {
        "label": "Prix Croissant",
        "href": "#"
      },
      {
        "label": "Prix Décroissant",
        "href": "#"
      },
      {
        "label": "Pertinence",
        "href": "#"
      },
      {
        "label": "Nouveauté",
        "href": "#"
      },
      {
        "label": "Meilleures ventes",
        "href": "#"
      }
    ]
  },
  "tags": [
    {
      "label": "First tag",
      "href": "#"
    },
    {
      "label": "Second tag",
      "href": "#"
    },
    {
      "label": "Third tag",
      "href": "#"
    },
    {
      "label": "Fourth tag",
      "href": "#"
    }
  ]
}

Plp Header Component Guide

How to use

Import

{% render "@plp-header" with {...} %}

Available props

  • title: string | default: “”
    • Title text displayed as the main heading of the section.
  • product_quantity: integer | default: 600
    • Displays the quantity of products next to the title in parentheses.
  • breadcrumbs: array | default: []
    • Breadcrumb navigation items passed to the @breadcrumbs component.
    • Each item should include necessary properties for @breadcrumbs. For more details, see the @breadcrumbs documentation.
  • tags: array | default: []
    • List of tags displayed in the tag list, passed to the @tag-list component. Each tag item should match the expected format for @tag-list.
    • For more details, see the @tag-list documentation.
  • type: string | default: dark
    • Defines the color theme for tags in the @tag-list. Possible values: dark, light, audio, etc.
  • sortDropdown: object | default: {}
  • filterButton: object | default: {}

Description

The Plp Header component displays a section header with a title, product quantity, breadcrumbs, and tags. It uses the @breadcrumbs and @tag-list components to display breadcrumb navigation and tags respectively. The component also includes a dropdown for sorting options and a button for filter options.