Solving a Shopify Cart and Checkout Restrictions Challenge
A client’s Shopify store required specific restrictions on accessing the cart and checkout pages.
The store only allows sales on certain days, managed via a Metaobject, then processed through Theme Settings to get the Date and Time for the Sale Availability to be determined, and only logged-in users (customers), and when the Sale is Available, can add items to their cart and proceed to checkout.
The primary goals were to:
- Restrict access to the cart and checkout pages when the sale was not active.
- Automatically clear the cart if users accessed these pages during inactive sale periods.
- Ensure users couldn’t bypass the restrictions by manually entering the
/checkoutURL in their browser.
The sale_available variable determined the sale status and could have three values: "true", "false", or "coming_soon". Therefore, the solution had to:
- Redirect unauthorized users to the homepage.
- Clear the cart if the sale was inactive.
- Block checkout access for all users unless the sale was active.
This solution was achieved without relying on third-party Shopify Apps, particularly avoiding the use of Locksmith, which is a common tool for such restrictions but costs nearly $200 USD per month. By leveraging Liquid and JavaScript, we saved the client significant costs while achieving the same functionality.
<script>
(function () {
let saleStatus = "{{ sale_available | json }}";
let isCustomer = {{ customer | default: false | json }};
let currentPage = window.location.pathname;
function clearCartAndRedirect() {
fetch('/cart/clear.js', { method: 'POST' })
.then(function (response) {
if (response.ok) {
console.log('Cart cleared due to sale restrictions.');
window.location.replace("/");
}
})
.catch(function (error) {
console.error('Error clearing the cart:', error);
});
}
// Redirect from cart or checkout if sale is not available or user is not a customer
if ((currentPage === "/cart" || currentPage.includes("/checkout"))) {
if (saleStatus !== "true" || isCustomer === "false") {
clearCartAndRedirect();
}
}
// Handle redirection from Shopify-hosted checkout URL
if (currentPage.includes("/checkouts/")) {
if (saleStatus !== "true" || isCustomer === "false") {
alert("The sale is not available, or you are not authorized to check out.");
window.location.replace("/");
}
}
})();
</script>Improved Logic: Clearing the Cart on Homepage Load
To further enforce restrictions, I added logic to clear the cart as soon as users visited the homepage during inactive sale periods:
{% if sale_available != "true" %}
<script>
(function () {
fetch('/cart/clear.js', { method: 'POST' })
.then(function (response) {
if (response.ok) {
console.log('Cart cleared because the sale is not active.');
} else {
console.error('Failed to clear the cart.');
}
})
.catch(function (error) {
console.error('Error clearing cart:', error);
});
})();
</script>
{% endif %}Final Implementation in theme.liquid
The final solution integrated both redirect and cart-clearing logic seamlessly into the theme.liquid file:
<!doctype html>
<html class="no-js" lang="{{ request.locale.iso_code }}">
<head>
<!-- Immediate Redirect and Cart Clear Logic -->
<script>
(function () {
let saleStatus = "{{ sale_available | json }}";
let isCustomer = {{ customer | default: false | json }};
let currentPage = window.location.pathname;
function clearCartAndRedirect() {
fetch('/cart/clear.js', { method: 'POST' })
.then(function (response) {
if (response.ok) {
console.log('Cart cleared due to sale restrictions.');
window.location.replace("/");
}
})
.catch(function (error) {
console.error('Error clearing the cart:', error);
});
}
// Redirect from cart or checkout if sale is not available or user is not a customer
if ((currentPage === "/cart" || currentPage.includes("/checkout"))) {
if (saleStatus !== "true" || isCustomer === "false") {
clearCartAndRedirect();
}
}
// Handle redirection from Shopify-hosted checkout URL
if (currentPage.includes("/checkouts/")) {
if (saleStatus !== "true" || isCustomer === "false") {
alert("The sale is not available, or you are not authorized to check out.");
window.location.replace("/");
}
}
})();
</script>
<!-- Force to Clear the Cart if the Sale is NOT Available -->
{% if sale_available != "true" %}
<script>
(function () {
fetch('/cart/clear.js', { method: 'POST' })
.then(function (response) {
if (response.ok) {
console.log('Cart cleared because the sale is not active.');
} else {
console.error('Failed to clear the cart.');
}
})
.catch(function (error) {
console.error('Error clearing cart:', error);
});
})();
</script>
{% endif %}
</head>Results and Lessons Learned
This solution ensures that:
- Users cannot access the cart or checkout pages unless the sale is active.
- The cart is automatically cleared when users visit the homepage during inactive sale periods.
- Unauthorized access attempts to
/checkoutare handled gracefully with redirection and notification.
By combining Liquid and JavaScript, I created a robust system that handles edge cases effectively and enhances both store security and user experience.
Call to Action
If you’re facing similar challenges in your Shopify store, try implementing this solution and let me know how it works for you. Check out Shopify’s Liquid documentation and JavaScript APIs for further customization options. Let’s optimize your store together!