Calculator

Reference for the pricing calculator template used on product and sub-category pages.

The pricing calculator is a component that displays size, color, quantity, options, turnaround time, and pricing on product detail and sub-category pages. Its HTML layout is defined by a template file in your theme's calculator/ folder.

How It Works

A master page specifies the calculator template name in its directive: CalculatorTemplate="default"
This maps to the file calculator/default.html in the active theme
The <pn:Calculator runat="server" /> control renders the calculator using that template
PrintNow's JavaScript populates the calculator with product-specific pricing data

Template File

The default calculator template is located at:

calculator/default.html

This is a large HTML file containing the full calculator UI. It uses a combination of Mustache-like variables and HTML structure that PrintNow's JavaScript binds to for dynamic behavior.

Calculator Sections

The calculator template is organized into these functional sections:

Section	Description
Size Selection	Dropdown or list of available product sizes.
Color Selection	Color/coating options (e.g., Full Color, Black & White).
Quantity	Quantity input or dropdown with predefined quantities.
Product Options	Additional options like paper stock, finish, folding, etc.
Turnaround Time	Production time selection affecting pricing.
Pricing Totals	Displays unit price, subtotal, and total price.
File Handling	Upload, editor, or template selection buttons.
Shipping Estimate	Optional shipping cost preview.

CSS Classes

The calculator uses specific CSS classes that PrintNow's JavaScript targets. These classes must be present for the calculator to function:

CSS Class	Purpose
`calc-turnaround-row`	Row containing turnaround time options. Can be hidden with CSS if not needed.
`calc-production-row`	Row showing production time details. Can be hidden with CSS.

Customization

To customize the calculator:

Open your theme in the Site Themes editor or via FTP
Navigate to calculator/default.html
Modify the HTML structure and CSS styling
Keep all data-binding attributes and functional CSS classes intact

You can create additional calculator templates by adding new HTML files to the calculator/ folder (e.g., calculator/compact.html) and referencing them in master page directives:

<%@ Master ... CalculatorTemplate="compact" %>

Embedding the Calculator

In master pages, the calculator is placed using the server control:

<div class="calc-container">
    <div class="card-body">
        <pn:Calculator runat="server" />
    </div>
</div>

On the order-options page template, the calculator is injected via a Mustache variable:

{'{{{'} Calculator {'}}}'}

Server Controls — The pn:Calculator control that renders the calculator template
Master Pages — Where the CalculatorTemplate directive selects which template to load
Page Templates — The order-options.mustache template that embeds the calculator