How to: Show image tumbnails specific to a product option when product option is selected

This tutorial will show you how to customize the meta_catalog/product_detail.html template so when a product option is selected only image thumbnails related to the selected product option will be displayed.

Screen_Shot_2013-12-04_at_2.56.41_PM.png

 

In the meta_catalog/product_detail.html add the JavaScript code below between the {% block extra_js %}{{ block.super }} .... {% endblock %}:

 

   <script type="text/javascript" src="/media-upload/productDetailOptions.js"></script>
    <script>
        require(['webcube'], function(WebCube){
           $(function(){
           console.log('ready');
           var thumbnail_data = $.parseJSON($('script[data-name="thumbnail_data"]').html().replace(/},\s+]/g,'}]'));
           // populate images
           WebCube.productDetailOptions({
               data: thumbnail_data,
               option_name: $('.graphicoption a').first().find('img').attr('data-option'),
               option_title: $('.graphicoption a').first().find('img').attr('alt'),
               complete: function(data) {
                   console.log("complete...");
                   $('.available_colors .selected_color').text(data.option_title);
                   $([data.thumbnail_container, 'a'].join(' ')).first().trigger('click');
               }
           });
        
        $('.product_option select').on('change', function(e) {
          var title = this.options[e.currentTarget.selectedIndex].value;

          WebCube.productDetailOptions({
            data: thumbnail_data,
            option_name: this.name,
            option_title: title,
            complete: function(d) {
              // remove active class from current selected option
              $('.graphicoption .option').removeClass('active');

              // add active class
              $('.graphicoption .option img[alt="'+ d.option_title +'"]').parents('.option').addClass('active');

              // change text
              $('.available_colors .selected_color').text(d.option_title);

              // switch main image
              $('.thumbnails ul li a').first().trigger('click');
            }
          });
        });
        
        
        $('.graphicoption a').on('click', function(e) {
          e.preventDefault();
          WebCube.productDetailOptions({
            data: thumbnail_data,
            option_name: $(this).find('img').attr('data-option'),
            option_title: $(this).find('img').attr('alt'),
            complete: function() {}
          });
    
        });// on('click')
        
        
          });        
        });
    </script>
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk