Defaults:

Client Name: Enter Client’s Name

Site Id: Site ID will be provided by the Social Annex

Purpose of the Document

This document contains the code snippets for displaying the Visual Commerce module on different pages of the website, for the SPA (Single Page Application) environment.

Implementation Instructions for Visual Commerce

Firstly, add the following JScript to your Index page&callit, when your site loads for the first time(on the user's system).

Homepage

In order to display the Visual Commerce module on the homepage, you will have to follow the steps below:

1. Add the following div on the homepage, where you want to display the image slider.

2. Call the following function, once the Homepage loads on the user’s system. It will display the Visual Commerce Homepage slider.

Product Page:

In order to display the Visual Commerce module on the product page, you will have to follow the steps below:

1. Add the following div on the product page, where you wish to display the image slider.

2. Whenever the client loads the product page OR reinitializes the values of the sa_s22_product variable, the client should call the following function to display the Visual Commerce slider on the product page.

Function:

Note: In the above code, replace “PASS_PRODUCT_CODE” with the product id for the specific product page (implement it in the same way which you have implemented for the current Visual Commerce version).

Product Category Page:

 In order to display the Visual Commerce module on the product category page, you will have to follow the steps below:

1. Add the following div on the product category page, where you want to display the image slider.

2. Whenever the client loads the Category page OR reinitialize the values of sa_s22_instagram_category_type and sa_s22_instagram_category_code variables, then the client should call the following function to display the Visual Commerce Category page slider.

Note: 

1. In the above code, replace “PASS_CATEGORY_CODE” with the category id for the specific category page (implement it in the same way, which you have implemented for the current Visual Commerce version).
2. Also, replace “PASS_CATEGORY_TYPE” with the specific category type (implement it in the same way, which you have implemented for the current Visual Commerce version).

Gallery Page

In order to display the Visual Commerce module on the Gallery page, you will have to follow the steps below:

1. Add the following div between the header & footer of the gallery page (which you have created).

2. Whenever the client loads the Gallery page, the client should call the following function to display the Visual Commerce Gallery

Order History Page

In order to display the Visual Commerce module (i.e., image upload button) on the Order History page, you will have to follow the steps below:

1. Pass Divs (with multiple product arrays) to Annex Cloud, where the client wishes to display the Visual Commerce upload button. Same as the client is currently providing for the current Visual Commerce version, refer to the following example.

2. Whenever the Order History page loads, the client should call the following function (with multiple product arrays) to display the Visual Commerce Upload image button on the Order History Page.

Note: 

• In the above code, sa_s22_multiple_products is an array with a key like a Div_id and a value a ProductCode-index number.
  Refer to the following example:
  E.g.: sa_s22_multiple_products = [sa_ugc_compare-1: "1013876150-1",
  sa_ugc_compare-2: "1045878961-2", sa_ugc_compare-3: "3267402-3",
  sa_ugc_compare-4: "1016077810-4"]

Order Details Page.

In order to display the Visual Commerce module (i.e. image upload button) on the Order Details page, you will have to follow the steps below:

1. Pass Divs (with multiple product arrays) to Annex Cloud, where the client wishes to display the Visual Commerce upload button. Same as the client is currently providing for the current Visual Commerce version, refer to the following example.

2. Whenever the Order Detail page loads, the client should call the following function (with multiple product arrays) to display the Visual Commerce Upload image button on the Order Details Page.

Note: 

• sa_s22_multiple_products is an array with a key like a Div_id and value as a ProductCode-index number.
  E.g., sa_s22_multiple_products = [sa_track-2: "1014567372-2", sa_track-1:"1044341237-1"]

Product Compare Page

In order to display the Visual Commerce module on the product comparison page, you will have to follow the steps below:

1. Pass Divs (with multiple product arrays) to Annex Cloud, where the client wishes to display the Visual Commerce upload button. Same as the client is currently providing for the current Visual Commerce version, refer to the following example.

2. Whenever the Product Compare page loads, the client should call the following function (with multiple product arrays) to display the Visual Commerce multiple image sliders on the Product Compare Page.

Registry Page

In order to display the Visual Commerce module on the Registry page, you will have to follow the steps below:

1. Add the following div between the header & footer of the Registry page.

2. Whenever the Registry page loads, the client should call the following function to display the Visual Commerce module on the Registry page.

Note:

1. In the above code, replace PASS_USER_EMAIL with the registered user’s email id.
2. Also, replace PASS_REGISTRY_ID with the user’s unique registry id.
3. Also, replace PASS_REGISTRY_TYPE with the type of registry.
4. Also, replace PASS_REGISTRY_OWNER_VIEW_VALUE with 1 or 0; Pass‘1’ if logged in to a user watching own registry and pass ‘0’ if logged in to a user watching another registry.