How do I integrate Shop For Good with our Headless CMS?

Created by Shop for Good Support, Modified on Tue, 24 Oct 2023 at 03:50 PM by Shop for Good Support

Add a DK script to the page: https://assets.dailykarma.io/prod/init-v3.js
- To prevent our code from slowing down the site, the script is better if loaded dynamically (like Shopify does)
From your Shop For Good dashboard, set the widgets to Manual mode and proceed with placeholder code placement instructions.
The following functions should be implemented and supplied to the widget:

const getCart = async () => {
  /*
  This method should return a content of the cart in the Shopify Ajax Cart API format
  */
    return {}
  }

  const manageDonationProduct = async (variantId, quantity, attributes) => {
  /*
  a product with the specified variant should be either added to the cart,
   removed from it or its quantity should be changed.
   attributes is a json object like {_dk_charities: '755'} - the same as 
   for the Shopify Ajax Cart API. This is a specific for the product
  */    
  }

  const updateCartAttributes = async (attributes) => {
    /*
    set attributes on the cart level, json object like {__dk_user_notification_out_in: 'false'}
    */
  }
  
  window.dkExternalEndpoints = {
      manageDonationProduct: manageDonationProduct,
      getCart: getCart,
      updateCartAttributes: updateCartAttributes,
      domain: "amymyersmd.myshopify.com"
  };

Shopify Ajax Cart API: Cart API reference (shopify.dev)

Here is an implementation example.

window.dkExternalEndpoints = {
  domain: 'dailykarmademo.myshopify.com',
  getCart: async () => {
    const domain = 'https://dailykarmademo.myshopify.com';
    const response = await fetch(`${domain}/cart.js`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
    });
    const data = await response.json();
    return data;
  },
  manageDonationProduct: async (variantId, quantity, attributes) => {
    const domain = 'https://dailykarmademo.myshopify.com';
    const cart = await window.dkExternalEndpoints.getCart();
    const line = cart?.items?.find((l) => l.variant_id === variantId);
    const response = await fetch(`${domain}/cart/${quantity === 0 ? 'change' : 'add'}.js`, {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        id: line ? line.key : variantId,
        quantity: +quantity,
        properties: attributes,
      }),
    });
    return response;
  },
  updateCartAttributes: async (attributes) => {
    const domain = 'https://dailykarmademo.myshopify.com';
    const response = await fetch(`${domain}/cart/update.js`, {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ attributes }),
    });
  },
};