BigCommerce Checkout Redirect
This article provides the steps to establish the BigCommerce Checkout Redirect to CheckoutChamp pages
Only follow this article if your checkout and upsell flow is finished inside of Checkout Champ and you are ready to start sending the BigCommerce customers to your Checkout Champ checkout page
If your BigCommerce storefront contains a subscription option then follow instructions here
Redirect Checkout
To redirect the BigCommerce cart to your checkout page, it is required to manually set the routing on your BigCommerce cart page
Login to your BigCommerce store
Make a copy of your existing theme files as a back-up
Navigate to Storefront → My Themes → then click Advanced and select Make a Copy
Copy the below code Snippet
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('body').delegate('a[href="/checkout"], a#checkout', 'click', function(e){
e.preventDefault();
if (!$(this).hasClass('processing')) {
$(this).addClass('processing').text('Please wait...');
$.ajax({
url: '/api/storefront/cart',
success: function(cart) {
var lineItems = cart && cart[0] && cart[0].lineItems && cart[0].lineItems && cart[0].lineItems.physicalItems ? cart[0].lineItems.physicalItems : [];
var urlData = [];
var getUrlData = function(index) {
$.ajax({
url: lineItems[index].url,
dataType: 'html',
success: function(data) {
var $data = $(data);
var customFields = $data.find('.productView-info-name');
var productId = lineItems[index].productId;
var sku = lineItems[index].sku;
customFields.each(function(){
if ($(this).text().trim() === 'ProductID_' + sku + ':') {
productId = $(this).next('.productView-info-value').text();
}
});
urlData.push(productId + ':' + lineItems[index].quantity);
if (index < lineItems.length - 1) {
getUrlData(++index);
} else {
var checkoutUrl = 'you.must.define.a.checkout.url?products=' + urlData.join(';');
console.log(checkoutUrl);
window.location.href = checkoutUrl;
}
}
})
}
if (typeof lineItems === 'object' && lineItems.length > 0) {
getUrlData(0);
}
}
});
}
});
});
</script>Navigate to Storefront → My Themes → Advanced → Edit Theme Files.
Paste the code snippet at the end of /templates/layout/base.html file, before the ending </body> tag.
Replace the text you.must.define.a.checkout.url with the URL of your CRM checkout page.
Save and apply the theme changes
Test the redirect
Accessing Your Checkout URL
Return to CheckoutChamp
Select the Settings option on your CheckoutChamp checkout page:
At the bottom of the funnel, mark this checkout page as the Default Page.
Then close the panel and Publish the funnel.
Select the page Settings once more:
Cart webhook
Prices from BigCommerce are synced into CheckoutChamp along with products. However there may be special app pricing or limitations on currency that are encountered. In that case you may find it helpful to use the BigCommerce cart to complete checkout.
Step 1 - Edit the BigCommerce store redirect code to pass the cart id
var checkoutUrl = 'you.must.define.a.checkout.url?products=' + urlData.join(';') + '&cartId=' + cart[0].id;
Step 2 - Enable the BigCommerce cart webhook
Go to CRM > Plugins > BigCommerce. Press the Create Webhook button.
Last updated