Fix the integration between Bold Membership plugin and CPB

Fix the integration between Bold Membership plugin and CPB

1) You need to create file customproductbuilder.js - https://buildateam.zendesk.com/hc/en-us/articles/360026107911-Customize-Product-Builder-Page-Using-Javascript following this instruction.

2) Copy this code into customproductbuilder.js file

var customJS = function() {
  console.log('CPB is here');
  moduleApp.init();
}

/** 
 * Function wait CPB DOM elements to show up.
 * Work in modern browsers.
 * And execute callback.
 */
var cpbLoaded = function() {
  if (jQuery('.react-tabs__tab-list').length > 0) {

    console.log('CPB is loaded');

    customJS();
  } else {
    window.requestAnimationFrame(cpbLoaded); 
  }  
};

cpbLoaded();

var moduleApp = {
  'init': function() {
    this.BPBPriceBinding();
  },
  'BPBPriceBinding': function() {
      if(window.BOLD && window.BOLD.common && window.BOLD.common.Shopify) { /* if Bold Product Builder installed */ 
      if(window.BOLD.common.Shopify.customer.tags !== null) { /* if customer logged in */ 
        var customer = window.BOLD.common.Shopify.customer.tags;
        var variant = window.BOLD.common.Shopify.variants;
        var saleData = variant[Object.keys(variant)[0]].csp_metafield;

        $('body').addClass('customer-logged');

        $.each(saleData, function(key, value) {
          if(key.indexOf(customer) == -1) {
            delete saleData[key];
          }
        });

        for(var key in saleData) {
          var values = saleData[key];
        }

        if(typeof values == 'string') {
          var currentPrice;
          var newPrice;
          var saving;
          var defaultPrice = parseFloat($('.cpb-product-price > span').text().split('$')[1].replace(/,/g, ''));
          values = values.split(',');
          var fx = parseFloat(values[1]);
          if(values[0] = "%") { /* if percentage sale */
            saving = Math.round(defaultPrice * (1 - fx) * 100) / 100;
            saving = saving.toFixed(2);
            currentPrice = Math.round(defaultPrice * fx * 100) / 100;
            currentPrice = currentPrice.toFixed(2);
            currentPrice = currentPrice.toString();
            $('.cpb-product-actions-first').prepend('<div class="product-single__price" id="CPBPrice">'+Shopify.formatMoney(currentPrice.toString())+'</div>');
            $('.cpb-product-actions-first').append('<p class="sale_p">Team Membership Savings:<span id="CPBsaving">'+Shopify.formatMoney(saving)+'</span></p>')

            $("body").on('DOMNodeInserted', ".cpb-product-price", function() {
              setTimeout(function(){
                newPrice = parseFloat($('.cpb-product-price > span').text().split('$')[1].replace(/,/g, ''));
                saving = Math.round(newPrice * (1 - fx) * 100) / 100;
                saving = saving.toFixed(2);
                currentPrice = Math.round(newPrice * fx * 100) / 100;
                currentPrice = currentPrice.toFixed(2);
                currentPrice = currentPrice.toString();
                $('#CPBPrice').text(Shopify.formatMoney(currentPrice));
                $('#CPBsaving').text(Shopify.formatMoney(saving));
              },1)
            });
          }
        }
      }
    }
  }
}

* if previous code is not working, paste this code instead

var intervalId = setInterval(() => {
  if($('#product-builder .cpb-category').length) {
  console.log('CPB custom code loaded')
  moduleApp.init();
  clearInterval(intervalId);
 }
 setTimeout(() => {clearInterval(intervalId)}, 5000);
}, 1000);

var moduleApp = {
  'init': function() {
  this.BPBPriceBinding();
 },
'BPBPriceBinding': function() {
 if(window.BOLD && window.BOLD.common && window.BOLD.common.Shopify) { /* if Bold Product Builder installed */ 
  if(window.BOLD.common.Shopify.customer.tags !== null) { /* if customer logged in */ 
   var customer = window.BOLD.common.Shopify.customer.tags;
   var variant = window.BOLD.common.Shopify.variants;
   var saleData = variant[Object.keys(variant)[0]].csp_metafield;

   $('body').addClass('customer-logged');

   $.each(saleData, function(key, value) {
     if(key.indexOf(customer) == -1) {
      delete saleData[key];
     }
   });

   for(var key in saleData) {
     var values = saleData[key];
   }

      if(typeof values == 'string') {
        var currentPrice;
        var newPrice;
        var saving;
        var defaultPrice = parseFloat($('.cpb-product-price > span').text().split('$')[1].replace(/,/g, ''));
        values = values.split(',');
        var fx = parseFloat(values[1]);
        if(values[0] = "%") { /* if percentage sale */
         saving = Math.round(defaultPrice * (1 - fx) * 100) / 100;
         saving = saving.toFixed(2);
         currentPrice = Math.round(defaultPrice * fx * 100) / 100;
         currentPrice = currentPrice.toFixed(2);
         currentPrice = currentPrice.toString();
         $('.cpb-product-actions-first').prepend('<div class="product-single__price" id="CPBPrice">'+Shopify.formatMoney(currentPrice.toString())+'</div>');
         $('.cpb-product-actions-first').append('<p class="sale_p">Team Membership Savings:<span id="CPBsaving">'+Shopify.formatMoney(saving)+'</span></p>')

         $("body").on('DOMNodeInserted', ".cpb-product-price", function() {
          setTimeout(function(){
           newPrice = parseFloat($('.cpb-product-price > span').text().split('$')[1].replace(/,/g, ''));
           saving = Math.round(newPrice * (1 - fx) * 100) / 100;
           saving = saving.toFixed(2);
           currentPrice = Math.round(newPrice * fx * 100) / 100;
           currentPrice = currentPrice.toFixed(2);
           currentPrice = currentPrice.toString();
           $('#CPBPrice').text(Shopify.formatMoney(currentPrice));
           $('#CPBsaving').text(Shopify.formatMoney(saving));
         },1)
        });
       }
    }
   }
  }
 }
}