Brands side panel

Ready

HTML
View
Context
Info
Notes


        
        <div x-data class="fixed right-0 z-40 inset-y-0 max-w-full">
    <div x-cloak x-transition.opacity x-show="$store.asideBlocs.asides.find(aside => aside.name === 'storeBrandList')?.open" class="fixed inset-0 w-full h-full bg-dark-40 backdrop-blur-xl"></div>
    <div x-cloak x-transition:enter="transition ease-out duration-300" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" x-show="$store.asideBlocs.asides.find(aside => aside.name === 'storeBrandList')?.open" class="h-full relative bg-light-white overflow-hidden w-screen md:max-w-screen-sm flex flex-col" @click.outside="$store.asideBlocs.closeAside('storeBrandList')">
        <div class="p-4 md:px-10 md:py-6 font-medium text-2xl flex justify-between items-center">
            Nos marques
            <button type="button" @click="$store.asideBlocs.closeAside('storeBrandList')" class="max-md:btn-size-sm btn btn-dark-ghost  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>
        <div class="px-4 md:px-10 overflow-auto flex-1 border-t border-b border-neutral-200">

            <div x-data="searchableStrings(JSON.parse('\u005B\u007B\u0022value\u0022\u003A\u0022Afflelou\u0022,\u0022label\u0022\u003A\u0022Afflelou\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Afflelou\u0020PARIS\u0022,\u0022label\u0022\u003A\u0022Afflelou\u0020PARIS\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022BOSS\u0022,\u0022label\u0022\u003A\u0022BOSS\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Calvin\u0020Klein\u0020Jean\u0022,\u0022label\u0022\u003A\u0022Calvin\u0020Klein\u0020Jean\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Carrera\u0022,\u0022label\u0022\u003A\u0022Carrera\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Chopard\u0022,\u0022label\u0022\u003A\u0022Chopard\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Dolce\u0020\u0026\u0020Gabbana\u0022,\u0022label\u0022\u003A\u0022Dolce\u0020\u0026\u0020Gabbana\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Etina\u0022,\u0022label\u0022\u003A\u0022Etina\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Giorgio\u0020Armani\u0022,\u0022label\u0022\u003A\u0022Giorgio\u0020Armani\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Givenchy\u0022,\u0022label\u0022\u003A\u0022Givenchy\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Gucci\u0022,\u0022label\u0022\u003A\u0022Gucci\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Julbo\u0022,\u0022label\u0022\u003A\u0022Julbo\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Kenzo\u0022,\u0022label\u0022\u003A\u0022Kenzo\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Lafont\u0022,\u0022label\u0022\u003A\u0022Lafont\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Marc\u0020Jacobs\u0022,\u0022label\u0022\u003A\u0022Marc\u0020Jacobs\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Michael\u0020Kors\u0022,\u0022label\u0022\u003A\u0022Michael\u0020Kors\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Persol\u0022,\u0022label\u0022\u003A\u0022Persol\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Ray\u002DBan\u0022,\u0022label\u0022\u003A\u0022Ray\u002DBan\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022SAINT\u0020LAURENT\u0020PARIS\u0022,\u0022label\u0022\u003A\u0022SAINT\u0020LAURENT\u0020PARIS\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022SONIA\u0020RYKIEL\u0022,\u0022label\u0022\u003A\u0022SONIA\u0020RYKIEL\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Swarovski\u0022,\u0022label\u0022\u003A\u0022Swarovski\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Tag\u0020Heuer\u0022,\u0022label\u0022\u003A\u0022Tag\u0020Heuer\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Afflelou\u00202\u0022,\u0022label\u0022\u003A\u0022Afflelou\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Afflelou\u00203\u0022,\u0022label\u0022\u003A\u0022Afflelou\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Afflelou\u0020PARIS\u00202\u0022,\u0022label\u0022\u003A\u0022Afflelou\u0020PARIS\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Afflelou\u0020PARIS\u00203\u0022,\u0022label\u0022\u003A\u0022Afflelou\u0020PARIS\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022BOSS\u00202\u0022,\u0022label\u0022\u003A\u0022BOSS\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022BOSS\u00203\u0022,\u0022label\u0022\u003A\u0022BOSS\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Calvin\u0020Klein\u0020Jean\u00202\u0022,\u0022label\u0022\u003A\u0022Calvin\u0020Klein\u0020Jean\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Calvin\u0020Klein\u0020Jean\u00203\u0022,\u0022label\u0022\u003A\u0022Calvin\u0020Klein\u0020Jean\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Carrera\u00202\u0022,\u0022label\u0022\u003A\u0022Carrera\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Carrera\u00203\u0022,\u0022label\u0022\u003A\u0022Carrera\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Chopard\u00202\u0022,\u0022label\u0022\u003A\u0022Chopard\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Chopard\u00203\u0022,\u0022label\u0022\u003A\u0022Chopard\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Dolce\u0020\u0026\u0020Gabbana\u00202\u0022,\u0022label\u0022\u003A\u0022Dolce\u0020\u0026\u0020Gabbana\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Dolce\u0020\u0026\u0020Gabbana\u00203\u0022,\u0022label\u0022\u003A\u0022Dolce\u0020\u0026\u0020Gabbana\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Etina\u00202\u0022,\u0022label\u0022\u003A\u0022Etina\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Etina\u00203\u0022,\u0022label\u0022\u003A\u0022Etina\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Giorgio\u0020Armani\u00202\u0022,\u0022label\u0022\u003A\u0022Giorgio\u0020Armani\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Giorgio\u0020Armani\u00203\u0022,\u0022label\u0022\u003A\u0022Giorgio\u0020Armani\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Givenchy\u00202\u0022,\u0022label\u0022\u003A\u0022Givenchy\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Givenchy\u00203\u0022,\u0022label\u0022\u003A\u0022Givenchy\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Gucci\u00202\u0022,\u0022label\u0022\u003A\u0022Gucci\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Gucci\u00203\u0022,\u0022label\u0022\u003A\u0022Gucci\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Julbo\u00202\u0022,\u0022label\u0022\u003A\u0022Julbo\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Julbo\u00203\u0022,\u0022label\u0022\u003A\u0022Julbo\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Kenzo\u00202\u0022,\u0022label\u0022\u003A\u0022Kenzo\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Kenzo\u00203\u0022,\u0022label\u0022\u003A\u0022Kenzo\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Lafont\u00202\u0022,\u0022label\u0022\u003A\u0022Lafont\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Lafont\u00203\u0022,\u0022label\u0022\u003A\u0022Lafont\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Marc\u0020Jacobs\u00202\u0022,\u0022label\u0022\u003A\u0022Marc\u0020Jacobs\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Marc\u0020Jacobs\u00203\u0022,\u0022label\u0022\u003A\u0022Marc\u0020Jacobs\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Michael\u0020Kors\u00202\u0022,\u0022label\u0022\u003A\u0022Michael\u0020Kors\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Michael\u0020Kors\u00203\u0022,\u0022label\u0022\u003A\u0022Michael\u0020Kors\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Persol\u00202\u0022,\u0022label\u0022\u003A\u0022Persol\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Persol\u00203\u0022,\u0022label\u0022\u003A\u0022Persol\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Ray\u002DBan\u00202\u0022,\u0022label\u0022\u003A\u0022Ray\u002DBan\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Ray\u002DBan\u00203\u0022,\u0022label\u0022\u003A\u0022Ray\u002DBan\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022SAINT\u0020LAURENT\u0020PARIS\u00202\u0022,\u0022label\u0022\u003A\u0022SAINT\u0020LAURENT\u0020PARIS\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022SAINT\u0020LAURENT\u0020PARIS\u00203\u0022,\u0022label\u0022\u003A\u0022SAINT\u0020LAURENT\u0020PARIS\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022SONIA\u0020RYKIEL\u00202\u0022,\u0022label\u0022\u003A\u0022SONIA\u0020RYKIEL\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022SONIA\u0020RYKIEL\u00203\u0022,\u0022label\u0022\u003A\u0022SONIA\u0020RYKIEL\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Swarovski\u00202\u0022,\u0022label\u0022\u003A\u0022Swarovski\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Swarovski\u00203\u0022,\u0022label\u0022\u003A\u0022Swarovski\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Tag\u0020Heuer\u00202\u0022,\u0022label\u0022\u003A\u0022Tag\u0020Heuer\u0022\u007D,\u007B\u0022value\u0022\u003A\u0022Tag\u0020Heuer\u00203\u0022,\u0022label\u0022\u003A\u0022Tag\u0020Heuer\u0022\u007D\u005D'))">
                <label class="relative mb-6 block">
                    <input x-model="search" type="text" placeholder="Rechercher" class="w-full leading-icon">
                    <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="M11 3.75C6.99594 3.75 3.75 6.99594 3.75 11C3.75 15.0041 6.99594 18.25 11 18.25C15.0041 18.25 18.25 15.0041 18.25 11C18.25 6.99594 15.0041 3.75 11 3.75ZM2.25 11C2.25 6.16751 6.16751 2.25 11 2.25C15.8325 2.25 19.75 6.16751 19.75 11C19.75 13.1462 18.9773 15.112 17.6949 16.6342L21.5303 20.4697C21.8232 20.7626 21.8232 21.2374 21.5303 21.5303C21.2374 21.8232 20.7626 21.8232 20.4697 21.5303L16.6342 17.6949C15.112 18.9773 13.1462 19.75 11 19.75C6.16751 19.75 2.25 15.8325 2.25 11Z" fill="currentColor" />
                    </svg>
                </label>

                <div x-ref="items" class="grid grid-cols-1 md:grid-cols-2 gap-y-4 gap-x-8">
                    <template x-for="item in items" :key="item.value">
                        <label class="selection-control-label selection-control-size-md text-neutral-800">
                            <span x-text="item.label"></span>
                        </label>
                    </template>
                </div>
            </div>

            <script>
                function searchableStrings(items) {
                    return {
                        search: '',
                        allItems: items,
                        searchItems: [],
                        get items() {
                            if (this.search === '') {
                                return this.allItems;
                            }
                            return this.allItems.filter((item) => {
                                return item.value
                                    .replace(/ /g, '')
                                    .toLowerCase()
                                    .includes(this.search.replace(/ /g, '').toLowerCase());
                            });
                        }
                    }
                }
            </script>

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


        {% embed "@side-panel" with panel|merge({sidePanelButton:panel.sidePanelButton|merge({label:(panel.sidePanelButton.label is defined ? panel.sidePanelButton.label|format(product_quantity|default('600')))})}) %}
    {% block content %}
        {% render "@searchable-list" with {
            name: "Nos marques",
            strings: brands
        } %}
    {% endblock %}
{% endembed %}


        
            
            {
  "panel": {
    "title": "Nos marques",
    "sidePanelButton": false,
    "showValue": "$store.asideBlocs.asides.find(aside => aside.name === 'storeBrandList')?.open",
    "closeButtonAlpineClick": "$store.asideBlocs.closeAside('storeBrandList')"
  },
  "brands": [
    {
      "value": "Afflelou",
      "label": "Afflelou"
    },
    {
      "value": "Afflelou PARIS",
      "label": "Afflelou PARIS"
    },
    {
      "value": "BOSS",
      "label": "BOSS"
    },
    {
      "value": "Calvin Klein Jean",
      "label": "Calvin Klein Jean"
    },
    {
      "value": "Carrera",
      "label": "Carrera"
    },
    {
      "value": "Chopard",
      "label": "Chopard"
    },
    {
      "value": "Dolce & Gabbana",
      "label": "Dolce & Gabbana"
    },
    {
      "value": "Etina",
      "label": "Etina"
    },
    {
      "value": "Giorgio Armani",
      "label": "Giorgio Armani"
    },
    {
      "value": "Givenchy",
      "label": "Givenchy"
    },
    {
      "value": "Gucci",
      "label": "Gucci"
    },
    {
      "value": "Julbo",
      "label": "Julbo"
    },
    {
      "value": "Kenzo",
      "label": "Kenzo"
    },
    {
      "value": "Lafont",
      "label": "Lafont"
    },
    {
      "value": "Marc Jacobs",
      "label": "Marc Jacobs"
    },
    {
      "value": "Michael Kors",
      "label": "Michael Kors"
    },
    {
      "value": "Persol",
      "label": "Persol"
    },
    {
      "value": "Ray-Ban",
      "label": "Ray-Ban"
    },
    {
      "value": "SAINT LAURENT PARIS",
      "label": "SAINT LAURENT PARIS"
    },
    {
      "value": "SONIA RYKIEL",
      "label": "SONIA RYKIEL"
    },
    {
      "value": "Swarovski",
      "label": "Swarovski"
    },
    {
      "value": "Tag Heuer",
      "label": "Tag Heuer"
    },
    {
      "value": "Afflelou 2",
      "label": "Afflelou"
    },
    {
      "value": "Afflelou 3",
      "label": "Afflelou"
    },
    {
      "value": "Afflelou PARIS 2",
      "label": "Afflelou PARIS"
    },
    {
      "value": "Afflelou PARIS 3",
      "label": "Afflelou PARIS"
    },
    {
      "value": "BOSS 2",
      "label": "BOSS"
    },
    {
      "value": "BOSS 3",
      "label": "BOSS"
    },
    {
      "value": "Calvin Klein Jean 2",
      "label": "Calvin Klein Jean"
    },
    {
      "value": "Calvin Klein Jean 3",
      "label": "Calvin Klein Jean"
    },
    {
      "value": "Carrera 2",
      "label": "Carrera"
    },
    {
      "value": "Carrera 3",
      "label": "Carrera"
    },
    {
      "value": "Chopard 2",
      "label": "Chopard"
    },
    {
      "value": "Chopard 3",
      "label": "Chopard"
    },
    {
      "value": "Dolce & Gabbana 2",
      "label": "Dolce & Gabbana"
    },
    {
      "value": "Dolce & Gabbana 3",
      "label": "Dolce & Gabbana"
    },
    {
      "value": "Etina 2",
      "label": "Etina"
    },
    {
      "value": "Etina 3",
      "label": "Etina"
    },
    {
      "value": "Giorgio Armani 2",
      "label": "Giorgio Armani"
    },
    {
      "value": "Giorgio Armani 3",
      "label": "Giorgio Armani"
    },
    {
      "value": "Givenchy 2",
      "label": "Givenchy"
    },
    {
      "value": "Givenchy 3",
      "label": "Givenchy"
    },
    {
      "value": "Gucci 2",
      "label": "Gucci"
    },
    {
      "value": "Gucci 3",
      "label": "Gucci"
    },
    {
      "value": "Julbo 2",
      "label": "Julbo"
    },
    {
      "value": "Julbo 3",
      "label": "Julbo"
    },
    {
      "value": "Kenzo 2",
      "label": "Kenzo"
    },
    {
      "value": "Kenzo 3",
      "label": "Kenzo"
    },
    {
      "value": "Lafont 2",
      "label": "Lafont"
    },
    {
      "value": "Lafont 3",
      "label": "Lafont"
    },
    {
      "value": "Marc Jacobs 2",
      "label": "Marc Jacobs"
    },
    {
      "value": "Marc Jacobs 3",
      "label": "Marc Jacobs"
    },
    {
      "value": "Michael Kors 2",
      "label": "Michael Kors"
    },
    {
      "value": "Michael Kors 3",
      "label": "Michael Kors"
    },
    {
      "value": "Persol 2",
      "label": "Persol"
    },
    {
      "value": "Persol 3",
      "label": "Persol"
    },
    {
      "value": "Ray-Ban 2",
      "label": "Ray-Ban"
    },
    {
      "value": "Ray-Ban 3",
      "label": "Ray-Ban"
    },
    {
      "value": "SAINT LAURENT PARIS 2",
      "label": "SAINT LAURENT PARIS"
    },
    {
      "value": "SAINT LAURENT PARIS 3",
      "label": "SAINT LAURENT PARIS"
    },
    {
      "value": "SONIA RYKIEL 2",
      "label": "SONIA RYKIEL"
    },
    {
      "value": "SONIA RYKIEL 3",
      "label": "SONIA RYKIEL"
    },
    {
      "value": "Swarovski 2",
      "label": "Swarovski"
    },
    {
      "value": "Swarovski 3",
      "label": "Swarovski"
    },
    {
      "value": "Tag Heuer 2",
      "label": "Tag Heuer"
    },
    {
      "value": "Tag Heuer 3",
      "label": "Tag Heuer"
    }
  ]
}

Handle: @store-asidebrandlist
Preview:
- With layout
- Component only
Filesystem Path: src/components/organisms/store/AsidePanel/store-asideBrandList/store-asideBrandList.twig
References (2): @side-panel, @searchable-list
Referenced by (2): @preview-store, @preview-aside-store-bloc

No notes defined.