Shopify Checkout Redirect to Checkout Page

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

 

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.- Go to the snippets/ folder.

 

4 .- Click on Add a new snippet

 

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

 

6.- Copy the following code in thiio-cart.js and replace [th-power-cart-page] with your Checkout Page URL of THIIO.

{% unless checkout_url %} {% assign checkout_url = '[th-power-cart-page]' %} {% 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); } 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(); }); </script>

 

7.- Save the 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 %}