the Directed Edge Developer Base - User contributions [en]

Shopify Liquid Examples

2013-10-10T18:37:32Z

Lucijan:

== Basic Example (Textual output) ==
This basic example demonstrates iterating through different recommendation types (called <tt>groups</tt>) and listing a maximum of five recommended products per group in a nested iteration:

<source lang="xml">
{% for group in groups %}
<h3>{{ group.label }}</h3>
<ul>
{% if group.bundle %}
<li><a href="{{ bundle.buy_link }}">{{ bundle.text }}</a></li>
{% else %}
{% for product in group.products limit:5 %}
<li>
<a href="{{ product.url }}">{{ product.title }}</a>
for {{ product.price | money }}
</li>
{% endfor %}
{% endif %}
</ul>
{% endfor %}
</source>

In the <tt>{% if group.bundle %}…{% else %}…{% endif %}</tt> block we handle the special case of a group being a bundle. In this case we want to have a different link <tt><nowiki>{{ bundle.buy_link }}</nowiki></tt> that adds the bundled products to the basket. Also we want to show a message <tt><nowiki>{{ bundle.buy_text }}</nowiki></tt> that contains the price of the whole bundle. For more information on bundles see the [[Shopify_Liquid|Variable Reference]].

== Stylized recommendations with CSS 3 animations ==

The next example shows the real powers of customized templates in Directed Edge for Shopify. This example shows only the product images of the recommended products. If you hover over one of them a neat animation will enlarge that particular item and reveal a product's title, price and also the original price if the product is on sale.
As you will see CSS-code can be directly embedded into the liquid template.

Note hover that: '''JavaScript code will be stripped out before rendering'''.<br>
If you need to use JavaScript it has to be embedded in the Shopify templates. You can set a callback using <tt>{% assign directed-edge-callback = 'myJsFunction' %}</tt> before including the <tt>{% include 'directed-edge' %}</tt> snippet. Since you can set element ids and classes as you need you will be able to easily manipulate the elements later.

<source lang="xml">
<style type="text/css">
.recommendations-label {
font-family: Arial, sans-serif;
font-size: 2em;
}

.recommendation-group {
float: left;
display: block;
clear: both;
padding: 5px;
}

.recommended-item {
display: inline-block;
float: left;
text-align: center;
cursor: pointer;
height: 102px;
padding: 3px;
margin: 3px;
border: 1px solid #ddd;
border-radius: 3px;
}

.bundle-plus {
display: inline-block;
float: left;
text-align: center;
cursor: pointer;
height: 102px;
padding: 3px;
margin: 3px;
font-family: Arial, sans-serif;
font-size: 2em;
line-height:4em;
vertical-align: middle;
}

.recommended-image-container {
float: left;
width: 102px;
line-height: 100px;
}

.recommended-image-container img {
vertical-align: top;
}

.recommended-details {
width: 1px;
height: 102px;
float: left;
overflow: clip;
text-align: left;
transition: width 0.2s;
-webkit-transition: width 0.2s; /* Safari, Chrome */
}

.recommended-item:hover .recommended-details {
width: 120px;
}

.rtitle, .rprice {
margin-left: 1px;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.sale-price {
text-decoration: line-through;
}
</style>

<div class="recommendations">
{% for group in groups %}
<div class="recommendation-group">
<span class="recommendations-label">{{ group.label }}</span>
<ul>
{% for product in group.products %}
<a href="{{ product.url }}">
<div class="recommended-item">
<div class="recommended-image-container">
<img src="{{ product.featured_image | product_img_url: 'small' }}" />
</div>
<div class="recommended-details">
<div class="rtitle">
{{ product.title }}<br/>
{% if product.compare_at_price_min > product.price_min %}
<span class="sale-price">{{ product.compare_at_price_min | money }}</span>
{% endif %}
{{ product.price | money }}
</div>
</div>
</div>
</a>
{% if group.bundle and product == group.products.first %}
<div class="bundle-plus">+</div>
{% endif %}
{% if group.bundle and product == group.products.last %}
<div class="bundle-plus">
<a href="{{ bundle.buy_link }}">{{ bundle.text }}</a>
</div>
{% endif %}
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
</source>

Shopify Liquid Examples

2013-10-10T18:35:52Z

Lucijan:

== Basic Example (Textual output) ==
This basic example demonstrates iterating through different recommendation types (called <tt>groups</tt>) and listing a maximum of five recommended products per group in a nested iteration:

<source lang="xml">
{% for group in groups %}
<h3>{{ group.label }}</h3>
<ul>
{% if group.bundle %}
<li><a href="{{ bundle.buy_link }}">{{ bundle.text }}</a></li>
{% else %}
{% for product in group.products limit:5 %}
<li>
<a href="{{ product.url }}">{{ product.title }}</a>
for {{ product.price | money }}
</li>
{% endfor %}
{% endif %}
</ul>
{% endfor %}
</source>

In the <tt>{% if group.bundle %}…{% else %}…{% endif %}</tt> block we handle the special case of a group being a bundle. In this case we want to have a different link <tt><nowiki>{{ bundle.buy_link }}</nowiki></tt> that adds the bundled products to the basket. Also we want to show a message <tt><nowiki>{{ bundle.buy_text }}</nowiki></tt> that contains the price of the whole bundle. For more information on bundles see the [[Shopify_Liquid|Variable Reference]].

== Stylized recommendations with CSS 3 animations ==

The next example shows the real powers of customized templates in Directed Edge for Shopify. This example shows only the product images of the recommended products. If you hover over one of them a neat animation will enlarge that particular item and reveal a product's title, price and also the original price if the product is on sale.
As you will see CSS-code can be directly embedded into the liquid template.

Note hover that: '''JavaScript code will be stripped out before rendering'''.<br>
If you need to use JavaScript it has to be embedded in the Shopify templates. You can set a callback using <tt>{% assign directed-edge-callback = 'myJsFunction' %}</tt> before including the <tt>{% include 'directed-edge' %}</tt> snippet. Since you can set element ids and classes as you need you can easily manipulate the elements later.

<source lang="xml">
<style type="text/css">
.recommendations-label {
font-family: Arial, sans-serif;
font-size: 2em;
}

.recommendation-group {
float: left;
display: block;
clear: both;
padding: 5px;
}

.recommended-item {
display: inline-block;
float: left;
text-align: center;
cursor: pointer;
height: 102px;
padding: 3px;
margin: 3px;
border: 1px solid #ddd;
border-radius: 3px;
}

.bundle-plus {
display: inline-block;
float: left;
text-align: center;
cursor: pointer;
height: 102px;
padding: 3px;
margin: 3px;
font-family: Arial, sans-serif;
font-size: 2em;
line-height:4em;
vertical-align: middle;
}

.recommended-image-container {
float: left;
width: 102px;
line-height: 100px;
}

.recommended-image-container img {
vertical-align: top;
}

.recommended-details {
width: 1px;
height: 102px;
float: left;
overflow: clip;
text-align: left;
transition: width 0.2s;
-webkit-transition: width 0.2s; /* Safari, Chrome */
}

.recommended-item:hover .recommended-details {
width: 120px;
}

.rtitle, .rprice {
margin-left: 1px;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.sale-price {
text-decoration: line-through;
}
</style>

<div class="recommendations">
{% for group in groups %}
<div class="recommendation-group">
<span class="recommendations-label">{{ group.label }}</span>
<ul>
{% for product in group.products %}
<a href="{{ product.url }}">
<div class="recommended-item">
<div class="recommended-image-container">
<img src="{{ product.featured_image | product_img_url: 'small' }}" />
</div>
<div class="recommended-details">
<div class="rtitle">
{{ product.title }}<br/>
{% if product.compare_at_price_min > product.price_min %}
<span class="sale-price">{{ product.compare_at_price_min | money }}</span>
{% endif %}
{{ product.price | money }}
</div>
</div>
</div>
</a>
{% if group.bundle and product == group.products.first %}
<div class="bundle-plus">+</div>
{% endif %}
{% if group.bundle and product == group.products.last %}
<div class="bundle-plus">
<a href="{{ bundle.buy_link }}">{{ bundle.text }}</a>
</div>
{% endif %}
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
</source>

Shopify Liquid Examples

2013-10-10T18:34:58Z

Lucijan:

== Basic Example (Textual output) ==
This basic example demonstrates iterating through different recommendation types (called <tt>groups</tt>) and listing a maximum of five recommended products per group in a nested iteration:

<source lang="xml">
{% for group in groups %}
<h3>{{ group.label }}</h3>
<ul>
{% if group.bundle %}
<li><a href="{{ bundle.buy_link }}">{{ bundle.text }}</a></li>
{% else %}
{% for product in group.products limit:5 %}
<li>
<a href="{{ product.url }}">{{ product.title }}</a>
for {{ product.price | money }}
</li>
{% endfor %}
{% endif %}
</ul>
{% endfor %}
</source>

In the <tt>{% if group.bundle %}…{% else %}…{% endif %}</tt> block we handle the special case of a group being a bundle. In this case we want to have a different link <tt><nowiki>{{ bundle.buy_link }}</nowiki></tt> that adds the bundled products to the basket. Also we want to show a message <tt><nowiki>{{ bundle.buy_text }}</nowiki></tt> that contains the price of the whole bundle. For more information on bundles see the [[Shopify_Liquid|Variable Reference]].

== Stylized recommendations with CSS 3 animations ==

The next example shows the real powers of customized templates in Directed Edge for Shopify. This example shows only the product images of the recommended products. If you hover over one of them a neat animation will enlarge that particular item and reveal a product's title, price and also the original price if the product is on sale.
As you will see CSS-code can be directly embedded into the liquid template.

Note hover that: '''JavaScript code will be stripped out before rendering'''. If you need to use JavaScript it has to be embedded in the Shopify templates. You can set a callback using <tt>{% assign directed-edge-callback = 'myJsFunction' %}</tt> before including the <tt>{% include 'directed-edge' %}</tt> snippet. Since you can set element ids and classes as you need you can easily manipulate the elements later.

<source lang="xml">
<style type="text/css">
.recommendations-label {
font-family: Arial, sans-serif;
font-size: 2em;
}

.recommendation-group {
float: left;
display: block;
clear: both;
padding: 5px;
}

.recommended-item {
display: inline-block;
float: left;
text-align: center;
cursor: pointer;
height: 102px;
padding: 3px;
margin: 3px;
border: 1px solid #ddd;
border-radius: 3px;
}

.bundle-plus {
display: inline-block;
float: left;
text-align: center;
cursor: pointer;
height: 102px;
padding: 3px;
margin: 3px;
font-family: Arial, sans-serif;
font-size: 2em;
line-height:4em;
vertical-align: middle;
}

.recommended-image-container {
float: left;
width: 102px;
line-height: 100px;
}

.recommended-image-container img {
vertical-align: top;
}

.recommended-details {
width: 1px;
height: 102px;
float: left;
overflow: clip;
text-align: left;
transition: width 0.2s;
-webkit-transition: width 0.2s; /* Safari, Chrome */
}

.recommended-item:hover .recommended-details {
width: 120px;
}

.rtitle, .rprice {
margin-left: 1px;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.sale-price {
text-decoration: line-through;
}
</style>

<div class="recommendations">
{% for group in groups %}
<div class="recommendation-group">
<span class="recommendations-label">{{ group.label }}</span>
<ul>
{% for product in group.products %}
<a href="{{ product.url }}">
<div class="recommended-item">
<div class="recommended-image-container">
<img src="{{ product.featured_image | product_img_url: 'small' }}" />
</div>
<div class="recommended-details">
<div class="rtitle">
{{ product.title }}<br/>
{% if product.compare_at_price_min > product.price_min %}
<span class="sale-price">{{ product.compare_at_price_min | money }}</span>
{% endif %}
{{ product.price | money }}
</div>
</div>
</div>
</a>
{% if group.bundle and product == group.products.first %}
<div class="bundle-plus">+</div>
{% endif %}
{% if group.bundle and product == group.products.last %}
<div class="bundle-plus">
<a href="{{ bundle.buy_link }}">{{ bundle.text }}</a>
</div>
{% endif %}
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
</source>

Shopify Liquid Examples

2013-10-10T18:34:14Z

Lucijan:

== Basic Example (Textual output) ==
This basic example demonstrates iterating through different recommendation types (called <tt>groups</tt>) and listing a maximum of five recommended products per group in a nested iteration:

<source lang="xml">
{% for group in groups %}
<h3>{{ group.label }}</h3>
<ul>
{% if group.bundle %}
<li><a href="{{ bundle.buy_link }}">{{ bundle.text }}</a></li>
{% else %}
{% for product in group.products limit:5 %}
<li>
<a href="{{ product.url }}">{{ product.title }}</a>
for {{ product.price | money }}
</li>
{% endfor %}
{% endif %}
</ul>
{% endfor %}
</source>

In the <tt>{% if group.bundle %}…{% else %}…{% endif %}</tt> block we handle the special case of a group being a bundle. In this case we want to have a different link <tt><nowiki>{{ bundle.buy_link }}</nowiki></tt> that adds the bundled products to the basket. Also we want to show a message <tt><nowiki>{{ bundle.buy_text }}</nowiki></tt> that contains the price of the whole bundle. For more information on bundles see the [[Shopify_Liquid|Variable Reference]].

== Stylized recommendations with CSS 3 animations ==

The next example shows the real powers of customized templates in Directed Edge for Shopify. This example shows only the product images of the recommended products. If you hover over one of them a neat animation will enlarge that particular item and reveal a product's title, price and also the original price if the product is on sale.
As you will see CSS-code can be directly embedded into the liquid template.
Note hover that: '''JavaScript code will be stripped out before rendering'''. If you need to use JavaScript it has to be embedded in the Shopify templates. You can set a callback using <tt>{% assign directed-edge-callback = 'myJsFunction' %}</tt> before including the <tt>{% include 'directed-edge' %}</tt> snippet. Since you can set element ids and classes as you need you can easily manipulate the elements later.

<source lang="xml">
<style type="text/css">
.recommendations-label {
font-family: Arial, sans-serif;
font-size: 2em;
}

.recommendation-group {
float: left;
display: block;
clear: both;
padding: 5px;
}

.recommended-item {
display: inline-block;
float: left;
text-align: center;
cursor: pointer;
height: 102px;
padding: 3px;
margin: 3px;
border: 1px solid #ddd;
border-radius: 3px;
}

.bundle-plus {
display: inline-block;
float: left;
text-align: center;
cursor: pointer;
height: 102px;
padding: 3px;
margin: 3px;
font-family: Arial, sans-serif;
font-size: 2em;
line-height:4em;
vertical-align: middle;
}

.recommended-image-container {
float: left;
width: 102px;
line-height: 100px;
}

.recommended-image-container img {
vertical-align: top;
}

.recommended-details {
width: 1px;
height: 102px;
float: left;
overflow: clip;
text-align: left;
transition: width 0.2s;
-webkit-transition: width 0.2s; /* Safari, Chrome */
}

.recommended-item:hover .recommended-details {
width: 120px;
}

.rtitle, .rprice {
margin-left: 1px;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.sale-price {
text-decoration: line-through;
}
</style>

<div class="recommendations">
{% for group in groups %}
<div class="recommendation-group">
<span class="recommendations-label">{{ group.label }}</span>
<ul>
{% for product in group.products %}
<a href="{{ product.url }}">
<div class="recommended-item">
<div class="recommended-image-container">
<img src="{{ product.featured_image | product_img_url: 'small' }}" />
</div>
<div class="recommended-details">
<div class="rtitle">
{{ product.title }}<br/>
{% if product.compare_at_price_min > product.price_min %}
<span class="sale-price">{{ product.compare_at_price_min | money }}</span>
{% endif %}
{{ product.price | money }}
</div>
</div>
</div>
</a>
{% if group.bundle and product == group.products.first %}
<div class="bundle-plus">+</div>
{% endif %}
{% if group.bundle and product == group.products.last %}
<div class="bundle-plus">
<a href="{{ bundle.buy_link }}">{{ bundle.text }}</a>
</div>
{% endif %}
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
</source>

Shopify Liquid Examples

2013-10-10T18:33:16Z

Lucijan:

== Basic Example (Textual output) ==
This basic example demonstrates iterating through different recommendation types (called <tt>groups</tt>) and listing a maximum of five recommended products per group in a nested iteration:

<source lang="xml">
{% for group in groups %}
<h3>{{ group.label }}</h3>
<ul>
{% if group.bundle %}
<li><a href="{{ bundle.buy_link }}">{{ bundle.text }}</a></li>
{% else %}
{% for product in group.products limit:5 %}
<li>
<a href="{{ product.url }}">{{ product.title }}</a>
for {{ product.price | money }}
</li>
{% endfor %}
{% endif %}
</ul>
{% endfor %}
</source>

In the <tt>{% if group.bundle %}…{% else %}…{% endif %}</tt> block we handle the special case of a group being a bundle. In this case we want to have a different link <tt><nowiki>{{ bundle.buy_link }}</nowiki></tt> that adds the bundled products to the basket. Also we want to show a message <tt><nowiki>{{ bundle.buy_text }}</nowiki></tt> that contains the price of the whole bundle. For more information on bundles see the [[Shopify_Liquid|Variable Reference]].

== Stylized recommendations with CSS 3 animations ==

The next example shows the real powers of customized templates in Directed Edge for Shopify. This example shows only the product images of the recommended products. If you hover over one of them a neat animation will enlarge that particular item and reveal the product's title, price and also the original price if the product is on sale.
As you will see CSS-code can be directly embedded into the liquid template. Note hover that: '''JavaScript code will be stripped out before rendering'''. If you need to use JavaScript it has to be embedded in the Shopify templates. You can set a callback using <tt>{% assign directed-edge-callback = 'myJsFunction' %}</tt> before including the <tt>{% include 'directed-edge' %}</tt> snippet. Since you can set element ids and classes as you need you can easily manipulate the elements later.

<source lang="xml">
<style type="text/css">
.recommendations-label {
font-family: Arial, sans-serif;
font-size: 2em;
}

.recommendation-group {
float: left;
display: block;
clear: both;
padding: 5px;
}

.recommended-item {
display: inline-block;
float: left;
text-align: center;
cursor: pointer;
height: 102px;
padding: 3px;
margin: 3px;
border: 1px solid #ddd;
border-radius: 3px;
}

.bundle-plus {
display: inline-block;
float: left;
text-align: center;
cursor: pointer;
height: 102px;
padding: 3px;
margin: 3px;
font-family: Arial, sans-serif;
font-size: 2em;
line-height:4em;
vertical-align: middle;
}

.recommended-image-container {
float: left;
width: 102px;
line-height: 100px;
}

.recommended-image-container img {
vertical-align: top;
}

.recommended-details {
width: 1px;
height: 102px;
float: left;
overflow: clip;
text-align: left;
transition: width 0.2s;
-webkit-transition: width 0.2s; /* Safari, Chrome */
}

.recommended-item:hover .recommended-details {
width: 120px;
}

.rtitle, .rprice {
margin-left: 1px;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.sale-price {
text-decoration: line-through;
}
</style>

<div class="recommendations">
{% for group in groups %}
<div class="recommendation-group">
<span class="recommendations-label">{{ group.label }}</span>
<ul>
{% for product in group.products %}
<a href="{{ product.url }}">
<div class="recommended-item">
<div class="recommended-image-container">
<img src="{{ product.featured_image | product_img_url: 'small' }}" />
</div>
<div class="recommended-details">
<div class="rtitle">
{{ product.title }}<br/>
{% if product.compare_at_price_min > product.price_min %}
<span class="sale-price">{{ product.compare_at_price_min | money }}</span>
{% endif %}
{{ product.price | money }}
</div>
</div>
</div>
</a>
{% if group.bundle and product == group.products.first %}
<div class="bundle-plus">+</div>
{% endif %}
{% if group.bundle and product == group.products.last %}
<div class="bundle-plus">
<a href="{{ bundle.buy_link }}">{{ bundle.text }}</a>
</div>
{% endif %}
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
</source>

Shopify Liquid Examples

2013-10-10T18:18:20Z

Lucijan:

== Basic Example (Textual output) ==
This basic example demonstrates iterating through different recommendation types (called <tt>groups</tt>) and listing a maximum of five recommended products per group in a nested iteration:

<source lang="xml">
{% for group in groups %}
<h3>{{ group.label }}</h3>
<ul>
{% if group.bundle %}
<li><a href="{{ bundle.buy_link }}">{{ bundle.text }}</a></li>
{% else %}
{% for product in group.products limit:5 %}
<li>
<a href="{{ product.url }}">{{ product.title }}</a>
for {{ product.price | money }}
</li>
{% endfor %}
{% endif %}
</ul>
{% endfor %}
</source>

In the <tt>{% if group.bundle %}…{% else %}…{% endif %}</tt> block we handle the special case of a group being a bundle. In this case we want to have a different link <tt><nowiki>{{ bundle.buy_link }}</nowiki></tt> that adds the bundled products to the basket. Also we want to show a message <tt><nowiki>{{ bundle.buy_text }}</nowiki></tt> that contains the price of the whole bundle. For more information on bundles see the [[Shopify_Liquid|Variable Reference]].

== Styled recommendations with CSS 3 animations ==

<source lang="xml">
<style type="text/css">
.recommendations-label {
font-family: Arial, sans-serif;
font-size: 2em;
}

.recommendation-group {
float: left;
display: block;
clear: both;
padding: 5px;
}

.recommended-item {
display: inline-block;
float: left;
text-align: center;
cursor: pointer;
height: 102px;
padding: 3px;
margin: 3px;
border: 1px solid #ddd;
border-radius: 3px;
}

.bundle-plus {
display: inline-block;
float: left;
text-align: center;
cursor: pointer;
height: 102px;
padding: 3px;
margin: 3px;
font-family: Arial, sans-serif;
font-size: 2em;
line-height:4em;
vertical-align: middle;
}

.recommended-image-container {
float: left;
width: 102px;
line-height: 100px;
}

.recommended-image-container img {
vertical-align: top;
}

.recommended-details {
width: 1px;
height: 102px;
float: left;
overflow: clip;
text-align: left;
transition: width 0.2s;
-webkit-transition: width 0.2s; /* Safari, Chrome */
}

.recommended-item:hover .recommended-details {
width: 120px;
}

.rtitle, .rprice {
margin-left: 1px;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.sale-price {
text-decoration: line-through;
}
</style>

<div class="recommendations">
{% for group in groups %}
<div class="recommendation-group">
<span class="recommendations-label">{{ group.label }}</span>
<ul>
{% for product in group.products %}
<a href="{{ product.url }}">
<div class="recommended-item">
<div class="recommended-image-container">
<img src="{{ product.featured_image | product_img_url: 'small' }}" />
</div>
<div class="recommended-details">
<div class="rtitle">
{{ product.title }}<br/>
{% if product.compare_at_price_min > product.price_min %}
<span class="sale-price">{{ product.compare_at_price_min | money }}</span>
{% endif %}
{{ product.price | money }}
</div>
</div>
</div>
</a>
{% if group.bundle and product == group.products.first %}
<div class="bundle-plus">+</div>
{% endif %}
{% if group.bundle and product == group.products.last %}
<div class="bundle-plus">
<a href="{{ bundle.buy_link }}">{{ bundle.text }}</a>
</div>
{% endif %}
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
</source>

Shopify Liquid Examples

2013-10-10T18:15:18Z

Lucijan:

== Basic Example (Textual output) ==
This basic example demonstrates iterating through different recommendation types (called <tt>groups</tt>) and listing a maximum of five recommended products per group in a nested iteration:

<source lang="xml">
{% for group in groups %}
<h3>{{ group.label }}</h3>
<ul>
{% if group.bundle %}
<li><a href="{{ bundle.buy_link }}">{{ bundle.text }}</a></li>
{% else %}
{% for product in group.products limit:5 %}
<li>
<a href="{{ product.url }}">{{ product.title }}</a>
for {{ product.price | money }}
</li>
{% endfor %}
{% endif %}
</ul>
{% endfor %}
</source>

In the <tt>{% if group.bundle %}…{% else %}…{% endif %}</tt> block we handle the special case of a group being a bundle. In this case we want to have a different link <tt><nowiki>{{ bundle.buy_link }}</nowiki></tt> that adds the bundled products to the basket. Also we want to show a message <tt><nowiki>{{ bundle.buy_text }}</nowiki></tt> that contains the price of the whole bundle. For more information on bundles see the [[Shopify_Liquid|Variable Reference]].

== Styled recommendations with CSS 3 animations ==

<source lang="xml">
<style type="text/css">
.recommendations-label {
font-family: Arial, sans-serif;
font-size: 2em;
}

.recommendation-group {
float: left;
display: block;
clear: both;
padding: 5px;
}

.recommended-item {
display: inline-block;
float: left;
text-align: center;
cursor: pointer;
height: 102px;
padding: 3px;
margin: 3px;
border: 1px solid #ddd;
border-radius: 3px;
}

.bundle-plus {
display: inline-block;
float: left;
text-align: center;
cursor: pointer;
height: 102px;
padding: 3px;
margin: 3px;
font-family: Arial, sans-serif;
font-size: 2em;
line-height:4em;
vertical-align: middle;
}

.recommended-image-container {
float: left;
width: 102px;
line-height: 100px;
}

.recommended-image-container img {
vertical-align: top;
}

.recommended-details {
width: 1px;
height: 102px;
float: left;
overflow: clip;
text-align: left;
transition: width 0.2s;
-webkit-transition: width 0.2s; /* Safari, Chrome */
}

.recommended-item:hover .recommended-details {
width: 120px;
}

.rtitle, .rprice {
margin-left: 1px;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.sale-price {
text-decoration: line-through;
}
</style>

<div class="recommendations">
{% for group in groups %}
<div class="recommendation-group">
<span class="recommendations-label">{{ group.label }}</span>
<ul>
{% for product in group.products %}
<a href="{{ product.url }}">
<div class="recommended-item">
<div class="recommended-image-container">
<img src="{{ product.featured_image | product_img_url: 'small' }}" />
</div>
<div class="recommended-details">
<div class="rtitle">
{{ product.title }}<br/>
{% if product.compare_at_price_min > product.price_min %}
<span class="sale-price">{{ product.compare_at_price_min | money }}</span>
{% endif %}
{{ product.price | money }}
</div>
</div>
</div>
</a>
{% if group.bundle and product == group.products.first %}
<div class="bundle-plus">+</div>
{% endif %}
{% if group.bundle and product == group.products.last %}
<div class="bundle-plus">
<a href="{{ bundle.buy_link }}">{{ bundle.text }}</a>
</div>
{% endif %}
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
</source>

Shopify Liquid Examples

2013-10-10T17:58:56Z

Lucijan:

Shopify Liquid Examples

2013-10-10T17:58:28Z

Lucijan:

Shopify Liquid Examples

2013-10-10T17:57:50Z

Lucijan:

Shopify Liquid Examples

2013-10-10T17:57:32Z

Lucijan:

Shopify Liquid Examples

2013-10-10T17:57:02Z

Lucijan:

Shopify Liquid Examples

2013-10-10T17:55:54Z

Lucijan:

Shopify Liquid Examples

2013-10-10T17:52:32Z

Lucijan:

Shopify Liquid Examples

2013-10-10T17:43:17Z

Lucijan: Created page with "== Basic Example (Textual output) == This first example demonstrates iterating through different recommendation types (<tt>groups</tt>) and listing a maximum of five recommended ..."

== Basic Example (Textual output) ==
This first example demonstrates iterating through different recommendation types (<tt>groups</tt>) and listing a maximum of five recommended products per group:

<source lang="xml">
{% for group in groups %}
<h3>{{group.label}}</h3>
<ul>
{% if group.bundle %}
<li><a href="{{bundle.buy_link}}">{{bundle.text}}</a></li>
{% else %}
{% for product in group.products limit:5%}
<li>
<a href="{{product.url}}">{{product.title}}</a>
for {{product.price | money}}
</li>
{% endfor %}
{% endif %}
</ul>
{% endfor %}
</source>

Shopify Liquid

2013-10-10T00:30:21Z

Lucijan:

== Liquid Variables supported by Directed Edge ==
=== groups ===
The liquid variable groups contain all recommendation types that are available for the requested page. Each group has following properties:
{| class="variable-ref-table"
|-
| label || A formatted label of the group. E.g. 'Recommended Items', 'Recently Viewed', etc. Those labels can be customized in the [http://shopify.directededge.com/settings#styling Directed Edge for Shopify Appearance Settings] page.
|-
| handle || A machine friendly identifier for the group (e.g. bundle, recommended_product, etc.)
|-
| products || A list of products that are recommended for this group.
The following example would print title and price of all products in all available groups:
<source lang="xml">
{% for group in groups %}
<ul>
{% for product in group.products %}
<li>
<b>{{ product.title }}</b><br />
{{ product.price | money }}
{% endfor %}
</ul>
{% endfor %}
</source>
A detailed description of all product's properties can be found [http://docs.shopify.com/themes/liquid-variables/product here].
|-
| bundle || A boolean field that indicates if this group is a bundle. This is useful to render custom content for that particular group. The following snippet would display both product images separated by a plus sign and followed by a equals sign and the bundle price:
<source lang="xml">
{% for group in groups %}
{% if group.bundle %}
{{ group.products.first.featured_image | product_img_url: 'small' }}
+
{{ group.products.last.featured_image | product_img_url: 'small' }}
=
{{ bundle.price }}
{% else %}

{% endif %}
{% endfor %}
</source>
|}

=== bundle ===
The bundle variable is used to access supplementary information about bundles
{| class="wikitable"
|-
| text || Bundle's buy message (e.g. 'Buy both for 20$') which can be adjusted in the [http://shopify.directededge.com/settings#bundle Directed Edge for Shopify Bundle Settings] page.
|-
| price || The total price of a bundle calculated using the method specified in the [http://shopify.directededge.com/settings#bundle Directed Edge for Shopify Bundle Settings] page. As any price it can be formatted with the price filter (e.g. <source lang="xml">{{ bundle.price | money }}</source>
|-
| buy_link || A link that will add both products to the shopping cart and will present the user a product variant chooser if necessary.
|}

Shopify Liquid

2013-10-10T00:23:53Z

Lucijan:

== Liquid Variables supported by Directed Edge ==
=== groups ===
The liquid variable groups contain all recommendation types that are available for the requested page. Each group has following properties:
{| class="wikitable"
|-
| label || A formatted label of the group. E.g. 'Recommended Items', 'Recently Viewed', etc. Those labels can be customized in the [http://shopify.directededge.com/settings#styling Directed Edge for Shopify Appearance Settings] page.
|-
| handle || A machine friendly identifier for the group (e.g. bundle, recommended_product, etc.)
|-
| products || A list of products that are recommended for this group.
The following example would print title and price of all products in all available groups:
<source lang="xml">
{% for group in groups %}
<ul>
{% for product in group.products %}
<li>
<b>{{ product.title }}</b><br />
{{ product.price | money }}
{% endfor %}
</ul>
{% endfor %}
</source>
A detailed description of all product's properties can be found [http://docs.shopify.com/themes/liquid-variables/product here].
|-
| bundle || A boolean field that indicates if this group is a bundle. This is useful to render custom content for that particular group. The following snippet would display both product images separated by a plus sign and followed by a equals sign and the bundle price:
<source lang="xml">
{% for group in groups %}
{% if group.bundle %}
{{ group.products.first.featured_image | product_img_url: 'small' }}
+
{{ group.products.last.featured_image | product_img_url: 'small' }}
=
{{ bundle.price }}
{% else %}

{% endif %}
{% endfor %}
</source>
|}

=== bundle ===
The bundle variable is used to access supplementary information about bundles
{| class="wikitable"
|-
| text || Bundle's buy message (e.g. 'Buy both for 20$') which can be adjusted in the [http://shopify.directededge.com/settings#bundle Directed Edge for Shopify Bundle Settings] page.
|-
| price || The total price of a bundle calculated using the method specified in the [http://shopify.directededge.com/settings#bundle Directed Edge for Shopify Bundle Settings] page. As any price it can be formatted with the price filter (e.g. <source lang="xml">{{ bundle.price | money }}</source>
|-
| buy_link || A link that will add both products to the shopping cart and will present the user a product variant chooser if necessary.
|}

Shopify Liquid

2013-10-10T00:22:17Z

Lucijan:

== Liquid Variables supported by Directed Edge ==
=== groups ===
The liquid variable groups contain all recommendation types that are available for the requested page.
<source lang="xml">
{% for group in groups %}
{{ group.label }}
<ul></ul>
{% endfor %}
</source>
Each group has following properties:
{| class="wikitable"
|-
| label || A formatted label of the group. E.g. 'Recommended Items', 'Recently Viewed', etc. Those labels can be customized in the [http://shopify.directededge.com/settings#styling Directed Edge for Shopify Appearance Settings] page.
|-
| handle || A machine friendly identifier for the group (e.g. bundle, recommended_product, etc.)
|-
| products || A list of products that are recommended for this group.
The following example would print title and price of all products in all available groups:
<source lang="xml">
{% for group in groups %}
<ul>
{% for product in group.products %}
<li>
<b>{{ product.title }}</b><br />
{{ product.price | money }}
{% endfor %}
</ul>
{% endfor %}
</source>
A detailed description of all product's properties can be found [http://docs.shopify.com/themes/liquid-variables/product here].
|-
| bundle || A boolean field that indicates if this group is a bundle. This is useful to render custom content for that particular group. The following snippet would display both product images separated by a plus sign and followed by a equals sign and the bundle price:
<source lang="xml">
{% for group in groups %}
{% if group.bundle %}
{{ group.products.first.featured_image | product_img_url: 'small' }}
+
{{ group.products.last.featured_image | product_img_url: 'small' }}
=
{{ bundle.price }}
{% else %}

{% endif %}
{% endfor %}
</source>
|}

=== bundle ===
The bundle variable is used to access supplementary information about bundles
{| class="wikitable"
|-
| text || Bundle's buy message (e.g. 'Buy both for 20$') which can be adjusted in the [http://shopify.directededge.com/settings#bundle Directed Edge for Shopify Bundle Settings] page.
|-
| price || The total price of a bundle calculated using the method specified in the [http://shopify.directededge.com/settings#bundle Directed Edge for Shopify Bundle Settings] page. As any price it can be formatted with the price filter (e.g. <source lang="xml">{{ bundle.price | money }}</source>
|-
| buy_link || A link that will add both products to the shopping cart and will present the user a product variant chooser if necessary.
|}

Shopify Liquid

2013-10-10T00:20:52Z

Lucijan:

__TOC__
== Liquid Variables supported by Directed Edge ==
=== groups ===
The liquid variable groups contain all recommendation types that are available for the requested page.
<source lang="xml">
{% for group in groups %}
{{ group.label }}
<ul></ul>
{% endfor %}
</source>
Each group has following properties:
{| class="wikitable"
|-
| label || A formatted label of the group. E.g. 'Recommended Items', 'Recently Viewed', etc. Those labels can be customized in the [http://shopify.directededge.com/settings#styling Directed Edge for Shopify Appearance Settings] page.
|-
| handle || A machine friendly identifier for the group (e.g. bundle, recommended_product, etc.)
|-
| products || A list of products that are recommended for this group.
The following example would print title and price of all products in all available groups:
<source lang="xml">
{% for group in groups %}
<ul>
{% for product in group.products %}
<li>
<b>{{ product.title }}</b><br />
{{ product.price | money }}
{% endfor %}
</ul>
{% endfor %}
</source>
A detailed description of all product's properties can be found [http://docs.shopify.com/themes/liquid-variables/product here].
|-
| bundle || A boolean field that indicates if this group is a bundle. This is useful to render custom content for that particular group. The following snippet would display both product images separated by a plus sign and followed by a equals sign and the bundle price:
<source lang="xml">
{% for group in groups %}
{% if group.bundle %}
{{ group.products.first.featured_image | product_img_url: 'small' }}
+
{{ group.products.last.featured_image | product_img_url: 'small' }}
=
{{ bundle.price }}
{% else %}

{% endif %}
{% endfor %}
</source>
|}

=== bundle ===
The bundle variable is used to access supplementary information about bundles
{| class="wikitable"
|-
| text || Bundle's buy message (e.g. 'Buy both for 20$') which can be adjusted in the [http://shopify.directededge.com/settings#bundle Directed Edge for Shopify Bundle Settings] page.
|-
| price || The total price of a bundle calculated using the method specified in the [http://shopify.directededge.com/settings#bundle Directed Edge for Shopify Bundle Settings] page. As any price it can be formatted with the price filter (e.g. <source lang="xml">{{ bundle.price | money }}</source>
|-
| buy_link || A link that will add both products to the shopping cart and will present the user a product variant chooser if necessary.
|}

== Examples ==
Simple example

Shopify Liquid

2013-10-10T00:19:58Z

Lucijan:

__TOC__
== Liquid Variables supported by Directed Edge ==
=== groups ===
The liquid variable groups contain all recommendation types that are available for the requested page.
<source lang="xml">
{% for group in groups %}
{{ group.label }}
<ul></ul>
{% endfor %}
</source>
Each group has following properties:
{| class="wikitable"
|-
| label || A formatted label of the group. E.g. 'Recommended Items', 'Recently Viewed', etc. Those labels can be customized in the [http://shopify.directededge.com/settings#styling Directed Edge for Shopify Appearance Settings] page.
|-
| handle || A machine friendly identifier for the group (e.g. bundle, recommended_product, etc.)
|-
| products || A list of products that are recommended for this group.
The following example would print title and price of all products in all available groups:
<source lang="xml">
{% for group in groups %}
<ul>
{% for product in group.products %}
<li>
<b>{{ product.title }}</b><br />
{{ product.price | money }}
{% endfor %}
</ul>
{% endfor %}
</source>
A detailed description of all product's properties can be found [http://docs.shopify.com/themes/liquid-variables/product here].
|-
| bundle || A boolean field that indicates if this group is a bundle. This is useful to render custom content for that particular group. The following snippet would display both product images separated by a plus sign and followed by a equals sign and the bundle price:
<source lang="xml">
{% for group in groups %}
{% if group.bundle %}
{{ group.products.first.featured_image | product_img_url: 'small' }}
+
{{ group.products.last.featured_image | product_img_url: 'small' }}
=
{{ bundle.price }}
{% else %}

{% endif %}
{% endfor %}
</source>
|}

=== bundle ===
The bundle variable is used to access supplementary information about bundles
{| class="wikitable"
|-
| text | Bundle's buy message (e.g. 'Buy both for 20$') which can be adjusted in the [http://shopify.directededge.com/settings#bundle Directed Edge for Shopify Bundle Settings] page.
|-
| price | The total price of a bundle calculated using the method specified in the [http://shopify.directededge.com/settings#bundle Directed Edge for Shopify Bundle Settings] page. As any price it can be formatted with the price filter (e.g. <source lang="xml">{{ bundle.price | money }}</source>
|-
| buy_link | A link that will add both products to the shopping cart and will present the user a product variant chooser if necessary.
|}

== Examples ==
Simple example

Shopify Liquid

2013-10-10T00:01:34Z

Lucijan:

Shopify Liquid

2013-10-07T16:27:19Z

Lucijan: Created page with "__TOC__ == Liquid Variables supported by Directed Edge == Following Liquid Variables are supported in custom templates: * groups - An array of recommendation types with following..."

__TOC__
== Liquid Variables supported by Directed Edge ==
Following Liquid Variables are supported in custom templates:
* groups - An array of recommendation types with following variables
** handle - A machine friendly identifier for the group (e.g. bundle, recommended_product, etc.)
** label - A rendered label text (according to your settings)
** bundle - A boolean field that indicates if this group is a bundle
** products - An array of [http://docs.shopify.com/themes/liquid-variables/product Products]
* bundle
** text - Bundle's buy message (e.g. 'Buy both for 20$')
** price - The sum of a bundles price
** buy_link - A link that will add a bundle's products into the cart