Skip to content

Instantly share code, notes, and snippets.

View stewartknapman's full-sized avatar
🤘

Stewart Knapman stewartknapman

🤘
View GitHub Profile
100 ultra light/thin
200 light/thin
300 book/light
400 roman/normal
500 med
600 semibold
700 bold
800 heavy
900 black
@stewartknapman
stewartknapman / shopify-account-register.liquid
Last active March 29, 2017 22:53
Redirect the Shopify account register form to custom message pages
{% if form.errors and form.errors contains "form" %}
{% capture error_output %}{{ form.errors | default_errors }}{% endcapture %}
{% capture reset_password %}{{ 'shopify.errors.reset_password_html' | t }}{% endcapture %}
{% capture verify_email %}{{ 'shopify.errors.verify_email' | t: customer_email: "*" | split: "*" | first }}{% endcapture %}
{% if error_output contains reset_password %}
<script>
window.location = "/pages/you-have-an-account";
</script>
{% elsif error_output contains verify_email %}
@stewartknapman
stewartknapman / shopify-money.js
Created February 27, 2017 23:25
The Shopify.formatMoney method extracted from option_selection.js for stand-alone purposes.
var Shopify = Shopify || {};
// ---------------------------------------------------------------------------
// Money format handler
// ---------------------------------------------------------------------------
Shopify.money_format = "${{amount}}";
Shopify.formatMoney = function(cents, format) {
if (typeof cents == 'string') { cents = cents.replace('.',''); }
var value = '';
var placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
var formatString = (format || this.money_format);
@stewartknapman
stewartknapman / product.liquid
Last active January 5, 2023 12:06
Basic accordion for Shopify product
{% comment %}
<!--
Liquid will output content, split on h3s like this:
<div class="accordian">
<h5><a href="#free-shipping" data-accordian-action>Free & Fast USA Shipping <span>+</span></a></h5>
<p id="free-shipping" data-accordian-target>All orders are shipped through USPS. We pride ourselves on fast delivery. Orders typically arrive within 2-5 business days. You will receive an email with tracking information when your order is ready to ship.</p>
<h5><a href="#international-shipping" data-accordian-action>International Shipping <span>+</span></a></h5>
<p id="international-shipping" data-accordian-target>International shipping rates vary based on item(s). Shipping rates can be seen on the checkout page. International orders typically arrive within 7-10 business days, but can vary with customs clearance in each country. </p>
</div>
@stewartknapman
stewartknapman / _shopify_add_free_product.md
Last active March 19, 2021 13:30
Automagically add a free product to the customers cart when they purchase a certain product(s)

We want to automagically add a free product to the customers cart when they purchase a certain product(s).

Note: This code will likely need to be adapted to suit your theme, however it should be enough to discribe the concept.

Add the free product

  1. Define the free product and which products can add it. We create some theme setting that allow us to pick the free product and a collection of products that can add it. e.g. settings.free-product and settings.free-product-collection
@stewartknapman
stewartknapman / swipe-events.js
Created May 24, 2016 23:34
Swipe events with `onswipe[Direction]` handlers on elements
// To use add an `onswipeLeft`, `onswipeRight`, `onswipeUp` or `onswipeDown` function on any dom element
// i.e. document.querySelector('.my-ele').onswipeLeft = function () { ... };
module.exports = function (threshold) {
var Swipe = function () {
this.threshold = threshold || 5;
this.xDown = null;
this.yDown = null;
this.add_event_listeners();
};
@stewartknapman
stewartknapman / lib.js
Last active March 14, 2019 01:21
Commonly reused functions in JS
module.exports = {
/*
Array Functions
*/
// For each item in Array
each: function (arr, callback, ctx) {
var r;
for (var i = 0; i < arr.length; i++) {
ctx = ctx || arr[i];
r = callback.apply(ctx, [arr[i], i]);
/*
===
Responsive Banners and Homepage Carousel for Squarespaces Bedford Theme
===
The sizes are based on banners that are 2048px x 420px with a 1024px x 420px safe zone (won't be cut off on small screens)
To make a homepage carousel: https://support.squarespace.com/hc/en-us/articles/206545097-Formatting-special-banners
*/
@stewartknapman
stewartknapman / elementQueries.js
Last active May 15, 2017 03:32
Media queries but for elements rather than the window.
/*
Pollyfill for window.getComputedStyle()
*/
if (!window.getComputedStyle) {
window.getComputedStyle = function(el, pseudo) {
this.el = el;
this.getPropertyValue = function(prop) {
var re = /(\-([a-z]){1})/g;
if (prop == 'float') prop = 'styleFloat';
if (re.test(prop)) {
{% comment Note:
Takes a block of content, separates out the images from the text and then wraps
them in markup so that they can be displayed in columns side by side.
We split the content on tags and spaces then scan through it all looking for the things we want.
Why?! Because reasons!
%}{% endcomment %}