Skip to content

Instantly share code, notes, and snippets.

Avatar
🤘

Stewart Knapman stewartknapman

🤘
View GitHub Profile
@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 / 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 / shopify_checkout_reset.css
Last active Jun 6, 2017
A reset of the Shopify checkout stylesheet.
View shopify_checkout_reset.css
/*
* Shopify checkout reset
*/
/* Reset base elements */
body, h1, h2, h3, h4, h5, h6, p, h1 span.subtitle, h3.divider, #welcome, #container, #container.slim, #main, #container.slim #main, #content, #header, #container.slim #header, #header h1,
#info-bar, #footer, .footer p, #container.slim #footer, #overview, #overview h2, #overview a, #products, #done, #wallet, div.wallet-highlight, #cost, #order-num, #success, #steps, #thumbs,
#thumbs div, #thumbs td, .slim #thumbs td, #thumbs h3, #thumbs h3 span, #thumbs span, #overview .hint, #payment-type, #payment-type li, #payment-type li:hover, li.text-payment, .center,
#addresses, #email, #email label, #email input, #shipping-same label, .address-notification, #gateway-logos, #gateway-logos img, #pay-with, #pay-with h3, #payment, #or, #payment-methods li,
#payment-methods input, #credit-card-valid, img.credit-card, .field-with-errors, .field-with-errors input, .field-with-errors .error-message, .severe-error, .gleft, .gright, label,
@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
@stewartknapman
stewartknapman / elementQueries.js
Last active May 15, 2017
Media queries but for elements rather than the window.
View elementQueries.js
/*
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)) {
@stewartknapman
stewartknapman / shopify-account-register.liquid
Last active Mar 29, 2017
Redirect the Shopify account register form to custom message pages
View shopify-account-register.liquid
{% 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 %}
View page_url.liquid
{% capture function %}
{% comment note:
Shopify, crazily enough, does not have a global object that returns the current url like it does for the page_title.
So lets fake one.
It will take into account filtered collections.
It will not take into account url params and hash anchors, because reasons.
page_url_with_shop_domain gives you the page_url with the shop.url prepended.
%}{% endcomment %}
{% if template contains '404' %}
@stewartknapman
stewartknapman / swipe-events.js
Created May 24, 2016
Swipe events with `onswipe[Direction]` handlers on elements
View swipe-events.js
// 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();
};