1. Include JavaScript File in Ecommerce

Include Artifi JavaScript file
https://<artifi_instance_domain>/scripts/<version>/Artifi.headless.js into the Ecommerce PDP page.

2. Include Artifi React Widget Component Container

Artifi provide components as listed below. These components are in the form of HTML div tag, which has unique IDs. Add these div containers wherever the component is required on the page. Editor component is mandatory to include in all the mentioned components below for rendering the other components.

2.1 Editor -

<div id="artifi-editor"></div>

Editor includes the product image area along with the canvas area (decoration area) on the product image. 

2.2 Text Open Widget List -

<div id="artifi-text-widget-open-List"></div>

This component allows the E-commerce PDP page to add the textbox for personalizing the product.
The text properties like textbox captions, bold, italics, horizontal alignment, number of textline, character limit for all lines, text validations (all caps, all small, auto uppercase, auto lowercase and only numbers), font size, auto font size, fonts family, and text color will be visible in the text open widget list. The text properties may vary depending on the rule properties enabled or disabled from Artifi admin.

2.3 Text Widget List - 

<div id="artifi-text-widget-list"></div> 

All the added widget list will be displayed on the PDP page to include the text widget list component. On adding any text on any of the text boxes will show the properties like textbox captions, bold, italics, horizontal alignment,  number of textline, character limit for all lines, text validations (all caps, all small, auto uppercase, auto lowercase and only numbers), font size, auto font size, fonts family, and  text color, only for the selected textbox. The text properties may vary depending on the rule properties enabled or disabled from Artifi admin.

Default First Screen without Text Properties

Selected Textbox with Text Properties

2.4 Add to Cart -

<div id="artifi-add-to-cart"></div>

The Add to Cart component will save the personalization data on the Artifi server and will return the unique order id that can be saved on the Ecommerce system.

2.5 Upload image -

<div id="artifi-upload-user-image"></div> 

Using this component, the user can upload an image from their computer location to personalize the product.  

2.6 My Art / Display User Images-

<div id="artifi-user-images"></div>

These are the images uploaded by the user through the upload image component mentioned in point number 2.5.

2.7 Display Cliparts -

<div id="artifi-clipart"></div>

These cliparts can be used for personalizing the product. These cliparts are the cliparts added in Artifi admin. Below are the 2 ways on which the cliparts will be displayed using  the following parameters.

2.7.1 Client Code - If the clipart family has a client code, the clipart will be displayed on the basis of client code. 

2.7.2 Rule Code - If the clipart family does not have a client code, the clipart will be displayed on the basis of rule code.

Note - If both the parameters client code and rule code are passed, the priority will be given to the client code.

API Parameters with Client Code: 

https://integrationdevapidesigner.artifi.net/api/v1/Cliparts/GetCliparts?clientCode={clientCode}&ruleCode={ruleCode}&folderCode=&pageIndex=1&pageSize=25&websiteId={websiteId}&webApiClientKey={webApiClientKey} 

API Parameters with Rule Code: 

https://integrationdevapidesigner.artifi.net/api/v1/Cliparts/GetCliparts?ruleCode={ruleCode}&folderCode=&pageIndex=1&pageSize=25&websiteId={websiteId}&webApiClientKey={webApiClientKey} 

3. Initialize Artifi

When the document is ready, utilize the Artifi.Initialize method to initialize Artifi. Once this method is invoked, the React component will become operational on the PDP page, enabling website users to personalize the product.

Following are the required parameters to initialize Artifi in Ecommerce.

 Artifi.initialize({
          webApiClientKey: "<Artifi WebAPIClientKey>",
          websiteId: "<Artifi WebsiteId>",
          userId: "<Ecommerce UserId>",
          isGuest: "<User Type Guest/Logged In >",
          sku: "<Artifi Product Sku>",
        });

4. Add to Cart

Once the product is customized, the website users can add it to cart. While adding the product to cart Artifi.AddtoCart method will be called to add the product to cart.

Artifi will respond to the method and Ecommerce will process the customized product to cart.

Artifi.AddToCart()

5. List of Artifi Events

Artifi events will be triggered and Ecommerce will actively listen to and monitor the events. Subsequently, Ecommerce will process the events and leverage them according to their specific requirements.

Following are the list of Artifi events that can be utilized by E-commerce as per the need.

 window.addEventListener("artifi-initialized", function (e) {
       //Your code will go here
});

window.addEventListener("artifi-widget-added", function (e) {
       //Your code will go here
  });

window.addEventListener("artifi-view-changed", function (e) {
       //Your code will go here
  });

window.addEventListener("artifi-add-to-cart-success", function (e) {
       //Your code will go here
  });

window.addEventListener("artifi-add-to-cart-error", function (e) {
       //Your code will go here
  });