Skip to content

Instantly share code, notes, and snippets.

Avatar

Will Broderick willbroderick

  • Clean Canvas Ltd
  • Nottingham, UK
View GitHub Profile
@willbroderick
willbroderick / modelviewer-extra.js
Last active Mar 16, 2020
Shopify Model Viewer UI inside slideshow
View modelviewer-extra.js
/*
A Gist to keep track of what was needed to make the Shopify Model Viewer UI
propagate events in a way that allows us to use it in a slideshow/carousel.
Works in Slick and Swiper. Other JS was obviously required outside here.
This is just for reference. This was called on a loop for each 3D model.
Add this SCSS:
.shopify-model-viewer-ui {
@willbroderick
willbroderick / search.json.liquid
Last active Dec 2, 2019
Drop-in fallback template for Shopify Predictive Search API
View search.json.liquid
{%- layout none -%}
{%- paginate search.results by 6 -%}
{%- capture products_output -%}
{%- for result in search.results -%}
{%- if result.object_type == 'product' -%}
,{"title":{{ result.title | json }},"url":{{ result.url | json }}
{%- if result.images and result.images.size > 0 -%}
,"image":{{ result.images[0] | img_url: 'master' | json }}
{%- endif -%}
,"vendor":{{ result.vendor | json }},"price_max":{{ result.price_max }},"price_min":{{ result.price_min }},"compare_at_price_min":{{ result.compare_at_price_min }}}
@willbroderick
willbroderick / instructions.txt
Created Feb 20, 2019
Pre-order in a Clean Themes Sectioned theme (excluding Boost)
View instructions.txt
Warning: This does NOT work with quick-buys.
1. Copy and paste the following to the bottom of Templates/product.liquid:
{% for collection in product.collections %}
{% if collection.handle == 'pre-order' %}
<script>$('[action^="/cart/add"] input[type=submit]').val('Pre order'); theme.OptionManager.strings.buttonDefault = 'Pre order';</script>
{% endif %}
{% endif %}
@willbroderick
willbroderick / load-script.js
Last active Jan 8, 2019
Load a script from a URL, with before/after callbacks & queueing
View load-script.js
// Load a script from a URL, with callbacks
// If a 'before' callback is specified, script will load synchronously
{
window.scriptsLoaded = {};
window.loadScriptOnce = function(src, callback, beforeRun) {
if(typeof window.scriptsLoaded[src] === 'undefined') {
window.scriptsLoaded[src] = [];
var tag = document.createElement('script');
tag.src = src;
@willbroderick
willbroderick / show-featured-image-not-variant-image.js
Last active Feb 27, 2018
Show featured image on page load, not selected variant image - Symmetry Sections
View show-featured-image-not-variant-image.js
@willbroderick
willbroderick / linked-options.liquid
Last active Jan 23, 2018
Linked options helper methods for Shopify. See this: http://docs.shopify.com/manual/configuration/store-customization/advanced-navigation/linked-product-options - Updated to work with Clean Themes sectioned themes
View linked-options.liquid
<script>
// (c) Copyright 2011 Caroline Schnapp. All Rights Reserved. Contact: mllegeorgesand@gmail.com
// See http://wiki.shopify.com/Linked_Options
// Updated by willbroderick to:
// - work with multiple forms on the page
// - target markup specific to themes by Clean Themes
// - work with sections
// Based on an old version of: https://gist.github.com/carolineschnapp/1083007
@willbroderick
willbroderick / product-json.liquid
Last active Nov 13, 2017
Replacement for {{ product | json }} with accurate inventory information removed
View product-json.liquid
{% comment %}## Add this snippet, then replace {{ product | json }} with {% include 'product-json' %} ##{% endcomment %}
{% capture product_json %}{{ product | json }}{% endcapture %}
{% assign product_json_split = product_json | split: '"inventory_quantity":' %}
{%- for str in product_json_split -%}
{%- if forloop.first -%}{{ str }}
{%- else -%}
"inventory_quantity":
{%- assign str_split = str | split: ',' -%}
{%- for str2 in str_split -%}
{%- unless forloop.first -%},{%- endunless -%}
@willbroderick
willbroderick / overflowing-tables.js
Created Oct 19, 2017
Overflowing tables - wrap in a scrollable container
View overflowing-tables.js
// copy this to the very bottom of themes.js.liquid (might need to change the '.rte' depending on theme - this one's for Showcase)
$('.rte table').wrap('<div style="overflow: auto; border: 1px solid rgba(0,0,0,0.0.5)">');
@willbroderick
willbroderick / expression-two-per-row.css
Created Oct 18, 2017
Expression - Two products per-row on mobile
View expression-two-per-row.css
@media only screen and (max-width: 767px) {
#content .productlist .product { width: 48%; }
#content .productlist .product:nth-child(2n+1) { margin-left: 4%; }
#page-collection #content .productlist .product:nth-child(2n) { margin-left: 4%; }
#page-collection #content .productlist .product:nth-child(2n+1) { margin-left: 0; }
#content .productlist .product .foot .buttoncont, #content .productdetail .buttoncont { max-width: 100%; }
}
@willbroderick
willbroderick / pick-a-symmetry-sections.js
Last active Feb 27, 2018
Show 'Choose...' in a Symmetry theme with Sections
View pick-a-symmetry-sections.js
// copy this to the very bottom of Assets/theme.js.liquid, below everything else in there
$(document).on('optionate', 'select[name="id"]', function(){
var $this = $(this);
setTimeout(function(){
if(!$this.closest('.product-detail').find('.option-selectors select option[value=""]').length) {
$this.closest('.product-detail').find('.option-selectors select').prepend('<option value="">Choose...</option>').val('').trigger('change');
$this.closest('.product-detail').find('.price-area').html('&nbsp;');
$this.closest('.product-detail').find('.gallery .thumbnails a:first').trigger('click');
}
You can’t perform that action at this time.