Sample source using Front API

  • The Front API is an API that provides only the information that is generally open to the public. It can be used to query the API without a token and easily create an app.
  • Because the sample reference is made up of only the basic required codes, it is available for reference only.
  • The sample reference source code provides code written on a php basis.

About sample code

The sample source code is an app created using the front data, which is generally public information provided on the shopping mall screen.
The app has a function that stimulates the customers‘ interest in the product by showing in real time how many customers have viewed it and how many products are in the shopping cart.

Front API source code format

  • Using the JavaScript SDK, you can easily call the front API. [the admin API cannot be called]
  • JavaScript SDK usage condition: It works only if the script of the app service is installed through the script API (scripttags API).

Example) View the number of products on the front screen

Example of execution

CAFE24API.get('/api/v2/products/count', function(err, res){
      console.log(res);
});


Example of response

{
      "count": 12
}

Sample script source code using the Front API

window.onload = function () {

   var iHits = 0;
   var iCartCount = 0;

   function rollingBanner() {

      // Call by APIs (FRONT API)
      CAFE24API.get('/api/v2/products/' + window.iProductNo + '/hits/count', function (err, oResultCount) {
         iHits = oResultCount.count;

            CAFE24API.get('/api/v2/products/' + window.iProductNo + '/cart/count', function (err, oResultCart) {
            iCartCount = oResultCart.count;

            // App UI screen script (inserted after .xans-product-detail module)
            // You can configure the location using the HTML Element ID by checking it. Wing banners or layers can be positioned automatically

            $(".xans-product-detail").after([
            Enter the HTML source code that suits the design.
            Enter the HTML source code that suits the design.
            ].join("\n"));

            var rolling = setInterval(function () {
               $(".rollring_container").animate({
                  top: "-=50",
               }, 1000, function () {
                  $(".rollring_container").css('top', 0);
                  $(".rollring_container div").first().appendTo('.rollring_container');
               });

            }, 2000);
         });
      });
   }

   rollingBanner();

   var intervalChange = setInterval(function () {
         CAFE24API.get('/api/v2/products/' + window.iProductNo + '/hits/count', function (err, oResultCount) {
         iHits = oResultCount.count;

         CAFE24API.get('/api/v2/products/' + window.iProductNo + '/cart/count', function (err, oResultCart) {
            iCartCount = oResultCart.count;
            $('#cartCountSpan').html(iCartCount);
            $('#hitCountSpan').html(iHits);
         });

      });
   }, 4000);

}

Sample source code for automatic script installation

  • If you need to insert a script into the front screen of the Cafe24 shopping mall platform, you can install (insert) the script on the desired screen easily and conveniently through the script API. The name of the screen to be installed can be checked through the screen code API.
  • The script reflected in the shopping mall front works by calling the script of the developer's runtime server.

Example) Source code to automatically install script on the front screen (provided as PHP source)

< ? php $sAcctoken = '{{value of Access Token issued}}'; $sEndPointUrl = 'https: // {{Mall ID}}. cafe24api.com/api/v2/admin/scripttags'; $aPostData = array( "shop_no" => {{number of the shopping mall to install (shop_no)}}, "request" => array( "client_id" => "{{App key(Client_id)}}", "src" => "{{script files to install (* .js)}}", "display_location" => "{{screen code}}" // The screen on which the *.js is inserted. ) ); // Commonal code $oCurl = curl_init(); curl_setopt_array($oCurl, array( CURLOPT_URL => $sEndPointUrl, CURLOPT_POST => 1, CURLOPT_POSTFIELDS => json_encode($aPostData), CURLOPT_RETURNTRANSFER => true, CURLOPT_HTTPHEADER => array('Authorization: Bearer ' . $sAcctoken, "Content-Type: application/json") )); $sResponse = curl_ex ec($oCurl); echo 'Successfully inserted'; exit;