How to Build Advanced Dynamic Pricing Calculators on Shopify with Safe AST Math Formulas & Conditional Logic

1. The Dilemma of Custom Dimension Pricing in E-Commerce

Standard e-commerce platforms were engineered around static catalog items: an SKU has a predefined price, and variants (Size Medium in Navy Blue) map to specific variant prices. But what happens when you sell products manufactured strictly to customer dimensions?

• Custom Cut Glass & Mirrors: Pricing depends on square inches, thickness (1/4" vs 3/8"), edge beveling, and temper processing.
• Fine Art Canvas & Framing: Pricing equals perimeter inches for the frame molding plus area for the archival canvas and protective UV glass.
• Window Blinds & Shutters: Exact window opening measurements determine fabric yardage, motorization upgrade fees, and installation hardware.

For these merchants, pre-generating variants is mathematically impossible. A 48" × 36" mirror is one of hundreds of thousands of possible dimensional permutations.

2. The Danger of eval(): Why Security-Conscious Stores Reject Legacy Plugins

To calculate formulas on the client side, many rudimentary WordPress plugins and older Shopify scripts use JavaScript's built-in eval() or new Function():

// ❌ DANGEROUS: Legacy approach used by vulnerable calculators
const userFormula = "width * height * rate";
const finalPrice = eval(userFormula.replace("width", inputWidth)...);

Executing strings directly in the browser runtime is an open invitation for Cross-Site Scripting (XSS) and code injection attacks. If a malicious actor injects arbitrary JavaScript payloads (e.g. stealing session tokens or exfiltrating customer credit card numbers), the merchant's entire store security is compromised. Shopify's automated app review scanners rightly reject apps using arbitrary eval.

3. Anatomy of Formpify Safe AST Formula Engine

In Formpify v2.2.0, our engineering team built a dedicated, sandboxed Abstract Syntax Tree (AST) Recursive-Descent Algebraic Parser (mathFormulaEvaluator.js). The engine never executes raw strings. Instead, it processes mathematical equations through three strictly controlled stages:

1. Tokenization (Lexer): The input string is broken down into structured mathematical tokens (Numbers, Identifiers, Operators +, -, *, /, ^, and Parentheses). Any unauthorized characters (e.g. document, window, fetch) are instantly rejected at the tokenizer level.
2. AST Grammar Construction (Parser): Tokens are assembled into a hierarchical syntactic tree respecting standard mathematical operator precedence (BODMAS / PEMDAS).
3. Deterministic Evaluator: The tree is evaluated recursively against sanitized numeric values supplied by form fields.

// Mathematical Expression: ({length} * {width} / 144) * {rate} + 15
{
  type: "BinaryExpression",
  operator: "+",
  left: {
    type: "BinaryExpression",
    operator: "*",
    left: {
      type: "BinaryExpression",
      operator: "/",
      left: { type: "BinaryExpression", operator: "*", left: { type: "Identifier", name: "length" }, right: { type: "Identifier", name: "width" } },
      right: { type: "Literal", value: 144 }
    },
    right: { type: "Identifier", name: "rate" }
  },
  right: { type: "Literal", value: 15 }
}

4. Supported Syntax: Math Functions, Variables & Conditional Logic

Formpify's formula engine provides comprehensive mathematical power out of the box:

1. Dynamic Field Tokens

Reference any numeric input, slider, radio card, or dropdown value using curly braces: {length}, {width}, {sqft_rate}, {rush_multiplier}.

2. Built-In Mathematical Functions

3. Conditional Logic: if() Expressions

Calculate dynamic tiered pricing based on threshold conditions:

// If quantity is greater than 100, apply $4.50/sq ft rate; otherwise $6.00/sq ft
({length} * {width} / 144) * if({quantity} > 100, 4.50, 6.00) + {base_setup}

5. 1:1 Canvas and Storefront Real-Time Parity

A major failure of older calculator builders is that formula calculations work in preview but break once rendered on live themes. Formpify guarantees 100% 1:1 Parity between the Builder Canvas (DroppablePreviewArea.jsx) and the live storefront (embed_html/route.ts).

As the customer adjusts a dimension slider or types into a numeric box, an event listener recalculates the AST formula in under 2 milliseconds, updating the Subtotal, Estimated Taxes, and Total Price without visual lag or page flickering.

6. Three Real-World Blueprints (Glass, Framing, Volume Tiers)

Blueprint A: Custom Cut-to-Size Tempered Glass

• Inputs: Length (Inches), Width (Inches), Glass Thickness dropdown ($5.00/sq ft for 3/8", $8.00/sq ft for 1/2").
• Formula: (({length} * {width}) / 144) * {thickness_rate} + 15.00
• Result: A 48" × 36" piece equals 12 sq ft × $5.00 + $15 fabrication fee = $75.00 Subtotal ($81.00 with tax).

Blueprint B: Custom Picture Framing (Perimeter + Area)

• Formula: (({width} * 2 + {height} * 2) * {molding_per_inch}) + (({width} * {height}) * {glass_per_sqin}) + {matting_fee}
• Accounts for framing linear length alongside glass area in a single clean formula.

Blueprint C: Tiered Volume Discounting for Custom Print Runs

• Formula: {units} * if({units} >= 500, 1.20, if({units} >= 100, 1.75, 2.50))
• Automatically rewards high-volume bulk buyers with lower unit prices, driving up Average Order Value (AOV).