foxy-integrations/foxy-square-online.js at main · Foxy/foxy-integrations · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
var FC = FC || {};
FC.onLoad = function () {
  FC.client.on('ready.done', function () {
    foxyAddToCart();

    let previousUrl = location.pathname;
    const urlObserver = new MutationObserver(function () {
      if (location.pathname !== previousUrl) {
        previousUrl = location.pathname;
        foxyAddToCart();
        document.querySelector('#foxy-add-btn')?.remove();
      }
    });
    urlObserver.observe(document, { subtree: true, childList: true });

    function foxyAddToCart() {
      const buttonObserver = new MutationObserver(function (mutationsList) {
        if (mutationsList.some((mutation) => mutation.type === 'childList')) {
          // mini-cart link
          const cartBtnIcon = document.querySelector('button.cart-icon svg');
          const foxyMiniCart = document.querySelector('#foxy-mini-cart');
          if (!!cartBtnIcon && !foxyMiniCart) {
            const cartBtn = document.querySelector('button.cart-icon');
            const cartLink = document.createElement('a');
            cartLink.href = `https://${FC.settings.storedomain}/cart?cart=view`;
            cartLink.id = 'foxy-mini-cart';
            const clonedBtn = cartBtn.cloneNode(true);
            cartLink.appendChild(clonedBtn);
            cartBtn.parentNode.replaceChild(cartLink, cartBtn);
          }

          // mini-cart quantity
          const cartQty = document.querySelector('.nav-icon__cart-number');
          if (!!cartQty && !cartQty.hasAttribute('data-fc-id')) {
            cartQty.setAttribute('data-fc-id', 'minicart-quantity');
          }

          // add to cart button
          const buttonWrapper = Array.from(
            document.querySelectorAll('[showaddtocartbutton="true"]')
          ).find((el) => el.getBoundingClientRect().width !== 0);
          const foxyAddBtn = document.querySelector('#foxy-add-btn');

          if (!!buttonWrapper && !foxyAddBtn) {
            const button =
              buttonWrapper.querySelector('button') ||
              buttonWrapper.closest('button');

            buttonObserver.disconnect();

            const newButton = button.cloneNode(true);
            newButton.children[1].remove();
            newButton.id = 'foxy-add-btn';
            button.parentNode.replaceChild(newButton, button);
            newButton.addEventListener('click', clickEventListener);

            function clickEventListener() {
              const name =
                document.querySelector('.product__title')?.innerText || '';
              const price =
                document.querySelector('.product__price')?.lastElementChild
                  .innerText || '';
              const image =
                Array.from(
                  document.querySelectorAll('.carousel__image img')
                ).find((el) => el.src).src || '';
              const quantity =
                document.querySelectorAll('.quantity__wrapper span')[2]
                  ?.innerText || 1;
              const productOptions = document.querySelectorAll('.form-item');

              if (!!name && !!price) {
                let cartUrl = `https://${
                  FC.settings.storedomain
                }/cart?name=${encodeURIComponent(
                  name
                )}&price=${price}&quantity=${quantity}&image=${encodeURIComponent(
                  image
                )}`;

                if (productOptions.length === 0) {
                  FC.client.event('cart-submit').trigger({
                    data: { cart: 'add' },
                    url: cartUrl,
                  });
                } else if (
                  productOptions.length > 0 &&
                  Array.from(productOptions).some(
                    (option) => !!option.querySelector('select').value
                  )
                ) {
                  productOptions.forEach((option) => {
                    const optionValue = option
                      .querySelector('select')
                      .selectedOptions[0].innerText.trim();
                    cartUrl += `&Option=${encodeURIComponent(optionValue)}`;
                  });

                  FC.client.event('cart-submit').trigger({
                    data: { cart: 'add' },
                    url: cartUrl,
                  });
                }
              }
            }
          }
        }
      });

      buttonObserver.observe(document.body, {
        childList: true,
        subtree: true,
      });
    }
  });
};