Content Comparison

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

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 Added

Image Removed

Image Removed

Image Removed

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

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

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

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

Image Removed

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.

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.

const CLIENT_TOKEN = 'API_TOKEN';

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

Plugin adds integration:

1. On the homepage as a floating button in the lower right corner

2. On the category page as a entry point after price (used hook woocommerce_after_shop_loop_item. Visual Hook Guide)

3. On the single product page as a entry point after add to cart (used hook woocommerce_after_add_to_cart_form. Visual Hook Guide)

4. 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:

1. Woocomerce: https://prnt.sc/vl9g8p

2. Fitting Room: https://prnt.sc/vl9h0v

To change the display of buttons, need to use the /wiki/spaces/WDP/pages/2682913539 in the file public/class-wizart-public.php in the functions:

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:

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

public/css/wizart-public.css

to style the integration buttons.

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

<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

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 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). - повторяется