Liste de produits avec bouton de commande WhatsApp

1,015 programme

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Liste de produits avec bouton de commande WhatsApp

Recommandé

10 May 2025

Un code par jrj332790

12 June 2025

Un code de Mete

18 December 2025

Code source HTML du jeu Diviser par 1

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