Wordpress + Woocomerce Integration Plugin (2) (2)

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.

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

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.

You can change:

• Text on the button.

• Width of the button.

• Height of 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.

You can change:

• Text on the button.

• Width of the button.

• Height of 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.

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).

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

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 */
}