Difference between revisions of "Shopify Liquid Examples"

From the Directed Edge Developer Base
Jump to: navigation, search
 
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
== Basic Example (Textual output) ==
+
Here are a few examples of custom styles that can be used in the Directed Edge custom style engine for Shopify.
 +
 
 +
Note that in general you'll probably want to incorporate the CSS that's here into your site's main CSS file(s), but it's included here to make the examples more complete and usable out of the box.
 +
 
 +
Also see our [[Shopify Liquid|variable reference]].
 +
 
 +
== Basic Example (Plain-text 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:
 
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:
  
 +
<div class="shopify-custom-style">
 
<source lang="xml">
 
<source lang="xml">
 
{% for group in groups %}
 
{% for group in groups %}
Line 19: Line 26:
 
{% endfor %}
 
{% endfor %}
 
</source>
 
</source>
 +
</div>
  
 
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]].
 
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]].
 +
 +
== Default ==
 +
 +
This is a simple, but usable style that's shown by default when you switch to the custom layout mode.  It features a simple list of up to 5 products per recommendations type, plus bundles.  Products are shown with a simple 5 pixel border.  This is a responsive style.
 +
 +
<div class="shopify-custom-style">
 +
<source lang="xml">
 +
<div id="recommendations">
 +
  {% for group in groups %}
 +
    <div class="recommendations-group">
 +
      <h3>{{ group.label }}</h3>
 +
      {% if group.bundle %}
 +
        <div id="bundle">
 +
          <img class="bundle-first"
 +
              src="{{ group.products.first.featured_image | product_img_url: 'compact' }}" />
 +
          <span class="bundle-plus">+</span>
 +
          <img class="bundle-last"
 +
              src="{{ group.products.last.featured_image | product_img_url: 'compact' }}" />
 +
          <span class="bundle-label"><a href="{{ bundle.buy_link }}">{{ bundle.text }}</a></span>
 +
        </div>
 +
      {% else %}
 +
        {% for product in group.products limit:5 %}
 +
          <div class="recommendations-product">
 +
            <div class="recommendations-product-image">
 +
              <a href="{{ product.url }}">
 +
                <img src="{{ product.featured_image |  product_img_url: 'compact' }}">
 +
              </a>
 +
            </div>
 +
            <div class="title"><a href="{{ product.url }}">{{ product.title }}</a></div>
 +
            <div class="price">{{ product.price | money }}</div>
 +
          </div>
 +
        {% endfor %}
 +
      {% endif %}
 +
    </div>
 +
  {% endfor %}
 +
</div>
 +
 +
<style type="text/css" media="screen">
 +
#recommendations h3, .recommendations-group {
 +
    padding: 0.5em 0;
 +
    clear: both;
 +
}
 +
.recommendations-group .recommendations-product {
 +
    display: inline-block;
 +
    vertical-align: top;
 +
    width: 200px;
 +
    padding-bottom: 0.5em;
 +
}
 +
.recommendations-group .recommendations-product div {
 +
    margin: 0.5em 0;
 +
}
 +
.recommendations-group .recommendations-product img, #bundle img {
 +
    border: 10px solid #f6f6f6;
 +
}
 +
.recommendations-product-image {
 +
    position: relative;
 +
    bottom: 0px;
 +
    height: 180px;
 +
}
 +
.recommendations-product-image img {
 +
    position: absolute;
 +
    bottom: 0px;
 +
}
 +
#bundle > *{
 +
    vertical-align: middle;
 +
    margin-bottom: 1em;
 +
}
 +
#bundle .bundle-plus {
 +
    font-size: 3em;
 +
}
 +
#bundle .bundle-label {
 +
    font-size: 1.5em;
 +
    display: inline-block;
 +
}
 +
#bundle .bundle-last {
 +
    margin-right: 0.5em;
 +
}
 +
</style>
 +
</source>
 +
</div>
  
 
== Stylized recommendations with CSS 3 animations ==
 
== Stylized recommendations with CSS 3 animations ==
Line 30: Line 118:
 
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.
 
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.
  
−
 
+
<div class="shopify-custom-style">
 
<source lang="xml">
 
<source lang="xml">
 
<style type="text/css">
 
<style type="text/css">
Line 145: Line 233:
 
</div>
 
</div>
 
</source>
 
</source>
 +
</div>

Latest revision as of 09:57, 27 March 2014

Here are a few examples of custom styles that can be used in the Directed Edge custom style engine for Shopify.

Note that in general you'll probably want to incorporate the CSS that's here into your site's main CSS file(s), but it's included here to make the examples more complete and usable out of the box.

Also see our variable reference.

Basic Example (Plain-text output)

This basic example demonstrates iterating through different recommendation types (called groups) and listing a maximum of five recommended products per group in a nested iteration: 

{% 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 %}

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

Default

This is a simple, but usable style that's shown by default when you switch to the custom layout mode. It features a simple list of up to 5 products per recommendations type, plus bundles. Products are shown with a simple 5 pixel border. This is a responsive style. 

<div id="recommendations">
  {% for group in groups %}
    <div class="recommendations-group">
      <h3>{{ group.label }}</h3>
      {% if group.bundle %}
        <div id="bundle">
          <img class="bundle-first"
               src="{{ group.products.first.featured_image | product_img_url: 'compact' }}" />
          <span class="bundle-plus">+</span>
          <img class="bundle-last"
               src="{{ group.products.last.featured_image | product_img_url: 'compact' }}" />
          <span class="bundle-label"><a href="{{ bundle.buy_link }}">{{ bundle.text }}</a></span>
        </div>
      {% else %}
        {% for product in group.products limit:5 %}
          <div class="recommendations-product">
            <div class="recommendations-product-image">
              <a href="{{ product.url }}">
                <img src="{{ product.featured_image |  product_img_url: 'compact' }}">
              </a>
            </div>
            <div class="title"><a href="{{ product.url }}">{{ product.title }}</a></div>
            <div class="price">{{ product.price | money }}</div>
          </div>
        {% endfor %}
      {% endif %}
    </div>
  {% endfor %}
</div>

<style type="text/css" media="screen">
#recommendations h3, .recommendations-group {
    padding: 0.5em 0;
    clear: both;
}
.recommendations-group .recommendations-product {
    display: inline-block;
    vertical-align: top;
    width: 200px;
    padding-bottom: 0.5em;
}
.recommendations-group .recommendations-product div {
    margin: 0.5em 0;
}
.recommendations-group .recommendations-product img, #bundle img {
    border: 10px solid #f6f6f6;
}
.recommendations-product-image {
    position: relative;
    bottom: 0px;
    height: 180px;
}
.recommendations-product-image img {
    position: absolute;
    bottom: 0px;
}
#bundle > *{
    vertical-align: middle;
    margin-bottom: 1em;
}
#bundle .bundle-plus {
    font-size: 3em;
}
#bundle .bundle-label {
    font-size: 1.5em;
    display: inline-block;
}
#bundle .bundle-last {
    margin-right: 0.5em;
}
</style>

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 {% assign directed-edge-callback = 'myJsFunction' %} before including the {% include 'directed-edge' %} snippet. Since you can set element ids and classes as you need you will be able to easily manipulate the elements later. 

<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>
Retrieved from "https://developer.directededge.com/index.php?title=Shopify_Liquid_Examples&oldid=339"