keyurshah

//- Multiple blocks in jade mixins? #1693
//- https://github.com/pugjs/pug/issues/1693

//- [Issue on github]
//- https://github.com/pugjs/pug/issues/1693
h2 Issue
p
  a(href='https://github.com/pugjs/pug/issues/1693' , target="_blank") Multiple blocks in jade mixins?
hr

keyurshah

<textarea name="my-xml-editor" data-editor="xml" rows="15"></textarea>
...
<textarea name="my-markdown-editor" data-editor="markdown" rows="15"></textarea>
...

<script src="//d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js"></script>
<script>
    // Hook up ACE editor to all textareas with data-editor attribute
    $(function () {

keyurshah

<?php

/* From https://www.usps.com/send/official-abbreviations.htm */

$us_state_abbrevs_names = array(
	'AL'=>'ALABAMA',
	'AK'=>'ALASKA',
	'AS'=>'AMERICAN SAMOA',
	'AZ'=>'ARIZONA',
	'AR'=>'ARKANSAS',

keyurshah

String.prototype.imgURL = function(size) {
  // remove any current image size then add the new image size
  return this
    .replace(/_(pico|icon|thumb|small|compact|medium|large|grande|original|1024x1024|2048x2048|master)+\./g, '.')
    .replace(/\.jpg|\.png|\.gif|\.jpeg/g, function(match) {
      return '_'+size+match;
    })
  ;
};

keyurshah

# config/routes.rb
resources :documents do
  scope module: 'documents' do
    resources :versions do
      post :restore, on: :member
    end

    resource :lock
  end
end

keyurshah

What to do

1. Use the alt text to associate the additional images - besides the variant image - to the option value. Example: say you have 3 images that show the Blue variants, then a) associate the first image as variant image to all Blue variants, and b) set the alt text of the 2 additional images to 'Blue'.
2. Copy+paste the code found in the product.liquid snippet below at the bottom of your product.liquid template.

How that works, essentially

Only the images associated to the currently selected variant are shown. Other images are hidden.

What to expect, the specifics

keyurshah

What you have

What you want

How to get it

keyurshah

{% comment %}
  Do we have a Color option?
  If so, is it the first, second or third option of that product?
  We will need to access values so we need that color index.
{% endcomment %}

{% assign has_color = false %}
{% assign color_option_index = 0 %}
{% for option in product.options %}
  {% assign downcased_option = option | downcase %}

keyurshah

<!-- Solution brought to you by Caroline Schnapp -->
<!-- See this: http://wiki.shopify.com/Related_Products -->

{% assign image_size = 'compact' %}
{% assign heading = 'Other fine products' %}

{% if product.metafields.recommendations.productHandles %}

<h3>{{ heading }}</h3>
<ul class="related-products"></ul>

keyurshah

<script type="text/javascript">
/*

re: http://ecommerce.shopify.com/c/ecommerce-design/t/land-on-specific-variant-when-loading-product-page-147793

Assumes:
--------

* that you are calling the javascript once the select element is available
* you have a select element on the page like: