How to use the shopping mall screen path

  • The front screen provided by the cafe24 shopping mall solution has a main screen and a screen created by the user arbitrarily.
  • Here we describe the structure of the shopping mall front screen and how to identify it.

Screen and module of the smart design overview

  • The basic design features of the cafe24 shopping mall solutions utilize smart design.
  • The smart design consists of several modules on one screen, and the concept of the unit for the screen and the module to be separated is shown below.

Understanding the module and module name

  • In smart design, a module can be thought of as a piece of a functional unit that has several of its own independent functions.
  • One module consists of several functions as shown in the image above. The module name is assigned to the module.

Understanding screen paths

  • In smart design, the screen is defined according to the role of the screen, not the screen name. The role of the screen depends on the module you are using on the screen.
  • If a shopping mall operator uses a module that is used on a product detail screen on a page that he/she has arbitrarily added, the product is recognized as having a role of product detail.
  • If you want to know the role of the screen added by the operator, you can check what module composes the screen.
  • For example, assuming that the above two shopping mall screens exist, a screen composed of bulletin board modules such as aaa.html can be simply defined as the main screen of the bulletin board.
  • However, if you have configured a screen that plays a different role, such as bbb.html, the role of this screen is defined by the priority of the module.

Separating the script insertion location using the API

  • The screen code (display_location_code) of the API provided by thecafe24 Developer Center divides the page type based on the role of the screen.
  • With the basic concept of smart design guided above, you can define the role of the screen and insert the screen of the app in the desired position.
  • Screen names to be installed can be checked through the screen code API.
  •  
  • Furthermore, if a screen that previously acted as a product classification screen changed to an exhibition screen by the operator through screen modification, the script source of the app already added is not automatically removed and thus not executed. (apply script dynamic insertion process)
  •  
  • In order to accurately insert the app script on the screen, you need to do the following:
  •  
  • 1) Define the role of the screen on which the app will be executed and confirm the corresponding screen code (display_location_code).
  • 2) Check the module name or common ID of the element that constitutes the screen in the Smart Design Guide, and enter the code to insert the script of the app back and forth based on the area.
  • 3) For layers and floating forms, the script UI can be displayed at any position regardless of the module or screen configuration.

Automatically insert script using API

window.onload = function () {
   // 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"));    
}

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;