How Click Here Labs Unlocked Composable Commerce with Headless WordPress

WP Engine currently facilitates the largest collaborative community of WordPress agencies through our Agency Partner Program. 

In this on-demand session from DE{CODE} 2023, you’ll learn how WP Engine Agency Partner Click Here Labs used the new Headless WordPress BigCommerce Blueprint to re-imagine Combat Corner’s online store. You’ll also get a demo of the BigCommerce Blueprint so you can build your own Headless WordPress eCommerce site in as little as 10 minutes!

Speakers:

• Jonathan Jeter,  Director of Technical Production at Click Here Labs
• Bryan Smith, Principal Product Manager at WP Engine

Session Slides:

Transcript:

BRYAN SMITH: Hello, everyone. My name is Bryan Smith, principal product manager here at WP Engine. Today, we’re going to talk about how Click Here Labs unlocked composable commerce with Headless WordPress.

Joining me today is Jonathan Jeter, director of technical production at Click Here Labs. He heads up the team over there. They’re a WP Engine agency partner, and one that we’ve worked very closely with over the last few months to bring our first headless or composable commerce customer to Headless WordPress.

We’ll get more into that case study in just a minute, but before we do, I’d like to talk a bit just about the state of the market with composable development. So composable and headless– we’re using them interchangeably here. Headless often implies composable.

And it’s not just because these sites are so performant that the demand for them is growing. They’re heavily customizable, and they can quickly adapt to a changing technology landscape, as well as an ever-changing business environment, where your business outcomes may change frequently. They deliver dynamic experiences at the speed of static, which we’ll cover later today.

And you can also scale them without having to replatform. In the case study that we’ll present today, the client of Click Here Labs was actually able to stay on BigCommerce, their ecommerce backend, integrate WordPress as their CMS, and bring all of that to a headless storefront. But all of this new technology can often be cost-prohibitive, which is why we’ve spent the last few years addressing the most severe development pain points with Headless WordPress of building sites in this way.

And Headless WordPress, of course, is more than just a host. It’s more than a front end framework. It has the API layer, custom fields plugin, local development app, all of these things that you need to get started. But maybe most importantly, it has a learning community and support.

With all these tools at your fingertips, though, we wouldn’t fault you for having a bit of decision fatigue. It can be hard to even get started when you have so many options at your fingertips and that’s where blueprints come in.

So we’ve developed blueprints and they enable you to set up a starter site with all the code plugins, content models, paid structure you need. You can get them up and running in under 10 minutes. You can really streamline that process of getting a new project started.

And besides that, it also helps you learn the platform and our best practices as well. So it gets you ready for that next project, but until now, the blueprints that we had were limited to more static-type site use cases, such as portfolio, or blog-type sites– nothing as dynamic is a headless storefront.

And that’s why we’ve created the BigCommerce blueprint. So this blueprint that we’ll demo for you here in just a minute– it comes preconfigured with WPGraphQL, the Headless WordPress Content Modeler, the Faust JS framework, and a couple of new things as well– an Headless WordPress commerce blocks plugin, which enables you to bring product data into the WordPress editor, and then also a commerce connector, which connects you to the BigCommerce API, enabling you to sync data from BigCommerce to WordPress, keep those in sync.

You can build a content models from them and you can also power that block’s plugin. So with that, why don’t I actually show you how this works and we’ll hop into a demo…

All right, so here we are in the WP Engine portal on the Headless WordPress page. So when you create a new Headless WordPress app, you can start from blueprint and here you’ll have a couple of options. What we’re going to do here is pick the BigCommerce blueprint over there on the right.

And from here you can also preview that storefront or view the code in GitHub. We’ll select that blueprint and hit Continue. So the next step is to connect to your GitHub account.

And then what we’ll be doing is we’ll clone our repository into yours. So you select your GitHub account, the repository name and then we’ll hit Create App.

So a few things happen during this process. First, we provision the WordPress site. We build the Headless WordPress code for the Headless WordPress app. And then it gets deployed. And that process usually takes about five minutes, but we’ve sped it up here.

Once the WordPress site is built, we can hop into the BigCommerce connector, which you’ll see on the screen here. Configuration screen– we will enter in the credentials and then we can start that product sync.

And I’ve got this connected to an Headless WordPress sandbox account as well as a BigCommerce sandbox account. And I can import the products that I have in that BigCommerce account. I’ve just got about 13 demo products.

I did want to note here that after this initial sync, you don’t actually have to run it again to catch updates. The plugin supports webhooks as well as a nightly cron job. And then once those products are completed importing, it’ll sync the images as well.

And then we’ll go and look at the products. All right, so we have our products loaded. You can see them here on the Products page. These are the demo products from the BigCommerce site.

We’ll go into the Details page of one of these and all I’m showing here is just all the fields of data that we’ve brought in– title, images, descriptions. It’s all there.

So now, it’s there in WordPress. It’s synced for you. You make a change on the BigCommerce site, it updates immediately.

Now, I want to show you the content models we’ve built out with the Headless WordPress Content Modeler. This is just an example. And I guess bear that in mind with these. It’s really a starting place for you just to show you how we’ve done it.

These content models power our product details page on the headless storefront, which we’ll look at here in just a minute. Just an example of how flexible the content modeling is with the Headless WordPress Content Modeler. OK, next, I’m going to show you the Commerce blocks plugin that we talked about earlier.

We’ll go into the Home page in the block editor in WordPress. And here you see this Shop our Latest Product section. This is the commerce blocks.

So what you can do is you can choose the block type, latest products, popular products, the display count that you want to show. We’re showing four there. All this is coming from the BigCommerce side. Here’s another example further down the page– sale items, just as an alternative to how you can use those.

So far, we’ve seen content models and the blocks plugin. Here’s everything that’s installed on the WordPress site. It’s all those plugins we mentioned earlier.

OK. Here we are on the storefront. This is our headless storefront, which you can see in the URL. You can see our product blocks on the page.

And this is a simple storefront. It’s really meant to be a starting place. And so for that reason, we’ve tried to keep it as simple as possible. Next, I’ll go to the Shop page.

Here you can see all of our products. So this page is actually a content model, the Product Details page. You can see we have a spot down there at the bottom for reviews. Our next step will be to add this to the cart.

And you’ll see that the cart is actually headless as well. So all of this is on the Headless WordPress front end. Now, for the checkout, we do redirect to BigCommerce. For the purposes of this blueprint, we felt that made the most sense, but everything else is on the headless Headless WordPress front end.

Here we are back to the storefront. Here’s the About page– just an example of what you can do with laying out these different page sections. So you can take it, use it, learn from it. That’s really the intent here is to get you started quickly.

All right, that’s it and with that, I’m going to pass it over to Jonathan to go in more depth about how Click Here Labs took this blueprint and has extended it for a real client use case. Over to you, Jonathan.

JONATHAN JETER: Thanks, Bryan. Before we talk about extending the blueprint, I first wanted to discuss a little bit about planning the solution. Before we start a very flexible composable commerce solution, we want to make sure that we’ve planned it correctly to make sure that we use the appropriate pieces.

And we always start with the API documentation and the functional requirements. So in this case, for BigCommerce, we went through their API documentation to make sure that all of the features that the client needed in their store were available via the API. And those that weren’t, we needed to plan how we were going to meet those needs, meet those requirements.

So as part of that plan, you need to determine where each requirement will be met, right? Is it through the native BigCommerce? Is it through WordPress? Is it through the front end application that you’re building, or third party apps?

In this case, we had to make some decisions and because the platform is so flexible, the main goal here was to speed up the site, to get, like we’d said before, the speed of static in the front end application. So we wanted to make sure that all of the pieces of the site, all the components in the site that Google was going to see were in the headless front end application.

And then we had to take a look at, for example– Bryan talked about the cart, talked about the account section. He talked about those different things. Which of those pieces were we going to do in the different systems? So for example, we decided in this case for the cart, for checkout, for the customer account to do that within the native application.

Then the site content– we wanted to make sure that that was able to be categorized correctly, that the customer could feel comfortable in adding that content through a standard WordPress interface. We also aggregated some data inside of WordPress in order to be able to present it in the front end in a different way. This would be things that maybe weren’t available in BigCommerce itself and then we had to take into account third party applications.

Where was data coming or going for their CRM, for tracking, for those kinds of things and then finally, you need to plan out– what are the components that you’re going to build in that front end and where are they going to pull the data from?

So ultimate flexibility means that you have a lot of decisions to make and remembering that you are basically building an ecommerce application with all the tools that are available in Headless WordPress, and in this case, BigCommerce, to be able to create that store. So I just wanted to highlight that it’s very important to make that plan, to understand what you’re getting into.

And have those discussions with the client as well and say, this is what we’re building. This is what’s going to stay in the native application. This is what’s going to be in the front end.

Those pieces that are password-protected– for example, My Account, Billing History, those kinds of things– again those, are things that aren’t going to be indexed. So that’s less important that those be in the front end application. So once you figure that out, and we set up the blueprint, now you’re ready to go.

Now we talk about extending the blueprint, right? So what’s involved in that? We’re going to see here that the front end application is started. And now, you need to build out all of those extra pieces that are going to make the store unique, that are going to make it do what your client needs to do.

So for example, in BigCommerce, there is some native functionality that’s there available in the API, such as companion products, customer groups, those kinds of things. And so the client is still using BigCommerce native to manage those companion products, to manage the different customer groups, to manage when things are going to go on sale, and discount codes, and those kinds of things.

We’re taking that data, and we’re presenting it in the front end. We also had third party applications that were– plugins are installed in BigCommerce, right? There’s a product customizer.

And then data from different locations– those needed to be considered. And those components can then be built, for example, on a Product Detail page, right? If there’s a product that has customization– so you can change colors.

You can add logos. You can do those kinds of things, right? This customizer allows you to do that. So these are different pieces that were built on third party functionality.

And then finally, there’s functionality that was built directly into the front end. For example, product comparison matrix– so we’ve all seen this in different locations. Compare three different products, see what different attributes, how they compare, the ability to bundle products into a sale, a discount for a bundle. And then there are things that, for example, are available in BigCommerce native, but for some reason, the API doesn’t do the functionality.

And so file uploader is an example of something that we had to basically create within the front end using different functionality in the back end. So these are all things that you build to extend that blueprint and some of these are going to be included in the extended blueprint, or the premium blueprint that I think Bryan is going to talk about here pretty soon.

BRYAN SMITH: Thanks, Jonathan. Now I’m going to cover the Headless WordPress roadmap real quick. We’ve broken this down into Now, Next, and Later columns.

Under the Now column, you’ll see in bold our ecommerce-specific Headless WordPress initiatives. Under there on the left side, BigCommerce blueprint– that is live, available for anybody to go try out right now. We’re also working on a storefront API.

This is a data layer that will bring together the content from WordPress, BigCommerce, or whatever other third party sources that you’re interested in. So here’s a way to integrate all of them. We’re working on the beta right now, so stay tuned for more details as that gets further along.

Next up, we’ll be working on a Shopify blueprint. This is a similar integration to what we’ve done with BigCommerce, but in this case, it will be with Shopify. And then as we move on past that, we’ll turn our focus to headless personalization and localization. We know that these things are really important to dynamic storefronts. And it’s something that we want to make sure is tightly integrated with the Headless WordPress commerce platform.

So if you’re ready to get started with the BigCommerce blueprint, you can open up a free Headless WordPress sandbox account today to try it out. If you already have an Headless WordPress account, the blueprint, of course, is available to you as well. Go try it out today.

Try it on your next project. Let us know what you think. Thanks, everyone. We really appreciate your time today. Have a great day.