Skip to content

Instantly share code, notes, and snippets.

@carolineschnapp
Last active November 28, 2018 16:56
Show Gist options
  • Save carolineschnapp/3171663 to your computer and use it in GitHub Desktop.
Save carolineschnapp/3171663 to your computer and use it in GitHub Desktop.
size-chart.liquid snippet
{% 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 %}
@carolineschnapp
Copy link
Author

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

@carolineschnapp
Copy link
Author

@JamieS
Copy link

JamieS commented May 17, 2013

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

@otasi
Copy link

otasi commented Nov 7, 2013

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

@cubeice
Copy link

cubeice commented Jun 7, 2014

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.

@micah-j
Copy link

micah-j commented Aug 25, 2014

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)

@Raghu-insaraf
Copy link

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.

@satquiel
Copy link

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?

@gennadit
Copy link

gennadit commented Apr 8, 2015

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!

@GrandyAndy
Copy link

Hi Caroline,

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

@rnagulapalle
Copy link

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

@garyng174
Copy link

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!

@HelloIamheike
Copy link

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.

@gincegeorge
Copy link

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

@danielnavarro1
Copy link

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment