Product Listing with WhatsApp Order Button

1,013 programme

Remix Open In Editor Fullscreen Discuss Publish Your Code

Product Listing with WhatsApp Order Button

<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

Product Listing with WhatsApp Order Button

Recommended