Page Comparison

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.

Product page - adding an entry point button for each product item on the 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.

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 deployment kit 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

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