Custom E-Commerce Script for Any Website Using Google Sheets Database - Favorite Web

Favorite Multimedia
Author - personFavorite Multimedia
April 14, 2026 Views
0

HTML Code

এখানে সবগুলো প্রডাক্টকে shopx-container div এর মধ্যে রাখা হয়েছে, এবং shopx-card div এর মধ্যে আলাদা আলাদা প্রডাক্ট রাখা হয়েছে। shopx-card div এর মধ্যে Product Image, Title, Price, Description, Quantity এবং price দেওয়া আছে যা User/Customer দেখতে পারে, এগুলো নিজের প্রডাক্ট অনুযায়ী পরিবর্তন করে নিতে হবে।

এখানে ট্রিকি কাজ হলো প্রতিটি প্রডাক্টের ডিটেইলের জন্য desc1, desc2 এইগুলো ভিন্ন ভিন্ন হতে হবে।

Quantity ইনপুটের id সেইগুলো প্রডাক্টের সাথে মিল থাকবে যেসব প্রডাক্টের Default Quantity Minimum এবং Quantity একই থাকে।

অর্ডার বাটনের ShopX.open ফাংশনের মধ্যে যে টাইটেল ওইটাই গুগল শিটে Entry হবে, তারপর প্রতি পিস প্রাইস, তারপর Quantity input এর ID দিতে হবে যেন input এ আগের Default সেট করা Quantity অনুযায়ী টোটাল প্রাইজ দেখায়।

এরপর Popup Box এর মধ্যের নাম্বার চেইঞ্জ করলেই HTML এডিট শেষ।
<div class="shopx-container">
  <div class="shopx-card">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaN_1063aibGxjWTHECkffeWYBdgUA49hJQkEBjawySP_-8nE2aomD_9IUq26bztjjU8bl7UgTiy-v75xUlUQECQyvqLbwiMkF9ov0JEnHdfNOUKkLklhbMWOTQQTEvLiGHQKz5xyWdVkyl8AyJDcTmPZMMDKxnoXezbDD4apD5msmJ9rbqkKMAXXiHfo/s1600/facebook%20like.png">

  <div class="shopx-title">Bangladeshi Facebook Like + Followers</div>
  <div class="shopx-desc">
    <div class="sx-desc-text" id="desc1">
<p>𝐒𝐭𝐚𝐫𝐭 𝐓𝐢𝐦𝐞: 6 Hour To 24 Hour
𝐌𝐚𝐱𝐢𝐦𝐮𝐦 𝐖𝐚𝐢𝐭:- 24 Hour.
𝐒𝐩𝐞𝐞𝐝:- 1k-3k Per day.
𝐐𝐮𝐚𝐥𝐢𝐭𝐲:- Real Follower 🇧🇩
𝐑𝐞𝐟𝐢𝐥𝐥:- 30 Day Refill.
𝐃𝐫𝐨𝐩 𝐑𝐚𝐭𝐢𝐨:- 0%

✔ Refill/Support Available.
✔ Support Any Type Page.
✔ Increase Like+Follower.
✔ Speed And Start Times May Be Delayed If Our System Is Overloaded. And It May Take Up To 36 Hours For Orders To Be Processed.

✘ Don't Make Multiple Order In Same Time. Wait For Previous One Complete Then Make New One.</p>
    </div>
    <span class="sx-see-more" onclick="ShopX.toggleDesc('desc1', this)">See More</span>
</div>
  <div class="shopx-price">৳200</div>

  <!-- FLEX ROW -->
  <div class="shopx-action-row">

  <!-- LEFT SIDE (Qty + input same line) -->
  <div class="shopx-qty-inline">
    <label>Qty:</label>
    <input type="number" min="500" value="1000" id="qty-1" readonly>
  </div>

  <!-- RIGHT SIDE (Order button) -->
  <button class="shopx-btn" onclick="ShopX.open('Bangladeshi Facebook Like + Followers',.2,'qty-1')">
    Order
  </button>

</div>
</div>
  
  <div class="shopx-card">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaN_1063aibGxjWTHECkffeWYBdgUA49hJQkEBjawySP_-8nE2aomD_9IUq26bztjjU8bl7UgTiy-v75xUlUQECQyvqLbwiMkF9ov0JEnHdfNOUKkLklhbMWOTQQTEvLiGHQKz5xyWdVkyl8AyJDcTmPZMMDKxnoXezbDD4apD5msmJ9rbqkKMAXXiHfo/s1600/facebook%20like.png">

  <div class="shopx-title">Facebook BD Mixed Profile/Page Followers</div>
  <div class="shopx-desc"><div class="sx-desc-text" id="desc2">
<p>★ 𝐒𝐭𝐚𝐫𝐭 𝐓𝐢𝐦𝐞:- Instant.
★ 𝐌𝐚𝐱𝐢𝐦𝐮𝐦 𝐖𝐚𝐢𝐭:- 5 Minutes To 1 Hour.
★ 𝐒𝐩𝐞𝐞𝐝:- 20k-30k Per Day.
★ 𝐐𝐮𝐚𝐥𝐢𝐭𝐲:- BD+Mix 🇧🇩👥
★ 𝐑𝐞𝐟𝐢𝐥𝐥:- No.
★ 𝐃𝐫𝐨𝐩 𝐑𝐚𝐭𝐢𝐨:- 5%+ Can Drop.
★ 𝐃𝐨𝐰𝐧𝐟𝐥𝐨𝐰:- 0%

✔ Support Available.
✔ Support Profile/Page.
✔ Put Profile ~ Page Link.

✘ Don't Make Multiple Order In Same Time. Wait For Previous One Complete Then Make New One.</p>
    </div>
    <span class="sx-see-more" onclick="ShopX.toggleDesc('desc2', this)">See More</span>
</div>
  <div class="shopx-price">৳100</div>

  <!-- FLEX ROW -->
  <div class="shopx-action-row">

  <!-- LEFT SIDE (Qty + input same line) -->
  <div class="shopx-qty-inline">
    <label>Qty:</label>
    <input type="number" min="500" value="1000" id="qty-1" readonly>
  </div>

  <!-- RIGHT SIDE (Order button) -->
  <button class="shopx-btn" onclick="ShopX.open('Facebook BD Mixed Profile/Page Followers',.1,'qty-1')">
    Order
  </button>

</div>
</div>
  
  <div class="shopx-card">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaN_1063aibGxjWTHECkffeWYBdgUA49hJQkEBjawySP_-8nE2aomD_9IUq26bztjjU8bl7UgTiy-v75xUlUQECQyvqLbwiMkF9ov0JEnHdfNOUKkLklhbMWOTQQTEvLiGHQKz5xyWdVkyl8AyJDcTmPZMMDKxnoXezbDD4apD5msmJ9rbqkKMAXXiHfo/s1600/facebook%20like.png">

  <div class="shopx-title">Facebook Boots Profile/Page Followers</div>
  <div class="shopx-desc"><div class="sx-desc-text" id="desc3">
<p>- Location: Global
- Quality: HQ Accounts
- Start Time: 0-10 Minutes
- Speed: Day 200K
- Refill: No Refill ⚠️
- Drop Rate: Non Drop
- Example Link: https://www.facebook.com/username

⚠ Notes:
• In case of high demand for the service, there may be changes in speed and start time.
• Do not place the second order on the same link before your order is completed in the system.</p>
    </div>
    <span class="sx-see-more" onclick="ShopX.toggleDesc('desc3', this)">See More</span>
</div>
  <div class="shopx-price">৳75</div>

  <!-- FLEX ROW -->
  <div class="shopx-action-row">

  <!-- LEFT SIDE (Qty + input same line) -->
  <div class="shopx-qty-inline">
    <label>Qty:</label>
    <input type="number" min="1000" value="1000" id="qty-2" readonly>
  </div>

  <!-- RIGHT SIDE (Order button) -->
  <button class="shopx-btn" onclick="ShopX.open('Facebook Boots Profile/Page Followers',.075,'qty-2')">
    Order
  </button>

</div>
</div>
  
  <div class="shopx-card">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBcMZacZe3KteyWzLJve9bVSFdcg5FK9hBOApXhFRmlhDAtKFTukCQ39lzXZJV3V3uPRwsSBdv_lVpYvGnz1GNWNdr8UDeKiqzDhBkGON5-leTKvfKl3jkx4yaj19hwA8GTEjAbGqV9LB8zjPT0HLthJQMFqPVts8-nzmoQUHpU8Tyh5F_PGaO_R9FM1I/s1600/file_000000000b9c71f5b301576e1199528d.png">

  <div class="shopx-title">Facebook BD Post Reaction Like</div>
  <div class="shopx-desc"><div class="sx-desc-text" id="desc4">
<p>★ 𝐒𝐭𝐚𝐫𝐭 𝐓𝐢𝐦𝐞:12 - 24 Hour.
★ 𝐌𝐚𝐱𝐢𝐦𝐮𝐦 𝐖𝐚𝐢𝐭:- 24 To 36 Hour.
★ 𝐒𝐩𝐞𝐞𝐝:- 2k-3k Per day.
★ 𝐐𝐮𝐚𝐥𝐢𝐭𝐲:- Real BD React 🇧🇩</p>
    </div>
    <span class="sx-see-more" onclick="ShopX.toggleDesc('desc4', this)">See More</span>
</div>
  <div class="shopx-price">৳200</div>

  <!-- FLEX ROW -->
  <div class="shopx-action-row">

  <!-- LEFT SIDE (Qty + input same line) -->
  <div class="shopx-qty-inline">
    <label>Qty:</label>
    <input type="number" min="500" value="1000" id="qty-1" readonly>
  </div>

  <!-- RIGHT SIDE (Order button) -->
  <button class="shopx-btn" onclick="ShopX.open('Facebook BD Post Reaction Like',.2,'qty-1')">
    Order
  </button>

</div>
</div>
  
  <div class="shopx-card">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBcMZacZe3KteyWzLJve9bVSFdcg5FK9hBOApXhFRmlhDAtKFTukCQ39lzXZJV3V3uPRwsSBdv_lVpYvGnz1GNWNdr8UDeKiqzDhBkGON5-leTKvfKl3jkx4yaj19hwA8GTEjAbGqV9LB8zjPT0HLthJQMFqPVts8-nzmoQUHpU8Tyh5F_PGaO_R9FM1I/s1600/file_000000000b9c71f5b301576e1199528d.png">

  <div class="shopx-title">Facebook BD Mixed Post Reaction Like</div>
  <div class="shopx-desc"><div class="sx-desc-text" id="desc5">
<p>★ 𝐒𝐭𝐚𝐫𝐭 𝐓𝐢𝐦𝐞:- 10 Minutes.
★ 𝐌𝐚𝐱𝐢𝐦𝐮𝐦 𝐖𝐚𝐢𝐭:- 30 Minutes.
★ 𝐒𝐩𝐞𝐞𝐝:- 10k Day.
★ 𝐐𝐮𝐚𝐥𝐢𝐭𝐲:- BD 🇧🇩 & Mixed 👥
★ 𝐑𝐞𝐟𝐢𝐥𝐥:- No.
★ 𝐃𝐫𝐨𝐩 𝐑𝐚𝐭𝐢𝐨:- Less Drop.

✔ Support Available.
✔ Put Post Link.

✘ Don't Make Multiple Order In Same Time. Wait For Previous One Complete Then Make New One.</p>
    </div>
    <span class="sx-see-more" onclick="ShopX.toggleDesc('desc5', this)">See More</span>
</div>
  <div class="shopx-price">৳65</div>

  <!-- FLEX ROW -->
  <div class="shopx-action-row">

  <!-- LEFT SIDE (Qty + input same line) -->
  <div class="shopx-qty-inline">
    <label>Qty:</label>
    <input type="number" min="500" value="1000" id="qty-1" readonly>
  </div>

  <!-- RIGHT SIDE (Order button) -->
  <button class="shopx-btn" onclick="ShopX.open('Facebook BD Mixed Post Reaction Like',.065,'qty-1')">
    Order
  </button>

</div>
</div>
  
  <div class="shopx-card">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBcMZacZe3KteyWzLJve9bVSFdcg5FK9hBOApXhFRmlhDAtKFTukCQ39lzXZJV3V3uPRwsSBdv_lVpYvGnz1GNWNdr8UDeKiqzDhBkGON5-leTKvfKl3jkx4yaj19hwA8GTEjAbGqV9LB8zjPT0HLthJQMFqPVts8-nzmoQUHpU8Tyh5F_PGaO_R9FM1I/s1600/file_000000000b9c71f5b301576e1199528d.png">

  <div class="shopx-title">Facebook Boots Post Reaction Like</div>
  <div class="shopx-desc"><div class="sx-desc-text" id="desc6">
<p>- Link: Only Post Link
- Location: Worldwide 🌎
- Start: 0-2 Hour
- Speed: Day 10K
- Refill Time: No Refill ⚠️


Notes:
• In case of high demand for the service, there may be changes in speed and start time.
• Do not place the second order on the same link before your order is completed in the system.</p>
    </div>
    <span class="sx-see-more" onclick="ShopX.toggleDesc('desc6', this)">See More</span>
</div>
  <div class="shopx-price">৳50</div>

  <!-- FLEX ROW -->
  <div class="shopx-action-row">

  <!-- LEFT SIDE (Qty + input same line) -->
  <div class="shopx-qty-inline">
    <label>Qty:</label>
    <input type="number" min="1000" value="1000" id="qty-2" readonly>
  </div>

  <!-- RIGHT SIDE (Order button) -->
  <button class="shopx-btn" onclick="ShopX.open('Facebook Boots Post Reaction Like',.05,'qty-2')">
    Order
  </button>

</div>
</div>
</div>

<!-- POPUP -->
<div class="shopx-popup" id="shopx-popup">
  <div class="shopx-popup-box">
  <div class="shopx-popup-content">
    <h3>Order Form</h3>
    <div id="sx-msg" class="shopx-error"></div>

    <p><b id="sx-product-name"></b></p>
    <p>Price: ৳<span id="sx-price"></span></p>

    <label>Quantity:</label>
    <input type="number" id="sx-qty" value="1000" min="1" oninput="ShopX.liveValidate(); ShopX.updateTotal();">

    <p><b>Total: ৳<span id="sx-total"></span></b></p>

    <hr>

    <input type="text" id="sx-name" oninput="ShopX.clearMsg()" placeholder="Your Name">
    <input type="text" id="sx-phone" oninput="ShopX.clearMsg()" placeholder="Phone (01989080989)">
    <input type="text" id="sx-note" oninput="ShopX.clearMsg()" placeholder="Input URL">
    <select id="sx-payment" onchange="ShopX.togglePayment()">
      <option value="">Select Payment</option>
      <option value="bKash">bKash</option>
      <option value="Nagad">Nagad</option>
      <option value="Rocket">Rocket</option>
    </select>

    <div id="sx-payment-fields" style="display:none;">
    <input type="text" id="sx-paynumber" oninput="ShopX.clearMsg()" placeholder="Payment Number">
    <input type="text" id="sx-trx" oninput="ShopX.clearMsg()" placeholder="Transaction ID">
    </div>

    <p style="font-size:12px;color:#555;">
      Send money to: <b>01989080989</b>
    </p>

  <div class="shopx-popup-actions">
  <button class="shopx-btn submit-btn" onclick="ShopX.submit()">Submit</button>
  <button class="shopx-btn close-btn" onclick="ShopX.close()">Close</button>
  </div>

  </div>
  </div>
</div>

<div id="sx-success" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:999999;">
  <div style="background:#fff; padding:20px; width:300px; margin:120px auto; border-radius:10px; text-align:center;">
    <h3>✅ Order Successful</h3>
    <p id="sx-success-text"></p>
    <button onclick="ShopX.reloadPage()" style="padding:8px 15px; background:#0f9d58; color:#fff; border:none; border-radius:5px;">
      OK
    </button>
  </div>
</div>


CSS Code

<style>

/* ===== CONTAINER ===== */
.shopx-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

/* ===== CARD ===== */
.shopx-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  transition: 0.3s;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.shopx-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* IMAGE */
.shopx-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* TITLE */
.shopx-title {
  font-size: 16px;
  font-weight: 600;
  padding: 10px 12px 0;
}

/* DESC */
.shopx-desc {
  padding: 0 12px;
  font-size: 13px;
  color: #666;
}

.sx-desc-text {
  max-height: 80px;
  overflow: hidden;
  position: relative;
  transition: 0.3s ease;
}

.sx-desc-text p {
  white-space: pre-wrap;
}

.sx-desc-text.active {
  max-height: 600px;
}

/* See more button */
.sx-see-more {
  display: inline-block;
  margin-top: 5px;
  color: #007bff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

/* PRICE */
.shopx-price {
  color: #e53935;
  font-weight: bold;
  font-size: 16px;
  padding: 8px 12px;
}

/* ACTION ROW */
.shopx-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

/* INLINE QTY */
.shopx-qty-inline {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* LABEL */
.shopx-qty-inline label {
  font-size: 13px;
  color: #444;
  font-weight: 500;
}

/* INPUT */
.shopx-qty-inline input {
  width: 70px;
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-align: center;
}

/* BUTTON */
.shopx-btn {
  padding: 8px 12px;
  background: linear-gradient(135deg, #0f9d58, #00c853);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.shopx-btn:hover {
  background: linear-gradient(135deg, #0c7c46, #00a843);
}

/* ===== POPUP ===== */
.shopx-popup {
  display: none;
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(0,0,0,0.6);
  z-index: 999999;
}

/* ===== OUTER BOX (radius থাকবে এখানে) ===== */
.shopx-popup-box {
  background: #fff;
  width: 350px;
  margin: 80px auto;
  border-radius: 14px;
  overflow: hidden;   /* ✅ radius fix */
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* ===== INNER SCROLL AREA ===== */
.shopx-popup-content {
  padding: 20px;
  max-height: 500px;
  overflow-y: auto;
}

/* ===== SCROLLBAR ===== */
.shopx-popup-content::-webkit-scrollbar {
  width: 6px;
}
.shopx-popup-content::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

/* INPUT */
.shopx-popup input,
.shopx-popup select {
  width:100%;
  padding:10px;
  margin-bottom:12px;
  border:1px solid #ddd;
  border-radius:8px;
}

/* ===== POPUP BUTTON ROW ===== */
.shopx-popup-actions {
  display: flex;
  gap: 10px;
}

/* SUBMIT */
.submit-btn {
  flex: 1;
  background: #0f9d58;
}

/* CLOSE */
.close-btn {
  flex: 1;
  background: #e53935;
}

/* ERROR */
.shopx-error {
  font-size:13px;
  margin-bottom:10px;
}

/* MOBILE */
@media(max-width:480px){
  .shopx-popup-box {
    width: 90%;
  }

  .shopx-popup-content {
    max-height: 90vh;
  }
}

</style>


Apps Script

Google Sheet এর Extension থেকে Apps Script এ গিয়ে নিচের কোড টি Past করুন। তারপর শিটের নিচের দিকের Sheet1, Sheet2 লেখা থাকে এইগুলো চেইঞ্জ করলে Apps Script এর Code এর ভিতরে শিটের নাম চেইঞ্জ করে দিন, দুইটার নাম ম্যাচ না করলে কাজ করবেনা। তারপর Code টি Save করে Deploy করুন। Deploy করার সময় অবশ্যই Execute As এ Me এবং Who has access এ Everyone দিতে হবে। তারপর Deploy হয়ে গেলে Web App Url টা Notepad এ Copy করে রাখুন। এবং অবশ্যই শেয়ার Option থেকে Anyone with the link Viewer Access দিন।
function doPost(e) {
  var sheet = SpreadsheetApp
    .getActiveSpreadsheet()
    .getSheetByName("Sheet1"); // 👈 এখানে তোমার sheet name

  var data = JSON.parse(e.postData.contents);

  var now = new Date();

  sheet.appendRow([
    now,
    data.order_id,
    data.customer,
    "'" + data.phone,
    data.note,
    data.product,
    data.quantity,
    data.price,
    data.total,
    data.payment,
    "'" + data.payment_number,
    data.transaction_id,
    "Pending"
  ]);

  return ContentService.createTextOutput("Success");
}


JS Code

বাংলা ভেঙ্গে যাওয়ার কারণে মেসেজ গুলকে Unicode এ কনভার্ট করে Use করা হয়েছে। Popup মেসেজ Change করতে চাইলে বাংলাকে Unicode এ Convert করে এইখানে ব্যাবহার করুন

এখানে Advance ফিচার হিসেবে ব্যাবহার করা হয়েছে মিনিমাম প্রাইজ ৫০ টাকা। টোটাল অর্ডার Amount যদি ৫০ টাকার কম হয় তাহলে অর্ডার Submit হবেনা, আপনি যদি ৫০ এর জায়গায় বাড়াতে বা কমাতে চান তাহলে total < 50 এইটা পরিবর্তন করুন।
<script type="text/javascript">
//<![CDATA[

// ===== Unicode decode (বাংলা safe)
function decodeUnicode(str) {
  return str.replace(/\\u[\dA-F]{4}/gi, function(match) {
    return String.fromCharCode(parseInt(match.replace(/\\u/g, ''), 16));
  });
}

var ShopX = {
  product: "",
  price: 0,
  isSubmitting: false,

  // ===== বাংলা text (Unicode safe)
  texts: {
  required: decodeUnicode("\\u09B8\\u09AC \\u0998\\u09B0 \\u09AA\\u09C2\\u09B0\\u09A3 \\u0995\\u09B0\\u09A4\\u09C7 \\u09B9\\u09AC\\u09C7!"),
  invalidPhone: decodeUnicode("\\u09B8\\u09A0\\u09BF\\u0995 \\u09AC\\u09BE\\u0982\\u09B2\\u09BE\\u09A6\\u09C7\\u09B6\\u09BF \\u09A8\\u09BE\\u09AE\\u09CD\\u09AC\\u09BE\\u09B0 \\u09A6\\u09BF\\u09A8"),
  invalidPay: decodeUnicode("\\u09AA\\u09C7\\u09AE\\u09C7\\u09A8\\u09CD\\u099F \\u09A8\\u09BE\\u09AE\\u09CD\\u09AC\\u09BE\\u09B0 \\u09B8\\u09A0\\u09BF\\u0995 \\u09A8\\u09BE"),
  minOrder: decodeUnicode("\\u0986\\u09AA\\u09A8\\u09BE\\u09B0 \\u09A6\\u09C7\\u09DF\\u09BE \\u09AA\\u09B0\\u09BF\\u09AE\\u09BE\\u09A3 \\u09B8\\u09B0\\u09CD\\u09AC\\u09A8\\u09BF\\u09AE\\u09CD\\u09A8 \\u09B8\\u09C0\\u09AE\\u09BE\\u09B0 \\u09A8\\u09BF\\u099A\\u09C7\\u0964 \\u0985\\u09A8\\u09C1\\u0997\\u09CD\\u09B0\\u09B9 \\u0995\\u09B0\\u09C7 \\u09AA\\u09B0\\u09BF\\u09AE\\u09BE\\u09A3 \\u09AC\\u09C3\\u09A6\\u09CD\\u09A7\\u09BF \\u0995\\u09B0\\u09C1\\u09A8\\u0964"),
minQty: decodeUnicode("\\u09AE\\u09BF\\u09A8\\u09BF\\u09AE\\u09BE\\u09AE \\u0995\\u09CB\\u09DF\\u09BE\\u09A8\\u09CD\\u099F\\u09BF\\u099F\\u09BF \\u09EB\\u09E6\\u09E6 \\u09B9\\u09A4\\u09C7 \\u09B9\\u09AC\\u09C7!"),
  success: decodeUnicode("\\u0985\\u09B0\\u09CD\\u09A1\\u09BE\\u09B0 \\u09B8\\u09AB\\u09B2! \\u0986\\u09AA\\u09A8\\u09BE\\u09B0 Order ID: ")
},

  open: function(name, price, qtyId){
  this.product = name;
  this.price = price;

  var qty = 1;

  try{
    if(qtyId){
      var el = document.getElementById(qtyId);
      if(el && el.value){
        qty = el.value;
      }
    }
  }catch(e){
    console.log("Qty error:", e);
  }

  document.getElementById("sx-product-name").innerText = name;
  document.getElementById("sx-price").innerText = price;
  document.getElementById("sx-qty").value = qty;

  this.updateTotal();
  document.getElementById("shopx-popup").style.display = "block";
},

  updateTotal: function(){
    var qty = document.getElementById("sx-qty").value;
    var total = qty * this.price;
    document.getElementById("sx-total").innerText = total;
  },

  close: function(){
  document.getElementById("shopx-popup").style.display = "none";
},

  generateID: function(){
    return "FW-" + Date.now().toString().slice(-6);
  },

  validateBDPhone: function(phone){
    return /^01[3-9]\d{8}$/.test(phone);
  },

  showMsg: function(msg, color){
    var el = document.getElementById("sx-msg");
    el.style.color = color || "red";
    el.innerText = msg;
  },

  // ===== Success popup
  showSuccess: function(orderID){
    document.getElementById("sx-success-text").innerText = "Order ID: " + orderID;
    document.getElementById("sx-success").style.display = "block";
  },

  reloadPage: function(){
    window.location.href = "/p/order-info.html";
  },

liveValidate: function(){
  var qty = parseInt(document.getElementById("sx-qty").value);
  var total = qty * this.price;

  // ❌ Total check
  if(total < 50){
    this.showMsg(this.texts.minOrder);
    return;
  }

  // ✅ সব ঠিক → clear message
  var el = document.getElementById("sx-msg");
  el.innerText = "";
},

clearMsg: function(){
  document.getElementById("sx-msg").innerText = "";
},

  submit: function(){
    console.log("Submit clicked");

    if(this.isSubmitting) return;

    var name = document.getElementById("sx-name").value.trim();
    var phone = document.getElementById("sx-phone").value.trim();
    var note = document.getElementById("sx-note").value.trim();
    var qty = parseInt(document.getElementById("sx-qty").value);

// ❌ 500 এর নিচে হলে error
if(!qty || qty < 1){
  this.showMsg(this.texts.minQty);
  return;
}
    var payment = document.getElementById("sx-payment").value;
    var paynumber = document.getElementById("sx-paynumber").value.trim();
    var trx = document.getElementById("sx-trx").value.trim();

    var total = qty * this.price;
// ❌ minimum total check (50 টাকা)
if(total < 50){
  this.showMsg(this.texts.minOrder);
  return;
}
    // ===== validation
    if(!name || !phone || !note || !payment || !paynumber || !trx){
      this.showMsg(this.texts.required);
      return;
    }

    if(!this.validateBDPhone(phone)){
      this.showMsg(this.texts.invalidPhone);
      return;
    }

    if(!this.validateBDPhone(paynumber)){
      this.showMsg(this.texts.invalidPay);
      return;
    }

    this.isSubmitting = true;

    var orderID = this.generateID();

    fetch("PAST YOUR WEB APP URL", {
      method: "POST",
      body: JSON.stringify({
        order_id: orderID,
        customer: name,
        phone: phone,
        note: note,
        product: this.product,
        quantity: qty,
        price: this.price,
        total: total,
        payment: payment,
        payment_number: paynumber,
        transaction_id: trx
      })
    })
    .then(res => res.text())
.then(data => {
      this.close(); // form close
      this.showSuccess(orderID); // success popup
    });
  },
togglePayment: function(){
  var payment = document.getElementById("sx-payment").value;
  var box = document.getElementById("sx-payment-fields");

  if(payment){
    box.style.display = "block";
  }else{
    box.style.display = "none";
  }
},
toggleDesc: function(id, btn){
  var el = document.getElementById(id);

  if(el.classList.contains("active")){
    el.classList.remove("active");
    btn.innerText = "See More";
  }else{
    el.classList.add("active");
    btn.innerText = "See Less";
  }
}
};
window.onload = function(){

  var allDesc = document.querySelectorAll(".shopx-desc");

  allDesc.forEach(function(box){

    var text = box.querySelector(".sx-desc-text");
    var btn = box.querySelector(".sx-see-more");

    // যদি text ছোট হয়
    if(text.scrollHeight <= 80){
      btn.style.display = "none"; // hide button
    } else {
      btn.style.display = "inline-block"; // show button
    }

  });

};
//]]>
</script>
Tags

You may like these posts

Show more

Post a Comment

0Comments
Post a Comment (0)

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Check Now
Accept !
Share to other apps
Copy Post Link