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 Webforce

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 Webforce Checkout Page.

3.- Go to the snippets/ folder.

4 .- Click on Add a new snippet

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

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

{% 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 'Webforce-cart.js' with
    cart: cart
%}