Wordpress + Woocomerce Integration Plugin

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

You can add css to the 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-width="250px"
    data-height="50px"
    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 */
}