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 02-20-2013, 07:15 PM
RopeShop.ca's Avatar
RopeShop.ca is offline
 
Join Date: Feb 2013
Posts: 1
Question

Hide second option when there is no available variation


I have a product that has 2 sets of options. A diameter and length. The issue that I'm running into is that some of the diameters aren't available in certain lengths. For example, a 5mm diameter rope is available in 25, 50, 100, & 500 foot lengths. While a 25 mm diameter rope is available in 25, 50, 100, & 250 foot lengths.

We have technically infinite stock of the products, but I've added a large quantity as Lana indicated in this thread. Now at least when a variation that doesn't exist is selected, the add to bag button is hidden and "Out of Stock" appears for that combo.

I'm concerned that customer will interpret this to mean that we will eventually have stock for that variation of diameter and length, which isn't the case. What I'd like to do is disable the appropriate length radio buttons depending on which diameter is selected. I've found this post by smoothsailingclothing that seemed to be heading in the right direction.

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){
                $.each(json.variations, function(index, product) {
                     if ( product.quantity == 0 ) {
                        $("#ecwid-productoption-" + page.productId + "-Size option:eq(" + index + ")").attr("disabled","disabled");
                        if ( (index+1) != json.variations.length ) {
                            $("#ecwid-productoption-" + page.productId + "-Size").val(index+1).trigger('change');
                        }
                     }
                });                         
            }
        });
   }
});
</script>
Unfortunately, the output from json.variations doesn't include empty variations. So I think that code is a dead end for me. All I can think of is to pull all the length radio buttons that generate a price of $0.00, then disable them, but I can't think of how to accomplish that through the api.

Has anyone had any success with this?
  #2  
Old 03-15-2013, 09:23 AM
A Wee ClicK's Avatar
A Wee ClicK A Wee ClicK is offline
Webpartner
 
Join Date: Aug 2011
Location: UK (Northern Ireland)
Posts: 89
Default Trying To Hide Some Product Options Based On If Radio Button Is Checked

I am trying to hide the radio buttons of certain options when the product page is first loaded and when a particular radio button is clicked, the other options appear.


The test page I have is at http://farmboutique.com/shop-online/...32&id=21349373

I am a beginner in using jquery and not quite sure how to combine the productId value into the jquery statement.

The jquery code I have formulated is:

Quote:
<script>
Ecwid.OnPageLoad.add(function(page) {
if (page.type == "PRODUCT") {

$('input:radio[name=productId+"-Do You Require An Embroidered Logo"]').click(function() {
var $this = $(this);
if ( $this.val() == "on" ) {
$this.nextAll("#ecwid-productoption-"+productId+"-If_you_require_a_logo_to_be_embroidered:002c_has_t his_already_been_set_up_by_us-container").show();
} else {
$this.nextAll("#ecwid-productoption-"+productId+"-If_you_require_a_logo_to_be_embroidered:002c_has_t his_already_been_set_up_by_us-container").hide();
}
});

}
});
</script>
I know I am nearly there with this - any help and guidance would be most appreciated.

Thanks

Andrew
__________________
Andrew

---------------------------------------------
UtterApparel.com
ASLCreative.com
Zingaboo.com
  #3  
Old 04-02-2013, 08:16 AM
A Wee ClicK's Avatar
A Wee ClicK A Wee ClicK is offline
Webpartner
 
Join Date: Aug 2011
Location: UK (Northern Ireland)
Posts: 89
Default

I have managed to hide some of the product options using javascript, but I just can't work out how to show them when another radio button is selected.

Radio buttons in the same product option group all have the same name and value ("on"). The only difference is their id which seems to be automatically generated.

How can I achieve this?

Live Example

http://farmboutique.com/shop-online/...32&id=21349373

I want to show the hidden options when the "Yes" button is selected under "Do You Require An Embroidered Logo"

Any pointers in the right direction would be appreciated.

Without being able to do this I might have to look at a different ecommerce system - as so many options to initially choose from will put customers off.
__________________
Andrew

---------------------------------------------
UtterApparel.com
ASLCreative.com
Zingaboo.com

Last edited by Eugene Rimmer; 04-02-2013 at 02:28 PM.
  #4  
Old 04-03-2013, 04:19 PM
Matt Ecwid's Avatar
Matt Ecwid Matt Ecwid is offline
Ecwid Team
 
Join Date: Oct 2011
Posts: 4,947
Default

Quote:
Originally Posted by A Wee ClicK View Post
I have managed to hide some of the product options using javascript, but I just can't work out how to show them when another radio button is selected.
Hi,

You can find an example of such a script here:
https://gist.github.com/makfruit/5302479

Here is the demo (please open the 'Apple*' product page in the right panel to see how it works):
http://jsfiddle.net/makfruit/n3Kxh/

Hope that helps.
__________________
Matt K
Ecwid Team

Ecwid Guide for Beginners

Ecwid Help Center

Ecwid video tutorials

Last edited by Makfruit; 04-10-2013 at 10:27 AM.
  #5  
Old 04-03-2013, 09:15 PM
A Wee ClicK's Avatar
A Wee ClicK A Wee ClicK is offline
Webpartner
 
Join Date: Aug 2011
Location: UK (Northern Ireland)
Posts: 89
Default

Hi Matvey,

Thank you so much for your reply and example code.

I have modified it to fit the options for my products and it works perfectly:

You can view it here:

http://farmboutique.com/shop-online/...32&id=21349373

This has made the overall shopping experience far nicer for my future customers.

Now I can get ready to launch it.
__________________
Andrew

---------------------------------------------
UtterApparel.com
ASLCreative.com
Zingaboo.com
The Following User Says Thank You to A Wee ClicK For This Useful Post:
Matt Ecwid (04-04-2013)
  #6  
Old 04-04-2013, 06:24 AM
Matt Ecwid's Avatar
Matt Ecwid Matt Ecwid is offline
Ecwid Team
 
Join Date: Oct 2011
Posts: 4,947
Default

Quote:
Originally Posted by A Wee ClicK View Post
Hi Matvey,

Thank you so much for your reply and example code.

I have modified it to fit the options for my products and it works perfectly:

You can view it here:

http://farmboutique.com/shop-online/...32&id=21349373

This has made the overall shopping experience far nicer for my future customers.

Now I can get ready to launch it.
Looks good!
__________________
Matt K
Ecwid Team

Ecwid Guide for Beginners

Ecwid Help Center

Ecwid video tutorials
  #7  
Old 04-04-2013, 07:07 AM
A Wee ClicK's Avatar
A Wee ClicK A Wee ClicK is offline
Webpartner
 
Join Date: Aug 2011
Location: UK (Northern Ireland)
Posts: 89
Default

The code example you provided was great and I found it straightforward to adapt.

Ecwid is a great shopping cart, but it lacks examples of jquery/javascript mods like the one you provided, so we can make minor changes.

Or we need a developer's kit.

Thanks once again.
__________________
Andrew

---------------------------------------------
UtterApparel.com
ASLCreative.com
Zingaboo.com
  #8  
Old 04-04-2013, 07:31 AM
A Wee ClicK's Avatar
A Wee ClicK A Wee ClicK is offline
Webpartner
 
Join Date: Aug 2011
Location: UK (Northern Ireland)
Posts: 89
Default

One other thing.

How can I put this into a separate javascript file so I could just call it when I needed to, but it didn't work.

I tried it but it didn't work. The first set of options are shown, but when each one is selected nothing is shown.

SOLVED - the £ needed replacing with its unicode value of \u00A3 when defining each expanderOptionFlagValue
__________________
Andrew

---------------------------------------------
UtterApparel.com
ASLCreative.com
Zingaboo.com

Last edited by Makfruit; 04-08-2013 at 07:32 AM.
  #9  
Old 04-05-2013, 07:14 AM
A Wee ClicK's Avatar
A Wee ClicK A Wee ClicK is offline
Webpartner
 
Join Date: Aug 2011
Location: UK (Northern Ireland)
Posts: 89
Default

Matvey,

Another quick question:

I want to reset all of the sub options to Not Required if somebody clicks on one of the embroidery options and then changes their mind and clicks on "Not Required":

Normally you use this (I think) to set a radio button:

Quote:
jQuery('input[class="sort"]').attr('checked',true);

In your example code you used this to see which radio button had been selected

Quote:
jQuery("div[class *= ecwid-productoption-" + expanderOptionName + "] input:checked + label > span").text()

This is my interpretation of what it should look like (chances are it is wrong as I am not a jquery programmer)

Quote:
jQuery('input[class *= "ecwid-productoption-" + expanderOptionName + "] + label > span"').attr('checked',true);
If it is not correct what should it be?


SOLVED

Passed page.productId to the function checkExpandableOptions


Then retrieved the ids of the set of radio buttons as an array - document.getElementsByName( productId + "-name of radio button set");

Quote:
var radios1 = document.getElementsByName( productId + "-name of radio button set");

Then set the Not Required button as checked:

Quote:
jQuery("#" + radios1[2].id)[0].checked = true;
__________________
Andrew

---------------------------------------------
UtterApparel.com
ASLCreative.com
Zingaboo.com

Last edited by A Wee ClicK; 04-06-2013 at 07:34 AM. Reason: SOLVED
The Following User Says Thank You to A Wee ClicK For This Useful Post:
Matt Ecwid (04-08-2013)
  #10  
Old 12-28-2013, 09:13 PM
Suzanne Loh's Avatar
Suzanne Loh Suzanne Loh is offline
Junior Member
 
Join Date: Jul 2012
Posts: 2
Default

I'm a newbie to this javascripting. Where do I paste this awesome script?

I'm doing a printing service so I'll need the users to only be able to choose a product variation that I have created. Can this be done?

Any help is much appreciated.
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
radio button checked

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 02:16 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.