Add to cart : Plug stories add-to-cart to my website

Suggest Edits

Preview

Web stories offer an add-to-cart feature. You will need to set up your product feed and link the product to your story on the Studio. More information on JOIN Stories Help Center.


Setup

Requirement

JOIN Stories cannot push products directly to your cart, instead we will notify you when a user is trying to add a product to his cart.

🚧

To implement this feature, you will need a Javascript function to add the product to your cart.

Workflow

Add to cart Workflow

To implement the add to cart workflow, you will need to :

  1. Listen to event JOIN_STORIES_ADD_TO_CART event on document. (Event reference here)
  2. When the event fires, retrieve orderId, productId, and variantId (if needed).
  3. Perform your own add-to-cart function.
  4. Use the resolveAddToCart method exposed by JoinStories to inform the story the product has been successfully added, or if there was an error. (See more)

Example

// 1. listen to event
document.addEventListener('JOIN_STORIES_ADD_TO_CART', async (event) => {
    try {
      	// 2. Retrieve needed data
        let { widgetAlias, orderId, productId, price, variantId } = event.detail;

      	// 3. Call my function
        await myCustomAddToCartMethod({ productId, price, variantId });
      	// 4. In case of success, resolve without error
        window.JoinStories.resolveAddToCart(orderId);
    } catch (error) {
      	// 4. In case of failure, resolve with an error
        switch (error) {
            case 'MY_ERROR_PRODUCT_OUT_OF_STOCK':
                window.JoinStories.resolveAddToCart(orderId, 'PRODUCT_OUT_OF_STOCK');
                break;
            default:
                window.JoinStories.resolveAddToCart(orderId, true);
        }
    }
});

See Cart

📘

The user will be able to click on the "See cart" once a product has been added. You should implement this workflow to ensure the button works.

To implement the add to cart workflow, you will need to :

  1. Listen to event JOIN_STORIES_SEE_CART on document. (Event reference here)
  2. When the event fires, redirect the user to the cart.
  3. (Optional) If the cart is not on a separated page, you may want to call the closePlayer method to force closing the player. (See implementation here)

Examples

document.addEventListener('JOIN_STORIES_SEE_CART', function (event) {
    window.location = "https://www.my-domain.com/my-cart-url";
});

Complete Examples

Shopify - Dawn Theme

Dawn Theme on shopify uses a post to add to cart and to update the cart.

🚧

This implementation is for the Dawn Theme and any theme extended from it. It might not work for other themes.

On the website:

  • Go to product page
  • Add a new block or section
  • Choose "Custom Liquid"
  • Copy and paste the following code: 
<script>
  const myCustomAddToCartMethod = async ({ productId, price, variantId }) => {
    let formData = {
      "form_type": "product",
      id: variantId,
      "product-id": productId,
      "section-id": "product-template",
    };
    await fetch(window.Shopify.routes.root + 'cart/add.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(formData)
    });

    const cartResponse = await fetch(window.Shopify.routes.root + 'cart.js', {
      method: 'GET',
    });
    const cart = await cartResponse.json();

    document.querySelectorAll("[data-cart-count]").forEach(it => it.innerText = cart.item_count);
  };

  document.addEventListener('JOIN_STORIES_ADD_TO_CART', async (event) => {
    try {
      let { widgetAlias, orderId, productId, price, variantId } = event.detail;

      await myCustomAddToCartMethod({ productId, price, variantId });
      window.JoinStories.resolveAddToCart(orderId);
    } catch (error) {
      switch (error) {
        case 'MY_ERROR_PRODUCT_OUT_OF_STOCK':
          window.JoinStories.resolveAddToCart(orderId, 'PRODUCT_OUT_OF_STOCK');
          break;
        default:
          window.JoinStories.resolveAddToCart(orderId, true);
      }
    }
	});

  document.addEventListener('JOIN_STORIES_SEE_CART', function (event) {
    window.location = "https://join-stories.myshopify.com/cart";
  });
</script>

<script>
  function sendAudienceData(a){window.jDataLayer=window.jDataLayer||[],window.jDataLayer.push({type:"audience",data:a})}
</script>
<div id="join-widget" style="display:block;"></div>
<style>
  #join-widget { margin: 5px 2px; min-height: 114px; width: 100%; } @media (min-aspect-ratio: 3/4) { #join-widget { min-height: 132px; } }
</style>
<script
  src="https://join-dev-edouard.my.dev-join-stories.com/widgets/{{ product.handle }}"
  data-join-widget-id="join-widget"
  data-join-widget-alias="{{ product.handle }}"
  type="text/javascript"
></script>

📘

Here {{ product.handle }} is used as an alias to implement a generic widget to every product page. Don't forget to create a widget for each product you have (See documentation)

Updated 6 days ago