{"id":26225,"date":"2026-07-04T07:59:23","date_gmt":"2026-07-04T07:59:23","guid":{"rendered":"https:\/\/umang.pk\/2026\/07\/04\/shopify-%d9%85%db%8c%da%ba-ajax-%da%a9%d8%a7%d8%b1%d9%b9-%d8%af%d8%b1%d8%a7%d8%b2-%da%a9%db%8c%d8%b3%db%92-%d8%a8%d9%86%d8%a7%db%8c%d8%a7-%d8%ac%d8%a7%d8%a6%db%92-2026-%d8%b7%d8%b1%db%8c%d9%82%db%81\/"},"modified":"2026-07-04T07:59:25","modified_gmt":"2026-07-04T07:59:25","slug":"shopify-%d9%85%db%8c%da%ba-ajax-%da%a9%d8%a7%d8%b1%d9%b9-%d8%af%d8%b1%d8%a7%d8%b2-%da%a9%db%8c%d8%b3%db%92-%d8%a8%d9%86%d8%a7%db%8c%d8%a7-%d8%ac%d8%a7%d8%a6%db%92-2026-%d8%b7%d8%b1%db%8c%d9%82%db%81","status":"publish","type":"post","link":"https:\/\/umang.pk\/ur\/2026\/07\/04\/shopify-%d9%85%db%8c%da%ba-ajax-%da%a9%d8%a7%d8%b1%d9%b9-%d8%af%d8%b1%d8%a7%d8%b2-%da%a9%db%8c%d8%b3%db%92-%d8%a8%d9%86%d8%a7%db%8c%d8%a7-%d8%ac%d8%a7%d8%a6%db%92-2026-%d8%b7%d8%b1%db%8c%d9%82%db%81\/","title":{"rendered":"Shopify \u0645\u06cc\u06ba AJAX \u06a9\u0627\u0631\u0679 \u062f\u0631\u0627\u0632 \u06a9\u06cc\u0633\u06d2 \u0628\u0646\u0627\u06cc\u0627 \u062c\u0627\u0626\u06d2 (2026 \u0637\u0631\u06cc\u0642\u06c1)"},"content":{"rendered":"\n<div id=\"\">\n<p>\u062c\u0628 \u0622\u067e \u0627\u067e\u0646\u06d2 Shopify \u0627\u0633\u0679\u0648\u0631 \u0645\u06cc\u06ba \u0688\u06cc\u0641\u0627\u0644\u0679 \u0637\u0631\u06cc\u0642\u06d2 \u0633\u06d2 \u06a9\u0648\u0626\u06cc \u067e\u0631\u0648\u0688\u06a9\u0679 \u0634\u0627\u0645\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u067e\u0648\u0631\u0627 \u0635\u0641\u062d\u06c1 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0644\u0648\u0688 \u06c1\u0648\u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u06cc\u06a9 \u062e\u0631\u06cc\u062f\u0627\u0631 \u0622\u067e \u06a9\u06cc \u0645\u0635\u0646\u0648\u0639\u0627\u062a \u06a9\u0648 \u062f\u06cc\u06a9\u06be\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u06a9\u0644\u06a9 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 <strong>\u0679\u0648\u06a9\u0631\u06cc \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/strong>\u0628\u0631\u0627\u0624\u0632\u0631 \u0635\u0641\u062d\u06c1 \u06a9\u0648 \u0631\u062f \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0633\u06d2 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0633\u0633\u062a \u0631\u0648\u0627\u0628\u0637 \u067e\u0631 \u0622\u067e \u06a9\u0648 2-3 \u0633\u06cc\u06a9\u0646\u0688 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u062e\u0627\u0644\u06cc \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0646\u0638\u0631 \u0622\u0626\u06d2 \u06af\u06cc\u06d4 \u06a9\u0628\u06be\u06cc \u06a9\u0628\u06be\u06cc \u0648\u06c1 \u0627\u062a\u0631\u062a\u06d2 \u0628\u06be\u06cc \u06c1\u06cc\u06ba\u06d4 <code>\/cart<\/code>\u0622\u067e \u062c\u0633 \u0686\u06cc\u0632 \u06a9\u0648 \u062e\u0631\u06cc\u062f\u0646\u06d2 \u06a9\u06cc \u06a9\u0648\u0634\u0634 \u06a9\u0631 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba \u0627\u0633 \u0633\u06d2 \u067e\u0648\u0631\u0627 \u0635\u0641\u062d\u06c1 \u063a\u0627\u0626\u0628 \u06c1\u0648 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0631\u0641\u062a\u0627\u0631 \u062e\u062a\u0645 \u06c1\u0648 \u062c\u0627\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u06a9\u0627\u0631\u0679 \u062f\u0631\u0627\u0632 \u0627\u0633 \u0645\u0633\u0626\u0644\u06d2 \u06a9\u0648 \u062d\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0633\u0644\u0627\u0626\u06cc\u0688 \u0622\u0624\u0679 \u067e\u06cc\u0646\u0644 \u06c1\u06d2 \u062c\u0648 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u062c\u0628 \u06a9\u0648\u0626\u06cc \u0622\u0626\u0679\u0645 \u0634\u0627\u0645\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u062e\u0631\u06cc\u062f\u0627\u0631\u06cc \u06a9\u06cc \u0679\u0648\u06a9\u0631\u06cc \u06a9\u0648 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0686\u06cc\u06a9 \u0622\u0624\u0679 \u0628\u0679\u0646 \u0648\u06c1\u06cc\u06ba \u06c1\u06d2\u060c \u0627\u0648\u0631 \u062e\u0631\u06cc\u062f\u0627\u0631 \u06a9\u0628\u06be\u06cc \u0628\u06be\u06cc \u067e\u0686\u06be\u0644\u0627 \u0635\u0641\u062d\u06c1 \u0646\u06c1\u06cc\u06ba \u0686\u06be\u0648\u0691\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u06c1\u0631 \u06c1\u0627\u0626\u06cc \u06a9\u0646\u0648\u0631\u0679\u0646\u06af \u0634\u0627\u067e\u0627\u0626\u0641 \u0627\u0633\u0679\u0648\u0631 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0622\u067e \u06a9\u0648 \u0627\u0633\u06d2 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0633\u06cc \u0627\u06cc\u067e \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0627\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062f\u0648 \u0627\u06cc\u062c\u06cc\u06a9\u0633 \u0627\u06cc\u0646\u0688 \u067e\u0648\u0627\u0626\u0646\u0679\u0633 \u0627\u0648\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u06cc 100 \u0633\u06d2 \u06a9\u0645 \u0644\u0627\u0626\u0646\u06cc\u06ba \u062f\u0631\u06a9\u0627\u0631 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0645\u0633\u0626\u0644\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644\u0632 \u0627\u0648\u0631 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 AI \u06a9\u0648\u0688\u0646\u06af \u0679\u0648\u0644\u0632 \u0627\u0633\u06d2 \u06a9\u0645\u0632\u0648\u0631 \u0637\u0631\u06cc\u0642\u06d2 \u0633\u06d2 \u0628\u0646\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0639\u0645\u0644 \u062f\u0631\u0622\u0645\u062f \u06a9\u06cc \u06af\u0646\u062a\u06cc \u06a9\u0648 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u0645\u062a\u063a\u06cc\u0631 \u0645\u06cc\u06ba \u0631\u06a9\u06be\u06cc\u06ba \u0627\u0648\u0631 DOM \u06a9\u0648 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0688\u06cc\u0645\u0648 \u0645\u06cc\u06ba \u0627\u0686\u06be\u0627 \u0644\u06af\u062a\u0627 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u062c\u0628 \u067e\u06c1\u0644\u06cc \u062f\u0648 \u0644\u0627\u0626\u0646\u06cc\u06ba \u0627\u06cc\u06a9 \u0645\u06cc\u06ba \u0636\u0645 \u06c1\u0648 \u062c\u0627\u062a\u06cc \u06c1\u06cc\u06ba\u060c \u0627\u06cc\u06a9 \u0631\u0639\u0627\u06cc\u062a \u0644\u0627\u06af\u0648 \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u060c \u06cc\u0627 \u06a9\u0644\u06a9 \u0627\u0648\u0631 \u0686\u06cc\u06a9 \u0622\u0624\u0679 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0648\u06cc\u0631\u06cc\u0646\u0679 \u0641\u0631\u0648\u062e\u062a \u06c1\u0648 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u062a\u0648 \u06cc\u06c1 \u0627\u0644\u06af \u06c1\u0648 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u06cc\u06c1 \u06af\u0627\u0626\u06cc\u0688 \u0627\u06cc\u06a9 \u0633\u06cc\u0646\u0626\u0631 \u0688\u0648\u06cc\u0644\u067e\u0631 \u06a9\u06d2 \u0646\u0642\u0637\u06c1 \u0646\u0638\u0631 \u0633\u06d2 \u0628\u0646\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u060c \u0633\u0631\u0648\u0631 \u06c1\u0645\u06cc\u0634\u06c1 \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u06a9\u0627 \u0630\u0631\u06cc\u0639\u06c1 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u067e\u06be\u0631 \u06c1\u0645 \u0627\u06cc\u06a9 2026 \u0627\u06cc\u0688 \u0622\u0646 \u062f\u06cc\u06a9\u06be\u06cc\u06ba \u06af\u06d2 \u062c\u0648 \u062f\u0631\u0627\u0632\u0648\u06ba \u06a9\u0648 \u0648\u06c1\u06cc \u0632\u0628\u0627\u0646 \u0628\u0648\u0644\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06d2 \u06af\u0627 \u062c\u0648 \u0627\u06cc\u067e\u0633 \u0627\u0648\u0631 AI \u0634\u0627\u067e\u0646\u06af \u0627\u06cc\u062c\u0646\u0679\u0648\u06ba \u06a9\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u06cc\u06a9 \u0633\u0627\u062a\u06be \u06a9\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0622\u067e \u0627\u06cc\u06a9 \u0688\u0648\u06cc\u0644\u067e\u0645\u0646\u0679 \u062a\u06be\u06cc\u0645 \u06a9\u06be\u0648\u0644 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u062c\u0627\u062a\u06d2 \u062c\u0627\u062a\u06d2 \u06c1\u0631 \u062d\u0635\u06d2 \u0645\u06cc\u06ba \u062a\u0631\u0645\u06cc\u0645 \u0627\u0648\u0631 \u062a\u0639\u0645\u06cc\u0631 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1\u0627\u06ba \u06c1\u0631 \u0686\u06cc\u0632 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0637\u06d2 \u0634\u062f\u06c1 \u0622\u0646 \u0644\u0627\u0626\u0646 \u0633\u0679\u0648\u0631 2.0 \u062a\u06be\u06cc\u0645 (Horizon or Dawn) \u067e\u0631 \u0686\u0644\u062a\u06cc \u06c1\u06d2 \u062c\u0633 \u0645\u06cc\u06ba \u06a9\u0648\u0626\u06cc \u0627\u06cc\u067e \u0627\u0646\u0633\u0679\u0627\u0644 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u062a\u06cc\u06d4<\/p>\n<p><em>\u0645\u06a9\u0645\u0644 \u0634\u062f\u06c1 \u062f\u0631\u0627\u0632: \u06a9\u0627\u0631\u0679 \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u060c \u06a9\u0648\u0626\u06cc \u0635\u0641\u062d\u06c1 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0644\u0648\u0688 \u0646\u06c1\u06cc\u06ba\u060c \u0627\u0635\u0644 \u0634\u0627\u067e\u0646\u06af \u06a9\u0627\u0631\u0679 \u06a9\u0648 \u0638\u0627\u06c1\u0631 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u067e\u06cc\u0646\u0644 \u0633\u0644\u0627\u0626\u06cc\u0688 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/em><\/p>\n<h2 id=\"heading-table-of-contents\">\u0627\u0646\u0688\u06cc\u06a9\u0633<\/h2>\n<h2 id=\"heading-what-youll-build\">\u06a9\u06cc\u0627 \u062a\u0639\u0645\u06cc\u0631 \u06a9\u0631\u0646\u0627 \u06c1\u06d2<\/h2>\n<p>\u0622\u062e\u0631 \u0645\u06cc\u06ba\u060c \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u0627\u06cc\u06a9 \u062f\u0631\u0627\u0632 \u06c1\u0648\u06af\u0627 \u062c\u0648 \u0627\u0633 \u0637\u0631\u062d \u0646\u0638\u0631 \u0622\u0626\u06d2 \u06af\u0627:<\/p>\n<ul>\n<li>\n<p>\u0635\u0641\u062d\u06c1 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0644\u0648\u0688 \u06a9\u06cc\u06d2 \u0628\u063a\u06cc\u0631 \u0627\u06cc\u062c\u06cc\u06a9\u0633 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u06a9\u0627\u0631\u0679 \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u06c1\u0631 \u0628\u0627\u0631 \u062c\u0628 \u06a9\u0648\u0626\u06cc \u062a\u0628\u062f\u06cc\u0644\u06cc \u06a9\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06d2\u060c \u0679\u0648\u06a9\u0631\u06cc \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u067e\u0691\u06be\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0633 \u06a9\u06d2 \u062c\u0648\u0627\u0628 \u06a9\u0648 \u0633\u0686 \u0633\u0645\u062c\u06be\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0627\u067e\u0646\u0627 \u0645\u0648\u0627\u062f \u0627\u0648\u0631 \u0633\u0644\u0627\u0626\u06cc\u0688\u06cc\u06ba \u06a9\u06be\u0648\u0644\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0627\u06cc\u06a9 \u0648\u0627\u062d\u062f \u0645\u0646\u062f\u0648\u0628 \u0633\u0646\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0645\u0642\u062f\u0627\u0631 \u067e\u0644\u0633\/\u0645\u0627\u0626\u0646\u0633 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0644\u0627\u0626\u0646 \u06a9\u0648 \u06c1\u0679\u0627 \u062f\u06cc\u06ba \u0627\u0648\u0631 \u06a9\u0627\u0631\u0679 \u06a9\u0648 \u062e\u0627\u0644\u06cc \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u062d\u062a\u0645\u06cc \u0627\u067e \u06af\u0631\u06cc\u0688 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631\u060c \u06cc\u06c1 \u062e\u0648\u062f \u06a9\u0648 Shopify \u06a9\u06d2 \u0646\u0626\u06d2 \u0645\u0639\u06cc\u0627\u0631\u06cc \u0627\u0633\u0679\u0648\u0631 \u0622\u067e\u0631\u06cc\u0634\u0646\u0632 \u06a9\u06d2 \u0633\u0627\u0645\u0646\u06d2 \u0644\u0627\u062a\u0627 \u06c1\u06d2 \u062a\u0627\u06a9\u06c1 \u0627\u06cc\u067e\u0633 \u0627\u0648\u0631 AI \u0627\u06cc\u062c\u0646\u0679\u0633 \u0627\u0646\u06c1\u06cc\u06ba \u0686\u0644\u0627 \u0633\u06a9\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n<h3 id=\"heading-prerequisites\">\u0634\u0631\u0637\u06cc\u06ba<\/h3>\n<ul>\n<li>\n<p>\u0627\u06cc\u06a9 \u0642\u0627\u0628\u0644 \u062a\u062f\u0648\u06cc\u0646 Shopify \u062a\u06be\u06cc\u0645 (\u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0627\u06cc\u06a9 \u0622\u0646 \u0644\u0627\u0626\u0646 \u0633\u0679\u0648\u0631 2.0 \u0641\u0631\u0636 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u062c\u06cc\u0633\u06d2 Horizon \u06cc\u0627 Dawn)<\/p>\n<\/li>\n<li>\n<p>\u0622\u0631\u0627\u0645 <code>fetch<\/code> \u0627\u0648\u0631 \u0648\u0639\u062f\u06c1<\/p>\n<\/li>\n<li>\n<p>\u0628\u0646\u06cc\u0627\u062f\u06cc \u0645\u0627\u0626\u0639<\/p>\n<\/li>\n<li>\n<p>\u06a9\u0648\u0626\u06cc \u0627\u06cc\u067e\u0633\u060c \u06a9\u0648\u0626\u06cc \u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9\u060c \u06a9\u0648\u0626\u06cc \u062a\u0639\u0645\u06cc\u0631\u0627\u062a\u06cc \u0642\u062f\u0645 \u0646\u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n<h2 id=\"heading-step-1-the-drawer-markup\">\u0645\u0631\u062d\u0644\u06c1 1: \u062f\u0631\u0627\u0632 \u0645\u0627\u0631\u06a9 \u0627\u067e<\/h2>\n<p>\u062f\u0631\u0627\u0632 \u06a9\u0648 \u062d\u0635\u0648\u06ba \u0645\u06cc\u06ba \u0628\u0646\u0627\u0626\u06cc\u06ba \u062a\u0627\u06a9\u06c1 \u0648\u06c1 \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0627\u062a \u067e\u0631 \u067e\u06cc\u0634 \u06a9\u06cc\u06d2 \u062c\u0627\u0626\u06cc\u06ba\u060c \u067e\u06be\u0631 \u0645\u0648\u062c\u0648\u062f\u06c1 \u06a9\u0627\u0631\u0679 \u06a9\u0648 \u0631\u06cc\u0646\u0688\u0631 \u06a9\u0631\u06cc\u06ba\u06d4 <strong>\u0645\u0627\u0626\u0639 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0633\u0631\u0648\u0631 \u0633\u0627\u0626\u06cc\u0688<\/strong> \u0627\u0633 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u06a9\u06c1 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u0648 \u0639\u0645\u0644 \u0645\u06cc\u06ba \u0644\u0627\u06cc\u0627 \u062c\u0627\u0626\u06d2\u06d4<\/p>\n<p>\u06cc\u06c1 \u0636\u0631\u0648\u0631\u06cc \u06c1\u06d2\u06d4 \u0627\u06af\u0631 \u06a9\u0648\u0626\u06cc \u062e\u0631\u06cc\u062f\u0627\u0631 \u0627\u067e\u0646\u06cc \u0679\u0648\u06a9\u0631\u06cc \u0645\u06cc\u06ba \u0627\u0634\u06cc\u0627\u0621 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u06c1\u06cc \u067e\u06c1\u0646\u0686 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u062a\u0648 \u062f\u0631\u0627\u0632 \u067e\u06c1\u0644\u06d2 \u067e\u06cc\u0646\u0679 \u067e\u0631 \u062f\u0631\u0633\u062a \u06c1\u06d2 \u0627\u0648\u0631 JavaScript \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644\u06cc \u06a9\u06d2 \u0628\u0639\u062f \u06c1\u06cc \u0627\u0633\u06d2 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0627\u06cc\u06a9 \u0628\u0691\u06be\u062a\u06cc \u06c1\u0648\u0626\u06cc \u0628\u06c1\u062a\u0631\u06cc \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u06a9\u062b\u0631 \u06af\u06be\u0631\u06cc\u0644\u0648 \u0633\u0627\u062e\u062a \u0645\u06cc\u06ba \u0646\u0638\u0631 \u0627\u0646\u062f\u0627\u0632 \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u06cc \u067e\u06c1\u0644\u06cc \u0686\u06cc\u0632 \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u06a9\u06c1 <code>data-*<\/code> \u0646\u06cc\u0686\u06d2 \u062f\u06cc \u06af\u0626\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u0645\u0627\u0631\u06a9 \u0627\u067e \u0627\u0648\u0631 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0645\u0639\u0627\u06c1\u062f\u06d2 \u06c1\u06cc\u06ba\u06d4 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062c\u0648 \u06a9\u0686\u06be \u0628\u06be\u06cc \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u0627\u0633\u06d2 \u0627\u0646 \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u0645\u06cc\u06ba \u0633\u06d2 \u06a9\u0633\u06cc \u0627\u06cc\u06a9 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u062f\u06cc\u06a9\u06be\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0646\u06c1 \u06a9\u06c1 \u06a9\u0644\u0627\u0633 \u06a9\u06d2 \u0646\u0627\u0645 \u06cc\u0627 \u0679\u06cc\u06af \u06a9\u06d2 \u0645\u0642\u0627\u0645 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2\u06d4<\/p>\n<pre><code class=\"language-liquid\">{%- comment -%} sections\/cart-drawer.liquid {%- endcomment -%}\n<button type=\"button\" class=\"cart-toggle\" data-cart-toggle=\"\">\n  Cart <span class=\"cart-count\" data-cart-count=\"\">{{ cart.item_count }}<\/span>\n<\/button>\n\n<aside class=\"drawer\" data-drawer=\"\" aria-label=\"Cart\" aria-hidden=\"true\">\n  <p>\n    <h2>Your cart<\/h2>\n    <button type=\"button\" class=\"drawer__close\" data-drawer-close=\"\" aria-label=\"Close cart\">\u00d7<\/button>\n  <\/p>\n\n  <div class=\"drawer__body\">\n    <p class=\"drawer__empty\" data-drawer-empty=\"\" if=\"\" cart.item_count=\"\"> 0 %}style=\"display:none\"{% endif %}>\n      Your cart is empty.\n    <\/p>\n    <ul class=\"drawer__items\" data-drawer-items=\"\">\n      {%- for item in cart.items -%}\n        <li class=\"drawer__item\" data-line=\"\" data-line-key=\"{{ item.key }}\" data-quantity=\"{{ item.quantity }}\">\n          {{ item.image | image_url: width: 96 | image_tag: class: 'drawer__item-img', loading: 'lazy', alt: item.product.title }}\n          <span class=\"drawer__item-title\">{{ item.product.title }}<\/span>\n          <span class=\"drawer__item-price\">{{ item.final_line_price | money }}<\/span>\n        <\/li>\n      {%- endfor -%}\n    <\/ul>\n  <\/div>\n\n  \n<\/aside>\n\n<\/code><\/pre>\n<p>\u062f\u0648 \u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u06cc\u06c1\u0627\u06ba \u062a\u0648\u0642\u0641 \u06a9\u06d2 \u0642\u0627\u0628\u0644 \u06c1\u06cc\u06ba: <code>item.final_line_price<\/code>\u0646\u06c1\u06cc\u06ba <code>item.line_price<\/code>. \u0627\u06af\u0631\u0686\u06c1 \u062f\u0648\u0646\u0648\u06ba \u06a9\u0627\u0631\u0679 \u0645\u06cc\u06ba \u0645\u0648\u062c\u0648\u062f \u06c1\u06cc\u06ba\u06d4 <code>final_line_price<\/code> \u06cc\u06c1 \u062e\u0631\u06cc\u062f\u0627\u0631\u0648\u06ba \u0633\u06d2 \u0648\u0635\u0648\u0644 \u06a9\u06cc \u062c\u0627\u0646\u06d2 \u0648\u0627\u0644\u06cc \u0627\u0635\u0644 \u0631\u0642\u0645 \u06c1\u06d2\u060c \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u06cc\u06c1 \u0644\u0627\u0626\u0646 \u0644\u06cc\u0648\u0644 \u06a9\u06cc \u0686\u06be\u0648\u0679 \u06a9\u0648 \u0638\u0627\u06c1\u0631 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4 \u0627\u0648\u0631 \u06c1\u0631 \u0627\u06cc\u06a9 <code><\/p>\n<li\/><\/code> \u0644\u06d2 \u062c\u0627\u0646\u0627 <code>data-line-key<\/code> \u0627\u0648\u0631 <code>data-quantity<\/code>\u0622\u067e \u0645\u0642\u062f\u0627\u0631 \u0627\u0648\u0631 \u06c1\u0679\u0627\u0646\u06d2 \u06a9\u06d2 \u06a9\u0646\u0679\u0631\u0648\u0644 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0628\u0639\u062f \u0645\u06cc\u06ba \u067e\u0691\u06be\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<p>\u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba \u0628\u0679\u0646 \u067e\u0631\u0648\u0688\u06a9\u0679 \u06a9\u0627\u0631\u0688 \u06cc\u0627 \u067e\u0631\u0648\u0688\u06a9\u0679 \u06a9\u06d2 \u0635\u0641\u062d\u06c1 \u067e\u0631 \u0648\u0627\u0642\u0639 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0645\u062e\u062a\u0644\u0641 \u0642\u0633\u0645 \u06a9\u06cc ID \u06a9\u0648 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u0645\u0627\u0626\u0639 \u0633\u06d2 \u067e\u0627\u0633 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u06c1\u0631 \u0628\u0627\u0631 \u062f\u0631\u0633\u062a \u0642\u0633\u0645 \u0634\u0627\u0645\u0644 \u06a9\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-liquid\">{%- comment -%} in the product card \/ PDP {%- endcomment -%}\n<button type=\"button\" class=\"pdp__add\" data-add=\"\" data-variant-id=\"{{ product.selected_or_first_available_variant.id }}\">\n  Add to cart\n<\/button>\n<\/code><\/pre>\n<h2 id=\"heading-step-2-add-to-cart-without-a-reload\">\u0645\u0631\u062d\u0644\u06c1 2: \u062f\u0648\u0628\u0627\u0631\u06c1 \u0644\u0648\u0688 \u06a9\u06cc\u06d2 \u0628\u063a\u06cc\u0631 \u06a9\u0627\u0631\u0679 \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>\u06cc\u06c1\u0627\u06ba \u0627\u06cc\u06a9 \u062c\u0645\u0644\u06d2 \u0645\u06cc\u06ba \u0645\u06a9\u0645\u0644 \u0646\u0645\u0648\u0646\u06c1 \u06c1\u06d2: \u0679\u0648\u06a9\u0631\u06cc \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u060c \u067e\u06be\u0631 \u0627\u0633\u06d2 \u062f\u0648\u0628\u0627\u0631\u06c1 \u067e\u0691\u06be\u06cc\u06ba\u060c \u0627\u0633\u06d2 \u067e\u06cc\u0634 \u06a9\u0631\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0627\u0633\u06d2 \u06a9\u06be\u0648\u0644\u06cc\u06ba\u06d4 \u062c\u0648 \u0644\u06a9\u06be\u0627 \u06c1\u06d2\u060c <code>POST \/cart\/add.js<\/code> \u0627\u06cc\u06a9 \u0642\u0633\u0645 \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 <code>GET \/cart.js<\/code> \u0645\u06cc\u06ba \u067e\u0648\u0631\u06cc \u0679\u0648\u06a9\u0631\u06cc \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u067e\u0691\u06be\u062a\u0627 \u06c1\u0648\u06ba \u0627\u0648\u0631 \u067e\u06be\u0631 \u062f\u0631\u0627\u0632\u0648\u06ba \u06a9\u0648 \u067e\u06cc\u0646\u0679 \u06a9\u0631\u062a\u0627 \u06c1\u0648\u06ba \u062c\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0645\u06cc\u06ba \u0648\u0627\u067e\u0633 \u0622\u06cc\u0627 \u06c1\u0648\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">\/\/ assets\/cart-drawer.js\ndocument.querySelectorAll(\"[data-add]\").forEach(function (btn) {\n  btn.addEventListener(\"click\", function () {\n    var id = Number(btn.getAttribute(\"data-variant-id\"));\n    fetch(\"\/cart\/add.js\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application\/json\" },\n      body: JSON.stringify({ id: id, quantity: 1 }),\n    })\n      .then(function (r) { return r.json(); })\n      .then(function () { return refresh(); })  \/\/ re-read \/cart.js\n      .then(openDrawer);                         \/\/ then slide it in\n  });\n});\n<\/code><\/pre>\n<p>\u0679\u0648\u06a9\u0631\u06cc \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u06cc\u0648\u06ba \u067e\u0691\u06be\u06cc\u06ba\u061f <code>\/cart\/add.js<\/code> \u067e\u06c1\u0644\u06d2 \u06c1\u06cc \u06a9\u0686\u06be \u0648\u0627\u067e\u0633 \u06a9\u0631 \u062f\u06cc\u0627\u061f \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u0631\u062f\u0639\u0645\u0644 <code>add.js<\/code> \u06cc\u06c1 \u0627\u0633 \u0644\u0627\u0626\u0646 \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0648 \u0622\u067e \u0646\u06d2 \u0627\u0628\u06be\u06cc \u0634\u0627\u0645\u0644 \u06a9\u06cc \u06c1\u06d2\u060c \u067e\u0648\u0631\u06cc \u06a9\u0627\u0631\u0679 \u06a9\u06cc \u0646\u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 \u067e\u0648\u0631\u06cc \u0679\u0648\u06a9\u0631\u06cc \u062f\u0631\u0627\u0632 \u0645\u06cc\u06ba \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u0632\u06cc\u0627\u062f\u06c1 \u0627\u06c1\u0645 \u0628\u0627\u062a \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 Shopify \u0622\u067e \u06a9\u06d2 \u062d\u062a\u0645\u06cc \u0634\u0627\u067e\u0646\u06af \u06a9\u0627\u0631\u0679 \u06a9\u0627 \u062a\u0639\u06cc\u0646 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0622\u067e \u0646\u0626\u06cc \u0644\u0627\u0626\u0646\u0648\u06ba \u06a9\u0648 \u0645\u0648\u062c\u0648\u062f\u06c1 \u0644\u0627\u0626\u0646\u0648\u06ba \u0645\u06cc\u06ba \u0636\u0645 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062e\u0648\u062f\u06a9\u0627\u0631 \u0631\u0639\u0627\u06cc\u062a\u06cc\u06ba \u0644\u0627\u06af\u0648 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u06cc\u0627 \u0641\u0631\u0648\u062e\u062a \u06c1\u0648\u0646\u06d2 \u0648\u0627\u0644\u06cc \u0645\u062e\u062a\u0644\u0641 \u0642\u0633\u0645\u0648\u06ba \u06a9\u0648 \u0645\u0633\u062a\u0631\u062f \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u0633 \u0628\u0627\u062a \u06a9\u0627 \u06cc\u0642\u06cc\u0646 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0648\u0627\u062d\u062f \u0637\u0631\u06cc\u0642\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0622\u067e \u06a9\u06d2 \u062f\u0631\u0627\u0632 \u062d\u0642\u06cc\u0642\u062a \u0633\u06d2 \u0645\u06cc\u0644 \u06a9\u06be\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0628\u0633 <code>refresh()<\/code> \u0627\u0633 \u067e\u0648\u0631\u06cc \u0641\u0627\u0626\u0644 \u0645\u06cc\u06ba \u06cc\u06c1 \u0627\u06cc\u06a9 \u0648\u0627\u062d\u062f \u0641\u0646\u06a9\u0634\u0646 \u06c1\u06d2 \u062c\u0648 \u06c1\u0645\u06cc\u06ba \u0634\u0627\u067e\u0646\u06af \u06a9\u0627\u0631\u0679 UI \u06a9\u0648 \u0686\u06be\u0648\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">function refresh() {\n  return fetch(\"\/cart.js\").then(function (r) { return r.json(); }).then(render);\n}\n<\/code><\/pre>\n<p>\u06cc\u06c1\u0627\u06ba \u062f\u0648\u0646\u0648\u06ba \u0627\u062e\u062a\u062a\u0627\u0645\u06cc \u0646\u06a9\u0627\u062a (<code>\/cart\/add.js<\/code> \u0627\u0648\u0631 <code>\/cart.js<\/code>) Shopify Ajax API \u06a9\u0627 \u062d\u0635\u06c1 \u06c1\u06d2 \u0627\u0648\u0631 \u06a9\u0633\u06cc \u0628\u06be\u06cc \u0627\u0633\u0679\u0648\u0631 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0628\u063a\u06cc\u0631 \u06a9\u0633\u06cc \u0633\u06cc\u0679 \u0627\u067e \u06a9\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/Shopify-\u0645\u06cc\u06ba-AJAX-\u06a9\u0627\u0631\u0679-\u062f\u0631\u0627\u0632-\u06a9\u06cc\u0633\u06d2-\u0628\u0646\u0627\u06cc\u0627-\u062c\u0627\u0626\u06d2-2026-\u0637\u0631\u06cc\u0642\u06c1.png\" alt=\"\u0645\u0631\u062d\u0644\u06c1 3 \u0644\u0648\u067e: \u062e\u0631\u06cc\u062f\u0627\u0631 Add to Cart \u067e\u0631 \u06a9\u0644\u06a9 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0633\u06a9\u0631\u067e\u0679 \/cart\/add.js \u067e\u0631 \u067e\u0648\u0633\u0679 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u067e\u06be\u0631 \/cart.js \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u067e\u0691\u06be\u062a\u0627 \u06c1\u06d2\u060c \u067e\u06be\u0631 \u0631\u06cc\u0646\u0688\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u062f\u0631\u0627\u0632 \u06a9\u0648 \u06a9\u06be\u0648\u0644\u062a\u0627 \u06c1\u06d2\u06d4\" style=\"display:block;margin:0 auto\" width=\"3666\" height=\"2062\" loading=\"lazy\" title=\"\"><\/p>\n<p><em>\u0627\u0633\u06d2 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u060c \u0627\u0633\u06d2 \u062f\u0648\u0628\u0627\u0631\u06c1 \u067e\u0691\u06be\u06cc\u06ba\u060c \u0627\u0648\u0631 \u067e\u06be\u0631 \u0631\u06cc\u0646\u0688\u0631 \u06a9\u0631\u06cc\u06ba\u06d4 \u0627\u06cc\u06a9 \u06c1\u06cc \u0644\u0648\u067e \u0627\u0636\u0627\u0641\u06d2\u060c \u0645\u0642\u062f\u0627\u0631 \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644\u06cc\u060c \u0627\u0648\u0631 \u06c1\u0679\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0686\u0644\u062a\u0627 \u06c1\u06d2\u06d4<\/em><\/p>\n<h2 id=\"heading-step-3-render-the-drawer-from-the-servers-truth\">\u0645\u0631\u062d\u0644\u06c1 3: \u0633\u0631\u0648\u0631 \u067e\u0631 \u062f\u0631\u0627\u0632 \u06a9\u0648 \u0633\u0686 \u0645\u06cc\u06ba \u067e\u06cc\u0634 \u06a9\u0631\u0646\u0627<\/h2>\n<p><code>render(cart)<\/code>    \u062e\u0644\u0644 <code>\/cart.js<\/code> \u062c\u0648\u0627\u0628 \u062f\u06cc\u06ba \u0627\u0648\u0631 \u062f\u0631\u0627\u0632 \u06a9\u06be\u06cc\u0646\u0686\u06cc\u06ba\u06d4 \u063a\u0648\u0631 \u06a9\u0631\u06cc\u06ba \u06a9\u06c1 \u06a9\u06cc\u0627 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc\u0627 \u062c\u0627 \u0631\u06c1\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u06a9\u0627\u0624\u0646\u0679\u0631 \u0645\u06cc\u06ba \u06a9\u0644 \u0627\u0636\u0627\u0641\u06c1 \u06cc\u0627 \u0627\u0636\u0627\u0641\u06c1 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u067e\u0691\u06be\u062a\u0627 \u06c1\u06d2 <code>item_count<\/code> \u0627\u0648\u0631 <code>total_price<\/code> \u0645\u06cc\u06ba \u0646\u06d2 \u0627\u0633\u06d2 \u0628\u0627\u06a9\u0633 \u0633\u06d2 \u0628\u0627\u06c1\u0631 \u0644\u06d2 \u0644\u06cc\u0627 \u062c\u0648 Shopify \u0648\u0627\u067e\u0633 \u0622\u06cc\u0627\u06d4<\/p>\n<pre><code class=\"language-javascript\">function money(cents) {\n  return \"$\" + (cents \/ 100).toFixed(2);\n}\n\nfunction render(cart) {\n  document.querySelector(\"[data-cart-count]\").textContent = cart.item_count;\n  document.querySelector(\"[data-cart-subtotal]\").textContent = money(cart.total_price);\n\n  var itemsEl = document.querySelector(\"[data-drawer-items]\");\n  var emptyEl = document.querySelector(\"[data-drawer-empty]\");\n  itemsEl.innerHTML = \"\";\n  if (!cart.items.length) { emptyEl.style.display = \"block\"; return; }\n  emptyEl.style.display = \"none\";\n\n  cart.items.forEach(function (line) {\n    var li = document.createElement(\"li\");\n    li.className = \"drawer__item\";\n    li.setAttribute(\"data-line\", \"\");\n    li.setAttribute(\"data-line-key\", line.key);\n    li.setAttribute(\"data-quantity\", line.quantity);\n    li.innerHTML =\n      '<img decoding=\"async\" class=\"drawer__item-img\" src=\"&#039; + (line.image || \" alt=\"\" title=\"\">' +\n      '<span class=\"drawer__item-title\">' + line.title + \"<\/span>\" +\n      '<span class=\"drawer__item-price\">' + money(line.final_line_price) + \"<\/span>\";\n    itemsEl.appendChild(li);\n  });\n}\n<\/code><\/pre>\n<p>\u0627\u06cc\u06a9 \u0686\u06cc\u0632 \u062c\u0648 \u0644\u0648\u06af\u0648\u06ba \u06a9\u0648 \u062f\u06cc\u0648\u0627\u0646\u06c1 \u0628\u0646\u0627\u062a\u06cc \u06c1\u06d2 \u0648\u06c1 \u06c1\u06d2 \u067e\u06cc\u0633\u06c1\u06d4 Ajax API \u0642\u06cc\u0645\u062a \u0627\u0633 \u0637\u0631\u062d \u0644\u0648\u0679\u0627\u062a\u0627 \u06c1\u06d2: <strong>\u0633\u06cc\u0646\u0679<\/strong>. \u0645\u06c1\u0646\u06af\u06cc \u0644\u0627\u0626\u0646 <code>$18.99<\/code> \u06cc\u06c1 \u06a9\u0686\u06be \u0627\u0633 \u0637\u0631\u062d \u0644\u0648\u0679\u0627\u062a\u0627 \u06c1\u06d2: <code>1899<\/code>. \u0627\u06af\u0631 \u0622\u067e 100 \u0633\u06d2 \u062a\u0642\u0633\u06cc\u0645 \u06a9\u0631\u0646\u0627 \u0628\u06be\u0648\u0644 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0627\u0633\u06d2 \u0628\u06be\u06cc\u062c \u062f\u06cc\u0627 \u062c\u0627\u0626\u06d2 \u06af\u0627\u06d4 <code>$1,899<\/code> \u06a9\u0627\u0641\u06cc \u06a9\u06c1 <code>money()<\/code> \u0645\u062f\u062f\u06af\u0627\u0631 \u0627\u0633 \u062a\u0628\u062f\u06cc\u0644\u06cc \u06a9\u0648 \u0627\u06cc\u06a9 \u062c\u06af\u06c1 \u067e\u0631 \u0627\u0646\u062c\u0627\u0645 \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u06cc\u06a9 \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u0646\u0648\u0679: \u06cc\u06c1 \u0648\u06c1\u06cc \u06c1\u06d2 \u062c\u0648 \u06a9\u06c1\u062a\u0627 \u06c1\u06d2: <code>final_line_price<\/code>\u06cc\u06c1 \u0644\u0627\u0626\u0646 \u0644\u06cc\u0648\u0644 \u06a9\u06cc \u0686\u06be\u0648\u0679 \u06a9\u06cc \u0639\u06a9\u0627\u0633\u06cc \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0633 \u0648\u062c\u06c1 \u0633\u06d2 \u062e\u0631\u06cc\u062f\u0627\u0631\u0648\u06ba \u0633\u06d2 \u0648\u0635\u0648\u0644 \u06a9\u06cc \u062c\u0627\u0646\u06d2 \u0648\u0627\u0644\u06cc \u0627\u0635\u0644 \u0631\u0642\u0645 \u06c1\u06d2 (<code>line_price<\/code> \u0631\u0639\u0627\u06cc\u062a \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0642\u06cc\u0645\u062a\u06d4) \u0645\u0644\u0679\u06cc \u06a9\u0631\u0646\u0633\u06cc \u0627\u0633\u0679\u0648\u0631\u0632 \u067e\u0631 \u06c1\u06cc\u0646\u0688 \u0631\u0648\u0644\u0688 \u0627\u06cc\u06a9\u0633\u0686\u06cc\u0646\u062c\u0632 <code>money()<\/code> Shopify \u0627\u067e\u0646\u06cc \u06a9\u0631\u0646\u0633\u06cc \u06a9\u0627 \u0641\u0627\u0631\u0645\u06cc\u0679 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u0639\u0644\u0627\u0645\u062a\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0639\u0634\u0627\u0631\u06cc\u06c1 \u0641\u0639\u0627\u0644 \u0645\u0627\u0631\u06a9\u06cc\u0679 \u06a9\u06cc \u067e\u06cc\u0631\u0648\u06cc \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1783151963_754_Shopify-\u0645\u06cc\u06ba-AJAX-\u06a9\u0627\u0631\u0679-\u062f\u0631\u0627\u0632-\u06a9\u06cc\u0633\u06d2-\u0628\u0646\u0627\u06cc\u0627-\u062c\u0627\u0626\u06d2-2026-\u0637\u0631\u06cc\u0642\u06c1.gif\" alt=\"\u0627\u06cc\u06a9 \u06a9\u0627\u0641\u06cc \u0634\u0627\u067e \u06a9\u0627 \u06a9\u0627\u0631\u0679 \u062f\u0631\u0627\u0632 \u06a9\u06be\u0644\u0627 \u06c1\u0648\u0627 \u06c1\u06d2 \u062c\u0633 \u0645\u06cc\u06ba \u062a\u0635\u0648\u06cc\u0631\u060c \u0639\u0646\u0648\u0627\u0646\u060c \u0642\u06cc\u0645\u062a\u060c \u0630\u06cc\u0644\u06cc \u0679\u0648\u0679\u0644\u060c \u0627\u0648\u0631 \u0686\u06cc\u06a9 \u0622\u0624\u0679 \u0628\u0679\u0646 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u06cc\u06a9 \u0622\u0626\u0679\u0645 \u062f\u06a9\u06be\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4\" style=\"display:block;margin:0 auto\" width=\"460\" height=\"278\" loading=\"lazy\" title=\"\"><\/p>\n<p><em>\u0645\u06a9\u0645\u0644 \u0637\u0648\u0631 \u067e\u0631 \u067e\u06cc\u0634 \u06a9\u0631\u062f\u06c1 \u062f\u0631\u0627\u0632<\/em> <code>\/cart.js<\/code> <em>\u062c\u0648\u0627\u0628 \u0634\u0645\u0627\u0631\u060c \u0644\u0627\u0626\u0646\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0630\u06cc\u0644\u06cc \u0679\u0648\u0679\u0644 \u0633\u0628\u06be\u06cc \u0633\u0631\u0648\u0631 \u0633\u06d2 \u0646\u06a9\u0627\u0644\u06d2 \u06af\u0626\u06d2 \u06c1\u06cc\u06ba\u06d4<\/em><\/p>\n<h2 id=\"heading-step-4-quantity-plus-and-minus-with-event-delegation\">\u0645\u0631\u062d\u0644\u06c1 4: \u0627\u06cc\u0648\u0646\u0679 \u0688\u06cc\u0644\u06cc\u06af\u06cc\u0634\u0646 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u067e\u0644\u0633 \u0627\u0648\u0631 \u0645\u0627\u0626\u0646\u0633 \u0645\u0642\u062f\u0627\u0631<\/h2>\n<p>\u062a\u0645\u0627\u0645 \u062f\u0631\u0627\u0632 \u062e\u0631\u06cc\u062f\u0627\u0631\u0648\u06ba \u06a9\u0648 \u0645\u0642\u062f\u0627\u0631 \u06a9\u0648 \u0627\u06cc\u0688\u062c\u0633\u0679 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u067e\u0644\u0633 \u0627\u0648\u0631 \u0645\u0627\u0626\u0646\u0633 \u0628\u0679\u0646\u0648\u06ba \u06a9\u0648 \u0686\u06cc\u0646 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0648\u0627\u0636\u062d \u0637\u0631\u06cc\u0642\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0628\u0679\u0646\u0648\u06ba \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0644\u0648\u067e \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u06c1\u0631 \u0628\u0679\u0646 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u06cc\u06a9 \u06a9\u0644\u06a9 \u06c1\u06cc\u0646\u0688\u0644\u0631 \u0645\u0646\u0633\u0644\u06a9 \u06a9\u0631\u06cc\u06ba\u06d4 \u0627\u06cc\u0633\u0627 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u06a9\u0646\u0679\u0631\u0648\u0644 \u067e\u06c1\u0644\u06cc \u062a\u0628\u062f\u06cc\u0644\u06cc \u06a9\u06d2 \u0628\u0639\u062f \u06a9\u0627\u0645 \u06a9\u0631\u0646\u0627 \u0628\u0646\u062f \u06a9\u0631 \u062f\u06d2 \u06af\u0627\u06d4<\/p>\n<p>\u0627\u0633 \u06a9\u06cc \u0648\u062c\u06c1 \u06cc\u06c1 \u06c1\u06d2: \u062c\u0628 \u0628\u06be\u06cc \u06a9\u0627\u0631\u0679 \u062a\u0628\u062f\u06cc\u0644 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u0641\u06c1\u0631\u0633\u062a \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0631\u06cc\u0646\u0688\u0631 \u06a9\u0631\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0627\u0633 \u06a9\u06cc \u062c\u06af\u06c1 \u0644\u06d2 \u0644\u06cc\u062a\u0627 \u06c1\u06d2\u06d4 <code><\/p>\n<li\/><\/code> \u0622\u067e \u0646\u06d2 \u0639\u0646\u0635\u0631 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0645\u0646\u0633\u0644\u06a9 \u06c1\u06cc\u0646\u0688\u0644\u0631 \u06a9\u0648 \u067e\u0686\u06be\u0644\u06d2 \u0639\u0646\u0635\u0631 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u0627 \u062a\u06be\u0627\u06d4 \u0646\u0626\u06d2 \u0628\u0679\u0646 \u0645\u06cc\u06ba \u06a9\u0648\u0626\u06cc \u0633\u0646\u0646\u06d2 \u0648\u0627\u0644\u0627 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/p>\n<p>\u06cc\u06c1\u0627\u06ba \u0627\u0635\u0644\u0627\u062d\u0627\u062a \u06c1\u06cc\u06ba: <strong>\u062a\u0642\u0631\u06cc\u0628 \u06a9\u0627 \u0648\u0641\u062f<\/strong>. \u0627\u06cc\u06a9 \u0633\u0646\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u06a9\u0648 \u063a\u06cc\u0631 \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u06c1 \u0648\u0627\u0644\u062f\u06cc\u0646 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0645\u0646\u0633\u0644\u06a9 \u06a9\u0631\u06cc\u06ba ( <code\/>), and when a click bubbles up, check what was actually clicked. One handler, and it keeps working through every re-render because the element it&#8217;s attached to never moves.<\/p>\n<pre><code class=\"language-javascript\">var itemsEl = document.querySelector(\"[data-drawer-items]\");\n\nitemsEl.addEventListener(\"click\", function (e) {\n  var inc = e.target.closest(\"[data-qty-inc]\");\n  var dec = e.target.closest(\"[data-qty-dec]\");\n  if (!inc && !dec) return;\n\n  var line = e.target.closest(\"[data-line]\");\n  var key = line.getAttribute(\"data-line-key\");\n  var qty = Number(line.getAttribute(\"data-quantity\"));\n  var nextQty = inc ? qty + 1 : qty - 1;\n\n  fetch(\"\/cart\/change.js\", {\n    method: \"POST\",\n    headers: { \"Content-Type\": \"application\/json\" },\n    body: JSON.stringify({ id: key, quantity: nextQty }),\n  })\n    .then(function (r) { return r.json(); })\n    .then(render);\n});\n<\/code><\/pre>\n<p>\u0627\u0633 \u0648\u0631\u0698\u0646 \u06a9\u06d2 \u0644\u06cc\u06d2: <code>render()<\/code> \u06c1\u0631 \u0644\u0627\u0626\u0646 \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u0627\u06cc\u06a9 \u0633\u0679\u06cc\u067e\u0631 \u06a9\u0646\u0679\u0631\u0648\u0644 \u0628\u0631\u0622\u0645\u062f \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">li.innerHTML =\n  '<img decoding=\"async\" class=\"drawer__item-img\" src=\"&#039; + (line.image || \" alt=\"\" title=\"\">' +\n  '<span class=\"drawer__item-title\">' + line.title + \"<\/span>\" +\n  '<span class=\"drawer__item-qty\">' +\n    '<button class=\"qty-btn\" data-qty-dec=\"\" aria-label=\"Decrease\">-<\/button>' +\n    '<span class=\"qty-value\">' + line.quantity + \"<\/span>\" +\n    '<button class=\"qty-btn\" data-qty-inc=\"\" aria-label=\"Increase\">+<\/button>' +\n  \"<\/span>\" +\n  '<span class=\"drawer__item-price\">' + money(line.final_line_price) + \"<\/span>\";\n<\/code><\/pre>\n<p>\u0627\u06cc\u06a9 \u062a\u0641\u0635\u06cc\u0644 \u062c\u0633\u06d2 \u0622\u0633\u0627\u0646\u06cc \u0633\u06d2 \u063a\u0644\u0637 \u0633\u0645\u062c\u06be\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2: \u062a\u0628\u062f\u06cc\u0644\u06cc \u06a9\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0628\u06be\u06cc\u062c\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06d2\u06d4 <code>id: key<\/code>\u0644\u0627\u0626\u0646 <strong>\u06a9\u0644\u06cc\u062f<\/strong>\u06cc\u06c1 \u0645\u062a\u063a\u06cc\u0631 ID \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0627\u06af\u0631 \u0622\u067e \u06a9\u06d2 \u06a9\u0627\u0631\u0679 \u0645\u06cc\u06ba \u0622\u0626\u0679\u0645 \u06a9\u06cc \u0645\u062e\u062a\u0644\u0641 \u062e\u0635\u0648\u0635\u06cc\u0627\u062a (\u06a9\u0646\u062f\u06c1 \u06a9\u0627\u0631\u06cc\u060c \u06af\u0641\u0679 \u0646\u0648\u0679) \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0622\u067e \u062f\u0648 \u0627\u0644\u06af \u0627\u0644\u06af \u0644\u0627\u0626\u0646\u0648\u06ba \u067e\u0631 \u0627\u06cc\u06a9 \u06c1\u06cc \u062a\u063a\u06cc\u0631\u0627\u062a \u0631\u06a9\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06a9\u0644\u06cc\u062f \u0645\u0646\u0641\u0631\u062f \u0637\u0648\u0631 \u067e\u0631 \u0627\u06cc\u06a9 \u0642\u0637\u0627\u0631 \u06a9\u06cc \u0634\u0646\u0627\u062e\u062a \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u06d4 <code>\/cart\/change.js<\/code> \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1783151963_34_Shopify-\u0645\u06cc\u06ba-AJAX-\u06a9\u0627\u0631\u0679-\u062f\u0631\u0627\u0632-\u06a9\u06cc\u0633\u06d2-\u0628\u0646\u0627\u06cc\u0627-\u062c\u0627\u0626\u06d2-2026-\u0637\u0631\u06cc\u0642\u06c1.gif\" alt=\"\u06a9\u0648\u0627\u0646\u0679\u06cc\u0679\u06cc \u0633\u0679\u06cc\u067e\u0631 \u0627\u0646\u0679\u0631\u0627\u06cc\u06a9\u0634\u0646: \u0645\u0627\u0626\u0646\u0633 \u0627\u0648\u0631 \u067e\u0644\u0633 \u0628\u0679\u0646 \u0648\u0627\u0644\u06d2 \u0622\u0626\u0679\u0645\u0632 \u0627\u0648\u0631 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0645\u06cc\u06ba \u0645\u0642\u062f\u0627\u0631 \u0627\u0648\u0631 \u0630\u06cc\u0644\u06cc \u0679\u0648\u0679\u0644 \u06a9\u0648 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u06cc\u06ba\u06d4\" style=\"display:block;margin:0 auto\" width=\"460\" height=\"278\" loading=\"lazy\" title=\"\"><\/p>\n<p><em>\u0627\u06cc\u06a9 \u0688\u06cc\u0644\u06cc\u06af\u06cc\u0679\u0688 \u0633\u0627\u0645\u0639\u06cc\u0646 \u0627\u0628 \u0627\u0648\u0631 \u06a9\u0633\u06cc \u0628\u06be\u06cc \u0631\u06cc\u0646\u0688\u0631\u0646\u06af \u06a9\u06d2 \u0628\u0639\u062f \u062a\u0645\u0627\u0645 \u0644\u0627\u0626\u0646\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u0633\u0679\u06cc\u067e\u0631\u0632 \u06a9\u0648 \u0686\u0644\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/em><\/p>\n<h2 id=\"heading-step-5-remove-a-line-and-clear-the-cart\">\u0645\u0631\u062d\u0644\u06c1 5: \u0644\u0627\u0626\u0646 \u0627\u0648\u0631 \u062e\u0627\u0644\u06cc \u0679\u0648\u06a9\u0631\u06cc \u0635\u0627\u0641 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>\u0627\u06cc\u06a9 \u0646\u06cc\u0627 \u0688\u0648\u06cc\u0644\u067e\u0631 \u0622\u067e \u06a9\u06cc \u062a\u0644\u0627\u0634 \u0645\u06cc\u06ba \u0622 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4 <code>\/cart\/remove.js<\/code>\u0644\u06cc\u06a9\u0646 \u06cc\u06c1 \u0645\u0648\u062c\u0648\u062f \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 Shopify \u06a9\u06d2 \u0634\u0627\u067e\u0646\u06af \u06a9\u0627\u0631\u0679 API \u0633\u06d2 \u0644\u0627\u0626\u0646\u06cc\u06ba \u06c1\u0679\u0627 \u062f\u06cc\u06ba\u06d4 <strong>\u06c1\u06d2<\/strong> \u0627\u0633\u06cc \u0645\u0642\u062f\u0627\u0631 \u06a9\u0648 0 \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 <code>\/cart\/change.js<\/code> \u06cc\u06c1 \u0648\u06c1 \u0631\u0627\u0633\u062a\u06c1 \u06c1\u06d2 \u062c\u0633\u06d2 \u0645\u06cc\u06ba \u0646\u06d2 \u0627\u0628\u06be\u06cc \u0633\u0679\u06cc\u067e\u0631 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u0627 \u062a\u06be\u0627\u06d4 \u067e\u0648\u0631\u06cc \u0679\u0648\u06a9\u0631\u06cc \u06a9\u0648 \u0635\u0627\u0641 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0627\u067e\u0646\u0627 \u0627\u062e\u062a\u062a\u0627\u0645\u06cc \u0646\u0642\u0637\u06c1 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 <code>\/cart\/clear.js<\/code>\u062c\u0633\u0645 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">\/\/ Remove: one delegated listener, quantity 0 deletes the line.\nitemsEl.addEventListener(\"click\", function (e) {\n  var remove = e.target.closest(\"[data-remove]\");\n  if (!remove) return;\n  var key = e.target.closest(\"[data-line]\").getAttribute(\"data-line-key\");\n  fetch(\"\/cart\/change.js\", {\n    method: \"POST\",\n    headers: { \"Content-Type\": \"application\/json\" },\n    body: JSON.stringify({ id: key, quantity: 0 }),\n  })\n    .then(function (r) { return r.json(); })\n    .then(render);\n});\n\n\/\/ Clear: empty the whole cart, no body.\ndocument.querySelector(\"[data-cart-clear]\").addEventListener(\"click\", function () {\n  fetch(\"\/cart\/clear.js\", { method: \"POST\" })\n    .then(function (r) { return r.json(); })\n    .then(render);\n});\n<\/code><\/pre>\n<p>\u06c1\u0631 \u0686\u06cc\u0632 \u06a9\u06cc \u0637\u0631\u062d \u0633\u0631\u0648\u0631 \u06a9\u06d2 \u062c\u0648\u0627\u0628 \u0645\u06cc\u06ba \u062f\u0648\u0646\u0648\u06ba \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u067e\u06cc\u0634 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0648\u06c1 \u0646\u0638\u0645 \u0648 \u0636\u0628\u0637 \u06c1\u06d2 \u062c\u0648 \u06c1\u0679\u0627\u0626\u06cc \u06af\u0626\u06cc \u0627\u0634\u06cc\u0627\u0621 \u06a9\u0648 \u0634\u0645\u0627\u0631 \u0645\u06cc\u06ba \u0628\u0627\u0642\u06cc \u0631\u06c1\u0646\u06d2 \u0633\u06d2 \u0631\u0648\u06a9\u062a\u0627 \u06c1\u06d2\u06d4 <code><\/p>\n<li\/><\/code> DOM \u0627\u0648\u0631 \u0627\u0645\u06cc\u062f \u0633\u06d2 \u0628\u0627\u06c1\u0631\u06d4 \u0633\u0631\u0648\u0631 \u0633\u06d2 \u0628\u0627\u062a \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u067e\u06be\u0631 \u062c\u0648 \u06a9\u0686\u06be \u0633\u0631\u0648\u0631 \u06a9\u06c1\u062a\u0627 \u06c1\u06d2 \u0627\u0633\u06d2 \u06a9\u06be\u06cc\u0646\u0686\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-step-6-re-rendering-with-the-section-rendering-api-the-version-youd-ship\">\u0645\u0631\u062d\u0644\u06c1 6: \u0633\u06cc\u06a9\u0634\u0646 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af API \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0631\u06cc\u0646\u0688\u0631 \u06a9\u0631\u06cc\u06ba (\u0622\u067e \u06a9\u0648\u0646 \u0633\u0627 \u0648\u0631\u0698\u0646 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u06cc\u06ba \u06af\u06d2)<\/h2>\n<p>\u0627\u0633 \u0648\u0642\u062a \u062a\u06a9 \u06c1\u0631 \u0686\u06cc\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u0645\u06cc\u06ba \u062f\u0631\u0627\u0632 \u06a9\u06d2 \u0627\u06cc\u0686 \u0679\u06cc \u0627\u06cc\u0645 \u0627\u06cc\u0644 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0644\u06a9\u06be \u0631\u06c1\u06cc \u06c1\u06d2\u06d4 \u06cc\u06c1 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u062f\u06cc\u06a9\u06be\u06cc\u06ba \u06a9\u06c1 \u0627\u0633 \u06a9\u06cc \u0642\u06cc\u0645\u062a \u06a9\u062a\u0646\u06cc \u06c1\u06d2\u06d4 \u062f\u0631\u0627\u0632 \u0645\u0627\u0631\u06a9 \u0627\u067e \u0627\u0628 \u062f\u0648 \u062c\u06af\u06c1\u0648\u06ba \u067e\u0631 \u06c1\u06d2: \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0645\u0631\u062d\u0644\u06c1 1 \u0645\u06cc\u06ba \u0645\u0627\u0626\u0639 \u0645\u06cc\u06ba \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0627\u0646\u062f\u0631\u0648\u0646\u06cc \u0679\u06cc\u0645\u067e\u0644\u06cc\u0679 \u0633\u0679\u0631\u0646\u06af \u0645\u06cc\u06ba\u06d4 <code>render()<\/code>. \u0627\u06af\u0631 \u0622\u067e \u0688\u06cc\u0632\u0627\u0626\u0646 \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u062f\u0648\u0646\u0648\u06ba \u06a9\u0648 \u06c1\u0645\u06cc\u0634\u06c1 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0637\u0627\u0628\u0642\u062a \u067e\u0630\u06cc\u0631\u06cc \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06c1\u0648\u0646\u0627 \u067e\u0691\u06d2 \u06af\u0627\u06d4<\/p>\n<p>Shopify \u06a9\u0627 \u062c\u0648\u0627\u0628 \u06cc\u06c1 \u06c1\u06d2: <strong>\u0628\u0646\u0688\u0644 \u0633\u06cc\u06a9\u0634\u0646 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af<\/strong>. \u0627\u0633\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0645\u06cc\u06ba \u062c\u0648 \u06a9\u0627\u0631\u0679 \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u060c \u06c1\u0645 \u06a9\u0627\u0631\u0679 \u0627\u06cc\u0646\u0688 \u067e\u0648\u0627\u0626\u0646\u0679 \u0633\u06d2 \u062f\u0648\u0628\u0627\u0631\u06c1 \u067e\u06cc\u0634 \u06a9\u0631\u062f\u06c1 \u0633\u06cc\u06a9\u0634\u0646 HTML \u06a9\u0648 \u0648\u0627\u067e\u0633 \u06a9\u0631\u0646\u06d2 \u06a9\u0648 \u06a9\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0645\u0627\u0631\u06a9 \u0627\u067e \u0635\u0631\u0641 \u0645\u0627\u0626\u0639 \u0645\u06cc\u06ba \u0645\u0648\u062c\u0648\u062f \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0633\u0631\u0648\u0631 \u0635\u0627\u0631\u0641 \u06a9\u0648 \u0645\u06a9\u0645\u0644 \u0627\u06cc\u0686 \u0679\u06cc \u0627\u06cc\u0645 \u0627\u06cc\u0644 \u0688\u06cc\u0644\u06cc\u0648\u0631 \u0627\u0648\u0631 \u06af\u0631\u0627 \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0634\u0627\u0645\u0644 \u06a9\u0631\u06a9\u06d2 \u0627\u0633\u06d2 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06cc\u06ba: <code>sections<\/code> \u062e\u0631\u06cc\u062f\u0627\u0631\u06cc \u06a9\u06cc \u0679\u0648\u06a9\u0631\u06cc \u06a9\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u06d2 \u067e\u06cc\u0631\u0627\u0645\u06cc\u0679\u0631\u0632:<\/p>\n<pre><code class=\"language-javascript\">fetch(\"\/cart\/add.js\", {\n  method: \"POST\",\n  headers: { \"Content-Type\": \"application\/json\" },\n  body: JSON.stringify({\n    id: variantId,\n    quantity: 1,\n    sections: \"cart-drawer\",              \/\/ section id(s), comma-separated\n    sections_url: window.location.pathname \/\/ optional render context\n  }),\n})\n  .then(function (r) { return r.json(); })\n  .then(function (cart) {\n    \/\/ Shopify returns rendered HTML under `sections`, keyed by id.\n    var html = cart.sections[\"cart-drawer\"];\n    if (html) {\n      document.querySelector(\"[data-drawer]\").innerHTML =\n        new DOMParser().parseFromString(html, \"text\/html\")\n          .querySelector(\"[data-drawer]\").innerHTML;\n    }\n    openDrawer();\n  });\n<\/code><\/pre>\n<p>\u0627\u06cc\u062c\u06cc\u06a9\u0633 \u06a9\u0627\u0631\u0679 API \u062d\u0648\u0627\u0644\u06c1 \u0627\u0648\u0631 \u0633\u06cc\u06a9\u0634\u0646 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af API \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u0633\u06d2 \u06a9\u06cc\u0627 \u062c\u0627\u0646\u0646\u0627 \u0642\u06cc\u0645\u062a\u06cc \u06c1\u06d2\u061f<\/p>\n<ul>\n<li>\n<p>\u0628\u0646\u0688\u0644 \u0633\u06cc\u06a9\u0634\u0646 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af \u06cc\u06c1\u0627\u06ba \u0633\u06d2 \u062f\u0633\u062a\u06cc\u0627\u0628 \u06c1\u06d2: <code>\/cart\/add<\/code>, <code>\/cart\/change<\/code>, <code>\/cart\/clear<\/code>\u0627\u0648\u0631 <code>\/cart\/update<\/code>.<\/p>\n<\/li>\n<li>\n<p><code>sections<\/code>    \u06a9\u0648\u0645\u0627 \u0633\u06d2 \u0627\u0644\u06af \u06a9\u0631\u062f\u06c1 \u0641\u06c1\u0631\u0633\u062a (\u06cc\u0627 \u0635\u0641) \u067e\u0627\u0646\u0686 \u0633\u06cc\u06a9\u0634\u0646 IDs \u062a\u06a9\u06d4<\/p>\n<\/li>\n<li>\n<p><code>sections_url<\/code>    \u0622\u067e \u06a9\u0648 \u0634\u0631\u0648\u0639 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u0626\u06d2\u06d4 <code>\/<\/code>. \u0627\u06af\u0631 \u0686\u06be\u0648\u0691 \u062f\u06cc\u0627 \u062c\u0627\u0626\u06d2 \u062a\u0648\u060c \u0627\u0633 \u062d\u0635\u06d2 \u06a9\u0648 \u0645\u0648\u062c\u0648\u062f\u06c1 \u0635\u0641\u062d\u06c1 \u06a9\u06d2 \u062a\u0646\u0627\u0638\u0631 \u0645\u06cc\u06ba \u067e\u06cc\u0634 \u06a9\u06cc\u0627 \u062c\u0627\u0626\u06d2 \u06af\u0627 ( <code>Referer<\/code> \u06c1\u06cc\u0688\u0631)\u06d4<\/p>\n<\/li>\n<li>\n<p>\u067e\u06cc\u0634 \u06a9\u0631\u062f\u06c1 HTML \u06c1\u06d2\u06d4 <code>sections<\/code> JSON \u062c\u0648\u0627\u0628 \u06a9\u06cc \u06a9\u0644\u06cc\u062f \u0628\u0637\u0648\u0631 \u0633\u06cc\u06a9\u0634\u0646 ID \u062f\u0631\u062c \u06a9\u06cc \u06af\u0626\u06cc\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0633\u06cc\u06a9\u0634\u0646\u0632 \u062c\u0648 \u0631\u06cc\u0646\u0688\u0631 \u06a9\u0631\u0646\u06d2 \u0645\u06cc\u06ba \u0646\u0627\u06a9\u0627\u0645 \u0631\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0628\u0634\u0645\u0648\u0644 \u063a\u06cc\u0631 \u0645\u0648\u062c\u0648\u062f \u0633\u06cc\u06a9\u0634\u0646\u0632\u060c \u0627\u0633 \u0637\u0631\u062d \u0648\u0627\u067e\u0633 \u06a9\u06cc\u06d2 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba: <code>null<\/code> HTTP 200 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 \u06c1\u0645\u06cc\u0634\u06c1 null \u06a9\u06cc \u062d\u0641\u0627\u0638\u062a \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0633\u06cc\u06a9\u0634\u0646 IDs \u06c1\u06cc\u06ba: <code>section.id<\/code> \u0645\u0627\u0626\u0639 \u06cc\u0627 <code>id=\"shopify-section-[id]\"<\/code> \u0631\u06cc\u067e\u0646\u06af \u067e\u06cc\u067e\u0631 \u067e\u0631\u06d4 \u0641\u0627\u0626\u0644 \u06a9\u06d2 \u0646\u0627\u0645 \u0633\u06d2 \u067e\u06cc\u0634 \u06a9\u0631\u062f\u06c1 \u062d\u0635\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u062c\u06cc\u0633\u06d2 <code>{% section 'cart-drawer' %}<\/code> \u06a9\u0648 <code>theme.liquid<\/code>) ID \u06c1\u06d2\u06d4 <code>cart-drawer<\/code>. JSON \u0679\u06cc\u0645\u067e\u0644\u06cc\u0679 \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u0622\u067e \u06a9\u0648 \u0627\u06cc\u06a9 \u0645\u062a\u062d\u0631\u06a9 ID \u0627\u0633 \u0637\u0631\u062d \u0645\u0644\u062a\u06cc \u06c1\u06d2: <code>template--123__cart-drawer<\/code>\u060c \u0644\u06c1\u0630\u0627 \u0686\u0627\u0628\u06cc \u06a9\u0648 \u06c1\u0627\u0631\u0688 \u06a9\u0648\u0688\u0646\u06af \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0631\u06cc\u067e\u0631 \u06a9\u0648 \u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u062c\u0646\u0631\u06a9 \u0633\u06cc\u06a9\u0634\u0646 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af API (a <code>GET<\/code> \u06a9\u06d2 \u0633\u0627\u062a\u06be <code>?sections=<\/code> \u06cc\u0627 <code>?section_id=<\/code> \u06c1\u0631 \u0635\u0641\u062d\u06c1 \u06a9\u06d2 \u06cc\u0648 \u0622\u0631 \u0627\u06cc\u0644 \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2) \u0646\u0627\u0646 \u0634\u0627\u067e\u0646\u06af \u06a9\u0627\u0631\u0679 \u0627\u067e \u0688\u06cc\u0679\u0633 \u062c\u06cc\u0633\u06d2 \u0635\u0641\u062d\u06c1 \u0628\u0646\u062f\u06cc \u06a9\u06cc \u062a\u0644\u0627\u0634 \u06cc\u0627 \u0644\u0627\u0645\u062d\u062f\u0648\u062f \u0633\u06a9\u0631\u0648\u0644\u0646\u06af \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u06c1\u06cc \u062e\u06cc\u0627\u0644 \u06c1\u06d2\u06d4 Shopify \u06a9\u06cc \u0627\u067e\u0646\u06cc \u06c1\u062f\u0627\u06cc\u0627\u062a \u06cc\u06c1 \u06c1\u06cc\u06ba: \u0634\u0627\u067e\u0646\u06af \u06a9\u0627\u0631\u0679 \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644\u06cc \u06a9\u06d2 \u0646\u062a\u06cc\u062c\u06d2 \u0645\u06cc\u06ba \u06c1\u0648\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u06a9\u0633\u06cc \u0628\u06be\u06cc \u0622\u067e\u0631\u06cc\u0634\u0646 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0645\u06cc\u06ba \u0627\u0644\u06af \u06a9\u0627\u0644\u0648\u06ba \u067e\u0631 \u0628\u0646\u0688\u0644 \u0633\u06cc\u06a9\u0634\u0646\u0632 \u06a9\u0648 \u067e\u06cc\u0634 \u06a9\u0631\u0646\u06d2 \u06a9\u0648 \u062a\u0631\u062c\u06cc\u062d \u062f\u06cc\u062a\u0627 \u06c1\u0648\u06ba \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u0627\u0633 \u0633\u06d2 \u0631\u0627\u0624\u0646\u0688 \u0679\u0631\u067e \u06a9\u0627 \u0648\u0642\u062a \u0628\u0686\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u06cc\u06c1 \u06a9\u06be\u0644\u0648\u0646\u0627 \u067e\u06cc\u0679\u0631\u0646 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 Shopify \u06a9\u0627 \u0627\u067e\u0646\u0627 Horizon \u062a\u06be\u06cc\u0645 \u0628\u0627\u0644\u06a9\u0644 \u0627\u0633\u06cc \u0637\u0631\u062d \u06a9\u0627\u0631\u0679\u0633 \u0686\u0644\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u06a9\u0627\u0631\u0679 \u06a9\u0627 \u062c\u0632\u0648 \u06c1\u06d2\u06d4 <code>sections<\/code> \u0627\u0646 \u06a9\u06cc \u0641\u06c1\u0631\u0633\u062a \u0645\u06cc\u06ba <code>\/cart\/change.js<\/code> \u06a9\u0627\u0644 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u062f\u0648\u0628\u0627\u0631\u06c1 \u067e\u06cc\u0634 \u06a9\u0631\u06cc\u06ba\u06d4 <code>response.sections<\/code>\u0627\u0633\u06d2 \u06c1\u0627\u0631\u0688 \u06a9\u0648\u0688\u0646\u06af \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u06c1\u0645 \u0688\u06cc\u0679\u0627 \u0627\u0646\u062a\u0633\u0627\u0628 \u0633\u06d2 \u06c1\u0631 \u0633\u06cc\u06a9\u0634\u0646 \u06a9\u06cc ID \u067e\u0691\u06be\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0627\u0648\u067e\u0631 \u062f\u06cc\u06d2 \u06af\u0626\u06d2 \u0627\u0646\u062a\u0628\u0627\u06c1\u0627\u062a \u06a9\u0627 \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u0648\u0631\u0698\u0646 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0646\u06c1 \u0633\u0645\u062c\u06be\u06cc\u06ba \u06a9\u06c1 IDs \u0633\u0627\u062f\u06c1 \u06c1\u06cc\u06ba\u06d4 <code>cart-drawer<\/code>. \u0627\u0633 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u067e\u06cc\u0634 \u06a9\u0631\u062f\u06c1 \u0631\u06cc\u067e\u0631 \u0633\u06d2 \u067e\u0691\u06be\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-the-2026-upgrade-standard-storefront-events-and-actions\">2026 \u0627\u067e \u06af\u0631\u06cc\u0688: \u0645\u0639\u06cc\u0627\u0631\u06cc \u0627\u0633\u0679\u0648\u0631 \u0627\u06cc\u0648\u0646\u0679\u0633 \u0627\u0648\u0631 \u0627\u06cc\u06a9\u0634\u0646<\/h2>\n<p>\u0645\u0630\u06a9\u0648\u0631\u06c1 \u0628\u0627\u0644\u0627 \u062a\u0645\u0627\u0645 \u0686\u06cc\u0632\u06cc\u06ba Shopify \u06a9\u0648 \u0644\u0627\u0632\u0648\u0627\u0644 \u0628\u0646\u0627\u062a\u06cc \u06c1\u06cc\u06ba\u06d4 \u0627\u0628 \u0646\u0626\u06d2 \u062d\u0635\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u06d4<\/p>\n<p>17 \u062c\u0648\u0646 2026 \u06a9\u0648\u060c Shopify \u0646\u06d2 \u0627\u0633\u067e\u0631\u0646\u06af &#8217;26 \u0627\u06cc\u0688\u06cc\u0634\u0646 \u06a9\u06d2 \u062d\u0635\u06d2 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0645\u0639\u06cc\u0627\u0631\u06cc \u0627\u0633\u0679\u0648\u0631 \u0627\u06cc\u0648\u0646\u0679\u0633 \u0627\u0648\u0631 \u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc\u0627\u06ba \u0634\u0631\u0648\u0639 \u06a9\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0628 \u0639\u0627\u0645 \u0637\u0648\u0631 \u067e\u0631 \u062f\u0633\u062a\u06cc\u0627\u0628 \u06c1\u06d2\u06d4<\/p>\n<p>\u0622\u0626\u06cc\u0688\u06cc\u0627\u0632 \u0627\u0628 \u062a\u06be\u06cc\u0645\u0632 \u06c1\u06cc\u06ba\u06d4 <strong>\u0627\u062e\u0631\u0627\u062c<\/strong> DOM \u0627\u06cc\u0648\u0646\u0679\u0633 \u06a9\u0627 \u0627\u06cc\u06a9 \u0645\u0639\u06cc\u0627\u0631\u06cc \u0633\u06cc\u0679\u060c \u0633\u0628\u06be\u06cc \u06a9\u0627 \u0646\u0627\u0645 \u0627\u06cc\u06a9 \u0646\u0627\u0645 \u06a9\u06cc \u062c\u06af\u06c1 \u0645\u06cc\u06ba \u0631\u06a9\u06be\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4 <code>shopify:<\/code>) \u0627\u0648\u0631 <strong>\u0628\u06d2 \u0646\u0642\u0627\u0628<\/strong> \u06a9\u0627\u0645\u0648\u06ba \u06a9\u0627 \u0627\u06cc\u06a9 \u0645\u0639\u06cc\u0627\u0631\u06cc \u0633\u06cc\u0679 <code>Shopify.actions<\/code>. \u0622\u067e \u06a9\u06cc \u0627\u06cc\u067e \u06cc\u0627 AI \u0634\u0627\u067e\u0646\u06af \u0627\u06cc\u062c\u0646\u0679 \u0627\u0628 \u06c1\u0631 \u062a\u06be\u06cc\u0645 \u06a9\u06cc \u0646\u062c\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u0648 \u0631\u06cc\u0648\u0631\u0633 \u0627\u0646\u062c\u06cc\u0646\u0626\u0631\u0646\u06af \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0627\u06cc\u06a9 \u0645\u0639\u0627\u06c1\u062f\u06d2 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0622\u067e \u06a9\u06d2 \u062a\u0645\u0627\u0645 \u0627\u0633\u0679\u0648\u0631\u0632 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0628\u0627\u062a \u0686\u06cc\u062a \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u06cc\u06c1 \u0633\u0645\u062c\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u06c1 \u06cc\u06c1 \u06a9\u06cc\u0648\u06ba \u0636\u0631\u0648\u0631\u06cc \u06c1\u06d2\u060c \u0627\u0633 \u0628\u0627\u062a \u067e\u0631 \u063a\u0648\u0631 \u06a9\u0631\u06cc\u06ba \u06a9\u06c1 \u06a9\u0633 \u0637\u0631\u062d \u0627\u06cc\u06a9 upsell \u0627\u06cc\u067e \u06a9\u0648 \u062a\u06be\u06cc\u0645\u0632 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0627\u0631\u0679 \u0645\u06cc\u06ba \u0627\u0636\u0627\u0641\u06d2 \u06a9\u0627 \u067e\u062a\u06c1 \u0644\u06af\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u062c\u0648 \u0627\u0633 \u0646\u06d2 \u067e\u06c1\u0644\u06d2 \u06a9\u0628\u06be\u06cc \u0646\u06c1\u06cc\u06ba \u062f\u06cc\u06a9\u06be\u0627 \u062a\u06be\u0627\u06d4<\/p>\n<p>\u0686\u0627\u0631 \u0628\u0631\u06d2 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a \u062a\u06be\u06d2: \u0628\u0646\u062f\u0631 \u067e\u06cc\u0686\u06d4 <code>fetch<\/code> \u0641\u0648\u0646 \u0633\u0648\u0646\u06af\u06be\u0648 <code>\/cart\/add<\/code>\u06c1\u0631 \u062a\u06be\u06cc\u0645 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u062e\u062a\u0644\u0641 \u0646\u0627\u0645\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u0627\u06cc\u0648\u0646\u0679\u0633 \u062d\u0627\u0635\u0644 \u06a9\u0631\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0633\u0631\u0648\u06d2 \u06a9\u0631\u06cc\u06ba\u06d4 <code>\/cart.js<\/code> \u0633\u0644\u06cc\u06a9\u0679\u0631 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u0627\u0631\u0679 \u06a9\u0627\u0624\u0646\u0679 \u0646\u0648\u0688\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2 DOM \u06a9\u0627 \u0645\u0648\u0627\u0632\u0646\u06c1 \u06cc\u0627 \u0633\u06a9\u0631\u06cc\u067e \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0679\u0627\u0626\u0645\u0631 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0633\u0628 \u0679\u0648\u0679 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0628 \u06a9\u0648\u0626\u06cc \u062a\u0627\u062c\u0631 \u0627\u0646\u06c1\u06cc\u06ba \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u06be\u0627\u0644\u062a\u0627 \u06c1\u06d2 \u06cc\u0627 \u062a\u06be\u06cc\u0645\u0632 \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u06cc\u06c1 \u0648\u06c1\u06cc \u06a9\u0648\u0688 \u0628\u06be\u06cc \u06c1\u06d2 \u062c\u0648 AI \u0645\u0639\u0627\u0648\u0646\u06cc\u0646 \u0627\u0633 \u0648\u0642\u062a \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0628 \u0622\u067e \u0627\u0646\u06c1\u06cc\u06ba &quot;\u06a9\u0627\u0631\u0679 \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f \u06a9\u0686\u06be \u06a9\u0631\u0646\u06d2&#8221; \u06a9\u0648 \u06a9\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u0633 \u06a9\u06cc \u0648\u062c\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u06a9\u0645\u0632\u0648\u0631 \u067e\u06cc\u0679\u0631\u0646 \u062a\u0631\u0628\u06cc\u062a\u06cc \u0688\u06cc\u0679\u0627 \u067e\u0631 \u062d\u0627\u0648\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0645\u0633\u0626\u0644\u06c1 \u06a9\u0628\u06be\u06cc \u0628\u06be\u06cc \u0688\u0648\u06cc\u0644\u067e\u0631 \u06a9\u06cc \u0644\u0627\u067e\u0631\u0648\u0627\u06c1\u06cc \u06a9\u0627 \u0646\u06c1\u06cc\u06ba \u062a\u06be\u0627\u06d4 \u0646\u0634\u0627\u0646\u06c1 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0648\u0626\u06cc \u0645\u0633\u062a\u062d\u06a9\u0645 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u0646\u06c1\u06cc\u06ba \u062a\u06be\u0627\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1783151963_801_Shopify-\u0645\u06cc\u06ba-AJAX-\u06a9\u0627\u0631\u0679-\u062f\u0631\u0627\u0632-\u06a9\u06cc\u0633\u06d2-\u0628\u0646\u0627\u06cc\u0627-\u062c\u0627\u0626\u06d2-2026-\u0637\u0631\u06cc\u0642\u06c1.png\" alt=\"\u0628\u0627\u0626\u06cc\u06ba \u0637\u0631\u0641\u060c \u06c1\u0645 \u0686\u0627\u0631 \u06a9\u0645\u0632\u0648\u0631 \u0637\u0631\u06cc\u0642\u06d2 \u062f\u06a9\u06be\u0627\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0648 \u0627\u06cc\u067e \u06a9\u0627\u0631\u0679 \u06a9\u06cc \u062a\u0628\u062f\u06cc\u0644\u06cc\u0648\u06ba \u06a9\u0627 \u067e\u062a\u06c1 \u0644\u06af\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06cc \u06c1\u06d2: \u067e\u06cc\u0686 \u06a9\u0648 \u0628\u0627\u0632\u06cc\u0627\u0641\u062a \u06a9\u0631\u0646\u0627\u060c \u062a\u06be\u06cc\u0645 \u0633\u06d2 \u0645\u062a\u0639\u0644\u0642 \u0648\u0627\u0642\u0639\u0627\u062a \u06a9\u0648 \u0633\u0646\u0646\u0627\u060c cart.js \u067e\u0648\u0644\u0646\u06af\u060c \u0627\u0648\u0631 DOM \u0633\u06a9\u0631\u06cc\u067e\u0646\u06af\u06d4 \u062f\u0627\u0626\u06cc\u06ba \u0637\u0631\u0641 \u0627\u06cc\u06a9 \u0645\u0639\u06cc\u0627\u0631\u06cc \u0645\u0639\u0627\u06c1\u062f\u06c1 \u06c1\u06d2\u06d4 Shopify:cart:lines-update \u06a9\u0648 \u0633\u0628\u0633\u06a9\u0631\u0627\u0626\u0628 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 Shopify.actions \u06a9\u0648 \u06a9\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4\" style=\"display:block;margin:0 auto\" width=\"3666\" height=\"2062\" loading=\"lazy\" title=\"\"><\/p>\n<p><em>\u0686\u0627\u0631 \u06a9\u0645\u0632\u0648\u0631 \u0645\u0648\u0636\u0648\u0639\u0627\u062a\u06cc \u062a\u062f\u0628\u06cc\u0631\u06cc\u06ba \u0627\u0646 \u0645\u0639\u0627\u06c1\u062f\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0627\u062a\u062d\u0627\u062f \u0645\u06cc\u06ba \u0633\u0645\u0679 \u062c\u0627\u062a\u06cc \u06c1\u06cc\u06ba \u062c\u0648 \u0631\u06cc\u0633\u06a9\u0646 \u0633\u06d2 \u0628\u0686 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/em><\/p>\n<p>\u0627\u06c1\u0645 \u0637\u0648\u0631 \u067e\u0631\u060c \u06cc\u06c1 \u067e\u0631\u062a <strong>\u0627\u0648\u067e\u0631<\/strong> \u062f\u0631\u0627\u0632 \u062c\u0648 \u0645\u06cc\u06ba \u0646\u06d2 \u0627\u0628\u06be\u06cc \u0628\u0646\u0627\u06cc\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0627\u06cc\u062c\u06cc\u06a9\u0633 API \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u0627\u06cc\u06a9 \u06c1\u06cc \u0645\u0648\u0627\u062f \u067e\u0631 \u0645\u0634\u062a\u0645\u0644 \u062a\u06be\u06cc\u0645 \u0633\u0627\u0626\u06cc\u0688 \u0627\u06cc\u0648\u0646\u0679\u0633 \u06a9\u0648 \u0628\u06be\u06cc \u062f\u06a9\u06be\u0627\u062a\u06cc \u06c1\u06d2\u06d4 <code>\/cart\/add.js<\/code> \u0627\u0648\u0631 <code>\/cart.js<\/code> \u0645\u06cc\u06ba \u0646\u06d2 \u0627\u06cc\u06a9 \u06a9\u0627\u0644 \u06a9\u06cc \u0627\u0648\u0631 Shopify \u0646\u06d2 \u0627\u06cc\u06a9 \u0627\u0633\u0633\u0679\u0646\u0679 \u06a9\u0648 \u0628\u06be\u06cc\u062c\u0627 \u062c\u0633 \u06a9\u0627 \u0648\u0627\u062d\u062f \u06a9\u0627\u0645 \u06a9\u0627\u0644 \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u0627 \u062a\u06be\u0627\u06d4 <code>\/cart.js<\/code> \u0627\u06cc\u0648\u0646\u0679 \u06a9\u06d2 \u067e\u06d2 \u0644\u0648\u0688 \u06a9\u06cc \u0642\u0633\u0645 \u06a9\u0627 \u062c\u0648\u0627\u0628 \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4 \u062a\u0648 \u0622\u067e \u06a9\u0627 \u06a9\u0648\u0626\u06cc \u0628\u06be\u06cc \u06a9\u0627\u0645 \u0631\u0627\u0626\u06cc\u06af\u0627\u06ba \u0646\u06c1\u06cc\u06ba \u062c\u0627\u062a\u0627\u06d4 \u0622\u067e \u0627\u06cc\u06a9 \u06a9\u06be\u0644\u0627 \u0628\u06cc\u0627\u0646 \u062f\u06cc\u0646\u06d2 \u06a9\u06cc \u06a9\u0648\u0634\u0634 \u06a9\u0631 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-the-events-the-theme-tells-the-world-what-happened\">\u0648\u0627\u0642\u0639\u06c1: \u062a\u06be\u06cc\u0645 \u062f\u0646\u06cc\u0627 \u06a9\u0648 \u0628\u062a\u0627\u062a\u06cc \u06c1\u06d2 \u06a9\u06c1 \u06a9\u06cc\u0627 \u06c1\u0648\u0627\u06d4<\/h3>\n<p>\u06c1\u0631 \u0648\u0627\u0642\u0639\u06c1 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2: <code>shopify:<\/code> \u0646\u0627\u0645 \u06a9\u06cc \u062c\u06af\u06c1\u06cc\u06ba \u06c1\u06cc\u06ba: <code>category:action<\/code> \u0633\u0628 \u0633\u06d2 \u0645\u062e\u0635\u0648\u0635 \u0639\u0646\u0627\u0635\u0631 (\u067e\u0631\u0648\u0688\u06a9\u0679 \u06a9\u0627\u0631\u0688\u0632\u060c \u0634\u0627\u067e\u0646\u06af \u06a9\u0627\u0631\u0679\u0633\u060c \u06a9\u0644\u06cc\u06a9\u0634\u0646 \u06a9\u0646\u0679\u06cc\u0646\u0631\u0632) \u0633\u06d2 \u0646\u0627\u0645 \u062f\u06cc\u0646\u06d2 \u06a9\u06d2 \u067e\u06cc\u0679\u0631\u0646\u060c \u067e\u0627\u0633\u0632 \u0627\u0648\u0631 \u0628\u0644\u0628\u0644\u06d2 <code>document<\/code>. \u067e\u06d2 \u0644\u0648\u0688 CamelCase \u0641\u06cc\u0644\u0688 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u0633\u0679\u0648\u0631 \u0641\u0631\u0646\u0679 \u06af\u0631\u0627\u0641 \u06a9\u06cc\u0648 \u0627\u06cc\u0644 API \u06a9\u06cc \u0634\u06a9\u0644 \u0627\u062e\u062a\u06cc\u0627\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<table>\n<thead>\n<tr>\n<th>\u0648\u0627\u0642\u0639\u06c1<\/th>\n<th>\u06cc\u06c1 \u0645\u0646\u062f\u0631\u062c\u06c1 \u0630\u06cc\u0644 \u0635\u0648\u0631\u062a\u0648\u06ba \u0645\u06cc\u06ba \u06c1\u0648\u062a\u0627 \u06c1\u06d2:<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>shopify:page:view<\/code><\/td>\n<td>\u06c1\u0631 \u0628\u0627\u0631 \u062c\u0628 \u0635\u0641\u062d\u06c1 \u0644\u0648\u0688 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/td>\n<\/tr>\n<tr>\n<td><code>shopify:product:view<\/code><\/td>\n<td>\u0622\u067e \u06a9\u0627 \u067e\u0631\u0648\u0688\u06a9\u0679 \u0646\u0645\u0627\u06cc\u0627\u06ba \u06c1\u0648\u06af\u0627\u06d4<\/td>\n<\/tr>\n<tr>\n<td><code>shopify:product:select<\/code><\/td>\n<td>\u062e\u0631\u06cc\u062f\u0627\u0631 \u0645\u062e\u062a\u0644\u0641 \u0642\u0633\u0645 \u06a9\u06d2 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/td>\n<\/tr>\n<tr>\n<td><code>shopify:cart:view<\/code><\/td>\n<td>\u0622\u067e \u0634\u0627\u067e\u0646\u06af \u06a9\u0627\u0631\u0679 \u062f\u06cc\u06a9\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/td>\n<\/tr>\n<tr>\n<td><code>shopify:cart:lines-update<\/code><\/td>\n<td>\u06a9\u0627\u0631\u0679 \u0644\u0627\u0626\u0646\u06cc\u06ba \u0634\u0627\u0645\u0644\u060c \u0627\u067e \u0688\u06cc\u0679\u060c \u06cc\u0627 \u06c1\u0679\u0627 \u062f\u06cc \u06af\u0626\u06cc \u06c1\u06cc\u06ba\u06d4<\/td>\n<\/tr>\n<tr>\n<td><code>shopify:cart:note-update<\/code><\/td>\n<td>\u0634\u0627\u067e\u0646\u06af \u06a9\u0627\u0631\u0679 \u0646\u0648\u0679 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/td>\n<\/tr>\n<tr>\n<td><code>shopify:cart:discount-update<\/code><\/td>\n<td>\u0688\u0633\u06a9\u0627\u0624\u0646\u0679 \u06a9\u0648\u0688 \u0644\u0627\u06af\u0648 \u06cc\u0627 \u062d\u0630\u0641 \u06a9\u0631 \u062f\u06cc\u0627 \u06af\u06cc\u0627\u06d4<\/td>\n<\/tr>\n<tr>\n<td><code>shopify:cart:error<\/code><\/td>\n<td>\u06a9\u0627\u0631\u0679 \u06a9\u06cc \u062a\u0628\u062f\u06cc\u0644\u06cc \u0646\u0627\u06a9\u0627\u0645 \u06c1\u0648 \u062c\u0627\u062a\u06cc \u06c1\u06d2\u06d4<\/td>\n<\/tr>\n<tr>\n<td><code>shopify:collection:view<\/code><\/td>\n<td>\u0645\u062c\u0645\u0648\u0639\u06c1 \u06a9\u0627 \u0635\u0641\u062d\u06c1 \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba\u06d4<\/td>\n<\/tr>\n<tr>\n<td><code>shopify:collection:update<\/code><\/td>\n<td>\u062c\u0645\u0639 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0641\u0644\u0679\u0631\u0632 \u06cc\u0627 \u0686\u06be\u0627\u0646\u0679\u06cc \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/td>\n<\/tr>\n<tr>\n<td><code>shopify:search:update<\/code><\/td>\n<td>\u062a\u0644\u0627\u0634 \u06a9\u0627 \u0641\u0644\u0679\u0631 \u06cc\u0627 \u062a\u0631\u062a\u06cc\u0628 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u0627\u06cc\u067e\u0633 \u0628\u0627\u0642\u0627\u0639\u062f\u06c1 DOM API \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06a9\u06d2 \u0633\u0628\u0633\u06a9\u0631\u0627\u0626\u0628 \u06a9\u0631\u062a\u06cc \u06c1\u06cc\u06ba\u06d4 \u06a9\u0648\u0626\u06cc SDK \u0646\u06c1\u06cc\u06ba:<\/p>\n<pre><code class=\"language-javascript\">document.addEventListener('shopify:cart:lines-update', (event) => {\n  console.log(event.action, event.lines);\n  event.promise?.then(({ cart }) => {\n    console.log(cart.cost.totalAmount.amount);\n  });\n});\n<\/code><\/pre>\n<p>\u0634\u0627\u067e\u0646\u06af \u06a9\u0627\u0631\u0679\u060c \u0645\u06cc\u0645\u0648\u060c \u0688\u0633\u06a9\u0627\u0624\u0646\u0679\u060c \u067e\u0631\u0648\u0688\u06a9\u0679 \u06a9\u0627 \u0627\u0646\u062a\u062e\u0627\u0628\u060c \u06a9\u0644\u06cc\u06a9\u0634\u0646 \u0627\u067e \u0688\u06cc\u0679\u060c \u0627\u0648\u0631 \u0633\u0631\u0686 \u0627\u067e \u0688\u06cc\u0679 \u0627\u06cc\u0648\u0646\u0679\u0633 \u0634\u0627\u0645\u0644 \u06c1\u06cc\u06ba\u06d4 <code>promise<\/code> \u063a\u06cc\u0631 \u0645\u0637\u0627\u0628\u0642\u062a \u067e\u0630\u06cc\u0631 \u0646\u062a\u06cc\u062c\u06c1 \u06a9\u06cc \u0641\u06cc\u0644\u0688\u06d4 \u0627\u0633 \u06a9\u06d2 \u0628\u0639\u062f \u0633\u0646\u0646\u06d2 \u0648\u0627\u0644\u0627 \u0641\u0648\u0631\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0644\u0648\u0688\u0646\u06af \u06cc\u0627 \u067e\u0631\u0627\u0645\u06cc\u062f \u062d\u06cc\u062b\u06cc\u062a \u0638\u0627\u06c1\u0631 \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u067e\u06be\u0631 \u062a\u0635\u062f\u06cc\u0642 \u0634\u062f\u06c1 \u0645\u0648\u0627\u062f \u06a9\u0648 \u067e\u0691\u06be \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4 <code>{ cart }<\/code> \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u062c\u0628 \u06a9\u0627\u0645 \u062d\u0644 \u06c1\u0648\u062c\u0627\u0626\u06d2<\/p>\n<h3 id=\"heading-emitting-an-event-from-your-theme\">\u0627\u067e\u0646\u06d2 \u062a\u06be\u06cc\u0645 \u0633\u06d2 \u0627\u06cc\u0648\u0646\u0679\u0633 \u0627\u06cc\u06a9\u0633\u067e\u0648\u0631\u0679 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n<p>\u0627\u06cc\u0648\u0646\u0679 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u06a9\u06cc \u0645\u06cc\u0632\u0628\u0627\u0646\u06cc Shopify CDN \u067e\u0631 \u06a9\u06cc \u06af\u0626\u06cc \u06c1\u06d2\u06d4 \u0627\u0633\u06d2 \u0627\u0645\u067e\u0648\u0631\u0679 \u0645\u06cc\u067e \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba (\u0645\u0627\u0688\u06cc\u0648\u0644\u0631 \u062a\u06be\u06cc\u0645\u0632 \u062c\u06cc\u0633\u06d2 \u06c1\u0648\u0631\u0627\u0626\u0632\u0646 \u06a9\u06d2 \u0644\u06cc\u06d2) \u06cc\u0627 \u0627\u0633\u06d2 \u0639\u0627\u0644\u0645\u06cc \u0633\u0637\u062d \u067e\u0631 \u062a\u0641\u0648\u06cc\u0636 \u06a9\u0631\u06cc\u06ba (\u0688\u0627\u0646 \u0627\u0633\u0679\u0627\u0626\u0644 \u062a\u06be\u06cc\u0645\u0632 \u06a9\u06d2 \u0644\u06cc\u06d2)\u06d4<\/p>\n<p>\u0627\u06cc\u06a9 \u062a\u06be\u06cc\u0645 \u0627\u06cc\u0648\u0646\u0679 \u06a9\u06cc \u06a9\u0644\u0627\u0633 \u0628\u0646\u0627 \u06a9\u0631 \u0627\u0648\u0631 \u06a9\u0627\u0644 \u06a9\u0631\u06a9\u06d2 \u0627\u06cc\u0648\u0646\u0679 \u06a9\u0648 \u0641\u0627\u0626\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 <code>dispatchEvent()<\/code>. \u0627\u06af\u0631 \u0622\u067e \u0627\u0633\u06d2 \u063a\u0648\u0631 \u0633\u06d2 \u067e\u0691\u06be\u06cc\u06ba \u062a\u0648 \u0622\u067e \u062f\u06cc\u06a9\u06be\u06cc\u06ba \u06af\u06d2 \u06a9\u06c1 \u0645\u0648\u0627\u062f \u0627\u06cc\u06a9 \u062c\u06cc\u0633\u0627 \u06c1\u06d2\u06d4 <code>\/cart\/add.js<\/code> \u0627\u0648\u0631 <code>\/cart.js<\/code> \u0645\u0631\u062d\u0644\u06c1 2 \u0645\u06cc\u06ba \u06a9\u0627\u0644\u06cc\u06ba:<\/p>\n<pre><code class=\"language-javascript\">import { CartLinesUpdateEvent, CartErrorEvent } from '@theme\/standard-events';\n\nconst deferred = CartLinesUpdateEvent.createPromise();\nelement.dispatchEvent(new CartLinesUpdateEvent({\n  action: 'add',\n  context: 'product',\n  lines: [{ merchandiseId: variantId, quantity: 1 }],\n  promise: deferred.promise,\n}));\n\ntry {\n  const response = await fetch(window.Shopify.routes.root + 'cart\/add.js', { method: 'POST', body, headers });\n  if (!response.ok) throw new Error('Add to cart failed');\n  const ajaxCart = await fetch(window.Shopify.routes.root + 'cart.js').then(r => r.json());\n  deferred.resolve({\n    cart: CartLinesUpdateEvent.createCartFromAjaxResponse(ajaxCart),\n  });\n} catch (e) {\n  element.dispatchEvent(new CartErrorEvent({ error: e.message, code: 'SERVICE_UNAVAILABLE' }));\n  deferred.reject(e);\n}\n<\/code><\/pre>\n<p>\u0648\u06c1 \u062e\u0627\u0645\u0648\u0634\u06cc <code>createCartFromAjaxResponse(ajaxCart)<\/code> \u06cc\u06c1 \u06a9\u0644\u0627\u0633\u06a9 \u0627\u06cc\u062c\u06cc\u06a9\u0633 \u062f\u0631\u0627\u0632 \u0627\u0648\u0631 \u0646\u0626\u06d2 \u0627\u06cc\u0648\u0646\u0679 \u06a9\u06d2 \u0645\u0639\u0627\u06c1\u062f\u0648\u06ba \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0627\u06cc\u06a9 \u067e\u0644 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u062a\u0645\u06c1\u0627\u0631\u0627 \u06c1\u06d2 <code>\/cart.js<\/code> \u0627\u06cc\u0648\u0646\u0679 \u0627\u06cc\u06a9 \u067e\u06d2 \u0644\u0648\u0688 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0633\u0679\u0648\u0631 \u0641\u0631\u0646\u0679 API \u06a9\u06cc \u0634\u06a9\u0644 \u0645\u06cc\u06ba \u062c\u0648\u0627\u0628 \u062f\u06cc\u062a\u0627 \u06c1\u06d2 \u062c\u0633 \u06a9\u06cc \u0627\u0633\u06d2 \u062a\u0648\u0642\u0639 \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0645\u0648\u062c\u0648\u062f \u06a9\u0648\u0626\u06cc \u0628\u06be\u06cc \u062f\u0631\u0627\u0632 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u0645\u0646\u0633\u0644\u06a9 \u06c1\u0648 \u062c\u0627\u0626\u06d2 \u06af\u0627\u06d4<\/p>\n<h3 id=\"heading-the-actions-the-world-asks-the-theme-to-do-something\">\u0639\u0645\u0644: \u062f\u0646\u06cc\u0627 \u0631\u0639\u0627\u06cc\u0627 \u0633\u06d2 \u06a9\u0686\u06be \u06a9\u0631\u0646\u06d2 \u06a9\u0648 \u06a9\u06c1\u062a\u06cc \u06c1\u06d2\u06d4<\/h3>\n<p>\u0679\u0627\u0633\u06a9\u0633 \u063a\u06cc\u0631 \u0645\u0637\u0627\u0628\u0642\u062a \u067e\u0630\u06cc\u0631 \u0627\u0641\u0639\u0627\u0644 \u06c1\u06cc\u06ba\u06d4 <code>Shopify.actions<\/code>\u0627\u0633 \u06a9\u06d2 \u0627\u067e\u0646\u06d2 \u0627\u0633\u06a9\u0631\u067e\u0679 \u0679\u06cc\u06af \u06a9\u06d2 \u0628\u063a\u06cc\u0631 \u062a\u0645\u0627\u0645 \u0645\u0627\u0626\u0639 \u0627\u0633\u0679\u0648\u0631\u0632 \u0645\u06cc\u06ba \u0627\u0646\u062c\u06a9\u0634\u0646 \u0644\u06af\u0627\u06cc\u0627 \u06af\u06cc\u0627\u06d4<\/p>\n<pre><code class=\"language-javascript\">\/\/ Add, update, or remove lines. Also handles note + discountCodes.\nconst { cart, userErrors, warnings } = await Shopify.actions.updateCart({\n  lines: [\n    { merchandiseId: \"gid:\/\/shopify\/ProductVariant\/123\", quantity: 1 }, \/\/ add\n    { id: \"gid:\/\/shopify\/CartLine\/456\", quantity: 5 },                  \/\/ update\n    { id: \"gid:\/\/shopify\/CartLine\/789\", quantity: 0 },                  \/\/ remove\n  ],\n});\n\/\/ Returns: Promise<{ cart, userErrors?, warnings? }>\n\nawait Shopify.actions.openCart();                 \/\/ Promise<void>\nconst { cart } = await Shopify.actions.getCart(); \/\/ reads current cart\n<\/void><\/code><\/pre>\n<p>\u0688\u06cc\u0641\u0627\u0644\u0679\u0633 \u0627\u0633\u0679\u0627\u06a9 \u062a\u06be\u06cc\u0645 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0628\u063a\u06cc\u0631 \u06a9\u0633\u06cc \u062a\u0628\u062f\u06cc\u0644\u06cc \u06a9\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u06cc\u06ba \u06af\u06d2\u06d4 <code>updateCart<\/code> \u0627\u0633\u0679\u0648\u0631 \u0641\u0631\u0646\u0679 API \u06a9\u0648 \u0644\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u060c \u062c\u06af\u06c1 \u067e\u0631 \u062a\u0627\u0632\u06c1 \u06c1\u0648\u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u067e\u0648\u0631\u06d2 \u0635\u0641\u062d\u06c1 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0644\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u067e\u0631 \u0648\u0627\u067e\u0633 \u0622\u062a\u0627 \u06c1\u06d2\u06d4 <code>openCart<\/code> \u06a9\u06be\u0648\u0644\u06cc\u06ba\u06d4 <code><cart-drawer-component\/><\/code> \u06cc\u0627 <code><cart-drawer\/><\/code> \u0627\u06af\u0631 \u0639\u0646\u0635\u0631 \u0645\u0648\u062c\u0648\u062f \u06c1\u06d2\u060c \u062a\u0648 \u0627\u0633\u06d2 \u0631\u06cc \u0688\u0627\u0626\u0631\u06cc\u06a9\u0679 \u06a9\u0631\u06d2 \u06af\u0627: <code>\/cart<\/code>. <code>getCart<\/code> \u0645\u0648\u062c\u0648\u062f\u06c1 \u06a9\u0627\u0631\u0679 \u067e\u0691\u06be\u06cc\u06ba\u06d4 \u0627\u0648\u0631 \u0627\u06af\u0631 \u062a\u0634\u06a9\u06cc\u0644 \u0634\u062f\u06c1 \u06a9\u0627\u0645 \u06a9\u0627\u0645\u06cc\u0627\u0628 \u06c1\u0648 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u062a\u0648 \u0631\u0646 \u0679\u0627\u0626\u0645 <strong>\u062e\u0648\u062f \u06a9\u0627\u0631 \u0637\u0631\u06cc\u0642\u06d2 \u0633\u06d2 \u0631\u06c1\u0627\u0626\u06cc<\/strong> \u0627\u06cc\u067e \u06a9\u0627\u0644\u0646\u06af \u0645\u06cc\u0686\u0646\u06af \u0627\u06cc\u0648\u0646\u0679 <code>updateCart<\/code> \u0628\u06be\u06cc\u062c\u0646\u06d2 \u06a9\u06cc \u0628\u0627\u0644\u06a9\u0644 \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 <code>shopify:cart:lines-update<\/code>.<\/p>\n<h3 id=\"heading-overriding-an-action-to-drive-your-drawer\">\u062f\u0631\u0627\u0632\u0648\u06ba \u06a9\u0648 \u0686\u0644\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0622\u067e\u0631\u06cc\u0634\u0646 \u06a9\u0648 \u0627\u0648\u0648\u0631 \u0631\u0627\u0626\u0688 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n<p>\u06cc\u06c1 \u0627\u0646\u0639\u0627\u0645 \u06c1\u06d2\u06d4 \u062a\u06be\u06cc\u0645\u0632 \u0627\u0639\u0645\u0627\u0644 \u06a9\u06d2 \u0644\u06cc\u06d2 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0637\u06d2 \u0634\u062f\u06c1 \u0627\u0642\u062f\u0627\u0631 \u06a9\u0648 \u0627\u0648\u0648\u0631 \u0631\u0627\u0626\u06cc\u0688 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u0645\u062f\u0627\u062e\u0644\u062a \u0645\u0645\u06a9\u0646 \u06c1\u06d2\u06d4 <code>openCart<\/code> \u0627\u0648\u0631 <code>updateCart<\/code> \u0635\u0641\u062d\u06c1 \u06a9\u06cc \u062a\u0627\u0632\u06c1 \u06a9\u0627\u0631\u06cc \u06a9\u0648 \u0645\u062a\u062d\u0631\u06a9 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u0622\u067e \u06a9\u06cc \u0627\u06cc\u067e \u06a9\u06cc \u062a\u0645\u0627\u0645 \u06a9\u0627\u0644\u0632 \u0627\u0633 \u062f\u0631\u0627\u0632 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0631\u0648\u0679 \u06a9\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06cc\u06ba \u062c\u0648 \u0622\u067e \u0646\u06d2 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0628\u0646\u0627\u06cc\u0627 \u06c1\u0648\u0627 \u06c1\u06d2\u06d4 \u0627\u06cc\u067e \u06a9\u0648 \u0645\u0627\u0631\u06a9 \u0627\u067e \u062c\u0627\u0646\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0645\u0639\u06cc\u0627\u0631\u06cc \u0622\u067e\u0631\u06cc\u0634\u0646\u0632 \u06a9\u0648 \u06a9\u0627\u0644 \u06a9\u0631\u0646\u0627 \u0627\u0648\u0631 \u0627\u0646 \u06a9\u0648 \u0627\u0648\u0648\u0631 \u0631\u0627\u0626\u06cc\u0688 \u06a9\u0631\u0646\u0627 UI \u06a9\u06cc \u0641\u0639\u0627\u0644\u06cc\u062a \u06a9\u0627 \u062a\u0639\u06cc\u0646 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u067e\u0646\u06d2 \u0627\u0648\u0648\u0631 \u0631\u0627\u0626\u06cc\u0688 \u06a9\u0648 \u0627\u0646\u062f\u0631 \u0631\u062c\u0633\u0679\u0631 \u06a9\u0631\u06cc\u06ba: <code>DOMContentLoaded<\/code> \u0633\u0646\u0646\u06d2 \u0648\u0627\u0644\u0627 \u0631\u06a9\u06be\u0627 <strong>\u067e\u0631<\/strong> <code>{{ content_for_header }}<\/code>    \u0644\u06d2 \u0622\u0624\u0679 \u0627\u06cc\u067e \u06a9\u0648\u0688 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0686\u0644\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">document.addEventListener('DOMContentLoaded', () => {\n  Shopify.actions.updateCart.configure({\n    eventTarget: (meta) => {\n      if (meta.type === 'shopify:cart:note-update') return document.querySelector('cart-note');\n      if (meta.type === 'shopify:cart:discount-update') return document.querySelector('cart-discount');\n      if (meta.type === 'shopify:cart:lines-update' && meta.action === 'add') {\n        return document.querySelector('product-form');\n      }\n      return document.querySelector('cart-items');\n    },\n    async handler(defaultHandler, payload, options) {\n      const result = await defaultHandler();\n      customUpdateUI(result); \/\/ your render() + openDrawer() from earlier\n      return result;\n    },\n  });\n});\n<\/code><\/pre>\n<p><code>openCart<\/code>    \u0627\u06cc\u06a9 \u0622\u0633\u0627\u0646 \u0627\u0648\u0648\u0631 \u0631\u0627\u0626\u0688 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-javascript\">Shopify.actions.openCart.configure({\n  handler() { document.querySelector('cart-drawer')?.open(); },\n});\n<\/code><\/pre>\n<p>\u0622\u067e \u06a9\u0627 \u0648\u0642\u062a \u0628\u0686\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0686\u0646\u062f \u0627\u0635\u0648\u0644:<\/p>\n<ul>\n<li>\n<p><code>eventTarget<\/code>    \u06a9\u06d2 \u0644\u0626\u06d2 \u0636\u0631\u0648\u0631\u06cc \u06c1\u06d2 <code>updateCart<\/code>. \u0627\u0633 \u0628\u0627\u062a \u06a9\u0627 \u062a\u0639\u06cc\u0646 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0622\u0679\u0648 \u0627\u06cc\u0645\u06cc\u0634\u0646 \u0627\u06cc\u0648\u0646\u0679 \u06a9\u0648 \u06a9\u0633 \u0639\u0646\u0635\u0631 \u06a9\u0648 \u0628\u06be\u06cc\u062c\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><code>getCart<\/code>    \u062c\u0627\u0646 \u0628\u0648\u062c\u06be \u06a9\u0631 <strong>~ \u0646\u06c1\u06cc\u06ba<\/strong> \u0642\u0627\u0628\u0644 \u062a\u0631\u062a\u06cc\u0628\u06d4 \u06a9\u0627\u0644 \u06a9\u0631\u0646\u0627 <code>configure()<\/code> \u0679\u0627\u0626\u067e \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u06cc \u062e\u0631\u0627\u0628\u06cc\u0627\u06ba \u0627\u0648\u0631 \u0631\u0646 \u0679\u0627\u0626\u0645 \u06a9\u06cc \u062e\u0631\u0627\u0628\u06cc\u0627\u06ba \u06c1\u06cc\u06ba\u06d4 <code>TypeError<\/code>.<\/p>\n<\/li>\n<li>\n<p><code>isDefault()<\/code>    \u06cc\u06c1 \u0622\u067e \u06a9\u0648 \u0628\u062a\u0627\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0622\u06cc\u0627 \u062a\u06be\u06cc\u0645 \u0646\u06d2 \u0627\u0628\u06be\u06cc \u062a\u06a9 \u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc \u06a9\u0648 \u0627\u0648\u0648\u0631 \u0631\u0627\u0626\u0688 \u06a9\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><code>updateCart<\/code>    \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062d\u0644 \u06a9\u0631\u06cc\u06ba <code>{ cart, userErrors?, warnings?, detail? }<\/code> \u0627\u0633\u06d2 \u0635\u0631\u0641 \u062a\u0628 \u06c1\u06cc \u0645\u0633\u062a\u0631\u062f \u06a9\u06cc\u0627 \u062c\u0627\u0626\u06d2 \u06af\u0627 \u062c\u0628 \u06cc\u06c1 \u0628\u0627\u0644\u06a9\u0644 \u0646\u06c1\u06cc\u06ba \u0686\u0644 \u0633\u06a9\u062a\u0627 (\u0646\u06cc\u0679 \u0648\u0631\u06a9 \u06a9\u06cc \u062e\u0631\u0627\u0628\u06cc \u06cc\u0627 \u063a\u0644\u0637 \u067e\u06d2 \u0644\u0648\u0688)\u06d4 \u06a9\u0648\u0626\u06cc \u0631\u0627\u0633\u062a\u06c1 \u0646\u06c1\u06cc\u06ba <code>userErrors<\/code> \u062a\u0631\u062a\u06cc\u0628 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0627\u062a\u067e\u0631\u06cc\u0648\u0631\u062a\u0646 \u06a9\u0648 \u0645\u0633\u062a\u0631\u062f \u06a9\u0631 \u062f\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u060c \u062c\u06cc\u0633\u06d2 <code>INVALID<\/code>, <code>MAXIMUM_EXCEEDED<\/code>)\u06d4 \u06a9\u0648\u0626\u06cc \u0631\u0627\u0633\u062a\u06c1 \u0646\u06c1\u06cc\u06ba <code>warnings<\/code> \u062a\u0631\u062a\u06cc\u0628 \u0645\u06cc\u06ba \u0627\u062d\u062a\u06cc\u0627\u0637 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2 (<code>MERCHANDISE_OUT_OF_STOCK<\/code>, <code>DISCOUNT_NOT_FOUND<\/code>)\u06d4 \u0627\u0639\u062a\u0645\u0627\u062f \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u062f\u0648\u0646\u0648\u06ba \u06a9\u0648 \u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba\u06d4 <code>cart<\/code>.<\/p>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1783151963_394_Shopify-\u0645\u06cc\u06ba-AJAX-\u06a9\u0627\u0631\u0679-\u062f\u0631\u0627\u0632-\u06a9\u06cc\u0633\u06d2-\u0628\u0646\u0627\u06cc\u0627-\u062c\u0627\u0626\u06d2-2026-\u0637\u0631\u06cc\u0642\u06c1.png\" alt=\"\u0622\u067e \u06a9\u06cc \u0627\u06cc\u067e \u06cc\u0627 AI \u0627\u06cc\u062c\u0646\u0679 \u0627\u06cc\u06a9 \u0645\u0639\u06cc\u0627\u0631\u06cc \u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc \u06a9\u0648 \u06a9\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u062a\u06be\u06cc\u0645 \u0627\u0633\u06d2 \u0622\u067e \u06a9\u06cc \u0645\u0648\u062c\u0648\u062f\u06c1 \u06a9\u0627\u0631\u0679 \u062f\u0631\u0627\u0632 \u0645\u0646\u0637\u0642 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0631\u0648\u0679 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u060c \u0627\u0648\u0631 \u062f\u0631\u0627\u0632 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0644\u0648\u0688 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06a9\u06d2 \u0628\u063a\u06cc\u0631 \u0627\u067e\u0646\u06cc \u062c\u06af\u06c1 \u067e\u0631 \u06a9\u06be\u0644 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4\" style=\"display:block;margin:0 auto\" width=\"3666\" height=\"2062\" loading=\"lazy\" title=\"\"><\/p>\n<p><em>\u0627\u06cc\u067e \u0645\u0639\u06cc\u0627\u0631\u06cc \u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc\u0648\u06ba \u06a9\u0648 \u06a9\u0627\u0644 \u06a9\u0631\u062a\u06cc \u06c1\u06d2 \u0627\u0648\u0631 \u0645\u0627\u0631\u06a9 \u0627\u067e \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u06a9\u0686\u06be \u0646\u06c1\u06cc\u06ba \u062c\u0627\u0646\u062a\u06cc \u06c1\u06d2\u06d4 \u0627\u0648\u0648\u0631 \u0631\u0627\u0626\u0688 UI \u06a9\u0627 \u062a\u0639\u06cc\u0646 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/em><\/p>\n<h3 id=\"heading-verifying-it\">\u0686\u06cc\u06a9 \u06a9\u0631 \u0631\u06c1\u0627 \u06c1\u06d2\u06d4<\/h3>\n<p>\u0686\u0644\u0627\u0626\u06cc\u06ba <code>shopify theme dev<\/code> CLI \u0627\u06cc\u0648\u0646\u0679 \u06a9\u06d2 \u0631\u0646 \u0679\u0627\u0626\u0645 \u06a9\u06cc \u0627\u06cc\u06a9 \u0688\u06cc\u0648\u0644\u067e\u0645\u0646\u0679 \u0628\u0644\u0688 \u0644\u0648\u0688 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u062c\u0648 \u067e\u06d2 \u0644\u0648\u0688 \u06a9\u06cc \u062a\u0648\u062b\u06cc\u0642 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u06af\u0631 \u0641\u06cc\u0644\u0688\u0632 \u062e\u0631\u0627\u0628 \u06cc\u0627 \u063a\u0627\u0626\u0628 \u06c1\u06cc\u06ba \u062a\u0648 \u0627\u0646\u062a\u0628\u0627\u06c1\u0627\u062a \u0644\u0627\u06af \u0627\u0646 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u06cc\u06c1 \u0686\u06cc\u06a9 \u067e\u06cc\u062f\u0627\u0648\u0627\u0631 \u06a9\u06d2 \u062f\u0648\u0631\u0627\u0646 \u06c1\u0679\u0627 \u062f\u06cc\u06d2 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u0636\u0627\u0641\u06c1 <code>--standard-events-inspector<\/code> \u062f\u0648 \u0679\u06cc\u0628\u0632 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0645\u0642\u0627\u0645\u06cc \u0635\u0641\u062d\u06c1 \u0645\u06cc\u06ba \u0641\u0644\u0648\u0679\u0646\u06af \u0688\u06cc\u0628\u06af \u067e\u06cc\u0646\u0644 \u06a9\u0648 \u062c\u06be\u0646\u0688\u0627 \u0644\u06af\u0627\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u062f\u0627\u062e\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 <strong>\u0648\u0627\u0642\u0639\u06c1<\/strong>\u062a\u0645\u0627\u0645 \u062e\u0627\u0631\u062c \u06c1\u0648\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0645\u0639\u06cc\u0627\u0631\u06cc \u0648\u0627\u0642\u0639\u0627\u062a \u06a9\u0648 \u0627\u0646 \u06a9\u06d2 \u0645\u06a9\u0645\u0644 \u067e\u06d2 \u0644\u0648\u0688 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062d\u0642\u06cc\u0642\u06cc \u0648\u0642\u062a \u0645\u06cc\u06ba \u062f\u06a9\u06be\u0627\u062a\u0627 \u06c1\u06d2\u06d4 <strong>\u0639\u0645\u0644<\/strong>\u0622\u067e \u06a9\u0627\u0645\u0648\u06ba \u06a9\u0648 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u0688\u06cc\u0644\u06cc\u0648\u0631 \u06a9\u0631\u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0646\u062a\u0627\u0626\u062c \u06a9\u0627 \u0645\u0639\u0627\u0626\u0646\u06c1 \u06a9\u0631\u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u067e\u06d2 \u0644\u0648\u0688\u0632 \u06a9\u0648 \u0632\u0646\u062c\u06cc\u0631 \u0628\u0646\u0627\u062a\u06d2 \u0648\u0642\u062a\u060c \u06a9\u0633\u06cc \u0628\u06be\u06cc \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u067e\u0631 \u0627\u0646\u0633\u067e\u06a9\u0679\u0631 \u067e\u0631 \u0628\u06be\u0631\u0648\u0633\u06c1 \u06a9\u0631\u06cc\u06ba\u060c \u0628\u0634\u0645\u0648\u0644 \u06cc\u06c1\u06d4<\/p>\n<h2 id=\"heading-why-this-matters\">\u06cc\u06c1 \u06a9\u06cc\u0648\u06ba \u0627\u06c1\u0645\u06cc\u062a \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u06d4<\/h2>\n<p>\u0627\u0633 \u062a\u0639\u0645\u06cc\u0631 \u06a9\u06d2 \u067e\u06cc\u0686\u06be\u06d2 \u062f\u0648 \u062e\u06cc\u0627\u0644\u0627\u062a \u06cc\u06c1 \u06c1\u06cc\u06ba \u06a9\u06c1 \u06cc\u06c1 \u06a9\u0633\u06cc \u0628\u06be\u06cc \u0645\u062e\u0635\u0648\u0635 \u06a9\u0648\u0688 \u06a9\u0648 \u062e\u062a\u0645 \u06a9\u0631\u06d2 \u06af\u0627 \u0627\u0648\u0631 \u06a9\u0627\u0645 \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u062f\u0631\u0627\u0632 \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u062f\u0631\u0627\u0632 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0641\u0631\u0642 \u06c1\u06d2 \u062c\u0633\u06d2 \u0622\u067e \u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06a9\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-event-delegation\">\u062a\u0642\u0631\u06cc\u0628 \u06a9\u0627 \u0648\u0641\u062f<\/h3>\n<p>\u0648\u0627\u0644\u062f\u06cc\u0646 \u06a9\u06cc \u0637\u0631\u0641 \u0633\u06d2 \u0627\u06cc\u06a9 \u0633\u0646\u0646\u06d2 \u0648\u0627\u0644\u0627 \u062c\u0633\u06d2 \u06a9\u0628\u06be\u06cc \u062a\u0628\u062f\u06cc\u0644 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc\u0627 \u062c\u0627\u0626\u06d2 \u06af\u0627\u060c \u067e\u0691\u06be\u06cc\u06ba <code>e.target.closest(...)<\/code>\u062a\u0645\u0627\u0645 \u0686\u0627\u0626\u0644\u0688 \u0639\u0646\u0627\u0635\u0631 \u067e\u0631 \u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc \u06a9\u0631\u062a\u0627 \u06c1\u06d2 (\u062c\u0648 \u0641\u06cc \u0627\u0644\u062d\u0627\u0644 \u0635\u0641\u062d\u06c1 \u067e\u0631 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0648\u06c1 \u062c\u0648 \u0627\u0628\u06be\u06cc \u062a\u06a9 \u067e\u06cc\u0634 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc\u06d2 \u06af\u0626\u06d2 \u06c1\u06cc\u06ba)\u06d4 \u0627\u06af\u0631 \u0622\u067e \u0627\u0633 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0627\u06cc\u06a9 \u06c1\u06cc\u0646\u0688\u0644\u0631 \u06a9\u0648 \u0641\u06cc \u0628\u0679\u0646 \u0628\u0627\u0646\u062f\u06be\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u06cc\u06c1 \u0627\u0633 \u0648\u0642\u062a \u062e\u062a\u0645 \u06c1\u0648\u062c\u0627\u0626\u06d2 \u06af\u0627 \u062c\u0628 \u0641\u06c1\u0631\u0633\u062a \u062f\u0648\u0628\u0627\u0631\u06c1 \u067e\u06cc\u0634 \u06a9\u06cc \u062c\u0627\u0626\u06d2 \u06af\u06cc\u06d4 \u06cc\u06c1 \u0622\u067e \u06a9\u06d2 \u06a9\u0627\u0631\u0679 \u062f\u0631\u0627\u0632 \u0645\u06cc\u06ba \u0645\u0633\u062a\u0642\u0644 \u0637\u0648\u0631 \u067e\u0631 \u0631\u06c1\u06d2 \u06af\u0627\u06d4<\/p>\n<p>\u0648\u0641\u062f \u0628\u06be\u06cc \u0627\u06cc\u06a9 \u063a\u06cc\u0631 \u062d\u0627\u062f\u062b\u0627\u062a\u06cc \u0646\u0645\u0648\u0646\u06c1 \u06c1\u06d2 \u062c\u0648 AI \u0679\u0648\u0644\u0632 \u06cc\u0642\u06cc\u0646\u06cc \u0637\u0648\u0631 \u067e\u0631 \u063a\u0644\u0637 \u06c1\u0648 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u0633 \u06a9\u06cc \u0648\u062c\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u062a\u0631\u0628\u06cc\u062a \u06a9\u06d2 \u0627\u0639\u062f\u0627\u062f \u0648 \u0634\u0645\u0627\u0631 \u0645\u06cc\u06ba \u0639\u0646\u0635\u0631 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0645\u062e\u0635\u0648\u0635 \u067e\u0627\u0628\u0646\u062f\u06cc\u0627\u06ba \u0633\u0628 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u067e\u0627\u0626\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06cc\u06ba\u06d4 \u06a9\u0633\u06cc \u0648\u0641\u062f \u062a\u06a9 \u067e\u06c1\u0646\u0686\u0646\u06d2 \u06a9\u0627 \u0637\u0631\u06cc\u0642\u06c1 \u062c\u0627\u0646\u0646\u0627 \u0628\u0627\u0644\u06a9\u0644 \u0627\u0633\u06cc \u0642\u0633\u0645 \u06a9\u0627 \u0641\u06cc\u0635\u0644\u06c1 \u06c1\u06d2 \u062c\u0648 \u0646\u062d\u0648 \u0633\u06d2 \u0646\u06c1\u06cc\u06ba \u0622\u062a\u0627\u06d4<\/p>\n<h3 id=\"heading-the-section-rendering-api\">\u0633\u06cc\u06a9\u0634\u0646 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af API<\/h3>\n<p>\u062f\u0631\u0627\u0632 \u06a9\u06d2 \u0645\u0627\u0631\u06a9 \u0627\u067e \u06a9\u0648 \u062f\u0648 \u062c\u06af\u06c1\u0648\u06ba \u067e\u0631 \u0631\u06a9\u06be\u0646\u06d2 \u0627\u0648\u0631 \u0627\u0633\u06d2 \u0645\u0637\u0627\u0628\u0642\u062a \u067e\u0630\u06cc\u0631 \u0631\u06a9\u06be\u0646\u06d2 \u06a9\u06cc \u06a9\u0648\u0634\u0634 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u0622\u067e \u0633\u0631\u0648\u0631 \u06a9\u0648 \u0633\u06cc\u06a9\u0634\u0646\u0632 \u0631\u06cc\u0646\u0688\u0631 \u06a9\u0631\u0646\u06d2 \u0627\u0648\u0631 HTML \u067e\u0627\u0633 \u06a9\u0631\u0646\u06d2 \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0645\u0627\u0631\u06a9 \u0627\u067e \u0627\u06cc\u06a9 \u0641\u0627\u0626\u0644 \u0645\u06cc\u06ba \u0645\u0648\u062c\u0648\u062f \u06c1\u06d2 \u0627\u0648\u0631 \u0628\u06cc\u0686\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u062a\u06be\u06cc\u0645 \u0627\u06cc\u0688\u06cc\u0679\u0631 \u0645\u06cc\u06ba \u0633\u06cc\u06a9\u0634\u0646\u0632 \u0645\u06cc\u06ba \u062a\u0631\u0645\u06cc\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0648\u062c\u06c1 \u0633\u06d2 \u062f\u0631\u0633\u062a \u0631\u06c1\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0688\u06cc\u0644 \u0627\u06cc\u06a9 \u06c1\u06cc \u0645\u0627\u0631\u06a9 \u0627\u067e \u06a9\u0648 \u062f\u0648 \u0628\u0627\u0631 \u0628\u0631\u0642\u0631\u0627\u0631 \u0646\u06c1\u06cc\u06ba \u0631\u06a9\u06be \u0631\u06c1\u06cc \u06c1\u06d2\u060c \u0628\u0644\u06a9\u06c1 \u062a\u06be\u0648\u0691\u0627 \u0628\u0691\u0627 \u0631\u062f\u0639\u0645\u0644 \u0627\u0648\u0631 \u062a\u062c\u0632\u06cc\u06c1 \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u0627 \u0642\u062f\u0645 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0648\u0631 \u0627\u0633 \u06a9\u06d2 \u0646\u06cc\u0686\u06d2 \u0627\u06cc\u06a9 \u0642\u0627\u0639\u062f\u06c1 \u06c1\u06d2\u06d4 \u062e\u06cc\u0627\u0644 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u06c1\u0631 \u062a\u0628\u062f\u06cc\u0644\u06cc \u06a9\u06d2 \u0628\u0639\u062f \u06a9\u0627\u0631\u0679 (\u06cc\u0627 \u067e\u06cc\u0634 \u06a9\u0631\u062f\u06c1 \u062d\u0635\u06d2) \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u067e\u0691\u06be\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0633\u06d2 \u0633\u0631\u0648\u0631 \u06a9\u06d2 \u062c\u0648\u0627\u0628 \u0633\u06d2 \u067e\u06cc\u0646\u0679 \u06a9\u0631\u06cc\u06ba\u06d4 \u0645\u0642\u0627\u0645\u06cc \u06a9\u0627\u0624\u0646\u0679\u0631 \u0686\u06be\u0648\u0679\u06cc \u0686\u06be\u0648\u0679\u06cc \u06c1\u06d2\u06d4 \u0627\u0633 \u0645\u0636\u0645\u0648\u0646 \u0645\u06cc\u06ba \u0628\u0627\u0642\u06cc \u0633\u0628 \u06a9\u0686\u06be \u0633\u0631\u0648\u0631 \u06a9\u06d2 \u0627\u0639\u062a\u0645\u0627\u062f \u067e\u0631 \u0627\u06cc\u06a9 \u062a\u063a\u06cc\u0631 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-the-complete-files\">\u0645\u06a9\u0645\u0644 \u0641\u0627\u0626\u0644<\/h2>\n<p>\u0622\u067e \u0645\u06cc\u06ba \u0633\u06d2 \u0627\u0646 \u0644\u0648\u06af\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u062c\u0646\u06c1\u0648\u06ba \u0646\u06d2 \u0627\u0628\u06be\u06cc \u06cc\u06c1\u0627\u06ba \u0633\u06a9\u0631\u0648\u0644 \u06a9\u06cc\u0627 \u06c1\u06d2\u060c \u06cc\u06c1 \u0633\u0628 \u0633\u06cc\u06a9\u0634\u0646 \u0645\u0627\u0631\u06a9 \u0627\u067e\u060c \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u0627\u0648\u0631 \u0633\u06cc \u0627\u06cc\u0633 \u0627\u06cc\u0633 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u06c1\u06d2\u06d4 JavaScript \u0633\u0631\u0648\u0631 \u06a9\u06d2 \u062c\u0648\u0627\u0628 \u06a9\u06d2 \u062a\u0645\u0627\u0645 \u0631\u06cc \u0631\u06cc\u0646\u0688\u0631\u0646\u06af \u06a9\u0648 \u06cc\u06a9\u062c\u0627 \u06a9\u0631\u062a\u0627 \u06c1\u06d2: \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u060c \u0645\u0642\u062f\u0627\u0631\u060c \u06c1\u0679\u0627\u0626\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0635\u0627\u0641 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<p><code>sections\/cart-drawer.liquid<\/code>:<\/p>\n<pre><code class=\"language-liquid\"><button type=\"button\" class=\"cart-toggle\" data-cart-toggle=\"\">\n  Cart <span class=\"cart-count\" data-cart-count=\"\">{{ cart.item_count }}<\/span>\n<\/button>\n\n<aside class=\"drawer\" data-drawer=\"\" aria-label=\"Cart\" aria-hidden=\"true\">\n  <p>\n    <h2>Your cart<\/h2>\n    <button type=\"button\" class=\"drawer__close\" data-drawer-close=\"\" aria-label=\"Close cart\">\u00d7<\/button>\n  <\/p>\n\n  <div class=\"drawer__body\">\n    <p class=\"drawer__empty\" data-drawer-empty=\"\" if=\"\" cart.item_count=\"\"> 0 %}style=\"display:none\"{% endif %}>\n      Your cart is empty.\n    <\/p>\n    <ul class=\"drawer__items\" data-drawer-items=\"\">\n      {%- for item in cart.items -%}\n        <li class=\"drawer__item\" data-line=\"\" data-line-key=\"{{ item.key }}\" data-quantity=\"{{ item.quantity }}\">\n          {{ item.image | image_url: width: 96 | image_tag: class: 'drawer__item-img', loading: 'lazy', alt: item.product.title }}\n          <span class=\"drawer__item-title\">{{ item.product.title }}<\/span>\n          <span class=\"drawer__item-qty\">\n            <button type=\"button\" class=\"qty-btn\" data-qty-dec=\"\" aria-label=\"Decrease\">-<\/button>\n            <span class=\"qty-value\">{{ item.quantity }}<\/span>\n            <button type=\"button\" class=\"qty-btn\" data-qty-inc=\"\" aria-label=\"Increase\">+<\/button>\n          <\/span>\n          <span class=\"drawer__item-price\">{{ item.final_line_price | money }}<\/span>\n          <button type=\"button\" class=\"drawer__remove\" data-remove=\"\" aria-label=\"Remove\">Remove<\/button>\n        <\/li>\n      {%- endfor -%}\n    <\/ul>\n  <\/div>\n\n  \n<\/aside>\n\n\n{% schema %}\n{ \"name\": \"Cart drawer\" }\n{% endschema %}\n<\/code><\/pre>\n<p><code>assets\/cart-drawer.js<\/code>:<\/p>\n<pre><code class=\"language-javascript\">(function () {\n  var countEl = document.querySelector(\"[data-cart-count]\");\n  var itemsEl = document.querySelector(\"[data-drawer-items]\");\n  var emptyEl = document.querySelector(\"[data-drawer-empty]\");\n  var subtotalEl = document.querySelector(\"[data-cart-subtotal]\");\n  var drawer = document.querySelector(\"[data-drawer]\");\n  var scrim = document.querySelector(\"[data-drawer-scrim]\");\n  var clearBtn = document.querySelector(\"[data-cart-clear]\");\n\n  \/\/ --- Add to cart: mutate, re-read, render, open ---\n  document.querySelectorAll(\"[data-add]\").forEach(function (btn) {\n    btn.addEventListener(\"click\", function () {\n      var id = Number(btn.getAttribute(\"data-variant-id\"));\n      fetch(\"\/cart\/add.js\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application\/json\" },\n        body: JSON.stringify({ id: id, quantity: 1 }),\n      })\n        .then(function (r) { return r.json(); })\n        .then(function () { return refresh(); })\n        .then(openDrawer);\n    });\n  });\n\n  \/\/ --- Quantity +\/- : one delegated listener on the stable list ---\n  itemsEl.addEventListener(\"click\", function (e) {\n    var inc = e.target.closest(\"[data-qty-inc]\");\n    var dec = e.target.closest(\"[data-qty-dec]\");\n    if (!inc && !dec) return;\n    var line = e.target.closest(\"[data-line]\");\n    var key = line.getAttribute(\"data-line-key\");\n    var qty = Number(line.getAttribute(\"data-quantity\"));\n    var nextQty = inc ? qty + 1 : qty - 1;\n    fetch(\"\/cart\/change.js\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application\/json\" },\n      body: JSON.stringify({ id: key, quantity: nextQty }),\n    }).then(function (r) { return r.json(); }).then(render);\n  });\n\n  \/\/ --- Remove a line: quantity 0 (there is no \/cart\/remove.js) ---\n  itemsEl.addEventListener(\"click\", function (e) {\n    var remove = e.target.closest(\"[data-remove]\");\n    if (!remove) return;\n    var key = e.target.closest(\"[data-line]\").getAttribute(\"data-line-key\");\n    fetch(\"\/cart\/change.js\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application\/json\" },\n      body: JSON.stringify({ id: key, quantity: 0 }),\n    }).then(function (r) { return r.json(); }).then(render);\n  });\n\n  \/\/ --- Clear the whole cart ---\n  clearBtn.addEventListener(\"click\", function () {\n    fetch(\"\/cart\/clear.js\", { method: \"POST\" })\n      .then(function (r) { return r.json(); })\n      .then(render);\n  });\n\n  \/\/ --- The one function that paints the drawer from the cart ---\n  function money(cents) { return \"$\" + (cents \/ 100).toFixed(2); }\n\n  function render(cart) {\n    countEl.textContent = cart.item_count;\n    subtotalEl.textContent = money(cart.total_price);\n    itemsEl.innerHTML = \"\";\n    if (!cart.items.length) { emptyEl.style.display = \"block\"; return; }\n    emptyEl.style.display = \"none\";\n    cart.items.forEach(function (line) {\n      var li = document.createElement(\"li\");\n      li.className = \"drawer__item\";\n      li.setAttribute(\"data-line\", \"\");\n      li.setAttribute(\"data-line-key\", line.key);\n      li.setAttribute(\"data-quantity\", line.quantity);\n      li.innerHTML =\n        '<img decoding=\"async\" class=\"drawer__item-img\" src=\"&#039; + (line.image || \" alt=\"\" title=\"\">' +\n        '<span class=\"drawer__item-title\">' + line.title + \"<\/span>\" +\n        '<span class=\"drawer__item-qty\">' +\n          '<button type=\"button\" class=\"qty-btn\" data-qty-dec=\"\" aria-label=\"Decrease\">-<\/button>' +\n          '<span class=\"qty-value\">' + line.quantity + \"<\/span>\" +\n          '<button type=\"button\" class=\"qty-btn\" data-qty-inc=\"\" aria-label=\"Increase\">+<\/button>' +\n        \"<\/span>\" +\n        '<span class=\"drawer__item-price\">' + money(line.final_line_price) + \"<\/span>\" +\n        '<button type=\"button\" class=\"drawer__remove\" data-remove=\"\" aria-label=\"Remove\">Remove<\/button>';\n      itemsEl.appendChild(li);\n    });\n  }\n\n  function refresh() {\n    return fetch(\"\/cart.js\").then(function (r) { return r.json(); }).then(render);\n  }\n  function openDrawer() { drawer.classList.add(\"is-open\"); scrim.classList.add(\"is-open\"); }\n  function closeDrawer() { drawer.classList.remove(\"is-open\"); scrim.classList.remove(\"is-open\"); }\n\n  document.querySelector(\"[data-cart-toggle]\").addEventListener(\"click\", function () { refresh().then(openDrawer); });\n  document.querySelector(\"[data-drawer-close]\").addEventListener(\"click\", closeDrawer);\n  scrim.addEventListener(\"click\", closeDrawer);\n\n  refresh(); \/\/ paint on load\n})();\n<\/code><\/pre>\n<p><code>assets\/cart-drawer.css<\/code>:<\/p>\n<pre><code class=\"language-css\">.drawer {\n  position: fixed;\n  inset: 0 0 0 auto;\n  width: min(420px, 100%);\n  background: #fff;\n  transform: translateX(100%);\n  transition: transform 0.3s ease;\n  display: flex;\n  flex-direction: column;\n}\n.drawer.is-open { transform: translateX(0); }\n.drawer__scrim {\n  position: fixed; inset: 0;\n  background: rgba(30, 18, 6, 0.45);\n  opacity: 0; pointer-events: none;\n  transition: opacity 0.3s ease;\n}\n.drawer__scrim.is-open { opacity: 1; pointer-events: auto; }\n<\/code><\/pre>\n<h2 id=\"heading-wrap-up\">\u062e\u062a\u0645<\/h2>\n<p>\u06c1\u0645\u0627\u0631\u06d2 \u067e\u0627\u0633 \u0627\u0628 \u0627\u06cc\u06a9 \u06a9\u0627\u0631\u0679 \u062f\u0631\u0627\u0632 \u06c1\u06d2 \u062c\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0644\u0648\u0688 \u06a9\u06cc\u06d2 \u0628\u063a\u06cc\u0631 \u0634\u0627\u0645\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u06c1\u0679\u0627\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0635\u0627\u0641 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c UI \u06a9\u0648 \u06a9\u0628\u06be\u06cc \u0628\u06be\u06cc \u0627\u0635\u0644 \u06a9\u0627\u0631\u0679 \u0633\u06d2 \u0628\u06be\u0679\u06a9\u0646\u06d2 \u0646\u06c1\u06cc\u06ba \u062f\u06cc\u062a\u0627\u060c \u0627\u0648\u0631 \u0627\u06cc\u06a9\u0634\u0646 \u0627\u0648\u0648\u0631 \u0631\u0627\u0626\u06cc\u0688\u0632 \u06a9\u06d2 \u0633\u0627\u062a\u06be\u060c \u0627\u0646\u0633\u0627\u0646\u06cc \u0627\u0648\u0631 AI \u0627\u06cc\u062c\u0646\u0679\u0633 \u0633\u0645\u06cc\u062a \u067e\u0648\u0631\u06d2 \u0627\u06cc\u067e \u0627\u06cc\u06a9\u0648 \u0633\u0633\u0679\u0645 \u06a9\u0648 \u0635\u0627\u0641 \u0639\u0627\u0645 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u06cc\u062c\u06cc\u06a9\u0633 \u0641\u0627\u0624\u0646\u0688\u06cc\u0634\u0646 \u0628\u0631\u0633\u0648\u06ba \u0633\u06d2 \u0627\u06cc\u06a9 \u062c\u06cc\u0633\u06cc \u06c1\u06d2\u06d4 2026 \u06a9\u06cc \u067e\u0631\u062a \u0627\u0633 \u06a9\u06d2 \u0627\u0648\u067e\u0631 \u0631\u06a9\u06be\u06cc \u06af\u0626\u06cc \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u0622\u067e \u062c\u0648 \u062f\u0631\u0627\u0632 \u0622\u062c \u0628\u0646\u0627\u0626\u06cc\u06ba \u06af\u06d2 \u0648\u06c1 \u062f\u0633\u062a\u06cc\u0627\u0628 \u0631\u06c1\u06d2 \u06af\u0627 \u0686\u0627\u06c1\u06d2 \u06a9\u0644 \u06a9\u0686\u06be \u0628\u06be\u06cc \u06c1\u0648\u06d4<\/p>\n<p><em>\u0627\u06af\u0631 \u0622\u067e \u0627\u0633 \u0639\u06cc\u0646 \u0645\u0637\u0627\u0628\u0642 \u062f\u0631\u0627\u0632 \u06a9\u0648 \u06a9\u0686\u06be \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u0644\u06a9\u06be \u06a9\u0631 \u0627\u0646\u0679\u0631\u0627\u06cc\u06a9\u0679\u0648 \u0628\u0646\u0627\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u06cc\u06c1 \u062f\u06cc\u06a9\u06be\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 \u06cc\u06c1 \u0627\u0635\u0644\u06cc \u0627\u0633\u0679\u0648\u0631\u0632 \u0645\u06cc\u06ba \u06a9\u06cc\u0633\u06d2 \u0631\u062f \u0639\u0645\u0644 \u0638\u0627\u06c1\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u062a\u0648 \u0622\u067e \u0627\u0633\u06d2 \u06cc\u06c1\u0627\u06ba \u0645\u0641\u062a \u0645\u06cc\u06ba \u06a9\u0631\u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba:<\/em> <em>learnshopify.dev<\/em><em>.<\/em><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1783151963_967_Shopify-\u0645\u06cc\u06ba-AJAX-\u06a9\u0627\u0631\u0679-\u062f\u0631\u0627\u0632-\u06a9\u06cc\u0633\u06d2-\u0628\u0646\u0627\u06cc\u0627-\u062c\u0627\u0626\u06d2-2026-\u0637\u0631\u06cc\u0642\u06c1.png\" alt=\"learnshopify.dev \u0644\u06cc\u0646\u0688\u0646\u06af \u067e\u06cc\u062c\u060c Shopify \u0688\u0648\u06cc\u0644\u067e\u0645\u0646\u0679 \u0633\u06cc\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0627\u0646\u0679\u0631\u0627\u06cc\u06a9\u0679\u0648 \u067e\u0644\u06cc\u0679 \u0641\u0627\u0631\u0645\" style=\"display:block;margin:0 auto\" width=\"2041\" height=\"1269\" loading=\"lazy\" title=\"\"><\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u062c\u0628 \u0622\u067e \u0627\u067e\u0646\u06d2 Shopify \u0627\u0633\u0679\u0648\u0631 \u0645\u06cc\u06ba \u0688\u06cc\u0641\u0627\u0644\u0679 \u0637\u0631\u06cc\u0642\u06d2 \u0633\u06d2 \u06a9\u0648\u0626\u06cc \u067e\u0631\u0648\u0688\u06a9\u0679 \u0634\u0627\u0645\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u067e\u0648\u0631\u0627 \u0635\u0641\u062d\u06c1 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0644\u0648\u0688 \u06c1\u0648\u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u06cc\u06a9 \u062e\u0631\u06cc\u062f\u0627\u0631 \u0622\u067e \u06a9\u06cc \u0645\u0635\u0646\u0648\u0639\u0627\u062a \u06a9\u0648 \u062f\u06cc\u06a9\u06be\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u06a9\u0644\u06a9 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0679\u0648\u06a9\u0631\u06cc \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4\u0628\u0631\u0627\u0624\u0632\u0631 \u0635\u0641\u062d\u06c1 \u06a9\u0648 \u0631\u062f \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0633\u06d2 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0633\u0633\u062a \u0631\u0648\u0627\u0628\u0637 \u067e\u0631 \u0622\u067e \u06a9\u0648 2-3 \u0633\u06cc\u06a9\u0646\u0688 \u06a9\u06d2 [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":26226,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-26225","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/26225","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/comments?post=26225"}],"version-history":[{"count":1,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/26225\/revisions"}],"predecessor-version":[{"id":26227,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/26225\/revisions\/26227"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/media\/26226"}],"wp:attachment":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/media?parent=26225"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/categories?post=26225"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/tags?post=26225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}