Total Calculator

The simplest RapidWeaver Stack for calculating service totals and printing estimates or invoices

Currency Settings
General Settings
Items
Items > Hover
Items > Selected
Total Section
Print/Save Button
Invoice / Estimate
Item Addition
Total Calculator Items

Introduction

Here you can learn how to use the Total Calculator stack from Weavium

We've added some exciting new features in Verison 1.5.0!! The latest version includes a brand new way of setting currencies that is much more customizable to allow users from all over the world to use the stack! We've also added the optional ability for users to add and create items of their own on the fly!

Currency Settings

Currency Symbol

The currency symbol is where you can input the symbol for the currency of the country where you sell your items

Symbol Position (before / after)

Depending on your currency, the symbol may needed to be placed before or after the actual price, this select menu allows you to choose where the symbol will be placed

Thousand Separator

The thousand separator is the character that will be used to divide price numbers into thousands, for example: 5,000,000 - notice that here thousands are divided using commas ( , ). You can change this symbol to fit your currency.

Decimal Separator

The decimal separator is the character that will be used to divide decimals in price numbers, for example: 5.00 - notice that here decimals are divided using a period ( . ) - You can change this symbol to fit your currency.

Don't Allow Decimals

For some currencies, you may not want to use decimals, if you check this option, then decimals will be removed from prices.

Tax Percentage

Here you can set a percentage of tax to be added to the total when an item is checked. You can specify to show tax totals and/or pretax totals in the Total Section

General Settings

Show Preview

This checkbox will toggle the live preview in the stacks section of RapidWeaver. Turning it off helps to decrease loading time.

Always Show Description

By default item descriptions are hidden, and are viewable by clicking on the dropdown arrow on the left-hand side. If you want all descriptions to be visible initially, check this option.

Always Show Dropdown Arrows

If this option is checked, the dropdown arrows for showing item descriptions will be hidden until an item is hovered over. This can provide a cleaner look to the initial appearance of the stack.

Maximum Width

This will simply set the maximum width for the stack, meaning that it can be no wider than this amount. Of course, the stack will shrink and adapt to fit mobile devices automatically.

Padding

These two inputs allow you to set the top and bottom padding of the stack.

Font Family

Here you can set the general font-family for the stack. You can choose from a list of options, or you can select to use a custom font.

Text Color

This color picker allows you to set the initial text color of the stack. It will affect items (not on hover or checked), and the total section.

Background

Here you can set the background of the stack. You can choose to have no background, a color background, or a gradient background

Items

This section is where you will find options that affect all items

Description Size

Here you can set the text size of item descriptions. It is best practice to set the description text to a value that is a few pixels smaller than the item text.

Vertical Spacing

This option allows you to choose the amount of vertical margin between each item. Increasing the value will add more space inbetween item.

Text Weight

This select menu allows you to set the font-weight of items to be bold or normal.

Items > Hover

This section allows you to set the style for items when they are hovered

Text Color

The text color of a hovered item

Background

The background color of a hovered item

Shadow

The box shadow for an item that is hovered

Selected

This section is for setting the styles of checked items.

Text Color

The text color of a checked item

Accent Color

When an item is checked, certain parts of the item are accented in order to emphasize these values to the user. This color picker allows you to choose this emphasized color.

Background

The background color of a checked item.

Red/Green Quantity Controls

As a small bonus feature, you can choose to make the quantity controls colored on hover. If you check this option, the plus quantity button will turn green on hover, and the minus quantity button will turn red. This gives the user a better idea of what is going on. This option may not be stylistically appropriate for everyone, hense it being an optional feature.

Total Section

Here you can style the total section of the stack.

Show Pretaxed Total

If you check this option a pretaxed total will be displayed in the total section. You will also see an input field for customizing the text of the pretaxed total.

Show Taxed Total

This option is checked by default. It will display a total including the tax percentage that you specify in the currency section

Show Tax Notice

In some cases you may want to inform your users that tax is being added. If you check this option, a small notice will be displayed informing the user about taxes. You will also find some inputs for editing the text content of the tax notice, which is great for those who use different langauges!!! ^{_^}

Total Text

By default the text value for the total section is "Total: ", although, depending on your country or language you may need to change this value. You can do so via this input.

Divider Color

Here you can simply set the color for the divider between the items and the total.

Print/Save Button

Here you will find all of the styling options for the Print/Save Button. It includes the text value: "Print Invoice", and other styling options such as backgrounds, text color, radius, and padding.

Invoice / Estimate

Here you will find all of the options for editing the text of your invoice (perfect for different languages), as well as the ability to add a company logo, and your company information. You can also set a specific font for the invoice. We have chosen a select few, as it is important that your user can print a legible invoice.

Hide Company Logo

If you do not want a logo on your invoice, check this option.

Company Logo

Choose a logo to appear on your users invoice when printed

Logo Dimensions

Here you can set the exact height and width of your logo. The invoice is reponsive and will adjust to fit your logos size, though it is not recommended to make your logo too large. We recommend something between 100 - 300px

Footer Spacing

This value adjust the amount of space between the invoice total and the company information. Depending on the number of items that you have you may want to increase this value. The goal here is to add enough space so that the company information section is close to the bottom of the page.

Item Addition

Allow Item Addition

If you check this option, an (+ add new) button will be added to the stack which now allows users to add new items of their own!

Items that have been added can also be re-edited, re-saved, and deleted on the fly!! awesome sauce

Button Text

Here you can choose the text to be displayed in the add button. By default there is no text, and a plus ( + ) symbol will be displayed. Add text if you want to be more descriptive.

Border Radius

Here you can set the radius for the corners of the add button

Padding

Here you can set the padding for the add button

Text Color

Here you can choose the color for the inner text of the add button

Background

This option allows you to set a color for the backround of the add button. You can choose to have no background, a color background, or a gradient background.

Border

This allows you to toggle a border for the add button. After turning the option on, you will see options for setting the size, style, and color of the border.