Update Price on Productpage

Support
#1

Hi everyone, I am looking for a way to update the price of the product on the product page itself. So I want the customer to select an option from a dropdown and after the selection I want the customer to see the current price of the product directly on the product page.

It must be possible because it is working on the demopage op snipcart (https://demo.snipcart.com). But I am working with Webflow and have no Javascript experience, so I don’t know how it is done.

Is there anyone who can help me out?

Thank you.

ReplicaZone
ReplicaZone1920×736 126 KB

#2

Here’s how I’ve done it here:
https://www.luxonmx.com/product-luxon-ktm-husqvarna-bar-mounts-handguard-scotts-damper.html

                <!-- Option Selector-->
                <div class="detail-option mb-3">
                  <form action="#" id="orbmoption">
                    <h6 class="detail-option-heading">Option <span>(required)</span></h6>
                      <label for="full_assembly" class="btn btn-sm btn-outline-secondary detail-option-btn-label"> Full Assembly <input type="radio"
                      checked name="mount_options" value="Full-Assembly" id="full_assembly" required class="input-invisible">
                    </label>
                    <label for="top_only" class="btn btn-sm btn-outline-secondary detail-option-btn-label"> Top Piece Only <input
                        type="radio" name="mount_options" value="Top-Piece-Only" id="top_only" required class="input-invisible">
                    </label>
                  </form>
                  <script nonce="<?php echo $CSPNONCE ?>">
                document.getElementById("orbmoption").addEventListener('click', function (event) {
                    if ( event.target && event.target.matches("input[type='radio']") ) {changeBarmount(); changePricing();}
                      function changeBarmount() {
                    for (var i = 0, length = orbmoption.length; i < length; i++) {
                        if (orbmoption[i].checked) {
                          document.getElementById("button-ktm-husqvarna-off-road-bar-mounts").dataset.itemCustom1Value = orbmoption[i].value;
                          break;
                        }
                      }
                    }
                    function changePricing() {
                      $('input[type="radio"][name="mount_options"]').change(function(){
                          var pricetoshow = $(this).attr("value");
                          var targetprice = $("#" + pricetoshow);
                          $(".price-hider").not(targetprice).hide();
                          $(targetprice).show();
                      });
                    };
                });
              </script>
                </div>
            
              <!-- Pricing-->
              <div class="mb-3">
                  <ul class="list-inline mb-2 mb-sm-0">
                  <li class="list-inline-item h4 font-weight-light mb-0 price-hider" id="Full-Assembly">$299.95 <span class="detail-option-heading">(Full Assembly)</span></li>
                    <li class="list-inline-item h4 font-weight-light mb-0 price-hider" id="Top-Piece-Only" style="display: none">$159.95 <span class="detail-option-heading">(Top Only)</span></li>
                  </ul>
                </div>