Product Attributes Price Calculator

[Kristen_Szy]

Hello.

I am wondering if anyone out there has had success with setting product attributes with prices for each, and integrated the ability to show the total calculated price of the item based on what attributes they check/choose before they click Add to Cart.

Or how I can get shopping cart tags like {tag_producttotal} {tag_productgrandtotal} to render on the large product layout, or elsewhere on the site?

ANY suggestions would be most helpful!

Thanks

K

[TheBCMan]

Yep I've done it for two clients using JavaScript. Just add onchange events to the attributes (or a class) and add up the selected items dynamically.

[Liam Dilley]

To add to that, Because the prices are inline you can use the json data of the product:

Developer reference

{tag_attributes_json}

To achieve this quite neatly.

[TheBCMan]

I think they want to do it dynamically, meaning on select the prices changes on the product page itself it.

[Liam Dilley]

I know

[Kristen_Szy]

Now that I am thinking about this more, how can I add an on change event to the attributes if they are dynamically created by the system? I don't have access to edit the code.

Sorry I am a beginner scripter, so I apologies if this is a dumb question.

[TheBCMan]

Kristen: I can't really code it for you as I don't have the time at the moment I'm sorry but you just use a document ready in jquery and once the page is loaded (the document ready) bind a .change event to select and radio form elements and then add up all the items that are selected (when the onchange fires).

Liam: See above, your method would have to have a second server call to get the elements separately then you would have to keep track of the items in the array to what was selected, if there are multiple attributes it would start to get uber complex. If you keep it simple the code above would be literally 5-6 lines.

[Kristen_Szy]

Hi BCMan, oh no I was not expecting you to code it for me, just your suggestions are helpful!

THANK YOU again!

[Liam Dilley]

That is not true the BCMan.

But you prefer your way that is fine,

I know because I have done both ways and have the fastest method you can get implemented - All my implementations goal is optimisation and less code.

[Kristen_Szy]

Thank you BCMan and Liam for your suggestions. Very helpful.

[Liam Dilley]

In terms of what I am refering to Kristen is that the json tags you render and pass as a variable so your objects are already stored on the DOM and you can bind you events and reference from the object.

Really small code and really efficient.

[Kristen_Szy]

Hello again.

I am running into some type of snag here...

(I am thinking it could be because Iam using a custom template for this product, the code is not right on the large product layout)

Any suggestion here would be SO helpful, I have been spinning my wheels here!

This is what I am doing...

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

<script>

function fixattributes(baseprice, jsonattributes)

{

   var product = JSON.parse('{tag_product_json}');

   var divId = "catProdAttributes2_"+ product.productId;

   var myElement = document.getElementById(divId);

   var html = myElement.innerHTML;

   var newhtml = html.replace("select mandatory",'select id="selectattrib" mandatory');

   myElement.innerHTML = newhtml;

   var myElement02 = document.getElementById('selectattrib');

   myElement02.addEventListener('change',function(){updateprice(baseprice)},false);

}

function updateprice(baseprice)

{

  var myElement03 = document.getElementById('selectattrib');

  var optionid = myElement03.options[myElement03.selectedIndex].value;

  var myElementlblprice = document.getElementById('lbltotalprice');

  var jsonattributes = JSON.parse('{tag_attributes_json}');

  var addprice = jsonattributes.options[optionid].price;

  var newprice = parseFloat(baseprice) + parseFloat(addprice);

  myElementlblprice.value = "Price: $" + newprice.toFixed(2);

  var myimage = jsonattributes.options[optionid].image;

}

function setprice(newpriceDS)

{

  var myElementlblprice = document.getElementById('lbltotalprice') ;

  var newprice = newpriceDS.replace(/\$/g,'');

  var newprice = newprice.replace(/\,/g,'');

  var newprice = Number(newprice).toFixed(2);

  myElementlblprice.value = "Price: $" + newprice;

}

</script>

<div class="whiteback"><span class="titletext">1. Explore Our Products</span>

    <br />

    <table width="90%" border="0" cellspacing="0" cellpadding="0">

      <tr>

        <td>{tag_grouping}</td>

          <td style="text-align: center;">Example of Product <br />

              <img alt="" src="{tag_largeimage_path}?Action=thumbnail&Height=400&Width=400" style="border-width: 0px;" /></td>

      </tr>

    </table>

</div>

<br /><br />

<div class="whitebacktall"><span class="titletext">2. Explore Our Special Options for {tag_name}</span>

    {tag_attributes, vertical}

</div>

<div class="whiteback">

     <p style="text-align: right; vertical-align: bottom;" class="titletext"></p>

<span class="price"><strong><label id="lbltotalprice">Price: $</label></strong></span>

    <p style="text-align: right; vertical-align: bottom;">

        <a href="/sign-in-and-sign-up" title="Continue and Login"><img alt="" src="/images/continue-btn.png" style="border: 0px solid;" /></a></p>

   </div>

<script>

var currentprice = '{tag_saleprice}';

setprice(currentprice);

var myattributes = '{tag_attributes}';

if (myattributes)

{

   var currentPriceDS = '{tag_saleprice}';

   var currentPrice = currentPriceDS.replace(/\$/g,'');  

   var myattributesobj = JSON.parse('{tag_attributes_json}');

   fixattributes(currentPrice,myattributesobj);  

}

</script> 

[TheBCMan]

Happy Easter, name your totalprice DIV #totalprice and with GST #totalprice_gst (if you use it), make sure jquery is loaded before this, best to place this code at the bottom of the page.

This is a longer version because I've included formatting functions, a GST and non GST price, some validation checking and put the variables at the top.

<script type="text/javascript">

    $(document).ready(function($){

        StartDynamicPrice();

        DoPriceChange();

    });

    var el_totalprice='#totalprice';

    var el_totalprice_gst='#totalprice_gst';

    var el_attrselect='.catProdAttributeItem select';

    // uncomment if you want radio as well

    // var el_attrselect='.catProdAttributeItem select, .catProdAttributeItem input';

    var currencysymbol='$';

    Number.prototype.toMoney=function(decimals, decimal_sep, thousands_sep){

       var n = this,

       c = isNaN(decimals) ? 2 : Math.abs(decimals),

       d = decimal_sep || '.',

       t = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,

       sign = (n < 0) ? '-' : '',

       i = parseInt(n = Math.abs(n).toFixed(c)) + '',

       j = ((j = i.length) > 3) ? j % 3 : 0;

       return sign + (j ? i.substr(0, j) + t : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : '');

    }

    DoPriceChange=function(){

        var selected='';

        var newsubtotal=0;

        $.each($(el_attrselect), function(i,e){

            selected=$(e).children(':selected').text();

            if (selected.indexOf(currencysymbol) != -1){

                newsubtotal+=parseFloat(selected.substring(selected.indexOf(currencysymbol)+1));

            };

        });

        newtotal=parseFloat($(el_totalprice).attr('base'))+parseFloat(newsubtotal);

        newtotal_gst=newtotal+(newtotal*.10);

        $(el_totalprice).html(currencysymbol+newtotal.toMoney());

        $(el_totalprice_gst).html(currencysymbol+newtotal_gst.toMoney());

    }

    StartDynamicPrice=function(){

        $(el_totalprice).attr('base',$(el_totalprice).html().replace(currencysymbol,'').replace(',',''));       // set base price

        $(el_attrselect).on('change',function(){

            DoPriceChange();

        })

    }

</script>

[Ricardo_A1]

Hey bud that was real cool I was in trouble with that one too BUT... I couldn't get the radio buttons to work maybe looking at the way my page is lay out you may know whats wrong.

Customizable Best Value Kilt Package‌

Thanks bro!

[TheBCMan]

I didn't test with radio only drop downs more than likely the binding is not correct and should be easy to fix, I just don't have time at the moment.

[JordSTi]

Thanks for posting your code TheBCMan.

I have tried to implement what you posted on my site but the product total doesn't seem to update automatically when a selection is made via the dropdown box. However if you make a variable selection, refresh the page and that variable is still selected then it seems to update to the new price based on the selection.

By any chance do you have a site that is live where I can take a look at a working example?

Cheers.

[Ricardo_A1]

I actually used it only with radio buttons but I have not assigned a function to make it work with a drop down and have used yours for a dropdown instead I honestly spent too much time trying to make it work the way I need it.

But have a look perhaps you can make it as it looks you have been doing it for a while.

LINK Radio Buttons:

Customizable Best Value Kilt Package‌

LINK for dropdown:

Build your own custom kilt‌

It would be a great leap ahead of BC capabilities to combine these 2 together let me know how it goes!.

[topelovely]

Please I can see you got this working on your website. Please can you kindly share the code you used for the product attribute dropdown that changed the price on the fly. Thanks in anticipation. I have been battling this for hours.

[Ricardo_A1]

You can always inspect the code and use the code above to get it done, good lesson learning Lol

[Ricardo_A1]

Hi Kristen,

I have been trying to get this working over night but success!

Here is the code the down side of this code is that I could make it sum up with the SELECT DROPDOWN but for RADIO and CHECKBOXES it works 100% Neatly

Perhaps combining the above code from TheBCMan and mine we are able to Parse the sums together I will try it on another time but for now that's what I can provide.

var priceSelect =  document.getElementById('totalprice').value;

$('.catProdAttributeItem input[type=radio], .catProdAttributeItem input[type=checkbox],').on("click", function() {

    var total_price = 0;

    $(document).find('.catProdAttributeItem').each(function() {

      var $checkbox = $(this).find('input:radio, input:checkbox');

      if ($checkbox.is(':checked')) {

        var text = $(this).find('span').html();

        total_price += parseFloat(text.replace(/[^0-9\.]/g, ''))

      }

    });

    $('#totalprice').html('£' + total_price.toFixed(2));//make sure your container for the price has this ID

    document.getElementById('totalprice').value = total_price+priceSelect;

  });//sum the price of attributes

[A3_Aaron]

Hey Ricardo, thanks for sharing the code! Works really well. One thing that it seems to be doing is picking up in the attribute option any numbers - i.e. I have a "Wild Salmon - 4oz" with a price of $6 and it is showing as $46 when Radio is checked. Any suggestions for omitting any numbers in the label?

[Ricardo_A1]

Hi Aron, thanks, unfortunately the script I made at this time would get the string of the attribute and get the number from the string since your string contains a numerical 4 in the string and the 6 it recognises as 46, my recent work around to that is to render attributes to a json template using the attributes_json tag and isolate the cost into a span class attrPrice sóo you can then later use in the calculation

[A3_Aaron]

Noted and thanks for the super-quick reply!