Display All Products

In LemonStand, we have a simple method that will allow for the output of product lists on any page contained within your store. You simply need to ensure your page is set to use the shop:products Action.

An example of this functionality would be the Shop page contained within LemonStand's Zest theme.

Navigate to the /shop page in your browser. You will see that LemonStand outputs a paginated list of all available products.

Let's take a closer look at how this is accomplished. Open the backend of your store and click the Store Design link in the sidebar. Next, click Pages, and then click on the Shop page to begin editing.

First let's look at the URL field:

As you can see, our URL is defined as /shop/:page?. The important part to note is the /:page? segment which is needed for the pagination of your product list to work correctly. If this segment is not present, LemonStand will not be able to load the pages associated with the pagination links at the bottom of your list of products.

In the Content area of the Shop page you will see the following code:

<code class="language-twig"><div class="row product-list clearfix">
    partial('shop-product-list', {
       'products': products

This code snippet is telling LemonStand to render the shop-product-list partial as part of the Shop page. The 'products': products section is telling LemonStand to output all products found in the products object as made available by the shop:products CMS Action, which is defined on the Shop page's Action section.

The shop-product-list partial is included with LemonStand's Zest theme. However, it's not strictly required that you output your list of products via a partial. In fact, you can output product lists on any page, as long as the page you are working with is using the shop:productsaction.

Let's go through an example of how this would work.

In the backend of your store click on the Editor link and then the Pages link under the Editor section. Click the + button to add a new page.

Lets name our page product-table and then set the action to shop:products.

In the content area enter the following section of code:

<code class="language-twig">
<div class="row product-list"><pre><div class="row product-list">
        {% for product in products %}
                <td>{{ product.name }}</td>
                <td>{{ product.price|currency }}</td>
        {% endfor %}

Since we have set our page to use the shop:products action, we now have access to the list of products contained within the product array, as well as the availability of a number of useful product related parameters, such as the product name, price and image.

As you can see, we have declared a for loop with {% for product in products %}, that will iterate through our store's list of products and then output a table cell containing the {{ product.name }} and also one for the {{ product.price|currency }}.

Save your page and navigate to /product-table in your browser.

You should now see a table containing a list of products in your system that includes the product name and the price of the product.