Bigcommerce redirect on cart page - redirect

Question

Adding custom script into my cart.html file in bigcommerce to include a script that will redirect card holder to google.com when they click checkout (only going to google for now while testing script)
When the script is loaded I see the following error in the console (self.checkoutButton.on is not a function)
Here is the script + file
cart: true
<script>
document.addEventListener("DOMContentLoaded", function () {
var debug = true ? console.log.bind(console, '[DEBUG][Cart]') : function () {};
debug('Script loaded');
window.Cart = function (options) {
var self = {}
function init() {
self.options = Object.assign({
checkoutButtonSelector: document.getElementById("checkout"),
checkoutUrl: 'https://google.com',
}, options);
self.checkoutButton = (self.options.checkoutButtonSelector);
debug('Initialized with options', self.options);
inject();
}
function inject() {
debug('Inject');
self.checkoutButton.on('click', checkout);
}
function checkout(event) {
var checkoutUrl = getCheckoutURL(self.options.products);
debug('Checkout ->', checkoutUrl);
event.preventDefault();
window.location.href = checkoutUrl;
}
function getCartCookie(name) {
var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
if (match){
return match[2];
}
}
function getCheckoutURL(products) {
cookie = getCartCookie('cart');
var urlLineItems = Object.keys(products).reduce(function (output, productId) {
var quantity = products[productId];
return output.concat([ productId + ':' + quantity ]);
}, []).join(';');
return self.options.checkoutUrl + '?products=' + urlLineItems + '&cartId='+cookie;
}
init();
return self;
};
var instance = new Cart();
});
</script>
<div class="page">
<main class="page-content" data-cart>
{{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
{{> components/cart/page-title}}
<div data-cart-status>
{{> components/cart/status-messages}}
</div>
{{#if cart.items.length}}
<div class="loadingOverlay"></div>
<div data-cart-content class="cart-content-padding-right">
{{> components/cart/content}}
</div>
<div data-cart-totals class="cart-content-padding-right">
{{> components/cart/totals}}
</div>
{{#if cart.show_primary_checkout_button}}
<div class="cart-actions cart-content-padding-right">
<a class="button button--primary" id='checkout' title="{{lang 'cart.checkout.title'}}">{{lang 'cart.checkout.button'}}</a>
{{#if cart.show_multiple_address_shipping}}
<a class="checkoutMultiple" href="{{urls.checkout.multiple_address}}">
{{lang 'cart.preview.checkout_multiple'}}
</a>
{{/if}}
</div>
{{else}}
<div class="cart-actions cart-content-padding-right">
<a class="button" href="{{urls.home}}" title="{{lang 'cart.continue_shopping'}}">{{lang 'cart.continue_shopping'}}</a>
</div>
{{/if}}
{{#if cart.additional_checkout_buttons}}
<div class="cart-additionalCheckoutButtons cart-content-padding-right">
{{#each cart.additional_checkout_buttons}}
{{{this}}}
{{/each}}
</div>
{{/if}}
{{else}}
<h3 tabindex="0">{{lang 'cart.checkout.empty_cart'}}</h3>
{{/if}}
</main>
</div>
{{/partial}}
{{> layout/base}}
Would you have any idea why I would be getting the following error? Thanks in advance

Answer 1

You are using .on which is a JQuery function. You’re not using JQuery to wrap your selector, you’re just using the vanilla JS getElementById. You need to use a vanilla JS function to add the event, such as addEventListener.