Adding context

In order to enable context (e.g. add different prices or links depending on user location or any other context information), you will have to make corresponding changes in your CSV file (the information file you are uploading into your PIM account), as well as in your integration code.

How to add context information to the CSV file.

Adding context information to your integration

You need to add certain parameters to your integration code using Wizart Web Visualizer: integration :

You need to add the following parameter to the piece of the code highlighted on the screenshot above:

 + '&context=string

The result you are supposed to get:

const fittingRoomEndpoint = server_address

 + '/fitting-room'

 + '?api_token=' + api_token

 + '&bba=true'

 + '&context=string

;

Example

+ '&context=string

instead of string, you should set your context.

For example, before we used Shop A, Shop B (“https://link_to_your_website_1/, https://link_to_your_website_2/”)

So, instead of string, you should set the following links:

+ '&context=“https://link_to_your_website_1/, https://link_to_your_website_2/” '

const fittingRoomEndpoint = server_address

+ '/fitting-room'

+ '?api_token=' + api_token

+ '&bba=true'

+ '&context=“https://link_to_your_website_1/, https://link_to_your_website_2/” '

;

Adding context when using the iframe method

For example, you have SiteAB, SiteBC, SiteDE:

Article Context	Article_promotional_price	Name
“SiteAB, SiteBC, SiteDE“	“50,220,50“	Article1
“SiteAB, SiteBC“	“51,221“	Article2
“SiteAB“	“52“	Article3

For this src:
https://pim-client.wizart.tech/fitting-room?api_token=your_API_token&en all products will be displayed.

<iframe
id="wizart-fitting-room-object"
role="dialog"
aria-label="Wizart Fitting Room."
type="text/html"
class="active"
src="https://pim-client.wizart.tech/fitting-room?api_token=your_API_token&en"
allowfullscreen
>
</iframe>

2. For src: https://pim-client.wizart.tech/fitting-room?api_token=your_API_token&en&context=SiteAB
product Article1 (Article_promotional_price = 50), Article2 (Article_promotional_price = 51), Article3 (Article_promotional_price = 52) will be displayed.

<iframe
id="wizart-fitting-room-object"
role="dialog"
aria-label="Wizart Fitting Room."
type="text/html"
class="active"
src="https://pim-client.wizart.tech/fitting-room?api_token=your_API_token&en&context=SiteAB"
allowfullscreen
>
</iframe>

3. For src: https://pim-client.wizart.tech/fitting-room?api_token=your_API_token&en&context=SiteBC
products Article1 (Article_promotional_price = 220), Article2 (Article_promotional_price = 221) will be displayed.

<iframe
id="wizart-fitting-room-object"
role="dialog"
aria-label="Wizart Fitting Room."
type="text/html"
class="active"
src="https://pim-client.wizart.tech/fitting-room?api_token=your_API_token&en&context=SiteBC"
allowfullscreen
>
</iframe>

4. For src: https://pim-client.wizart.tech/fitting-room?api_token=your_API_token&en&context=SiteDE
products Article1 (Article_promotional_price = 50) will be displayed.

<iframe
id="wizart-fitting-room-object"
role="dialog"
aria-label="Wizart Fitting Room."
type="text/html"
class="active"
src="https://pim-client.wizart.tech/fitting-room?api_token=your_API_token&en&context=SiteDE"
allowfullscreen
>
</iframe>

This way you can control the visibility of the products on the website and the prices (any context-sensitive attribute (!if you have any context attribute except Article_context) for them).

Adding context when using Deployment Kit

Entry point button

First, you need to find the parameter “data-parameters” in the code of your button and add the context. For example, you have this code on your site 1 and the same code on site 2:

<script
  class="wizart__entry-point"
  data-token="token"
  data-title=""
  data-vendor_code=""
  data-article_query=""
  data-parameters=""
  data-image=""
  data-color=""
  data-background=""
  data-tooltip_title=""
  data-tooltip_position=""
  data-tooltip_disable=""
  data-glitter_disable=""
  data-width=""
  data-height=""
  data-border=""
  data-border_radius=""
  data-class_name=""
  data-onload-callback=""
  data-on-close-callback=""
  data-on-button-click=""
  data-element-selector=""
  data-insert-element-position=""
  data-iframe-element-selector=""
  data-insert-iframe-element-position=""
src="https://wizart-files.fra1.digitaloceanspaces.com/production/integration/entry-point.min.js"
></script>

In “data-parameters” for site 1, you should add: “link_to_your_website_1/” (the same that you added in the CSV file)
data-parameters = “link_to_your_website_1/”
In “data-parameters” for the site 2, you should add: “link_to_your_website_2/” (the same that you added in CSV file)
data-parameters = “link_to_your_website_2/”

Floating button

First, you need to find the parameter “data-parameters” in the code of your button and add context.
For example, you have this code on your site 1 and the same code on site 2:

<script
  class="wizart__floating-button"
  data-title="Custom button title"
  data-token="token"
  data-vendor_code=""
  data-article_query=""
  data-parameters=""
  data-background=""
  data-color=""
  data-image=""
  data-tooltip_title=""
  data-tooltip_position=""
  data-tooltip_disable=""
  data-glitter_disable=""
  data-width=""
  data-height=""
  data-border=""
  data-border_radius=""
  data-class_name=""
  data-compact=""
  data-on-button-click=""
  data-element-selector=""
  data-insert-element-position=""
  data-iframe-element-selector=""
  data-insert-iframe-element-position=""
src="https://wizart-files.fra1.cdn.digitaloceanspaces.com/production/integration/floating-button.min.js"
></script>

In “data-parameters” for site 1, you should add: “link_to_your_website_1/” (the same that you added in the CSV file)
data-parameters = “link_to_your_website_1/”
In “data-parameters” for the site 2, you should add: “link_to_your_website_2/” (the same that you added in CSV file)
data-parameters = “link_to_your_website_2/”