Display Category Products

Let's have a look at how Category Products are displayed with LemonStand.

The Category page in your LemonStand store is the page used to display category products. The category page itself loads the correct category of products by first examining a urlName parameter defined after /category/ in the page's URL.

You will notice on the category page that this functionality has been defined with the following setting in the URL field:

The shop:category action, which is set in the Action section of this page, then preps the category object for use in our page code. So in the case of the Canadian Whiskey category page, the canadian-whiskey parameter value is read from the URL, then the shop:category action loads the category variable and list of products contained in the sporting goods category.

Next let's look at the code content on the category page. If you have a look at the content area starting at line 15, you will see the following section of code:

<code class="language-twig">{{ 
partial('shop-product-list', {
  'products': products,
  'empty_text': 'There are no products in this category.'
}} <br></code>

This section of code is telling LemonStand to render the shop-product-list partial using any defined products for this product category. The list of products was defined at page load by the shop:category action.

You can also access the category variable directly on the category page, along with some useful associated parameters. For example, let's add the following snippet right above our code example above:

<code class="language-twig"><h3>{{ category.name }}</h3></code>

As you can see, when you load the Canadian Whiskey category page, the category name is now outputted above the list of category products:

Additionally, you can also load a list of products outside of a partial using the following Twig syntax.

<code class="language-twig">{% for product in products %}
   <h3>{{ product.name }}</h3>
{% endfor %}<br></code>