Liquid Collection Navigation - Revision history

Admin: /* Change the Product Links */

2011-05-05T05:00:24Z

Change the Product Links

Admin: /* Modify product.liquid */

2008-06-18T02:59:16Z

Modify product.liquid

Admin: /* Modify product.liquid */

2008-06-18T02:58:58Z

Modify product.liquid

Admin at 02:57, 18 June 2008

2008-06-18T02:57:23Z

Admin: New page: A product is an independent entity and may belong to many different collections. Since a collection is just a list of products, when you view a collection and then view a product from wit...

2008-06-18T02:48:58Z

New page: A product is an independent entity and may belong to many different collections. Since a collection is just a list of products, when you view a collection and then view a product from wit...

New page

A product is an independent entity and may belong to many different collections.

Since a collection is just a list of products, when you view a collection and then view a product from within that collection, the product is displayed, but there are no indications as to the collection from which the product was selected.

Many web designers wish to create a way of navigating within a collection.

This tutorial explains how to add this feature to a theme which doesn't already support it.

A product is always referred to by a URL such as

<pre>/products/blue-tshirt</pre>

A collection is always referred to by a URL such as

<pre>/collections/sale</pre>

What we need to do is to tell the software about the collection we are currently using while viewing at a product. We can achieve this by using the new nested URL scheme

<pre>/collections/sale/products/blue-tshirt</pre>

@@ Line 19: / Line 19: @@
 <pre>/collections/sale/products/blue-tshirt</pre>
-==Change the Product Links==
+== Change the Product Links==
-Edit ''collection.liquid'' and change the links to your products from {{product.url}} to {{product.url | within: collection }}
+Edit ''collection.liquid'' and change the links to your products from
 In this example, ''collection'' is the collection that the product belongs to.

← Older revision		Revision as of 02:59, 18 June 2008
Line 42:		Line 42:
	{% endif %}</pre>		{% endif %}</pre>

−	Notice that the whole block is contained in a {%if collection %} block. This ensures that nothing of this will be shown should the user be viewing a product ~~without~~ a collection scope.	+	Notice that the whole block is contained in a {%if collection %} block. This ensures that nothing of this will be shown should the user be viewing a product outside of a collection scope.

← Older revision		Revision as of 02:58, 18 June 2008
Line 41:		Line 41:
	{% endif %}		{% endif %}
	{% endif %}</pre>		{% endif %}</pre>
		+
		+	Notice that the whole block is contained in a {%if collection %} block. This ensures that nothing of this will be shown should the user be viewing a product without a collection scope.

← Older revision		Revision as of 02:57, 18 June 2008
Line 18:		Line 18:

	<pre>/collections/sale/products/blue-tshirt</pre>		<pre>/collections/sale/products/blue-tshirt</pre>
		+
		+	==Change the Product Links==
		+
		+	Edit ''collection.liquid'' and change the links to your products from {{product.url}} to {{product.url \| within: collection }}
		+
		+	In this example, ''collection'' is the collection that the product belongs to.
		+
		+	==Modify product.liquid==
		+
		+	In ''product liquid'' you now have access to the Collection object. This object is only present if the URL of the product contains the collection.
		+
		+	The most common use for this feature is to create prev/next navigation. For this the Collection object contains two new methods, ''next_product'' and ''previous_product''.
		+
		+	Here is an example which adds navigation to the product.liquid file:
		+
		+	<pre>{% if collection %}
		+	{% if collection.previous_product %}
		+	{{ 'Previous Product' \| link_to: collection.previous_product }} \|
		+	{% endif %}
		+	{% if collection.next_product %}
		+	{{ 'Next Product' \| link_to: collection.next_product }}
		+	{% endif %}
		+	{% endif %}</pre>