Insights

Many of our BigCommerce clients work on several platforms using a best-of-breed strategy for their technology stacks.  While this is great for making sure you get the most out of each platform, it can make it a little harder to cross-pollinate content from one site to another.

BigCommerce has recently announced their WordPress plugin which allows you to manage and sell your BigCommerce products directly in WordPress, seamlessly blending your content and ecommerce and creating a richer and more contextual experience for your customers.  In many cases this strategy makes a lot of sense- being able to inject products dynamically into your site without having to bounce out to a standalone ecommerce site is shown to increase conversions- but sometimes it’s not feasible due to business or strategy reasons.

When we want to display WordPress content into a BigCommerce site, there are a few different ways to do it based on where the content is. You can use RSS Feed pages to pull data off of the WordPress RSS feed (located at /feed on your wordpress site).

Unfortunately, RSS does not support images (other than embedded in the description of the post) so if you have an image that you want to display in some other way, you’re basically out of luck without build a middleware application between the WordPress RSS feed and BigCommerce’s RSS Feed page. Additionally, the RSS Feed page is limited to being a separate page only- if you want to add the listing to a product page, or a landing page or homepage, you’re not able to do that.  Enter JQuery and the WordPress REST API.

Editing your Theme

This post will make some assumptions:

1. You are using Stencil Themes (not Blueprint).
2. You have a rudimentary knowledge of html, css, and javascript
3. You have access to edit your theme files via the Stencil cli.

If you’re unfamiliar with any of this and want to learn about it, there are resources available on the BigCommerce Dev Center that can help you get started.

A few things to note here: you could use any framework you want here to populate this content (angularjs, vue.js, react, etc) – however I tried to take the keep-it-simple approach here since adding a whole bunch of framework code to do a simple AJAX callback seemed to be the wrong approach.  Stencil already ships with jQuery so we’ll stick with that to do our work.

Secondly, this html is not meant to be used solely as “plug-and-play”.  Since you’re customizing your theme, you’ll want to substitute your valid html and css in here where applicable.

Adding your components

The first step you’ll want to take is to lay out your blog post display components.  I like to segregate these into separate components in my stencil directory. Since we’re going to build a listing for the homepage, we’ll store the components in  the templates/components/homepage/ directory.

The first component is the individual item template located at /templates/components/homepage/blogcarouselitem.html:

Notice that the item is hidden with a “display:none” style. This will be our template for the blog item that we’re mashing into a listing.

Speaking of the listing, here’s what the wrapper for it looks like (this file is stored in /templates/components/homepage/blogcarousel.html):

You can see that we have both added the listing component and also set a data attribute data-blog-category that we can use to hold the category id we’re pulling from WordPress. More on that later.

Finally, since we want to inject this container into the homepage, we’ll add it into our homepage template that’s located at /templates/pages/home.html with a simple handlebars include:

The WordPress API and Cross-Domain AJAX

Now that we have the components laid out we can go and get the content from the WordPress REST API. This API gives us the ability to pull content about posts, categories, tags, etc. from your WordPress site without having to scrape the site for content.  Their API Reference is quite detailed so you can really get a great idea for the possibilities.

Note that some actions require authentication (updating content for example) but may others, like getting the posts for a site or category, do not. Since we only want to see the items that are available on the live site, we should be fine without authentication.

Since your WordPress site and your BigCommerce site are on two different domains (or else we wouldn’t be worrying about this, right?), we have to deal with something very specific to this situation: Cross-Origin XmlHttpRequests. For security reasons, browsers do not allow you to make AJAX requests to other domains without that domain’s approval. This is a major stumbling block for pulling data from one domain to another- but there are a couple ways of getting around this (take note: this is one of my favorite interview questions)

1. CORS: Cross-Origin Request System. This is a server-level setting that will allow cross-origin http requests. You need to set the policy for the requests on the target of the request- so in our example, we’d need edit the webserver on the WordPress domain to allow requests from our bigcommerce domain. This is all well and good if you host your own WordPress server, but if you don’t, well, you’re kind of out of luck.
2. A Proxy: We can create a small piece of code to sit on our source system to act as a proxy or broker for requests to our second domain. This way we’d always be making a request to our local server via Ajax, and that proxy would be making the call to the other domain on the backend and returning it to the Javascript waiting for it. This has two major drawbacks: 1. It adds overhead to a process that really shouldn’t need it and 2. We can’t always do this (especially on SaaS solutions like BigCommerce) … so that leaves us with:
3. JSONP: JSONP is a way of making a call in a cross-origin fashion without any of the server-side stuff. Basically, what happens is it uses a <script> tag to get the data and wraps that data in a callback. The only issue with JSONP is that the service you’re calling on the second domain needs to support JSONP… and luckily, the WordPress API does!

The Javascript

Here’s the JQuery call that makes this all happen.  This file is located in /assets/theme/blog-content.js in my project.

Let’s break this down a little bit.

This is the meat of the call. The datatype here tells JQuery to send this as a JSONP call and so it injects a script tag onto the page and calls the data from there. The jsonp parameter is actually appended to the url of the call to wordpress:

https://your-wordpress-site.com/wp-json/wp/v2/posts?_embed&_jsonp=jQuery331028517959850946784_1544468606038&categories=1&per_page=3&_=1544468606039

and Jquery adds a bunch of callback info so that we don’t end up having duplication or caching issues.

Here we do the work. When the data comes back from the API, we’ll loop through it and create elements based on the content of the template that we set up earlier.

You can look at the WordPress REST API Posts Reference to see what kind of data you’ll get back if you want to do more advanced stuff with your data!

The last thing we need to do is add a link to this code in our homepage Javascript (located in /assets/theme/home.js).

You can see above I’ve imported the BlogContentLoader code we wrote above. We then set the carousel and template and call the BlogContentLoader when the DOM is ready. This will fire off the jsonp call and the content will be loaded asynchronously.

You’re done! Assuming you’ve made the css changes to show the code, you should be displaying your posts on your BigCommerce site. Keep in mind that we aren’t actually pulling the content into BigCommerce, we’re only displaying it on our site, so post management will still happen on the WordPress end.