Difference between revisions of "Shopify Liquid Examples"

From the Directed Edge Developer Base
Jump to: navigation, search
Line 21: Line 21:
  
 
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]].
 +
 +
== 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>

Revision as of 18:15, 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=296"