# BigCommerce Checkout Redirect

{% hint style="danger" %}
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
{% endhint %}

{% hint style="danger" %}
If your BigCommerce storefront contains a subscription option then follow [instructions here](https://help.checkoutchamp.com/funnel-builder/redirect-storefront-to-checkoutchamp/bigcommerce-plugin/recurring-products)
{% endhint %}

{% hint style="info" %}
A product SKU is required on each product in BigCommerce to redirect checkout. Products with variations must have a SKU on each variation. Products without variations must have a SKU on the product.  SKU cannot be blank. The redirect is a sku-specific redirect.
{% endhint %}

### 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**

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FsPR9SYbWiVSMr4J6C2vF%2Fimage.png?alt=media&#x26;token=735e90e6-83f1-4cd6-838f-fb9512ab5b71" alt="" width="563"><figcaption></figcaption></figure>

* Copy the below code Snippet

{% code fullWidth="true" %}

```javascript
 <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>
```

{% endcode %}

* 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:

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FCtFasvQTFhFjhJ8br923%2Fimage.png?alt=media&#x26;token=f4bbbad4-f030-48f5-9db7-a9ccaf24ef3c" alt=""><figcaption><p>This will open the page configuration panel on the right side of the builder</p></figcaption></figure>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FdJvgWMj1eNQS9sAOCZat%2Fimage.png?alt=media&#x26;token=1ddb05e3-0d05-4854-b45c-4789af0481e5" alt="" width="326"><figcaption><p>Define the Published Page Name (slug) for your checkout page. <strong>Tab off the field to save.</strong></p></figcaption></figure>

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:

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FaUhpkRhweYP75VbmZxyb%2Fimage.png?alt=media&#x26;token=5d4e5b65-3ab6-480b-8071-7d45026bc21c" alt="" width="563"><figcaption><p>Copy the entire Live URL and replace <em><strong>you.must.define.a.checkout.url</strong></em> in the code snippet above</p></figcaption></figure>

### 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.

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FybuQdN646RyVg5tSWzcM%2Fimage.png?alt=media&#x26;token=9381babe-2882-4581-a89a-b97a74c0f958" alt="" width="563"><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.checkoutchamp.com/funnel-builder/redirect-storefront-to-checkoutchamp/bigcommerce-plugin/bigcommerce-checkout-redirect.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.