Tag Specific Redirect

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

1. If you do not care which products redirect to Checkout Champ please review this article instead

2. The Shopify to Checkout Champ redirect will only occur if all products in the cart have the special tag associated with them

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

1. Log into your Shopify admin portal

2. Navigate into a specific product

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

1. If you are unfamiliar with accessing your Shopify Liquid Code please follow the instructional video here

2. Go to the snippets/ folder and add a "{name}-cart.js.liquid" snippet (replace {name} with some unique name for the snippet)

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

1. In the above snippet you’ll have to make the following changes

   1. Line 8: replace “ENTER_YOUR_CHECKOUT_URL_HERE” with the checkout url of the funnel that will be redirected to.

   2. Line 46: replace “create-a-tag” with the tag you created and applied to your products

   3. Line 73: replace “create-a-tag” with the tag you created and applied to your products

   4. Line 83: replace “create-a-tag” with the tag you created and applied to your products

2. Save the snippet.

3. 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”.

4.  {%
     include '{name}-cart.js' with
       cart: cart
    %}

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