Problems, need help? Have a tip or advice? Post it here.
4 posts Page 1 of 1
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:

Image

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
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;*/
Thanks Kilniath :)
I am sure this would help many.
4 posts Page 1 of 1