Change/update price displayed when drop down menu changed

PecanPecan Member
Hi guys, I've taken your code from the demo on the front page and pasted below. I can see how this adjusts the price in the form and passes it to the cart etc. based on which option is selected in the drop down menu.

The thing is, I want the price displayed on the website and I want it to update based on the value of the option selected in the drop down menu. Is there a way to change the code below to display the price?

<form action="https://YOURSTORE.foxycart.com/cart" method="post" accept-charset="utf-8">
<input type="hidden" name="name" value="Custom Product">
<input type="hidden" name="price" value="10">
<input type="hidden" name="image" value="IMAGE_URL">
<select name="color">
<option value="Red">Red</option>
<option value="White">White</option>
<option value="Blue">Blue</option>
</select>
<select name="Material">
<option value="Cotton">Cotton</option>
<option value="Silk{p+5}">Silk (+$5.00)</option>
</select>
<input type="submit" value="Add Custom Product">
</form>


i.e. I want to add the following line (or similar) somewhere else in the html to display the price:

<p><span itemprop="price">DISPLAY-PRICE</span></p>

Thanks for your help.

Comments
  • fc_adamfc_adam FoxyCart Team
    @Pecan,

    Good question - and the answer is yes! We have a snippet available on our wiki which can help you with that, you can see details on it here: https://wiki.foxycart.com/v/2.0/snippets/updating_total_price_with_option_modifers. If you follow the instructions on the wiki page, you should see the price dynamically updating on your site then too.
  • Thanks Adam, that looks just the job. ;)
  • oh one more thing, do I have to update the currency symbol anywhere in that code? I'm using GBP£ and not USD$.
  • fc_adamfc_adam FoxyCart Team
    @Pecan - the total should be formatted using whatever currency is set for the cart. Are you seeing it show as $ instead of £ on your page?
  • No, I haven't tested it yet, I just thought that it might default to USD given the example in the wiki and thought I'd ask in advance.

    If it uses the currency from my store config then everything should be fine.

    Thanks again.
  • PecanPecan Member
    edited November 30
    @fc_adam,

    Trying to get this to work and failing. Where/what is loader.js? It doesn't explain in the wiki. I guess it's important and I guess I don't have it loading currently as part of my regular Foxy scripts because I cannot get the dynamic price to work.

    Thanks for your help.
  • fc_adamfc_adam FoxyCart Team
    @Pecan,

    The loader.js is the javascript file you include on your website for our version 2.0, which adds in the necessary logic needed for FoxyCart to work on your site, especially for loading the Sidecart cart display.

    Are you perhaps not on version 2.0 of FoxyCart? If so - you'll want to use this snippet instead: https://wiki.foxycart.com/snippets/add_to_cart_form/updating_total_element_to_reflect_selected_price_modifiers_in_page

    If you are on 2.0 - if you could perhaps link me to your page, I can take a closer look.
  • fc_adamfc_adam FoxyCart Team
    edited December 1
    @Pecan,

    Thanks for whispering the page there. I see you've got the loader.js and the script from the wiki included on the page, so that's good. The last part you'll need to complete is step 2, which is linking the visual price element to the add to cart form.

    I see you've started that process, and you're really close - but you'll just need to make a small change to your approach. The product on that page has a code of "SPANNER", so you'll need to set the class on the total price span to be SPANNER_total. You'll then want to remove the second "code" attribute with a value of "p1".

    You'll also need to update the product option modifier to be {p-2}, and move the £ symbol to be inside of the span (as the javascript will append the currency symbol for the cart automatically too).

    Once you've completed those steps, that should then get the total price updating correctly.

    Let us know if we can help any further!
  • PecanPecan Member
    @fc_adam,

    Thanks for that. This is brilliant. It's working like a charm now.

    One more question if I may. How would I incorporate a checkbox into the mix? I was thinking of using a simple up-selling technique whereby I give the customer a chance to check a box to add another small product alongside the main product right before they add it to the cart.

    e.g. Would you also like to add X-PRODUCT for an extra £4.99.

    So this would be part of the same form and be submitted along with the main product. So still only one add-to-cart button but I would also need this change to be reflected in the price and to update dynamically.

    Thanks for all your help.
  • fc_adamfc_adam FoxyCart Team
    edited December 3
    @Pecan,

    Awesome - I'm glad that worked!

    In terms of adding a second product - currently the dynamic price snippet doesn't support forms with multiple different products within it - so the price wouldn't update in that instance.

    If you were ok with the product not being a separate product - but instead an option of the single product, that could work with the snippet. You'd just define the checkbox as the product option and include the modifier value for the price like this:
    <label for="extra_product"><input type="checkbox" id="extra_product" name="Extra Product" value="Yes{p+5}" /> Add in the Extra Product</label>
    Alternatively, you could also provide the upsell opportunity on your checkout - we have some details on doing that here: https://wiki.foxycart.com/v/2.0/snippets/checkout_upsells
  • PecanPecan Member
    That's perfect. Thanks again Adam, I've got it all working.
  • fc_adamfc_adam FoxyCart Team
    @Pecan - awesome! That's great to hear.
Sign In or Register to comment.