Skip to main content

Customize Product Builder Page Using Javascript

Updated
Custom JS

If you or your developer know JS, you can add custom JS that would load within the tool. You can manipulate DOM elements in a similar way that ‘Optimizely.com’ does it. It’s a very powerful tool that allows almost any type of theme customizations.

 

If there are a lot of customizations involved a better approach would be to create a new javascript asset inside your Theme files and add all custom jQuery / Javascript there.

add_asset_js.png

You would also need to make sure to add the script tag into the customproductbuilder-initializer.liquid file, so that it gets called on the custom product builder page.

addjs_toinitializer.png

Here are some Javascript examples that you can use for your needs.

Additional Articles:

 

Examples of custom JS

 

*IMPORTANT*: Custom Javascript will run only after the builder has fully loaded. So you need to wait for that event before adding any custom Javascript. Here is a sample 

Run Custom JS after CPB has loaded 

  var customJS = function() {
     console.log('CPB is here');
     jQuery('#react-tabs-2').text('Récapitulatif');
    
  }

  /** 
   * Function wait CPB DOM elements to show up.
   * Work in modern browsers.
   * And execute callback.
   */
  var cpbLoaded = function() {
    if (jQuery('#react-tabs-2').length > 0) {
      
      console.log('CPB is loaded');
      
      customJS();
    } else {
      window.requestAnimationFrame(cpbLoaded);
    }   
  };

  cpbLoaded();

A script for selecting default options when hidden categories are enabled.

 
    var twoToneflag = false;
    var steelFlag = false;

    $(document).on('DOMSubtreeModified', '.cpb-category--EiuAdw9BV6fkNnNJVnLG8Cb.cpb-category-img.sc-RefOD.kIWYld .cpb-category-options-container span.option-type-img div div', function(e){
            if (!twoToneflag) { 
                $('.cpb-category--EiuAdw9BV6fkNnNJVnLG8Cb.cpb-category-img.sc-RefOD.kIWYld .cpb-category-options-container span:first div').click();
                twoToneflag = true;
          	steelFlag = false;
            }
    });

    $(document).on('DOMSubtreeModified', '.cpb-category.28G77TOgQtW5g3AC_H-UY3Dw.cpb-category-28G77TOgQtW5g3AC_H-UY3Dw.cpb-category-img.sc-RefOD.kIWYld .cpb-category-options-container span.option-type-img div div', function(e){

            if (!steelFlag) { 
                $('.cpb-category.28G77TOgQtW5g3AC_H-UY3Dw.cpb-category-28G77TOgQtW5g3AC_H-UY3Dw.cpb-category-img.sc-RefOD.kIWYld .cpb-category-options-container span:first div').click();
                twoToneflag = false;
                steelFlag = true;
            }
    });

 

Limit the input field text size

$(document).ready(function(){
   $('input-id').attr('maxlength', '13');
});

 

Price Conversion

(function(){

  function converPriceToKr(){
    var price=$(shadowNode).find(".price");
    var value=price.html().split("DKK")[1];

    if(!value) return;

    price.html(value+" kr");
  }

  setTimeout(function(){
    var title=document.title;
    var url=document.location.href;
    var media=$("meta[property='og:image:secure_url']")[0].content;
    var html='<span class="social-buttons">Share:	<a href="https://twitter.com/intent/tweet?text='+title+'&url='+url+'" target="_blank" class="icon-twitter" title="Share this on Twitter"></a>	<a href="https://www.facebook.com/sharer/sharer.php?u='+url+'" target="_blank" class="icon-facebook" title="Share this on Facebook"></a>    <a target="_blank" data-pin-do="skipLink" class="icon-pinterest" title="Share this on Pinterest" href="https://pinterest.com/pin/create/button/?url='+url+'&description='+title+'&media='+media+'"></a>    	<a target="_blank" class="icon-gplus" title="Share this on Google+" href="'+url+'"></a>  	<a href="mailto:?subject=Thought you might like '+title+'&body=Hey, I was browsing Hornskov København and found '+title+'. I wanted to share it with you.%0D%0A%0D%0A'+url+'" target="_blank" class="icon-email" title="Email this to a friend"></a></span>';

    $(shadowNode).find(".builder-actions").after(html);

    var title='<h1 class="product-name">Custom Hat</h1>';
    $(shadowNode).find(".panels-container").prepend(title);
    converPriceToKr();
    $(document.body).on("PRODUCT_BUILDER_LAYER_UPDATE", function () {
            setTimeout(function(){
              converPriceToKr();
            },40);
        });
  },500);
})();

Example 2

;(function(){

  /** 
   * Function wait CPB DOM elements to show up.
   * Work in modern browsers.
   * And execute callback.
   */
  var cpbLoaded = function() {
    if ($('div.cpb-option.cpb-option-type-img.cpb-active span').size()
        && $('div.cpb-option.cpb-option-type-color.cpb-active span').size()
        && !$('img[src*="loader-large.gif"]').size()) {
      console.debug('CPB is loaded');
      customJS();
    } else {
      window.requestAnimationFrame(cpbLoaded);
    }   
  };

  // Function for custom JS (wiil executed after CPB fully loaded)
  var customJS = function() {

    // Defines variables
    var lsItemNames = {
      firstCategoryIndexKey: 'cpb_first_category_item_index',
      secondCategoryIndexKey: 'cpb_second_category_item_index'
    };

    var selectors = {
      option: '.cpb-category span.option',
      category: '.cpb-category',
      clickDiv: 'div.cpb-option'
    };

    var categories = {
      main: 0,
      first: 1,
      second: 2
    };

    var firstCategoryIndexKey = localStorage.getItem(lsItemNames.firstCategoryIndexKey);
    var secondCategoryIndexKey = localStorage.getItem(lsItemNames.secondCategoryIndexKey);

    if (firstCategoryIndexKey === null)
      localStorage.setItem(
          lsItemNames.firstCategoryIndexKey,
          $('.cpb-option.cpb-active').eq(categories.first).parent().index()
        );

    if (secondCategoryIndexKey === null)
      localStorage.setItem(
          lsItemNames.secondCategoryIndexKey,
          $('.cpb-option.cpb-active').eq(categories.second).parents('.option-type-color').index()
        );

    // Handlers functions
    var clickOptionHandler = function() {
      var categoryIndex = $(this).closest(selectors.category).index();

      switch (categoryIndex) {
        case categories.first:
          localStorage.setItem(lsItemNames.firstCategoryIndexKey, $(this).index());
          break;
        case categories.second:
          localStorage.setItem(lsItemNames.secondCategoryIndexKey, $(this).index());
          break;
        case categories.main:
          setTimeout(function(){

            var firstCategoryIndexKey = localStorage.getItem(lsItemNames.firstCategoryIndexKey);
            var secondCategoryIndexKey = localStorage.getItem(lsItemNames.secondCategoryIndexKey);

            // Select category spans if localStorage has values
            if (firstCategoryIndexKey !== null) 
              $(selectors.category).eq(categories.first).find(selectors.clickDiv)
                .eq(firstCategoryIndexKey).find('div').click();  

            if (secondCategoryIndexKey !== null) 
              $(selectors.category).eq(categories.second).find(selectors.clickDiv)
                .eq(secondCategoryIndexKey).click(); 

          }, 500);

          break;
      }
    }

    // Bind events globally
    $(document).on('click', selectors.option, clickOptionHandler)

  };

  // Exec customJS after CPB loaded
  cpbLoaded(customJS);

})();

Change ‘Add To Cart Text’

var changeAddToCartText = (function() {
      if( $('.cpb-add-to-cart-button span').length) {
        $('.cpb-add-to-cart-button span').text('Hello');
      } else {
        window.requestAnimationFrame(changeAddToCartText);
      }   
});
changeAddToCartText();

Add Custom Title and Description to the page.

var addTitleandDescription = (function() {
      if( $('.cpb-add-to-cart-button span').length) {

        $('.cpb-panels-tabs').prepend('Product Description');
       $('.cpb-panels-tabs').prepend('Product Title');
 } else { window.requestAnimationFrame(addTitleandDescription); } }); 
addTitleandDescription();
(function(){
	return;
	var addToCartBtn;

	$(window).scroll(function() {

		if ($(window).width() > 1024) {
			if($(".cpb-product-actions-container").length && $(".cpb-product-actions-container").length || $(".sc-cmthru").length) {

				distance = ($(".cpb-product-actions-container").offset().top - $(".cpb-product-actions-container").outerHeight() ) - $(".sc-cmthru").offset().top;

				if( distance <= 80 )
					$(".sc-cmthru").css('visibility', 'hidden');
				else
					$(".sc-cmthru").css('visibility', 'visible');

			}
		}

	});

	$(document).ready(function() {
		if($('.current_lang img').attr('alt') === 'FR') translateBasicInterval();
		$(".cpb-product-actions .row").addClass("col-xs-12");
		replaceCartButton()
		$("body").on('click', '.switch-tab-btn', function() {
			checkTabs();
		})
		getArrayOfSummary()

	})

	function translateBasicInterval() {
		var timerId = setInterval(function() {
			$(".sc-iQNlJl").html('Ajouter au panier');
			$(".sc-bsbRJL").html('Recommencer');
			$("#react-tabs-6").html('Sommaire');
			$(".swal2-title").html('Personnalisation incomplète');
			$(".cpb-product-actions .col-md-4").removeClass("col-md-4").addClass("col-md-3");
			$(".cpb-product-actions .col-md-8").removeClass("col-md-8").addClass("col-md-9");
			if ($(".sc-iQNlJl").length) {
				$(".cpb-product-actions-container").on('click', '.sc-iQNlJl', function() {
					translateModalInterval();
				})
				clearInterval(timerId);
			}
		}, 300);
	}

	function translateModalInterval() {
		var timerId2 = setInterval(function() {
			$(".swal2-title").html('Personnalisation incomplète');
			grabUl();
			if ($(".swal2-title").length) clearInterval(timerId2);
		}, 100);
	}

	function grabUl() {
		var timerId3 = setInterval(function() {
			var list = $(".swal2-content ul").html();
			if ($(".swal2-content ul").length) {
				$(".swal2-content").html('Veuillez sélectionner chaque champ obligatoire pour continuer. S\'il vous plait, veuillez sélectionner les champs suivants:' + list);
				clearInterval(timerId3);
			}
		}, 100);
	}

	function replaceCartButton() {
		var timerId4 = setInterval(function() {
			if ($(".sc-iQNlJl").length) {
				if($('.current_lang img').attr('alt') === 'FR')
					$(".sc-iQNlJl").html('Ajouter au panier')
				else
					$(".sc-iQNlJl").html('Add to cart')
				addToCartBtn = $(".sc-iQNlJl")[0]
				var temporaryButton = 'NEXT'
				$(".sc-iQNlJl").remove();
				if($('.current_lang img').attr('alt') === 'FR')
					$(".cpb-product-actions-container").append('ÉTAPE SUIVANTE');
				else
					$(".cpb-product-actions-container").append(temporaryButton);
				clearInterval(timerId4)
			}
		}, 300);
	}

	function onTabClick() {
		var temporaryButton = 'NEXT'
		$(".sc-iQNlJl").remove();
		if($('.current_lang img').attr('alt') === 'FR')
			$(".cpb-product-actions-container").append('ÉTAPE SUIVANTE');
		else
			$(".cpb-product-actions-container").append(temporaryButton);
	}

	function checkTabs() {
		var tabClasses = [
			'react-tabs-0',
			'react-tabs-2',
			'react-tabs-4',
			'react-tabs-6'
		]

		var tabId = $('.cpb-active').attr('id');

		switch(tabId) {
			case tabClasses[0]:
				$("#react-tabs-2").trigger('click');
				$(window).scrollTop(0);
				break;
			case tabClasses[1]:
				$("#react-tabs-4").trigger('click');
				$(window).scrollTop(0);
				break;
			case tabClasses[2]:
				$("#react-tabs-6").trigger('click');
				$(window).scrollTop(0);
				$(".switch-tab-btn").remove();
				console.log(addToCartBtn)
				$(".cpb-product-actions-container").append(addToCartBtn);
				break;
			default:
				break;
		}
	}

	function getArraysOfSummary() {
		var baseDevantArray = [
			'POIGNÉES', 'COULEUR DES POIGNÉES', 'BANDE DU HAUT', 'COULEUR DE LA BANDE DU HAUT',
			'BANDE DU MILIEU', 'COULEUR DE LA BANDE DU MILIEU', 'BANDE DU BAS', 'COULEUR DE LA BANDE DU BAS',
			'BANDOULIÈRE', 'COULEUR DE LA BANDOULIÈRE', 'PAMPILLE', 'COULEUR DE LA PAMPILLE', 'COULEUR DES ACCESSOIRES MÉTALLIQUES'
		];
		var baseDessusArray = [
			'VUE DU DESSUS', 'COULEUR DU DESSUS'
		]
		var baseDimensionArray = [
			'BAG DIMENSION', 'RANGEMENT INTÉRIEUR', 'COULEUR DE L\'INTÉRIEUR'
		]
		var timerSummary = setInterval(function() {
			if ($(".cpb-selection-summary").length) {
				//console.log('fff')
				clearInterval(timerSummary)
			}
		}, 300);
	}

})();
Price Tiers For Custom Products 
 
var customJS = function() {
  console.log('CPB is here');
  moduleApp.init();
  
  $('#react-tabs-0').on('click', function(){ // reinit method
    if(!$(this).hasClass('cpb-active')) {
      $('.cpb-product-actions .sc-eerKOB').show();
      setTimeout(function(){
      	moduleApp.switchPriceTiers();
      },10)
    }  	
  });
  $('#react-tabs-2').on('click', function(){
    $('.cpb-product-actions .sc-eerKOB').hide();
  })
}

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

    console.log('CPB is loaded');

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

cpbLoaded();

var $document, $body;

var moduleApp;

moduleApp = {
  'init': function () {
    this.initGlobals();
    this.switchPriceTiers();
  },
  'initGlobals': function () {
    $document = $(document);
    $body = $('body');
  },
  'switchPriceTiers': function() {
  	var tiersMinQtyFor = {
  		$30: 10,
  		$25: 20,
  		$20: 50
  	};
  	var $increaseBtn = $('.cpb-quantity-button-increase'),
  	    $decreaseBtn = $('.cpb-quantity-button-decrease'), 
  	    $tierBtn = $('.option.option-type-text .cpb-option-type-text > span'),
  	    $tierBtn30 = $tierBtn.eq(0),
  	    $tierBtn25 = $tierBtn.eq(1),
  	    $tierBtn20 = $tierBtn.eq(2), 
  	    numberOfClicks = 0,
  	    qtyValue,
        delay = 10;

  	var methods = {
  		'init': function() {
  			this.initDefaultState();
  		},
  		'initDefaultState': function() {
  			var startQty = 10,
  				currentQty = parseInt($('.cpb-quantity-value').text()),
  				numOfClicks = startQty - currentQty;

  			if(numOfClicks < 0) return false;
  			$decreaseBtn.attr('disabled', true);
  			for(var i = 0; i < numOfClicks; i++) {
  				$increaseBtn.trigger('click');
  			}
  		},
  		'setMinCurrentQty': function(minQtyFor) {
  			numberOfClicks = qtyValue - minQtyFor;
				if(numberOfClicks > 0) {
					console.log('decrease on '+Math.abs(numberOfClicks))
					for(var i = 0; i < Math.abs(numberOfClicks); i++) {
						$decreaseBtn.trigger('click');
					}
				} else if (numberOfClicks < 0) {
					$decreaseBtn.attr('disabled', false);
					console.log('increase on '+Math.abs(numberOfClicks))
					for(var i = 0; i < Math.abs(numberOfClicks); i++) {
						$increaseBtn.trigger('click');
					}
				}
  		}
  	};
  	$tierBtn.on('click', function(e, param) {
      if(!param) {
  		var btnIndex = $tierBtn.index(this);
  		setTimeout(function() {
  			qtyValue = parseInt($('.cpb-quantity-value').text());
  			switch (btnIndex) {
  				case 0 :
  					methods.setMinCurrentQty(tiersMinQtyFor.$30);
  				break;
  				case 1 :
  					methods.setMinCurrentQty(tiersMinQtyFor.$25);
  				break;
  				case 2 :
  					methods.setMinCurrentQty(tiersMinQtyFor.$20);
  				break;
  			}
  		}, delay)
      }
  	});

  	$increaseBtn.add($decreaseBtn).on('click', function() {
  		setTimeout(function() {
	  		qtyValue = parseInt($('.cpb-quantity-value').text());
	  		
	  		switch (qtyValue) {
	  			case 10 :
	  				$decreaseBtn.attr('disabled', true);
	  			break;
	  			case 11 :
	  				$decreaseBtn.attr('disabled', false);
	  			break;
	  			case 1 :
	  			case 19 :
	  				if(!$tierBtn30.closest('.option.option-type-text').hasClass('active')) {
	  					$tierBtn30.trigger('click', true);
	  				}
	  			break;
	  			case 20 :
	  			case 49 :
	  				if(!$tierBtn25.closest('.option.option-type-text').hasClass('active')) {
	  					$tierBtn25.trigger('click', true);
	  				}
	  			break;
	  			case 50 :
	  				if(!$tierBtn20.closest('.option.option-type-text').hasClass('active')) {
	  					$tierBtn20.trigger('click', true);
	  				}
	  			break;
	  		}
  		}, delay)
  	});

  	methods.init();
  }
};

Related articles

Comments

0 comments

Please sign in to leave a comment.

Powered by Zendesk