Syncing products automatically from Shopify to Craft CMS

Shopify is CLIF's e-commerce platform, but it isn't flexible enough to satisfy the front-end needs of their product detail pages. This brought about a two-CMS approach where content on the product pages comes from both Shopify and Craft CMS.

Clearly, the two CMSes must be kept in sync: when a new Shopify product is created or modified, within minutes the same change must be made in Craft, or else the product detail page could break, and the product could disappear from listings throughout the site. Performing this sync manually was working, but it was time-consuming and prone to human error.

To solve this, I created an automated product sync solution for CLIF. Here's how it works:

• When a Shopify admin creates or modifies a CLIF product, a webhook runs a Netlify function.

• The Netlify function looks up the respective product in Craft, and uses GraphQL mutations to update the product when necessary.

• Then the function determines whether we need to trigger a Netlify build. To do this, we maintain a list of all products in Firebase, diff our incoming changes, and trigger a new build if any user-facing fields have changed.

• I created @clifbot, a Slack bot, which sends a message whenever we sync a product to Craft, and whenever an error occurs. It can also tell #dadjokes on command.

Integrating the newsletter signup with reCAPTCHA v3 and Salesforce Marketing Cloud API

I also updated CLIF's newsletter signup to use reCAPTCHA v3. As anyone who has done this before knows, this means adding the JavaScript API to the front end, fetching a token, and passing it to the back end (in this case, our Netlify function) where it's validated.

Next, I updated the newsletter signup to submit to a new Salesforce Marketing Cloud API endpoint. This is a bearer authentication process where the back end (our Netlify function) fetches a bearer token and includes it with the submission.