Shopify میں AJAX کارٹ دراز کیسے بنایا جائے (2026 طریقہ)

var itemsEl = document.querySelector("[data-drawer-items]");

itemsEl.addEventListener("click", function (e) {
  var inc = e.target.closest("[data-qty-inc]");
  var dec = e.target.closest("[data-qty-dec]");
  if (!inc && !dec) return;

  var line = e.target.closest("[data-line]");
  var key = line.getAttribute("data-line-key");
  var qty = Number(line.getAttribute("data-quantity"));
  var nextQty = inc ? qty + 1 : qty - 1;

  fetch("/cart/change.js", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ id: key, quantity: nextQty }),
  })
    .then(function (r) { return r.json(); })
    .then(render);
});

اس ورژن کے لیے: render() ہر لائن کے اندر ایک سٹیپر کنٹرول برآمد کرتا ہے۔

li.innerHTML =
  '' +
  '' + line.title + "" +
  '' +
    '-' +
    '' + line.quantity + "" +
    '+' +
  "" +
  '' + money(line.final_line_price) + "";

ایک تفصیل جسے آسانی سے غلط سمجھا جا سکتا ہے: تبدیلی کی درخواست بھیجی جاتی ہے۔ id: keyلائن کلیدیہ متغیر ID نہیں ہے۔ اگر آپ کے کارٹ میں آئٹم کی مختلف خصوصیات (کندہ کاری، گفٹ نوٹ) ہیں، تو آپ دو الگ الگ لائنوں پر ایک ہی تغیرات رکھ سکتے ہیں۔ کلید منفرد طور پر ایک قطار کی شناخت کرنا ہے۔ /cart/change.js چاہتے ہیں

ایک ڈیلیگیٹڈ سامعین اب اور کسی بھی رینڈرنگ کے بعد تمام لائنوں کے لیے سٹیپرز کو چلاتا ہے۔

مرحلہ 5: لائن اور خالی ٹوکری صاف کریں۔

ایک نیا ڈویلپر آپ کی تلاش میں آ سکتا ہے۔ /cart/remove.jsلیکن یہ موجود نہیں ہے۔ Shopify کے شاپنگ کارٹ API سے لائنیں ہٹا دیں۔ ہے اسی مقدار کو 0 میں تبدیل کریں۔ /cart/change.js یہ وہ راستہ ہے جسے میں نے ابھی سٹیپر کے لیے استعمال کیا تھا۔ پوری ٹوکری کو صاف کرنے کا اپنا اختتامی نقطہ ہوتا ہے۔ /cart/clear.jsجسم کی ضرورت نہیں ہے۔

// Remove: one delegated listener, quantity 0 deletes the line.
itemsEl.addEventListener("click", function (e) {
  var remove = e.target.closest("[data-remove]");
  if (!remove) return;
  var key = e.target.closest("[data-line]").getAttribute("data-line-key");
  fetch("/cart/change.js", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ id: key, quantity: 0 }),
  })
    .then(function (r) { return r.json(); })
    .then(render);
});

// Clear: empty the whole cart, no body.
document.querySelector("[data-cart-clear]").addEventListener("click", function () {
  fetch("/cart/clear.js", { method: "POST" })
    .then(function (r) { return r.json(); })
    .then(render);
});

ہر چیز کی طرح سرور کے جواب میں دونوں کو دوبارہ پیش کیا جاتا ہے۔ یہ وہ نظم و ضبط ہے جو ہٹائی گئی اشیاء کو شمار میں باقی رہنے سے روکتا ہے۔

مرحلہ 6: سیکشن رینڈرنگ API کا استعمال کرتے ہوئے دوبارہ رینڈر کریں (آپ کون سا ورژن فراہم کریں گے)

اس وقت تک ہر چیز جاوا اسکرپٹ میں دراز کے ایچ ٹی ایم ایل کو دوبارہ لکھ رہی ہے۔ یہ کام کرتا ہے، لیکن دیکھیں کہ اس کی قیمت کتنی ہے۔ دراز مارک اپ اب دو جگہوں پر ہے: ایک بار مرحلہ 1 میں مائع میں اور ایک بار اندرونی ٹیمپلیٹ سٹرنگ میں۔ render(). اگر آپ ڈیزائن کو تبدیل کرتے ہیں، تو دونوں کو ہمیشہ کے لیے مطابقت پذیری میں تبدیل ہونا پڑے گا۔

Shopify کا جواب یہ ہے: بنڈل سیکشن رینڈرنگ. اسی درخواست میں جو کارٹ کو تبدیل کرتی ہے، ہم کارٹ اینڈ پوائنٹ سے دوبارہ پیش کردہ سیکشن HTML کو واپس کرنے کو کہتے ہیں۔ مارک اپ صرف مائع میں موجود ہے، اور سرور صارف کو مکمل ایچ ٹی ایم ایل ڈیلیور اور گرا دیتا ہے۔

شامل کرکے اسے منتخب کریں: sections خریداری کی ٹوکری کی درخواست کے پیرامیٹرز:

fetch("/cart/add.js", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    id: variantId,
    quantity: 1,
    sections: "cart-drawer",              // section id(s), comma-separated
    sections_url: window.location.pathname // optional render context
  }),
})
  .then(function (r) { return r.json(); })
  .then(function (cart) {
    // Shopify returns rendered HTML under `sections`, keyed by id.
    var html = cart.sections["cart-drawer"];
    if (html) {
      document.querySelector("[data-drawer]").innerHTML =
        new DOMParser().parseFromString(html, "text/html")
          .querySelector("[data-drawer]").innerHTML;
    }
    openDrawer();
  });

ایجیکس کارٹ API حوالہ اور سیکشن رینڈرنگ API دستاویزات سے کیا جاننا قیمتی ہے؟

• بنڈل سیکشن رینڈرنگ یہاں سے دستیاب ہے: /cart/add, /cart/change, /cart/clearاور /cart/update.

• sections کوما سے الگ کردہ فہرست (یا صف) پانچ سیکشن IDs تک۔

• sections_url آپ کو شروع کرنا چاہئے۔ /. اگر چھوڑ دیا جائے تو، اس حصے کو موجودہ صفحہ کے تناظر میں پیش کیا جائے گا ( Referer ہیڈر)۔

• پیش کردہ HTML ہے۔ sections JSON جواب کی کلید بطور سیکشن ID درج کی گئی۔

• سیکشنز جو رینڈر کرنے میں ناکام رہتے ہیں، بشمول غیر موجود سیکشنز، اس طرح واپس کیے جاتے ہیں: null HTTP 200 استعمال کریں۔ ہمیشہ null کی حفاظت کریں۔

• سیکشن IDs ہیں: section.id مائع یا id="shopify-section-[id]" ریپنگ پیپر پر۔ فائل کے نام سے پیش کردہ حصوں کے لیے، جیسے {% section 'cart-drawer' %} کو theme.liquid) ID ہے۔ cart-drawer. JSON ٹیمپلیٹ کے اندر آپ کو ایک متحرک ID اس طرح ملتی ہے: template--123__cart-drawer، لہذا چابی کو ہارڈ کوڈنگ کرنے سے پہلے ریپر کو چیک کریں۔

جنرک سیکشن رینڈرنگ API (a GET کے ساتھ ?sections= یا ?section_id= ہر صفحہ کے یو آر ایل میں شامل کیا جاتا ہے) نان شاپنگ کارٹ اپ ڈیٹس جیسے صفحہ بندی کی تلاش یا لامحدود سکرولنگ کے لیے ایک ہی خیال ہے۔ Shopify کی اپنی ہدایات یہ ہیں: شاپنگ کارٹ میں تبدیلی کے نتیجے میں ہونے والے کسی بھی آپریشن کے لیے، میں الگ کالوں پر بنڈل سیکشنز کو پیش کرنے کو ترجیح دیتا ہوں کیونکہ اس سے راؤنڈ ٹرپ کا وقت بچتا ہے۔

یہ کھلونا پیٹرن نہیں ہے۔ Shopify کا اپنا Horizon تھیم بالکل اسی طرح کارٹس چلاتا ہے۔ کارٹ کا جزو ہے۔ sections ان کی فہرست میں /cart/change.js کال کریں اور دوبارہ پیش کریں۔ response.sectionsاسے ہارڈ کوڈنگ کرنے کے بجائے، ہم ڈیٹا انتساب سے ہر سیکشن کی ID پڑھتے ہیں۔ یہ اوپر دیے گئے انتباہات کا پروڈکشن ورژن ہے۔ یہ نہ سمجھیں کہ IDs سادہ ہیں۔ cart-drawer. اس کے بجائے، پیش کردہ ریپر سے پڑھیں۔

2026 اپ گریڈ: معیاری اسٹور ایونٹس اور ایکشن

مذکورہ بالا تمام چیزیں Shopify کو لازوال بناتی ہیں۔ اب نئے حصے کے لیے۔

17 جون 2026 کو، Shopify نے اسپرنگ ’26 ایڈیشن کے حصے کے طور پر معیاری اسٹور ایونٹس اور کارروائیاں شروع کیں اور اب عام طور پر دستیاب ہے۔

آئیڈیاز اب تھیمز ہیں۔ اخراج DOM ایونٹس کا ایک معیاری سیٹ، سبھی کا نام ایک نام کی جگہ میں رکھا گیا ہے۔ shopify:) اور بے نقاب کاموں کا ایک معیاری سیٹ Shopify.actions. آپ کی ایپ یا AI شاپنگ ایجنٹ اب ہر تھیم کی نجی جاوا اسکرپٹ کو ریورس انجینئرنگ کرنے کے بجائے ایک معاہدے کے ذریعے آپ کے تمام اسٹورز کے ساتھ بات چیت کر سکتا ہے۔

یہ سمجھنے کے لیے کہ یہ کیوں ضروری ہے، اس بات پر غور کریں کہ کس طرح ایک upsell ایپ کو تھیمز کے لیے کارٹ میں اضافے کا پتہ لگانے کے لیے استعمال کیا گیا جو اس نے پہلے کبھی نہیں دیکھا تھا۔

چار برے اختیارات تھے: بندر پیچ۔ fetch فون سونگھو /cart/addہر تھیم کے لیے مختلف ناموں کے ساتھ حسب ضرورت ایونٹس حاصل کریں، اور سروے کریں۔ /cart.js سلیکٹر کے ساتھ کارٹ کاؤنٹ نوڈس کے لیے DOM کا موازنہ یا سکریپ کرنے کے لیے ٹائمر کا استعمال کریں۔ یہ سب ٹوٹ جاتے ہیں جب کوئی تاجر انہیں دوبارہ کھالتا ہے یا تھیمز کو تبدیل کرتا ہے۔

یہ وہی کوڈ بھی ہے جو AI معاونین اس وقت تیار کرتے ہیں جب آپ انہیں "کارٹ میں شامل کرنے کے بعد کچھ کرنے” کو کہتے ہیں۔ اس کی وجہ یہ ہے کہ کمزور پیٹرن تربیتی ڈیٹا پر حاوی ہیں۔

مسئلہ کبھی بھی ڈویلپر کی لاپرواہی کا نہیں تھا۔ نشانہ بنانے کے لیے کوئی مستحکم انٹرفیس نہیں تھا۔

چار کمزور موضوعاتی تدبیریں ان معاہدوں کے لیے ایک اتحاد میں سمٹ جاتی ہیں جو ریسکن سے بچ جاتے ہیں۔

اہم طور پر، یہ پرت اوپر دراز جو میں نے ابھی بنایا ہے۔ یہ ایجیکس API کو تبدیل نہیں کرتا ہے۔ دستاویز ایک ہی مواد پر مشتمل تھیم سائیڈ ایونٹس کو بھی دکھاتی ہے۔ /cart/add.js اور /cart.js میں نے ایک کال کی اور Shopify نے ایک اسسٹنٹ کو بھیجا جس کا واحد کام کال کو تبدیل کرنا تھا۔ /cart.js ایونٹ کے پے لوڈ کی قسم کا جواب دیتا ہے۔ تو آپ کا کوئی بھی کام رائیگاں نہیں جاتا۔ آپ ایک کھلا بیان دینے کی کوشش کر رہے ہیں۔

واقعہ: تھیم دنیا کو بتاتی ہے کہ کیا ہوا۔

ہر واقعہ استعمال کرتا ہے: shopify: نام کی جگہیں ہیں: category:action سب سے مخصوص عناصر (پروڈکٹ کارڈز، شاپنگ کارٹس، کلیکشن کنٹینرز) سے نام دینے کے پیٹرن، پاسز اور بلبلے document. پے لوڈ CamelCase فیلڈ کے ساتھ اسٹور فرنٹ گراف کیو ایل API کی شکل اختیار کرتا ہے۔

ایپس باقاعدہ DOM API کا استعمال کرکے سبسکرائب کرتی ہیں۔ کوئی SDK نہیں:

document.addEventListener('shopify:cart:lines-update', (event) => {
  console.log(event.action, event.lines);
  event.promise?.then(({ cart }) => {
    console.log(cart.cost.totalAmount.amount);
  });
});

شاپنگ کارٹ، میمو، ڈسکاؤنٹ، پروڈکٹ کا انتخاب، کلیکشن اپ ڈیٹ، اور سرچ اپ ڈیٹ ایونٹس شامل ہیں۔ promise غیر مطابقت پذیر نتیجہ کی فیلڈ۔ اس کے بعد سننے والا فوری طور پر لوڈنگ یا پرامید حیثیت ظاہر کر سکتا ہے اور پھر تصدیق شدہ مواد کو پڑھ سکتا ہے۔ { cart } ایک بار جب کام حل ہوجائے

اپنے تھیم سے ایونٹس ایکسپورٹ کریں۔

ایونٹ لائبریری کی میزبانی Shopify CDN پر کی گئی ہے۔ اسے امپورٹ میپ کے ذریعے لوڈ کریں (ماڈیولر تھیمز جیسے ہورائزن کے لیے) یا اسے عالمی سطح پر تفویض کریں (ڈان اسٹائل تھیمز کے لیے)۔

ایک تھیم ایونٹ کی کلاس بنا کر اور کال کرکے ایونٹ کو فائر کرتا ہے۔ dispatchEvent(). اگر آپ اسے غور سے پڑھیں تو آپ دیکھیں گے کہ مواد ایک جیسا ہے۔ /cart/add.js اور /cart.js مرحلہ 2 میں کالیں:

import { CartLinesUpdateEvent, CartErrorEvent } from '@theme/standard-events';

const deferred = CartLinesUpdateEvent.createPromise();
element.dispatchEvent(new CartLinesUpdateEvent({
  action: 'add',
  context: 'product',
  lines: [{ merchandiseId: variantId, quantity: 1 }],
  promise: deferred.promise,
}));

try {
  const response = await fetch(window.Shopify.routes.root + 'cart/add.js', { method: 'POST', body, headers });
  if (!response.ok) throw new Error('Add to cart failed');
  const ajaxCart = await fetch(window.Shopify.routes.root + 'cart.js').then(r => r.json());
  deferred.resolve({
    cart: CartLinesUpdateEvent.createCartFromAjaxResponse(ajaxCart),
  });
} catch (e) {
  element.dispatchEvent(new CartErrorEvent({ error: e.message, code: 'SERVICE_UNAVAILABLE' }));
  deferred.reject(e);
}

وہ خاموشی createCartFromAjaxResponse(ajaxCart) یہ کلاسک ایجیکس دراز اور نئے ایونٹ کے معاہدوں کے درمیان ایک پل ہے۔ یہ تمہارا ہے /cart.js ایونٹ ایک پے لوڈ کے ساتھ سٹور فرنٹ API کی شکل میں جواب دیتا ہے جس کی اسے توقع ہوتی ہے، لہذا آپ کے پاس پہلے سے موجود کوئی بھی دراز براہ راست منسلک ہو جائے گا۔

عمل: دنیا رعایا سے کچھ کرنے کو کہتی ہے۔

ٹاسکس غیر مطابقت پذیر افعال ہیں۔ Shopify.actionsاس کے اپنے اسکرپٹ ٹیگ کے بغیر تمام مائع اسٹورز میں انجکشن لگایا گیا۔

// Add, update, or remove lines. Also handles note + discountCodes.
const { cart, userErrors, warnings } = await Shopify.actions.updateCart({
  lines: [
    { merchandiseId: "gid://shopify/ProductVariant/123", quantity: 1 }, // add
    { id: "gid://shopify/CartLine/456", quantity: 5 },                  // update
    { id: "gid://shopify/CartLine/789", quantity: 0 },                  // remove
  ],
});
// Returns: Promise<{ cart, userErrors?, warnings? }>

await Shopify.actions.openCart();                 // Promise
const { cart } = await Shopify.actions.getCart(); // reads current cart

ڈیفالٹس اسٹاک تھیم کے ساتھ بغیر کسی تبدیلی کے کام کریں گے۔ updateCart اسٹور فرنٹ API کو لکھتا ہے، جگہ پر تازہ ہوجاتا ہے، اور پورے صفحہ کو دوبارہ لوڈ کرنے پر واپس آتا ہے۔ openCart کھولیں۔ یا اگر عنصر موجود ہے، تو اسے ری ڈائریکٹ کرے گا: /cart. getCart موجودہ کارٹ پڑھیں۔ اور اگر تشکیل شدہ کام کامیاب ہو جاتا ہے تو رن ٹائم خود کار طریقے سے رہائی ایپ کالنگ میچنگ ایونٹ updateCart بھیجنے کی بالکل ضرورت نہیں ہے۔ shopify:cart:lines-update.

درازوں کو چلانے کے لیے آپریشن کو اوور رائڈ کریں۔

یہ انعام ہے۔ تھیمز اعمال کے لیے پہلے سے طے شدہ اقدار کو اوور رائیڈ کر سکتے ہیں، اس لیے مداخلت ممکن ہے۔ openCart اور updateCart صفحہ کی تازہ کاری کو متحرک کرنے کے بجائے، آپ کی ایپ کی تمام کالز اس دراز کے ذریعے روٹ کی جاتی ہیں جو آپ نے پہلے سے بنایا ہوا ہے۔ ایپ کو مارک اپ جاننے کی ضرورت نہیں ہے۔ معیاری آپریشنز کو کال کرنا اور ان کو اوور رائیڈ کرنا UI کی فعالیت کا تعین کرتا ہے۔

اپنے اوور رائیڈ کو اندر رجسٹر کریں: DOMContentLoaded سننے والا رکھا پر {{ content_for_header }} لے آؤٹ ایپ کوڈ سے پہلے چلتے ہیں۔

document.addEventListener('DOMContentLoaded', () => {
  Shopify.actions.updateCart.configure({
    eventTarget: (meta) => {
      if (meta.type === 'shopify:cart:note-update') return document.querySelector('cart-note');
      if (meta.type === 'shopify:cart:discount-update') return document.querySelector('cart-discount');
      if (meta.type === 'shopify:cart:lines-update' && meta.action === 'add') {
        return document.querySelector('product-form');
      }
      return document.querySelector('cart-items');
    },
    async handler(defaultHandler, payload, options) {
      const result = await defaultHandler();
      customUpdateUI(result); // your render() + openDrawer() from earlier
      return result;
    },
  });
});

openCart ایک آسان اوور رائڈ ہے:

Shopify.actions.openCart.configure({
  handler() { document.querySelector('cart-drawer')?.open(); },
});

آپ کا وقت بچانے کے لیے چند اصول:

• eventTarget کے لئے ضروری ہے updateCart. اس بات کا تعین کرتا ہے کہ آٹو ایمیشن ایونٹ کو کس عنصر کو بھیجا گیا ہے۔

• getCart جان بوجھ کر ~ نہیں قابل ترتیب۔ کال کرنا configure() ٹائپ اسکرپٹ کی خرابیاں اور رن ٹائم کی خرابیاں ہیں۔ TypeError.

• isDefault() یہ آپ کو بتاتا ہے کہ آیا تھیم نے ابھی تک کارروائی کو اوور رائڈ کیا ہے۔

• updateCart کے ساتھ حل کریں { cart, userErrors?, warnings?, detail? } اسے صرف تب ہی مسترد کیا جائے گا جب یہ بالکل نہیں چل سکتا (نیٹ ورک کی خرابی یا غلط پے لوڈ)۔ کوئی راستہ نہیں userErrors ترتیب کا مطلب یہ ہے کہ اتپریورتن کو مسترد کر دیا گیا ہے، جیسے INVALID, MAXIMUM_EXCEEDED)۔ کوئی راستہ نہیں warnings ترتیب میں احتیاط کی ضرورت ہے (MERCHANDISE_OUT_OF_STOCK, DISCOUNT_NOT_FOUND)۔ اعتماد کرنے سے پہلے دونوں کو چیک کریں۔ cart.

ایپ معیاری کارروائیوں کو کال کرتی ہے اور مارک اپ کے بارے میں کچھ نہیں جانتی ہے۔ اوور رائڈ UI کا تعین کرتا ہے۔

چیک کر رہا ہے۔

چلائیں shopify theme dev CLI ایونٹ کے رن ٹائم کی ایک ڈیولپمنٹ بلڈ لوڈ کرتا ہے، جو پے لوڈ کی توثیق کرتا ہے اور اگر فیلڈز خراب یا غائب ہیں تو انتباہات لاگ ان کرتا ہے۔

یہ چیک پیداوار کے دوران ہٹا دیے جاتے ہیں۔ اضافہ --standard-events-inspector دو ٹیبز کے ساتھ مقامی صفحہ میں فلوٹنگ ڈیبگ پینل کو جھنڈا لگاتا ہے اور داخل کرتا ہے۔ واقعہتمام خارج ہونے والے معیاری واقعات کو ان کے مکمل پے لوڈ کے ساتھ حقیقی وقت میں دکھاتا ہے۔ عملآپ کاموں کو براہ راست ڈیلیور کرسکتے ہیں اور نتائج کا معائنہ کرسکتے ہیں۔ پے لوڈز کو زنجیر بناتے وقت، کسی بھی ٹیوٹوریل پر انسپکٹر پر بھروسہ کریں، بشمول یہ۔

یہ کیوں اہمیت رکھتا ہے۔

اس تعمیر کے پیچھے دو خیالات یہ ہیں کہ یہ کسی بھی مخصوص کوڈ کو ختم کرے گا اور کام کرنے والے دراز اور ایک دراز کے درمیان فرق ہے جسے آپ برقرار رکھ سکتے ہیں۔

تقریب کا وفد

والدین کی طرف سے ایک سننے والا جسے کبھی تبدیل نہیں کیا جائے گا، پڑھیں e.target.closest(...)تمام چائلڈ عناصر پر کارروائی کرتا ہے (جو فی الحال صفحہ پر ہیں اور وہ جو ابھی تک پیش نہیں کیے گئے ہیں)۔ اگر آپ اس کے بجائے ایک ہینڈلر کو فی بٹن باندھتے ہیں، تو یہ اس وقت ختم ہوجائے گا جب فہرست دوبارہ پیش کی جائے گی۔ یہ آپ کے کارٹ دراز میں مستقل طور پر رہے گا۔

وفد بھی ایک غیر حادثاتی نمونہ ہے جو AI ٹولز یقینی طور پر غلط ہو جاتے ہیں۔ اس کی وجہ یہ ہے کہ تربیت کے اعداد و شمار میں عنصر کے ساتھ مخصوص پابندیاں سب سے زیادہ پائی جاتی ہیں۔ کسی وفد تک پہنچنے کا طریقہ جاننا بالکل اسی قسم کا فیصلہ ہے جو نحو سے نہیں آتا۔

سیکشن رینڈرنگ API

دراز کے مارک اپ کو دو جگہوں پر رکھنے اور اسے مطابقت پذیر رکھنے کی کوشش کرنے کے بجائے، آپ سرور کو سیکشنز رینڈر کرنے اور HTML پاس کرنے دیتے ہیں۔ مارک اپ ایک فائل میں موجود ہے اور بیچنے والے تھیم ایڈیٹر میں سیکشنز میں ترمیم کرنے کی وجہ سے درست رہتا ہے۔

ڈیل ایک ہی مارک اپ کو دو بار برقرار نہیں رکھ رہی ہے، بلکہ تھوڑا بڑا ردعمل اور تجزیہ کرنے والا قدم ہے۔

اور اس کے نیچے ایک قاعدہ ہے۔ خیال یہ ہے کہ ہر تبدیلی کے بعد کارٹ (یا پیش کردہ حصے) کو دوبارہ پڑھیں اور اسے سرور کے جواب سے پینٹ کریں۔ مقامی کاؤنٹر چھوٹی چھوٹی ہے۔ اس مضمون میں باقی سب کچھ سرور کے اعتماد پر ایک تغیر ہے۔

مکمل فائل

آپ میں سے ان لوگوں کے لیے جنہوں نے ابھی یہاں سکرول کیا ہے، یہ سب سیکشن مارک اپ، جاوا اسکرپٹ اور سی ایس ایس کے بارے میں ہے۔ JavaScript سرور کے جواب کے تمام ری رینڈرنگ کو یکجا کرتا ہے: شامل کریں، مقدار، ہٹائیں، اور صاف کریں۔

sections/cart-drawer.liquid:

  Cart {{ cart.item_count }}





{% schema %}
{ "name": "Cart drawer" }
{% endschema %}

assets/cart-drawer.js:

(function () {
  var countEl = document.querySelector("[data-cart-count]");
  var itemsEl = document.querySelector("[data-drawer-items]");
  var emptyEl = document.querySelector("[data-drawer-empty]");
  var subtotalEl = document.querySelector("[data-cart-subtotal]");
  var drawer = document.querySelector("[data-drawer]");
  var scrim = document.querySelector("[data-drawer-scrim]");
  var clearBtn = document.querySelector("[data-cart-clear]");

  // --- Add to cart: mutate, re-read, render, open ---
  document.querySelectorAll("[data-add]").forEach(function (btn) {
    btn.addEventListener("click", function () {
      var id = Number(btn.getAttribute("data-variant-id"));
      fetch("/cart/add.js", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id: id, quantity: 1 }),
      })
        .then(function (r) { return r.json(); })
        .then(function () { return refresh(); })
        .then(openDrawer);
    });
  });

  // --- Quantity +/- : one delegated listener on the stable list ---
  itemsEl.addEventListener("click", function (e) {
    var inc = e.target.closest("[data-qty-inc]");
    var dec = e.target.closest("[data-qty-dec]");
    if (!inc && !dec) return;
    var line = e.target.closest("[data-line]");
    var key = line.getAttribute("data-line-key");
    var qty = Number(line.getAttribute("data-quantity"));
    var nextQty = inc ? qty + 1 : qty - 1;
    fetch("/cart/change.js", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ id: key, quantity: nextQty }),
    }).then(function (r) { return r.json(); }).then(render);
  });

  // --- Remove a line: quantity 0 (there is no /cart/remove.js) ---
  itemsEl.addEventListener("click", function (e) {
    var remove = e.target.closest("[data-remove]");
    if (!remove) return;
    var key = e.target.closest("[data-line]").getAttribute("data-line-key");
    fetch("/cart/change.js", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ id: key, quantity: 0 }),
    }).then(function (r) { return r.json(); }).then(render);
  });

  // --- Clear the whole cart ---
  clearBtn.addEventListener("click", function () {
    fetch("/cart/clear.js", { method: "POST" })
      .then(function (r) { return r.json(); })
      .then(render);
  });

  // --- The one function that paints the drawer from the cart ---
  function money(cents) { return "$" + (cents / 100).toFixed(2); }

  function render(cart) {
    countEl.textContent = cart.item_count;
    subtotalEl.textContent = money(cart.total_price);
    itemsEl.innerHTML = "";
    if (!cart.items.length) { emptyEl.style.display = "block"; return; }
    emptyEl.style.display = "none";
    cart.items.forEach(function (line) {
      var li = document.createElement("li");
      li.className = "drawer__item";
      li.setAttribute("data-line", "");
      li.setAttribute("data-line-key", line.key);
      li.setAttribute("data-quantity", line.quantity);
      li.innerHTML =
        '' +
        '' + line.title + "" +
        '' +
          '-' +
          '' + line.quantity + "" +
          '+' +
        "" +
        '' + money(line.final_line_price) + "" +
        'Remove';
      itemsEl.appendChild(li);
    });
  }

  function refresh() {
    return fetch("/cart.js").then(function (r) { return r.json(); }).then(render);
  }
  function openDrawer() { drawer.classList.add("is-open"); scrim.classList.add("is-open"); }
  function closeDrawer() { drawer.classList.remove("is-open"); scrim.classList.remove("is-open"); }

  document.querySelector("[data-cart-toggle]").addEventListener("click", function () { refresh().then(openDrawer); });
  document.querySelector("[data-drawer-close]").addEventListener("click", closeDrawer);
  scrim.addEventListener("click", closeDrawer);

  refresh(); // paint on load
})();

assets/cart-drawer.css:

.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(420px, 100%);
  background: #fff;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}
.drawer.is-open { transform: translateX(0); }
.drawer__scrim {
  position: fixed; inset: 0;
  background: rgba(30, 18, 6, 0.45);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.drawer__scrim.is-open { opacity: 1; pointer-events: auto; }

ختم

ہمارے پاس اب ایک کارٹ دراز ہے جو دوبارہ لوڈ کیے بغیر شامل کرتا ہے، اپ ڈیٹ کرتا ہے، ہٹاتا ہے اور صاف کرتا ہے، UI کو کبھی بھی اصل کارٹ سے بھٹکنے نہیں دیتا، اور ایکشن اوور رائیڈز کے ساتھ، انسانی اور AI ایجنٹس سمیت پورے ایپ ایکو سسٹم کو صاف عام انٹرفیس فراہم کرتا ہے۔

ایجیکس فاؤنڈیشن برسوں سے ایک جیسی ہے۔ 2026 کی پرت اس کے اوپر رکھی گئی ہے، لہذا آپ جو دراز آج بنائیں گے وہ دستیاب رہے گا چاہے کل کچھ بھی ہو۔

اگر آپ اس عین مطابق دراز کو کچھ جاوا اسکرپٹ لکھ کر انٹرایکٹو بنانا چاہتے ہیں اور یہ دیکھنا چاہتے ہیں کہ یہ اصلی اسٹورز میں کیسے رد عمل ظاہر کرتا ہے، تو آپ اسے یہاں مفت میں کرسکتے ہیں: learnshopify.dev.