Liste de produits avec bouton de commande WhatsApp

84 nm06364179

Ouvrir dans l'éditeur Video Publiez votre code

Liste de produits avec bouton de commande WhatsApp

Recommandé

27 May 2025

Portfolio de développeur HTML V2

29 June 2025

Un code de Mete

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

Liste de produits avec bouton de commande WhatsApp

Recommandé

Un code par alejandrokundrah

Portfolio de développeur HTML V2

Un code de Mete

HTML

CSS

JS

Recommandé

Un code par alejandrokundrah

Portfolio de développeur HTML V2

Un code de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS