The Foxy forums are on the move!

We're in the process of moving our forums over to a new system, and so these forums are now read-only.
If you have a question about your store in the meantime, please don't hesitate to reach out to us via email.

Associating product price with various SELECT options

stkstk Member
in Help edited September 2015
Hello,

Not certain the best way forward to sell our jewellery products (chains) whose price will vary by style, weight and length. I was hoping to showcase six popular chain styles on a single page and allow customers to choose the style(s) they wanted; the weight (heaviness) of the chain; the length & quantity ...

This seems to be far trickier than I had originally anticipated, primarily because I wanted to associate the price with the selections and pass it as a hidden field.

What is the best way forward?
(and TIA for your help).

Cheers,
-stk
Comments
  • fc_adamfc_adam FoxyCart Team
    @stk,

    For that you'd want to make use of our product option modifiers. That allows you to modify the price, code, category and weight from any custom product options you add to your add to carts. You can see information on that at the bottom on http://wiki.foxycart.com/static/redirect/add_to_cart
  • @fc_adam,

    Thanks. I'd seen reference to "product option modifiers" in a search, but didn't readily find them on the page. Thanks for the "at the bottom" pointer. (Mind you, a simple text search on the page might have been my way forward).

    #Perfect

    Will have a play and see what I can destroy! :-p

    Cheers!
  • fc_adamfc_adam FoxyCart Team
    @stk,

    Let us know if you have any questions!
  • stkstk Member
    edited September 2015
    Thanks @fc_adam,

    Perhaps I still do have a question. It appears at first blush that the product option modifiers take into account what we want to accomplish, but on closer examination, I'm not sure they will. Let me explain.

    The jewelery chains we have on offer come in 6 styles, so I was planning on six different photos. One for each style. A customer then chooses their weight of chain AND it's length.

    Because the price is determined only AFTER choosing those two variables (no way of modifying the price when the buyer chooses their thickness of chain, as we don't know the length yet) ... and vice versa.

    (Was originally thinking two select options ... one for thickness ... another for length, as that seemed to make the most UI sense).

    How do the product option modifiers work in this instance?

    Perhaps the way forward is a matter of twinning the options into a single SELECT option ... WT1+Lgth1; WT1+Lgth2; WT1+Lgth3 ... + ... WT2+Lgth1+WT2+Lgth2 ... etc?

    Please advise (and again, thanks in advance for your help)


  • fc_adamfc_adam FoxyCart Team
    @stk,

    Ah that does change things a little. You're right that the product option modifier approach would rely on the price being altered based on the selection itself, rather than a combination of selections.

    So a few ways you could approach it.

    1) You could do it as a grouped select - so you have one select with the combined weight and length as you noted.

    2) You could have one select object for one item, say the weight, and then have a length select for each different weight option. You would then dynamically display the respective length select using javascript based on the weight chosen.

    3) You could handle this completely with javascript - setting the price field to the base price, and then as the user makes their selection for weight and length dynamically update the price field directly with javascript.
  • @fc_adam,

    Thanks for pointing out the various options. I will discuss them with my client when I meet with him on Friday.

    I am most comfortable with option #1, as I understand this the best. Option 2 sounds a tad messy. Option 3 sounds like a more elegant solution, but (a) I'm not a JS guru and (b) I've generally avoided reliance upon JS for basic functionality (as it is mean to enhance web browsing, not rely on it). BUT ... seeing how FC is a complete JS dependent tool ... in for a penny, in for a pound.

    Any chance I could persuade you to help out a JS n00b and post a bit of a construct that might provide an example of what #3 would look like ... just to launch me?

    Really appreciate the responses and - of course - your efforts to help a customer! TIA

    Cheers,
    -stk
  • fc_adamfc_adam FoxyCart Team
    @stk,

    You could approach it like this:
    <script>
    jQuery("body").on("change", ".WEIGHT_SELECT_CLASS", function() {
    var length = jQuery("#LENGTH_ID").val();
    var weight = jQuery("#WEIGHT_ID").val();

    var price = 15;
    var combined = length + "" + weight;

    switch(combined) {
    case "11":
    price = 15;
    break;
    case "12":
    price = 17;
    break;
    case "13":
    price = 19.50;
    break;
    case "21":
    price = 24.99;
    break;
    }

    jQuery("#PRICE_INPUT_ID").val(price);
    });
    </script>
    You'll need to set the ID's and classes within the script, and expand the switch statement to cover all of the values. To keep it to a single conditional statement, I combined the length and the weight into a string - so a necklace selection of a length of 2 and a weight of 3 would result in a string of "23". You'll need to expand the switch statement, copying the format, to cover all the different possible selections of length and weight.
  • stkstk Member
    edited September 2015
    @fc_adam,

    Thanks. It would have taken me two days (or longer) to arrive at all that from scratch, so I truly appreciate your help!

    If I'm reading that correctly, it looks as though the function would be triggered only when the buyer makes a weight (aka thickness) selection. But what if there is no weight selection change? (i.e., the buyer accepts the default value), but chooses a length - or - the buyer selects the weight FIRST and the length second?

    Would it be better to fire the function (fetch the weight & length, combine them, run the "combined" cases and update the price) whenever either selection (weight or length) are made? (And, if so, how do you fire the function based on an OR statement in JS?)

    TIA

    -stk








  • fc_adamfc_adam FoxyCart Team
    @stk,

    Sorry - my mistake there - .WEIGHT_SELECT_CLASS should have been .WEIGHT_LENGTH_SELECT_CLASS. If you give both select elements a class they both share and set that change event to that class, it will apply the function to both.

    That said though, your comment did make me realise it should run on page load as well - so switch to this:
    <script>
    jQuery("body").on("change", ".WEIGHT_LENGTH_SELECT_CLASS", togglePrice);
    jQuery("document").ready(togglePrice);

    function togglePrice() {
    var length = jQuery("#LENGTH_ID").val();
    var weight = jQuery("#WEIGHT_ID").val();

    var price = 15;
    var combined = length + "" + weight;

    switch(combined) {
    case "11":
    price = 15;
    break;
    case "12":
    price = 17;
    break;
    case "13":
    price = 19.50;
    break;
    case "21":
    price = 24.99;
    break;
    }

    jQuery("#PRICE_INPUT_ID").val(price);
    }
    </script>
Sign In or Register to comment.