Shopify Checkout Redirect to Checkout Shop Page

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

Before to continue, you need to have your Shopify integration and your Shop in THIIO

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

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

3.- Go to the snippets/ folder.

4 .- Click in Add a new snippet

5.- Create a new snippet thiio-cart.js

6.- Copy the following code in thiio-cart.js and replace enter_your_checkout_url_here with your Checkout Shop Page url of THIIO.

{%- 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][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.querySelector(self.options.checkoutButtonSelector)

        debug('Initialized with options', self.options);
        inject();
      }

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

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

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

        return `${self.options.checkoutUrl}?cartId=${cookie}`;
      }

      init();

      return self;
    };

    var instance = new RedirectCart();

  });
</script>

7.- Save your changes of your new snippet.

8.- Go to sections/ folder and open main-cart-items.liquid file, in this file you need to paste the following code at the top of the code.

{%
  include 'thiio-cart.js' with
    cart: cart
%}