> For the complete documentation index, see [llms.txt](https://docs.maker.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.maker.co/maker-pages/advanced-features/add-to-cart.md).

# Add to Cart

<figure><img src="/files/rQm9w1xeldC6q649Ecmo" alt=""><figcaption></figcaption></figure>

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:

   ```javascript
   const addToCart = new CustomEvent('addToCart', {
     detail: {
       productId: 'abc123',
       quantity: 1
     }
   });
   window.dispatchEvent(addToCart);
   ```
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:

{% tabs %}
{% tab title="Function or event" %}

* Function / event name
* Arguments
* Code example how to properly call the function/event
  {% endtab %}

{% tab title="Form submission" %}

* Form element ID or selector
* Form fields that Maker should fill
* Code example how to properly fill and submit the form
  {% endtab %}

{% tab title="Fetch/AJAX" %}

* Method
* URL
* Payload
* Authentication
* Code example how to properly make a request
  {% endtab %}

{% tab title="Prefilled cart URL" %}

* Query params
* Code example with the correct URL
  {% endtab %}
  {% endtabs %}

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.

<figure><img src="/files/s3XakCIptlFQRWntWYvi" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.maker.co/maker-pages/advanced-features/add-to-cart.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.