Etat Pur Design System

Order item list 

<table class="w-full text-body-sm">
    <thead>
        <tr class="font-bold min-h-14 border-b border-brand-500">
            <th class="p-2 text-start md:w-1/2 2xl:w-1/4">Produit</th>
            <th class="p-2 text-end w-1/4 hidden md:table-cell">Prix</th>
            <th class="p-2 text-center w-auto hidden md:table-cell">Qté</th>
            <th class="p-2 text-end w-1">Total</th>
        </tr>
    </thead>
    <tbody>
        <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="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>
            </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="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>
            </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="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>
            </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>
    </tbody>
</table>
 
{% embed '@template-order-detail-table-header' %}
    {% block yield %}
        {% for order_product_item in order_product_items %}
            {% render '@order-product-item' with order_product_item %}
        {% endfor %}
    {% endblock %}
{% endembed %}
 
{
  "order_product_items": [
    {
      "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 €"
    },
    {
      "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": "",
      "quantity": 1,
      "total_price": "13,41 €"
    },
    {
      "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": "",
      "quantity": 1,
      "total_price": "13,41 €"
    },
    {
      "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": "",
      "quantity": 1,
      "total_price": "13,41 €"
    }
  ]
}

No notes defined.