Usare Clerk.js per effettuare chiamate API

Clerk.js può essere utilizzato per effettuare chiamate API più avanzate

È possibile utilizzare Clerk.js per effettuare chiamate API, utilizzando la funzione integrata Clerk.call(), che accetta 3 argomenti.

Esempio di chiamata

Definire la funzione e chiamarla nel tracking-script.

HTML

<script type="text/javascript">
    (function(w,d){
      var e=d.createElement('script');e.type='text/javascript';e.async=true;
      e.src=(d.location.protocol=='https:'?'https':'http')+'://cdn.clerk.io/clerk.js';
      var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
      w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){w.__clerk_q.push(arguments)};
    })(window,document);

    Clerk('config', {
      key: 'INSERT_YOUR_API_KEY_HERE'
    });
  </script>

<script>
  function popularProducts(){
    Clerk("call",
      "recommendations/popular",
      {
        limit: 10,
        labels:["Home Page / Bestsellers"]
      },
      function(response){
        console.log(response);
      },
      function(response){
        console.error(response);
      }
    );
  }
</script>

Risposta

La risposta a un oggetto JavaScript, con lo stato della chiamata API e il risultato.

JavaScript

__clerk_cb_1(
  {
   "status":"ok",
   "count":72,
   "facets":null,
   "result":[399,410,551,338,403,439,425,402,406,456]
  }
);

Lavorare con la risposta

Utilizzare una funzione Callback per gestire la risposta

HTML

<script>
  Clerk("call",
    (
      "search/categories",
        {
          'query': "men",
          'limit': "10"
        },
        function(x){
          var cat = x.categories;
          if(cat.length > 0)
          {
            let heading = document.createElement('h3');
            heading.textContent = 'Related Categories';
            document.querySelector('#your-target').append(heading);
          }
          for(var index in cat) {
            var clerkName = cat[index].name;
            var clerkUrl = cat[index].url;
            let link = document.createElement('a');
            link.href = clerkUrl;
            link.textContent = clerkName;
            document.querySelector('#your-target').append(link);
         }
      }
   )
</script>

Questo esempio restituisce le categorie corrispondenti alla query e le presenta come testo. In questo modo è possibile effettuare chiamate alla nostra API in modo semplice e veloce.