Auto Add Item from CTA Click | Bigcommerce Only

Looking to upsell some items? With a little custom code we've created you can now auto add an item to your cart page from a CTA click.  

Step 1: Head to your promotions section and hit New Promotion then Custom Promotion (You must enter a promotion name and then click Get Started). 

Step 2: Select device type then display type, then choose unlocked (Website Messaging). 

Step 3: Choose a template and edit your design accordingly. Please make sure to have a CTA layer that will add the item in question

Step 4: Paste in the item ID in the Data ID option of the CTA.

Step 5: Paste this code in the custom POP UP JS section of your design: 

$(function(){
  $(document).on('click', '.design-layer[data-layertype="standard-button"] .design-layer-editable[data-id!=""]', function(){
    var pass_data = {
                      'juCustom':true,
                      'item_id':jju(this).data('id')
                    };
    $.postMessage(
      JSON.stringify(pass_data),
      parent_url,
      parent
    );
  });
});



 

Step 6: Paste in the code below in the TAB JS section and make sure both override default JS toggles are on

window.juIframeCatch = function(data) {
   jju.ajax({
	url: '/remote/v1/cart/add',
	type: 'post',
	dataType: 'text',
	data: {
		'action': 'add',
		'product_id': data.item_id,
		'qty[]': 1
	}
    }).done(function(data) {
        document.location = '/cart.php';
    });
}

NOTE: This code calls for the cart page html document in the last statement, which will redirect the page to the cart. To remain on the current page without the redirect simply replace the statement:

document.location = '/cart.php';

with the statement:

location.reload();

Step 7: Find the item ID that you want to auto add to your cart, this is located in the JU session data accessible by logging into Justuno and clicking the "JU" tab. You will find the cart information for all the items currently in your cart.

 

OPTIONAL: Adding a Coupon Code 

 Paste in the code below in the POP UP JS section and make sure both override default JS toggles are on

$(function(){
  $(document).on('click', '.design-layer[data-layertype="standard-button"] .design-layer-editable[data-id!=""]', function(){
    var pass_data = {
                      'juCustom':true,
                      'coupon_code':jju(this).data('id')
                    };
    $.postMessage(
      JSON.stringify(pass_data),
      parent_url,
      parent
    );
  });
});

 

Paste in the code below in the TAB JS section and make sure both override default JS toggles are on

window.juIframeCatch = function(data) {
	jju.ajax({
		url: '/remote/v1/apply-code',
		type: 'post',
		dataType: 'text',
		data: {
			'code': 'data.coupon_code'
		}
	}).done(function(data) {
		location.href = '/cart.php';
	});
}

 

TAGS: Justuno, Bigcommerce, Upsell, auto add item, increase cart, upsell, upselling, cross-selling, cross sell, gifting, bundle, bundling, gift

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.