Page Comparison

You are just a few steps away from completing a successful integration and boosting your sales with it.

Info
Please note that prior to the integration, you need to get a Wizart API Token. You can access find it in your Wizart PIM account. In order to get a Wizart PIM account, please start your free trial at www.wizart.ai.

Expand

title	The integration includes adding entry point buttons to:

Homepage - adding a floating button launching the Visualizer to the homepage. The floating button with a glitter effect moves along the screen when scrolling (i.e is always seen on the screen). The floating button is placed by default in the bottom right corner of the website homepage.

Category page – adding an entry point button to the category page. The entry point button is static (i.e. does not change its position on the webpage). This button is placed by default below each item. It launches the Visualizer, and the corresponding product is automatically applied on the chosen surface.

Info
Please, make sure the unique SKU ID (vendor code) of the product item on your website corresponds to the unique SKU ID you uploaded to Wizart PIM system.

Image Removed

Product page - adding an entry point button for each product item on the an individual product page. The entry point button is static (i.e. does not change its position on the webpage). This button is placed by default below each item (что это значит? под каждым объектом?). It launches the Visualizer, and the corresponding product is automatically applied on the chosen surface.

Info
Please, make sure the unique SKU ID (vendor code) of the product item on your website corresponds to the unique SKU ID you uploaded to the Wizart PIM system.

We prepared for you step-by-step instructions for super-easy integration by plugin!

Expand

title	How to install plugin? Step by step

Tip
Step 1. Login Log in to your WordPress account and click on ‘Plugins’ in the left side menu bar.

Tip
Step 2. Click on ‘Add New’ in the left side menu bar of your WordPress account.

Tip
Step 3. Type ‘Wizart’ in the right search bar, and click on ‘Install Now’ after the Wizart Home plugin appears on the list.

Tip
Step 4. Click on ‘Activate’.

Now Wizart Home plugin will appear on your list of WordPress plugins.

Tip
Step 5. Go to ‘Settings’ ‘Wizart Home’ in the left side menu of your WordPress account, and choose ‘Wizart integration’ from the drop-down list.

Image Removed

Image Added

Tip
Step 6. Enter your Wizart API Token. You can get your API Token in your Wizart PIM account.

Image Removed

Tip
Step 7. By ticking this box for Iframe Method, you are choosing an iframe integration, which is an alternative to our general script integration. Please choose an iframe integration only when the entry point buttons were not added to the Product and Category pages after completing the integration steps described below. In case you have any questions, please contact support@wizart.ai.

Image Removed

Tip
Step 8. You can edit every button in the button settings.

Image Removed

Tip
Step 9. Editing the floating button

You can change:

Text on the button.
Add custom styles to your button.

As well as some optional settings:

Element Selector is used to target which element the button shall be applied to.
Insert Element Position allows to choose from three values: append (inside the element), before the element, or after.
Iframe Element Selector is used to select where the fitting room shall be embedded.
Insert iframe element position provides a choice of three values: append (inside the element), before the element, or after.

Image Removed

Tip
Step 10. Editing entry point button on the Category page

You can change:

Text on the button.
Width of the button.
Height of the button.
Add custom styles to your button.

Image Removed

As well as some optional settings:

Element Selector is used to target which element the button shall be applied to.
Insert Element Position allows to choose from three values: append (inside the element), before the element, or after.
Iframe Element Selector is used to select where the fitting room shall be embedded.
Insert iframe element position provides a choice of three values: append (inside the element), before the element, or after.

Image Removed

Tip
Step 11. Editing entry point button on the single product page

You can change:

Text on the button.
Width of the button.
Height of the button.
Add custom styles to your button.

Image Removed

As well as some optional settings:

Element Selector is used to target which element the button shall be applied to.
Insert Element Position allows to choose from three values: append (inside the element), before the element, or after.
Iframe Element Selector is used to select where the fitting room shall be embedded.
Insert iframe element position provides a choice of three values: append (inside the element), before the element, or after.

Image Removed

Tip
Step 12. Use Additional Settings

You can also use Additional Settings fields for some extra options:

Life time is cache duration in seconds
Context can be added to selected items in the CSV file (the one uploaded to the PIM System) to display them on certain sections of a website / on different domains. The same context word shall be entered in the field in the WP admin panel (see below).

Image Removed

Tip
Step 13. After you’ve made all the changes, please click on ‘Save Changes’

Image Removed

Well done! You’ve completed the integration. Please, check your website and enjoy!

Expand

title	Check video instructions

Plugins ‹ Wizart Web Store Demo — WordPress - Google Chrome 2020-12-29 12-09-12.mp4

We have also prepared information about the integration by making changes to the code for your specialists.

.custom_style-product_single_page { /* here css style */ }

Image Added

Expand

title	integration by code

Repository - https://gitlab.exposit.com/wizart/woocommerce-feeting-room

Install:

Insert correct api token into const CLIENT_TOKEN in file public/class-wizart-public.php.

Code Block
const CLIENT_TOKEN = 'API_TOKEN';

Then install as normal WP plugin via Plugins -> Add New.

Plugin adds integration:

On the homepage as a floating button in the lower right corner
On the category page as a entry point after price (used hook woocommerce_after_shop_loop_item. Visual Hook Guide)
On the single product page as a entry point after add to cart (used hook woocommerce_after_add_to_cart_form. Visual Hook Guide)
Two-way shopping cart synchronization

On the category page and single product card, the existence of the article in the PIM is checked by the vendor code (SKU).

Note: Woocomerce in the cart displays the number of all rolls. But the shopping cart in the fitting room displays the number of products.

Example display cart with the same articles:

Woocomerce: https://prnt.sc/vl9g8p
Fitting Room: https://prnt.sc/vl9h0v

To change the display of buttons, need to use the deployment kit in the file public/class-wizart-public.php in the functions:

Code Block
Homepage: wizart_script_add_parameters() Category page: category_page() Single product page: single_product_page()

To disable integration, you need to comment out the call of the integration button in the file includes/class-wizart.php:

Code Block

Category page: $this->loader->add_action( 'woocommerce_after_shop_loop_item', $plugin_public, 'category_page');
Single product page: $this->loader->add_action( 'woocommerce_product_meta_start', $plugin_public, 'single_product_page');
Homepage: $this->loader->add_filter( 'script_loader_tag', $plugin_public, 'wizart_script_add_parameters', 10 ,3);

After integration on the site, you may need to stylize the buttons. Use file

Code Block
public/css/wizart-public.css

to style the integration buttons.

Example custom stylization for product single page: added data-class_name for integration button

Code Block

<script
    data-class_name="custom_style-product_single_page"
    class="wizart__entry-point"
    data-vendor_code="<?php echo $productSku; ?>"
    data-token="<?php echo self::CLIENT_TOKEN; ?>"
    src="<?php echo self::ENTRY_POINT_SCRIPT_URL; ?>"
    data-onload-callback="<?php echo  self::HANDLER_ONLOAD_CALLBACK; ?>"
></script>

Then add style for css file

Code Block

Expand

title	Check video instructions

Plugins ‹ Wizart Web Store Demo — WordPress - Google Chrome 2020-12-29 12-09-12.mp4

Once you've filled in the token field with your token from PIM, you may select your integration paths. You can choose whether you want a button on the homepage or not. The same applies to the button on a product page.

Expand

title	Setup Homepage button (floating button)

To enable the button on the homepage, please follow these steps:

Navigate to the "Floating button" section.
Check the "Show button" box.

Image Added

To prevent unexpected issues, please retain the pre-filled values in the fields. Each parameter is designed to customize the button's appearance. For a detailed explanation of each parameter, refer to the description provided below each field. To introduce custom styles, apply CSS to the element with the class "wizart-home-page" (unless you've modified the Class Name field).

Expand

title	Setup Product page button (entry point button)

To enable the button on the homepage, please follow these steps:

Navigate to the "Entry Point Button" section.
Check the "Show button" box.

Image Added

One important note: the "Element to add button" field is mandatory. Without a value in this field, the button will not be displayed. This field specifies the element on a product page which you want to attach the button to.

To find this element:

Open a product page and press F12 (in Chrome) or right-click on the page and select "Inspect".
Click the element selection tool in the top left corner of the sidebar that appears.
Hover over the element where you want to attach the button and click on it.
The sidebar will focus on the selected element. Find the "class=" attribute and copy the entire class name up to the first space, including the leading dot.
You also can choose where you want to locate the button: before the selected element, after the selected element or include it in the selected element (append).

For example, as shown in the screenshot, you would enter ".wp-block-group" into the "Element to add button" field.

Image Added

To prevent unexpected issues, please retain the pre-filled values in the fields. Each parameter is designed to customize the button's appearance. For a detailed explanation of each parameter, refer to the description provided below each field. To introduce custom styles, apply CSS to the element with the class "wizart-product-page" (unless you've modified the Class Name field). - повторяется

Versions Compared

Old Version 2

New Version 3

Key

We prepared for you step-by-step instructions for super-easy integration by plugin!

Well done! You’ve completed the integration. Please, check your website and enjoy!

We have also prepared information about the integration by making changes to the code for your specialists.