Skip to content

Instantly share code, notes, and snippets.

Avatar
🤘

Stewart Knapman stewartknapman

🤘
View GitHub Profile
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.

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 / 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 / Readme.md
Last active Mar 7, 2019
Shopify: Track the last viewed collection and update any continue shopping links.
View Readme.md

ContinueShopping

Track the last collection by storing or updating a cookie on every collection page visit. If it comes across a continue shopping link then it updates that link to point back to that last collection.

Add the attribute data-continue-shopping-link to any link you want to act as a continue shopping link.

Requires the current template to be passed to it from liquid:

<script>
@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 / Readme.md
Created Dec 18, 2018
The scripts portion of a package.json file used for Shopify theme development
View Readme.md

The scripts portion of a package.json file used for Shopify theme development.

To run use the command npm run build.

Watch and build JS files in the _src/js/ folder. This will create a minified file and a debug version (including a sourcemap) for development, and add them to the assets folder.

We also watch for changes the main theme.js file in the assets folder and then minify this for production.

View title-case.liquid
{% comment %}
Title case a string of text.
Usage: {% include 'title-case' string: 'my string' %}
{% endcomment %}
{%- capture str -%}{%- endcapture -%}
{%- assign small_words = 'a|an|and|as|at|but|by|en|for|if|in|nor|of|on|or|per|the|to|vs|vs.|via|with' | split:'|' -%}
{%- assign string_parts = string | split: ' ' -%}
{%- for p in string_parts -%}
{%- assign is_small = false -%}
View adopt.liquid
{% comment %}
Remove orphans from a string of text by adding a non-breaking space between the last two words.
Usage: {% include 'adopt' string: 'my string' %}
{% endcomment %}
{%- assign string_parts = string | split: ' ' -%}
{%- assign last_part = string_parts | last -%}
{% if last_part contains '&nbsp;' %}
{{ string }}
{% else %}
@stewartknapman
stewartknapman / _scan_string.liquid
Last active May 22, 2017
Take a some Shopify content, such as product.description or page.content and add `srcset` to any of its images.
View _scan_string.liquid
{% capture func %}
{% comment %}
Scan String:
Scan a string looking for things
Parameters:
Content: the content to be scaned
Split: the item to split the string with
Start: the thing that says we can start collecting
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
You can’t perform that action at this time.