Etat Pur Design System

Sticky Buy Button 

<div x-data="{ visible: true }" x-init="
        $nextTick(() => {
          let target = document.querySelector('#buttonOrders');
          if (target) new IntersectionObserver(([entry]) => {
            visible = !entry.isIntersecting;
          }, {
            root: null,
            threshold: 0.1
          }).observe(target);
        });
      " x-show="visible" x-transition:leave.opacity.duration.300ms x-cloak class="fixed bottom-0 left-0 right-0 z-40 bg-white px-4 py-3 border-y border-black/16 shadow-32 md:hidden">
    <div class="pt-1 flex flex-row gap-2 justify-between">
        <div class="flex flex-col">
            <p class="font-bold">TOTAL</p>
            <p class="text-body-xs text-black/56">Taxes de 00,00 € incluses</p>
        </div>
        <span class="font-bold">57,70€</span>
    </div>

    <button type="button" class="w-full justify-center  btn  btn-dark  btn-solid  btn-size-lg">
        Commander

    </button>
</div>
 
<div
    x-data="{ visible: true }"
    x-init="
        $nextTick(() => {
          let target = document.querySelector('{{ target }}');
          if (target) new IntersectionObserver(([entry]) => {
            visible = !entry.isIntersecting;
          }, {
            root: null,
            threshold: 0.1
          }).observe(target);
        });
      "
    x-show="visible"
    x-transition:leave.opacity.duration.300ms
    x-cloak
    class="fixed bottom-0 left-0 right-0 z-40 bg-white px-4 py-3 border-y border-black/16 shadow-32 {{ class }}"
>
    <div class="pt-1 flex flex-row gap-2 justify-between">
        {% if outStock == false %}
            <div class="flex flex-col">
                <p class="font-bold">TOTAL</p>
                <p class="text-body-xs text-black/56">Taxes de 00,00 € incluses</p>
            </div>
            <span class="font-bold">57,70€</span>
        {% else %}
            <span class="h4">21,90€</span>
        {% endif %}
    </div>

    {% render "@template-button" with {
        label: cta.label,
        color: "dark",
        type: "solid",
        button_class: cta.button_class,
        disabled: cta.disabled
    } %}
</div>
 
{
  "class": "md:hidden",
  "target": "#buttonOrders",
  "outStock": false,
  "cta": {
    "label": "Commander",
    "button_class": "w-full justify-center"
  }
}

No notes defined.