Similar Tasting Products - Wordpress/WooCommerce

Implementation on Wordpress/WooCommerce Platform

The following code can be placed in your theme's functions.php file.
If your theme is updatable, you will need to add the code block again to your theme’s functions.php file. Once implemented, save the code block to a text file in order to copy and paste.

add_action('wp_enqueue_scripts', 'singleProductPageAssets', 10); // Loads only on single product pages
add_action('woocommerce_after_main_content', 'addSTPContainer', 9999); // Adds STP Div for app to render in
add_action('wp_ajax_nopriv_get_woocommerce_card', 'getWoocommerceCard'); // Enables Ajax Fn to get Woocommerce Item Grid
add_action('wp_ajax_get_woocommerce_card', 'getWoocommerceCard');
add_action('wp_footer', 'addPreferabliSTPJs', 9999); // Adds JS to footer of website

if (!function_exists('singleProductPageAssets')) {
    function singleProductPageAssets()
    {
        if (is_singular('product')) {
            wp_register_script('preferabli-stp-js', 'https://stp.preferabli.com/jquery.preferabli.stp.js', array('jquery'), '', true);
            wp_enqueue_script('preferabli-stp-js');

            wp_register_style('preferabli-stp-style-css', 'https://stp.preferabli.com/preferabli.stp.style.css', array(), '', 'all');
            wp_enqueue_style('preferabli-stp-style-css');

            wp_register_style('preferabli-stp-theme-css', 'https://stp.preferabli.com/preferabli.stp.theme.css', array(), '', 'all'); // optional
            wp_enqueue_style('preferabli-stp-theme-css'); // optional
        }
    }
}


if (!function_exists('addSTPContainer')) {
    function addSTPContainer()
    {
        if (is_singular('product')) {
            ?>
            <div id="product-stp"></div>
            <?php
        }
    }
}

if (!function_exists('addPreferabliSTPJs')) {
    function addPreferabliSTPJs()
    {
        if (is_singular('product')) {
            global $post, $product;
            ?>
            <script>
                var _stp = jQuery('#product-stp').preferabliSTP({
                    integration_id: %INTEGRATION_ID%,
                    collection_id: %COLLECTION_ID%,,
                    productCardsContainer: { // Adjust to your themes product grid
                        element: 'ul',
                        class: 'products products--grid',
                    },
                    renderProductCards: (lookups) => {
                        const fetchCards = new Promise((resolve, reject) => {
                            const post__in = [...lookups].map((lookup) => {
                                const { value } = lookup;
                                return Number(value);
                            });
                            const response = jQuery.parseJSON(jQuery.ajax({
                                    type : "POST",
                                    async: false,
                                    dataType : "json",
                                    url : "<?php echo admin_url('admin-ajax.php'); ?>",
                                    data : {
                                        action: "get_woocommerce_card",
                                        post__in: post__in,
                                    },
                            }).responseText);
                            if(response) {
                                resolve(response.data);
                            }   
                        });

                        return fetchCards.then((htmlString) => (htmlString)).catch((error) => (error));
                    },
                    onRenderComplete: () => {
                      	/// add aditional Google Analytics UTM tags to product urls
                        [...document.querySelectorAll('.product a')].forEach((productLink) => {
                           productLink.href = `${productLink.href}${productLink.href.indexOf('?') > 0 ? '&' : '?'}utm_source=preferabli&utm_medium=productrec&utm_campaign=stp`;
                         });
                    }
                });
                _stp.preferabliSTP('getProducts', {
										// Depending on how your products are mapped youll use the id or sku of the product, ie: $product->get_id() (Product ID) | $product->get_sku() (Product SKU)
                    product_id: <?=$product->get_id()?>,
                    price_min_percent: 20,
                    price_max_percent: 200
                });</script>
            <?php
        }
    }
}

if(!function_exists('getWoocommerceCard')){
    function getWoocommerceCard() {
        $cards = array();
        
        $post__in = array_map('intval', $_REQUEST['post__in']);
        
        $args = array(
            'post_type' => 'product',
            'post__in' => $post__in,
            );
        $loop = new WP_Query( $args );
        if ( $loop->have_posts() ) {
            while ( $loop->have_posts() ) : 
                ob_start();
                $loop->the_post();
                wc_get_template_part( 'content', 'product' );
                $card_html = ob_get_contents();
                ob_end_clean();
                $cards[] = $card_html;
            endwhile;
        }

        wp_send_json_success( $cards );
    }
}