├── Add item to cart with the JavaScript Fetch API
    └── add-item-to-cart-with-fetch.js
├── Checkout liquid layout
    ├── README.md
    └── checkout.liquid
├── Create a media or press page
    ├── README.md
    └── snippet-press-grid.liquid
├── Create edit in admin button for current view
    ├── README.md
    ├── create-edit-button-for-current-view.js
    └── create-edit-button-for-current-view.min.js
├── Detect if a collection is published with Liquid
    ├── README.md
    └── is-collection-published.liquid.html
├── Detect search type used in searches
    ├── README.md
    └── show-search-type.liquid
├── Disable sorting by best seller
    ├── README.md
    └── collection.liquid
├── Dynamic pagination without alternate templates
    ├── README.md
    ├── dynamic-pagination-select.liquid
    ├── dynamic-pagination.js
    └── dynamic-pagination.liquid
├── Export a list of files from the Admin
    ├── README.md
    └── export-list-of-files-in-shopify.js
├── Get Shopify cart data with JSONP
    ├── README.md
    ├── cart-jsonp-jquery.js
    └── cart-jsonp-plain.js
├── Get a cart json response with compare at price
    ├── README.md
    └── cart.compare.liquid
├── Get articles in Liquid by their handle
    ├── README.md
    └── related-articles.liquid
├── Get cart token with Liquid
    ├── README.md
    └── get-cart-token.liquid
├── Get current domain name with Liquid
    ├── README.md
    └── request_host.liquid
├── Get querystring in Shopify Liquid
    ├── README.md
    └── querystrings.liquid
├── Get shipping estimate on Shopify product page
    ├── README.md
    └── get-estimate.js
├── Get total stock value
    ├── README.md
    ├── get-total-stock-value.js
    └── get-total-stock-value.min.js
├── LICENSE
├── Multiple 404 caches
    ├── 404.liquid
    └── README.md
├── Multiple shopify reviews on one page
    ├── README.md
    └── get-reviews.liquid
├── README.md
├── Remove map from order status page
    └── README.md
├── Search by SKU
    ├── README.md
    └── search.sku.liquid
├── Shopify Mailchimp RSS feed
    ├── README.md
    └── blog.feed.liquid
├── Shopify Scripts
    ├── Line Items
    │   ├── email-domain-discount.rb
    │   ├── limit-line-item-quantity.rb
    │   └── reject-discount-codes.rb
    ├── Payments
    │   └── remove-gateway-on-billing-country.rb
    └── README.md
├── Shopify persitent cart without apps
    ├── README.md
    └── persistent-cart.js.liquid
├── Sort Shopify collection by inventory count
    ├── README.md
    └── sort-shopify-collection-products-by-inventory.liquid
├── Sort Shopify collection by metafield
    ├── README.md
    ├── sort-shopify-collection-products-by-metafield-value-commentless.liquid
    └── sort-shopify-collection-products-by-metafield-value.liquid
├── Starts with string check in Shopify Liquid
    └── starts-with-example.liquid
├── Translate date strings into other languages
    ├── README.md
    └── date-translate.liquid
├── Use articles to shedule theme updates
    ├── README.md
    └── show-collection-based-on-last-article.liquid
└── Use variant image on Gift Card template
    ├── README.md
    ├── capture-image.liquid
    └── gift_card.liquid


/Add item to cart with the JavaScript Fetch API/add-item-to-cart-with-fetch.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | 
 3 | Example code showing how to add an item to 
 4 | the cart in Shopify using the Fetch API. 
 5 | 
 6 | The important line is where we add the 
 7 | X-Requested-With header. Without that the 
 8 | fetch call will fail with a bad request error.
 9 | 
10 | */
11 | 
12 | 
13 | (function(){
14 | 
15 |   var addData = {
16 |     'id':21373873027, /* for testing, change this to a variant ID on your store */
17 |     'quantity':1
18 |   };
19 | 
20 |   fetch('/cart/add.js', {
21 |     body: JSON.stringify(addData),
22 |     credentials: 'same-origin',
23 |     headers: {
24 |       'Content-Type': 'application/json',
25 |       'X-Requested-With':'xmlhttprequest' /* XMLHttpRequest is ok too, it's case insensitive */
26 |     },
27 |     method: 'POST'
28 |   }).then(function(response) {
29 |     return response.json();
30 |   }).then(function(json) {
31 |     /* we have JSON */
32 |     console.log(json)
33 |   }).catch(function(err) {
34 |     /* uh oh, we have error. */
35 |     console.error(err)
36 |   });
37 |   
38 | })();
39 | 


--------------------------------------------------------------------------------
/Checkout liquid layout/README.md:
--------------------------------------------------------------------------------
1 | # Shopify Checkout Liquid Layout
2 | 
3 | The checkout.liquid layout is a file used by Shopify Plus merchants for added checkout customisations. If you're a developer that is curious about the contents of the file, here it is. You'll note that it's a small file as a lot of the content is generated server side.
4 | 
5 | ### Notes
6 | - Adding this file to a non-plus store won't enable it. 
7 | - Plus merchants need to have the feature enabled by their Merchant Success Manager or Launch Engineer before the file will be used.
8 | 


--------------------------------------------------------------------------------
/Checkout liquid layout/checkout.liquid:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="{{ locale }}" dir="{{ direction }}" class="{{ checkout_html_classes }}">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0, user-scalable=0">
 7 |     <meta name="referrer" content="origin">
 8 | 
 9 |     <title>{{ page_title }}</title>
10 | 
11 |     {{ content_for_header }}
12 | 
13 |     {{ checkout_stylesheets }}
14 |     {{ checkout_scripts }}
15 |   </head>
16 |   <body>
17 |     {{ skip_to_content_link }}
18 | 
19 |     <header class="banner" data-header role="banner">
20 |       <div class="wrap">
21 |         {{ content_for_logo }}
22 |       </div>
23 |     </header>
24 | 
25 |     {{ order_summary_toggle }}
26 |     <div class="content" data-content>
27 |       <div class="wrap">
28 |         <div class="main">
29 |           <header class="main__header" role="banner">
30 |             {{ content_for_logo }}
31 |             {{ breadcrumb }}
32 |             {{ alternative_payment_methods }}
33 |           </header>
34 |           <main class="main__content" role="main">
35 |             {{ content_for_layout }}
36 |           </main>
37 |           <footer class="main__footer" role="contentinfo">
38 |             {{ content_for_footer }}
39 |           </footer>
40 |         </div>
41 |         <aside class="sidebar" role="complementary">
42 |           <div class="sidebar__header">
43 |             {{ content_for_logo }}
44 |           </div>
45 |           <div class="sidebar__content">
46 |             {{ content_for_order_summary }}
47 |           </div>
48 |         </aside>
49 |       </div>
50 |     </div>
51 | 
52 |     {{ tracking_code }}
53 |   </body>
54 | </html>
55 | 


--------------------------------------------------------------------------------
/Create a media or press page/README.md:
--------------------------------------------------------------------------------
1 | # Shopify press page
2 | A great way to showcase your press appearances is with a social proof page showing those publications you're featured in. Dedicated blogs make it easy to feature collections of publications, so let's explore how.
3 | Relates to the [How to create a press page](http://freakdesign.com.au/blogs/news/how-to-create-a-press-page-in-shopify) post on the freakdesign blog.


--------------------------------------------------------------------------------
/Create a media or press page/snippet-press-grid.liquid:
--------------------------------------------------------------------------------
 1 | {% comment %}
 2 | /*
 3 |  * Simple press grid snippet
 4 |  *
 5 |  * Copyright (c) 2016 Jason Bowman (jason@freakdesign.com.au)
 6 |  * Licensed under the MIT license:
 7 |  * http://www.opensource.org/licenses/mit-license.php
 8 |  *
 9 |  *
10 |  */ 
11 | {% endcomment %}
12 | {% for i in (1..1) %}
13 | 
14 |   {% comment %}
15 |   	Define the blog that contains all our press posts
16 |   {% endcomment %}
17 |   {% assign pressHandle = 'press' %}
18 | 
19 |   {% comment %}
20 |   	Check to make sure the blog has posts before going any further. If there are none found, show a simple message.
21 |   {% endcomment %}
22 |   {% if blogs[pressHandle].articles.size < 1 %}
23 |     <p>No publications found. Check back soon</p>
24 |     {% break %}
25 |   {% endif %}
26 | 
27 |   {% comment %}
28 |   	The Variables below should be added to Theme Settings if you are building this into a theme for a client.
29 |   {% endcomment %}
30 |   {% assign showPressTitle = true %}
31 | 
32 |   {% comment %} 
33 |     Show the plublished date for the article? Be sure to change the date to be the actual data of the press publication - not when you decided to publish the post on Shopify. 
34 |   {% endcomment %}
35 |   {% assign showPressDate = true %}
36 | 
37 |   {% comment %} 
38 |     Show the article excerpt (if it exists)?
39 |   {% endcomment %}
40 |   {% assign showPressExcerpt = false %}
41 | 
42 |   {% comment %} 
43 |     Add a link to the article?
44 |   {% endcomment %}
45 |   {% assign showPressLink = false %}
46 | 
47 |   {% comment %} 
48 |     Define the image size. Change this to whatever size makes sense for your images.
49 |     https://help.shopify.com/themes/liquid/filters/url-filters#img_url
50 |   {% endcomment %}
51 |   {% assign pressImageSize = '370x480' %}
52 | 
53 |   {% comment %}
54 |   	Basic styles for the example. You'll want to add your styles to the main stylesheet.
55 |   {% endcomment %}
56 |   <style>
57 |     .press-grid { margin-top: 2em }
58 |     .press-grid img { width:100%; }
59 |     .press-grid article { margin-bottom: 2em }
60 |     .press-grid h1 { font-size: 1em;margin: .1em 0 0;line-height: 1.1; }
61 |     .press-grid figure { margin:0; }
62 |     .press-grid .meta { font-size: .8em;text-transform: uppercase; }
63 |     .press-grid .excerpt { margin-top: .5em }
64 |   </style>
65 | 
66 |   {% comment %}
67 | 	  The grid structure used below is based off the one in the Venture theme. 
68 | 	  You may need to adapt the code to match your grid.
69 |   {% endcomment %}
70 |   <section class="press-grid grid">
71 |     {% for article in blogs[pressHandle].articles limit:50 %}
72 |       {% assign gridSize = 'medium-up--one-third' %}
73 |       <article class="press-grid-item grid__item {{ gridSize }}">
74 |         {% if showPressLink %}<a href="{{ article.url }}">{% endif %}
75 |         <figure>
76 |           <img alt="{{ article.title }}" src="{{ article.image.src | img_url: pressImageSize, crop: 'center' }}" />
77 |         </figure>
78 |         {% if showPressTitle %}
79 |         	<h1>{{ article.title }}</h1>
80 |         {% endif %}
81 |         {% if showPressDate %}
82 |           <div class="meta">{{ article.published_at | date: "%a, %b %d, %y" }}</div>
83 |         {% endif %}
84 |         {% if showPressExcerpt and article.excerpt != blank %}
85 |           {% comment %} 
86 |             You could also use article.excerpt_or_content
87 |             https://help.shopify.com/themes/liquid/objects/article#article-excerpt_or_content
88 |           {% endcomment %}
89 |         	<div class="excerpt">{{ article.excerpt }}</div>
90 |         {% endif %}
91 |         {% if showPressLink %}</a>{% endif %}
92 |       </article>
93 |     {% endfor %}
94 |   </section>
95 | 
96 | {% endfor %}


--------------------------------------------------------------------------------
/Create edit in admin button for current view/README.md:
--------------------------------------------------------------------------------
1 | # Create view in Admin button for current view
2 | Adds a quick button to the page to jump to the currently viewed resource. 
3 | 
4 | 
5 | This version opts to avoid any Liquid edits so can be handled in JavaScript alone. The drawback to this is that Articles can be harder to capture so we fallback to the common tracking scripts in place. If the theme removes `content_for_header` or the tracking object changes, this script will no longer be able to jump to articles. Adding the ID to the page as a global within the theme (along with the edits to this script) could overcome that.
6 | 
7 | This is related to [this blog post](http://freakdesign.com.au/blogs/news/15572921-add-an-edit-button-on-shopify-storefronts).


--------------------------------------------------------------------------------
/Create edit in admin button for current view/create-edit-button-for-current-view.js:
--------------------------------------------------------------------------------
 1 | (function(){
 2 | 
 3 |   /* check for the admin bar. Remove the check if you want to show things regardless */
 4 |   if(document.getElementById('admin_bar_iframe')){ return }
 5 | 
 6 |   /* basic translation */
 7 |   var lang = {
 8 |     'no':'Sorry, that can not be run here...',
 9 |     'not_json':'That does not look like json...'
10 |   };
11 | 
12 |   /* json test */
13 |   var isJson = function(a) {
14 |     try { JSON.parse(a) } catch (e) { return false }
15 |     return true;
16 |   };
17 | 
18 |   /* shortcut fn for adding warning messages to the console */
19 |   var nope = function(a){
20 |     if(typeof a === 'undefined'){ var a = lang.no }
21 |     console.warn(a)
22 |     return false
23 |   }
24 | 
25 |   /* build the json path */
26 |   var getJsonPath = function(){
27 |     return [location.protocol, '//', location.host,location.pathname,'.json'].join('')
28 |   };
29 | 
30 |   /* get the json */
31 |   var getJson = function(u,c){
32 |     var req = new XMLHttpRequest();
33 |     req.open('GET', u, false); 
34 |     req.onreadystatechange = function() {
35 |       if (req.readyState == 4 && req.status == 200) {
36 |         if(typeof c === 'function'){
37 |           if(!isJson(req.responseText)){ return nope(lang.not_json) }
38 |           var json = JSON.parse(req.responseText);
39 |           c(json,Object.keys(json)[0]);
40 |         }
41 |       }
42 |     };
43 |     req.send();
44 |   };
45 | 
46 |   /* create the button and add the event listeners */
47 |   var button = document.createElement('button');
48 |   button.id = 'admin_bar_iframe';
49 |   button.style = 'position: fixed;top: 70px;right: 1em;background-color: rgb(16, 206, 223);padding: .75em 1em;color: #FFF;cursor: pointer;border:none;z-index:99999';
50 |   button.innerHTML = 'Edit This';
51 |   button.addEventListener('click',function(e){
52 |     e.target.blur();
53 |     if(location.pathname === '/'){ return nope() }
54 |     if(location.pathname.split('/')[1] === 'blogs'){
55 |       /* fallback to the tracking script data, should it exist */
56 |       if(typeof __st !== 'undefined' && __st.s){
57 |         location.href = [location.protocol, '//', location.host,'/admin/articles/',__st.s.split('-')[1]].join('');
58 |         return false;
59 |       }
60 |       return nope()
61 |     }
62 |     getJson(getJsonPath(),function(a,b){
63 |       location.href = [location.protocol, '//', location.host,'/admin/',b+'s/',a[b].id].join('');
64 |     })
65 |     return false;
66 |   });
67 |   /* add the button to the DOM */
68 |   document.getElementsByTagName('body')[0].appendChild(button);
69 | 
70 | })()


--------------------------------------------------------------------------------
/Create edit in admin button for current view/create-edit-button-for-current-view.min.js:
--------------------------------------------------------------------------------
1 | (function(){if(!document.getElementById("admin_bar_iframe")){var d=function(a){"undefined"===typeof a&&(a="Sorry, that can not be run here...");console.warn(a);return!1},e=function(a,c){var b=new XMLHttpRequest;b.open("GET",a,!1);b.onreadystatechange=function(){if(4==b.readyState&&200==b.status&&"function"===typeof c){var a;a:{try{JSON.parse(b.responseText)}catch(e){a=!1;break a}a=!0}if(!a)return d("That does not look like json...");a=JSON.parse(b.responseText);c(a,Object.keys(a)[0])}};b.send()},
2 | c=document.createElement("button");c.id="admin_bar_iframe";c.style="position: fixed;top: 70px;right: 1em;background-color: rgb(16, 206, 223);padding: .75em 1em;color: #FFF;cursor: pointer;border:none;z-index:99999";c.innerHTML="Edit This";c.addEventListener("click",function(a){a.target.blur();if("/"===location.pathname)return d();if("blogs"===location.pathname.split("/")[1])return"undefined"!==typeof __st&&__st.s?(location.href=[location.protocol,"//",location.host,"/admin/articles/",__st.s.split("-")[1]].join(""),
3 | !1):d();e([location.protocol,"//",location.host,location.pathname,".json"].join(""),function(a,b){location.href=[location.protocol,"//",location.host,"/admin/",b+"s/",a[b].id].join("")});return!1});document.getElementsByTagName("body")[0].appendChild(c)}})();


--------------------------------------------------------------------------------
/Detect if a collection is published with Liquid/README.md:
--------------------------------------------------------------------------------
1 | # Detect if a collection is published
2 | Quick snippet to test a collections publish status. Really only useful when you're using collections in a menu (linklist)
3 | 
4 | This is related to [this blog post](http://freakdesign.com.au/blogs/news/detect-if-a-collection-is-published-with-liquid).


--------------------------------------------------------------------------------
/Detect if a collection is published with Liquid/is-collection-published.liquid.html:
--------------------------------------------------------------------------------
1 | {%- for link in linklists.test-this.links -%}
2 |   {%- assign collection = link.object -%}
3 |   {%- if collection.published_at == blank -%}
4 |     <p>{{ collection.title }} is not published</p>
5 |   {%- else -%}
6 |     <p>{{ collection.title }} is published</p>
7 |   {%- endif %}
8 | {%- endfor -%}


--------------------------------------------------------------------------------
/Detect search type used in searches/README.md:
--------------------------------------------------------------------------------
 1 | # Detect the search type in searches with Liquid
 2 | Simple code to parse content from the `canonical_url` to grab the search type used.
 3 | 
 4 | Relates to [Detect Search Type](http://freakdesign.com.au/blogs/news/detect-the-search-type-used-in-a-shopify-search-with-liquid) post on the freakdesign blog. 
 5 | 
 6 | 
 7 | ### Basic setup
 8 | - Add the code as is or via a snippet to the search template (search.liquid)
 9 | - Modify as per your needs
10 | - done...


--------------------------------------------------------------------------------
/Detect search type used in searches/show-search-type.liquid:
--------------------------------------------------------------------------------
 1 | {%- comment -%}
 2 | 
 3 |   Liquid by Jason @ freakdesign.
 4 |   Questions? Ping me on twitter: @freakdesign
 5 | 
 6 |   Relates to blog post:
 7 |   http://freakdesign.com.au/blogs/news/detect-the-search-type-used-in-a-shopify-search-with-liquid
 8 | 
 9 | {%- endcomment -%}
10 | {%- capture url %}{{ canonical_url }}{% endcapture -%}
11 | {%- if url contains 'type=' -%}
12 |   {%- assign allowedTypes = 'product,page,article' | split:',' -%}
13 |   {%- assign searchType = url | split:'type=' | last | split:'&' | first | strip -%}
14 |   {%- if allowedTypes contains searchType -%}
15 |     This search type was for {{ searchType }}s
16 |   {%- endif -%}
17 | {%- endif -%}


--------------------------------------------------------------------------------
/Disable sorting by best seller/README.md:
--------------------------------------------------------------------------------
1 | # Disable collection sorting by best seller
2 | 
3 | Refers to the [freakdesign blog post](https://freakdesign.com.au/blogs/news/disable-sort-by-best-selling-on-shopify).
4 | 
5 | Shopify allows you to dynamically adjust the order of a collection using the sort_by querystring in the url. Let's explore some simple code that makes it harder for a customer to use that sorting querystring to see your best sellers.
6 | 


--------------------------------------------------------------------------------
/Disable sorting by best seller/collection.liquid:
--------------------------------------------------------------------------------
1 | {% if collection.sort_by == 'best-selling' %}
2 |   Nope.
3 | {% else %}
4 |   <!-- your original collection.liquid code in here -->
5 | {% endif %}


--------------------------------------------------------------------------------
/Dynamic pagination without alternate templates/README.md:
--------------------------------------------------------------------------------
 1 | # Dynamic Shopify pagination without alternate or multiple templates
 2 | When wanting to view Shopify collections with varied amounts of products per page (aka, pagination) the usual method involves creating a series of alternate templates. Let's explore an idea that ditches the multiples, and just uses one.
 3 | 
 4 | [Blog Post](http://freakdesign.com.au/blogs/news/167340935-paginate-a-shopify-collection-by-dynamic-amounts-without-multiple-templates)
 5 | 
 6 | [Demo](https://jasons-experiments.myshopify.com/collections/all)
 7 | 
 8 | 
 9 | ##### dynamic-pagination-select.liquid:
10 | Example HTML / Liquid for the `<select>` menu.
11 | 
12 | ##### dynamic-pagination.liquid:
13 | Example code that applies the cart attribute as a cart attribute
14 | 
15 | ##### dynamic-pagination.js:
16 | Example JavaScript showing how the AJAX API can be used to store a cart attribute


--------------------------------------------------------------------------------
/Dynamic pagination without alternate templates/dynamic-pagination-select.liquid:
--------------------------------------------------------------------------------
 1 | {%- comment -%}
 2 | 
 3 |   The HTML / Liquid section for the <select> menu.
 4 |   You'll add this into your theme in a place that makes sense.
 5 | 
 6 |   Relates to the blog post here:
 7 |   http://freakdesign.com.au/blogs/news/167340935-paginate-a-shopify-collection-by-dynamic-amounts-without-multiple-templates
 8 | 
 9 | {%- endcomment -%}
10 | 
11 | {%- comment -%} Make a label (for accessibility) {%- endcomment -%}
12 | <label for="paginateBy">Paginate By</label>
13 | <select name="paginateBy" id="paginateBy">
14 |   {%- comment -%}
15 | 
16 |     We will support pagination from 1 all the way to 50.
17 |     If you wanted smaller ranges you could do something like this:
18 | 
19 |     {%- assign paginationAmounts = '5,10,15,20,25' | split:',' -%}
20 |     {%- for i in paginationAmounts -%}
21 |        ...
22 |     {%- endfor -%}
23 | 
24 |   {%- endcomment -%}
25 |   {% for i in (1..50) %}
26 |     {% assign v = i | append:'' %}
27 |     <option value="{{ v }}"{% if cart.attributes.pagination != blank and cart.attributes.pagination %}{% if cart.attributes.pagination == v %} selected{% endif %}{% else %}{% if i == 40 %} selected{% endif %}{% endif %}>{{ i }} per page</option>
28 |   {% endfor %}
29 | </select>


--------------------------------------------------------------------------------
/Dynamic pagination without alternate templates/dynamic-pagination.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | 
 3 |   This is not a complete code sample ready to copy and paste so you will need to be ready to adapt this to your own theme.
 4 |   My example store uses Venture as the base so this is what this code is tailored for.
 5 | 
 6 |   Relates to the blog post here:
 7 |   http://freakdesign.com.au/blogs/news/167340935-paginate-a-shopify-collection-by-dynamic-amounts-without-multiple-templates
 8 | 
 9 | */
10 | 
11 | /* Grab the <select> element, and cache it should it be needed later */
12 | theme.cache.paginateDropdown = $('#paginateBy');
13 | 
14 | /* Bind a change event to the dropdown */
15 | theme.cache.paginateDropdown.on('change', function(){
16 | 
17 |   /* Get the current value. Some value validation could be added here (but we don't) */
18 |   var val = $(this).val();
19 | 
20 |   /* Send the value as a cart attribute via the AJAX API */
21 |   $.ajax({
22 |     type: "POST",
23 |     url: '/cart.js',
24 |     data: {"attributes[pagination]": val}, /* We are using an attribute named "pagination" */
25 |     success: function(d){
26 |       /* 
27 | 
28 |       On sucess, reload the page.  
29 | 
30 |       Warning: If you have scripts on the page that auto trigger the change even the page may reload forever.
31 |       If you do, be sure to add code to account for that.
32 | 
33 |       */
34 |       window.location.reload(); 
35 |     },
36 |     dataType: 'json'
37 |   });
38 | });


--------------------------------------------------------------------------------
/Dynamic pagination without alternate templates/dynamic-pagination.liquid:
--------------------------------------------------------------------------------
 1 | {%- comment -%}
 2 | 
 3 |   Relates to the blog post here:
 4 |   http://freakdesign.com.au/blogs/news/167340935-paginate-a-shopify-collection-by-dynamic-amounts-without-multiple-templates
 5 | 
 6 | {%- endcomment -%}
 7 | 
 8 | {%- comment -%} Set the default pagination amount. You may want to hard code this in or use a theme setting. For simplicity we are just hard coding it. {%- endcomment -%}
 9 | {%- assign paginationAmount = 40 -%}
10 | 
11 | {%- comment -%} Check to see if we have a pagination cart attribute already set {%- endcomment -%}
12 | {%- if cart.attributes.pagination != blank -%}
13 | 
14 |   {%- comment -%} If we do, use this value for the pagination instead {%- endcomment -%}
15 |   {%- assign paginationAmount = cart.attributes.pagination | default:40 | abs -%}
16 | 
17 | {%- endif -%}
18 | {%- paginate collection.products by paginationAmount -%}
19 |   ...
20 | {%- endpaginate -%}


--------------------------------------------------------------------------------
/Export a list of files from the Admin/README.md:
--------------------------------------------------------------------------------
1 | # Get a list of files saved into Shopify Files (in the Admin)
2 | 
3 | Relates to the blog post on [exporting a file list from the Admin](https://freakdesign.com.au/blogs/news/113610119-export-a-list-of-all-files-in-the-shopify-admin). 
4 | 


--------------------------------------------------------------------------------
/Export a list of files from the Admin/export-list-of-files-in-shopify.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | 
 3 | Get a list of all files within the Shopify Admin (/admin/settings/files)
 4 | This needs to be run within the Chrome Browser. Paste into the debug console and run...
 5 | 
 6 | A text file will download when done.
 7 | 
 8 | */
 9 | (function(){
10 | 	var debug = false; // enable logging
11 | 	var fileArray = [];
12 | 	var saveList = function(fileArray){
13 | 		console.log('============ DONE. DOWNLOAD FILE ============');
14 | 		var a = document.createElement("a");
15 | 		document.body.appendChild(a);
16 | 		a.style = "display: none";
17 | 		var blob = new Blob(["\ufeff",fileArray],{type:'text/plain'}),
18 | 		link = window.URL.createObjectURL(blob);
19 | 		a.href = link;
20 | 		a.download = 'shopify-files-list' + '.txt';
21 | 		a.click();
22 | 		window.URL.revokeObjectURL(link);
23 | 	};
24 | 	var getFiles = function(url){
25 | 		if(typeof(url) === 'undefined'){ var url = '/admin/settings/files?limit=250' }
26 | 		$.ajax({
27 | 			url: url,
28 | 			success: function(d){
29 | 
30 | 				var html = $(d);
31 | 				var fields = html.find('.next-input.next-input--readonly');
32 | 				for (var i = 0; i < fields.length; i++) {
33 | 					if(debug){ console.log('Adding ' + fields[i].value) }
34 | 					fileArray.push(fields[i].value);
35 | 				};
36 | 
37 | 				var next = html.find('#pagination-links li:last a');
38 | 				if(!next.length || next.hasClass('disabled')){
39 | 					if(fileArray.length){ saveList(fileArray) }
40 | 					return;
41 | 				}
42 | 
43 | 				var nextUrl = next[0].href;
44 | 				console.log(nextUrl)
45 | 
46 | 				if(nextUrl.indexOf('direction=next')>-1){
47 | 					if(debug){ console.log('Fields grabbed. Next page now...') }
48 | 					getFiles(nextUrl);
49 | 				}else{
50 | 					saveList(fileArray);
51 | 				}
52 | 			}
53 | 		});
54 | 	}
55 | 	getFiles();
56 | })();
57 | 


--------------------------------------------------------------------------------
/Get Shopify cart data with JSONP/README.md:
--------------------------------------------------------------------------------
 1 | # Get  Shopify cart contents via JSONP
 2 | If you're someone that has a Shopify site but runs an offsite blog (like wordpress) you'll probably want to be able to show the cart contents on that blog. The usual AJAX API calls won't work since you'll hit CORS errors but JSONP comes to the rescue. 
 3 | 
 4 | 
 5 | Relates to [Shopify cart contents with JSONP](https://freakdesign.com.au/blogs/news/get-cart-contents-via-jsonp) post on the freakdesign blog. 
 6 | 
 7 | 
 8 | ### Two files
 9 | - vanilla JS version
10 | - jQuery version


--------------------------------------------------------------------------------
/Get Shopify cart data with JSONP/cart-jsonp-jquery.js:
--------------------------------------------------------------------------------
 1 | $(function() {
 2 |   $.ajax({ 
 3 |     dataType:'jsonp', 
 4 |     url: 'https://jasons-experiments.myshopify.com/cart.json?callback=?', 
 5 |     success: function(d){ 
 6 |       /* do something with the data. In this example we are just loggin it */
 7 |       console.log(d) 
 8 |     } 
 9 |   });
10 | });


--------------------------------------------------------------------------------
/Get Shopify cart data with JSONP/cart-jsonp-plain.js:
--------------------------------------------------------------------------------
1 | function getCartData(data){
2 |   /* do something with the data. In this example we are just loggin it */
3 |   console.log(data)
4 | }
5 | 
6 | var script = document.createElement('script');
7 | script.src = 'https://jasons-experiments.myshopify.com/cart.json?callback=getCartData'
8 | document.getElementsByTagName('head')[0].appendChild(script);


--------------------------------------------------------------------------------
/Get a cart json response with compare at price/README.md:
--------------------------------------------------------------------------------
 1 | # Get a cart json response with compare at price
 2 | 
 3 | The default Shopify AJAX cart json doesn't include the compare at price. If you really need this, we can create an alternate template and output a json string with that data in place. This will be a quick and dirty guide to serve as inspiration. 
 4 | 
 5 | Base concept is to create a new alternate tempalte in the theme. I've called this one cart.compare.liquid. Feel free to change _compare_ to whatever you like but make sure you also use the same word in the link (seen below).
 6 | 
 7 | At the time of posting [this item](https://jasons-experiments.myshopify.com/products/basic-tie) had a compare at price set:
 8 | 
 9 | And to view the alternate template on a cart afterwards use the ?view= parameter. [Example](https://jasons-experiments.myshopify.com/cart?view=compare).
10 | 
11 | 


--------------------------------------------------------------------------------
/Get a cart json response with compare at price/cart.compare.liquid:
--------------------------------------------------------------------------------
 1 | {%- layout none -%}
 2 | {%- assign cartJson = cart | json -%}
 3 | {%- assign cartToken = cartJson | split:'token":"' | last | split:'"' | first | json -%}
 4 | {
 5 | 	"token": {{ cartToken }},
 6 | 	"note": {{ cart.note | json }},
 7 | 	"attributes": {{ cart.attributes | json }},
 8 | 	"original_total_price": {{ cart.original_total_price | json }},
 9 | 	"total_price": {{ cart.total_price | json }},
10 | 	"total_discount": {{ cart.total_discount | json }},
11 | 	"total_weight": {{ cart.total_weight | json }},
12 | 	"item_count": {{ cart.item_count | json }},
13 | 	"items": [
14 | 		{%- for item in cart.items -%}
15 | 		{
16 | 		"id": {{ item.id | json }},
17 | 		"properties": {
18 | 			{%- for prop in item.properties -%}
19 | 			{{ prop | first | json }}:{{ prop | last | json }}{% unless forloop.last %},{% endunless %}
20 | 			{%- endfor %}
21 | 		},
22 | 		"quantity": {{ item.quantity | json }},
23 | 		"variant_id": {{ item.variant_id | json }},
24 | 		"key": {{ item.key | json }},
25 | 		"title": {{ item.title | json }},
26 | 		"compare_at_price": {{ item.variant.compare_at_price | json }},
27 | 		"price": {{ item.price | json }},
28 | 		"original_price": {{ item.original_price | json }},
29 | 		"discounted_price": {{ item.line_price | json }},
30 | 		"line_price": {{ item.line_price | json }},
31 | 		"original_line_price": {{ item.original_line_price | json }},
32 | 		"total_discount": {{ item.total_discount | json }},
33 | 		"discounts": {{ item.discounts | json }},
34 | 		"sku": {{ item.sku | json }},
35 | 		"grams": {{ item.grams | json }},
36 | 		"vendor": {{ item.vendor | json }},
37 | 		"taxable": {{ item.taxable | json }},
38 | 		"product_id": {{ item.product_id | json }},
39 | 		"gift_card": {{ item.gift_card | json }},
40 | 		"url": {{ item.url | json }},
41 | 		"image": {{ item.variant.image | json }},
42 | 		"handle": {{ item.product.handle | json }},
43 | 		"requires_shipping": {{ item.requires_shipping | json }},
44 | 		"product_type": {{ item.product.type | json }},
45 | 		"product_title": {{ item.product.title | json }},
46 | 		"product_description": {{ item.product.description | json }},
47 | 		"variant_title": {{ item.variant.title | json }},
48 | 		"variant_options": {{ item.variant.options | json }}
49 | 		}{% unless forloop.last %},{% endunless %}
50 | 		{%- endfor -%}
51 | 	],
52 | 	"currency": {{ cart.currency.iso_code | json }},
53 | 	"items_subtotal_price": {{ cart.items_subtotal_price | json }},
54 | 	"cart_level_discount_applications": {{ cart.cart_level_discount_applications | json }}
55 | }


--------------------------------------------------------------------------------
/Get articles in Liquid by their handle/README.md:
--------------------------------------------------------------------------------
1 | # Get articles in Shopify Liquid by their handle
2 | Very simple example showing how `articles` object can be used to grab specific articles in Liquid. 
3 | 
4 | Relates to the blog post on [Getting domain name with request.host](https://freakdesign.com.au/blogs/news/add-specific-blog-posts-to-a-shopify-page-with-liquid). Also see the [Liquid docs on the articles object](https://help.shopify.com/themes/liquid/objects#articles) for more info. 
5 | 


--------------------------------------------------------------------------------
/Get articles in Liquid by their handle/related-articles.liquid:
--------------------------------------------------------------------------------
 1 | {%- comment -%}
 2 | 
 3 |   Grab some article handles from a metafield.
 4 |   Loop over the handles, showing the article title on the page.
 5 | 
 6 |   For this example the metafield is stored on another article:
 7 |   Namespace: related
 8 |   Key: articles
 9 |   Value: (comma seperated string)
10 | 
11 | {%- endcomment -%}
12 | 
13 | {%- if article.metafields.related.articles != blank -%}
14 |   {%- assign relatedArticleArray = article.metafields.related.articles | split:',' -%}
15 |   
16 |   <div class="article-grid">
17 |   {%- for relatedArticleValue in relatedArticleArray -%}
18 | 
19 |     {%- assign relatedArticleHandle = relatedArticleValue | strip -%}
20 |     {%- assign a = articles[relatedArticleHandle] -%}
21 |     {%- if a.title == blank -%}{% continue %}{%- endif -%}
22 | 
23 |     <div>{{ a.title }}</div>
24 | 
25 |   {%- endfor -%}
26 |   </div>       
27 | 
28 | {%- endif -%}


--------------------------------------------------------------------------------
/Get cart token with Liquid/README.md:
--------------------------------------------------------------------------------
1 | # Get cart token with Liquid
2 | 
3 | Refers to the [freakdesign blog post](https://freakdesign.com.au/blogs/news/how-to-get-the-shopify-cart-token-property-in-liquid).
4 | 
5 | Shopify doesn't let you grab the token value directly in Liquid, but with a couple of extra steps you can.
6 | 


--------------------------------------------------------------------------------
/Get cart token with Liquid/get-cart-token.liquid:
--------------------------------------------------------------------------------
1 | {%- assign cartJson = cart | json -%}
2 | {%- assign cartToken = cartJson | split:'token":"' | last | split:'"' | first -%}
3 | 
4 | My cart token is {{ cartToken }}.


--------------------------------------------------------------------------------
/Get current domain name with Liquid/README.md:
--------------------------------------------------------------------------------
1 | # Get current domain name in Shopify using Liquid
2 | Very simple example showing how `request.host` can be used to show a different banner image. You can take this further to show custom text, collections, layouts, etc.
3 | 
4 | Relates to the blog post on [Getting domain name with request.host](https://freakdesign.com.au/blogs/news/get-the-current-domain-being-used-with-liquid). Also see the [Liquid docs on request.host](https://help.shopify.com/themes/liquid/objects#request) for more info. 
5 | 


--------------------------------------------------------------------------------
/Get current domain name with Liquid/request_host.liquid:
--------------------------------------------------------------------------------
 1 | {%- comment -%}
 2 | 
 3 | Very simple example showing how request.host can be used to show
 4 | a different banner image. You can take this further to show custom
 5 | text, collections, navigation, layouts, etc.
 6 | 
 7 | {%- endcomment -%}
 8 | 
 9 | {%- assign banner = "banner-default.jpg" -%}
10 | {%- if request.host == 'freakdesign.com.au' -%}
11 | 	{%- assign banner = "banner-au.jpg" -%}
12 | {%- elsif request.host == 'freakdesign.com' -%}
13 | 	{%- assign banner = "banner-com.jpg" -%}
14 | {%- endif -%}
15 | <img src="{{ banner | asset_url }}" />


--------------------------------------------------------------------------------
/Get querystring in Shopify Liquid/README.md:
--------------------------------------------------------------------------------
 1 | # Get url querystring values with Shopify Liquid
 2 | Simple code to parse content from the `content_for_header` to grab querystring values. Do note that this code relies entirely on the contents in `content_for_header`. If the contents change in the future it's possible this code will no longer work. 
 3 | 
 4 | ## Use this on production sites at your own risk.
 5 | 
 6 | ### Since the output of a page is cached on Shopify side be very aware that showing hidden or locked content with this method can expose it to others. It's not in any sense supposed to be used on a production site - so dont.
 7 | 
 8 | 
 9 | Relates to [Shopify Liquid Querystring](http://freakdesign.com.au/blogs/news/get-the-url-querystring-values-with-liquid-in-shopify) post on the freakdesign blog. Also see [live example](https://jasons-experiments.myshopify.com/collections/all/products/3-4-sleeve-kimono-dress-coral-1?ref=freakdesign&cache=false).
10 | 
11 | 
12 | ### Basic setup
13 | - Add the code as is or via a snippet to a template file (such as product.liquid)
14 | - Modify as per your needs
15 | - done...


--------------------------------------------------------------------------------
/Get querystring in Shopify Liquid/querystrings.liquid:
--------------------------------------------------------------------------------
 1 | {%- comment -%}
 2 | 
 3 |   Liquid by Jason @ freakdesign.
 4 |   Questions? Ping me on twitter: @freakdesign
 5 | 
 6 |   Relates to blog post:
 7 |   http://freakdesign.com.au/blogs/news/get-the-url-querystring-values-with-liquid-in-shopify
 8 | 
 9 |   Example:
10 |   https://jasons-experiments.myshopify.com/collections/all/products/3-4-sleeve-kimono-dress-coral-1?ref=freakdesign&cache=false
11 | 
12 | {%- endcomment -%}
13 | 
14 | {%- comment -%} Capture the content for header containing the tracking data {%- endcomment -%}
15 | {%- capture contentForQuerystring -%}{{ content_for_header }}{%- endcapture -%}
16 | 
17 | {% comment %} Use string splitting to pull the value from content_for_header and apply some string clean up {% endcomment %}
18 | {%- assign pageUrl = contentForQuerystring | split:'"pageurl":"' | last | split:'"' | first | split:'.myshopify.com' | last |
19 |    replace:'\/','/' | 
20 |    replace:'%20',' ' | 
21 |    replace:'\u0026','&'
22 | -%}
23 | {% assign debug = false %}
24 | {%- for i in (1..1) -%}
25 |   {%- comment -%} If the string doesn't contain a ? then we have no querystring. Go no further {%- endcomment -%}
26 |   {%- unless pageUrl contains "?" -%}{% break %}{%- endunless -%}
27 | 
28 |   {%- comment -%} Only work when the cache qs is used. Be aware of the perf issues with using cache=false {%- endcomment -%}
29 |   {%- unless pageUrl contains "cache=false" -%}{% break %}{%- endunless -%}
30 | 
31 |   {%- comment -%} Split the url at the ? to get all values after it {%- endcomment -%}
32 |   {%- assign pageQuerystring = pageUrl | split:'?' | last -%}
33 | 
34 |   {%- comment -%} Split the remaining string at & to get the list of keys and values (if any) {%- endcomment -%}
35 |   {%- assign parts = pageQuerystring | split:'&' -%}
36 | 
37 |   {%- comment -%} Loop over them... {%- endcomment -%}
38 |   {%- for part in parts -%}
39 | 
40 |     {%- comment -%} Split the part at the =. Not all querystrings will be in pairs so we need to account for that {%- endcomment -%}
41 |     {%- assign keyAndValue = part | split:'=' -%}
42 | 
43 |     {%- if keyAndValue.size > 1 -%}
44 |       {%- if debug -%}
45 |       <!-- 
46 |         key: {{ keyAndValue[0] }}<br>
47 |         value: {{ keyAndValue[1] }}
48 |       -->
49 |       {% endif %}
50 |       {%- comment -%}And for an example. If the querystring key was "ref" and the value "freakdesign" do something {%- endcomment -%}
51 |       {% if keyAndValue[0] == "ref" and keyAndValue[1] == "freakdesign" %}
52 |       <p style="border: 1px solid currentColor;padding: 1em;">
53 |         Aw Yisss! You used my special referral url. Here's a discount code <span style="background: #30ffbb;display: inline-block;font-family: monospace;padding: 0 .5em;white-space: nowrap;">sdfe-342f-234ca-343f</span>.
54 |       </p>
55 |       {% endif %}
56 |     {%- else -%}
57 |      {%- if debug -%}
58 |       <!-- 
59 |         value: {{ keyAndValue }}
60 |       -->
61 |       {%- endif -%}
62 |     {%- endif -%}
63 | 
64 |   {%- endfor -%}
65 | {%- endfor -%}
66 | 


--------------------------------------------------------------------------------
/Get shipping estimate on Shopify product page/README.md:
--------------------------------------------------------------------------------
1 | # Get shipping estimates on a Shopify product page
2 | JS code to get shipping rates for a single product.
3 | 
4 | 
5 | Relates to [Get Product Shipping Rates](https://freakdesign.com.au/blogs/news/get-shipping-estimates-on-a-product-page) post on the freakdesign blog. Also see [live example](https://jasons-experiments.myshopify.com/products/alex-twill-pant-mariner).
6 | 


--------------------------------------------------------------------------------
/Get shipping estimate on Shopify product page/get-estimate.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | 
  3 |   Quick JS by Jason @ freakdesign.
  4 |   Questions? Ping me on twitter: @freakdesign
  5 | 
  6 |   Relates to blog post:
  7 |   https://freakdesign.com.au/blogs/news/get-shipping-estimates-on-a-product-page
  8 | 
  9 |   Example:
 10 |   https://jasons-experiments.myshopify.com/products/alex-twill-pant-mariner
 11 | 
 12 | */
 13 | (function(){
 14 | 
 15 | 	"use strict";
 16 | 
 17 | 	/* In case you want to output a bunch of things to the debug console */
 18 | 	var debug = true;
 19 | 	var cartCookie;
 20 | 
 21 | 	/* The ID of the element that you want to add the shipping fields into */
 22 | 	var productSection = document.getElementsByClassName('product-single__info-wrapper');
 23 | 	if(!productSection.length){ log('Could not find the element'); return }
 24 | 
 25 | 	/* the main product select element */
 26 | 	var productSelect = document.getElementById('ProductSelect');
 27 | 	if(!productSelect){ log('Could not find the main select element'); return }
 28 | 
 29 | 	/* create a message box */
 30 | 	var shippingMessage = document.createElement('p');
 31 | 	var shippingCountry = document.createElement('select');
 32 | 	var shippingProvince = document.createElement('select');
 33 | 	var shippingZip = document.createElement('input');
 34 | 
 35 | 	/* We are just adding some dummy fields for example only. There's better ways to handle this */
 36 | 	var initFields = function(){
 37 | 
 38 | 		/* create the country picker */
 39 | 		var countries = ['Australia'];
 40 | 		for (var i = 0; i < countries.length; i++) {
 41 | 			shippingCountry.add(new Option(countries[i], countries[i], i===0));
 42 | 		};
 43 | 		shippingCountry.name = 'shipping_address[country]';
 44 | 
 45 | 		/* create the province state picker */
 46 | 
 47 | 		var provinces = ['Queensland', 'Northern Territory', 'South Australia', 'Tasmania', 'Victoria', 'Western Australia'];
 48 | 		for (var i = 0; i < provinces.length; i++) {
 49 | 			shippingProvince.add(new Option(provinces[i], provinces[i], i===0));
 50 | 		};
 51 | 		shippingProvince.name = 'shipping_address[province]';
 52 | 
 53 | 		/* create the zip / postcode field */
 54 | 		shippingZip.type = 'text';
 55 | 		shippingZip.name = 'shipping_address[zip]';
 56 | 		shippingZip.value = '4000';
 57 | 
 58 | 		/* create a wrapper for the fields */
 59 | 		var shippingCalcWrapper = document.createElement('div');
 60 | 		shippingCalcWrapper.className = 'shipping-calc-wrapper';
 61 | 
 62 | 		/* create a title */
 63 | 		var shippingCalcTitle = document.createElement('p');
 64 | 		shippingCalcTitle.innerText = 'Shipping Calculator';
 65 | 
 66 | 		/* create a get rates button */
 67 | 		var shippingCalcButton = document.createElement('button');
 68 | 		shippingCalcButton.innerText = 'Get Rates';
 69 | 		shippingCalcButton.className = 'btn';
 70 | 		shippingCalcButton.onclick=function(){
 71 | 			if(!productSelect.value.length){ return false }
 72 | 			cartCookie = getCookie('cart');
 73 | 			var tempCookieValue = tempCookieValue || "temp-cart-cookie___" + Date.now();
 74 | 			var fakeCookieValue = fakeCookieValue || "fake-cart-cookie___" + Date.now();
 75 | 
 76 | 			/* if not found, make a new temp cookie */
 77 | 			if(!cartCookie){ 
 78 | 				log('no cookie found');
 79 | 				updateCartCookie(tempCookieValue);
 80 | 				cartCookie = getCookie('cart');
 81 | 			}else{
 82 | 				log('cookie found');
 83 | 			}
 84 | 
 85 | 			/* if found but has a weird length, bail */
 86 | 			if(cartCookie.length < 32){ log('cart ID not valid');return }
 87 | 
 88 | 			/* Change the cookie value to a new 32 character value */
 89 | 			updateCartCookie(fakeCookieValue);
 90 | 			log(getCookie('cart'));
 91 | 
 92 | 			getRates(parseInt(productSelect.value));
 93 | 			return false;
 94 | 		};
 95 | 
 96 | 		/* create some labels for the fields */
 97 | 		var labelNames = ['Country','State','Postcode'];
 98 | 		var labels = [];
 99 | 		for (var i = 0; i < labelNames.length; i++) {
100 | 			var label = document.createElement('label');
101 | 			label.innerText = labelNames[i];
102 | 			labels.push(label);
103 | 		};
104 | 
105 | 		shippingCalcWrapper.appendChild(shippingCalcTitle);
106 | 		shippingCalcWrapper.appendChild(labels[0]);
107 | 		shippingCalcWrapper.appendChild(shippingCountry);
108 | 		shippingCalcWrapper.appendChild(labels[1]);
109 | 		shippingCalcWrapper.appendChild(shippingProvince);
110 | 		shippingCalcWrapper.appendChild(labels[2]);
111 | 		shippingCalcWrapper.appendChild(shippingZip);
112 | 		shippingCalcWrapper.appendChild(shippingCalcButton);
113 | 		shippingCalcWrapper.appendChild(shippingMessage);
114 | 
115 | 		/* add to the page */
116 | 		productSection[0].appendChild(shippingCalcWrapper);
117 | 
118 | 	};
119 | 
120 | 	/* A console logging function */
121 | 	var log = function(a){
122 | 		if(!debug){ return }
123 | 		console.log(a);
124 | 	};
125 | 
126 | 	/* get cookie by name */
127 | 	var getCookie = function(name) {
128 | 		var value = "; " + document.cookie;
129 | 		var parts = value.split('; '+name+'=');
130 | 		if (parts.length == 2) return parts.pop().split(";").shift();
131 | 	};
132 | 
133 | 	/* update the cart cookie value */
134 | 	var updateCartCookie = function(a) {
135 | 		log('changing cart cookie value to: '+a);
136 | 		var date = new Date();
137 | 		date.setTime(date.getTime()+(14*86400000));
138 | 		var expires = '; expires='+date.toGMTString();
139 | 		document.cookie = 'cart='+a+expires+'; path=/';
140 | 	};
141 | 
142 | 	/* reset the cart cookie value */
143 | 	var resetCartCookie = function(){
144 | 		updateCartCookie(cartCookie);
145 | 		log(getCookie('cart'));
146 | 	};
147 | 
148 | 	/* get the rates */
149 | 	var getRates = function(variantId){
150 | 
151 | 		/* add whatever sanity checks you need in addition to the one below */
152 | 		if(typeof variantId === 'undefined'){ return }
153 | 
154 | 		/* the main quantity element */
155 | 		var productQuantity = document.getElementById('Quantity');
156 | 
157 | 		var quantity = productQuantity ? parseInt(productQuantity.value):1;
158 | 		var addData = {
159 | 			'id':variantId,
160 | 			'quantity':quantity
161 | 		};
162 | 
163 | 		fetch('/cart/add.js', {
164 | 			body: JSON.stringify(addData),
165 | 			credentials: 'same-origin',
166 | 			headers: {
167 | 				'Content-Type': 'application/json',
168 | 				'X-Requested-With':'xmlhttprequest' /* XMLHttpRequest is ok too, it's case insensitive */
169 | 			},
170 | 			method: 'POST'
171 | 		}).then(function(response) {
172 | 			return response.json();
173 | 		}).then(function(json) {
174 | 			/* we have JSON */
175 | 			console.log(json);
176 | 			/* Change the cookie value back to what it was */
177 | 
178 | 			$.ajax({
179 | 				type: "GET",
180 | 				url: '/cart/shipping_rates.json',
181 | 				data: {
182 | 					'shipping_address[country]':shippingCountry.value,
183 | 					'shipping_address[province]':shippingProvince.value,
184 | 					'shipping_address[zip]':shippingZip.value
185 | 				},
186 | 				success: function(d){
187 | 					if(d.shipping_rates && d.shipping_rates.length){
188 | 						shippingMessage.innerHTML = 'First rate = '+d.shipping_rates[0].name+'<br>Price = '+d.shipping_rates[0].price;
189 | 					}
190 | 					resetCartCookie()
191 | 				},
192 | 				error: function(){
193 | 					resetCartCookie();
194 | 					shippingMessage.innerHTML = '';
195 | 				},
196 | 				dataType: 'json'
197 | 			});
198 | 
199 | 			
200 | 		}).catch(function(err) {
201 | 			/* uh oh, we have error. */
202 | 			console.error(err);
203 | 			resetCartCookie()
204 | 		});
205 | 
206 | 	};
207 | 
208 | 	initFields();
209 | 
210 | })()


--------------------------------------------------------------------------------
/Get total stock value/README.md:
--------------------------------------------------------------------------------
1 | # Get total stock value of all Shopify products
2 | 
3 | Refers to the [freakdesign blog post](http://freakdesign.com.au/blogs/news/169622407-get-the-total-value-of-all-variants-within-a-shopify-store-admin).
4 | 
5 | >Most people that need to know the total stock value are already likely to be using a third party Inventory Management System, ERP (or similar). If you want to know what your total stock value is you can grab that info via the API - let's look how.
6 | 
7 | ### Usage
8 | Paste the code into the browser debug console. 
9 | 


--------------------------------------------------------------------------------
/Get total stock value/get-total-stock-value.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 | 
  3 |       ############# 
  4 |     ##            *## 
  5 |    #        %      **#
  6 |   #        %%%    ***#
  7 |  #       %%F%D%%   ****#
  8 | #          %%%    *****#
  9 | #   ###     %     ###***# 
 10 | #  # ####       #### #**# 
 11 | #  #     #     #     #**# 
 12 | #   #####  # #  #####***# 
 13 | #         #   #  *******# 
 14 |  ### #           **# ### 
 15 |      # - - - - - - #
 16 |       | | | | | | |
 17 | 
 18 |     freakdesign.com.au
 19 | 
 20 |     JavaScript function to calculate the total stock value within a Shopify store
 21 | 
 22 |     Copyright (c) 2016 Jason Bowman (freakdesign.com.au)
 23 |     Dual licensed under the MIT and GPL licenses:
 24 |     http://www.opensource.org/licenses/mit-license.php
 25 |     http://www.gnu.org/licenses/gpl.html
 26 | 
 27 | */
 28 | (function(){
 29 | 
 30 |   if(!self.fetch) { console.log('fetch() not supported');return }
 31 | 
 32 |   var app = {
 33 |     apiLimit:250,
 34 |     productCount:0,
 35 |     variantCount:0,
 36 |     stockCount:0,
 37 |     totalProductValue:0,
 38 |     consoleLine:'------------------------------'
 39 |   };
 40 | 
 41 |   var getAllProducts = function(page){
 42 |     if(app.productCount < 1){ return }
 43 |     if(typeof page === 'undefined'){ var page = 1 }
 44 |     var totalPages = Math.ceil(app.productCount / app.apiLimit);
 45 | 
 46 |     console.log('Getting ' + page +' of '+ totalPages + ' page(s)...');
 47 | 
 48 |     var request = new Request('/admin/products.json?limit='+app.apiLimit+'&page='+page, {
 49 |       method:'GET',
 50 |       credentials:'same-origin',
 51 |       headers: new Headers({
 52 |         'Content-Type': 'application/json',
 53 |       })
 54 |     });
 55 | 
 56 |     fetch(request).then(function(response) { 
 57 |       return response.json();
 58 |     }).then(function(j) {
 59 |       if(page===1 || typeof app.products === 'undefined'){
 60 |         app.products = j.products;
 61 |       }else{
 62 |         var concatArray = app.products.concat(j.products);
 63 |         app.products = concatArray;
 64 |       }
 65 | 
 66 |       if(totalPages > page){
 67 |         page++;
 68 |         getAllProducts(page);
 69 |       }else{
 70 |         getTotalProductValue(app.products);
 71 |       }
 72 | 
 73 |     }).catch(function(ex) {
 74 |       console.log('parsing failed', ex)
 75 |     })
 76 |   };
 77 | 
 78 |   var getTotalProductValue = function(products){
 79 | 
 80 |     console.log(app.consoleLine);
 81 | 
 82 |     for (var i = products.length - 1; i >= 0; i--) {
 83 |       app.variantCount += parseInt(products[i].variants.length);
 84 |       for (var p = products[i].variants.length - 1; p >= 0; p--) {
 85 |         var variant = products[i].variants[p];
 86 |         if(variant.inventory_quantity && variant.inventory_quantity > 0){
 87 |           app.stockCount += variant.inventory_quantity;
 88 |           app.totalProductValue += parseFloat(variant.price) * variant.inventory_quantity;
 89 |         }
 90 |       };
 91 |     };
 92 | 
 93 |     var message = [
 94 |       'Products count: ', products.length, 
 95 |       '\nVariant count: ', app.variantCount, 
 96 |       '\nStock count: ', app.stockCount, 
 97 |       '\nTotal value = ', Shopify.Money.format(app.totalProductValue.toFixed(3),Shopify.Money.moneyFormat())
 98 |     ].join('');
 99 | 
100 |     console.log(message);
101 | 
102 |   }
103 | 
104 |   var getProductCount = function(){
105 |     var request = new Request('/admin/products/count.json', {
106 |       method:'GET',
107 |       credentials:'same-origin',
108 |       headers: new Headers({
109 |         'Content-Type': 'application/json',
110 |       })
111 |     });
112 |     fetch(request).then(function(response) { 
113 |       return response.json();
114 |     }).then(function(j) {
115 |       app.productCount = j.count || 0;
116 |       getAllProducts();
117 |     }).catch(function(ex) {
118 |       console.log('Function failed: ', ex)
119 |     })
120 |   }
121 | 
122 |   var init = function(){
123 |     getProductCount();
124 |   }
125 |   
126 |   init();
127 | 
128 | })()


--------------------------------------------------------------------------------
/Get total stock value/get-total-stock-value.min.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 | 
 3 |   JavaScript function to calculate the total stock value within a Shopify store
 4 | 
 5 |   Copyright (c) 2016 Jason Bowman (freakdesign.com.au)
 6 |   Dual licensed under the MIT and GPL licenses:
 7 |   http://www.opensource.org/licenses/mit-license.php
 8 |   http://www.gnu.org/licenses/gpl.html
 9 | 
10 | */
11 | (function(){if(self.fetch){var a={apiLimit:250,productCount:0,variantCount:0,stockCount:0,totalProductValue:0,consoleLine:"------------------------------"},h=function(b){if(!(1>a.productCount)){"undefined"===typeof b&&(b=1);var g=Math.ceil(a.productCount/a.apiLimit);console.log("Getting "+b+" of "+g+" page(s)...");var k=new Request("/admin/products.json?limit="+a.apiLimit+"&page="+b,{method:"GET",credentials:"same-origin",headers:new Headers({"Content-Type":"application/json"})});fetch(k).then(function(a){return a.json()}).then(function(c){1===
12 | b||"undefined"===typeof a.products?a.products=c.products:(c=a.products.concat(c.products),a.products=c);if(g>b)b++,h(b);else{c=a.products;console.log(a.consoleLine);for(var d=c.length-1;0<=d;d--){a.variantCount+=parseInt(c[d].variants.length);for(var f=c[d].variants.length-1;0<=f;f--){var e=c[d].variants[f];e.inventory_quantity&&0<e.inventory_quantity&&(a.stockCount+=e.inventory_quantity,a.totalProductValue+=parseFloat(e.price)*e.inventory_quantity)}}c=["Products count: ",c.length,"\nVariant count: ",
13 | a.variantCount,"\nStock count: ",a.stockCount,"\nTotal value = ",Shopify.Money.format(a.totalProductValue.toFixed(3),Shopify.Money.moneyFormat())].join("");console.log(c)}})["catch"](function(a){console.log("parsing failed",a)})}};(function(){var b=new Request("/admin/products/count.json",{method:"GET",credentials:"same-origin",headers:new Headers({"Content-Type":"application/json"})});fetch(b).then(function(a){return a.json()}).then(function(b){a.productCount=b.count||0;h()})["catch"](function(a){console.log("Function failed: ",
14 | a)})})()}else console.log("fetch() not supported")})();


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | License
 2 | 
 3 | Copyright (c) Jason Bowman
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/Multiple 404 caches/404.liquid:
--------------------------------------------------------------------------------
 1 | {%- comment -%}
 2 | Relates to https://freakdesign.com.au/blogs/news/could-multiple-404-pages-be-better-than-one
 3 | {%- endcomment -%}
 4 | 
 5 | <div class="xpage-empty text-center">
 6 | 
 7 | 	{%- comment -%} Grab the current path {%- endcomment -%}
 8 | 	{%- assign pathDetails = request.path | split:'/' -%}
 9 | 
10 | 	{%- comment -%} Set the current cache type variable to `default` {%- endcomment -%}
11 | 	{%- assign cacheType = 'default' -%}
12 | 
13 | 	{%- comment -%} Let's break down the path to work out the type {%- endcomment -%}
14 | 	{%- if pathDetails.size < 3 -%}
15 | 		{%- assign cacheType = "A" -%}
16 | 	{%- elsif pathDetails[1] == 'account' -%}
17 | 		{%- assign cacheType = "A" -%}
18 | 	{%- elsif pathDetails[1] == 'collections' or pathDetails[1] == 'products' -%}
19 | 		{%- assign cacheType = "B" -%}
20 | 	{%- elsif pathDetails[1] == 'pages' -%}
21 | 		{%- assign cacheType = "C" -%}
22 | 	{%- elsif pathDetails[1] == 'a' or pathDetails[1] == 'apps' -%}
23 | 		{%- assign cacheType = "D" -%}
24 | 	{%- endif -%}
25 | 
26 | 	{%- comment -%} Optional: show different heading text based on cache type {%- endcomment -%}
27 | 	{%- if cacheType == 'default' -%}
28 | 		<h1>{{ 'general.404.title' | t }}</h1>
29 | 	{%- else -%}
30 | 		<h1><div style="font-size:400%">404</div> <span>Cache type {{ cacheType }}<span></h1>
31 | 	{%- endif -%}
32 | 
33 | 	{%- comment -%}
34 | 		Time to show different content based on the type.
35 | 		I'm opting to use snippets for most of the different content but nothing stopping
36 | 		you from just adding in the info directly. I find it's neater this way.
37 | 	{%- endcomment -%}
38 | 
39 | 	{%- case cacheType -%}
40 | 	{%- when 'A' -%}
41 | 		{%- comment -%} 
42 | 			Some fun if there's a very specific url used 
43 | 			On the experiements site the page title also changes but that code isn't shown here
44 | 		{%- endcomment -%}
45 | 		{%- if request.path == '/secret' -%}
46 | 			<img src="https://media.giphy.com/media/NdKVEei95yvIY/source.gif" />
47 | 		{%- else -%}
48 | 			{%- include '404-root' -%}
49 | 		{%- endif -%}
50 | 	{%- when 'B' -%}
51 | 		{%- include '404-collection' -%}
52 | 	{%- when 'C' -%}
53 | 		{%- include '404-page' -%}
54 | 	{%- when 'D' -%}
55 | 		{%- include '404-app' -%}
56 | 	{%- else -%}
57 | 		<p>{{ 'general.404.subtext_html' | t }}</p><hr>
58 | 		<p><a href="/" class="btn">{{ 'general.404.404_link' | t }}</a></p>
59 | 	{%- endcase -%}
60 | 
61 | 	{%- comment -%} Add some debug/insights to help those following along this crazy adventure {%- endcomment -%}
62 | 	<div>
63 | 		<small>
64 | 		URL at cache time: {{ request.path }}<br>
65 | 		pathDetails.size: {{ pathDetails.size }}<br>
66 | 		pathDetails[1]: {{ pathDetails[1] }}<br>
67 | 		cacheType: {{ cacheType }}<br>
68 | 		</small>
69 | 	</div>
70 | </div>


--------------------------------------------------------------------------------
/Multiple 404 caches/README.md:
--------------------------------------------------------------------------------
1 | # Doing silly things with cached results of 404 pages.
2 | Relates to the [Could multiple 404 pages be better than one?](https://freakdesign.com.au/blogs/news/could-multiple-404-pages-be-better-than-one) post on the freakdesign blog.


--------------------------------------------------------------------------------
/Multiple shopify reviews on one page/README.md:
--------------------------------------------------------------------------------
 1 | # Show multiple products reviews on one page
 2 | 
 3 | Refers to the [freakdesign blog post](https://freakdesign.com.au/blogs/news/show-multiple-shopify-product-reviews-on-one-page).
 4 | 
 5 | Shopify Product reviews is a decent app for getting those important reviews but you might have the need to place a bunch of reviews on one page. This code might help you craft something to do just that.
 6 | 
 7 | Since this relies entirely on the Shopfiy app expect this to break at any point. It's a fun experiment.
 8 | 
 9 | ![Reviews on collection page](https://cdn.shopify.com/s/files/1/0361/8133/files/reviews-on-collection.png?v=1500712642)
10 | 
11 | 
12 | ### Interesting notes:
13 | - you can get multiple badges in one call
14 | - you can NOT get multiple reviews in one call
15 | 
16 | ### Usage
17 | - create a collection with reviewed products
18 | - set the handle below (currently set to 'reviews')
19 | - create a snippet called get-reviews.liquid
20 | - include the snippet in the template where you want the reviews to show
21 | 


--------------------------------------------------------------------------------
/Multiple shopify reviews on one page/get-reviews.liquid:
--------------------------------------------------------------------------------
  1 | {%- comment -%}
  2 | 
  3 | 
  4 |   get-reviews.liquid
  5 |   ==================
  6 | 
  7 |   The code relates to the blog post below.
  8 |   https://freakdesign.com.au/blogs/news/show-multiple-shopify-product-reviews-on-one-page
  9 | 
 10 | 
 11 | {%- endcomment -%}
 12 | 
 13 | 
 14 | 
 15 | {%- assign collectionHandle = 'reviews' -%}
 16 | <div id="multipleReviews"></div>
 17 | 
 18 | 
 19 | {%- comment -%}
 20 |   Now add some styles to the page.You could move the styles 
 21 |   into your stylesheet if you don't want them here... 
 22 | {%- endcomment -%}
 23 | <style>
 24 | 
 25 | 
 26 |   #multipleReviews {
 27 |     background: #f7f7f7;
 28 |     padding: 0 1em;
 29 |   }
 30 | 
 31 |   @media only screen and (min-width: 750px){
 32 |     .product-review {
 33 |       width: 50%;
 34 |     }
 35 |   }
 36 | 
 37 |   .product-review {
 38 |     display: inline-block;
 39 |     vertical-align: top;
 40 |     margin: 4vh 0;
 41 |   }
 42 | 
 43 |   .product-review .spr-icon {
 44 |     width: .5em;
 45 |     height: .5em;
 46 |     background: #30ffbb;
 47 |     display: inline-block;
 48 |     border-radius: 50%;
 49 |     margin-right: .25em;
 50 |   }
 51 | 
 52 |   .product-review .spr-icon-star-empty {
 53 |     background: #ddd;
 54 |   }
 55 | 
 56 |   .product-review-stars { display: inline-block; }
 57 | 
 58 |   span.product-review-title {
 59 |     font-weight: 400;
 60 |     display: block;
 61 |     font-family: "Unica One", sans-serif;
 62 |     color: #242e2f;
 63 |     font-size: 1.3em;
 64 |     text-transform: uppercase;
 65 |     line-height: 1.04;
 66 |   }
 67 | 
 68 |   .product-review-reviewer {
 69 |     font-size: 80%;
 70 |     font-style: italic;
 71 |     display: block;
 72 |   }
 73 | </style>
 74 | <script>
 75 | 
 76 | (function(){
 77 | 
 78 |   window.reviewApp = window.reviewApp || {
 79 |     debug:false,
 80 |     reviews:[],
 81 |     reviewUrl:'https://productreviews.shopifycdn.com/proxy/v4/reviews/',
 82 |     reviewStore:{{ shop.permanent_domain | json }}, /* or hard code the myshopify url - eg: freakdesign.myshopify.com */
 83 |   };
 84 | 
 85 |   window.reviewApp.translations = {
 86 |     'missing_id':'Product ID array not defined',
 87 |     'script_exists':'The script has already been loaded on the page'
 88 |   };
 89 | 
 90 |   window.reviewApp.productIdList = [
 91 |     {%- for reviewProduct in collections[collectionHandle].products limit:10 -%}
 92 |       {{- reviewProduct.id -}}
 93 |       {%- unless forloop.last -%},{%- endunless -%}
 94 |     {%- endfor -%}
 95 |   ];
 96 |   
 97 |   reviewApp.errLog = function(t){
 98 |     if(!reviewApp.debug){ return }
 99 |     console.warn(reviewApp.translations[t])
100 |   };
101 | 
102 |   var getBadges = function(a){
103 | 
104 |     if(typeof a === 'undefined'){ errLog('missing_id');return }
105 |     if(!!document.getElementById('reviewBadges')){ errLog('script_exists');return }
106 | 
107 |     window.badgesLoaded = function(a){
108 |       console.log(a);
109 |     };
110 | 
111 |     var idString = [];
112 |     for (var i = a.length - 1; i >= 0; i--) {
113 |       idString.push('&product_ids[]='+a[i]);
114 |     };
115 | 
116 |     var script = document.createElement("script");
117 |     script.id = "reviewBadges";
118 |     script.async = true;
119 |     script.src = [window.reviewApp.reviewUrl,'badges?callback=badgesLoaded&shop=',window.reviewApp.reviewStore,idString.join('')].join('');
120 |     document.body.appendChild(script);
121 | 
122 |   };
123 | 
124 |   window.reviewLoaded = function(a){
125 | 
126 |     window.reviewApp.reviews.push(a);
127 |     if(window.reviewApp.productIdList.length){ 
128 |       reviewApp.getReviews(window.reviewApp.productIdList);
129 |       return;
130 |     };
131 | 
132 |     
133 |     
134 |     for (var i = window.reviewApp.reviews.length - 1; i >= 0; i--) {
135 | 
136 |       var tmpDiv = document.createElement('div');
137 |       tmpDiv.innerHTML = window.reviewApp.reviews[i].reviews;
138 | 
139 |       var reviewText = tmpDiv.querySelectorAll('.spr-review-content');
140 |       var reviewer = tmpDiv.querySelectorAll('.spr-review-header-byline');
141 |       var title = tmpDiv.querySelectorAll('.spr-review-header-title');
142 |       var rating = tmpDiv.querySelectorAll('.spr-starratings');
143 | 
144 |       console.log(window.reviewApp.reviews[i].reviews,reviewText.length);
145 | 
146 |       for (var _i = reviewText.length - 1; _i >= 0; _i--) {
147 |         var divHtml = '';
148 |         divHtml+= [
149 |         '<div class="product-review"><span class="product-review-title">',
150 |         title[_i].innerText,
151 |         '</span><span class="product-review-text">',
152 |         reviewText[_i].innerText,
153 |         '</span><span class="product-review-stars">',
154 |         rating[_i].innerHTML,
155 |         '</span><span class="product-review-reviewer">',
156 |         reviewer[_i].innerText,
157 |         '</span></div>'
158 |         ].join('');
159 |         document.getElementById('multipleReviews').insertAdjacentHTML('beforeend',divHtml);
160 |       };
161 | 
162 |     };
163 | 
164 |   };
165 | 
166 |   window.reviewApp.getReviews = function(a){
167 | 
168 |     if(typeof a === 'undefined'){ errLog('missing_id');return }
169 |     var productId = a.shift();
170 |     var script = document.createElement("script");
171 | 
172 |     if(document.getElementById('singleReviewData')){
173 |       document.getElementById('singleReviewData').remove(); /* cleanup (optional) */
174 |     }
175 |     
176 |     script.id = 'singleReviewData';
177 |     script.async = true;
178 |     script.src = [window.reviewApp.reviewUrl,'product?callback=reviewLoaded&shop=',window.reviewApp.reviewStore,'&product_id=',productId].join('');
179 |     document.body.appendChild(script);
180 | 
181 |   };
182 | 
183 |   reviewApp.getReviews(window.reviewApp.productIdList);
184 | 
185 | })();
186 | </script>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Shopify Code Snippets
2 | Shopify code examples and tips.
3 | 
4 | Often these snippets of code relate to a post on the [freakdesign](http://freakdesign.com.au) blog.


--------------------------------------------------------------------------------
/Remove map from order status page/README.md:
--------------------------------------------------------------------------------
 1 | # Remove or hide map from the order status page
 2 | [Related blog post](http://freakdesign.com.au/blogs/news/138552903-hide-the-map-on-the-shopify-order-status-page-aka-the-thank-you-page)
 3 | 
 4 | Add one of the following opproaches to the [additional contents and scripts](https://docs.shopify.com/themes/customization/order-status#add-additional-content-and-scripts) section.
 5 | 
 6 | ### 1. CSS
 7 | 
 8 | ```
 9 | <style>
10 |   .map {display:none }
11 | </style>
12 | ```
13 | 
14 | 
15 | ### 2. Checkout.jQuery
16 | 
17 | ```
18 | <script>
19 | if(Checkout && Checkout.$ && Checkout.$.fn){ Checkout.$('.map[data-mapbox]').parent().remove(); }
20 | </script>
21 | ```
22 | 
23 | ### 3. Vanilla JS
24 | 
25 | ```
26 | <script>
27 | if(document.getElementsByClassName('map')[0]){
28 |   document.getElementsByClassName('map')[0].parentNode.remove()
29 | }
30 | </script>
31 | ```
32 | 


--------------------------------------------------------------------------------
/Search by SKU/README.md:
--------------------------------------------------------------------------------
1 | #Use the Storefront Search as a SKU search endpoint.
2 | The Shopify API doesn't provide a simple way to search for products with a certain SKU code. With some alternate templates and the Storefront Search we can build a simple JSON endpoint for SKU searches.
3 | 
4 | [Search by Shopify SKU blog post](https://freakdesign.com.au/blogs/news/search-for-a-shopify-product-by-sku)
5 | 
6 | [Example](https://jasons-experiments.myshopify.com/search?type=product&q=sku:23200&view=sku)
7 | 


--------------------------------------------------------------------------------
/Search by SKU/search.sku.liquid:
--------------------------------------------------------------------------------
 1 | {%- layout none -%}
 2 | {%- comment -%}
 3 | /*
 4 |  * Simple SKU Search Endpoint
 5 |  *
 6 |  * Copyright (c) 2016 Jason Bowman (jason@freakdesign.com.au)
 7 |  * Licensed under the MIT license:
 8 |  * http://www.opensource.org/licenses/mit-license.php
 9 |  *
10 |  *
11 |  */ 
12 | {%- endcomment -%}
13 | {%- paginate search.results by 250 -%}
14 | {%- if search.performed -%}
15 | {"products": [
16 | 	{%- for item in search.results -%}
17 | 		{%- unless item.object_type == 'product' -%}{%- continue -%}{%- endunless -%}
18 | 		{{- item | json -}}
19 | 		{%- unless forloop.last %},{% endunless -%}
20 | 	{%- endfor -%}
21 | ]}
22 | {%- endif -%}
23 | {%- endpaginate -%}


--------------------------------------------------------------------------------
/Shopify Mailchimp RSS feed/README.md:
--------------------------------------------------------------------------------
 1 | # Shopify Mailchimp RSS Feed with Images
 2 | Simple code to take a Shopify Blog and convert it into a feed ready for Mailchimp.
 3 | Relates to [Shopfiy RSS Feed](http://freakdesign.com.au/blogs/news/create-a-custom-shopify-rss-feed-for-mailchimp-v2) post on the freakdesign blog 
 4 | 
 5 | ### Basic setup
 6 | - Add a new template to your theme called blog.feed.liquid. 
 7 | - Copy the code from the code found here into that file
 8 | - View your blog URL with ?view=feed added to the end of the url
 9 | 
10 | ### Mailchimp template setup
11 | *coming soon (also the blog post)...*
12 | 
13 | ### Example
14 | *coming soon (also the blog post)...*


--------------------------------------------------------------------------------
/Shopify Mailchimp RSS feed/blog.feed.liquid:
--------------------------------------------------------------------------------
  1 | {% layout none %}{% comment %}
  2 | /*
  3 |  * Simple blog feed
  4 |  *
  5 |  * Copyright (c) 2016 Jason Bowman (jason@freakdesign.com.au)
  6 |  * Licensed under the MIT license:
  7 |  * http://www.opensource.org/licenses/mit-license.php
  8 |  *
  9 |  * Note:
 10 |  * This feed will fail in validators. :(
 11 |  * It should however work within Mailchimp.
 12 |  *
 13 |  */ 
 14 | {% endcomment %}{% capture feedSettings %}
 15 | 
 16 |   {% comment %}
 17 |     =============================================================
 18 |     Adjust the image size.
 19 |     =============================================================
 20 |   {% endcomment %}
 21 |   {% assign blogDescription = 'My awesome blog' %}
 22 | 
 23 |   {% comment %}
 24 |     =============================================================
 25 |     Adjust the image size.
 26 |     =============================================================
 27 |   {% endcomment %}
 28 |   {% assign imageSize = 'grande' %}
 29 | 
 30 |   {% comment %}
 31 |     =============================================================
 32 |     How many articles to show.
 33 |     Note: The mailchimp template will also limit how many appear
 34 |     =============================================================
 35 |   {% endcomment %}
 36 |   {% assign articleLimit = 20 %}
 37 | 
 38 |   {% comment %}
 39 |     =============================================================
 40 |     Optionally include a list of tags in use.
 41 |     =============================================================
 42 |   {% endcomment %}
 43 |   {% assign showTags = false %}
 44 | 
 45 |   {% comment %}
 46 |     =============================================================
 47 |     Optionally truncate content. Useful if creating very long posts.
 48 |     =============================================================
 49 |   {% endcomment %}
 50 |   {% assign truncateContent = false %}
 51 | 
 52 |   {% comment %}
 53 |     =============================================================
 54 |     For long content, how many words should we trucate to?
 55 |     =============================================================
 56 |   {% endcomment %}
 57 |   {% assign truncateAmount = 100 %}
 58 | 
 59 |   {% comment %}
 60 |     =============================================================
 61 |     Force content to plain text.
 62 |     Useful if you are include HTML that might break the feed
 63 |     =============================================================
 64 |   {% endcomment %}
 65 |   {% assign forceHtml = false %}
 66 | 
 67 |   {% comment %}
 68 |     =============================================================
 69 |     Remove CDATA tags
 70 |     If you already have these in your article html this will
 71 |     break the feed. We can try and remove them, but test results!
 72 |     =============================================================
 73 |   {% endcomment %}
 74 |   {% assign removeCdataTags = true %}
 75 | 
 76 | {% endcapture %}<?xml version="1.0" encoding="UTF-8"?>
 77 | <rss version="2.0" 
 78 |   xmlns:content="http://purl.org/rss/1.0/modules/content/"
 79 |   xmlns:media="http://search.yahoo.com/mrss/"
 80 |   >
 81 |   <channel>
 82 |     <title>{{ shop.name }} - {{ blog.title }}</title>
 83 |     <link>{{ canonical_url }}</link>
 84 |     <description>{{ blogDescription }}</description>
 85 |     <lastBuildDate>{{ blog.articles.first.created_at | date: "%FT%TZ" }}</lastBuildDate>
 86 |     {% for article in blog.articles limit:articleLimit %}
 87 |     <item>
 88 |       <title>{{ article.title }}</title>
 89 |       <link>{{ shop.url }}/{{ article.url }}</link>
 90 |       <pubDate>{{ article.created_at | date: "%FT%TZ" }}</pubDate>
 91 |       <author>{{ article.author | default:shop.name }}</author>
 92 |       {% if showTags and article.tags != blank %}<category>{{ article.tags | join:',' }}</category>{% endif %}
 93 |       {% if article.excerpt != blank %}
 94 |         <description>{{ article.excerpt | strip_html }}</description>
 95 |       {% else %}
 96 |         <description>{{ article.content | strip_html | truncatewords: truncateAmount }}</description>
 97 |       {% endif %}
 98 |       <content:encoded>{% assign articleContent = article.excerpt_or_content %}{% if removeCdataTags %}{% assign articleContent = articleContent | remove:'<![CDATA[' | remove:']]' %}{% endif %}
 99 |       {% if truncateContent %}{{ articleContent | strip_html | truncate_words:truncateAmount }}
100 |       {% elsif forceHtml %}{{ articleContent | strip_html }}
101 |       {% else %}<![CDATA[{{ articleContent | replace:'<br>','<br />' }}]]>
102 |       {% endif %}
103 |       </content:encoded>
104 |       {% if article.image %}<media:content type="image/*" url="https:{{ article.image | img_url: imageSize }}" />{% endif %}
105 |     </item>
106 |     {% endfor %}
107 |   </channel>
108 | </rss>


--------------------------------------------------------------------------------
/Shopify Scripts/Line Items/email-domain-discount.rb:
--------------------------------------------------------------------------------
 1 | # Discount based on email address
 2 | # Could also be a partial domain match but we're doing the whole thing here...
 3 | Output.cart = Input.cart
 4 | exit unless Input.cart.customer
 5 | exit unless Input.cart.customer.email.end_with? "@freakdesign.com.au"
 6 | 
 7 | DISCOUNT_PERCENT = 0.5 #50 percent discount. Nice!
 8 | 
 9 | Input.cart.line_items.each do |line_item|
10 |   line_item.change_line_price(
11 |     line_item.line_price * DISCOUNT_PERCENT,
12 |     message: 'Freakdesign Discount of Awesome',
13 |   )
14 | end
15 | 
16 | Output.cart = Input.cart


--------------------------------------------------------------------------------
/Shopify Scripts/Line Items/limit-line-item-quantity.rb:
--------------------------------------------------------------------------------
 1 | # Script to limit the amount of line items in the cart.
 2 | 
 3 | itemLimit = 1 #change this to your maximum value
 4 | 
 5 | Input.cart.line_items.each do |line_item|
 6 |   if (line_item.quantity > itemLimit)
 7 |     line_item.instance_variable_set(:@quantity, itemLimit) 
 8 |   end
 9 | end
10 | 
11 | Output.cart = Input.cart


--------------------------------------------------------------------------------
/Shopify Scripts/Line Items/reject-discount-codes.rb:
--------------------------------------------------------------------------------
1 | # Reject all discount codes
2 | 
3 | Output.cart = Input.cart
4 | exit unless Input.cart.discount_code
5 | 
6 | Input.cart.discount_code.reject({ message: 'No discount codes allowed' })
7 | Output.cart = Input.cart


--------------------------------------------------------------------------------
/Shopify Scripts/Payments/remove-gateway-on-billing-country.rb:
--------------------------------------------------------------------------------
 1 | blocked_countries = ['AU', 'NZ']
 2 | 
 3 | exit unless Input.cart.billing_address
 4 | exit unless Input.cart.billing_address.country
 5 | 
 6 | if blocked_countries.include? Input.cart.billing_address.country
 7 |   Output.payment_gateways = Input.payment_gateways.delete_if do |payment_gateway|
 8 |     payment_gateway.name == "Shopify Payments"
 9 |   end
10 | end


--------------------------------------------------------------------------------
/Shopify Scripts/README.md:
--------------------------------------------------------------------------------
1 | # Shopify Scripts snippets.
2 | Full code examples or small parts for quick reference.
3 | 
4 | See the [official example repo](https://github.com/Shopify/scripts-public) for more info. 
5 | 


--------------------------------------------------------------------------------
/Shopify persitent cart without apps/README.md:
--------------------------------------------------------------------------------
1 | # Shopify persistent cart without app.
2 | How to create an app-less persistant cart on shopify without apps. Consider this an experiment only rather than a complete guide to follow as is.
3 | 
4 | See the related blog post on [persistent carts with apps](https://freakdesign.com.au/blogs/news/add-a-persistent-cart-to-shopify-without-apps) on the freakdesign blog for more info. 
5 | 


--------------------------------------------------------------------------------
/Shopify persitent cart without apps/persistent-cart.js.liquid:
--------------------------------------------------------------------------------
  1 | /*
  2 | 
  3 |   Quick JS by Jason @ freakdesign to enable a persistent cart
  4 | 
  5 |   Drop this into a Liquid template rather than a js.liquid or js asset. 
  6 |   That's important since there's a hmac_sha256 filter that needs to run 
  7 |   against the customer id.
  8 | 
  9 |   Questions? Ping me on twitter: @freakdesign
 10 | 
 11 |   Relates to blog post:
 12 |   https://freakdesign.com.au/blogs/news/add-a-persistent-cart-to-shopify-without-apps
 13 | 
 14 |   Example: (not yet, soon...)
 15 | 
 16 | */
 17 | {%- if customer -%}
 18 | 
 19 | 	(function(){
 20 | 
 21 | 		"use strict";
 22 | 
 23 | 		/* In case you want to output a bunch of things to the debug console */
 24 | 		var debug = false;
 25 | 
 26 | 		/* the cookie value var */
 27 | 		var cartCookieValue;
 28 | 
 29 | 		/* you should leave this as is, but if you want to experiement with larger values you can */
 30 | 		var cookieExpireDays = 14;
 31 | 
 32 | 		/* 
 33 | 		IMPORTANT. 
 34 | 		YOU MUST CHANGE THE YOUR_SECRET_KEY VALUE BELOW TO SOMETHING ELSE.
 35 | 		The value will look something like this: 30ab3459e46e7b209b45dba8378fcbba67297304
 36 | 		*/
 37 | 		var customerCookieValue = {{ customer.id | hmac_sha256: "YOUR_SECRET_KEY" | json }};
 38 | 
 39 | 		/* A console logging function */
 40 | 		var log = function(a){
 41 | 			if(!debug){ return }
 42 | 			console.log(a);
 43 | 		};
 44 | 
 45 | 		/* get cookie by name */
 46 | 		var getCookie = function(name) {
 47 | 			var value = "; " + document.cookie;
 48 | 			var parts = value.split('; '+name+'=');
 49 | 			if (parts.length == 2) return parts.pop().split(";").shift();
 50 | 		};
 51 | 
 52 | 		/* update the cart cookie value */
 53 | 		var setCartCookie = function(a) {
 54 | 			var date = new Date();
 55 | 			date.setTime(date.getTime()+(cookieExpireDays*86400000));
 56 | 			var expires = '; expires='+date.toGMTString();
 57 | 			document.cookie = 'cart='+a+expires+'; path=/';
 58 | 		};
 59 | 
 60 | 		var init = function(){
 61 | 			/* get the current value of the cart cookie */
 62 | 			cartCookieValue = getCookie('cart');
 63 | 
 64 | 			if(!cartCookieValue){ 
 65 | 				/* cookie not found so we don't have a cart at all. Let's make a new one */
 66 | 				setCartCookie(customerCookieValue);
 67 | 				return;
 68 | 			}
 69 | 
 70 | 			if(cartCookieValue === customerCookieValue){
 71 | 				/* the customer is already using the correct cookie. Do nothing */
 72 | 				return;
 73 | 			}
 74 | 
 75 | 			/* 
 76 | 				If we've got this far we either don't have a cookie or the cookie is
 77 | 				already set to be hmac_sha256 value.
 78 | 
 79 | 				Cookies do not match. 
 80 | 				Do we have products already in the cart? 
 81 | 			*/
 82 | 			var xhr = new XMLHttpRequest();
 83 | 			xhr.open('GET', '/cart.js');
 84 | 			xhr.onload = function() {
 85 | 				if (xhr.status === 200) {
 86 | 					var cartJson = JSON.parse(xhr.responseText);
 87 | 					if(cartJson && cartJson.item_count){ 
 88 | 
 89 | 						/* 
 90 | 						Do nothing as there's already items in the cart.
 91 | 
 92 | 						If you want to extend the code this is where you'd take the items 
 93 | 						in the current cart and move them into the persistant cart. In other
 94 | 						words - change the cookie value and re-add all the existing products.
 95 | 						*/
 96 | 						return;
 97 | 					}
 98 | 
 99 | 					/* 
100 | 						we don't have items in the cart so this means that we can easily 
101 | 						change the cart cookie value.
102 | 
103 | 						Once set, all products added will be to a cart with this value.
104 | 						(in theory)
105 | 					*/
106 | 					setCartCookie(customerCookieValue);
107 | 
108 | 					/*
109 | 						With the cookie value changed the next step would be to check to see
110 | 						if the cart now has products or not. If it does, it would be worth 
111 | 						reloading the page (or better - trigger an on screen cart notifications).
112 | 
113 | 						Visit the cart page manually for now and see if you have items from the
114 | 						other shipping session.
115 | 					*/
116 | 				}
117 | 			};
118 | 			xhr.send();
119 | 		};
120 | 
121 | 		init();
122 | 
123 | 	})();
124 | 
125 | {%- endif -%}


--------------------------------------------------------------------------------
/Sort Shopify collection by inventory count/README.md:
--------------------------------------------------------------------------------
 1 | # Sort products in a Shopify collection using total inventory (and no javascript)
 2 | 
 3 | Refers to the [freakdesign blog post](http://freakdesign.com.au/blogs/news/sort-a-shopify-collection-by-total-inventory-per-product-with-liquid).
 4 | 
 5 | >Shopify gives plenty of ways to sort collection products but things get a little tricky when you need to sort by inventory totals. You can still sort products in a collection manually, but where's the cool factor in that? Let's explore a sorting method that doesn't need JavaScript...
 6 | 
 7 | 
 8 | ### Usage
 9 | Review the code, adapt the existing theme code to match...
10 | [Demo](https://jasons-experiments.myshopify.com/collections/sort-by-inventory-levels)
11 | 
12 | ### Caveat
13 | This is only going to work if the collection has 50 or less products. So if your collection is bigger than that you're going to run into some weirdness. Keep em small peoples (or be ready to use a JavaScript solution)! 


--------------------------------------------------------------------------------
/Sort Shopify collection by inventory count/sort-shopify-collection-products-by-inventory.liquid:
--------------------------------------------------------------------------------
 1 | {% comment %}
 2 | 
 3 |   ========================================================================
 4 | 
 5 |   Liquid by Jason @ freakdesign.
 6 |   Questions? Ping me on twitter: @freakdesign
 7 | 
 8 |   Experimental code to sort a products in a collection by metafield value.
 9 |   Relates to this blog post: 
10 |   http://freakdesign.com.au/blogs/news/sort-a-shopify-collection-by-total-inventory-per-product-with-liquid
11 |   
12 |   Demo:
13 |   https://jasons-experiments.myshopify.com/collections/sort-by-inventory-levels
14 |   
15 |   We assume that:
16 |   - the count of products is 50 or less
17 |   - the pagination on the collection is set to a number higher than the product count 
18 | 
19 |   Note: This code was written for the Venture theme. 
20 |   Adapt as needed.
21 |   
22 |   ========================================================================
23 | 
24 | {% endcomment %}
25 | 
26 | {% assign newArray = false %}
27 | {% assign zeroFill = '0000' %}
28 | {% assign zeroFillSize = zeroFill | size %}
29 | {% for product in collection.products %}
30 | 
31 |   {% assign inventoryCount = 0 %}
32 |   {% for variant in product.variants %}
33 |     {% if variant.inventory_management != "shopify" %}{% continue %}{% endif %}
34 |     {% assign inventoryCount = inventoryCount | plus:variant.inventory_quantity %}
35 |   {% endfor %}
36 | 
37 |   {% assign indexCharSize = inventoryCount | append:'' | size %}
38 |   {% assign toSlice = zeroFillSize | minus:indexCharSize %}
39 |   {% assign tmpZeroFill = zeroFill | slice:0,toSlice %}
40 |   {% assign newOrder = inventoryCount | default:'0' %}
41 |   {% assign matrix = tmpZeroFill | append:newOrder | append:'.'  | append:forloop.index0 %}
42 | 
43 |   {% if newArray %}
44 |     {% assign tmpIndex = matrix | split:',' %}
45 |     {% assign newArray = newArray | concat:tmpIndex %}
46 |   {% else %}
47 |     {% assign newArray = matrix | split:',' %}
48 |   {% endif %}
49 | 
50 | {% endfor %}
51 | 
52 | {% assign newArray = newArray | sort %}
53 | {% for newArrayItem in newArray %}
54 |   {% assign i = newArrayItem | split:'.' | last | abs %}
55 |   {% assign grid = 'small--one-half medium-up--one-fifth' %}
56 |   {% if paginationAmount == 1 %}
57 |     {% assign grid = 'one-whole pagination_1' %}
58 |   {% elsif paginationAmount == 2 %}
59 |      {% assign grid = 'one-half pagination_2' %}
60 |   {% elsif paginationAmount == 3 %}
61 |      {% assign grid = 'small--one-half medium-up--one-third pagination_3' %}
62 |   {% elsif paginationAmount == 4 %}
63 |      {% assign grid = 'small--one-half medium-up--one-quarter' %}
64 |   {% endif %}
65 |   <div class="grid__item {{ grid }}">
66 |     {% include 'product-card', product: collection.products[i] %}
67 |   </div>
68 | {% endfor %}
69 | 


--------------------------------------------------------------------------------
/Sort Shopify collection by metafield/README.md:
--------------------------------------------------------------------------------
 1 | # Sort products in a Shopify collection using a metafield value (and no javascript)
 2 | 
 3 | Refers to the [freakdesign blog post](http://freakdesign.com.au/blogs/news/113614023-sort-products-in-a-shopify-collection-by-metafield-value-without-javascript).
 4 | 
 5 | >Shopify gives plenty of ways to sort collection products but things get a little tricky when you need to sort by metafield value. Sure you can still sort the products in a collection manually, but where's the cool factor in that? Let's explore a sorting method that doesn't need JavaScript...
 6 | 
 7 | 
 8 | ### Usage
 9 | Review the code, adapt the existing theme code to match...
10 | 
11 | 
12 | ### Caveat
13 | This is only going to work if the collection has 50 or less products. So if your collection is bigger than that you're going to run into some weirdness. Keep em small peoples! 


--------------------------------------------------------------------------------
/Sort Shopify collection by metafield/sort-shopify-collection-products-by-metafield-value-commentless.liquid:
--------------------------------------------------------------------------------
 1 | {% assign newArray = false %}
 2 | {% assign zeroFill = '0000' %}
 3 | {% assign zeroFillSize = zeroFill | size %}
 4 | {% for product in collection.products %}
 5 | 	{% assign indexCharSize = forloop.index0 | append:'' | size %}
 6 | 	{% assign toSlice = zeroFillSize | minus:indexCharSize %}
 7 | 	{% assign tmpZeroFill = zeroFill | slice:0,toSlice %}
 8 | 	{% assign newOrder = product.metafields.global.order | default:'999999' %}
 9 | 	{% assign matrix = tmpZeroFill | append:newOrder | append:'.'  | append:forloop.index0 %}
10 | 	{% if newArray %}
11 | 		{% assign tmpIndex = matrix | split:',' %}
12 | 		{% assign newArray = newArray | concat:tmpIndex %}
13 | 	{% else %}
14 | 		{% assign newArray = matrix | split:',' %}
15 | 	{% endif %}
16 | {% endfor %}
17 | {% assign newArray = newArray | sort %}
18 | {% for newArrayItem in newArray %}
19 | 	{% assign i = newArrayItem | split:'.' | last | abs %}
20 | 	<div>
21 | 		<h2>{{ collection.products[i].title }}</h2>
22 | 		<p>My original index was {{ i }}, but now it is {{ forloop.index0 }}</p>
23 | 	</div>
24 | {% endfor %}


--------------------------------------------------------------------------------
/Sort Shopify collection by metafield/sort-shopify-collection-products-by-metafield-value.liquid:
--------------------------------------------------------------------------------
 1 | {% comment %}
 2 | 	
 3 | 	========================================================================
 4 | 
 5 | 	Liquid by Jason @ freakdesign.
 6 | 	Questions? Ping me on twitter: @freakdesign
 7 | 
 8 | 	Experimental code to sort a products in a collection by metafield value.
 9 | 	Relates to this blog post: 
10 | 	http://freakdesign.com.au/blogs/news/113614023-sort-products-in-a-shopify-collection-by-metafield-value-without-javascript
11 | 
12 | 	We assume that:
13 | 	- the count of products is 50 or less
14 | 	- that every single product has been given a unique sorting numbers. 
15 | 	- the pagination on the collection is set to a number higher than the product count 
16 | 
17 | 	========================================================================
18 | 
19 | {% endcomment %}
20 | 
21 | {% comment %}
22 | 	First set our new array to false...
23 | {% endcomment %}
24 | {% assign newArray = false %}
25 | 
26 | {% comment %}
27 | 	Set the starting zero fill. 
28 | 	This is actually bigger than needed but that's ok...
29 | {% endcomment %}
30 | {% assign zeroFill = '0000' %}
31 | 
32 | {% comment %}
33 | 	Set the length of the zero fill. We could manually add this number, but for 
34 | 	safety I am just getting Liquid to do it for me...
35 | {% endcomment %}
36 | {% assign zeroFillSize = zeroFill | size %}
37 | 
38 | {% comment %}
39 | 	Let's loop over the collection. We will not be using this to add anything 
40 | 	to the page at this point. This is to help us build up the matrix to 
41 | 	order by.
42 | {% endcomment %}
43 | {% for product in collection.products %}
44 | 
45 | 	{% comment %}
46 | 		Get the length of the index
47 | 	{% endcomment %}
48 | 	{% assign indexCharSize = forloop.index0 | append:'' | size %}
49 | 	{% assign toSlice = zeroFillSize | minus:indexCharSize %}
50 | 
51 | 	{% comment %}
52 | 		Slice the zeroFill as needed
53 | 	{% endcomment %}
54 | 	{% assign tmpZeroFill = zeroFill | slice:0,toSlice %}
55 | 
56 | 	{% comment %}
57 | 		If there is no metafield assign a giant value 
58 | 		so that it gets pushed to the bottom
59 | 	{% endcomment %}
60 | 	{% assign newOrder = product.metafields.global.order | default:'999999' %}
61 | 
62 | 	{% comment %}
63 | 		Build up the matrix. 
64 | 		It will look like xxxx.y (eg:0012.31) where xxxx is our zeroFill and y is the current order.
65 | 		This will hopefully make sense shortly...
66 | 	{% endcomment %}
67 | 	{% assign matrix = tmpZeroFill | append:newOrder | append:'.'  | append:forloop.index0 %}
68 | 	{% if newArray %}
69 | 		{% comment %}
70 | 			add a new value to our existing array.
71 | 		{% endcomment %}
72 | 		{% assign tmpIndex = matrix | split:',' %}
73 | 		{% assign newArray = newArray | concat:tmpIndex %}
74 | 	{% else %}
75 | 		{% comment %}
76 | 			Create the array with our *first* matrix value
77 | 		{% endcomment %}
78 | 		{% assign newArray = matrix | split:',' %}
79 | 	{% endif %}
80 | {% endfor %}
81 | 
82 | {% comment %}
83 | 	Sort the array. Add in a reverse filter if you need to go the other direction.
84 | 	{% assign newArray = newArray | sort | reverse %}
85 | {% endcomment %}
86 | {% assign newArray = newArray | sort %}
87 | 
88 | {% comment %}
89 | 	Now that we have sorted the array we can loop over it grabbing each specific 
90 | 	item using its index#.
91 | {% endcomment %}
92 | {% for newArrayItem in newArray %}
93 | 	{% assign i = newArrayItem | split:'.' | last | abs %}
94 | 	<div>
95 | 		<h2>{{ collection.products[i].title }}</h2>
96 | 		<p>My original index was {{ i }}, but now it is {{ forloop.index0 }}</p>
97 | 	</div>
98 | {% endfor %}


--------------------------------------------------------------------------------
/Starts with string check in Shopify Liquid/starts-with-example.liquid:
--------------------------------------------------------------------------------
1 | {% assign stringToCheck = 'freakdesign' %}
2 | {% assign startsWith = 'freak' %}
3 | {% assign checkArray = stringToCheck | split:startsWith %}
4 | 
5 | {% if checkArray[0] == blank %}
6 |   The string {{ stringToCheck }} does start with {{ startsWith }}.
7 | {% else %}
8 |   The string {{ stringToCheck }} does NOT start with {{ startsWith }}.
9 | {% endif %}


--------------------------------------------------------------------------------
/Translate date strings into other languages/README.md:
--------------------------------------------------------------------------------
 1 | # Translate a date string with Shopify Liquid 
 2 | 
 3 | Shopify Liquid has allows you to change the formatting of the date string but the default output is English. If you want to change the days or months to be shown in another language you'll need to translate it. Let's explore some code to do just that.
 4 | 
 5 | Refers to the [freakdesign blog post](http://freakdesign.com.au/blogs/news/translate-a-liquid-date-string-in-shopify) on translating date strings.
 6 | 
 7 | ### Usage
 8 | - Create a snippet `date-translate.liquid`
 9 | - Copy and paste the code shown here
10 | - Include snippet where needed
11 | 
12 | *Snippet usage #1:*
13 | ```
14 | {%- include dateTranslate, dateString:article.published_at language:'French' -%}
15 | ```
16 | 
17 | *Snippet usage #2:*
18 | ```
19 | {%- assign newDate = 'now' | date:'%A %B %d, %Y' -%}
20 | {%- include dateTranslate, dateString:newDate language:'French' -%}
21 | ```
22 | 


--------------------------------------------------------------------------------
/Translate date strings into other languages/date-translate.liquid:
--------------------------------------------------------------------------------
 1 | {%- comment -%}
 2 | <!--
 3 | 
 4 |      _       _         _                       _       _
 5 |   __| | __ _| |_ ___  | |_ _ __ __ _ _ __  ___| | __ _| |_ ___
 6 |  / _` |/ _` | __/ _ \ | __| '__/ _` | '_ \/ __| |/ _` | __/ _ \
 7 | | (_| | (_| | ||  __/ | |_| | | (_| | | | \__ \ | (_| | ||  __/
 8 |  \__,_|\__,_|\__\___|  \__|_|  \__,_|_| |_|___/_|\__,_|\__\___|
 9 | 
10 | 
11 | Date translation snippet for Shopify without using Locale json.
12 | (This could be adapted for any translation needs)
13 | Written by Jason @freakdesign
14 | 
15 | usage:
16 | {%- include dateTranslate, dateString:article.published_at language:'French' -%}
17 | 
18 | or
19 | 
20 | {%- assign newDate = 'now' | date:'%A %B %d, %Y' -%}
21 | {%- include dateTranslate, dateString:newDate language:'Norwegian' -%}
22 | 
23 | -->
24 | {%- endcomment -%}
25 | 
26 | {%- for i in (1..1) -%}
27 | 
28 |   {%- assign debug = false -%}
29 |   {%- assign datesSupported = 'English,Norwegian,French,Spanish' | split:',' -%}
30 |   {%- assign dateFormat = format | default:'%A %B %d, %Y' -%}
31 | 
32 |   {%- if debug -%}
33 |     {%- assign language = 'French' -%}
34 |     {%- assign dateString = 'now' | date:dateFormat -%}
35 |   {%- endif -%}
36 |   
37 |   {%- if dateString == blank or language == blank -%}{% break %}{%- endif -%}
38 |   {%- unless datesSupported contains language -%}{% break %}{%- endunless -%}
39 | 
40 |   {%- assign daysEnglish = 'Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday' | split:',' -%}
41 |   {%- assign monthsEnglish = 'January,February,March,April,May,June,July,August,September,October,November,December' | split:',' -%}
42 | 
43 |   {%- assign daysNorwegian = 'mandag,tirsdag,onsdag,torsdag,fredag,lørdag,søndag' | split:',' -%}
44 |   {%- assign monthsNorwegian = 'januar,februar,mars,april,mai,juni,juli,august,september,oktober,november,desember' | split:',' -%}
45 | 
46 |   {%- assign daysFrench = 'lundi,mardi,mercredi,jeudi,vendredi,samedi,dimanche' | split:',' -%}
47 |   {%- assign monthsFrench = 'janvier,février,mars,avril,mai,juin,juillet,août,septembre,octobre,novembre,décembre' | split:',' -%}
48 | 
49 |   {%- assign daysSpanish = 'lunes,martes,miércoles,jueves,viernes,sábado,domingo' | split:',' -%}
50 |   {%- assign monthsSpanish = 'enero,febrero,marzo,abril,mayo,junio,julio,agosto,septiembre,octubre,noviembre,diciembre' | split:',' -%}
51 | 
52 |   {%- assign currentDays = 'days' | append:language -%}
53 |   {%- assign currentMonths = 'months' | append:language -%}
54 | 
55 |   {%- assign currentDaysArray = [currentDays] -%}
56 |   {%- assign currentMonthsArray = [currentMonths] -%}
57 | 
58 |   {%- assign shortSlice = 3 -%}
59 |   
60 |   {%- for _i in (0..11) -%}
61 |     {%- if _i < 7 -%}
62 |       {%- assign shortDateFormatEnglish = daysEnglish[_i] | slice:0,shortSlice -%}
63 |       {%- assign shortDateFormatCurrent = currentDaysArray[_i] | slice:0,shortSlice -%}
64 |       {%- assign dateString = dateString | replace:daysEnglish[_i],currentDaysArray[_i] | replace:shortDateFormatEnglish,shortDateFormatCurrent -%}
65 |     {%- endif -%}
66 |     {%- assign shortMonthFormatEnglish = monthsEnglish[_i] | slice:0,shortSlice -%}
67 |     {%- assign shortMonthFormatCurrent = currentMonthsArray[_i] | slice:0,shortSlice -%}
68 |     {%- assign dateString = dateString | replace:monthsEnglish[_i],currentMonthsArray[_i] | replace:shortMonthFormatEnglish,shortMonthFormatCurrent -%}
69 |   {%- endfor -%}
70 | 
71 |   {{- dateString -}}
72 | 
73 | {%- endfor -%}


--------------------------------------------------------------------------------
/Use articles to shedule theme updates/README.md:
--------------------------------------------------------------------------------
1 | # Use articles to schedule updates on the home page
2 | The need to schedule content changes in Shopify is something that apps are great at since the API gives many options for changes in content, and theme. Now if you're feeling a little DIY and want to build in something without an app there is way - let's explore it.
3 | 
4 | This is related to [this blog post](http://freakdesign.com.au/blogs/news/use-articles-to-schedule-updates-on-the-home-page).


--------------------------------------------------------------------------------
/Use articles to shedule theme updates/show-collection-based-on-last-article.liquid:
--------------------------------------------------------------------------------
 1 | {%- for article in blog.scheduler.articles limit:1 -%}
 2 |   
 3 |   {%- comment -%}
 4 |   	Get the handle from the excerpt and remove and surrounding whitespace
 5 |   {%- endcomment -%}
 6 |   {%- assign collectionHandle = article.excerpt | strip -%}
 7 | 
 8 |   {%- comment -%}
 9 |   	Make sure we don't have an empty string. If we do, stop!
10 |   {%- endcomment -%}
11 |   {% if collectionHandle.length < 1 or collectionHandle == blank %}{% break %}{% endif %}
12 | 
13 |   {%- comment -%}
14 |   	Do we have a real collection? If not, stop!
15 |   {%- endcomment -%}
16 |   {% assign featuredCollection = collections[collectionHandle] %}
17 |   {% if featuredCollection.products.size < 1 %}{% break %}{% endif %}  
18 | 
19 |   {%- comment -%}
20 |   	We have a real collection with products. 
21 |   	Let's show 6 products from the collection. Only a very simple example is shown here - nothing pretty...
22 |   {%- endcomment -%}
23 | 
24 | 
25 |   <section class="scheduled-collection">
26 |     {%- for featureProduct in featuredCollection.products limit:6 -%}
27 |       <article>
28 |         <p>{{ featureProduct.title }}</p>
29 |         <p><a href="{{ featureProduct.url }}">View the product</a></p>
30 |       </article>
31 |     {% endfor %}
32 |   </section>
33 | 
34 | {%- endfor -%}


--------------------------------------------------------------------------------
/Use variant image on Gift Card template/README.md:
--------------------------------------------------------------------------------
1 | # Show the Shopify gift card variant image on the gift_card.liquid template
2 | Example code to show how to use the variant image on the Gift Card template instead of a generic preset one.
3 | 
4 | Relates to the blog post on [Show the Shopify gift card variant image](https://freakdesign.com.au/blogs/news/show-the-gift-card-variant-image-on-the-gift_card-liquid-template). 
5 | 


--------------------------------------------------------------------------------
/Use variant image on Gift Card template/capture-image.liquid:
--------------------------------------------------------------------------------
 1 | {%- assign cardPrice = gift_card.initial_value -%}
 2 | {%- assign giftCardProduct = linklists.admin-gift-card.links.first.object -%}
 3 | {%- assign customImage = 'gift-card/card.jpg' | shopify_asset_url -%}
 4 | {%- for variant in giftCardProduct.variants -%}
 5 |   {%- if variant.price != cardPrice %}{% continue %}{% endif -%}
 6 |   {%- if variant.image.src == blank %}{% break %}{% endif -%}
 7 |   {%- assign customImage = variant.image | img_url:'949x' -%}
 8 |   {%- break -%}
 9 | {%- endfor -%}
10 | 
11 | 
12 | {%- comment -%}
13 |   Somewhere in your template you'll have the image shown. Instead of hard coding in
14 |   the source, we replace that with the variable we created above.
15 | {%- endcomment -%}
16 | <img class="giftcard__image" src="{{ customImage }}" alt="Gift card illustration">


--------------------------------------------------------------------------------
/Use variant image on Gift Card template/gift_card.liquid:
--------------------------------------------------------------------------------
  1 | {% layout none %}
  2 | {% assign formatted_initial_value = gift_card.initial_value | money_without_trailing_zeros: gift_card.currency %}
  3 | {% assign formatted_initial_value_stripped = formatted_initial_value | strip_html %}
  4 | 
  5 | <!doctype html>
  6 | <!--[if IE 9]><html class="ie9 no-js" lang="{{ shop.locale }}"> <![endif]-->
  7 | <!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js" lang="{{ shop.locale }}"> <!--<![endif]-->
  8 | 
  9 | <head>
 10 |   <meta charset="utf-8">
 11 |   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 12 |   <meta name="viewport" content="width=device-width,initial-scale=1">
 13 |   <meta name="theme-color" content="{{ settings.color_primary }}">
 14 |   <link rel="canonical" href="{{ canonical_url }}">
 15 | 
 16 |   {% if settings.favicon_enable %}
 17 |     <link rel="shortcut icon" href="{{ 'favicon.png' | asset_url }}" type="image/png" />
 18 |   {% endif %}
 19 | 
 20 |   <title>{{ 'gift_cards.issued.title_html' | t: value: formatted_initial_value_stripped, shop: shop.name }}</title>
 21 |   <meta name="description" content="{{ 'gift_cards.issued.subtext' | t }}">
 22 | 
 23 |   {{ 'theme.scss.css' | asset_url | stylesheet_tag }}
 24 | 
 25 |   {{ content_for_header }}
 26 | 
 27 |   {{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' | script_tag }}
 28 |   {{ 'modernizr.gift-card.js' | shopify_asset_url | script_tag }}
 29 | </head>
 30 | 
 31 | <body id="{{ page_title | handle }}" class="template-giftcard">
 32 | 
 33 |   {% comment %} =================== START CUSTOM CODE =================== {% endcomment %}
 34 |   {%- assign cardPrice = gift_card.initial_value -%}
 35 |   {%- assign giftCardProduct = linklists.admin-gift-card.links.first.object -%}
 36 |   {%- assign customImage = 'gift-card/card.jpg' | shopify_asset_url -%}
 37 |   {%- for variant in giftCardProduct.variants -%}
 38 |     {%- if variant.price != cardPrice %}{% continue %}{% endif -%}
 39 |     {%- if variant.image.src == blank %}{% break %}{% endif -%}
 40 |     {%- assign customImage = variant.image | img_url:'949x' -%}
 41 |     {%- break -%}
 42 |   {%- endfor -%}
 43 |   {% comment %} ==================== END CUSTOM CODE ==================== {% endcomment %}
 44 | 
 45 |   <div class="page-width text-center">
 46 |     <header class="giftcard__header" role="banner">
 47 |       <h1 class="site-header__logo" itemscope itemtype="http://schema.org/Organization">
 48 |         {% if settings.logo_use_image %}
 49 |           <a href="/" itemprop="url" class="site-header__logo-link">
 50 |             <img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" itemprop="logo">
 51 |           </a>
 52 |         {% else %}
 53 |           <a href="/" itemprop="url">{{ shop.name }}</a>
 54 |         {% endif %}
 55 |       </h1>
 56 |       <div class="giftcard__shop-url">{{ shop.url | escape }}</div>
 57 |     </header>
 58 | 
 59 |     <div class="giftcard__content">
 60 |       <main class="giftcard__wrapper{% if gift_card.expired or gift_card.enabled != true %} giftcard__disabled{% endif %}" role="main">
 61 | 
 62 |         <h2 class="h3 giftcard__title">{{ 'gift_cards.issued.subtext' | t }}</h2>
 63 |         {% unless gift_card.enabled %}
 64 |           <span class="giftcard__tag">{{ 'gift_cards.issued.disabled' | t }}</span>
 65 |         {% endunless %}
 66 |         {% assign gift_card_expiry_date = gift_card.expires_on | date: "%d/%m/%y" %}
 67 |         {% if gift_card.expired and gift_card.enabled %}
 68 |            <span class="giftcard__tag">{{ 'gift_cards.issued.expired' | t: expiry: gift_card_expiry_date }}</span>
 69 |         {% endif %}
 70 |         {% if gift_card.expired != true and gift_card.expires_on and gift_card.enabled %}
 71 |           <span class="giftcard__tag giftcard__tag--active">{{ 'gift_cards.issued.active' | t: expiry: gift_card_expiry_date }}</span>
 72 |         {% endif %}
 73 | 
 74 |         <div class="giftcard__wrap">
 75 |           <img class="giftcard__image" src="{{ customImage }}" alt="Gift card illustration">
 76 | 
 77 |           <div class="giftcard__amount-wrapper">
 78 |             {% assign initial_value_size = formatted_initial_value | size %}
 79 |             <h2 class="giftcard__amount">{{ formatted_initial_value }}</h2>
 80 | 
 81 |             {% if gift_card.balance != gift_card.initial_value %}
 82 |               <p class="giftcard__amount-remaining">{{ 'gift_cards.issued.remaining_html' | t: balance: gift_card.balance | money }}</p>
 83 |             {% endif %}
 84 |           </div>
 85 | 
 86 |           {% assign code_size = gift_card.code | format_code | size %}
 87 |           <div class="giftcard__code">
 88 |             <div class="giftcard__code-bubble">
 89 |               <strong class="giftcard__code-text" id="GiftCardDigits">{{ gift_card.code | format_code }}</strong>
 90 |             </div>
 91 |           </div>
 92 |         </div>
 93 | 
 94 |         <p class="giftcard__instructions">
 95 |           {{ 'gift_cards.issued.redeem' | t }}
 96 |         </p>
 97 | 
 98 |         <p>
 99 |           <a href="{{ shop.url }}" class="btn" target="_blank">{{ 'gift_cards.issued.shop_link' | t }}</a>
100 |         </p>
101 | 
102 |         <p>
103 |           <div id="QrCode" class="giftcard__qr-code" data-identifier="{{ gift_card.qr_identifier }}"></div>
104 |         </p>
105 | 
106 |         {% if gift_card.pass_url %}
107 |           <p>
108 |             <a class="giftcard__apple-wallet" href="{{ gift_card.pass_url }}">
109 |               <img class="giftcard__apple-wallet-image" src="{{ 'gift-card/add-to-apple-wallet.svg' | shopify_asset_url }}" width="120" height="40" alt="{{ 'gift_cards.issued.add_to_apple_wallet' | t }}">
110 |             </a>
111 |           </p>
112 |         {% endif %}
113 | 
114 |         <p>
115 |           <a href="#" id="PrintGiftCard" class="giftcard__print-link">
116 |             {{ 'gift_cards.issued.print' | t }}
117 |           </a>
118 |         </p>
119 | 
120 |       </main>
121 |     </div>
122 |   </div>
123 | 
124 |   {{ 'vendor/qrcode.js' | shopify_asset_url | script_tag }}
125 |   {{ 'theme.js' | asset_url | script_tag }}
126 | 
127 | </body>
128 | </html>
129 | 


--------------------------------------------------------------------------------