व्हाट्सएप ऑर्डर बटन के साथ उत्पाद सूची

88 nm06364179

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

10 July 2025

पंजीकरण के साथ लॉगिन करें

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

व्हाट्सएप ऑर्डर बटन के साथ उत्पाद सूची

अनुशंसित

CSS एनिमेटेड बटन होवर प्रभाव

बटन होवर

पंजीकरण के साथ लॉगिन करें

HTML

CSS

JS

अनुशंसित

CSS एनिमेटेड बटन होवर प्रभाव

बटन होवर

पंजीकरण के साथ लॉगिन करें

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS