Skip to main content
👆 That nav doesn't fit!
What a slacker!

CLIF Bar

Integrations
Project Type
Integrations
Release Date
Fall 2021
Front End
Shopify
Nuxt.js
Content Mangement
Shopify
Craft CMS
Integrations
Shopify Storefront API
Salesforce API
Firebase
Slack API
Netlify Functions
reCAPTCHA v3
My Role
Developer
Team
Matt Aebersold (Lead Developer)
Robert Reinhard (Integrations Lead)
Katie Turley (Project Manager)

CLIF Bar is one of Bukwild's longest partner relationships. Bukwild built their DTC site on Shopify Plus. Its online store is an intricate machine, with its multiple brands and product lines, complex design, and multiple back-office and logistics integrations. I stepped in on multiple occasions to help with integrations tickets.


See the website

clifbar.com
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.

Want to reach out?