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">
    <td class="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="p-2 text-end hidden md:table-cell">
        <div class="text-body-xs">
            <div class="font-bold ">13,41€</div>
            <div class="text-black/64 line-through">14,90€</div>
        </div>
    </td>
    <td class="p-2 text-center hidden md:table-cell">
        <span class="text-body-xs">1</span>
    </td>
    <td class="p-2 text-end">
        <span class="text-body-xs font-bold whitespace-nowrap">13,41 €</span>
    </td>
</tr>
 
<tr class="min-h-14 border-t first:border-t-0 border-black/08 even:bg-neutral-50">
    <td class="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="p-2 text-end hidden md:table-cell">
        <div class="text-body-xs">
            <div class="font-bold ">{{ price }}</div>
            {% if old_price %}
                <div class="text-black/64 line-through">{{ old_price }}</div>
            {% endif %}
        </div>
    </td>
    <td class="p-2 text-center hidden md:table-cell">
        <span class="text-body-xs">{{ quantity }}</span>
    </td>
    <td class="p-2 text-end">
        <span class="text-body-xs font-bold whitespace-nowrap">{{ total_price }}</span>
    </td>
</tr>
 
{
  "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€",
  "old_price": "14,90€",
  "quantity": 1,
  "total_price": "13,41 €"
}

No notes defined.