This article explains how to configure your Shopify cart and redirect checkout to Checkout Champ based on specific Product Tags
Things to keep in mind
If you do not care which products redirect to Checkout Champ please review this article instead
The Shopify to Checkout Champ redirect will only occur if all products in the cart have the special tag associated with them
If any of the products in the cart do not have the tag the entire cart will checkout through Shopify’s native checkout
First you need to add a tag to your products signifying that these ones should redirect to Checkout Champ.
Log into your Shopify admin portal
Navigate into a specific product
Go to the Tag section, and create a tag for the product.
4. Now apply the same tag to the rest of the products that you’d like to redirect over to Checkout Champ
Now that the tags have been added to your products, we now have to go and add some code to handle the redirect.
To redirect the Shopify cart to the Checkout Champ checkout page, it is required to manually set the routing on your Shopify cart page.
If you are unfamiliar with accessing your Shopify Liquid Code please follow the instructional video here
Go to the snippets/ folder and add a "{name}-cart.js.liquid" snippet (replace {name} with some unique name for the snippet)
Copy the code snippet below and paste into the {name}-cart.js.liquid snippet.
{%- 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 = 'ENTER_YOUR_CHECKOUT_URL_HERE' %}
{% 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][KonnektiveCart]') : function () {};
debug('Script loaded');
window.KonnektiveCart = function (options) {
var self = {};
function productIdsWithQuantities() {
{%- assign added_first = false -%}
return {
{%- for item in cart.items -%}
{%- if item.variant.metafields.productId.productId -%}
{%- if added_first %},{% endif -%}
{%- if item.selling_plan_allocation -%}
"{{ item.variant.metafields.productId.productId}}{{"|"}}{{item.selling_plan_allocation.selling_plan.name | url_encode}}": {{ item.quantity | json }}
{%- else -%}
"{{ item.variant.metafields.productId.productId }}": {{ item.quantity | json }}
{% endif -%}
{%- assign added_first = true -%}
{%- endif -%}
{%- endfor -%}
};
}
// The Liquid filter 'map' lets you drill into nested object properties. We can use this to get an array of tag arrays.
// The JSON Liquid filter will turn any Liquid variable into a legal Javascript variable.
const itemProductTags = {{ cart.items | map: 'product'| map: 'tags' | json }}
// Check on our variables
console.log('All product tag arrays', itemProductTags)
console.log('Results of tagCheck()', tagCheck(itemProductTags, 'create-a-tag') )
function tagCheck(tagsList, targetTag){
// Checks to see if the targetTag appears in all, some or none of the tag arrays.
// tagsList will be an array of arrays
var targetInAny = false;
var targetInAll = true;
for(var i=0; i<tagsList.length; i++){
var tags = tagsList[i];
if(tags.indexOf(targetTag) != -1){
// Found the tag - this targetTag appears in at least one product-tag list
targetInAny = true;
}
else{
// Did not find the tag - this targetTag is NOT in every product-tag list
targetInAll = false;
}
}
// Returns an object specifying if we found the target in any, all or none of the lists
return { targetInAny: targetInAny, targetInAll: targetInAll, targetInNone: !targetInAny }
}
function init() {
self.options = Object.assign({
products: productIdsWithQuantities(),
tags: tagCheck(itemProductTags, 'create-a-tag'),
checkoutButtonSelector: '{{ checkout_button_selector }}',
checkoutUrl: '{{ checkout_url }}',
}, options);
self.$checkoutButton = $(self.options.checkoutButtonSelector);
debug('Initialized with options', self.options);
var isTaggable = tagCheck(itemProductTags,'create-a-tag')
if(isTaggable.targetInAll)
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 KonnektiveCart();
});
</script>
In the above snippet you’ll have to make the following changes
Line 8: replace “ENTER_YOUR_CHECKOUT_URL_HERE” with the checkout url of the funnel that will be redirected to.
Line 46: replace “create-a-tag” with the tag you created and applied to your products
Line 73: replace “create-a-tag” with the tag you created and applied to your products
Line 83: replace “create-a-tag” with the tag you created and applied to your products
Save the snippet.
Go to the cart.liquid file and paste this text at the top of the file. The value inside the apostrophes should be the snippet name, without “.liquid”.
{%
include '{name}-cart.js' with
cart: cart
%}
Save the cart.liquid file.
targetInAny - Redirects whole cart if ANY product has the tag.
targetInAll - Redirects cart if ALL products have the tag.
targetInNone- - redirects cart if NO products have the tag