Javascript / Webflow

​Everyday Dose has a direct to checkout link on their Webflow website.
We replace their link with a link we get from Shopify's Storefront Cart API and store the checkout link in local storage to not get throttled by Shopify. 
// put this in a <script></script> tag on the external webpage
function setWithExpiry(key, value, ttl) {
  const now = new Date();
​
  // `item` is an object which contains the original value
  // as well as the time when it's supposed to expire
  const item = {
    value: value,
    expiry: now.getTime() + ttl,
  };
  localStorage.setItem(key, JSON.stringify(item));
}
​
function getWithExpiry(key) {
  const itemStr = localStorage.getItem(key);
​
  // if the item doesn't exist, return null
  if (!itemStr) {
    return null;
  }
​
  const item = JSON.parse(itemStr);
  const now = new Date();
​
  // compare the expiry time of the item with the current time
  if (now.getTime() > item.expiry) {
    // If the item is expired, delete the item from storage
    // and return null
    localStorage.removeItem(key);
    return null;
  }
  return item.value;
}
const storefrontAccessToken = '12345678910';
const shopifyStorefrontGraphqlUrl =
  'https://club.everydaydose.com/api/2021-10/graphql.json';
​
// default to redirector, incase shopify API fails
let checkoutUrl = 'https://club.everydaydose.com/pages/redirector';
const cartCreateMutation = `
mutation {
cartCreate(
input: {
  lines: [
    {
      quantity: 1
      merchandiseId: "gid://shopify/ProductVariant/123456"
      sellingPlanId: "gid://shopify/SellingPlan/123456"
    }
  ]
}
) {
cart {
  id
  createdAt
  updatedAt
}
}
}
`;
​
const checkoutUrlQuery = `
query checkoutURL($id: ID!) {
cart(id: $id) {
checkoutUrl
}
}
`;
​
function changeRedirectorLinks(newCheckoutUrl) {
  console.log('redirecting checkout links to', newCheckoutUrl);
  var redirectorLinks = document.querySelectorAll(
    "[href='https://club.everydaydose.com/pages/redirector']",
  );
  for (var i = 0; i < redirectorLinks.length; i++) {
    redirectorLinks[i].setAttribute('href', newCheckoutUrl);
  }
}
​
async function getCheckoutLink() {
  const cart = await fetch(shopifyStorefrontGraphqlUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Accept: 'application/json',
      'X-Shopify-Storefront-Access-Token': storefrontAccessToken,
    },
    body: JSON.stringify({ query: cartCreateMutation }),
  });
  const cartJson = await cart.json();
  const cartId = cartJson.data.cartCreate.cart.id;
  if (cartId) {
    const checkoutResult = await fetch(shopifyStorefrontGraphqlUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
        'X-Shopify-Storefront-Access-Token': storefrontAccessToken,
      },
      body: JSON.stringify({
        query: checkoutUrlQuery,
        variables: { id: cartId },
      }),
    });
    const checkoutJson = await checkoutResult.json();
    if (checkoutJson.data.cart.checkoutUrl) {
      // 24 hour expiry
      setWithExpiry(
        'skioCheckoutLink',
        checkoutJson.data.cart.checkoutUrl,
        86400000,
      );
      checkoutUrl = checkoutJson.data.cart.checkoutUrl;
    }
    changeRedirectorLinks(checkoutUrl);
  }
}
​
document.addEventListener('DOMContentLoaded', function (event) {
  const checkoutUrlFromStorage = getWithExpiry('skioCheckoutLink');
  if (checkoutUrlFromStorage) {
    console.log('checkoutUrl', checkoutUrlFromStorage);
    changeRedirectorLinks(checkoutUrlFromStorage);
  } else {
    console.log('fetching checkout url');
    getCheckoutLink();
  }
});
​
Last modified 10mo ago