This is a way that you can add items to the cart automatically by just navigating to a link on your store.
How it works:
On click of the button, the button will bring them to a page with a message "We're adding the items to the cart" and then redirect them to the cart with the additional new items.
How to set it up:
The anatomy of it is the following.
We create a content page that contains the products we want added to the cart and the message we want to display to the user e.g. "We're adding the items to the cart"
We create a custom layout for this page
On the custom layout we hide the products from the view and then add a small javascript snippet that auto clicks the product's add-to-cart buttons. Then the customer is automatically redirected to the cart.
Step 1: Create a content page and add your products
The next step is to create the layout and apply it to our new page
Step 2: Create a new layout, add widgets, and apply it to the new page.
Add the "HTML Content" widget
Add the "Product list" widget
Then apply the layout to the page
Now view the new page and make sure you can see the message and the products.
Don't see your products?
If you don't see your products, check to make sure that you have followed the above steps and then check that you have access to these products via your catalog container.
Check that you add the "Products list" widget in Step 2.
Step 3 : Hide the products on the page
Now go to your layout and add into the "product list" widget the below css classes
"auto-add-to-cart hide"
Step 4: Add the "add to cart" script.
Now, copy/paste the below script into the HTML widget
<script>
setTimeout(function () {
//wait until the items are in the DOM
var groupProductsBtn = document.querySelectorAll('.container:not(.mobile) .auto-add-to-cart .btn-add-to-cart');
// click each of the buttons
var i;
for (i = 0; i < groupProductsBtn.length; i++) {
groupProductsBtn[i].click();
}
window.location.replace("/cart");
}, 1000);
</script>
Step 5: Get the link and do a test
Now get the url of your new page and navigate to it to see it all in action.
Final Step: Add your url link to a button, banner, or add it to an email marketing message.
🚀 Have an awesome day!!