willbroderick

/**
 * Use with template literals to build HTML with correct escaping.
 *
 * Example:
 *
 * const tve = createTemplateVariableEncoder();
 * tve.add('dataValue', 'What is "this"?', 'attribute');
 * tve.add('title', 'Title & Heading', 'html');
 * tve.add('richText', '<p>Content to show</p>', 'raw');
 *

willbroderick

/*
// normal usage
theme.loadScriptOnce('https://maps.googleapis.com/maps/api/js?key=' + key, function() {
  _.createMap($container);
});

// using 'before run' parameter to fix load when a site unexpectedly has RequireJS on it (by temporarily removing window.define)
if(window.define) {
  theme.loadScriptOnce('https://player.vimeo.com/api/player.js', function(){
    _.vimeoVars.apiReady = true;

willbroderick

/*
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

{%- 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

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

// 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

// vvvvv   COPY THIS TO THE BOTTOM OF THEME.JS.LIQUID   vvvvv

// select featured image on page load, ignoring variant image
$(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('.gallery .thumbnails a:first').trigger('click');
    }
  }, 10);

willbroderick

{% 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

// 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

@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%; }
}