[RopeShop.ca]

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.

<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?

[A Wee ClicK]

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:

<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

[A Wee ClicK]

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.

[Matt Ecwid]

Originally Posted by A Wee ClicK

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.

[A Wee ClicK]

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.

[Matt Ecwid]

Originally Posted by A Wee ClicK

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!

[A Wee ClicK]

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.

[A Wee ClicK]

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

[A Wee ClicK]

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:

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

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

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)

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");

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

Then set the Not Required button as checked:

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

[Suzanne Loh]

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.