Skip to content

Instantly share code, notes, and snippets.

Avatar
🤘

Stewart Knapman stewartknapman

🤘
View GitHub Profile
View accordian.js
(function () {
if (!document.querySelector && !window.addEventListener && !("classList" in document.createElement("p"))) return;
var ready = function (callback, ctx) {
if (typeof callback !== 'function') return;
if (document.readyState !== "loading") {
callback.apply(ctx);
} else {
document.addEventListener("DOMContentLoaded", function () {
@stewartknapman
stewartknapman / product.liquid
Last active Jun 2, 2021
Basic accordion for Shopify product
View product.liquid
{% 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>
View Find what code changed the DOM.md

Have you ever tried to track down which piece of javascript modified the DOM? Use a mutationObserver to monitor the DOM for changes. Then run console.trace() inside the callback. This will log a stack trace all the way back to the code that did the DOM modification. Basically copy and paste this code.

@stewartknapman
stewartknapman / shopify-money.js
Created Feb 27, 2017
The Shopify.formatMoney method extracted from option_selection.js for stand-alone purposes.
View shopify-money.js
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 / _shopify_add_free_product.md
Last active Mar 19, 2021
Automagically add a free product to the customers cart when they purchase a certain product(s)
View _shopify_add_free_product.md

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 / style.liquid.scss
Last active Dec 2, 2020
Compile sass into liquid
View style.liquid.scss
// Escape Liquid in scss.
//
// Expected output:
// a{
// color: {{ settings.link-color }};
// }
a{
color: #{'{{ settings.link-color }}'};
}
View Font names to numbers
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 / Tabs.scss
Last active Jun 13, 2019
Tabs for use with Debut
View Tabs.scss
.description-tab__header {
padding-top: 1.5em;
.no-js &:first-child {
padding-top: 0;
}
}
.has-tabs {
.description-tabs {
position: relative;
@include display-flexbox();
@stewartknapman
stewartknapman / showcase-product-gallery.liquid
Last active May 14, 2019
Shopify section for Showcase Instagram app supplied by the app. https://apps.shopify.com/shop-instagram
View showcase-product-gallery.liquid
@stewartknapman
stewartknapman / lib.js
Last active Mar 14, 2019
Commonly reused functions in JS
View lib.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]);