The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 07-30-2013, 09:32 AM
MalloryMan's Avatar
MalloryMan is offline
 
Join Date: Feb 2012
Posts: 20
Default

Radio Button Image Selector


Hi there,

I have a product with many colour options. What I would like to do is, instead of displaying a list of radio buttons with text on the left, display the image of the actual product in a smaller thumbnail with the text below.

Here is an example: http://mydrapnapkins.com/cocktail-na...cktail-napkins

I would imagine it would be a bit of javascript that pulls the image from the one uploaded in the variations section but just dont know how to implement it.

Anyone??
  #2  
Old 08-05-2013, 10:43 PM
smoothsailingco.com's Avatar
smoothsailingco.com smoothsailingco.com is offline
 
Join Date: Dec 2011
Location: CA / FL
Posts: 345
Default

You'd need to know javascript or jquery (would make it a lot easier) to do it combined with the product api.

Code:
<script>
    Ecwid.OnPageLoaded.add(function(page) {
       if ( page.type == "PRODUCT" ) {
            $.ajax({
                url:'http://app.ecwid.com/api/v1/[storeID]/product?id=' + page.productId,
                dataType: 'jsonp',
                success:function(json){
                    // json contains the product information                         
                }
            });
       }
});
That would pull the product information and put it in json which you could use to create the images. What's your store url, I could take a look and if it's not too hard, try to do it.
  #3  
Old 08-06-2013, 09:17 AM
MalloryMan's Avatar
MalloryMan MalloryMan is offline
 
Join Date: Feb 2012
Posts: 20
Default

Hey thats amazing, thanks a lot. The url is http://www.kooksunlimited.com/shop/
  #4  
Old 08-06-2013, 09:16 PM
smoothsailingco.com's Avatar
smoothsailingco.com smoothsailingco.com is offline
 
Join Date: Dec 2011
Location: CA / FL
Posts: 345
Default

I couldn't find the product with radio buttons
  #5  
Old 08-09-2013, 08:50 AM
MalloryMan's Avatar
MalloryMan MalloryMan is offline
 
Join Date: Feb 2012
Posts: 20
Default

Hey sorry its here: http://www.kooksunlimited.com/shop/#...13&id=26517135
  #6  
Old 08-09-2013, 07:37 PM
smoothsailingco.com's Avatar
smoothsailingco.com smoothsailingco.com is offline
 
Join Date: Dec 2011
Location: CA / FL
Posts: 345
Default

Here's what I came up with:

Code:
<script>
Ecwid.OnPageLoaded.add(function (page) {
  if (page.type == "PRODUCT" && page.productId == 26517135) {
    $.ajax({
      url: 'http://app.ecwid.com/api/v1/1039325/product?id=26517135',
      dataType: 'jsonp',
      success: function (json) {
        if (json.variations) {
          $.each(json.variations, function (index, product) {
          
            // name, thumbnail image url
            var productName = product.options.Style.text;
            var productsmallThumbnailUrl = product.smallThumbnailUrl;

            // elements
            var productElement = $('#ecwid-productoption-26517135-Style-' + productName.replace(/\ /g, '_'));
            var productInput = productElement.find('input[type=radio]');
            var productLabel = productElement.find('label');
            
            // hide radio button
            productInput.hide();
            
            // update label css to show images
            productLabel.css({
              background: 'url("' + productsmallThumbnailUrl + '") repeat scroll 0 0 transparent',
              display: 'inline-block',
              margin: '5px',
              height: '80px',
              'text-indent': '-9999px',
              width: '80px'
            });
            
            // Could use .addClass instead of hard coding the style, ie: productLabel.addClass('className');
            // Same for .css below that adds border
            
            // handle highlighting of currently selected option
            productLabel.click(function () {
              $(this).css("border", "solid 1px black");
              $("input[type='radio']:checked").each(
                function () {
                  $("label[for='" + this.id + "']").css("border", "none");
                }
              );
            });
            
          });
        }
      }
    });
  }
});
</script>
You'll want to add it after where you put:
Code:
<script src="//app.ecwid.com/script.js?1039325" type="text/javascript" charset="UTF-8"></script>

Last edited by smoothsailingclothing; 08-09-2013 at 07:40 PM.
  #7  
Old 08-19-2013, 04:37 PM
MalloryMan's Avatar
MalloryMan MalloryMan is offline
 
Join Date: Feb 2012
Posts: 20
Default

Hey man sorry for the late reply, yeah thats great thank you! I have added a float: left to the css to make the items in a grid instead of a list.

Two things:

1. Is it possible to apply this to all radio buttons accross products?

2. The only thing I cant work out is how to fix the bug where when a user clicks on the image it moves the rest of the selectors... I think its to do with the border being added onclick (which it needs) but cant find a way to add in a margin: -1px to remedy it perhaps or if theres a better way to do that?

Go have a look here: http://www.kooksunlimited.com/shop/#...13&id=26517135
  #8  
Old 08-19-2013, 06:57 PM
smoothsailingco.com's Avatar
smoothsailingco.com smoothsailingco.com is offline
 
Join Date: Dec 2011
Location: CA / FL
Posts: 345
Default

Try adding: Padding: 1px;

Does that fix it?
  #9  
Old 08-20-2013, 09:06 AM
MalloryMan's Avatar
MalloryMan MalloryMan is offline
 
Join Date: Feb 2012
Posts: 20
Default

No too sure where to put that in the code?
  #10  
Old 08-20-2013, 09:15 AM
smoothsailingco.com's Avatar
smoothsailingco.com smoothsailingco.com is offline
 
Join Date: Dec 2011
Location: CA / FL
Posts: 345
Default

Oops!

This area:
Code:
            productLabel.css({
              background: 'url("' + productsmallThumbnailUrl + '") repeat scroll 0 0 transparent',
              display: 'inline-block',
              margin: '5px',
              padding: '1px',
              height: '80px',
              'text-indent': '-9999px',
              width: '80px'
            });
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
combinations, images, options, radio button

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 11:16 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.