Alain Afflelou Design System

Color side panel 

<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 === 'pdpColor')?.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 === 'pdpColor')?.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('pdpColor')">
        <div class="p-4 md:px-10 md:py-6 font-medium text-2xl flex justify-between items-center">
            Couleurs
            <button type="button" @click="$store.asideBlocs.closeAside('pdpColor')" 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">
            <section class="grid grid-cols-2 gap-4 mx-auto p-4">
                <div class="flex flex-col">
                    <div class="aspect-square">
                        <img src="../../img/productSolaire/img_8.png" alt="vert" class="rounded-lg border  !border-neutral-800  hover:border-neutral-600">
                    </div>
                    <span class="mt-2 text-neutral-900 font-semibold capitalize">vert</span>
                </div>
                <div class="flex flex-col">
                    <div class="aspect-square">
                        <img src="../../img/productSolaire/img_9.png" alt="noir" class="rounded-lg border  border-neutral-300  hover:border-neutral-600">
                    </div>
                    <span class="mt-2 text-neutral-900 font-semibold capitalize">noir</span>
                </div>
            </section>

        </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 %}
        <section class="grid grid-cols-2 gap-4 mx-auto p-4">
            {% for photo in photos %}
                <div class="flex flex-col">
                    <div class="aspect-square">
                        <img
                                src="{{ photo.src | path }}"
                                alt="{{ photo.color }}"
                                class="rounded-lg border {% if photo.active is defined and photo.active %} !border-neutral-800 {% else %} border-neutral-300 {% endif %} hover:border-neutral-600"
                        >
                    </div>
                    <span class="mt-2 text-neutral-900 font-semibold capitalize">{{ photo.color }}</span>
                </div>
            {% endfor %}
        </section>
    {% endblock %}
{% endembed %}
 
{
  "panel": {
    "title": "Couleurs",
    "sidePanelButton": false,
    "showValue": "$store.asideBlocs.asides.find(aside => aside.name === 'pdpColor')?.open",
    "closeButtonAlpineClick": "$store.asideBlocs.closeAside('pdpColor')"
  },
  "photos": [
    {
      "color": "vert",
      "src": "/img/productSolaire/img_8.png",
      "active": true
    },
    {
      "color": "noir",
      "src": "/img/productSolaire/img_9.png"
    }
  ]
}

No notes defined.