GombaShop / Shopiko Integration

<script
  async
  type="text/javascript"
  src="https://releva.ai/sdk/v0/js/releva-sdk-js.min.js"
  onload="document.dispatchEvent(new Event('relevaSdkLoaded'));"
></script>

<script>
  document.addEventListener('relevaSdkLoaded', function () {
    // TODO: fill in the access token from Releva Admin Panel -> Shop -> Access Token
    var accessToken = '';
    // TODO: fill in the page tokens from Releva Admin Panel
    var pageTokens = {
      home: '',
      category: '',
      product: '',
      cart: '',
      search: '',
    };

    var relevaPushObject = {
      page: {},
      cart: { products: [] },
      profile: {},
    };

    var path = window.location.pathname;

    // Thank you page for ordering
    if (/purchase-done.html/.test(path)) {
      // Get the releva push object where the order details are stored
      // from local storage because we can't get these details on this page
      relevaPushObject = getRelevaPushObject();

      // There is no releva push object in the local storage
      if (!relevaPushObject) {
        return;
      }

      relevaPushObject.cart.cartPaid = true;
      // Add the order id from this page
      relevaPushObject.cart.orderId = $('.number-holder').text();

      relevaPush(relevaPushObject);
      removeRelevaPushObject();
      return;
    }

    var promisesToWait = [getCartProducts(), getUserProfile()];

    Promise.all(promisesToWait).then((data) => {
      relevaPushObject.cart.products = data[0];
      relevaPushObject.profile = data[1];

      var isUserLoggedIn = Object.keys(relevaPushObject.profile).length;

      // User is not logged in so try to get anonymous profile
      if (!isUserLoggedIn) {
        anonymousProfile = localStorage.getItem('anonymousProfile');

        if (anonymousProfile) {
          relevaPushObject.profile = JSON.parse(anonymousProfile);
        }
      }

      // Home page
      if (path === '/') {
        relevaPushObject.page.token = pageTokens.home;
      }

      // Category page
      if (isCategoryPage(path)) {
        relevaPushObject.page.token = pageTokens.category;
        relevaPushObject.page.ids = getListedProducts();
        relevaPushObject.page.categories = getPageCategories();
      }

      // Product page
      if (isProductPage(path)) {
        relevaPushObject.page.token = pageTokens.product;
        relevaPushObject.product = { id: getProductId() };
        relevaPushObject.product.custom = getProductCustomOptions();

        // Changed the selected variant of the product which means
        // that we are viewing the product with custom options
        window.addEventListener('hashchange', () => {
          relevaPushObject.product.custom = getProductCustomOptions();
          relevaPush(relevaPushObject);
        });
      }

      // Cart page
      if (path === '/shopping-cart.html') {
        relevaPushObject.page.token = pageTokens.cart;
      }

      // Search page
      if (path === '/search.php') {
        relevaPushObject.page.token = pageTokens.search;
        relevaPushObject.page.query = getSearchQuery();
        relevaPushObject.page.ids = getListedProducts();
      }

      // Confirm order page
      if (path === '/confirm.html') {
        // Check if user is making order without registered profile
        if (!isUserLoggedIn) {
          var clientInformation = getAnonymousClientInformation();

          relevaPushObject.profile = clientInformation;

          // Save anonymous profile of the user
          localStorage.setItem('anonymousProfile', JSON.stringify(clientInformation));
        }

        var confirmForm = $('#mainFrm');
        confirmForm.on('submit', () => confirmOrder(relevaPushObject));
      }

      relevaPush(relevaPushObject);
    });

    function getCartProducts() {
      return ajax({ url: '/axCartList.php', type: 'GET' })
        .then((response) => {
          var $response = $(response);

          var products = [];
          var $products = $response.find('.gs-cart-row:not(.head-row)');
          if (!$products.length) {
            $products = $response.find('.mgs-cart-row:not(.head-row)');
          }

          $products.each(function () {
            var $product = $(this);

            var $quantityInput = $product.find('.item-sum');
            var quantityInputName = $quantityInput.attr('name');
            var quantity = parseInt($quantityInput.val());

            var id = quantityInputName.substring(
              quantityInputName.lastIndexOf('[') + 1,
              quantityInputName.lastIndexOf(']')
            );

            // Remove the variation ids from the actual product id
            if (id.indexOf('-') !== -1) {
              id = id.substring(0, id.indexOf('-'));
            }

            var $price = $product.find('.gs-order-price span');
            if (!$price.length) {
              $price = $product.find('.mgs-order-price span');
            }

            var price = parseFloat($price.text().split(' ')[0].replace(',', '.'));

            var custom = undefined;

            var $selectedOptions = $product.find('.gs-order-info .gs-info-row');
            if (!$selectedOptions.length) {
              $selectedOptions = $product.find('.mgs-order-info .mgs-info-row');
            }

            if ($selectedOptions.length) {
              custom = { string: [] };

              $selectedOptions.each(function () {
                var $row = $(this);
                custom.string.push({ key: $row.find('span').text(), values: [$row.find('strong').text()] });
              });
            }

            products.push({
              id,
              price,
              quantity,
              custom,
            });
          });

          return products;
        })
        .catch((error) => {
          console.log(error);
          return [];
        });
    }

    function getUserProfile() {
      var userProfile = {};

      return ajax({ url: '/welcome.html', type: 'GET' })
        .then((response) => {
          var $response = $(response);

          var $firstNameInput = $response.find('input[name="client[name]"]');
          if ($firstNameInput.length) {
            userProfile.firstName = $firstNameInput.val();
          }

          var $lastNameInput = $response.find('input[name="client[nameLast]"]');
          if ($lastNameInput.length) {
            userProfile.lastName = $lastNameInput.val();
          }

          var $emailInput = $response.find('input[name="client[email]"]');
          if ($emailInput.length) {
            userProfile.email = $emailInput.val();
          }

          return userProfile;
        })
        .catch((error) => {
          console.log(error);
          return userProfile;
        });
    }

    function getPageCategories() {
      var categories = [];
      var pageData = JSON.parse($('script[type="application/ld+json"]').html());
      var categoriesData = pageData.itemListElement;

      // Remove the first element because it is the Home page
      categoriesData.shift();

      categories = categoriesData.map((categoryData) => categoryData.item.name.trim());

      return [categories.join('/')];
    }

    function getProductId() {
      let productId = $('#orderFrm input[name="Id"]').val();
      
      // Fallback for products that are not available and the above selector won't work
      if (!productId) {
        productId = $('#stamped-main-widget').data('product-id');
        
        if (typeof productId === 'number') {
          productId = productId.toString();
        }
      }
    
      // Another fallback if the above fallback does not work
      if (!productId) {
        $('script[type="application/ld+json"]').each((index, script) => {
          if (!script || !script.text) {
            return;
          }
    
          const sku = JSON.parse(script.text.replaceAll('\n', '')).sku;
          if (sku) {
            productId = sku;
          }
        });
      }
    
      return productId;
    }

    function getListedProducts() {
      var $products = $('#__gs-catalog-products-grid .gs-grid-inline-container > .gs-grid-item');

      if (!$products.length) {
        $products = $('#__mgs-catalog-products-grid .mgs-grid-inline-container > .mgs-grid-item');
      }

      if (!$products.length) {
        return [];
      }

      var productIds = [];

      $products.each((index, product) => {
        var productId = $(product).data('pid').toString();
        productIds.push(productId);
      });

      return productIds;
    }

    function getSearchQuery() {
      var searchQuery = window.location.search;
      // Remove '?search=' from start of the string
      searchQuery = searchQuery.substring(8);
      // Decode encoded uri
      // Example -> '%D1%82%D0%B5%D1%81%D1%82' to 'тест'
      searchQuery = decodeURI(searchQuery);
      // Convert all '+' symbols to spaces
      searchQuery = searchQuery.replaceAll('+', ' ');

      return searchQuery;
    }

    function getAnonymousClientInformation() {
      var client = {};

      var $checkoutInfo = $('.checkout-info').first();

      client.email = $checkoutInfo.find('p:nth-child(3)').text();

      var names = $checkoutInfo.find('p:nth-child(2)').text().split(' ');
      client.firstName = names[0];
      client.lastName = names[1];

      return client;
    }

    function confirmOrder(relevaPushObject) {
      saveRelevaPushObject(relevaPushObject);

      var isSubscribed = $('#newsletter').is(':checked');

      var profile = relevaPushObject.profile;

      if (isSubscribed && profile.email.length) {
        Releva.requestSubscribe(profile.email, profile.firstName, profile.lastName, null, null, [], console.log);
      }
    }

    function saveRelevaPushObject(relevaPushObject) {
      localStorage.setItem('relevaPushObject', JSON.stringify(relevaPushObject));
    }

    function getRelevaPushObject() {
      var relevaPushObject = localStorage.getItem('relevaPushObject');

      if (!relevaPushObject) {
        return null;
      }

      return JSON.parse(relevaPushObject);
    }

    function removeRelevaPushObject() {
      localStorage.removeItem('relevaPushObject');
    }

    function relevaPush(relevaPushObject) {
      Releva.push(
        accessToken,
        relevaPushObject,
        function (result) {},
        function (error) {}
      );
    }

    function isCategoryPage(path) {
      // Check by url of the page
      if (/catalog-details/.test(path)) {
        return true;
      }

      // This event is used only on category page
      const gtagEvent = 'view_item_list';

      // Check by gtag (this is used when client have changed the url of the category page)
      if (document.documentElement.textContent.includes(`gtag('event', '${gtagEvent}', {`)) {
        return true;
      }

      return false;
    }

    function isProductPage(path) {
      // Check by url of the page
      if (/product-details/.test(path)) {
        return true;
      }

      // This event is used only on product page
      const gtagEvent = 'view_item';

      // Check by gtag (this is used when client have changed the url of the product page)
      if (document.documentElement.textContent.includes(`gtag('event', '${gtagEvent}', {`)) {
        return true;
      }

      return false;
    }

    function ajax(options) {
      return new Promise(function (resolve, reject) {
        $.ajax(options).done(resolve).fail(reject);
      });
    }

    function getProductCustomOptions() {
      var urlHash = window.location.hash;
      // Check if we have selected variant, we do that because
      // this means that every select element has selected value
      if (!urlHash.startsWith('#variant=')) {
        return;
      }

      const customOptions = { string: [] };

      var $optionsSelects = $('#orderFrm .gs-select-wrap select');
      if (!$optionsSelects.length) {
        $optionsSelects = $('#orderFrm .mgs-select-wrap select');
      }

      $optionsSelects.each(function () {
        var $option = $(this);
        var $selectedOption = $option.find('option:selected');

        if (!$selectedOption.length) {
          return;
        }

        var optionKey = $option.data('field-label');
        var optionValue = $selectedOption.text();

        customOptions.string.push({
          key: optionKey,
          values: [optionValue],
        });
      });

      return customOptions;
    }
  });
</script>