Listado de productos con botón de pedido de WhatsApp

1,014 programme

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Listado de productos con botón de pedido de WhatsApp

Recomendado

1 October 2025

Plantilla de sitio web de portafolio HTML CSS JavaScript

22 September 2025

Juego de cubo 3D HTML con estadísticas y personalización

11 December 2024

Botón flotante

HTML

<header>Ma Boutique</header>

<div class="card">
    <img src="https://via.placeholder.com/400x400" alt="Article 1">
    <h3>Article 1</h3>
    <p>Modèle : Classique</p>
    <p class="price">10 000 FCFA</p>
    <select id="size1"><option>S</option><option>M</option><option>L</option><option>XL</option></select>
    <button class="btn" onclick="order('Article 1','Classique','10 000 FCFA','size1')">Commander sur WhatsApp</button>
  </div>

<div class="card"><img src="https://via.placeholder.com/400x400"><h3>Article 2</h3><p>Modèle : Classique</p><p class="price">10 000 FCFA</p><select id="size2"><option>S</option><option>M</option><option>L</option><option>XL</option></select><button class="btn" onclick="order('Article 2','Classique','10 000 FCFA','size2')">Commander sur WhatsApp</button></div>
  <div class="card"><img src="https://via.placeholder.com/400x400"><h3>Article 3</h3><p>Modèle : Classique</p><p class="price">10 000 FCFA</p><select id="size3"><option>S</option><option>M</option><option>L</option><option>XL</option></select><button class="btn" onclick="order('Article 3','Classique','10 000 FCFA','size3')">Commander sur WhatsApp</button></div>
  <div class="card"><img src="https://via.placeholder.com/400x400"><h3>Article 4</h3><p>Modèle : Classique</p><p class="price">10 000 FCFA</p><select id="size4"><option>S</option><option>M</option><option>L</option><option>XL</option></select><button class="btn" onclick="order('Article 4','Classique','10 000 FCFA','size4')">Commander sur WhatsApp</button></div>
  <div class="card"><img src="https://via.placeholder.com/400x400"><h3>Article 5</h3><p>Modèle : Classique</p><p class="price">10 000 FCFA</p><select id="size5"><option>S</option><option>M</option><option>L</option><option>XL</option></select><button class="btn" onclick="order('Article 5','Classique','10 000 FCFA','size5')">Commander sur WhatsApp</button></div>
  <div class="card"><img src="https://via.placeholder.com/400x400"><h3>Article 6</h3><p>Modèle : Classique</p><p class="price">10 000 FCFA</p><select id="size6"><option>S</option><option>M</option><option>L</option><option>XL</option></select><button class="btn" onclick="order('Article 6','Classique','10 000 FCFA','size6')">Commander sur WhatsApp</button></div>
  <div class="card"><img src="https://via.placeholder.com/400x400"><h3>Article 7</h3><p>Modèle : Classique</p><p class="price">10 000 FCFA</p><select id="size7"><option>S</option><option>M</option><option>L</option><option>XL</option></select><button class="btn" onclick="order('Article 7','Classique','10 000 FCFA','size7')">Commander sur WhatsApp</button></div>
  <div class="card"><img src="https://via.placeholder.com/400x400"><h3>Article 8</h3><p>Modèle : Classique</p><p class="price">10 000 FCFA</p><select id="size8"><option>S</option><option>M</option><option>L</option><option>XL</option></select><button class="btn" onclick="order('Article 8','Classique','10 000 FCFA','size8')">Commander sur WhatsApp</button></div>
  <div class="card"><img src="https://via.placeholder.com/400x400"><h3>Article 9</h3><p>Modèle : Classique</p><p class="price">10 000 FCFA</p><select id="size9"><option>S</option><option>M</option><option>L</option><option>XL</option></select><button class="btn" onclick="order('Article 9','Classique','10 000 FCFA','size9')">Commander sur WhatsApp</button></div>
  <div class="card"><img src="https://via.placeholder.com/400x400"><h3>Article 10</h3><p>Modèle : Classique</p><p class="price">10 000 FCFA</p><select id="size10"><option>S</option><option>M</option><option>L</option><option>XL</option></select><button class="btn" onclick="order('Article 10','Classique','10 000 FCFA','size10')">Commander sur WhatsApp</button></div>
  <div class="card"><img src="https://via.placeholder.com/400x400"><h3>Article 11</h3><p>Modèle : Classique</p><p class="price">10 000 FCFA</p><select id="size11"><option>S</option><option>M</option><option>L</option><option>XL</option></select><button class="btn" onclick="order('Article 11','Classique','10 000 FCFA','size11')">Commander sur WhatsApp</button></div>
  <div class="card"><img src="https://via.placeholder.com/400x400"><h3>Article 12</h3><p>Modèle : Classique</p><p class="price">10 000 FCFA</p><select id="size12"><option>S</option><option>M</option><option>L</option><option>XL</option></select><button class="btn" onclick="order('Article 12','Classique','10 000 FCFA','size12')">Commander sur WhatsApp</button></div>
  <div class="card"><img src="https://via.placeholder.com/400x400"><h3>Article 13</h3><p>Modèle : Classique</p><p class="price">10 000 FCFA</p><select id="size13"><option>S</option><option>M</option><option>L</option><option>XL</option></select><button class="btn" onclick="order('Article 13','Classique','10 000 FCFA','size13')">Commander sur WhatsApp</button></div>
  <div class="card"><img src="https://via.placeholder.com/400x400"><h3>Article 14</h3><p>Modèle : Classique</p><p class="price">10 000 FCFA</p><select id="size14"><option>S</option><option>M</option><option>L</option><option>XL</option></select><button class="btn" onclick="order('Article 14','Classique','10 000 FCFA','size14')">Commander sur WhatsApp</button></div>
  <div class="card"><img src="https://via.placeholder.com/400x400"><h3>Article 15</h3><p>Modèle : Classique</p><p class="price">10 000 FCFA</p><select id="size15"><option>S</option><option>M</option><option>L</option><option>XL</option></select><button class="btn" onclick="order('Article 15','Classique','10 000 FCFA','size15')">Commander sur WhatsApp</button></div>
  <div class="card"><img src="https://via.placeholder.com/400x400"><h3>Article 16</h3><p>Modèle : Classique</p><p class="price">10 000 FCFA</p><select id="size16"><option>S</option><option>M</option><option>L</option><option>XL</option></select><button class="btn" onclick="order('Article 16','Classique','10 000 FCFA','size16')">Commander sur WhatsApp</button></div>
  <div class="card"><img src="https://via.placeholder.com/400x400"><h3>Article 17</h3><p>Modèle : Classique</p><p class="price">10 000 FCFA</p><select id="size17"><option>S</option><option>M</option><option>L</option><option>XL</option></select><button class="btn" onclick="order('Article 17','Classique','10 000 FCFA','size17')">Commander sur WhatsApp</button></div>
  <div class="card"><img src="https://via.placeholder.com/400x400"><h3>Article 18</h3><p>Modèle : Classique</p><p class="price">10 000 FCFA</p><select id="size18"><option>S</option><option>M</option><option>L</option><option>XL</option></select><button class="btn" onclick="order('Article 18','Classique','10 000 FCFA','size18')">Commander sur WhatsApp</button></div>
  <div class="card"><img src="https://via.placeholder.com/400x400"><h3>Article 19</h3><p>Modèle : Classique</p><p class="price">10 000 FCFA</p><select id="size19"><option>S</option><option>M</option><option>L</option><option>XL</option></select><button class="btn" onclick="order('Article 19','Classique','10 000 FCFA','size19')">Commander sur WhatsApp</button></div>
  <div class="card"><img src="https://via.placeholder.com/400x400"><h3>Article 20</h3><p>Modèle : Classique</p><p class="price">10 000 FCFA</p><select id="size20"><option>S</option><option>M</option><option>L</option><option>XL</option></select><button class="btn" onclick="order('Article 20','Classique','10 000 FCFA','size20')">Commander sur WhatsApp</button></div>

</div>

" + Array.from({length:19},(_,i)=>`<div class=\"card\">
<img src=\"https://via.placeholder.com/400x400\" alt=\"Article ${i+2}\" />
<h3>Article ${i+2}</h3>
<p>Modèle : Modèle ${i+2}</p>
<p class=\"price\">${(i+2)*1000} FCFA</p>
<select id=\"size${i+2}\"><option>S</option><option>M</option><option>L</option><option>XL</option></select>
<button class=\"btn\" onclick=\"order('Article ${i+2}','Modèle ${i+2}','${(i+2)*1000} FCFA','size${i+2}')\">Commander sur WhatsApp</button>
</div>`).join('') + "

</div>

</div>"

CSS