Skip to content

Instantly share code, notes, and snippets.

@DanWebb
DanWebb / read_more.js
Created July 31, 2015 06:58
Add a read more link to any text block
$.fn.extend({
readMore: function(truncate) {
return this.each(function() {
var $self = $(this);
var originalText = $self.text();
if(originalText.length<=truncate) return;
$self.text($.trim(originalText).substring(0, truncate));
@DanWebb
DanWebb / variant_selection.js
Last active September 15, 2015 07:21
Variant option selection with tabs instead of select boxes and no need to initialise it in the product template.
// Product page variant option selection
var VariantSelect = (function() {
var $variantSelection;
// The selection filters from top to bottom. Only the 2nd and 3rd option
// variants can become unavailable
function setUnavailable(index) {
var option1 = $variantSelection.find('.active[data-index="0"]').data('option1');
@DanWebb
DanWebb / jsonp.js
Last active August 29, 2015 14:24 — forked from gf3/jsonp.js
JSONP in plain JS
/**
* loadJSONP( url, hollaback [, context] ) -> Null
* - url (String): URL to data resource.
* - hollaback (Function): Function to call when data is successfully loaded,
* it receives one argument: the data.
* - context (Object): Context to invoke the hollaback function in.
*
* Load external data through a JSONP interface.
*
* ### Examples
@DanWebb
DanWebb / replacements.js
Last active August 29, 2015 14:23
A very simple, small js templating engine
// replace any occurences of str with a matching key:value pair
function replacements(template, replacement) {
return template.replace(/{([^}]+)}/g, function (match) {
return replacement[match];
});
}
// usage
var template = 'Hi { name }, you are { age } years old.';
console.log(
@DanWebb
DanWebb / imgURL.js
Last active October 10, 2021 16:31
Specify a size for a Shopify image asset url. Equivalent to the liquid image size filter: `{{ image | img_url: "medium" }}`
String.prototype.imgURL = function(size) {
// remove any current image size then add the new image size
return this
.replace(/_(pico|icon|thumb|small|compact|medium|large|grande|original|1024x1024|2048x2048|master)+\./g, '.')
.replace(/\.jpg|\.png|\.gif|\.jpeg/g, function(match) {
return '_'+size+match;
})
;
};
@DanWebb
DanWebb / image_scale.css
Created May 9, 2015 08:10
Make all images of varying sizes scale evenly in a grid
/* presuming that the a element has a background image */
.grid .column a {
width: 100%;
overflow: hidden;
display: block;
/* scale the image proportionally based on the elements height and width */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
@DanWebb
DanWebb / get_blog_name.liquid
Created May 2, 2015 09:09
Get a blog name when you only have the article to work with
{% assign blog_name = get_blog_name.url | remove: '/blogs/' %}
{% assign blog_name = blog_name | split: '/' %}
{% assign blog_name = blog_name[0] | replace: '-', ' ' | capitalize %}
{{ blog_name }}
@DanWebb
DanWebb / latest_posts.liquid
Last active August 29, 2015 14:20
Get any amount of latest blog posts among any amount of different blogs
{% comment %}
blog_handles should contain the handles of each blog you want to pull posts from
seperated by commas.
{% endcomment %}
{% assign blog_handles = 'blog-1,blog-2,blog-3,blog-4,blog-5' | split: ',' %}
{% comment %}initialise the previous_article_timestamp as the current time{% endcomment %}
{% assign previous_article_timestamp = 'now' | date: '%s' %}
{% comment %}i represents the number of featured articles that will be shown{% endcomment %}
@DanWebb
DanWebb / some_stock.liquid
Created May 2, 2015 08:20
Get whether some (but not all) of the variants products are out of stock
{% assign some_stock = false %}
{% assign out_of_stock = 0 %}
{% for variant in product.variants %}
{% if variant.available == false %}
{% assign out_of_stock = out_of_stock | plus: 1 %}
{% endif %}
{% endfor %}
{% if product.variants.size != out_of_stock and out_of_stock > 0 %}
{% assign some_stock = true %}
{% endif %}
@DanWebb
DanWebb / shopify_select.css
Last active August 29, 2015 14:19
Shopify admin like custom select box with bootstrap and jquery
.custom-select {
position: relative;
width: 100%;
}
.custom-select > span {
border-radius: 3px;
border: 1px solid #d3dbe2;
padding: 5px 15px;
color: #479ccf;
cursor: pointer;