Online Calculations For RapidWeaver
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

Online Calculations For RapidWeaver

If you sell a product or a service online, it's useful if your visitor can work out what he or she will need to pay before submitting an order. 1LD's new Formula stack can help your client with their calculations and simplify your order process.

Do you need to know how many tiles will be needed for that new bathroom wall? Or perhaps you want to spend the weekend at your favourite hotel in the Lake District and want to know what it will cost. With Formula you just need to add the wall's dimensions or the dates of your intended stay and the stack will do the heavy lifting for you by calculating the price and even packing the results into a contact form, ready for you to click 'Send'.

You will need to read the instruction manual before you can create your new web page. This is not criticism – once you've used it a couple of times, Formula is quite straightforward and intuitive – Formula will calculate almost anything, but you'll need to know how to proceed first!

When you drop Formula onto your new Stacks page, you will see a form with Input Field with an Import Value stack, Output and Formula. Plus a + button for child stacks. Click on the Import Value stack and check the settings panel. The Import Type can be set to Number Input (default), Checkbox, Select, Slider, or Date/Time Range. The Value is followed by an Import ID. So let's take a simple example and say you sell Coffee. And the smallest amount of coffee you can order is one pack. Set 'Amount' as the ID and the Min Value to 1. The Max Value can be set up to an indefinite amount, but let's restrict our customer to ordering 10 packs of coffee and set the Default order number to 1.
Leave the Styles at their default value for now – Single Column and Select Width 280px.

Now you can click the + button and add a new Import Value stack. Set the Type to Select, change the ID to Coffee and add Formula Selection options by clicking the child stack's + button. Arabica, Robusta, etc. Now activate the first Formula Select field and the price difference to your base product. E.G. Arabica costs €10 a pack, Robusta – our base product – costs €12; in the Formula Select field for Arabica, set -2. You get the idea?

Next you could add an Options Field with a Checkbox – For a Value Added Pack that is 20% more expensive than the selected product. In the Import Value settings, add an ID, a text description for the product, set the Disabled Value to 1 and the Enabled Value to 1.2. These are the multiplicators that will later be used to calculate the end price.

Now I could rewrite the complete Formula manual here, but I'll leave you to read it on 1LD's Tutorial Page.

Once you've added The import Values that your product requires, it's time to sit down and work out the formula for your calculation. If you write it down on a piece of paper, it will make things easier for you. Here's an example from our Coffee Sales Page: ((quantity * 12 + input-options) * value-added-pack) * (input-tip / 100 + 1). The formula includes a tip for the delivery driver.

Formula can calculate Addition, Subtraction, Division and Multiplication. The Formula is added to the stack with child stacks and in the settings panel, you need to set the Type of Segment – which also includes Import Value, Number, Parenthesis and Custom Expression.

I suggest that you set up Formula on a blank page – it gives you more room to work. Once you have your Input Values set up and your formula calculates the correct values, it's time to format your stack. The main settings panel gives you a choice of three Calculator Themes plus an additional Custom setup.The default theme is a light coloured theme, themes 2 and 3 are dark themes. Custom opens up a range of additional settings for the Background Colour, Borders, and shadow. Below the Custom settings, you'll find Padding values for the Input Fields, The Input Background colour, the Border Styles and Shadows. The Font Family expects a Google Font and has settings for the Size, Weight and Line Height. By default the theme font settings are inherited.

The Output settings Include Decimal Places, and Separators; Labels for the Answer. The Font settings duplicate the Input settings.
But I'm getting ahead of myself…
… the Output Answer also has a dropdown menu with the options Show Below Calculator Input, Show In An External Field, No Answer/Calculator Input Only and Show Answer Only/No Calculator Input.

The option Show In An External Field is of special interest. If you hover over the screenshot above, you'll see that in the second image, Formula is positioned next to a contact form (in this case 1LD's Super Forms). In the last field of the contact form, you'll notice the Total Price of the coffee that is being ordered. All other order details are being passed on to hidden fields within the contact form. Once Miss Jones has entered her contact details, she can click Submit and her coffee order will be sent off to be delivered in time for breakfast next day.

Full instructions for passing the Formula data on to a contact form are included on the Tutorial Page.

Formula is well thought out and will allow you to build the most complicated calculations that you can think of (unless you have a diploma in advanced mathematics). It's ideal for a booking form, small online store, or for calculating the cost of your new bathroom tiling – and it has the added value that the calculation can be passed on to you via email.

Now go forth and make those calculations work for you!

blog comments powered by Disqus
  • Stacks Image 35399
  • Stacks Image 35402
  • Stacks Image 35405
  • Stacks Image 35408
  • Stacks Image 35411
  • Stacks Image 35414
  • Stacks Image 35417
  • Stacks Image 35420
  • Stacks Image 35423
  • Stacks Image 35426
  • Stacks Image 35429
  • Stacks Image 35432
  • Stacks Image 35435
  • Stacks Image 35438
  • Stacks Image 35441
  • Stacks Image 35444
  • Stacks Image 35447
  • Stacks Image 35450
  • Stacks Image 35453
  • Stacks Image 35456
  • Stacks Image 35459
  • Stacks Image 35462
  • Stacks Image 35465
  • Stacks Image 35468
  • Stacks Image 35471
  • weaverthemes
  • Stacks Image 35477
  • Stacks Image 35480
  • Stacks Image 35483

Links to the developers ® All trademarks cited on this page are the property of their respective owners.


Don’t miss a post!
Sign up for our monthly newsletter.

A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.

* indicates required

Contact Information

My Image

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.


This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—16

This website was built with loving care on a Mac using Foundation. For more information, contact me.