text: var currentValue = null;
  var isDisabled = true;
  var config = null;
  
  function updateDisabled(disabled) {
      var elements = $(".search").add(".clear");
      if (disabled) {
          elements.hide();
      } else {
          elements.show();
      }
      updateSize();
      isDisabled = disabled;
  }
  
  function renderSelected(value) {
      var $selected = $(".selected").empty();
      var $titleText = $(".title").find(".text");
      var $clear = $(".clearbtn").hide();
      if (value && value.id && value.title) {
          $titleText.text('Selected product');
          $titleText.addClass('text--is-selected')
          $clear.show();
          productTile($selected, value);
      } else {
          $titleText.text('No product selected');
          $titleText.removeClass('text--is-selected')
      }
      updateSize();
  }
  
  function updateValue(value) {
      // Send updated value to Kentico (send null in case of the empty string => element will not meet required condition).
      if (!isDisabled) {
          if (value && value.id) {
              currentValue = value;
              CustomElement.setValue(JSON.stringify(value));
              renderSelected(value);
          }
          else {
              currentValue = null;
              CustomElement.setValue(null);
              renderSelected(null);
          }
      }
  }
  
  function getData(searchTerm, callback) {
      $.ajax(
          {
              method: "POST",
              url: config.apiEndpoint,
              contentType: "application/json",
              data: JSON.stringify({
                 query: `
  {
    products(first: 10, query: "title=${searchTerm}") {
      edges {
        node {
          id
          handle
          title
          images(first: 1) {
            edges {
            	node {
                originalSrc
              }
            }
          }
          variants(first: 1) {
              edges {
                  node {
                      sku
                  }
              }
          }
        }
      }
    }
  }
  `
              }),
              beforeSend: function(xhr){
                  xhr.setRequestHeader('X-Shopify-Storefront-Access-Token', config.storeFrontAccessToken);
              },
              success: function (response) {
                  var items = response.data.products.edges.map(
                      function (edge) {
                          var images = edge.node.images;
                          var variants = edge.node.variants;
  
                          return {
                              id: edge.node.id,
                              handle: edge.node.handle,
                              title: edge.node.title,
                              previewUrl: images && images.edges && images.edges.length && images.edges[0].node.originalSrc,
                              sku: variants && variants.edges && variants.edges.length && variants.edges[0].node.sku
                          };
                      }
                  );
                  callback(items);
              }
          },
      );
  }
  
  function productTile($parent, item, select) {
      var $tile = $(`<div class="tile" title="${item.title}"></div>`)
          .appendTo($parent);
  
      $(`<div class="title">${item.title}</div>`).appendTo($tile);
      $(`<div class="id">SKU: ${item.sku || 'N/A'} </div>`).appendTo($tile);
  
      if (item.previewUrl) {
          $('<img class="preview" />')
              .attr("src", item.previewUrl)
              .appendTo($tile)
              .on('load', updateSize);
      }
      else {
          $('<div class="noimage">No image available</div>')
              .appendTo($tile);
      }
  
      if (select) {
          $tile
              .attr('tabindex', 0)
              .keypress(function (e) {
                  if (e.which == 13) {
                      select();
                  }
              })
              .click(function () {
                  select();
              });
      }
  
      updateSize();
  }
  
  function search() {
      var searchTerm = $("input.searchterm").val();
      getData(
          searchTerm,
          function (items) {
              var $results = $(".results").empty().show();
  
              $(`<h4>Search results (${items.length})</h4>`).appendTo($results);
  
              $.each(
                  items,
                  (i, item) => {
                      if (i >= 10) {
                          return false;
                      }
  
                      var value = item;
  
                      var select = () => {
                          updateValue(value);
                          clearSearch();
                      };
  
                      productTile($results, item, select);
                  }
              );
          }
      );
  }
  
  function clearSearch() {
      $(".results").empty().hide();
      $("input.searchterm").val('');
      updateSize();
  }
  
  function setupSelector(value) {
      $("form.searchform").submit(function (e) {
          e.preventDefault();
          $('input.searchterm').focus();
          search();
      });
  
      $("button.clearbtn").click(function (e) {
          e.preventDefault();
          $('input.searchterm').focus();
          updateValue(null);
      });
  
      $("button.clearsearchbtn").click(function (e) {
          e.preventDefault();
          $('input.searchterm').focus();
          clearSearch();
      });
  
      if (value) {
          currentValue = JSON.parse(value);
          renderSelected(currentValue);
      }
      else {
          renderSelected(null);
      }
  
      window.addEventListener('resize', updateSize);
  }
  
  function updateSize() {
      // Update the custom element height in the Kentico UI.
      const height = Math.ceil($("html").height());
      CustomElement.setHeight(height);
  }
  
  function validateConfig() {
    if (!config.apiEndpoint) {
      console.error("Missing Shopify API endpoint. Please provide apiEndpoint within the custom element JSON config.")
    }
    if (!config.storeFrontAccessToken) {
      console.error("Missing Shopify Storefront access token. Please provide storeFrontAccessToken within the custom element JSON config.")
    }
  }
  
  function initCustomElement() {
      $('.results').hide();
      $('.clearbtn').hide();
      updateSize();
  
      try {
          CustomElement.init((element, _context) => {
              // Setup with initial value and disabled state
              config = element.config || {};
              validateConfig();
              updateDisabled(element.disabled);
              setupSelector(element.value);
              updateSize();
          });
  
          // React on disabled changed (e.g. when publishing the item)
          CustomElement.onDisabledChanged(updateDisabled);
      } catch (err) {
          // Initialization with Kentico Custom element API failed (page displayed outside of the Kentico UI)
          console.error(err);
          setupSelector();
          updateDisabled(true);
      }
  }
  
  initCustomElement();
  