Drawer Cart

This article explains how to configure your Shopify drawer cart to redirect to a Checkout Champ checkout.

Be warned that this does not work on every theme.

This will not work with a standard cart. Follow instructions here to redirect a standard cart.

Step 1: Scroll down to the snippets/ folder and add a "{name}-cart.js.liquid" snippet (replace {name} with name of your Shopify store, remove the brackets.)

Step 2: Copy the below code and paste it into a new snippet

The script is slightly different than the original redirect script so be sure you’re using this one

{%- 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 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}}": {{ item.quantity | json }}
          {%- else -%}
           "{{ item.variant.metafields.productId.productId }}": {{ item.quantity | json }}
          {% endif -%}
              {%- assign added_first = true -%}
          {%- endif -%}
          {%- endfor -%}
        };
      }

      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>

Be sure to replace ‘you.must.define.a.checkout.url’ in line number 8 with the url you are redirecting to.

Step 3: Add the following in your theme.liquid file

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

  {%
    include 'your_snippet_file-cart.js' with      
      checkout_url: 'define-your-checkout-url'
  %}

Be sure to replace ‘your-snippet-file.cart.js’ with your file name and ‘define-your-checkout-url’ with the url you are redirecting to.

Step 4: Navigate to Templates and click “Add a new template”

In the “Add a new template screen” input the following

Template - cart Template Type - liquid

File Name - cart.meta-data.json.liquid.

meta-data.json

Click Create Template once done.

Once done, remove everything in the newly created file and replace it with the following

{%- 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 %}
  ]
}

---

Tested themes:

Dawn, Sense, Craft, Spotlight, Refresh, Debutify, Prestige, Baseline, Minimog by FOXECOM, Fullstack, Shrine.