Order page with calculator

I need to create an order page with a sort of calculator so people can order specified lengths of turf by either 4 or 2m widths.
Does anyone now can I do this in Freeway and then link it to Paypal?

Regards
Kevin

http://www.artificial-grass.com/productinfo.aspx?id=2101&catid=48&page=0&qry=&min=&max=&backto=164


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The easiest way to do this would be to set up two different fields (one per width) and let the user enter the length desired of either. By using a unique name for each field, you would be able to both offer an on-screen calculator to show total price, as well as integrate with a PayPal cart.

In PayPal, just treat that field as a quantity, and have the product price in the PayPal setup be for one meter of the stuff. Never, ever trust the input from the form to give you the total price – anyone can write a form to post to your cart and order 50m for 1£.

To make an on-screen “estimator”, you would use JavaScript to read the value of the quantity fields every second or so and update a field or HTML box with the result multiplied by your price. Given two text fields, each named using the third tab of the Inspector to a unique value (turf_2m and turf_4m for this example), one implementation of this would be as follows:

new Form.Element.Observer(
  $$('input[name="turf_2m"]').first(), 
  0.3, 
  function(elm, value){
    var total = (parseInt(value,10) * 12.20).toFixed(2);
    $('turf_2m_total').down('p').update('£' + total);
  }
);

new Form.Element.Observer(
  $$('input[name="turf_4m"]').first(), 
  0.3, 
  function(elm, value){
    var total = (parseInt(value,10) * 22.20).toFixed(2);
    $('turf_4m_total').down('p').update('£' + total);
  }
);

Elsewhere on the same page, you would place an HTML box with the Title set to turf_2m_total and a small amount of styled text, like the word Estimate – just to give the total somewhere to register on screen. Ditto for turf_4m_total.

This code is written to work with the Protaculous Action (set to prototype-packed), so you would paste it into the top Function Body editor after applying that Action to the page. As long as all the fields are named correctly, and the HTML boxes exist and have some default text in them, this should just work out of the box. Naturally, you want to change 12.20 and 22.20 to match your real prices.

Walter

On Sep 21, 2012, at 11:05 AM, Kevin McElligott wrote:

I need to create an order page with a sort of calculator so people can order specified lengths of turf by either 4 or 2m widths.
Does anyone now can I do this in Freeway and then link it to Paypal?

Regards
Kevin

http://www.artificial-grass.com/productinfo.aspx?id=2101&catid=48&page=0&qry=&min=&max=&backto=164


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walt
Thanks a lot for this. I have set this up and it can be seen here:
http://greatgardenideas.com/gardens/test.html
I haven’t as yet tried linking it into PayPal (probably try that on Tuesday - away for the weekend now).
One more thing. Can a total for the 2 price fields be intergrated?

Kevin


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sure:

var turf_2 = 0, turf_4 = 0;
new Form.Element.Observer(
  $$('input[name="turf_2m"]').first(), 
  0.3, 
  function(elm, value){
    turf_2 = (parseInt(value,10) * 12.20).toFixed(2);
    $('running_total').down('p').update('£' + (turf_2 + turf_4));
    $('turf_2m_total').down('p').update('£' + turf_2);
  }
);

new Form.Element.Observer(
  $$('input[name="turf_4m"]').first(), 
  0.3, 
  function(elm, value){
    turf_4 = (parseInt(value,10) * 22.20).toFixed(2);
    $('running_total').down('p').update('£' + (turf_2 + turf_4));
    $('turf_4m_total').down('p').update('£' + total);
  }
);

All I did was set up two variables that live outside of the form observer functions, and update those each time the form changes. You need another HTML box on the page to accept the running total, named as above.

Walter

On Sep 21, 2012, at 2:37 PM, Kevin McElligott wrote:

Hi Walt
Thanks a lot for this. I have set this up and it can be seen here:
http://greatgardenideas.com/gardens/test.html
I haven’t as yet tried linking it into PayPal (probably try that on Tuesday - away for the weekend now).
One more thing. Can a total for the 2 price fields be intergrated?

Kevin


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sorry, copy/paste error, that should be this:

var turf_2 = 0, turf_4 = 0;
new Form.Element.Observer(
  $$('input[name="turf_2m"]').first(), 
  0.3, 
  function(elm, value){
    turf_2 = (parseInt(value,10) * 12.20).toFixed(2);
    $('running_total').down('p').update('£' + (turf_2 + turf_4));
    $('turf_2m_total').down('p').update('£' + turf_2);
  }
);

new Form.Element.Observer(
  $$('input[name="turf_4m"]').first(), 
  0.3, 
  function(elm, value){
    turf_4 = (parseInt(value,10) * 22.20).toFixed(2);
    $('running_total').down('p').update('£' + (turf_2 + turf_4));
    $('turf_4m_total').down('p').update('£' + turf_4);
  }
);

Walter

On Sep 21, 2012, at 4:52 PM, Walter Lee Davis wrote:

Sure:


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

As an aside you have some hefty pictures on those pages http://greatgardenideas.com/Resources/small_flowers.jpg is hardly small at nearly 1Mb - and considering how little of it you are using!

The bg pic at 640K http://greatgardenideas.com/Resources/21-big.jpg is also far larger than it needs to be.

David


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options