{"id":39308,"date":"2024-05-13T13:03:34","date_gmt":"2024-05-13T08:33:34","guid":{"rendered":"https:\/\/wpadmin.maktabkhooneh.org\/mag\/?p=39308"},"modified":"2026-04-06T15:50:27","modified_gmt":"2026-04-06T12:20:27","slug":"cart-with-javascript","status":"publish","type":"post","link":"https:\/\/maktabkhooneh.org\/mag\/cart-with-javascript\/","title":{"rendered":"\u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u0635\u0648\u0631\u062a \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645"},"content":{"rendered":"\n<p>\u0622\u06cc\u0627 \u062a\u0627\u0628\u0647\u200c\u062d\u0627\u0644 \u0641\u06a9\u0631 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u062f \u06a9\u0647 \u062f\u0648\u0633\u062a \u062f\u0627\u0631\u06cc\u062f \u06cc\u06a9 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0622\u0646\u0644\u0627\u06cc\u0646 \u06a9\u0648\u0686\u06a9 \u0628\u0631\u0627\u06cc \u062e\u0648\u062f \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f\u061f \u06cc\u0627 \u0634\u0627\u06cc\u062f \u0631\u0648\u06cc \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u0634\u062e\u0635\u06cc \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0642\u0627\u0628\u0644\u06cc\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u062f\u0627\u0631\u062f\u061f \u062f\u0631 \u0647\u0631 \u0635\u0648\u0631\u062a\u060c \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u06cc\u06a9\u06cc \u0627\u0632 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u0636\u0631\u0648\u0631\u06cc \u0647\u0631 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0622\u0646\u0644\u0627\u06cc\u0646 \u0627\u0633\u062a \u0648 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0632\u0628\u0627\u0646 \u0642\u062f\u0631\u062a\u0645\u0646\u062f\u06cc \u0628\u0631\u0627\u06cc \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0622\u0646 \u0628\u0647 \u0634\u0645\u0627\u0631 \u0645\u06cc\u200c\u0631\u0648\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628 \u0622\u0645\u0648\u0632\u0634\u06cc \u0627\u0632 \u0645\u062c\u0644\u0647 \u0645\u06a9\u062a\u0648\u0628 \u0627\u06cc\u0646 \u0628\u0627\u0631 \u0628\u0627 \u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0631 \u062e\u062f\u0645\u062a \u0634\u0645\u0627 \u0647\u0633\u062a\u06cc\u0645.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0686\u0631\u0627 \u0628\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645\u061f<\/h2>\n\n\n\n<p>\u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f \u0648\u0627\u0631\u062f \u06cc\u06a9 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0641\u06cc\u0632\u06cc\u06a9\u06cc \u0645\u06cc\u200c\u0634\u0648\u06cc\u062f. \u0627\u0648\u0644\u06cc\u0646 \u06a9\u0627\u0631\u06cc \u06a9\u0647 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u062f\u0647\u06cc\u062f \u0686\u06cc\u0633\u062a\u061f \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u0645\u062d\u0635\u0648\u0644\u0627\u062a\u06cc \u0631\u0627 \u06a9\u0647 \u0628\u0647 \u0622\u0646\u200c\u0647\u0627 \u0639\u0644\u0627\u0642\u0647\u200c\u0645\u0646\u062f \u0647\u0633\u062a\u06cc\u062f \u0628\u0631\u0645\u06cc\u200c\u062f\u0627\u0631\u06cc\u062f \u0648 \u062f\u0627\u062e\u0644 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u062f\u0647\u06cc\u062f. \u0628\u0647 \u0627\u06cc\u0646 \u062a\u0631\u062a\u06cc\u0628\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u062f\u0631 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0628\u0686\u0631\u062e\u06cc\u062f\u060c \u06af\u0632\u06cc\u0646\u0647\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f \u0648 \u062f\u0631\u0646\u0647\u0627\u06cc\u062a\u060c \u062a\u0645\u0627\u0645 \u06a9\u0627\u0644\u0627\u0647\u0627\u06cc \u0645\u0648\u0631\u062f\u0646\u0638\u0631 \u062e\u0648\u062f \u0631\u0627 \u06cc\u06a9\u062c\u0627 \u062e\u0631\u06cc\u062f\u0627\u0631\u06cc \u0646\u0645\u0627\u06cc\u06cc\u062f. \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u0648\u0628 \u0646\u06cc\u0632 \u06a9\u0627\u0631\u06a9\u0631\u062f\u06cc \u0645\u0634\u0627\u0628\u0647 \u062f\u0627\u0631\u062f.<\/p>\n\n\n<div class=\"jet-listing-grid--56206\" style=\"\"><div class=\"jet-listing-dynamic-field-block zht-maktab-khooneh-learn cb-ud1ng69u\"data-is-block=\"jet-engine\/dynamic-field\"><div class=\"jet-listing-dynamic-field__content\" >\r\n<div class=\"zht-learn-card\">\r\n    <div class=\"zht-learn-title-section\">\r\n        <div class=\"zht-learn-card-icon\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"24\" height=\"24\">\r\n                <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\" \/>\r\n            <\/svg>\r\n        <\/div>\r\n        \r\n        <!-- \u0639\u0646\u0648\u0627\u0646 \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0647 \u0628\u0647 \u0644\u06cc\u0646\u06a9 -->\r\n        <a href=\"https:\/\/maktabkhooneh.org\/learn\/java-script\/\" class=\"zht-learn-card-title\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n            \u062f\u0648\u0631\u0647\u200c\u0647\u0627\u06cc \u0622\u0645\u0648\u0632\u0634 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a        <\/a>\r\n    <\/div>\r\n\r\n    <!-- \u062f\u06a9\u0645\u0647 \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0647 \u0628\u0647 \u062a\u06af button -->\r\n    <!-- \u0627\u0632 onclick \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u062f\u0647 \u062a\u0627 \u0628\u0647 \u0645\u062d\u0636 \u06a9\u0644\u06cc\u06a9 \u0644\u06cc\u0646\u06a9 \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u062f -->\r\n    <button class=\"zht-learn-card-btn\" data-course-url=\"https:\/\/maktabkhooneh.org\/learn\/java-script\/\" onclick=\"window.open(this.getAttribute('data-course-url'), '_blank');\">\r\n        \u0634\u0631\u0648\u0639 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc\r\n    <\/button>\r\n<\/div><\/div><\/div><\/div>\n\n\n<p>\u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f \u06a9\u0647 \u0645\u062d\u0635\u0648\u0644\u0627\u062a\u06cc \u0631\u0627 \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u062c\u0627\u0632\u06cc \u062f\u0631 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u0645. \u0628\u062f\u06cc\u0646 \u062a\u0631\u062a\u06cc\u0628\u060c \u06a9\u0627\u0631\u0628\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0628\u0647\u200c\u0645\u0631\u0648\u0631 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0628\u067e\u0631\u062f\u0627\u0632\u062f\u060c \u0686\u0646\u062f\u06cc\u0646 \u06a9\u0627\u0644\u0627 \u0631\u0627 \u0628\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u062f \u0648 \u062f\u0631\u0646\u0647\u0627\u06cc\u062a\u060c \u0627\u0642\u062f\u0627\u0645 \u0628\u0647 \u0646\u0647\u0627\u06cc\u06cc \u06a9\u0631\u062f\u0646 \u062e\u0631\u06cc\u062f \u062e\u0648\u062f \u0646\u0645\u0627\u06cc\u062f.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0622\u0646\u0686\u0647 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u0622\u0646 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645<\/h3>\n\n\n\n<p>\u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u0628\u0647 \u0686\u0646\u062f \u0645\u0648\u0631\u062f \u0627\u0633\u0627\u0633\u06cc \u0632\u06cc\u0631 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u0641\u0627\u06cc\u0644<\/strong><strong> HTML:<\/strong> \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0633\u0627\u062e\u062a\u0627\u0631 \u06a9\u0644\u06cc \u0635\u0641\u062d\u0647 \u0648\u0628 \u0645\u0627 \u0631\u0627 \u062a\u0634\u06a9\u06cc\u0644 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/li>\n\n\n\n<li><strong>\u0641\u0627\u06cc\u0644<\/strong><strong> CSS:<\/strong> \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 CSS\u060c \u0638\u0627\u0647\u0631 \u0648 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0631\u0627 \u0634\u062e\u0635\u06cc\u200c\u0633\u0627\u0632\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/li>\n\n\n\n<li><strong>\u0641\u0627\u06cc\u0644 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/strong><strong>:<\/strong> \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u062d\u0627\u0648\u06cc \u06a9\u062f\u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0627\u0633\u062a.<\/li>\n<\/ul>\n\n\n<div class=\"jet-listing-grid--50192\" style=\"\"><style><\/style><section class=\"zht-related-post\" itemscope=\"\" itemtype=\"https:\/\/schema.org\/Article\" role=\"region\"\n  aria-label=\"Related article\">\n  <div class=\"zht-related-post-section-label\">\n    \u0645\u0637\u0627\u0644\u0628 \u0645\u0631\u062a\u0628\u0637\n  <\/div>\n  <img fetchpriority=\"high\" decoding=\"async\" width=\"300\" height=\"198\" src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/32147b0c-5073-46dc-aeeb-2bf95b78b7f8-300x198.jpg.webp\" class=\"attachment-medium size-medium wp-post-image\" alt=\"\u0633\u0627\u062e\u062a \u0645\u0627\u0634\u06cc\u0646 \u062d\u0633\u0627\u0628 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\" srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/32147b0c-5073-46dc-aeeb-2bf95b78b7f8-300x198.jpg.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/32147b0c-5073-46dc-aeeb-2bf95b78b7f8-768x506.jpg.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/32147b0c-5073-46dc-aeeb-2bf95b78b7f8.jpg 1021w\" sizes=\"(max-width: 300px) 100vw, 300px\" title=\"\">\n  <a href=\"https:\/\/maktabkhooneh.org\/mag\/javascript-calculator\/\" class=\"zht-related-post-title\"\n    itemprop=\"headline\" target=\"_blank\">\u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0645\u0627\u0634\u06cc\u0646 \u062d\u0633\u0627\u0628 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u0635\u0648\u0631\u062a \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645<\/a>\n<\/section><\/div>\n\n\n<h2 class=\"wp-block-heading\">\u067e\u0631\u0648\u0698\u0647 \u0633\u0627\u062e\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/h2>\n\n\n\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u06a9\u0627\u0645\u0644 \u0633\u0627\u062e\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u06a9\u0627\u0645\u0644 \u0645\u0648\u0631\u062f\u0628\u0631\u0631\u0633\u06cc \u0642\u0631\u0627\u0631 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f. \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0627\u0632 \u0633\u0647 \u0641\u0627\u06cc\u0644 \u0627\u0686 \u062a\u06cc \u0627\u0645 \u0627\u0644\u060c \u0633\u06cc \u0627\u0633 \u0627\u0633 \u0648 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062a\u0634\u06a9\u06cc\u0644 \u0634\u062f\u0647 \u06a9\u0647 \u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u06a9\u062f\u0647\u0627\u06cc \u0622\u0646 \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"699\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/82091fb8-9a35-4048-9826-94455f6ee7af.jpg\" alt=\"\u067e\u0631\u0648\u0698\u0647 \u0633\u0627\u062e\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\" class=\"wp-image-39310 lazyload\" title=\"\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/82091fb8-9a35-4048-9826-94455f6ee7af.jpg 1024w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/82091fb8-9a35-4048-9826-94455f6ee7af-300x205.jpg.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/82091fb8-9a35-4048-9826-94455f6ee7af-768x524.jpg.webp 768w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/699;\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u06a9\u062f HTML \u0633\u0627\u062e\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0627 javascript<\/h3>\n\n\n\n<p>\u0633\u0627\u062e\u062a\u0627\u0631 \u0627\u0635\u0644\u06cc \u06cc\u0627 \u0642\u0637\u0639\u0647 \u06a9\u062f \u0627\u0686 \u062a\u06cc \u0627\u0645 \u0627\u0644 \u0633\u0627\u062e\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">!<\/span><span class=\"token operator\">--<\/span> Nav <span class=\"token operator\">--<\/span><span class=\"token operator\">&gt;<\/span>\n<span class=\"token operator\">&lt;<\/span>nav <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"navbar navbar-inverse bg-inverse fixed-top bg-faded\"<\/span><span class=\"token operator\">&gt;<\/span>\n    <span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"row\"<\/span><span class=\"token operator\">&gt;<\/span>\n        <span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"col\"<\/span><span class=\"token operator\">&gt;<\/span>\n          <span class=\"token operator\">&lt;<\/span>button type<span class=\"token operator\">=<\/span><span class=\"token string\">\"button\"<\/span> <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"btn btn-primary\"<\/span> data<span class=\"token operator\">-<\/span>toggle<span class=\"token operator\">=<\/span><span class=\"token string\">\"modal\"<\/span> data<span class=\"token operator\">-<\/span>target<span class=\"token operator\">=<\/span><span class=\"token string\">\"#cart\"<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token function\">Cart<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">&lt;<\/span>span <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"total-count\"<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>span<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>button<span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&lt;<\/span>button <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"clear-cart btn btn-danger\"<\/span><span class=\"token operator\">&gt;<\/span>Clear Cart<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>button<span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\n    <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\n<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>nav<span class=\"token operator\">&gt;<\/span>\n\n\n<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">!<\/span><span class=\"token operator\">--<\/span> Main <span class=\"token operator\">--<\/span><span class=\"token operator\">&gt;<\/span>\n<span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"container\"<\/span><span class=\"token operator\">&gt;<\/span>\n    <span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"row\"<\/span><span class=\"token operator\">&gt;<\/span>\n      <span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"col\"<\/span><span class=\"token operator\">&gt;<\/span>\n        <span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"card\"<\/span> style<span class=\"token operator\">=<\/span><span class=\"token string\">\"width: 20rem;\"<\/span><span class=\"token operator\">&gt;<\/span>\n  <span class=\"token operator\">&lt;<\/span>img decoding<span class=\"token operator\">=<\/span><span class=\"token string\">\"async\"<\/span> <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"card-img-top\"<\/span> src<span class=\"token operator\">=<\/span><span class=\"token string\">\"http:\/\/www.azspagirls.com\/files\/2010\/09\/orange.jpg\"<\/span> alt<span class=\"token operator\">=<\/span><span class=\"token string\">\"Card image cap\"<\/span><span class=\"token operator\">&gt;<\/span>\n  <span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"card-block\"<\/span><span class=\"token operator\">&gt;<\/span>\n    <span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"lwptoc lwptoc-autoWidth lwptoc-baseItems lwptoc-light lwptoc-notInherit\"<\/span> data<span class=\"token operator\">-<\/span>smooth<span class=\"token operator\">-<\/span>scroll<span class=\"token operator\">=<\/span><span class=\"token string\">\"\u06f1\"<\/span> data<span class=\"token operator\">-<\/span>smooth<span class=\"token operator\">-<\/span>scroll<span class=\"token operator\">-<\/span>offset<span class=\"token operator\">=<\/span><span class=\"token string\">\"\u06f2\u06f4\"<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"lwptoc_i\"<\/span><span class=\"token operator\">&gt;<\/span>    <span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"lwptoc_header\"<\/span><span class=\"token operator\">&gt;<\/span>\n        <span class=\"token operator\">&lt;<\/span>b <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"lwptoc_title\"<\/span><span class=\"token operator\">&gt;<\/span>\u0641\u0647\u0631\u0633\u062a \u0645\u062d\u062a\u0648\u0627<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>b<span class=\"token operator\">&gt;<\/span>                    <span class=\"token operator\">&lt;<\/span>span <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"lwptoc_toggle\"<\/span><span class=\"token operator\">&gt;<\/span>\n                <span class=\"token operator\">&lt;<\/span>a href<span class=\"token operator\">=<\/span><span class=\"token string\">\"#\"<\/span> <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"lwptoc_toggle_label\"<\/span> data<span class=\"token operator\">-<\/span>label<span class=\"token operator\">=<\/span><span class=\"token string\">\"\u067e\u0646\u0647\u0627\u0646\"<\/span><span class=\"token operator\">&gt;<\/span>\u0646\u0645\u0627\u06cc\u0634<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>a<span class=\"token operator\">&gt;<\/span>\n            <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>span<span class=\"token operator\">&gt;<\/span>\n            <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\n<span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"lwptoc_items\"<\/span> style<span class=\"token operator\">=<\/span><span class=\"token string\">\"display:none;\"<\/span><span class=\"token operator\">&gt;<\/span>\n    <span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"lwptoc_itemWrap\"<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"lwptoc_item\"<\/span><span class=\"token operator\">&gt;<\/span>    <span class=\"token operator\">&lt;<\/span>a href<span class=\"token operator\">=<\/span><span class=\"token string\">\"#Orange\"<\/span><span class=\"token operator\">&gt;<\/span>\n                    <span class=\"token operator\">&lt;<\/span>span <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"lwptoc_item_number\"<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token number\">\u06f1<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>span<span class=\"token operator\">&gt;<\/span>\n                <span class=\"token operator\">&lt;<\/span>span <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"lwptoc_item_label\"<\/span><span class=\"token operator\">&gt;<\/span>Orange<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>span<span class=\"token operator\">&gt;<\/span>\n    <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>a<span class=\"token operator\">&gt;<\/span>\n    <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"lwptoc_item\"<\/span><span class=\"token operator\">&gt;<\/span>    <span class=\"token operator\">&lt;<\/span>a href<span class=\"token operator\">=<\/span><span class=\"token string\">\"#Banana\"<\/span><span class=\"token operator\">&gt;<\/span>\n                    <span class=\"token operator\">&lt;<\/span>span <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"lwptoc_item_number\"<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token number\">\u06f2<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>span<span class=\"token operator\">&gt;<\/span>\n                <span class=\"token operator\">&lt;<\/span>span <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"lwptoc_item_label\"<\/span><span class=\"token operator\">&gt;<\/span>Banana<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>span<span class=\"token operator\">&gt;<\/span>\n    <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>a<span class=\"token operator\">&gt;<\/span>\n    <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"lwptoc_item\"<\/span><span class=\"token operator\">&gt;<\/span>    <span class=\"token operator\">&lt;<\/span>a href<span class=\"token operator\">=<\/span><span class=\"token string\">\"#Lemon\"<\/span><span class=\"token operator\">&gt;<\/span>\n                    <span class=\"token operator\">&lt;<\/span>span <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"lwptoc_item_number\"<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token number\">\u06f3<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>span<span class=\"token operator\">&gt;<\/span>\n                <span class=\"token operator\">&lt;<\/span>span <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"lwptoc_item_label\"<\/span><span class=\"token operator\">&gt;<\/span>Lemon<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>span<span class=\"token operator\">&gt;<\/span>\n    <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>a<span class=\"token operator\">&gt;<\/span>\n    <span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"lwptoc_itemWrap\"<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"lwptoc_item\"<\/span><span class=\"token operator\">&gt;<\/span>    <span class=\"token operator\">&lt;<\/span>a href<span class=\"token operator\">=<\/span><span class=\"token string\">\"#Cart\"<\/span><span class=\"token operator\">&gt;<\/span>\n                    <span class=\"token operator\">&lt;<\/span>span <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"lwptoc_item_number\"<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token number\">\u06f3.\u06f1<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>span<span class=\"token operator\">&gt;<\/span>\n                <span class=\"token operator\">&lt;<\/span>span <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"lwptoc_item_label\"<\/span><span class=\"token operator\">&gt;<\/span>Cart<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>span<span class=\"token operator\">&gt;<\/span>\n    <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>a<span class=\"token operator\">&gt;<\/span>\n    <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\n<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&lt;<\/span>h4 <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"card-title\"<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&lt;<\/span>span id<span class=\"token operator\">=<\/span><span class=\"token string\">\"Orange\"<\/span><span class=\"token operator\">&gt;<\/span>Orange<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>span<span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>h4<span class=\"token operator\">&gt;<\/span>\n    <span class=\"token operator\">&lt;<\/span>p <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"card-text\"<\/span><span class=\"token operator\">&gt;<\/span>Price<span class=\"token operator\">:<\/span> $<span class=\"token number\">\u06f0.\u06f5<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>p<span class=\"token operator\">&gt;<\/span>\n    <span class=\"token operator\">&lt;<\/span>a href<span class=\"token operator\">=<\/span><span class=\"token string\">\"#\"<\/span> data<span class=\"token operator\">-<\/span>name<span class=\"token operator\">=<\/span><span class=\"token string\">\"Orange\"<\/span> data<span class=\"token operator\">-<\/span>price<span class=\"token operator\">=<\/span><span class=\"token string\">\"\u06f0.\u06f5\"<\/span> <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"add-to-cart btn btn-primary\"<\/span><span class=\"token operator\">&gt;<\/span>Add to cart<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>a<span class=\"token operator\">&gt;<\/span>\n  <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\n<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\n      <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\n      <span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"col\"<\/span><span class=\"token operator\">&gt;<\/span>\n        <span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"card\"<\/span> style<span class=\"token operator\">=<\/span><span class=\"token string\">\"width: 20rem;\"<\/span><span class=\"token operator\">&gt;<\/span>\n  <span class=\"token operator\">&lt;<\/span>img decoding<span class=\"token operator\">=<\/span><span class=\"token string\">\"async\"<\/span> <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"card-img-top\"<\/span> src<span class=\"token operator\">=<\/span><span class=\"token string\">\"http:\/\/images.all-free-download.com\/images\/graphicthumb\/vector_illustration_of_ripe_bananas_567893.jpg\"<\/span> alt<span class=\"token operator\">=<\/span><span class=\"token string\">\"Card image cap\"<\/span><span class=\"token operator\">&gt;<\/span>\n  <span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"card-block\"<\/span><span class=\"token operator\">&gt;<\/span>\n    <span class=\"token operator\">&lt;<\/span>h4 <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"card-title\"<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&lt;<\/span>span id<span class=\"token operator\">=<\/span><span class=\"token string\">\"Banana\"<\/span><span class=\"token operator\">&gt;<\/span>Banana<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>span<span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>h4<span class=\"token operator\">&gt;<\/span>\n    <span class=\"token operator\">&lt;<\/span>p <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"card-text\"<\/span><span class=\"token operator\">&gt;<\/span>Price<span class=\"token operator\">:<\/span> $<span class=\"token number\">\u06f1.\u06f2\u06f2<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>p<span class=\"token operator\">&gt;<\/span>\n    <span class=\"token operator\">&lt;<\/span>a href<span class=\"token operator\">=<\/span><span class=\"token string\">\"#\"<\/span> data<span class=\"token operator\">-<\/span>name<span class=\"token operator\">=<\/span><span class=\"token string\">\"Banana\"<\/span> data<span class=\"token operator\">-<\/span>price<span class=\"token operator\">=<\/span><span class=\"token string\">\"\u06f1.\u06f2\u06f2\"<\/span> <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"add-to-cart btn btn-primary\"<\/span><span class=\"token operator\">&gt;<\/span>Add to cart<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>a<span class=\"token operator\">&gt;<\/span>\n  <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\n<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\n      <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\n      <span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"col\"<\/span><span class=\"token operator\">&gt;<\/span>\n        <span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"card\"<\/span> style<span class=\"token operator\">=<\/span><span class=\"token string\">\"width: 20rem;\"<\/span><span class=\"token operator\">&gt;<\/span>\n  <span class=\"token operator\">&lt;<\/span>img decoding<span class=\"token operator\">=<\/span><span class=\"token string\">\"async\"<\/span> <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"card-img-top\"<\/span> src<span class=\"token operator\">=<\/span><span class=\"token string\">\"https:\/\/3.imimg.com\/data3\/IC\/JO\/MY-9839190\/organic-lemon-250x250.jpg\"<\/span> alt<span class=\"token operator\">=<\/span><span class=\"token string\">\"Card image cap\"<\/span><span class=\"token operator\">&gt;<\/span>\n  <span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"card-block\"<\/span><span class=\"token operator\">&gt;<\/span>\n    <span class=\"token operator\">&lt;<\/span>h4 <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"card-title\"<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&lt;<\/span>span id<span class=\"token operator\">=<\/span><span class=\"token string\">\"Lemon\"<\/span><span class=\"token operator\">&gt;<\/span>Lemon<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>span<span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>h4<span class=\"token operator\">&gt;<\/span>\n    <span class=\"token operator\">&lt;<\/span>p <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"card-text\"<\/span><span class=\"token operator\">&gt;<\/span>Price<span class=\"token operator\">:<\/span> $<span class=\"token number\">\u06f5<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>p<span class=\"token operator\">&gt;<\/span>\n    <span class=\"token operator\">&lt;<\/span>a href<span class=\"token operator\">=<\/span><span class=\"token string\">\"#\"<\/span> data<span class=\"token operator\">-<\/span>name<span class=\"token operator\">=<\/span><span class=\"token string\">\"Lemon\"<\/span> data<span class=\"token operator\">-<\/span>price<span class=\"token operator\">=<\/span><span class=\"token string\">\"\u06f5\"<\/span> <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"add-to-cart btn btn-primary\"<\/span><span class=\"token operator\">&gt;<\/span>Add to cart<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>a<span class=\"token operator\">&gt;<\/span>\n  <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\n<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\n      <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\n    <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\n<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\n\n\n <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">!<\/span><span class=\"token operator\">--<\/span> Modal <span class=\"token operator\">--<\/span><span class=\"token operator\">&gt;<\/span>\n<span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"modal fade\"<\/span> id<span class=\"token operator\">=<\/span><span class=\"token string\">\"cart\"<\/span> tabindex<span class=\"token operator\">=<\/span><span class=\"token string\">\"-\u06f1\"<\/span> role<span class=\"token operator\">=<\/span><span class=\"token string\">\"dialog\"<\/span> aria<span class=\"token operator\">-<\/span>labelledby<span class=\"token operator\">=<\/span><span class=\"token string\">\"exampleModalLabel\"<\/span> aria<span class=\"token operator\">-<\/span>hidden<span class=\"token operator\">=<\/span><span class=\"token string\">\"true\"<\/span><span class=\"token operator\">&gt;<\/span>\n  <span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"modal-dialog modal-lg\"<\/span> role<span class=\"token operator\">=<\/span><span class=\"token string\">\"document\"<\/span><span class=\"token operator\">&gt;<\/span>\n    <span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"modal-content\"<\/span><span class=\"token operator\">&gt;<\/span>\n      <span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"modal-header\"<\/span><span class=\"token operator\">&gt;<\/span>\n        <span class=\"token operator\">&lt;<\/span>h5 <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"modal-title\"<\/span> id<span class=\"token operator\">=<\/span><span class=\"token string\">\"exampleModalLabel\"<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&lt;<\/span>span id<span class=\"token operator\">=<\/span><span class=\"token string\">\"Cart\"<\/span><span class=\"token operator\">&gt;<\/span>Cart<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>span<span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>h5<span class=\"token operator\">&gt;<\/span>\n        <span class=\"token operator\">&lt;<\/span>button type<span class=\"token operator\">=<\/span><span class=\"token string\">\"button\"<\/span> <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"close\"<\/span> data<span class=\"token operator\">-<\/span>dismiss<span class=\"token operator\">=<\/span><span class=\"token string\">\"modal\"<\/span> aria<span class=\"token operator\">-<\/span>label<span class=\"token operator\">=<\/span><span class=\"token string\">\"Close\"<\/span><span class=\"token operator\">&gt;<\/span>\n          <span class=\"token operator\">&lt;<\/span>span aria<span class=\"token operator\">-<\/span>hidden<span class=\"token operator\">=<\/span><span class=\"token string\">\"true\"<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&amp;<\/span>times<span class=\"token punctuation\">;<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>span<span class=\"token operator\">&gt;<\/span>\n        <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>button<span class=\"token operator\">&gt;<\/span>\n      <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\n      <span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"modal-body\"<\/span><span class=\"token operator\">&gt;<\/span>\n        <span class=\"token operator\">&lt;<\/span>table <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"show-cart table\"<\/span><span class=\"token operator\">&gt;<\/span>\n\n        <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>table<span class=\"token operator\">&gt;<\/span>\n        <span class=\"token operator\">&lt;<\/span>div<span class=\"token operator\">&gt;<\/span>Total price<span class=\"token operator\">:<\/span> $<span class=\"token operator\">&lt;<\/span>span <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"total-cart\"<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>span<span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\n      <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\n      <span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"modal-footer\"<\/span><span class=\"token operator\">&gt;<\/span>\n        <span class=\"token operator\">&lt;<\/span>button type<span class=\"token operator\">=<\/span><span class=\"token string\">\"button\"<\/span> <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"btn btn-secondary\"<\/span> data<span class=\"token operator\">-<\/span>dismiss<span class=\"token operator\">=<\/span><span class=\"token string\">\"modal\"<\/span><span class=\"token operator\">&gt;<\/span>Close<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>button<span class=\"token operator\">&gt;<\/span>\n        <span class=\"token operator\">&lt;<\/span>button type<span class=\"token operator\">=<\/span><span class=\"token string\">\"button\"<\/span> <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"btn btn-primary\"<\/span><span class=\"token operator\">&gt;<\/span>Order now<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>button<span class=\"token operator\">&gt;<\/span>\n      <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\n    <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\n  <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\n<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u0628\u0631\u0631\u0633\u06cc \u06a9\u062f \u0627\u0686 \u062a\u06cc \u0627\u0645 \u0627\u0644 \u0633\u0627\u062e\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/h3>\n\n\n\n<p>\u06a9\u062f HTML \u06a9\u0647 \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u060c \u0627\u0633\u06a9\u0644\u062a \u0627\u0635\u0644\u06cc \u06cc\u06a9 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0622\u0646\u0644\u0627\u06cc\u0646 \u0631\u0627 \u062a\u0634\u06a9\u06cc\u0644 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0646\u06af\u0627\u0647\u06cc \u062f\u0642\u06cc\u0642\u200c\u062a\u0631 \u0628\u0647 \u0627\u062c\u0632\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0622\u0646 \u0628\u06cc\u0646\u062f\u0627\u0632\u06cc\u0645 \u0648 \u0628\u0627 \u0632\u0628\u0627\u0646\u06cc \u0633\u0627\u062f\u0647\u060c \u0639\u0645\u0644\u06a9\u0631\u062f\u0634\u0627\u0646 \u0631\u0627 \u0634\u0631\u062d \u062f\u0647\u06cc\u0645:<\/p>\n\n\n\n<p><strong>\u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc (<\/strong><strong>Navigation Bar<\/strong><strong>):<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0627\u06cc\u0646 \u0628\u062e\u0634 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627\u06cc \u06a9\u062f \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u062f \u0648 \u0627\u0632 \u062a\u06af nav \u0633\u0627\u062e\u062a\u0647\u200c\u0634\u062f\u0647 \u0627\u0633\u062a.<\/li>\n\n\n\n<li>\u062f\u0627\u062e\u0644 \u0627\u06cc\u0646 \u0646\u0648\u0627\u0631\u060c \u06cc\u06a9 \u0631\u062f\u06cc\u0641 (row) \u0648 \u06cc\u06a9 \u0633\u062a\u0648\u0646 (col) \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0634\u0627\u0645\u0644 \u062f\u0648 \u062f\u06a9\u0645\u0647 \u0627\u0633\u062a.<\/li>\n\n\n\n<li>\u062f\u06a9\u0645\u0647 \u0627\u0648\u0644 \u0628\u0627 \u0645\u062a\u0646 Cart\u060c \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0645\u06a9\u0627\u0646 \u0645\u0634\u0627\u0647\u062f\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f. \u062a\u0639\u062f\u0627\u062f \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u062f\u0627\u062e\u0644 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0646\u06cc\u0632 \u06a9\u0646\u0627\u0631 \u0645\u062a\u0646 \u062f\u06a9\u0645\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f (\u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631\u060c \u0627\u06cc\u0646 \u062a\u0639\u062f\u0627\u062f \u0628\u0627 \u06cc\u06a9 \u0627\u0633\u067e\u0627\u0646 \u0628\u0627 \u06a9\u0644\u0627\u0633 total-count \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u06a9\u0647 \u0645\u0642\u062f\u0627\u0631 \u0622\u0646 \u0628\u0627\u06cc\u062f \u062a\u0648\u0633\u0637 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062a\u0639\u06cc\u06cc\u0646 \u0634\u0648\u062f).<\/li>\n\n\n\n<li>\u062f\u06a9\u0645\u0647 \u062f\u0648\u0645 \u0628\u0627 \u0645\u062a\u0646 Clear cart\u060c \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u062e\u0648\u062f \u0631\u0627 \u062e\u0627\u0644\u06cc \u06a9\u0646\u062f.<\/li>\n<\/ul>\n\n\n\n<p><strong>\u0645\u062d\u0635\u0648\u0644\u0627\u062a (<\/strong><strong>Main<\/strong><strong>):<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0627\u06cc\u0646 \u0628\u062e\u0634\u060c \u0642\u0633\u0645\u062a \u0627\u0635\u0644\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0631\u0627 \u062a\u0634\u06a9\u06cc\u0644 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/li>\n\n\n\n<li>\u06cc\u06a9 \u0631\u062f\u06cc\u0641 (row) \u0628\u0627 \u0633\u0647 \u0633\u062a\u0648\u0646 (col) \u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f.<\/li>\n\n\n\n<li>\u062f\u0627\u062e\u0644 \u0647\u0631 \u0633\u062a\u0648\u0646\u060c \u06cc\u06a9 \u06a9\u0627\u0631\u062a \u0645\u062d\u0635\u0648\u0644 (card) \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a\u0647 \u0627\u0633\u062a.<\/li>\n\n\n\n<li>\u0647\u0631 \u06a9\u0627\u0631\u062a \u0645\u062d\u0635\u0648\u0644 \u0634\u0627\u0645\u0644 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0627\u0633\u062a:\n<ul class=\"wp-block-list\">\n<li>\u062a\u0635\u0648\u06cc\u0631 \u0645\u062d\u0635\u0648\u0644 (img)<\/li>\n\n\n\n<li>\u0639\u0646\u0648\u0627\u0646 \u0645\u062d\u0635\u0648\u0644 (h4)<\/li>\n\n\n\n<li>\u0642\u06cc\u0645\u062a \u0645\u062d\u0635\u0648\u0644 (p)<\/li>\n\n\n\n<li>\u062f\u06a9\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u06cc\u0627 Ad to Cart \u06a9\u0647 \u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u0628\u0631 \u0631\u0648\u06cc \u0622\u0646\u060c \u0645\u062d\u0635\u0648\u0644 \u0628\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/li>\n\n\n\n<li>\u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u06cc\u0646 \u062f\u06a9\u0645\u0647 \u062f\u0627\u0631\u0627\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0627\u0636\u0627\u0641\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062a\u0648\u0633\u0637 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc data-name (\u0646\u0627\u0645 \u0645\u062d\u0635\u0648\u0644) \u0648 data-price (\u0642\u06cc\u0645\u062a \u0645\u062d\u0635\u0648\u0644) \u062d\u0645\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f. \u0627\u06cc\u0646 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062f\u0631 \u0628\u062e\u0634 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0645\u0648\u0631\u062f\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0642\u0631\u0627\u0631 \u062e\u0648\u0627\u0647\u0646\u062f \u06af\u0631\u0641\u062a.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>\u067e\u0646\u062c\u0631\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f (<\/strong><strong>Modal<\/strong><strong>):<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0627\u06cc\u0646 \u0628\u062e\u0634 \u0627\u0632 \u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0627 \u062a\u06af\u200c\u0647\u0627\u06cc div \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0645\u0648\u062f\u0627\u0644 \u0633\u0627\u062e\u062a\u0647\u200c\u0634\u062f\u0647 \u0627\u0633\u062a.<\/li>\n\n\n\n<li>\u0645\u0648\u062f\u0627\u0644 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0645\u06a9\u0627\u0646 \u0645\u0634\u0627\u0647\u062f\u0647 \u062c\u0632\u0626\u06cc\u0627\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/li>\n\n\n\n<li>\u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u0628\u0631 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f\u060c \u0627\u06cc\u0646 \u067e\u0646\u062c\u0631\u0647 \u0638\u0627\u0647\u0631 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/li>\n\n\n\n<li>\u062f\u0627\u062e\u0644 \u0627\u06cc\u0646 \u067e\u0646\u062c\u0631\u0647\u060c \u06cc\u06a9 \u062c\u062f\u0648\u0644 (table) \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0644\u06cc\u0633\u062a \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u062f\u0631 \u0646\u0638\u0631 \u06af\u0631\u0641\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a (\u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0641\u0639\u0644\u0627\u064b \u0627\u06cc\u0646 \u062c\u062f\u0648\u0644 \u062e\u0627\u0644\u06cc \u0627\u0633\u062a \u0648 \u0628\u0627\u06cc\u062f \u062a\u0648\u0633\u0637 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u067e\u0631 \u0634\u0648\u062f).<\/li>\n\n\n\n<li>\u0647\u0645\u0686\u0646\u06cc\u0646\u060c \u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634\u060c \u0645\u0642\u062f\u0627\u0631 \u06a9\u0644 \u0647\u0632\u06cc\u0646\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f (total-cart) \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/li>\n\n\n\n<li>\u062f\u0631 \u0627\u0646\u062a\u0647\u0627\u06cc \u067e\u0646\u062c\u0631\u0647\u060c \u062f\u0648 \u062f\u06a9\u0645\u0647 Close \u0648 Order \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f.<\/li>\n<\/ul>\n\n\n\n<p>\u06a9\u062f HTML \u0641\u0648\u0642 \u0627\u0632 \u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0627 Javascript \u0635\u0631\u0641\u0627\u064b \u0633\u0627\u062e\u062a\u0627\u0631 \u06a9\u0644\u06cc \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0627\u06cc\u0646 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u06a9\u0627\u0631 \u06a9\u0646\u062f\u060c \u0646\u06cc\u0627\u0632 \u0628\u0647 \u06a9\u062f\u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0627\u0631\u06cc\u0645 \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 \u0639\u0645\u0644\u06a9\u0631\u062f\u0647\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f\u060c \u0646\u0645\u0627\u06cc\u0634 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f\u060c \u062d\u0630\u0641 \u0627\u0632 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0648 \u0645\u062d\u0627\u0633\u0628\u0647 \u06a9\u0644 \u0647\u0632\u06cc\u0646\u0647 \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0646\u0645\u0627\u06cc\u06cc\u0645 \u06a9\u0647 \u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0628\u0647 \u0622\u0646 \u062e\u0648\u0627\u0647\u06cc\u0645 \u067e\u0631\u062f\u0627\u062e\u062a.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0642\u0637\u0639\u0647 \u06a9\u062f CSS \u0633\u0627\u062e\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/h3>\n\n\n\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634 \u0628\u0647 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u062f\u0647\u06cc \u0628\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u067e\u0631\u062f\u0627\u062e\u062a. \u0642\u0637\u0639\u0647 \u06a9\u062f \u0627\u06cc\u0646 \u0628\u062e\u0634 \u0627\u0632 \u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body <span class=\"token punctuation\">{<\/span>\n  padding<span class=\"token operator\">-<\/span>top<span class=\"token operator\">:<\/span> <span class=\"token number\">\u06f8\u06f0<\/span>px<span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">.<\/span>show<span class=\"token operator\">-<\/span>cart li <span class=\"token punctuation\">{<\/span>\n  display<span class=\"token operator\">:<\/span> flex<span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">.<\/span>card <span class=\"token punctuation\">{<\/span>\n  margin<span class=\"token operator\">-<\/span>bottom<span class=\"token operator\">:<\/span> <span class=\"token number\">\u06f2\u06f0<\/span>px<span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">.<\/span>card<span class=\"token operator\">-<\/span>img<span class=\"token operator\">-<\/span>top <span class=\"token punctuation\">{<\/span>\n  width<span class=\"token operator\">:<\/span> <span class=\"token number\">\u06f2\u06f0\u06f0<\/span>px<span class=\"token punctuation\">;<\/span>\n  height<span class=\"token operator\">:<\/span> <span class=\"token number\">\u06f2\u06f0\u06f0<\/span>px<span class=\"token punctuation\">;<\/span>\n  align<span class=\"token operator\">-<\/span>self<span class=\"token operator\">:<\/span> center<span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u0628\u0631\u0631\u0633\u06cc \u06a9\u062f CSS \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u06cc<\/h4>\n\n\n\n<p>\u06a9\u062f CSS \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u062f\u0631 \u06a9\u0646\u0627\u0631 \u06a9\u062f HTML\u060c \u0628\u0647 \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0647\u06cc \u0648 \u0686\u06cc\u062f\u0645\u0627\u0646 \u0639\u0646\u0627\u0635\u0631 \u0645\u062e\u062a\u0644\u0641 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0648\u0628 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0646\u06af\u0627\u0647\u06cc \u0628\u0647 \u062c\u0632\u0626\u06cc\u0627\u062a \u0627\u06cc\u0646 \u06a9\u062f \u0628\u06cc\u0646\u062f\u0627\u0632\u06cc\u0645:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"802\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/6298f75a-2dc2-4049-b95a-1cfffbd396ea.jpg\" alt=\"\u0628\u0631\u0631\u0633\u06cc \u06a9\u062f CSS \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u06cc\" class=\"wp-image-39312 lazyload\" title=\"\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/6298f75a-2dc2-4049-b95a-1cfffbd396ea.jpg 1024w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/6298f75a-2dc2-4049-b95a-1cfffbd396ea-300x235.jpg.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/6298f75a-2dc2-4049-b95a-1cfffbd396ea-768x602.jpg.webp 768w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/802;\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<p><strong>\u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u06a9\u0644\u06cc:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>body { padding-top: 80px; }: \u0627\u06cc\u0646 \u06a9\u062f \u0628\u0647 \u0628\u062f\u0646\u0647 \u0635\u0641\u062d\u0647 (body) \u06cc\u06a9 \u0641\u0627\u0635\u0644\u0647 \u06af\u0630\u0627\u0631\u06cc \u06f8\u06f0 \u067e\u06cc\u06a9\u0633\u0644 \u0627\u0632 \u0628\u0627\u0644\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0641\u0636\u0627\u06cc\u06cc \u0628\u06cc\u0646 \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u0648 \u0645\u062d\u062a\u0648\u0627\u06cc \u0627\u0635\u0644\u06cc \u0635\u0641\u062d\u0647 \u0645\u0641\u06cc\u062f \u0628\u0627\u0634\u062f.<\/li>\n<\/ul>\n\n\n\n<p><strong>\u0633\u0628\u06a9 \u062f\u0647\u06cc \u0628\u0647 \u0644\u06cc\u0633\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>.show-cart li { display: flex; }: \u0627\u06cc\u0646 \u06a9\u062f \u0628\u0647 \u0647\u0631 \u0622\u06cc\u062a\u0645 (li) \u062f\u0631 \u0644\u06cc\u0633\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f (\u0628\u0627 \u06a9\u0644\u0627\u0633 show-cart) \u0627\u0633\u062a\u0627\u06cc\u0644 flexbox \u0645\u06cc\u200c\u062f\u0647\u062f. \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0627\u0639\u062b \u0645\u06cc\u200c\u0634\u0648\u062f \u06a9\u0647 \u0622\u06cc\u062a\u0645\u200c\u0647\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0631\u062f\u06cc\u0641\u06cc \u062f\u0631 \u06a9\u0646\u0627\u0631 \u0647\u0645 \u0642\u0631\u0627\u0631 \u0628\u06af\u06cc\u0631\u0646\u062f \u0648 \u0641\u0636\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0645\u0633\u0627\u0648\u06cc \u062a\u0642\u0633\u06cc\u0645 \u06a9\u0646\u0646\u062f.<\/li>\n<\/ul>\n\n\n\n<p><strong>\u0633\u0628\u06a9 \u062f\u0647\u06cc \u0628\u0647 \u06a9\u0627\u0631\u062a\u200c\u0647\u0627\u06cc \u0645\u062d\u0635\u0648\u0644:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>.card { margin-bottom: 20px; }: \u0627\u06cc\u0646 \u06a9\u062f \u0628\u0647 \u0647\u0631 \u06a9\u0627\u0631\u062a \u0645\u062d\u0635\u0648\u0644 (card) \u06cc\u06a9 \u0641\u0627\u0635\u0644\u0647 \u06af\u0630\u0627\u0631\u06cc \u06f2\u06f0 \u067e\u06cc\u06a9\u0633\u0644 \u0627\u0632 \u067e\u0627\u06cc\u06cc\u0646 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0627\u0639\u062b \u0645\u06cc\u200c\u0634\u0648\u062f \u06a9\u0647 \u06a9\u0627\u0631\u062a\u200c\u0647\u0627 \u0628\u0627\u0641\u0627\u0635\u0644\u0647\u200c\u06cc \u0645\u0646\u0627\u0633\u0628 \u0627\u0632 \u06cc\u06a9\u062f\u06cc\u06af\u0631 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u0646\u062f.<\/li>\n<\/ul>\n\n\n\n<p><strong>\u0633\u0628\u06a9 \u062f\u0647\u06cc \u0628\u0647 \u062a\u0635\u0648\u06cc\u0631 \u0645\u062d\u0635\u0648\u0644:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>.card-img-top { width: 200px; height: 200px; align-self: center; }: \u0627\u06cc\u0646 \u06a9\u062f \u0628\u0647 \u062a\u0635\u0648\u06cc\u0631 \u0645\u062d\u0635\u0648\u0644 (card-img-top) \u062f\u0631 \u062f\u0627\u062e\u0644 \u06a9\u0627\u0631\u062a\u200c\u0647\u0627 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0645\u06cc\u200c\u062f\u0647\u062f. \u062c\u0632\u0626\u06cc\u0627\u062a \u0627\u06cc\u0646 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0628\u0647 \u0634\u0631\u062d \u0632\u06cc\u0631 \u0627\u0633\u062a:\n<ul class=\"wp-block-list\">\n<li>width: 200px;: \u0639\u0631\u0636 \u062a\u0635\u0648\u06cc\u0631 \u06f2\u06f0\u06f0 \u067e\u06cc\u06a9\u0633\u0644 \u062a\u0639\u06cc\u06cc\u0646 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/li>\n\n\n\n<li>height: 200px;: \u0627\u0631\u062a\u0641\u0627\u0639 \u062a\u0635\u0648\u06cc\u0631 \u06f2\u06f0\u06f0 \u067e\u06cc\u06a9\u0633\u0644 \u062a\u0639\u06cc\u06cc\u0646 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/li>\n\n\n\n<li>align-self: center;: \u062a\u0635\u0648\u06cc\u0631 \u0628\u0647 \u0635\u0648\u0631\u062a \u0639\u0645\u0648\u062f\u06cc \u062f\u0631 \u0645\u0631\u06a9\u0632 \u06a9\u0627\u0631\u062a \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n<div class=\"jet-listing-grid--50121\" style=\"\"><div class=\"jet-listing-dynamic-field-block zht-maktab-khooneh-course cb-fb2qc30r\"data-is-block=\"jet-engine\/dynamic-field\"><div class=\"jet-listing-dynamic-field__content\" >\n<div class=\"course-card\">\n    <div class=\"course-card-img\">\n        <img decoding=\"async\" \n            data-src=\"https:\/\/media1.maktabkhooneh.org\/CACHE\/images\/courses\/images\/HTML_Qhq5DTI_1403-08-16-164537770\/8baf27066913f44bec32b4534a429d52.webp?expire=4893471932&#038;token=afbe4b4cb4fedc0da3e390b25320ffc0&#038;md5=r75LTLT-3A2j45CyUyD_wA==\" \n            alt=\"\u0622\u0645\u0648\u0632\u0634 HTML \u0648 CSS\" \n            title=\"\u0622\u0645\u0648\u0632\u0634 HTML \u0648 CSS\" \n            width=\"100%\" \n            height=\"auto\"\n           \n         src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\n    <\/div>\n\n    <div class=\"course-details\">\n        <a href=\"https:\/\/maktabkhooneh.org\/course\/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D9%86%D9%88%DB%8C%D8%B3%DB%8C-html-css-mk865\/\" class=\"course-title\" target=\"_blank\" rel=\"noopener noreferrer\">\n            \u0622\u0645\u0648\u0632\u0634 HTML \u0648 CSS        <\/a>\n\n        <div class=\"course-price\">\n            \n                <span class=\"real-price\">\n                                            \u06f1,\u06f4\u06f9\u06f9,\u06f0\u06f0\u06f0                                    <\/span>\n\n                <span>\n                    <span class=\"discounted-price\">\n                        \u06f5\u06f9\u06f9,\u06f6\u06f0\u06f0                    <\/span>\n                    <span class=\"price-currency\">\u062a\u0648\u0645\u0627\u0646<\/span>\n                <\/span>\n\n                                    <div class=\"discount-percentage\">\n                        \u06f6\u06f0%                    <\/div>\n                \n                    <\/div>\n        <button class=\"course-cta-button\" data-course-url=\"https:\/\/maktabkhooneh.org\/course\/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D9%86%D9%88%DB%8C%D8%B3%DB%8C-html-css-mk865\/\">\n            \u0645\u0634\u0627\u0647\u062f\u0647 \u0648 \u062e\u0631\u06cc\u062f        <\/button>\n    <\/div>\n<\/div>\n<\/div><\/div><\/div>\n\n\n<p>\u0627\u06cc\u0646 \u06a9\u062f CSS \u0641\u0642\u0637 \u0634\u0627\u0645\u0644 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u067e\u0627\u06cc\u0647\u200c\u0627\u06cc \u0628\u0631\u0627\u06cc \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0634\u0645\u0627 \u0627\u0633\u062a. \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0646\u06cc\u0627\u0632 \u062e\u0648\u062f\u062a\u0627\u0646\u060c \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u0631\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u06a9\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0638\u0627\u0647\u0631 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0631\u0627 \u0645\u0637\u0627\u0628\u0642 \u0633\u0644\u06cc\u0642\u0647 \u062e\u0648\u062f\u062a\u0627\u0646 \u0634\u062e\u0635\u06cc\u200c\u0633\u0627\u0632\u06cc \u0646\u0645\u0627\u06cc\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0631\u0646\u06af\u200c\u0647\u0627\u060c \u0641\u0648\u0646\u062a\u200c\u0647\u0627\u060c \u062d\u0627\u0634\u06cc\u0647\u200c\u0647\u0627 \u0648 \u0633\u0627\u06cc\u0647\u200c\u0647\u0627 \u0631\u0627 \u0628\u0647\u200c\u062f\u0644\u062e\u0648\u0627\u0647 \u062e\u0648\u062f\u062a\u0627\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f.<\/p>\n\n\n<div class=\"jet-listing-grid--50192\" style=\"\"><section class=\"zht-related-post\" itemscope=\"\" itemtype=\"https:\/\/schema.org\/Article\" role=\"region\"\n  aria-label=\"Related article\">\n  <div class=\"zht-related-post-section-label\">\n    \u0645\u0637\u0627\u0644\u0628 \u0645\u0631\u062a\u0628\u0637\n  <\/div>\n  <img decoding=\"async\" width=\"300\" height=\"202\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/word-image-39298-2-300x202.png.webp\" class=\"attachment-medium size-medium wp-post-image lazyload\" alt=\"\u0622\u0645\u0648\u0632\u0634 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0631 \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/word-image-39298-2-300x202.png.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/word-image-39298-2-768x518.png.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/word-image-39298-2.png 922w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/202;\">\n  <a href=\"https:\/\/maktabkhooneh.org\/mag\/javascript-in-web-design\/\" class=\"zht-related-post-title\"\n    itemprop=\"headline\" target=\"_blank\">\u0622\u0645\u0648\u0632\u0634 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0631 \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a &#8211; \u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627 \u0648 \u0645\u0632\u0627\u06cc\u0627<\/a>\n<\/section><\/div>\n\n\n<h2 class=\"wp-block-heading\">\u0642\u0637\u0639\u0647 \u06a9\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0633\u0627\u062e\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f<\/h2>\n\n\n\n<p>\u062f\u0631\u0646\u0647\u0627\u06cc\u062a \u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u0641\u0627\u06cc\u0644 \u0627\u0635\u0644\u06cc \u067e\u0631\u0648\u0698\u0647 \u06cc\u0627 \u0647\u0645\u0627\u0646 \u06a9\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0633\u0627\u062e\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0645\u06cc\u200c\u0631\u0633\u06cc\u0645 \u06a9\u0647 \u062d\u0627\u0648\u06cc \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span class=\"token comment\">\/\/ ************************************************<\/span>\n<span class=\"token comment\">\/\/ Shopping Cart API<\/span>\n<span class=\"token comment\">\/\/ ************************************************<\/span>\n\n<span class=\"token keyword\">var<\/span> shoppingCart <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token comment\">\/\/ =============================<\/span>\n  <span class=\"token comment\">\/\/ Private methods and propeties<\/span>\n  <span class=\"token comment\">\/\/ =============================<\/span>\n  cart <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">&#91;<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token comment\">\/\/ Constructor<\/span>\n  <span class=\"token keyword\">function<\/span> <span class=\"token function\">Item<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">name<span class=\"token punctuation\">,<\/span> price<span class=\"token punctuation\">,<\/span> count<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>name <span class=\"token operator\">=<\/span> name<span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>price <span class=\"token operator\">=<\/span> price<span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">=<\/span> count<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">\/\/ Save cart<\/span>\n  <span class=\"token keyword\">function<\/span> <span class=\"token function\">saveCart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    sessionStorage<span class=\"token punctuation\">.<\/span><span class=\"token function\">setItem<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'shoppingCart'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token constant\">JSON<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">stringify<\/span><span class=\"token punctuation\">(<\/span>cart<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n    <span class=\"token comment\">\/\/ Load cart<\/span>\n  <span class=\"token keyword\">function<\/span> <span class=\"token function\">loadCart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    cart <span class=\"token operator\">=<\/span> <span class=\"token constant\">JSON<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">parse<\/span><span class=\"token punctuation\">(<\/span>sessionStorage<span class=\"token punctuation\">.<\/span><span class=\"token function\">getItem<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'shoppingCart'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>sessionStorage<span class=\"token punctuation\">.<\/span><span class=\"token function\">getItem<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"shoppingCart\"<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">!=<\/span> <span class=\"token keyword\">null<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token function\">loadCart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n\n  <span class=\"token comment\">\/\/ =============================<\/span>\n  <span class=\"token comment\">\/\/ Public methods and propeties<\/span>\n  <span class=\"token comment\">\/\/ =============================<\/span>\n  <span class=\"token keyword\">var<\/span> obj <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token comment\">\/\/ Add to cart<\/span>\n  obj<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">addItemToCart<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">name<span class=\"token punctuation\">,<\/span> price<span class=\"token punctuation\">,<\/span> count<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">for<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">var<\/span> item <span class=\"token keyword\">in<\/span> cart<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span>cart<span class=\"token punctuation\">&#91;<\/span>item<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>name <span class=\"token operator\">===<\/span> name<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n        cart<span class=\"token punctuation\">&#91;<\/span>item<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span>\n        <span class=\"token function\">saveCart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n        <span class=\"token keyword\">return<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token punctuation\">}<\/span>\n    <span class=\"token punctuation\">}<\/span>\n    <span class=\"token keyword\">var<\/span> item <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Item<\/span><span class=\"token punctuation\">(<\/span>name<span class=\"token punctuation\">,<\/span> price<span class=\"token punctuation\">,<\/span> count<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    cart<span class=\"token punctuation\">.<\/span><span class=\"token function\">push<\/span><span class=\"token punctuation\">(<\/span>item<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token function\">saveCart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  <span class=\"token comment\">\/\/ Set count from item<\/span>\n  obj<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">setCountForItem<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">name<span class=\"token punctuation\">,<\/span> count<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">for<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">var<\/span> i <span class=\"token keyword\">in<\/span> cart<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>cart<span class=\"token punctuation\">&#91;<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>name <span class=\"token operator\">===<\/span> name<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n        cart<span class=\"token punctuation\">&#91;<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">=<\/span> count<span class=\"token punctuation\">;<\/span>\n        <span class=\"token keyword\">break<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token punctuation\">}<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token comment\">\/\/ Remove item from cart<\/span>\n  obj<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">removeItemFromCart<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">name<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">for<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">var<\/span> item <span class=\"token keyword\">in<\/span> cart<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n        <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span>cart<span class=\"token punctuation\">&#91;<\/span>item<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>name <span class=\"token operator\">===<\/span> name<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n          cart<span class=\"token punctuation\">&#91;<\/span>item<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">--<\/span><span class=\"token punctuation\">;<\/span>\n          <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span>cart<span class=\"token punctuation\">&#91;<\/span>item<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">===<\/span> <span class=\"token number\">\u06f0<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n            cart<span class=\"token punctuation\">.<\/span><span class=\"token function\">splice<\/span><span class=\"token punctuation\">(<\/span>item<span class=\"token punctuation\">,<\/span> <span class=\"token number\">\u06f1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n          <span class=\"token punctuation\">}<\/span>\n          <span class=\"token keyword\">break<\/span><span class=\"token punctuation\">;<\/span>\n        <span class=\"token punctuation\">}<\/span>\n    <span class=\"token punctuation\">}<\/span>\n    <span class=\"token function\">saveCart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">\/\/ Remove all items from cart<\/span>\n  obj<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">removeItemFromCartAll<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">name<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">for<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">var<\/span> item <span class=\"token keyword\">in<\/span> cart<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">if<\/span><span class=\"token punctuation\">(<\/span>cart<span class=\"token punctuation\">&#91;<\/span>item<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>name <span class=\"token operator\">===<\/span> name<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n        cart<span class=\"token punctuation\">.<\/span><span class=\"token function\">splice<\/span><span class=\"token punctuation\">(<\/span>item<span class=\"token punctuation\">,<\/span> <span class=\"token number\">\u06f1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n        <span class=\"token keyword\">break<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token punctuation\">}<\/span>\n    <span class=\"token punctuation\">}<\/span>\n    <span class=\"token function\">saveCart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">\/\/ Clear cart<\/span>\n  obj<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">clearCart<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    cart <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">&#91;<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token function\">saveCart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">\/\/ Count cart<\/span>\n  obj<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">totalCount<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">var<\/span> totalCount <span class=\"token operator\">=<\/span> <span class=\"token number\">\u06f0<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">for<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">var<\/span> item <span class=\"token keyword\">in<\/span> cart<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      totalCount <span class=\"token operator\">+=<\/span> cart<span class=\"token punctuation\">&#91;<\/span>item<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n    <span class=\"token keyword\">return<\/span> totalCount<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">\/\/ Total cart<\/span>\n  obj<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">totalCart<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">var<\/span> totalCart <span class=\"token operator\">=<\/span> <span class=\"token number\">\u06f0<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">for<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">var<\/span> item <span class=\"token keyword\">in<\/span> cart<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      totalCart <span class=\"token operator\">+=<\/span> cart<span class=\"token punctuation\">&#91;<\/span>item<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>price <span class=\"token operator\">*<\/span> cart<span class=\"token punctuation\">&#91;<\/span>item<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token function\">Number<\/span><span class=\"token punctuation\">(<\/span>totalCart<span class=\"token punctuation\">.<\/span><span class=\"token function\">toFixed<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">\u06f2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">\/\/ List cart<\/span>\n  obj<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">listCart<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">var<\/span> cartCopy <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">&#91;<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">for<\/span><span class=\"token punctuation\">(<\/span>i <span class=\"token keyword\">in<\/span> cart<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      item <span class=\"token operator\">=<\/span> cart<span class=\"token punctuation\">&#91;<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n      itemCopy <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">for<\/span><span class=\"token punctuation\">(<\/span>p <span class=\"token keyword\">in<\/span> item<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n        itemCopy<span class=\"token punctuation\">&#91;<\/span>p<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> item<span class=\"token punctuation\">&#91;<\/span>p<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n\n      <span class=\"token punctuation\">}<\/span>\n      itemCopy<span class=\"token punctuation\">.<\/span>total <span class=\"token operator\">=<\/span> <span class=\"token function\">Number<\/span><span class=\"token punctuation\">(<\/span>item<span class=\"token punctuation\">.<\/span>price <span class=\"token operator\">*<\/span> item<span class=\"token punctuation\">.<\/span>count<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toFixed<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">\u06f2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      cartCopy<span class=\"token punctuation\">.<\/span><span class=\"token function\">push<\/span><span class=\"token punctuation\">(<\/span>itemCopy<span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">}<\/span>\n    <span class=\"token keyword\">return<\/span> cartCopy<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token comment\">\/\/ cart : Array<\/span>\n  <span class=\"token comment\">\/\/ Item : Object\/Class<\/span>\n  <span class=\"token comment\">\/\/ addItemToCart : Function<\/span>\n  <span class=\"token comment\">\/\/ removeItemFromCart : Function<\/span>\n  <span class=\"token comment\">\/\/ removeItemFromCartAll : Function<\/span>\n  <span class=\"token comment\">\/\/ clearCart : Function<\/span>\n  <span class=\"token comment\">\/\/ countCart : Function<\/span>\n  <span class=\"token comment\">\/\/ totalCart : Function<\/span>\n  <span class=\"token comment\">\/\/ listCart : Function<\/span>\n  <span class=\"token comment\">\/\/ saveCart : Function<\/span>\n  <span class=\"token comment\">\/\/ loadCart : Function<\/span>\n  <span class=\"token keyword\">return<\/span> obj<span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n\n<span class=\"token comment\">\/\/ *****************************************<\/span>\n<span class=\"token comment\">\/\/ Triggers \/ Events<\/span>\n<span class=\"token comment\">\/\/ *****************************************<\/span>\n<span class=\"token comment\">\/\/ Add item<\/span>\n<span class=\"token function\">$<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.add-to-cart'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">click<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">event<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  event<span class=\"token punctuation\">.<\/span><span class=\"token function\">preventDefault<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token keyword\">var<\/span> name <span class=\"token operator\">=<\/span> <span class=\"token function\">$<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">data<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'name'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token keyword\">var<\/span> price <span class=\"token operator\">=<\/span> <span class=\"token function\">Number<\/span><span class=\"token punctuation\">(<\/span><span class=\"token function\">$<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">data<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'price'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  shoppingCart<span class=\"token punctuation\">.<\/span><span class=\"token function\">addItemToCart<\/span><span class=\"token punctuation\">(<\/span>name<span class=\"token punctuation\">,<\/span> price<span class=\"token punctuation\">,<\/span> <span class=\"token number\">\u06f1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token function\">displayCart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token comment\">\/\/ Clear items<\/span>\n<span class=\"token function\">$<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.clear-cart'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">click<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  shoppingCart<span class=\"token punctuation\">.<\/span><span class=\"token function\">clearCart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token function\">displayCart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">displayCart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">var<\/span> cartArray <span class=\"token operator\">=<\/span> shoppingCart<span class=\"token punctuation\">.<\/span><span class=\"token function\">listCart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token keyword\">var<\/span> output <span class=\"token operator\">=<\/span> <span class=\"token string\">\"\"<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token keyword\">for<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">var<\/span> i <span class=\"token keyword\">in<\/span> cartArray<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    output <span class=\"token operator\">+=<\/span> <span class=\"token string\">\"&lt;tr&gt;\"<\/span>\n      <span class=\"token operator\">+<\/span> <span class=\"token string\">\"&lt;td&gt;\"<\/span> <span class=\"token operator\">+<\/span> cartArray<span class=\"token punctuation\">&#91;<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>name <span class=\"token operator\">+<\/span> <span class=\"token string\">\"&lt;\/td&gt;\"<\/span>\n      <span class=\"token operator\">+<\/span> <span class=\"token string\">\"&lt;td&gt;(\"<\/span> <span class=\"token operator\">+<\/span> cartArray<span class=\"token punctuation\">&#91;<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>price <span class=\"token operator\">+<\/span> <span class=\"token string\">\")&lt;\/td&gt;\"<\/span>\n      <span class=\"token operator\">+<\/span> <span class=\"token string\">\"&lt;td&gt;&lt;div class=\"<\/span>input<span class=\"token operator\">-<\/span>group<span class=\"token string\">\"&gt;&lt;button class=\"<\/span>minus<span class=\"token operator\">-<\/span>item input<span class=\"token operator\">-<\/span>group<span class=\"token operator\">-<\/span>addon btn btn<span class=\"token operator\">-<\/span>primary<span class=\"token string\">\" data-name=\"<\/span> <span class=\"token operator\">+<\/span> cartArray<span class=\"token punctuation\">&#91;<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>name <span class=\"token operator\">+<\/span> <span class=\"token string\">\"&gt;-&lt;\/button&gt;\"<\/span>\n      <span class=\"token operator\">+<\/span> <span class=\"token string\">\"&lt;input type=\"<\/span>number<span class=\"token string\">\" class=\"<\/span>item<span class=\"token operator\">-<\/span>count form<span class=\"token operator\">-<\/span>control<span class=\"token string\">\" data-name='\"<\/span> <span class=\"token operator\">+<\/span> cartArray<span class=\"token punctuation\">&#91;<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>name <span class=\"token operator\">+<\/span> <span class=\"token string\">\"' value='\"<\/span> <span class=\"token operator\">+<\/span> cartArray<span class=\"token punctuation\">&#91;<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>count <span class=\"token operator\">+<\/span> <span class=\"token string\">\"'&gt;\"<\/span>\n      <span class=\"token operator\">+<\/span> <span class=\"token string\">\"&lt;button class=\"<\/span>plus<span class=\"token operator\">-<\/span>item btn btn<span class=\"token operator\">-<\/span>primary input<span class=\"token operator\">-<\/span>group<span class=\"token operator\">-<\/span>addon<span class=\"token string\">\" data-name=\"<\/span> <span class=\"token operator\">+<\/span> cartArray<span class=\"token punctuation\">&#91;<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>name <span class=\"token operator\">+<\/span> <span class=\"token string\">\"&gt;+&lt;\/button&gt;&lt;\/div&gt;&lt;\/td&gt;\"<\/span>\n      <span class=\"token operator\">+<\/span> <span class=\"token string\">\"&lt;td&gt;&lt;button class=\"<\/span><span class=\"token keyword\">delete<\/span><span class=\"token operator\">-<\/span>item btn btn<span class=\"token operator\">-<\/span>danger<span class=\"token string\">\" data-name=\"<\/span> <span class=\"token operator\">+<\/span> cartArray<span class=\"token punctuation\">&#91;<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>name <span class=\"token operator\">+<\/span> <span class=\"token string\">\"&gt;X&lt;\/button&gt;&lt;\/td&gt;\"<\/span>\n      <span class=\"token operator\">+<\/span> <span class=\"token string\">\" = \"<\/span>\n      <span class=\"token operator\">+<\/span> <span class=\"token string\">\"&lt;td&gt;\"<\/span> <span class=\"token operator\">+<\/span> cartArray<span class=\"token punctuation\">&#91;<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>total <span class=\"token operator\">+<\/span> <span class=\"token string\">\"&lt;\/td&gt;\"<\/span>\n      <span class=\"token operator\">+<\/span>  <span class=\"token string\">\"&lt;\/tr&gt;\"<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  <span class=\"token function\">$<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.show-cart'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">html<\/span><span class=\"token punctuation\">(<\/span>output<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token function\">$<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.total-cart'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">html<\/span><span class=\"token punctuation\">(<\/span>shoppingCart<span class=\"token punctuation\">.<\/span><span class=\"token function\">totalCart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token function\">$<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.total-count'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">html<\/span><span class=\"token punctuation\">(<\/span>shoppingCart<span class=\"token punctuation\">.<\/span><span class=\"token function\">totalCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token comment\">\/\/ Delete item button<\/span>\n\n<span class=\"token function\">$<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.show-cart'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">on<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">\".delete-item\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">event<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">var<\/span> name <span class=\"token operator\">=<\/span> <span class=\"token function\">$<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">data<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'name'<\/span><span class=\"token punctuation\">)<\/span>\n  shoppingCart<span class=\"token punctuation\">.<\/span><span class=\"token function\">removeItemFromCartAll<\/span><span class=\"token punctuation\">(<\/span>name<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token function\">displayCart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\n\n\n<span class=\"token comment\">\/\/ -\u06f1<\/span>\n<span class=\"token function\">$<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.show-cart'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">on<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">\".minus-item\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">event<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">var<\/span> name <span class=\"token operator\">=<\/span> <span class=\"token function\">$<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">data<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'name'<\/span><span class=\"token punctuation\">)<\/span>\n  shoppingCart<span class=\"token punctuation\">.<\/span><span class=\"token function\">removeItemFromCart<\/span><span class=\"token punctuation\">(<\/span>name<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token function\">displayCart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\n<span class=\"token comment\">\/\/ +\u06f1<\/span>\n<span class=\"token function\">$<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.show-cart'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">on<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">\".plus-item\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">event<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">var<\/span> name <span class=\"token operator\">=<\/span> <span class=\"token function\">$<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">data<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'name'<\/span><span class=\"token punctuation\">)<\/span>\n  shoppingCart<span class=\"token punctuation\">.<\/span><span class=\"token function\">addItemToCart<\/span><span class=\"token punctuation\">(<\/span>name<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token function\">displayCart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\n\n<span class=\"token comment\">\/\/ Item count input<\/span>\n<span class=\"token function\">$<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.show-cart'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">on<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"change\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">\".item-count\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">event<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n   <span class=\"token keyword\">var<\/span> name <span class=\"token operator\">=<\/span> <span class=\"token function\">$<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">data<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'name'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n   <span class=\"token keyword\">var<\/span> count <span class=\"token operator\">=<\/span> <span class=\"token function\">Number<\/span><span class=\"token punctuation\">(<\/span><span class=\"token function\">$<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">val<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  shoppingCart<span class=\"token punctuation\">.<\/span><span class=\"token function\">setCountForItem<\/span><span class=\"token punctuation\">(<\/span>name<span class=\"token punctuation\">,<\/span> count<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token function\">displayCart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token function\">displayCart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n\n\n<div class=\"jet-listing-grid--50192\" style=\"\"><section class=\"zht-related-post\" itemscope=\"\" itemtype=\"https:\/\/schema.org\/Article\" role=\"region\"\n  aria-label=\"Related article\">\n  <div class=\"zht-related-post-section-label\">\n    \u0645\u0637\u0627\u0644\u0628 \u0645\u0631\u062a\u0628\u0637\n  <\/div>\n  <img decoding=\"async\" width=\"300\" height=\"188\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/6fb05ee1-a656-4839-bce8-6753cbf116b3-300x188.jpg.webp\" class=\"attachment-medium size-medium wp-post-image lazyload\" alt=\"\u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/6fb05ee1-a656-4839-bce8-6753cbf116b3-300x188.jpg.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/6fb05ee1-a656-4839-bce8-6753cbf116b3-768x480.jpg.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/6fb05ee1-a656-4839-bce8-6753cbf116b3.jpg 1024w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/188;\">\n  <a href=\"https:\/\/maktabkhooneh.org\/mag\/slider-with-js\/\" class=\"zht-related-post-title\"\n    itemprop=\"headline\" target=\"_blank\">\u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a &#8211; \u0622\u0645\u0648\u0632\u0634 \u0639\u0645\u0644\u06cc \u0648 \u062c\u0630\u0627\u0628<\/a>\n<\/section><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u0628\u0631\u0631\u0633\u06cc \u06a9\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f<\/h3>\n\n\n\n<p>\u06a9\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647\u060c \u0645\u063a\u0632 \u0645\u062a\u0641\u06a9\u0631 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0634\u0645\u0627 \u0628\u0647 \u0634\u0645\u0627\u0631 \u0645\u06cc\u200c\u0631\u0648\u062f. \u0627\u06cc\u0646 \u06a9\u062f \u0648\u0638\u06cc\u0641\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a\u060c \u0646\u0645\u0627\u06cc\u0634 \u0648 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0631\u0627 \u0628\u0631 \u0639\u0647\u062f\u0647 \u062f\u0627\u0631\u062f. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06af\u0627\u0645\u200c\u0628\u0647\u200c\u06af\u0627\u0645 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0627\u06cc\u0646 \u06a9\u062f \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u0645:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"752\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/5d475b05-1a37-47e6-b051-b856d78c58d5.jpg\" alt=\"\u0628\u0631\u0631\u0633\u06cc \u06a9\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f\" class=\"wp-image-39311 lazyload\" title=\"\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/5d475b05-1a37-47e6-b051-b856d78c58d5.jpg 1024w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/5d475b05-1a37-47e6-b051-b856d78c58d5-300x220.jpg.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/5d475b05-1a37-47e6-b051-b856d78c58d5-768x564.jpg.webp 768w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/752;\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong> \u062a\u0639\u0631\u06cc\u0641 \u06cc\u06a9 \u0622\u0628\u062c\u06a9\u062a \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f (<\/strong><strong>Shopping Cart API<\/strong><strong>):<\/strong><\/li>\n<\/ol>\n\n\n\n<p>\u062f\u0631 \u0627\u0628\u062a\u062f\u0627\u06cc \u06a9\u062f\u060c \u06cc\u06a9 \u0622\u0628\u062c\u06a9\u062a \u0628\u0647 \u0646\u0627\u0645 shoppingCart \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc\u200c\u0634\u0648\u062f. \u0627\u06cc\u0646 \u0622\u0628\u062c\u06a9\u062a\u060c \u062a\u0645\u0627\u0645 \u062a\u0648\u0627\u0628\u0639 \u0648 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0645\u0648\u0631\u062f\u0646\u06cc\u0627\u0632 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0631\u0627 \u062f\u0631 \u062e\u0648\u062f \u062c\u0627\u06cc\u200c\u062f\u0627\u062f\u0647 \u0627\u0633\u062a.<\/p>\n\n\n<div class=\"jet-listing-grid--50121\" style=\"\"><div class=\"jet-listing-dynamic-field-block zht-maktab-khooneh-course cb-fb2qc30r\"data-is-block=\"jet-engine\/dynamic-field\"><div class=\"jet-listing-dynamic-field__content\" >\n<div class=\"course-card\">\n    <div class=\"course-card-img\">\n        <img decoding=\"async\" \n            data-src=\"https:\/\/media1.maktabkhooneh.org\/CACHE\/images\/courses\/images\/front_gcZ5ulR_1403-08-16-164827889\/eb15a124ff8961e6f5a4178684ece70c.webp?expire=4893471932&#038;token=0416681717d9beb623a1202e6efcac1b&#038;md5=BBZoFxfZvrYjoSAubvysGw==\" \n            alt=\"\u0622\u0645\u0648\u0632\u0634 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a (Front-End)\" \n            title=\"\u0622\u0645\u0648\u0632\u0634 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a (Front-End)\" \n            width=\"100%\" \n            height=\"auto\"\n           \n         src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\n    <\/div>\n\n    <div class=\"course-details\">\n        <a href=\"https:\/\/maktabkhooneh.org\/course\/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-front-end-mk3\/\" class=\"course-title\" target=\"_blank\" rel=\"noopener noreferrer\">\n            \u0622\u0645\u0648\u0632\u0634 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a (Front-End)        <\/a>\n\n        <div class=\"course-price\">\n            \n                <span class=\"real-price\">\n                                            \u06f9\u06f9\u06f9,\u06f0\u06f0\u06f0                                    <\/span>\n\n                <span>\n                    <span class=\"discounted-price\">\n                        \u06f5\u06f9\u06f9,\u06f4\u06f0\u06f0                    <\/span>\n                    <span class=\"price-currency\">\u062a\u0648\u0645\u0627\u0646<\/span>\n                <\/span>\n\n                                    <div class=\"discount-percentage\">\n                        \u06f4\u06f0%                    <\/div>\n                \n                    <\/div>\n        <button class=\"course-cta-button\" data-course-url=\"https:\/\/maktabkhooneh.org\/course\/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-front-end-mk3\/\">\n            \u0645\u0634\u0627\u0647\u062f\u0647 \u0648 \u062e\u0631\u06cc\u062f        <\/button>\n    <\/div>\n<\/div>\n<\/div><\/div><\/div>\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong> \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u062f\u0627\u062e\u0644 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f (<\/strong><strong>cart<\/strong><strong>):<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u0622\u0631\u0627\u06cc\u0647\u200c\u0627\u06cc \u0628\u0647 \u0646\u0627\u0645 cart \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0644\u06cc\u0633\u062a \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n\n\n\n<li>\u0647\u0631 \u0645\u062d\u0635\u0648\u0644 \u062f\u0627\u062e\u0644 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f\u060c \u0628\u0647 \u0635\u0648\u0631\u062a \u06cc\u06a9 \u0634\u06cc\u0621 (object) \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/li>\n\n\n\n<li>\u0627\u06cc\u0646 \u0634\u06cc\u0621 \u062f\u0627\u0631\u0627\u06cc \u0633\u0647 \u062e\u0627\u0635\u06cc\u062a (property) \u0627\u0633\u062a:\n<ul class=\"wp-block-list\">\n<li>name: \u0646\u0627\u0645 \u0645\u062d\u0635\u0648\u0644<\/li>\n\n\n\n<li>price: \u0642\u06cc\u0645\u062a \u0645\u062d\u0635\u0648\u0644<\/li>\n\n\n\n<li>count: \u062a\u0639\u062f\u0627\u062f \u0648\u0627\u062d\u062f \u0627\u0632 \u0622\u0646 \u0645\u062d\u0635\u0648\u0644 \u06a9\u0647 \u0628\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0627\u0636\u0627\u0641\u0647\u200c\u0634\u062f\u0647 \u0627\u0633\u062a<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong> \u0633\u0627\u0632\u0646\u062f\u0647 \u0645\u062d\u0635\u0648\u0644 (<\/strong><strong>Item<\/strong><strong>):<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u06cc\u06a9 \u0633\u0627\u0632\u0646\u062f\u0647 (constructor) \u0628\u0647 \u0646\u0627\u0645 Item \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/li>\n\n\n\n<li>\u0627\u06cc\u0646 \u0633\u0627\u0632\u0646\u062f\u0647\u060c \u0648\u0638\u06cc\u0641\u0647 \u0627\u06cc\u062c\u0627\u062f \u0627\u0634\u06cc\u0627\u0621 \u0645\u062d\u0635\u0648\u0644 \u0631\u0627 \u0628\u0631 \u0639\u0647\u062f\u0647 \u062f\u0627\u0631\u062f.<\/li>\n\n\n\n<li>\u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0645\u062d\u0635\u0648\u0644\u06cc \u0628\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u06cc\u06a9 \u0634\u06cc\u0621 \u0627\u0632 \u0627\u06cc\u0646 \u0633\u0627\u0632\u0646\u062f\u0647 \u0633\u0627\u062e\u062a\u0647\u200c\u0634\u062f\u0647 \u0648 \u0628\u0647 \u0622\u0631\u0627\u06cc\u0647 cart \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06af\u0631\u062f\u062f.<\/li>\n<\/ul>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li><strong> \u0630\u062e\u06cc\u0631\u0647\u200c\u0633\u0627\u0632\u06cc \u0633\u0628\u062f \u062e\u0631\u06cc\u062f (<\/strong><strong>saveCart<\/strong><strong>):<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u062a\u0627\u0628\u0639 saveCart \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647\u200c\u0633\u0627\u0632\u06cc \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u062f\u0631 \u062d\u0627\u0641\u0638\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/li>\n\n\n\n<li>\u0627\u06cc\u0646 \u062a\u0627\u0628\u0639\u060c \u0627\u0632 sessionStorage \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647\u200c\u0633\u0627\u0632\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u062a\u0646 JSON \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n<\/ul>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li><strong> \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0633\u0628\u062f \u062e\u0631\u06cc\u062f (<\/strong><strong>loadCart<\/strong><strong>):<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u062a\u0627\u0628\u0639 loadCart \u0628\u0631\u0627\u06cc \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0627\u0632 \u062d\u0627\u0641\u0638\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/li>\n\n\n\n<li>\u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u06a9\u062f \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u062f\u0631 \u0635\u0648\u0631\u062a \u0648\u062c\u0648\u062f \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u062f\u0631 sessionStorage\u060c \u0622\u0646 \u0631\u0627 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u06a9\u0631\u062f\u0647 \u0648 \u0628\u0647 \u0645\u062a\u063a\u06cc\u0631 cart \u0627\u062e\u062a\u0635\u0627\u0635 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/li>\n<\/ul>\n\n\n\n<ol start=\"6\" class=\"wp-block-list\">\n<li><strong> \u062a\u0648\u0627\u0628\u0639 \u0639\u0645\u0648\u0645\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f:<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0645\u062c\u0645\u0648\u0639\u0647\u200c\u0627\u06cc \u0627\u0632 \u062a\u0648\u0627\u0628\u0639 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u062f\u0631 \u0622\u0645\u0648\u0632\u0633 \u0633\u0627\u062e\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0631 \u0646\u0638\u0631 \u06af\u0631\u0641\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u0639\u0645\u0648\u0645\u06cc (public) \u062a\u0639\u0631\u06cc\u0641\u200c\u0634\u062f\u0647\u200c\u0627\u0646\u062f \u0648 \u0642\u0627\u0628\u0644\u200c\u062f\u0633\u062a\u0631\u0633\u06cc \u0627\u0632 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u06a9\u062f \u0647\u0633\u062a\u0646\u062f.\n<ul class=\"wp-block-list\">\n<li>addItemToCart: \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u06cc\u06a9 \u0645\u062d\u0635\u0648\u0644 \u062c\u062f\u06cc\u062f \u0631\u0627 \u0628\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n\n\n\n<li>removeItemFromCart: \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u06cc\u06a9 \u0645\u062d\u0635\u0648\u0644 \u0631\u0627 \u0627\u0632 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u062d\u0630\u0641 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n\n\n\n<li>removeItemFromCartAll: \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u062a\u0645\u0627\u0645 \u0645\u0648\u0627\u0631\u062f \u06cc\u06a9 \u0645\u062d\u0635\u0648\u0644 \u062e\u0627\u0635 \u0631\u0627 \u0627\u0632 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u062d\u0630\u0641 \u0645\u06cc\u200c\u06a9\u0646\u062f. (\u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f \u06f3 \u0639\u062f\u062f \u0647\u0646\u062f\u0648\u0627\u0646\u0647 \u0628\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u062f\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0647\u0645\u0647\u200c\u06cc \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u06cc\u06a9\u062c\u0627 \u062d\u0630\u0641 \u0646\u0645\u0627\u06cc\u06cc\u062f).<\/li>\n\n\n\n<li>clearCart: \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0631\u0627 \u062e\u0627\u0644\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n\n\n\n<li>totalCount: \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u062a\u0639\u062f\u0627\u062f \u06a9\u0644 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0631\u0627 \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f.<\/li>\n\n\n\n<li>totalCart: \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0642\u06cc\u0645\u062a \u06a9\u0644 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f (\u0628\u0627 \u0627\u062d\u062a\u0633\u0627\u0628 \u062a\u0639\u062f\u0627\u062f \u0645\u062d\u0635\u0648\u0644\u0627\u062a) \u0631\u0627 \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f.<\/li>\n\n\n\n<li>listCart: \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0644\u06cc\u0633\u062a \u06a9\u0627\u0645\u0644\u06cc \u0627\u0632 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0631\u0627 \u0628\u0647 \u0647\u0645\u0631\u0627\u0647 \u062c\u0632\u0626\u06cc\u0627\u062a (\u0646\u0627\u0645\u060c \u0642\u06cc\u0645\u062a\u060c \u062a\u0639\u062f\u0627\u062f \u0648 \u0642\u06cc\u0645\u062a \u06a9\u0644 \u0647\u0631 \u0645\u062d\u0635\u0648\u0644) \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ol start=\"7\" class=\"wp-block-list\">\n<li><strong> \u0627\u062a\u0635\u0627\u0644 \u0631\u0648\u06cc\u062f\u0627\u062f \u0628\u0647 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627 (<\/strong><strong>Triggers \/ Events<\/strong><strong>):<\/strong><\/li>\n<\/ol>\n\n\n\n<p>\u062f\u0631 \u0628\u062e\u0634 \u0628\u0639\u062f\u06cc \u06a9\u062f \u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0644\u06cc\u06a9 \u0628\u0647 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc ad to cart \u0648 clear cart \u0627\u062e\u062a\u0635\u0627\u0635 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u0628\u0631 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 ad to cart\u060c \u062a\u0627\u0628\u0639 addItemToCart \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u0645\u062d\u0635\u0648\u0644 \u0645\u0648\u0631\u062f\u0646\u0638\u0631 \u0628\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06af\u0631\u062f\u062f.<\/li>\n\n\n\n<li>\u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u0628\u0631 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 clear cart\u060c \u062a\u0627\u0628\u0639 clearCart \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u062e\u0627\u0644\u06cc \u0645\u06cc\u200c\u06af\u0631\u062f\u062f.<\/li>\n<\/ul>\n\n\n\n<ol start=\"8\" class=\"wp-block-list\">\n<li><strong> \u0646\u0645\u0627\u06cc\u0634 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f (<\/strong><strong>displayCart<\/strong><strong>):<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u062a\u0627\u0628\u0639 displayCart \u0648\u0638\u06cc\u0641\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0644\u06cc\u0633\u062a \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0648 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u062a\u0639\u062f\u0627\u062f \u06a9\u0644 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0648 \u0642\u06cc\u0645\u062a \u06a9\u0644 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0631\u0627 \u0628\u0631 \u0639\u0647\u062f\u0647 \u062f\u0627\u0631\u062f.<\/li>\n\n\n\n<li>\u0627\u06cc\u0646 \u062a\u0627\u0628\u0639\u060c \u062e\u0631\u0648\u062c\u06cc HTML \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0622\u0646 \u0631\u0627 \u062f\u0627\u062e\u0644 \u062c\u062f\u0648\u0644 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/li>\n\n\n\n<li>\u062e\u0631\u0648\u062c\u06cc HTML \u0634\u0627\u0645\u0644 \u0646\u0627\u0645 \u0645\u062d\u0635\u0648\u0644\u060c \u0642\u06cc\u0645\u062a \u0648\u0627\u062d\u062f\u060c \u062a\u0639\u062f\u0627\u062f \u0645\u062d\u0635\u0648\u0644 \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647\u060c \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u06a9\u0645 \u06a9\u0631\u062f\u0646 \u0648 \u0632\u06cc\u0627\u062f \u06a9\u0631\u062f\u0646 \u062a\u0639\u062f\u0627\u062f\u060c \u062f\u06a9\u0645\u0647 \u062d\u0630\u0641 \u0645\u062d\u0635\u0648\u0644 \u0648 \u0642\u06cc\u0645\u062a \u06a9\u0644 \u0622\u0646 \u0645\u062d\u0635\u0648\u0644 \u062e\u0627\u0635<\/li>\n<\/ul>\n\n\n\n<ol start=\"9\" class=\"wp-block-list\">\n<li><strong> \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u062f\u0627\u062e\u0644 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f:<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u06a9\u0644\u06cc\u06a9 \u0628\u0647 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc &#8220;clear cart&#8221;\u060c &#8220;+&#8221; \u0648 &#8220;-&#8221; \u062f\u0627\u062e\u0644 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0627\u062e\u062a\u0635\u0627\u0635 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.\n<ul class=\"wp-block-list\">\n<li>\u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u0628\u0631 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 clear cart \u06cc\u06a9 \u0645\u062d\u0635\u0648\u0644 \u062e\u0627\u0635\u060c \u062a\u0627\u0628\u0639 removeItemFromCartAll \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0634\u062f\u0647 \u0648 \u0622\u0646 \u0645\u062d\u0635\u0648\u0644 \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u0627\u0632 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u062d\u0630\u0641 \u0645\u06cc\u200c\u06af\u0631\u062f\u062f.<\/li>\n\n\n\n<li>\u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u0628\u0631 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 &#8220;-&#8221; \u062a\u0639\u062f\u0627\u062f \u06cc\u06a9 \u0648\u0627\u062d\u062f \u0627\u0632 \u0645\u062d\u0635\u0648\u0644 \u06a9\u0645 \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u062f\u0631 \u0635\u0648\u0631\u062a \u0631\u0633\u06cc\u062f\u0646 \u062a\u0639\u062f\u0627\u062f \u0628\u0647 \u0635\u0641\u0631\u060c \u0645\u062d\u0635\u0648\u0644 \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u0627\u0632 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u062d\u0630\u0641 \u0645\u06cc\u200c\u06af\u0631\u062f\u062f.<\/li>\n\n\n\n<li>\u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u0628\u0631 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 &#8220;+&#8221; \u062a\u0639\u062f\u0627\u062f \u06cc\u06a9 \u0648\u0627\u062d\u062f \u0628\u0647 \u0645\u062d\u0635\u0648\u0644 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06af\u0631\u062f\u062f.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\u062f\u0631 \u0647\u0631 \u0628\u0627\u0631 \u062a\u063a\u06cc\u06cc\u0631 \u062a\u0639\u062f\u0627\u062f \u0645\u062d\u0635\u0648\u0644\u060c \u062a\u0627\u0628\u0639 displayCart \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f \u062a\u0627 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u06af\u0631\u062f\u062f.<\/li>\n<\/ul>\n\n\n\n<ol start=\"10\" class=\"wp-block-list\">\n<li><strong> \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0631\u0648\u062f\u06cc \u062a\u0639\u062f\u0627\u062f \u0645\u062d\u0635\u0648\u0644:<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0631\u0648\u06cc\u062f\u0627\u062f change \u0628\u0647 \u0648\u0631\u0648\u062f\u06cc\u200c\u0647\u0627\u06cc \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u062a\u0639\u062f\u0627\u062f \u0645\u062d\u0635\u0648\u0644 \u062f\u0627\u062e\u0644 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0627\u062e\u062a\u0635\u0627\u0635 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/li>\n\n\n\n<li>\u0628\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u0642\u062f\u0627\u0631 \u0627\u06cc\u0646 \u0648\u0631\u0648\u062f\u06cc\u200c\u0647\u0627\u060c \u062a\u0627\u0628\u0639 setCountForItem \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0634\u062f\u0647 \u0648 \u062a\u0639\u062f\u0627\u062f \u0645\u062d\u0635\u0648\u0644 \u0645\u0631\u0628\u0648\u0637\u0647 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0645\u06cc\u200c\u06af\u0631\u062f\u062f.<\/li>\n\n\n\n<li>\u067e\u0633 \u0627\u0632 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u062a\u0639\u062f\u0627\u062f\u060c \u062a\u0627\u0628\u0639 displayCart \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f \u062a\u0627 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f.<\/li>\n<\/ul>\n\n\n\n<ol start=\"11\" class=\"wp-block-list\">\n<li><strong> \u0646\u0645\u0627\u06cc\u0634 \u0627\u0648\u0644\u06cc\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f:<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u062f\u0631 \u0627\u0646\u062a\u0647\u0627\u06cc \u06a9\u062f\u060c \u062a\u0627\u0628\u0639 displayCart \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u0633\u062a\u0642\u06cc\u0645 \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f \u062a\u0627 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u062f\u0631 \u0627\u0628\u062a\u062f\u0627\u06cc \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0635\u0641\u062d\u0647\u200c\u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f.<\/li>\n<\/ul>\n\n\n\n<p>\u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0646\u06cc\u0627\u0632 \u062e\u0648\u062f\u062a\u0627\u0646\u060c \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u0628\u0647 \u0627\u06cc\u0646 \u06a9\u062f \u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0631\u0627 \u0645\u0637\u0627\u0628\u0642 \u0633\u0644\u06cc\u0642\u0647 \u062e\u0648\u062f\u062a\u0627\u0646 \u06af\u0633\u062a\u0631\u0634 \u062f\u0647\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0645\u06a9\u0627\u0646 \u0627\u0639\u0645\u0627\u0644 \u062a\u062e\u0641\u06cc\u0641\u060c \u0627\u0641\u0632\u0648\u062f\u0646 \u06a9\u062f \u062a\u062e\u0641\u06cc\u0641\u060c \u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0648 \u06cc\u0627 \u0627\u0639\u0645\u0627\u0644 \u0645\u0627\u0644\u06cc\u0627\u062a \u0628\u0631 \u0627\u0631\u0632\u0634\u200c\u0627\u0641\u0632\u0648\u062f\u0647 \u0631\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u06a9\u062f \u0627\u0636\u0627\u0641\u0647 \u0646\u0645\u0627\u06cc\u06cc\u062f.<\/p>\n\n\n\n<p>\u062e\u0631\u0648\u062c\u06cc \u0646\u0647\u0627\u06cc\u06cc \u067e\u0631\u0648\u0698\u0647 \u0633\u0627\u062e\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"1486\" height=\"664\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/Video_240513114458.gif\" alt=\"\u062e\u0631\u0648\u062c\u06cc \u0646\u0647\u0627\u06cc\u06cc \u067e\u0631\u0648\u0698\u0647 \u0633\u0627\u062e\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\" class=\"wp-image-39309 lazyload\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1486px; --smush-placeholder-aspect-ratio: 1486\/664;\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u06a9\u0644\u0627\u0645 \u067e\u0627\u06cc\u0627\u0646\u06cc<\/h2>\n\n\n\n<p>\u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u06cc\u06a9\u06cc \u0627\u0632 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc\u200c\u062a\u0631\u06cc\u0646 \u0632\u0628\u0627\u0646\u200c\u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc \u0646\u0627\u0645 \u0628\u0631\u062f \u0648 \u062f\u0631 \u0648\u0627\u0642\u0639 \u0633\u062a\u0648\u0646 \u0627\u0635\u0644\u06cc \u0627\u06cc\u0646\u062a\u0631\u0646\u062a \u0648 \u0648\u0628 \u0627\u0633\u062a. \u062f\u0631 \u0645\u0637\u0644\u0628 \u0641\u0648\u0642 \u0627\u0632 \u0645\u062c\u0644\u0647 \u0645\u06a9\u062a\u0648\u0628 \u0628\u0627 \u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0631 \u062e\u062f\u0645\u062a \u0634\u0645\u0627 \u0628\u0648\u062f\u06cc\u0645. \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0641\u0648\u0642 \u0631\u0627 \u06a9\u0627\u0645\u0644\u0627 \u0633\u0641\u0627\u0631\u0634\u06cc \u0633\u0627\u0632\u06cc \u06a9\u0631\u062f\u0647 \u0648 \u062d\u062a\u06cc \u062f\u0631 \u0648\u0628\u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc \u062e\u0648\u062f \u0627\u0632 \u0622\u0646\u200c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n\n\n<div class=\"jet-listing-grid--50121\" style=\"\"><div class=\"jet-listing-dynamic-field-block zht-maktab-khooneh-course cb-fb2qc30r\"data-is-block=\"jet-engine\/dynamic-field\"><div class=\"jet-listing-dynamic-field__content\" >\n<div class=\"course-card\">\n    <div class=\"course-card-img\">\n        <img decoding=\"async\" \n            data-src=\"https:\/\/media1.maktabkhooneh.org\/CACHE\/images\/courses\/images\/reactjs-63_QsAvipB_1403-08-16-164734762\/30ad815996c7019e488903891aba7d2b.webp?expire=4893471932&#038;token=58cbda5c656fe3c1c2b21f90f54d1188&#038;md5=WMvaXGVv48HCsh-Q9U0RiA==\" \n            alt=\"\u062f\u0648\u0631\u0647 \u0622\u0645\u0648\u0632\u0634 React\" \n            title=\"\u062f\u0648\u0631\u0647 \u0622\u0645\u0648\u0632\u0634 React\" \n            width=\"100%\" \n            height=\"auto\"\n           \n         src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\n    <\/div>\n\n    <div class=\"course-details\">\n        <a href=\"https:\/\/maktabkhooneh.org\/course\/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%81%D8%B1%DB%8C%D9%85%D9%88%D8%B1%DA%A9-reactjs-mk401\/\" class=\"course-title\" target=\"_blank\" rel=\"noopener noreferrer\">\n            \u062f\u0648\u0631\u0647 \u0622\u0645\u0648\u0632\u0634 React        <\/a>\n\n        <div class=\"course-price\">\n            \n                <span class=\"real-price\">\n                                            \u06f5\u06f9\u06f9,\u06f0\u06f0\u06f0                                    <\/span>\n\n                <span>\n                    <span class=\"discounted-price\">\n                        \u06f4\u06f1\u06f9,\u06f3\u06f0\u06f0                    <\/span>\n                    <span class=\"price-currency\">\u062a\u0648\u0645\u0627\u0646<\/span>\n                <\/span>\n\n                                    <div class=\"discount-percentage\">\n                        \u06f3\u06f0%                    <\/div>\n                \n                    <\/div>\n        <button class=\"course-cta-button\" data-course-url=\"https:\/\/maktabkhooneh.org\/course\/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%81%D8%B1%DB%8C%D9%85%D9%88%D8%B1%DA%A9-reactjs-mk401\/\">\n            \u0645\u0634\u0627\u0647\u062f\u0647 \u0648 \u062e\u0631\u06cc\u062f        <\/button>\n    <\/div>\n<\/div>\n<\/div><\/div><\/div>\n\n\n<p>\u0627\u06af\u0631 \u0634\u0645\u0627 \u0647\u0645 \u062f\u0648\u0633\u062a \u062f\u0627\u0631\u06cc\u062f \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u062a\u062e\u0635\u0635 \u062e\u0648\u0628\u06cc \u0628\u0631\u0633\u06cc\u062f \u0648 \u0628\u0627 \u0622\u0646 \u0648\u0627\u0631\u062f \u0628\u0627\u0632\u0627\u0631 \u06a9\u0627\u0631 \u0634\u0648\u06cc\u062f\u060c \u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u0645\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0634\u0631\u06a9\u062a \u062f\u0631 \u062f\u0648\u0631\u0647\u200c\u0647\u0627\u06cc <a href=\"https:\/\/maktabkhooneh.org\/learn\/java-script\/\">\u0622\u0645\u0648\u0632\u0634 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/a> \u0645\u06a9\u062a\u0628 \u062e\u0648\u0646\u0647 \u0627\u0633\u062a. \u062f\u0631 \u0645\u06a9\u062a\u0628 \u062e\u0648\u0646\u0647 \u0627\u0646\u0648\u0627\u0639 \u062f\u0648\u0631\u0647 <a href=\"https:\/\/maktabkhooneh.org\/learn\/programming\">\u0622\u0645\u0648\u0632\u0634 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc<\/a>\u060c <a href=\"https:\/\/maktabkhooneh.org\/learn\/web-design\">\u0622\u0645\u0648\u0632\u0634 \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a<\/a> \u0648 \u063a\u06cc\u0631\u0647 \u0646\u06cc\u0632 \u0628\u0631\u0627\u06cc \u06a9\u0645\u06a9 \u0628\u0647 \u0634\u0645\u0627 \u0628\u0647 \u0647\u0645\u0631\u0627\u0647 \u0627\u0631\u0627\u0626\u0647 \u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647 \u067e\u0627\u06cc\u0627\u0646 \u062f\u0648\u0631\u0647 \u0627\u0631\u0627\u0626\u0647 \u062e\u0648\u0627\u0647\u062f \u0634\u062f.<\/p>\n\n\n\n<p>\u0631\u0641\u0631\u0646\u0633 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647: <a href=\"https:\/\/codepen.io\/chrisachinga\/pen\/MWwrZLJ\" rel=\"nofollow noopener\" target=\"_blank\">codepen<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0622\u06cc\u0627 \u062a\u0627\u0628\u0647\u200c\u062d\u0627\u0644 \u0641\u06a9\u0631 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u062f \u06a9\u0647 \u062f\u0648\u0633\u062a \u062f\u0627\u0631\u06cc\u062f \u06cc\u06a9 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0622\u0646\u0644\u0627\u06cc\u0646 \u06a9\u0648\u0686\u06a9 \u0628\u0631\u0627\u06cc \u062e\u0648\u062f \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f\u061f \u06cc\u0627 \u0634\u0627\u06cc\u062f \u0631\u0648\u06cc \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u0634\u062e\u0635\u06cc \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0642\u0627\u0628\u0644\u06cc\u062a \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u062f\u0627\u0631\u062f\u061f \u062f\u0631 \u0647\u0631 \u0635\u0648\u0631\u062a\u060c \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u06cc\u06a9\u06cc \u0627\u0632 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u0636\u0631\u0648\u0631\u06cc \u0647\u0631 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0622\u0646\u0644\u0627\u06cc\u0646 \u0627\u0633\u062a \u0648 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0632\u0628\u0627\u0646 \u0642\u062f\u0631\u062a\u0645\u0646\u062f\u06cc \u0628\u0631\u0627\u06cc \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0622\u0646 \u0628\u0647 \u0634\u0645\u0627\u0631 \u0645\u06cc\u200c\u0631\u0648\u062f. [&hellip;]<\/p>\n","protected":false},"author":28,"featured_media":39313,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,30,12],"tags":[],"class_list":["post-39308","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming-and-it-training","category-web-programming-articles","category-java-script-articles"],"_links":{"self":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts\/39308","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/comments?post=39308"}],"version-history":[{"count":4,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts\/39308\/revisions"}],"predecessor-version":[{"id":65596,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts\/39308\/revisions\/65596"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/media\/39313"}],"wp:attachment":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/media?parent=39308"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/categories?post=39308"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/tags?post=39308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}