How to configure your Shopify Cart to redirect to a Checkout Shop page.
| Info |
|---|
Before to continue, you need to have your Shopify integration and your Shop in THIIOor a Funnel with PowerCart activated in Webforce |
1 .- Go to your store in Shopify and click on Online Store of in the sidebar menu.
...
2.- You need to edit your Shopify liquid code manually to redirect your cart page to THIIO the Webforce Checkout Shop Page.
...
3.- Go to the snippets/ folder.
...
4 .- Click in on Add a new snippet
...
5.- Create a new snippet thiioWebforce-cart.js
...
6.- Copy the following code in
...
WebForce-cart.js and replace
...
[th-power-cart-page] with your Checkout
...
Page
...
URL of
...
WebForce.
| Code Block |
|---|
{%- 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[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) {
const checkoutUrl = getCheckoutURLevent.preventDefault();
debug('Checkout ->', checkoutUrl);
event.preventDefaultconst 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}?cartIdsh_items=${cookiebtoa(JSON.stringify(productCartIds))}`;
}
init();
return self;
};
var instance = new RedirectCart();
});
</script> |
7.- Save your the changes of your new snippet.
...
8.- Go to sections/ folder and open main-cart-items.liquid file, in . In this file, you need to paste the following code at the top of the code.
| Code Block |
|---|
{%
include 'thiioWebforce-cart.js' with
cart: cart
%} |
...