Plugin Setup - WooCommerce

Widget Setup - WooCommerce Custom widget script for WooCommerce

Widget Setup

1.  Login in WP Admin
2. Navigate to Plugins > Add New
3. In search bar type "code snippet" and install (and activate) Code Snippets by Code Snippets Pro

4. Navigate to Snippets > All Snippets

5. Click Add New

6. Populate fields

• Name: WAIR Fit Advisor Plugin
• Description: Fit Advisor Plugin
• Script Location: Only run on site front-end
• Code: Use code from block below

add_action( 'woocommerce_single_product_summary', 'load_fit_recommender', 30 );

function load_fit_recommender() {
  global $product;
  $attachment_ids = $product->get_gallery_image_ids();

  if( sizeof($attachment_ids) > 0 ){
    $first_attachment_id = reset($attachment_ids);
    $link = wp_get_attachment_image_src( $first_attachment_id, 'full' )[0];

  }

  echo $image;
  echo '<button id="bodyblock-predict-button" type="button">Recommend my Fit</button>'
  ?>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" />
  <script>
    var config = {
        "brandKey": "<<YOUR_API_KEY>>",
        "productKey": "<?php echo $product->id ?>",
        "productName": "<?php echo $product->name ?>",
        "productImage": "<?php echo $link ?>"
    };

    (function (i, s, o, n, c, g, a) {for (var j = 0; j < n.length; j++) { a = s.createElement(o); a.id = n[j]; a.type = 'text/javascript'; a.async = 1; a.src = n[j]; var m = document.getElementsByTagName(o)[0]; m.parentNode.insertBefore(a, m) }
    i.addEventListener("load", function () { window.myWidget = BodyBlock.default.Predict.new(config, "https://predict.bodyblock.ai/widget/static/css/predict.v2.css"); window.myWidget.render() })})(window, document, 'script', ["https://predict.bodyblock.ai/widget/static/js/predict.v2.js", "https://predict.bodyblock.ai/widget/settings.js"]);

  </script>

<?php

}

 

7. Click "Save Changes and Activate" button
8. Goto a product page and verify the widget pops up when clicking the Recommend my Fit button

Order Tracking

1. Navigate to Snippets > All Snippets

2. Click Add New

3. Populate fields

• Name: BodyBlock Recommend - Order Tracking
• Description: Fit Recommendation Widget - Order Tracking
• Script Location: Only run on site front-end
• Code: Use code from block below

add_action( 'woocommerce_thankyou', 'track_order', 4 );
 
function track_order($order_id) {
    $order = wc_get_order( $order_id );
?>
  <script type="text/javascript" src="https://predict.bodyblock.ai/purchase/settings.js"></script>   
    <script type="text/javascript" src="https://predict.bodyblock.ai/purchase/static/js/main.f8482c73.js" ></script>
  <script>
    window._bbPredictReportPurchase = function(brandKey) {
      <?php
        foreach($order->get_items() as $item) {  
        echo '
            BBPredict.default._addPurchaseInfo({
            "productKey": "'.$item->get_product_id().'",
            "orderId": "'.$order_id.'",
            "purchasedSize": "'.wc_get_order_item_meta($item->get_id(), 'pa_size').'",
            "sku": "tbd",
            "quantity": "'.$item->get_quantity().'",
            "price": '.$item->get_total().'
          });
        ';
        
        }

      ?>
      BBPredict.default._sendPurchaseInfo(brandKey);
    }

    window._bbPredictReportPurchase("<<YOUR_API_KEY>>");
    
  </script>
    
<?php
}

 

4. Click "Save Changes and Activate" button

Did this answer your question?