
Total Calculator
Table of Contents
- 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
Text Size
Here you can choose the size of text for your items. It includes the item title, price, quantity, etc.
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.
Text Size
Here you can simply set the text size for the add button
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.
Total Calculator Items
You can If you click on an individual item, you will able to edit it's Title, Price, and Description in the Settings Panel.
Title
The title of the item.
Price
This value for the price of the item. This should be a Basic Number (e.g. 50 or 100) and should not contain any other characters. Pricing Symbols and suffixes can be set on the Total Calcualtor parent stack.
Description
The description for your item.
Total Calculator Changelog
Version 1.5.7
- Updated info.plist to match new website information
Version 1.5.6
- Added the ability to show a tax notice on the customer invoice
Version 1.5.5
- Adding html special character encoding to titles, prices, and descriptions
Version 1.5.4
- Fixed bug causing multiple stacks to not display properly
- Made minor adjusts to javascript for better efficiency
Version 1.5.3
- Implemented brand new options for currency that include custom symbols for currency, thousand separators, decimal separators and more
- Added the optional ability for users to create their own custom items
- Users can edit/save/delete custom items that they've added
Version 1.3.0
- Added tax percentages
- Added options for showing both pretax and/or taxed totals
- Added option for displaying a short notice about taxes