size-chart.liquid snippet

size-chart.liquid

{% if template contains 'product' %}
{% assign size_options = 'size,taille' | split: ',' %}
{% assign size_chart_text_link = 'Size chart' %}
{% assign has_size = false %}
{% assign size_index = 0 %}
{% for option in product.options %}  
  {% assign downcased_option = option | downcase %}
  {% if has_size == false and size_options contains downcased_option %}
    {% assign has_size = true %}
    {% assign size_index = forloop.index0 %}
  {% endif %}
{% endfor %}
{% if has_size %}
<script>
/*
* $ lightbox_me
* By: Buck Wilson
* Version : 2.3
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
(function(a){a.fn.lightbox_me=function(b){return this.each(function(){var e=a.extend({},a.fn.lightbox_me.defaults,b),l=a(),k=a(this),m=a('<iframe id="foo" style="z-index: '+(e.zIndex+1)+';border: none; margin: 0; padding: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0; filter: mask();"/>'),g=/MSIE 6/.test(navigator.userAgent)&&!window.opera;if(e.showOverlay){var f=a(".js_lb_overlay:visible");if(f.length>0){l=a('<div class="lb_overlay_clear js_lb_overlay"/>')}else{l=a('<div class="'+e.classPrefix+'_overlay js_lb_overlay"/>')}}if(g){var d=/^https/i.test(window.location.href||"")?"javascript:false":"about:blank";m.attr("src",d);a("body").append(m)}a("body").append(k.hide()).append(l);if(e.showOverlay){h();l.css({position:"absolute",width:"100%",top:0,left:0,right:0,bottom:0,zIndex:(e.zIndex+2),display:"none"});if(!l.hasClass("lb_overlay_clear")){l.css(e.overlayCSS)}}if(e.showOverlay){l.fadeIn(e.overlaySpeed,function(){c();k[e.appearEffect](e.lightboxSpeed,function(){h();c();e.onLoad()})})}else{c();k[e.appearEffect](e.lightboxSpeed,function(){e.onLoad()})}if(e.parentLightbox){e.parentLightbox.fadeOut(200)}a(window).resize(h).resize(c).scroll(c).keyup(j);if(e.closeClick){l.click(function(n){i();n.preventDefault})}k.delegate(e.closeSelector,"click",function(n){i();n.preventDefault()});k.bind("close",i);k.bind("reposition",c);function i(){var n=k[0].style;if(e.destroyOnClose){k.add(l).remove()}else{k.add(l).hide()}if(e.parentLightbox){e.parentLightbox.fadeIn(200)}m.remove();k.undelegate(e.closeSelector,"click");a(window).unbind("reposition",h);a(window).unbind("reposition",c);a(window).unbind("scroll",c);a(document).unbind("keyup",j);if(g){n.removeExpression("top")}e.onClose()}function j(n){if((n.keyCode==27||(n.DOM_VK_ESCAPE==27&&n.which==0))&&e.closeEsc){i()}}function h(){if(a(window).height()<a(document).height()){l.css({height:a(document).height()+"px"});m.css({height:a(document).height()+"px"})}else{l.css({height:"100%"});if(g){a("html,body").css("height","100%");m.css("height","100%")}}}function c(){var o=k[0].style;k.css({left:"50%",marginLeft:(k.outerWidth()/2)*-1,zIndex:(e.zIndex+3)});if((k.height()+80>=a(window).height())&&(k.css("position")!="absolute"||g)){var n=a(document).scrollTop()+40;k.css({position:"absolute",top:n+"px",marginTop:0});if(g){o.removeExpression("top")}}else{if(k.height()+80<a(window).height()){if(g){o.position="absolute";if(e.centered){o.setExpression("top",'(document.documentElement.clientHeight || document.body.clientHeight) / 2 - (this.offsetHeight / 2) + (blah = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"');o.marginTop=0}else{var p=(e.modalCSS&&e.modalCSS.top)?parseInt(e.modalCSS.top):0;o.setExpression("top","((blah = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "+p+') + "px"')}}else{if(e.centered){k.css({position:"fixed",top:"50%",marginTop:(k.outerHeight()/2)*-1})}else{k.css({position:"fixed"}).css(e.modalCSS)}}}}}})};a.fn.lightbox_me.defaults={appearEffect:"fadeIn",appearEase:"",overlaySpeed:250,lightboxSpeed:300,closeSelector:".close",closeClick:true,closeEsc:true,destroyOnClose:false,showOverlay:true,parentLightbox:false,onLoad:function(){},onClose:function(){},classPrefix:"lb",zIndex:999,centered:false,modalCSS:{top:"40px"},overlayCSS:{background:"black",opacity:0.3}}})(jQuery);
Shopify.OptionSelectors.prototype.buildSelectors=function(){for(var c=0;c<this.product.optionNames().length;c++){var e=new Shopify.SingleOptionSelector(this,c,this.product.optionNames()[c],this.product.optionValues(c));e.element.disabled=false;this.selectors.push(e)}var b=this.selectorDivClass;var a=this.product.optionNames();var d=Shopify.map(this.selectors,function(f){var i=document.createElement("div");i.setAttribute("class",b);if(a.length>1){var h=document.createElement("label");h.htmlFor=f.element.id;h.innerHTML=f.name;i.appendChild(h)}i.appendChild(f.element);if(f.index==={{ size_index }}){var g=jQuery('<a id="size-chart-trigger" href="#size-chart">'+{{ size_chart_text_link | json }}+"</a>");g.click(function(){jQuery("#size-chart").lightbox_me({centered: true});return false});jQuery(f.element).after(g)}return i});return d};
</script>
<div id="size-chart" style="display:none" class="rte">{{ pages.size-chart.content }}</div>
<style>
.single-option-selector {
  display: inline-block;
  margin-right: 10px;
  width: auto !important;
}
#size-chart { background:white; padding:25px; text-align:center; z-index:10000 !important; }
</style>
{% endif %}
{% endif %}

See here un-minified version of the snippet: https://gist.github.com/3173581

Updated to work with jQuery >= 1.9. https://github.com/annyfm/Lightbox_me/commit/eb81d2a9cfd6ab30662b4d8a2da8af6a0f4dd3be

You're the bestest of the best, you know that?

How to I re-position the 'Size Chart' on my product's page to be above the Size option drop down field?

hey caroline,

used size-chart.liquid on Couture theme whiterabbitclothing.myshopify.com
everything work as it should

but

links from below are visible and click on the popup :-(

Please help.

Hi carolineschnapp,
Thanks so much for your work - but I've been having some trouble with you size-chart link. It seems to move the "single-option-selector" element away from the slect box and sits it on top of the size-chart link, so that it is difficult to tell what to click on. Any ideas how I might fix this? - its at https://bashful-garter-2.myshopify.com/products/bam-bam-top-arnley for example (pw: thabra)

Hi Caroline,
May you please help with with this, i'm a novice.

1. I need the 'size-chart' function to be available for option other than 'size' and for multiple (more than one ) options. ( i understand that this can be achieved by changing the word 'size' with the other 'option' on the instructions at this link http://docs.shopify.com/manual/configuration/store-customization/page-specific/product-page/add-size-chart , but don't know exactly where to change )
2. For some option, i need a storewide chart, and for some option i need product-type specific chart.

May you please plesse help with this.

Hi Caroline,
Thank you for this, very helpful. By any chance how do i move the "Size Chart" link text to the bottom of my product page?

Hi Caroline,
how can I add a close button/text to the size chart. I guess many people are confused that there is no option to close the lightbox.
Thank you!

Hi Caroline,

How to make the lightbox mobile responsive.
The lightbox opens in an expanded form in mobile browsers (Chrome)
Please reply

Hi Caroline,
I have been following this page
https://help.shopify.com/themes/customization/products/add-size-chart

Adding a snippet, it shows up on the product detail but its not really works.
Please see it here

https://allmydibs.com/products/crossover-full-skirt-dress-iron

Can you please help me fix this.

-raj

Hi Caroline, like what gennadit ask, how can I add a close button/text to the size chart. I guess many people are confused that there is no option to close the lightbox. Also, how to add the scrolling bar? Example like this:

https://teeshirtgalaxy.com/collections/specials/products/grillmaster

Thank you!

Hello I would like to add the size chart link manually in my description text and not have it display automatically next to the variant selector. Is this possible? Thank you for your help.

It is not working for me. please help snake-gully.myshopify.com/products/yin-yang-tee-1

I already add the chart size button
but still does not show up the pop-up size chart.
if it helps, I'm working with the theme supply from Shopify
I would really appreciate any help. thank you!