BigCommerce Checkout Redirect

This article provides the steps to establish the BigCommerce Checkout Redirect to CheckoutChamp pages

It is critical that your products and variants within BigCommerce have a unique sku. Sku is required for the redirect. It cannot be blank on any item. The redirect is a sku-specific redirect.

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

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.