image background card product

gestaoRaul/templates/htmx_components/comandas/htmx_list_products.html

@@ -2,13 +2,13 @@
 
 {% for product in products %}
 
-<div 
-        onclick="addProductComanda({{product.id}}, {{comanda_id}}, '{{product.cuisine}}')" 
-        class="card-product"
->
-        {{product.name}} <br>
-        R$ {{product.price}}
-</div>
+        <div 
+                style="background-image:  url('{{product.image}}');"
+                 class="card-product"
+                  onclick="addProductComanda({{product.id}}, {{comanda.id}}, '{{product.cuisine}}')" >
+                 <p class="card-product-p"> {{product.name}}</p>
+                 <p class="card-product-p"> R$ {{product.price}}</p>
+                </div >
 
 {% endfor %}
 

gestaoRaul/templates/htmx_components/htmx_list_products_balcao.html

@@ -5,6 +5,7 @@
 {% if forloop.counter0 == 0 %}
 
                 <article 
+                   style="background-image:  url('{{product.image}}');"
                 name="productBox"
                 id="productId-{{ product.id }}" 
                 class="card-product"
@@ -12,20 +13,22 @@
                 >
                 <p hidden id="{{forloop.counter0}}" >{{product.id}}</p>
                 <p hidden id="comanda{{forloop.counter0}}" >{{comanda.id}}</p>
-                {{product.name}} <br> <p id="{{product.id}}"></p>
-                R$ {{product.price}}
+               <p class="card-product-p"> {{product.name}}</p> 
+               <p id="{{product.id}}"></p>
+               <p class="card-product-p"> R$ {{product.price}}</p>
                 </article >
 
         {% else %}
 
                 <article 
+                   style="background-image:  url('{{product.image}}');"
                 name="productBox"
                 id="productId-{{ product.id }}" 
                 class="card-product" 
                 onclick="addProductClick({{product.id}})"
                 >
-                {{product.name}} <br>
-                R$ {{product.price}}
+                  <p class="card-product-p"> {{product.name}}</p>
+                 <p class="card-product-p"> R$ {{product.price}}</p>
                 </article >
 
         {% endif %}
@@ -37,6 +40,12 @@
 
 
 
-
+        <div 
+                style="background-image:  url('{{product.image}}');"
+                 class="card-product"
+                  onclick="addProductComanda({{product.id}}, {{comanda.id}}, '{{product.cuisine}}')" >
+                 <p class="card-product-p"> {{product.name}}</p>
+                 <p class="card-product-p"> R$ {{product.price}}</p>
+                </div >
 
 

gestaoRaul/templates/htmx_components/products/htmx_search_products.html

@@ -16,6 +16,8 @@
 <td id="price-{{product.id}}" >R$ {{product.price}}</td>
 <td  class="hide-on-mobile" id="quantity-{{product.id}}" >{{product.quantity}}</td>
 <td  class="hide-on-mobile" id="category-{{product.id}}" >{{product.category.name}}</td>
+<td hidden class="hide-on-mobile" id="image-{{product.id}}" >{{product.image}}</td>
+
 <td>
   <div class="grid-buttons">
     <img