Difference between revisions of "Shopify Liquid Examples"

From the Directed Edge Developer Base
Jump to: navigation, search
Line 104: Line 104:
 
<div class="recommendations">
 
<div class="recommendations">
 
{% for group in groups %}
 
{% for group in groups %}
−
    <div class="recommendation-group">
+
  <div class="recommendation-group">
−
<span class="recommendations-label">{{ group.label }}</span>
+
    <span class="recommendations-label">{{ group.label }}</span>
−
<ul>
+
    <ul>
−
{% for product in group.products %}
+
      {% for product in group.products %}
−
<a href="{{ product.url }}">
+
      <a href="{{ product.url }}">
−
<div class="recommended-item">
+
        <div class="recommended-item">
−
          <div class="recommended-image-container">
+
          <div class="recommended-image-container">
−
  <img src="{{ product.featured_image | product_img_url: 'small' }}" />
+
            <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 class="recommended-details">
+
          </div>
−
              <div class="rtitle">
+
        </div>
−
                {{ product.title }}<br/>
+
      </a>
−
                {% if product.compare_at_price_min > product.price_min %}
+
      {% if group.bundle and product == group.products.first %}
−
                <span class="sale-price">{{ product.compare_at_price_min | money }}</span>
+
      <div class="bundle-plus">+</div>
−
                {% endif %}
+
      {% endif %}
−
{{ product.price | money }}
+
      {% if group.bundle and product == group.products.last %}
−
              </div>
+
      <div class="bundle-plus">
−
    </div>
+
        <a href="{{ bundle.buy_link }}">{{ bundle.text }}</a>
−
</div>
+
      </div>
−
</a>
+
      {% endif %}
−
          {% if group.bundle and product == group.products.first %}
+
      {% endfor %}
−
          <div class="bundle-plus">+</div>
+
    </ul>
−
          {% endif %}
+
  </div>
−
          {% if group.bundle and product == group.products.last %}
+
  {% endfor %}
−
          <div class="bundle-plus">
 
−
            <a href="{{ bundle.buy_link }}">{{ bundle.text }}</a>
 
−
          </div>
 
−
          {% endif %}
 
−
  {% endfor %}
 
−
</ul>
 
−
  </div>
 
−
{% endfor %}
 
 
</div>
 
</div>
 
</source>
 
</source>

Revision as of 18:18, 10 October 2013

Basic Example (Textual 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.

Styled recommendations with CSS 3 animations

<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=297"