Blogging is a huge part of many E-commerce websites. It can be a great way to keep users informed and can help to boost your website’s SEO ranking. At first glance, the blogging capabilities of the built-in BigCommerce blog may seem limited. You may be tempted to develop the blog on an external site, for example, a Wordpress site. Doing so, however, could be detrimental to SEO and the user experience. The purpose of this guide is to enable you, as a developer, to extend the functionality of the built-in BigCommerce blog to meet the needs of a client (or yourself) without having to sacrifice SEO or UX.
In particular, this post will guide you through the process of featuring a blog post (or multiple posts), so that it will appear at the top of your blog page, even though it may not necessarily be the newest.
Note: for the purpose of this guide, we will be developing using the Stencil CLI on a store with Cornerstone 4.12. The same concepts should apply to any Stencil theme, but the file paths may differ slightly. Because this guide requires editing JavaScript and adding new files, the Stencil CLI is a requirement.
Step By Step Guidance
1: Feature the post.
In the admin panel of your store, navigate to Storefront → Blog. Find the post you wish to feature and click on the title to go into the editor. Simply add “featured” as a tag on this post. You can tag as many posts as you like.
2: Edit the blog.html file.
The first step will be to set up our HTML. This is a fairly straightforward step, simply requiring the addition of a single HTML tag to our blog.html template file. Navigate to templates/pages/blog.html and add the following line of code just above the loop for the blog posts: `<div class="featured-posts" data-featured-posts></div>`. Note that you can definitely place this code anywhere you like within the blog.html file. This is where the blog posts will be injected with JavaScript. You definitely do not need to use data attributes, but we personally prefer to bind all of our JavaScript to them. If you don’t want to use a data attribute, you will just need to alter the code in step 5 below.
3: Create a component.
We will also need to create a template that we will load the blog page contents with in our API request. Let’s add a new file at the following path: templates/components/blog/blog-json.html. The code for this file is: `}`. That’s it, just a single line! This will allow us to easily get the blog context in our API request and find which posts to display.
4: Define the route for the Blog’s JS file.
In app.js, we want to declare a file to load on the blog page. We do this by changing `blog: noop,` to `blog: () => import('./theme/blog'),`. Note: if you are running stencil when you make this change, the code will error out as the blog.js file does not exist just yet!
5: Create the Blog’s JS file.
Create a new file at the path assets/js/theme/blog.js. The code for this file will be:
|
``` |
6: Customize.
Now the fun part! The code up to this point will simply make another post that looks almost the same as all the others, but this is our chance to change that. You can target the “featured-posts” class in your CSS to separate this section from the rest. You can also alter the HTML of the post itself to your liking. In the html variable, feel free to move elements around, add extra classes, style these elements, place the featured posts into a carousel. The possibilities are endless!
Wrapping it all up
While the BigCommerce built-in blog is not nearly as robust as platforms built specifically for blogging (IE. Wordpress), the pros of utilizing it can sometimes outweigh the cons. You can definitely extend the functionality of the built-in blog to meet many possible client needs. While this post touched on one specific item, this same methodology can certainly be used to extend additional areas. Feel free to leave a comment to discuss how you used it!
If at any point you get stuck during these steps, remember that we are only adding 2 files and modifying 2 others. Here is a screenshot of the changes:
