Add to Cart

Add to cart is arguably the most critical functionality of any store. Making it easy and clear for users to know how to add products to cart is not only important for the store itself but any marketing or landing page. Pages built using Maker are no different and that's why Maker supports multiple different ways to implement add to cart and integrate with your store.

Depending on a way Maker is integrated with your store, we can divide different implementation options into 2 groups:

1. Maker is embedded inside your store

2. Maker is ran on a different domain than your store (for example https://pinterestmaker.com/)

If Maker is embedded inside your store

If Maker is embedded inside your store, we generally have more options how to trigger add to cart. Maker is embedded using an iframe, but it has a small runner script that is embedded alongside the iframe on your page. This script thus has access to the context of your page and this can be used to trigger add to cart using one of these methods:

1. Maker can call any function exposed on the global window object with arguments that that function expects. For example, if you can expose a function window.addToCart = (productId, quantity) => {...} and we will be able to call it as expected.

2. Maker can dispatch a custom event that your page would listen to. For example:

3. Maybe there's already a hidden form with prefilled values on your page and adding to cart is as easy as submitting that form. Maker can do that.

4. If none of these options are available or easy to do, Maker can always make a Fetch/AJAX request using your backend API.

If Maker is run on a different domain than your store

If Maker is run on a different domain than your store, the options how to implement add to cart are limited.

1. Maker can make a Fetch/AJAX request to your backend API.

2. If your store supports a prefilled cart/checkout page using query params, Maker can open it in a new window. For example: yourstore.com/cart?productId=abc123&quantity=1

How to integrate add to cart with Maker

Once you choose which of the above methods is the most appropriate for your use case, document which method you chose with details how Maker should trigger add to cart on your page. For example, what's the name of the function or event with expected arguments. If you choose to use Fetch/AJAX request, please document the request method, url, payload and especially authentication method, if applicable.

Send these details to the Maker team and we will set up your preferred method on our end and test it for you.

These are the details that Maker requires:

At Maker, we support the add to cart action that would execute the JavaScript function on your page. We would need to know what function in a global namespace to call with what arguments, and we can trigger that action from inside Maker. For example if you expose a function window.addToCart(productId, quantity), and we would then call it when the Maker button is clicked. This can be a function; we can trigger an event, make an AJAX call, submit a form, etc. To do this, we need to know what that function is on your website.

Once it's set up, an additional option will show up in the link settings making it easy to enable add to cart on any product card.