Hi all,

I'm using Couch Cart for an e-commerce website and it's almost finished.

The only thing I'm struggling with is the variable product part.

Right now the top of the page shows the base price (e.g. from £20), and you can select the options (In this case it's the wattages for bulbs) and in the options it shows how much extra that is:



What I'd like, is that when you select one of these options, the price displayed on the page changes to reflect this, either on the main price or underneath.

Is this possible?

Many Thanks,
Nathan

[KK]

Hi,

Since the change has to occur real-time, this would require JS.
I think you may try hooking some JS code onto the dropdown in a way that a change there triggers the change in text elsewhere on the page.

Hi KK,

Yes I figured it would be JS, but I just wasn't sure how I'd be able to access the data from the dropdowns.

Following the instructions on the couch cart page, I've used the separate <cms:pp_option_values> and <cms:pp_product_options> to add a data-price="x" to each option.

I've then used .querySelector(':checked').getAttribute("data-price"); to pull that data out, which can then be used within the JavaScript.

I've added these below in case they prove useful for anyone in the future

PHP:

Code: Select all

<cms:pp_product_options>
                  <cms:if option_type='list'>
                  <cms:if option_modifier='*' || option_modifier='**'>
                  <cms:else />
                  <label class="col-6 mb-4"><cms:show option_name />:</label><br>
                  <input type="hidden" name="on<cms:show k_count />" value="<cms:show option_name />" style="display:none;">
                  <select class="col-6 mb-4" name="os<cms:show k_count />" id="select<cms:show k_count/>" onchange="updVaria()">
                     <cms:pp_option_values>
                     <option value="<cms:show k_count />" data-price="<cms:show option_price/>">
                     <cms:show option_val />
                     <cms:if option_price >
                     [<cms:show option_price_sign /><cms:pp_config 'currency_symbol' /><cms:show option_price />]
                     </cms:if>
                     </option>
                     </cms:pp_option_values>
                  </select>
                     </cms:if>
                     <cms:else />
                     <label><cms:show option_name />:</label><br>:
                     <input type="hidden" name="on<cms:show k_count />" value="<cms:show option_name />" style="display:none;">
                     <input type="text" name="os<cms:show k_count />" maxlength="200">
                     </cms:if>
</cms:pp_product_options>

JavaScript:

Code: Select all

var basePrice = "<cms:show pp_price/>";
var newPrice = basePrice;
var theModPrice = "0";
var theQuant = "1";

function updVaria(){
   theModPrice = document.getElementById("select1").querySelector(':checked').getAttribute("data-price");
   calcTotal();
}
function updQuant(){
   theQuant = document.getElementById("quantity").value;
   calcTotal();
}
function calcTotal(){
   var theTotal = (parseInt(basePrice)+parseInt(theModPrice))*parseInt(theQuant);
   document.getElementById("modPrice").innerHTML=theTotal;
}

calcTotal();
/*document.getElementById("modPrice").innerHTML=basePrice;*/

[KK]

Thanks Kilniath
I am sure this would help many.