Etat Pur Design System

Order product item 

<tr class="min-h-14 border-t first:border-t-0 border-black/08 even:bg-neutral-50 block md:table-row">
    <td class="block md:table-cell p-2 text-start">
        <div class="flex items-center gap-3">
            <div class="flex-shrink-0 overflow-hidden">
                <img src="https://naos.dam-broadcast.com/cdn-cgi/image/width=48,height=57,fit=crop/medias/domain11863/media100412/123660-vfjeta2bf0.jpg" alt="La mousse nettoyante" class="w-full h-full object-cover" />
            </div>
            <div class="text-body-sm">
                <h4 class="font-bold">La mousse nettoyante</h4>
                <p>Adoucit - Illumine • <span class="text-black/64">150 ml</span></p>
            </div>
        </div>
    </td>

    <td class="flex justify-between items-center px-2 py-2 gap-4 md:hidden">
        <div>
            <div class="flex flex-col w-full gap-y-1">
                <div class="input-wrapper flex flex-col relative w-full  items-center">

                    <div class="input-qty-wrapper" x-data="{qty: 1 }">
                        <button type="button" @click='if(qty > 0) qty--' :class="qty === 0 ? 'disabled' : ''" aria-label="Label text" class="btn-qty decrement  btn  btn-dark  btn-subtle btn-border btn-size-xs btn-only-icon">
                            <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <path d="M5 12h14" stroke="currentColor" stroke-width="2" fill="none" />

                            </svg>

                        </button>

                        <input type="number" name="1" id="1" value="1" class="input-qty
                    
                    " placeholder="" min="0" x-model="qty" :class="qty > 0 ? 'filled' : ''">

                        <button type="button" @click='qty++' aria-label="Label text" class="btn-qty increment  btn  btn-dark  btn-subtle btn-border btn-size-xs btn-only-icon">
                            <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <path d="M12 4.5v15m7.5-7.5h-15" stroke="currentColor" stroke-width="2" fill="none" />

                            </svg>

                        </button>
                    </div>

                    <div class="sr-only">
                        <label for="1">
                            <span>La mousse nettoyante</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex flex-row gap-4 text-body-xs font-bold whitespace-nowrap">
            13,41 €

            <button type="button" aria-label="Label text" class=" btn  btn-dark  btn-simple  btn-size-md btn-only-icon">
                <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" stroke="currentColor" stroke-width="1.5" fill="none" />

                </svg>

            </button>
        </div>
    </td>

    <td class="p-2 text-end hidden md:table-cell">
        <div class="text-body-xs font-bold">13,41€</div>
    </td>
    <td class="p-2 text-center hidden md:table-cell">
        <div class="flex flex-col w-full gap-y-1">
            <div class="input-wrapper flex flex-col relative w-full  items-center">

                <div class="input-qty-wrapper" x-data="{qty: 1 }">
                    <button type="button" @click='if(qty > 0) qty--' :class="qty === 0 ? 'disabled' : ''" aria-label="Label text" class="btn-qty decrement  btn  btn-dark  btn-subtle btn-border btn-size-xs btn-only-icon">
                        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M5 12h14" stroke="currentColor" stroke-width="2" fill="none" />

                        </svg>

                    </button>

                    <input type="number" name="1" id="1" value="1" class="input-qty
                    
                    " placeholder="" min="0" x-model="qty" :class="qty > 0 ? 'filled' : ''">

                    <button type="button" @click='qty++' aria-label="Label text" class="btn-qty increment  btn  btn-dark  btn-subtle btn-border btn-size-xs btn-only-icon">
                        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M12 4.5v15m7.5-7.5h-15" stroke="currentColor" stroke-width="2" fill="none" />

                        </svg>

                    </button>
                </div>

                <div class="sr-only">
                    <label for="1">
                        <span>La mousse nettoyante</span>
                    </label>
                </div>
            </div>
        </div>
    </td>
    <td class="p-2 text-end hidden md:table-cell">
        <span class="text-body-xs font-bold whitespace-nowrap">13,41 €</span>
    </td>
    <td class="p-2 text-end hidden md:table-cell">
        <div class="flex items-center justify-center">
            <button type="button" aria-label="Label text" class=" btn  btn-dark  btn-simple  btn-size-md btn-only-icon">
                <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" stroke="currentColor" stroke-width="1.5" fill="none" />

                </svg>

            </button>
        </div>
    </td>
</tr>
 
<tr class="min-h-14 border-t first:border-t-0 border-black/08 even:bg-neutral-50 block md:table-row">
    <td class="block md:table-cell p-2 text-start">
        <div class="flex items-center gap-3">
            <div class="flex-shrink-0 overflow-hidden">
                <img src="{{ product_img }}"
                     alt="{{ product_name }}"
                     class="w-full h-full object-cover"/>
            </div>
            <div class="text-body-sm">
                <h4 class="font-bold">{{ product_name }}</h4>
                <p>{{ product_cat }} • <span class="text-black/64">{{ product_container }}</span></p>
            </div>
        </div>
    </td>

    <td class="flex justify-between items-center px-2 py-2 gap-4 md:hidden">
        <div>
            {% render "@template-input-qty" with {
                id: product_id,
                name: product_id,
                type: "qty",
                label: product_name,
                required: false,
                disabled: false,
                value: quantity,
                state: input.state,
                class: "items-center"
            } %}
        </div>

        <div class="flex flex-row gap-4 text-body-xs font-bold whitespace-nowrap">
            {{ total_price }}

            {% render "@template-button" with {
                type: 'simple',
                size:"md",
                color: 'dark',
                icon_type: 'only-icon',
                icon: {
                    name: 'heroicons--trash-outline',
                }
            } %}
        </div>
    </td>

    <td class="p-2 text-end hidden md:table-cell">
        <div class="text-body-xs font-bold">{{ price }}</div>
    </td>
    <td class="p-2 text-center hidden md:table-cell">
        {% render "@template-input-qty" with {
            id: product_id,
            name: product_id,
            type: "qty",
            label: product_name,
            required: false,
            disabled: false,
            value: quantity,
            state: input.state,
            class: "items-center"
        } %}
    </td>
    <td class="p-2 text-end hidden md:table-cell">
        <span class="text-body-xs font-bold whitespace-nowrap">{{ total_price }}</span>
    </td>
    <td class="p-2 text-end hidden md:table-cell">
        <div class="flex items-center justify-center">
            {% render "@template-button" with {
                type: 'simple',
                size:"md",
                color: 'dark',
                icon_type: 'only-icon',
                icon: {
                    name: 'heroicons--trash-outline',
                }
            } %}
        </div>
    </td>
</tr>
 
{
  "product_id": "1",
  "product_img": "https://naos.dam-broadcast.com/cdn-cgi/image/width=48,height=57,fit=crop/medias/domain11863/media100412/123660-vfjeta2bf0.jpg",
  "product_name": "La mousse nettoyante",
  "product_cat": "Adoucit - Illumine",
  "product_container": "150 ml",
  "price": "13,41€",
  "quantity": 1,
  "total_price": "13,41 €"
}

No notes defined.