Building SaaS Website #05: Total.js View Engine Basics

Welcome back to our TotalGPT SaaS website development journey! In this post, we’re diving deep into the implementation of pricing.html and pricing_details.html, using the Total.js View Engine. This is where the magic of dynamic web pages happens, and we’ll guide you step-by-step through the process. This post is tailored for beginners, so even if you’re new to Total.js, you’ll be able to follow along. Let’s get started!

What is the Total.js View Engine?

The Total.js View Engine is a lightweight and flexible template engine that works seamlessly within the Total.js framework. It allows developers to create dynamic and responsive HTML pages by combining server-side data with intuitive templates. Its key features include:

• Loops: For iterating over data collections.
• Conditions: For rendering content based on logic.
• Variable Interpolation: For injecting dynamic data into templates.

By the end of this post, you’ll understand how to:

1. Configure routes to connect server logic with pages.
2. Pass dynamic data from the server to templates.
3. Render dynamic content using Total.js templates.

Step 1: Configuring Routes in Total.js

Routes define how the application handles incoming HTTP requests. Let’s start by reviewing the route definitions in controllers/default.js:

exports.install = function() {
    ROUTE('GET /pricing/', pricing); // Pricing page route
    ROUTE('GET /pricing/{choice}/', pricing_details); // Pricing details page route
}

Explanation:

• /pricing/: This route serves the pricing overview page, displaying all available pricing plans.
• /pricing/{choice}/: This route serves the details of a specific pricing plan based on the {choice} parameter in the URL.

Step 2: Handling Pricing Page Requests

The pricing function handles requests for the pricing overview page. Here’s how it works:

async function pricing($) {
    var plans = await CALL('Plan --> list').promise(); // Fetch the list of plans
    $.view('pricing', { plans: plans.reverse() }); // Pass the data to the view
}

Breakdown:

• CALL('Plan --> list'): Calls the list action within the Plan schema to fetch all pricing plans.
• .reverse(): Reverses the order of the plans to display them in the desired sequence.
• $.view('pricing', { plans: plans }): Renders the pricing.html view and passes the plans data to it.

This setup ensures that the pricing page dynamically displays all available plans.

Step 3: Handling Pricing Details Page Requests

The pricing_details function fetches and renders details for a specific pricing plan. Let’s explore the implementation:

async function pricing_details($) {
    var choice = $.params.choice; // Extract the 'choice' parameter from the URL
    var plan = await DATA.read('nosql/plans')
        .where('name', choice.capitalize())
        .fields('id, description, name, price, ...') // Select only the necessary fields
        .error(404) // Return a 404 error if no plan is found
        .promise();

    $.view('pricing_details', { selectedPlan: plan }); // Pass the data to the view
}

Breakdown:

• $.params.choice: Captures the {choice} parameter from the URL.
• DATA.read('nosql/plans'): Fetches plan details from a NoSQL database.
• .fields(): Selects specific fields for efficiency.
• $.view('pricing_details', { selectedPlan: plan }): Renders the pricing_details.html template with the selected plan’s data.

Step 4: Creating Templates for Dynamic Pages

Template 1: pricing.html

This template displays the list of pricing plans dynamically:

<section class="pricing">
    <div class="pricing-content">
        @{ foreach plan in model.plans }
        <div class="pricing-item @{ if plan.name === 'Standard' } highlighted @{ fi }">
            <div class="head">
                <div class="option">@{ plan.name }</div>
                <div class="price">@{ plan.price } XOF</div>
                <a href="/pricing/@{ plan.id }">View Details</a>
            </div>
        </div>
        @{ fi }
    </div>
</section>

Key Features:

• @{ foreach plan in model.plans }: Iterates over the plans array passed from the server.
• @{ if plan.name === 'Standard' }: Adds a special style for the "Standard" plan.
• Dynamic Links: Links to the details page for each plan using plan.id.

Template 2: pricing_details.html

This template displays the details of a selected pricing plan:

<section class="plan-details">
    <h1>@{ model.selectedPlan.name }</h1>
    <p>@{ model.selectedPlan.description }</p>
    <ul>
        <li>Price: @{ model.selectedPlan.price } XOF</li>
        <li>Limit: @{ model.selectedPlan.limit }</li>
        <li>Context Length: @{ model.selectedPlan.context }</li>
    </ul>
</section>

Key Features:

• Dynamic Content: The template displays the plan’s name, description, and other details dynamically.
• model.selectedPlan: Contains the data for the selected pricing plan, passed from the server.

Step 5: Adding Styling

To enhance the visual appeal of the pages, here’s an example of basic CSS:

<style>
    .pricing-item {
        border: 1px solid #ddd;
        padding: 16px;
        margin: 8px;
    }
    .highlighted {
        background-color: #f5f5f5;
        border-color: #007bff;
    }
</style>

Explanation:

• .pricing-item: Defines the layout and styling for pricing cards.
• .highlighted: Highlights special plans, such as the "Standard" plan.

Key Takeaways

1. Routing Made Simple: Total.js routes make handling dynamic URLs effortless.
2. Dynamic Templates: The Total.js View Engine empowers developers to render data-driven HTML with minimal effort.
3. Seamless Data Integration: Combining NoSQL databases with Total.js ensures efficient data handling.

By mastering these core concepts, you’ll be equipped to build sophisticated, data-driven web applications using Total.js. In our next post, we’ll explore advanced features of the View Engine, such as partials, nested templates, and optimizing performance. Stay tuned!