https://outdoorcenter.kz/bitrix/templates/aspro-premier-mobile/js/conditional/popup_offers.js

1(() => {
2  BX.Aspro.Utils.readyDOM(() => {
3    const nodeModal = document.querySelector("#popup-offers");
4    nodeModal.classList.remove("hidden");
5
6    const nodeTitle = nodeModal.querySelector(".scrollbar-filter__title");
7    if (nodeTitle) {
8      nodeTitle.textContent = BX.message("JS_POPUP_OFFER_TITLE");
9    }
10
11    let modalItemID;
12
13    BX.bindDelegate(document, "click", { class: "js-offer-modal" }, function () {
14      const nodeModalContent = nodeModal.querySelector(".scrollbar-filter__content");
15      nodeModal.dataset.modalAction = this.dataset.action;
16
17      // replace content for new item
18      const currentID = this.dataset.id;
19      if (modalItemID !== currentID) {
20        modalItemID = currentID;
21
22        const nodeJSPopupBlock = this.closest(".js-popup-block");
23        const nodePopupItem = BX.create({
24          tag: "div",
25          props: {
26            className: `scrollbar-filter__item js-popup-block catalog-items`,
27          },
28          children: getContentNode(nodeJSPopupBlock),
29        });
30
31        nodeModalContent.innerHTML = "";
32        nodeModalContent.appendChild(nodePopupItem);
33      }
34
35      JItemAction.actual();
36
37      appAspro.filter.open($(nodeModal));
38    });
39  });
40
41  function getContentNode(node) {
42    const nodeJSSkuConfig = node.closest(".catalog-items")?.querySelector(".js-sku-config")?.cloneNode();
43    const nodeButtonWrapper = node.querySelector(".js-popup-buttons").cloneNode(true);
44    const nodeJSOffersTpl = node.querySelector(".offers-template-json")?.cloneNode(true);
45    const nodeJSSkuProps = getSKUProps(node);
46    const nodeJSItemInfo = getItemInfo(node);
47
48    setButtonActions(nodeJSSkuConfig, nodeButtonWrapper);
49
50    return [
51      // extra data for offers
52      BX.create("div", {
53        props: {
54          className: "scrollbar-filter__meta hidden",
55        },
56        children: [nodeJSOffersTpl, nodeJSSkuConfig],
57      }),
58
59      // sku props
60      BX.create("div", {
61        props: {
62          className: "scrollbar-filter__props scrollbar",
63        },
64        children: [nodeJSSkuProps],
65      }),
66
67      // bottom block
68      BX.create("div", {
69        props: {
70          className: "scrollbar-filter__bottom border-top",
71        },
72        children: [
73          // price block
74          nodeJSItemInfo,
75
76          // buttons
77          BX.create("div", {
78            props: {
79              className: "scrollbar-filter__buttons",
80            },
81            children: [nodeButtonWrapper],
82          }),
83        ],
84      }),
85    ];
86  }
87
88  function getSKUProps(parentNode) {
89    const nodeProps = parentNode.querySelector(".sku-props")?.cloneNode(true);
90    nodeProps.className = 'sku-props';
91
92    const nodePropsDescription = nodeProps.querySelector(".properties");
93    if (nodePropsDescription) {
94      nodePropsDescription.remove();
95    }
96
97    return nodeProps;
98  }
99
100  function getItemInfo(parentNode) {
101    const nodeItemInfo = parentNode.querySelector(".js-popup-info")?.cloneNode();
102    if (nodeItemInfo) {
103      nodeItemInfo.removeAttribute("style");
104
105      const nodeJSPopupPrice = parentNode.querySelector(".js-popup-price")?.cloneNode(true);
106      const nodeJSStatus = parentNode.querySelector(".js-popup-status")?.cloneNode(true);
107
108      nodeItemInfo.appendChild(
109        BX.create("div", {
110          props: {
111            className:
112              "scrollbar-filter__price line-block line-block--gap line-block--gap-12 line-block--justify-between",
113          },
114          children: [nodeJSPopupPrice, nodeJSStatus],
115        })
116      );
117    }
118
119    return nodeItemInfo;
120  }
121
122  function setButtonActions(nodeSkuConfig, nodeButtonWrapper) {
123    const nodeListButtonAction = nodeButtonWrapper.querySelectorAll(".js-offer-modal");
124    if (nodeListButtonAction.length) {
125      let btnConfig = { CLASS: "" };
126      if (nodeSkuConfig?.dataset.value) {
127        try {
128          const skuConfig = JSON.parse(nodeSkuConfig.dataset.value);
129          btnConfig = { ...btnConfig, ...skuConfig.ICONS_PROPS };
130        } catch (e) {}
131      }
132
133      nodeListButtonAction.forEach((nodeButtonAction) => {
134        BX.removeClass(nodeButtonAction, "js-offer-modal");
135        BX.addClass(nodeButtonAction, "js-item-action");
136
137        btnConfig.CLASS.split(" ").forEach((value) => {
138          BX.addClass(nodeButtonAction, value);
139        });
140      });
141    }
142  }
143})();