Shopify's Ajax API allows storefront interactions without requiring a full page reload, which is ideal for creating seamless, dynamic e-commerce experiences. It can be used to integrate features like add-to-cart, cart updates, fetching cart contents, and modifying cart items directly from the front end.

Add-to-Cart Capability

The add-to-cart functionality in Shopify's Ajax API lets customers add products to their cart without a page reload.

You can use the Shopify Ajax API from an External Script within the Mavenoid embedding script. The easiest way is to pass a product-handle from the external script node. The script would look something like this:

async addToCart(productHandle) {
    const productResponse = await fetch("/products/"+productHandle+".js");
    if (!productResponse.ok) {
        return {
        formData: [
            {
                id: "error", 
                value: {
                    type: "string",
                    value: await productResponse.text()
                }
            }
        ]
        }
    }
    const product = await productResponse.json();
    let formData = {
        'items': [{
            'id': product.variants[0].id,
            'quantity': 1
        }]
    };
    const response = await fetch('/cart/add.js', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
    });
    if (response.ok) {
        window.location.href = "/cart";
        return {formData: [{
        id: "product-title",
        value: {
            type: "string",
            value: product.title
        }
        }]}
    }
    else { 
        const {description} = await response.json()
        return {
        formData: [{
            id: "error", 
            value: {
            type: "string",
            value: description
            }
        }]
        }
    }
 }