Skip to content

Instantly share code, notes, and snippets.

@DanWebb
DanWebb / address_summary.liquid
Last active April 18, 2023 07:18
Customer Addresses - Dependant on: {{ 'shopify_common.js' | shopify_asset_url | script_tag }} being included in the themes head. Not dependant on {{ 'customer_area.js' | shopify_asset_url | script_tag }} to avoid being restricted to just toggling visibility of address forms rather than opening a popup or anything else.
{% comment %}
This include requires you pass in two variables.
{{ add }}: The address being listed
{{ edit }}: Boolean value if the address can be edited on this page
Example:
{% for address in customer.addresses %}
{% include 'address_summary', add: address, edit: true %}
{% endfor %}
@DanWebb
DanWebb / collection.liquid
Created May 8, 2014 09:45
Shopify filter code with working example
<!-- add the options +tags to the listed products attributes -->
{% if p.options[0] == 'Color' %}{% capture colours %}{% for variant in p.variants %}{% unless forloop.first %},{% endunless %}{{ variant.options[0] }}{% endfor %}{% endcapture %}{% endif %}
{% if p.options[1] == 'Material' %}{% capture materials %}{% for variant in p.variants %}{% unless forloop.first %},{% endunless %}{{ variant.options[1] }}{% endfor %}{% endcapture %}{% endif %}
{% if p.options[2] == 'Style' %}{% capture styles %}{% for variant in p.variants %}{% unless forloop.first %},{% endunless %}{{ variant.options[2] }}{% endfor %}{% endcapture %}{% endif %}
{% if p.tags %}{% capture tagg %}{% for tag in p.tags %}{% if tag contains 'recommended:' %}{% unless forloop.first %},{% endunless %}{{ tag | replace: 'recommended:', '' }}{% endif %}{% endfor %}{% endcapture %}{% endif %}
<div class="product" data-colours="{{ colours | escape }}" data-materials="{{ materials | escape }}" data-styles="{{ styles | escape }}" data-tags="{{ tagg | esc
@DanWebb
DanWebb / sale_percentage.liquid
Last active October 27, 2021 16:11
Add a percentage sale to an item listing (ex: 20% off) based off it's compare at price and actual price
{% comment %}
Get a products sale percentage based off it's compare_at_price vs it's price
Example usage:
{% include 'sale_percentage' with product %} Off
Outputs for a product with a compare at price of £10 and a price of £5:
"50% Off"
{% endcomment %}
@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 / scroll.html
Last active June 21, 2021 21:01
Shopify infinite scrolling
<!--
a new template will need to be created for this file then this will
be what's called from the ajax by sending it with a property of
view:*template name*.
-->
{% layout none %}
{% paginate items by 5 %}
{% for item in items %}
<!-- item html -->
@DanWebb
DanWebb / related_products.liquid
Last active June 21, 2021 21:01
Shopify related products liquid
@DanWebb
DanWebb / addItems.js
Created January 30, 2015 18:29
Shopify only allows us to make a single call at a time adding one item at a time. Here's a method to add multiple items to the cart at once which works around that.
// add multiple items to the cart by passing an array of item objects
function addItems(items, callback) {
if(!items.length) {
// we ran out of items
if(typeof callback === 'function') callback();
return;
}
$.ajax('/cart/add.js', {
type:'POST',
@DanWebb
DanWebb / cart.js
Created February 12, 2015 12:54
General functions for creating AJAX based Shopify Quick carts or cart pages
var Cart = (function($, Shopify) {
var list = '.sproducts';
var total = '.shoppingbag-total';
function updateTotal() {
Shopify.getCart(function(data) {
$(total).text(Shopify.formatMoney(data.total_price, '£\{\{amount}}'));
});
}
@DanWebb
DanWebb / styled-ul
Last active February 5, 2018 08:06
Style ol and ul numbers or bullets separately
ul {
list-style: none;
padding-left: 1.1225em;
}
ul li {
position: relative;
padding-bottom: 3px;
}
@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));