Note that the following documentation is based on instructions provided by CheckoutChamp. In case of any issues, please contact your CheckoutChamp account manager.
Go to Theme => … => Edit code
Create a new file in the templates folder with the name cart.meta-data.json.liquid
Paste the following content:
{%- layout none -%}
{
"meta_product_id_array": [
{%- for item in cart.items -%}
{%- if item.variant.metafields.productId.productId -%}
{
"id": "{{ item.variant.metafields.productId.productId }}",
"quantity": {{ item.quantity }}
}
{%- unless forloop.last -%},{%- endunless -%}
{%- endif -%}
{%- endfor -%}
]
}Create a new file in the snippets folder with the name cc-custom-cart.js.liquid
Paste the following content into that file:
{%- comment %}
@param cart (cart, mandatory)
@param checkout_url (string, mandatory) the checkout url
@param checkout_button_selector (string) the query selector for the checkout button
{% endcomment -%}
{% unless checkout_url %}
{% assign checkout_url = 'you.must.define.a.checkout.url' %}
{% endunless %}
{% unless checkout_button_selector %}
{% assign checkout_button_selector = '[type="submit"][name="checkout"]' %}
{% endunless %}
<script>
document.addEventListener("DOMContentLoaded", function () {
var debug = true ? console.log.bind(console, '[DEBUG][RedirectCart]') : function () {};
debug('Script loaded');
window.RedirectCart = function (options) {
var self = {};
function init() {
self.options = Object.assign({
checkoutButtonSelector: '{{ checkout_button_selector }}',
checkoutUrl: '{{ checkout_url }}'
}, options);
self.$checkoutButton = $(self.options.checkoutButtonSelector);
debug('Initialized with options', self.options);
inject();
}
function inject() {
debug('Inject');
$(document).on('click', self.options.checkoutButtonSelector, checkout);
}
function checkout(event) {
event.preventDefault();
event.stopPropagation();
var cartContents = fetch('/cart?view=meta-data.json')
.then(response => response.json())
.then(data => {
var checkoutUrl = getCheckoutURL(data);
debug('Checkout ->', checkoutUrl);
window.location.href = checkoutUrl;
});
}
function getCartCookie(name) {
var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
if (match) {
return match[2];
}
}
function getCheckoutURL(data) {
cookie = getCartCookie('cart');
affId = getCartCookie('?affId');
//coupon = '&couponCode={{cart.cart_level_discount_applications[0].title}}';
var urlLineItems = Object.keys(data.meta_product_id_array).reduce(function (output, productId) {
return output.concat([ data.meta_product_id_array[productId].id + ':' + data.meta_product_id_array[productId].quantity ]);
}, []).join(';');
if (typeof affId !== 'undefined')
return self.options.checkoutUrl + '?products=' + urlLineItems + '&cartId='+cookie + '&affId='+affId+coupon;
else
return self.options.checkoutUrl + '?products=' + urlLineItems + '&cartId='+cookie;
}
init();
return self;
};
var instance = new RedirectCart();
});
</script>
Open file theme.liquid
Add the following code before </body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
{%
include 'cc-custom-cart' with
checkout_url: 'YOUR-CHECKOUT-URL'
%}Ensure to replace YOUR-CHECKOUT-URL with the checkout url that you have set in your checkout champ settings.