SureCart v3 (currently in beta) integrates with Bricks, allowing us to get the products ‘the Bricks way’ using query loops. We have a few new elements, and lots of dynamic tags for displaying different product data.
One nice thing is that most product data is available through dynamic tags, rather than having to display things with individual elements. This means we can use it for both displaying that data using native elements & also use the same for element conditions.
It’s a more flexible approach, at the cost of being a little bit more difficult for beginners. For example, there are no ‘Product Title’, ‘Product Image’, ‘Product Price’, ‘Product List’ elements that some may be looking for when first getting started. Instead, we use native Bricks elements for the most part, and then populate with the needed dynamic tags.
Workflow for Displaying Product Grids
In this tutorial, we’ll go through..
- How to use a query loop to display SureCart products generally.
- How to display only the ‘featured’ products.
- How to display a specific collection of products.
1. Using a Query Loop to Display Products.
Before we look at the featured products and collections we’ll go through how to display products generally using Bricks’ query loop and then narrow it down to specific products.
The SureCart products are a custom post type so, as expected, the first step is just to add a query loop to a block element with the type ‘Posts’ and the post type ‘SureCart Product’. We won’t see any products appear until we add something inside of the loop.
Adding the Product Card Element
Next a ‘Product Card’ element needs to be added inside the query loop. This is an important step because, without this card element, certain elements won’t function. An add-to-cart button wouldn’t work, and sales badges wouldn’t display, for example.
Update – Any interactive elements you may wish to add inside of a product grid, like buttons that trigger popups or popovers for showing more info, would need to be outside of the product card (inside of the query loop, but outside of that product card element). This is because any buttons found inside of the product card, SureCart will use them as ‘add to cart buttons’. So having a combination of some elements being inside of the card, and some outside of the card is going to work best in a lot of cases.
Thankfully, the product card element is nestable so doesn’t give us any restrictions. It auto-populates the structure with common things like the image, the title, price. All of this can be changed, but it’s a sensible starting point.
As you can see from the image above, all of the elements are native Bricks elements inside of the card except for the Sales badge. The product image is an image element, the price is a text element. We’re then free to create any layout we like, as long as the SureCart-specific elements live inside that Product Card.
(By default the products would just be showing as a list, not a grid. But for the sake of a shorter tutorial, we’ll assume you’re familiar with Bricks’ grid or flex controls for creating grid layouts – I used Grid template columns repeat(3, minmax(0, 1fr) )
Displaying Featured Products or Product Collections
Now we can look at how to display more specific products using query loops.
Each SureCart product can be organized into ‘collections’ or tagged as ‘featured’. See the arrows on the image below.
If we want to show only the products tagged as ‘featured’ we need to change the query loop settings to narrow it down to just those products. This is a better approach than just outputting all products and then adding conditions to remove some of them.
2. Displaying Featured Products
Inside the query loop settings, create a ‘Meta Query’ with the meta key as ‘featured’ and the meta value as 1. This will then only output the products that are marked as featured.
3. Displaying Products of a Specific Collection
For collections, they are a taxonomy. If you wish to display a list of products, (outside of the existing taxonomy archive page) instead of using the meta query we need to set a taxonomy query.
Inside the query loop settings, create a ‘Taxonomy Query’. Choose ‘Collections’ from the taxonomy dropdown, the field as ‘slug’, and then your taxonomy term slug for the collection under ‘Terms’.
That’s it
Once the query loops are in place, then it’s pretty easy to customise from there and change the design, layout, display additional product data, and add anything conditonally based on the various dynamic tags (amount of stock, product price, product weight etc).
