Shopify Liquid Examples - Revision history

Scott at 09:57, 27 March 2014

2014-03-27T09:57:47Z

Scott at 18:04, 23 October 2013

2013-10-23T18:04:11Z

Scott at 17:53, 23 October 2013

2013-10-23T17:53:51Z

Scott at 17:53, 23 October 2013

2013-10-23T17:53:22Z

Scott at 17:52, 23 October 2013

2013-10-23T17:52:16Z

Scott at 17:26, 23 October 2013

2013-10-23T17:26:27Z

Scott at 18:02, 16 October 2013

2013-10-16T18:02:38Z

Scott at 07:09, 12 October 2013

2013-10-12T07:09:37Z

Scott at 07:08, 12 October 2013

2013-10-12T07:08:49Z

Lucijan at 18:37, 10 October 2013

2013-10-10T18:37:32Z

@@ Line 38: / Line 38: @@
 <div id="recommendations">
    {% for group in groups %}
-  <div class="recommendations-group">
+    <div class="recommendations-group">
-  <h3>{{ group.label }}</h3>
+      <h3>{{ group.label }}</h3>
-    {% if group.bundle %}
+      {% if group.bundle %}
-    <div id="bundle">
+        <div id="bundle">
-      <img class="bundle-first" src="{{ group.products.first.featured_image | product_img_url: 'compact' }}" />
+          <img class="bundle-first"
-      <span class="bundle-plus">+</span>
+               src="{{ group.products.first.featured_image | product_img_url: 'compact' }}" />
-      <img class="bundle-last" src="{{ group.products.last.featured_image | product_img_url: 'compact' }}" />
+          <span class="bundle-plus">+</span>
-      <span class="bundle-label"><a href="{{ bundle.buy_link }}">{{ bundle.text }}</a></span>
+          <img class="bundle-last"
-    {% else %}
+               src="{{ group.products.last.featured_image | product_img_url: 'compact' }}" />
-      {% for product in group.products limit:10 %}
+          <span class="bundle-label"><a href="{{ bundle.buy_link }}">{{ bundle.text }}</a></span>
          </div>
-         <div class="title"><a href="{{ product.url }}">{{ product.title }}</a></div>
+      {% else %}
-        <div class="price">{{ product.price | money }}</div>
+         {% for product in group.products limit:5 %}
-      </div>
+          <div class="recommendations-product">
-      {% endfor %}
+            <div class="recommendations-product-image">
-    {% endif %}
+              <a href="{{ product.url }}">
-  </div>
+                <img src="{{ product.featured_image |  product_img_url: 'compact' }}">
    {% endfor %}
 </div>
 <style type="text/css" media="screen">
-  #recommendations h3, .recommendations-group {
+#recommendations h3, .recommendations-group {
      padding: 0.5em 0;
      clear: both;
-−
+}
-  .recommendations-group .recommendations-product {
+.recommendations-group .recommendations-product {
      display: inline-block;
      vertical-align: top;
      width: 200px;
      padding-bottom: 0.5em;
-−
+}
-  .recommendations-group .recommendations-product div {
+.recommendations-group .recommendations-product div {
      margin: 0.5em 0;
-−
+}
-  .recommendations-group .recommendations-product img, #bundle img {
+.recommendations-group .recommendations-product img, #bundle img {
      border: 10px solid #f6f6f6;
-−
+}
-  .recommendations-product-image {
+.recommendations-product-image {
      position: relative;
      bottom: 0px;
      height: 180px;
-−
+}
-  .recommendations-product-image img {
+.recommendations-product-image img {
      position: absolute;
      bottom: 0px;
-−
+}
-  #bundle > *{
+#bundle > *{
      vertical-align: middle;
      margin-bottom: 1em;
-−
+}
-  #bundle .bundle-plus {
+#bundle .bundle-plus {
      font-size: 3em;
-−
+}
-  #bundle .bundle-label {
+#bundle .bundle-label {
-	font-size: 1.5em;
+    font-size: 1.5em;
      display: inline-block;
-−
+}
-  #bundle .bundle-last {
+#bundle .bundle-last {
      margin-right: 0.5em;
-−
+}
 </style>
 </source>

@@ Line 1: / Line 1: @@
 Here are a few examples of custom styles that can be used in the Directed Edge custom style engine for Shopify.
 Also see our [[Shopify Liquid|variable reference]].
@@ Line 29: / Line 31: @@
 == Default ==
 <div class="shopify-custom-style">
 <source lang="xml">

@@ Line 31: / Line 31: @@
 <div class="shopify-custom-style">
 <source lang="xml">
 <style type="text/css" media="screen">
    #recommendations h3, .recommendations-group {
      padding: 0.5em 0;
+   }
-   .recommendations-group .product {
+   .recommendations-group .recommendations-product {
      display: inline-block;
      vertical-align: top;
@@ Line 41: / Line 67: @@
      padding-bottom: 0.5em;
+   }
-   .recommendations-group .product div {
+   .recommendations-group .recommendations-product div {
      margin: 0.5em 0;
+   }
-   .recommendations-group .product img, #bundle img {
+   .recommendations-group .recommendations-product img, #bundle img {
      border: 10px solid #f6f6f6;
+   }
    #bundle > *{
      vertical-align: middle;
+   }
    #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>

@@ Line 2: / Line 2: @@
 Also see our [[Shopify Liquid|variable reference]].
 == Default ==
@@ Line 62: / Line 87: @@
 </source>
 </div>
 == Stylized recommendations with CSS 3 animations ==

@@ Line 4: / Line 4: @@
 == Default ==
+<div class="shopify-custom-style">
 <source lang="xml">
 <style type="text/css" media="screen">
@@ Line 61: / Line 61: @@
 </div>
 </source>
 == 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 %}
@@ Line 82: / Line 84: @@
 {% 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]].
@@ Line 93: / Line 96: @@
 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">
 <style type="text/css">
@@ Line 208: / Line 211: @@
 </div>
 </source>

← Older revision		Revision as of 17:26, 23 October 2013
Line 1:		Line 1:
		+	Here are a few examples of custom styles that can be used in the Directed Edge custom style engine for Shopify.
		+
		+	Also see our [[Shopify Liquid\|variable reference]].
		+
	== Default ==		== Default ==

← Older revision		Revision as of 07:09, 12 October 2013
Line 1:		Line 1:
−	== Default ===	+	== Default ==

	<source lang="xml">		<source lang="xml">

← Older revision		Revision as of 07:08, 12 October 2013
Line 1:		Line 1:
		+	== Default ===
		+
		+	<source lang="xml">
		+	<style type="text/css" media="screen">
		+	#recommendations h3, .recommendations-group {
		+	padding: 0.5em 0;
		+	}
		+	.recommendations-group .product {
		+	display: inline-block;
		+	width: 200px;
		+	vertical-align: top;
		+	padding-bottom: 0.5em;
		+	}
		+	.recommendations-group .product div {
		+	margin: 0.5em 0;
		+	}
		+	.recommendations-group .product img {
		+	border: 10px solid #f6f6f6;
		+	}
		+	</style>
		+
		+	<div id="recommendations">
		+	{% for group in groups %}
		+	<div class="recommendations-group">
		+	<h3>{{ group.label }}</h3>
		+	{% if group.bundle %}
		+	<div id="bundle"><a href="{{ bundle.buy_link }}">{{ bundle.text }}</a></div>
		+	{% else %}
		+	{% for product in group.products limit:10 %}
		+	<div class="product">
		+	<a href="{{ product.url }}"><img src="{{ product.featured_image \| product_img_url: 'compact' }}"></a>
		+	<div class="title"><a href="{{ product.url }}">{{ product.title }}</a></div>
		+	<div class="price">{{ product.price \| money }}</div>
		+	</div>
		+	{% endfor %}
		+	{% endif %}
		+	</div>
		+	{% endfor %}
		+	</div>
		+	</source>
		+
	== Basic Example (Textual output) ==		== 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:		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:

← Older revision		Revision as of 18:37, 10 October 2013
Line 28:		Line 28:

	Note hover that: '''JavaScript code will be stripped out before rendering'''.<br>		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.	+	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.