Checking if a vendor code exists in the PIM (2) (2)

The following instructions describe how to check the availability of a vendor code in the PIM for the integration.

For a full integration guide, please click here.

The article explains how to check the availability of vendor codes from front-end using AJAX. However, if you prefer using API for this purpose, please click here.

Step 1

Please check if your website uses JQuery;
If you haven’t dealt with it before, please check this article to proceed.

Please note that if you didn’t add JQuery to you website before, it is better to use CDN method.

Step 2

Add the code below to the Wizart integration code.

<script>
  document.addEventListener('DOMContentLoaded', function(){
  	checkAvailableVendorCode();
  });

  function checkAvailableVendorCode() {
      const api_token = "api_token_from_PIM";
      const server_address = 'https://pim-client.wizart.ai';

      const availableVendorCodes = server_address
          + '/api/articles/available-vendor-codes'
      ;

      $.ajax({
              url: availableVendorCodes + '?vendor_code=' + vendor_code,
        	  dataType: 'json',
              data: {
                  api_token: api_token,
              },
              success: (response) => {
                  $.each(response.data.vendor_codes, function (index, el) {
                    if (el === true) {
                    	...doing something...
                    }
                  });
              },
      });
  }
</script>

The code above is general one. However, if the Wizart entry point button is needed for those products only that are available in the PIM, please check the code below.

This is usually the case: display entry-point-button only where necessary. The code below can help you.

Please note that the example is given for a default entry point button. You can read this article to find out more about additional parameters of the Wizart entry point button.

<script type="application/javascript" src="https://d35so7k19vd0fx.cloudfront.net/production/integration/entry-point.min.js"></script>

<script>
  function getVendorCode() {
    const vendorCode = //your code for getting vendor_code (SKU) from your website
    return vendorCode
  }
  
  function checkAvailableVendorCode(vendor_code) {
      const api_token = "api_token_from_PIM";
      const server_address = 'https://pim-client.wizart.ai';

      const availableVendorCodes = server_address
          + '/api/articles/available-vendor-codes'
      ;

      $.ajax({
              url: availableVendorCodes + '?vendor_code=' + vendor_code,
        	  dataType: 'json',
              data: {
                  api_token: api_token,
              },
              success: (response) => {
                  $.each(response.data.vendor_codes, function (index, el) {
                    if (el === true) {
                    	document.getElementsByClassName('wizart-product-page')[0].style.display = "inline-flex";
                    }
                  });
              },
      });
  }
  
  document.addEventListener('DOMContentLoaded', function(){
     sku = getVendorCode()
     const entryPoint = new window.WEntryPoint({
        token: "your token for wizart",
        element: "link to the element to insert the entry point button", // example document.getElementById("0000")
        vendorCode: sku
      });
  
     entryPoint.render({
        className: "wizart-product-page"
     });
     
     checkAvailableVendorCode(sku);
  });
  
</script>

<style>
   .wizart-product-page {
      display: none;
   }
</style>