Shopify Power Cart Redirect to Thiio Checkout

How to configure your Shopify Cart to redirect to a Checkout page.

Before to continue, you need to have your Shopify integration and your Shop or a Funnel with PowerCart activated in THIIO

Redirect checkout button

1 .- Go to your store in Shopify and click on Online Store in the sidebar menu.

2.- You need to edit your Shopify liquid code to redirect your cart page to the THIIO Checkout Page.

3.- Open the ‘Assets’ Folder and click on ‘Add new asset’ to add a new file.

4.- Choose the extension ‘js’ and put ‘th-cart’ as file name in the popup.

5.- Copy and paste the next code in the file created. Replace in the first line the value of the checkout_url variable with the URL of your power cart and save the changes.

const checkout_url = 'https://example.com/power-cart'
const checkout_button_selector = '[type="submit"][name="checkout"]'

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 = document.querySelectorAll(self.options.checkoutButtonSelector)
      debug('Initialized with options', self.options);
      inject();
    }

    function inject() {
      debug('Inject');
      self.$checkoutButton.forEach((button) => {
        button.addEventListener('click', checkout)
      })
    }

    async function checkout(event) {
      event.preventDefault();
      const checkoutUrl = await getCheckoutURL();
      window.location.href = checkoutUrl;
    }
     
    function getCartCookie(name) {
              const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
      if (match){
        return match[2];
      }
          }

    async function getCheckoutURL(products) {
      cookie = getCartCookie('cart');

      var cartContents = await fetch(window.Shopify.routes.root + 'cart.js')
      const cartData = await cartContents.json()

      const productCartIds = cartData.items.map(i => {
        return { product_id:i.product_id, variation_id: i.id, quantity:i.quantity}
      })

      return `${self.options.checkoutUrl}?sh_items=${btoa(JSON.stringify(productCartIds))}`;
    }

    init();

    return self;
  };

  var instance = new RedirectCart();

});

6.- Open the ‘Layout’ folder and edit your theme file adding the next code before the body close tag.

{%- if settings.cart_type == 'drawer' -%}
  <script src="{{ 'th-cart.js' | asset_url }}" defer="defer"></script>
{%- endif -%}

For example:

7.- Open the ‘Sections’ folder and open the file ‘main-cart-items.liquid’, and add the next code at the top of the file.

{%- unless settings.cart_type == 'drawer' -%}
  <script src="{{ 'th-cart.js' | asset_url }}" defer="defer"></script>
{%- endunless -%}

For example:

Redirect add to card button

To redirect to a checkout page with the add to cart button, we need to find the product-form.js file in the Assets folder and modify the onSubmitHandler method, replacing its content with the following code (Replace in the first line the value of the checkoutUrl variable with the URL of your power cart ):

const checkoutUrl = 'https://thiio-site.com/power-cart'

evt.preventDefault();
if (this.submitButton.getAttribute('aria-disabled') === 'true') return;

this.handleErrorMessage();

this.submitButton.setAttribute('aria-disabled', true);
this.submitButton.classList.add('loading');
this.querySelector('.loading-overlay__spinner').classList.remove('hidden');

const formData = new FormData(this.form);

const product = {
  product_id: formData.get('product-id'),
  variation_id: formData.get('id'),
  quantity: 1
}

if (formData.has('quantity')) {
  product.quantity = formData.get('quantity')
}

const sh_items = btoa(JSON.stringify([product]))

window.location.href = `${checkoutUrl}?sh_items=${sh_items}`