Monthly Payment : $123/Mo (monthly_payment_123mo)

← Back to Text Elements | 📋 All Elements

---

This element is available in the Lucit Template Designer Elements Panel and can be added to any template by clicking on it.

When this element is added, the code listed in Element HTML will be added as a new layer in your template design that you can then customize as you see fit.

Overview

• Type: text
• Element Class: App\LuCore\DriveTemplates\TextDriveTemplateElementClass

• Element Settings:

• Fields:

  • No. of Months (months) – int (placeholder: 60)
  • Interest Rate (rate) – float (placeholder: 6.5)
  • Prefix (prefix) – text (placeholder: $)
  • Suffix (suffix) – text (placeholder: /Month)

Monthly payment, interest rate

Preview

$123/Mo

Element HTML

<div x-objectcode="monthly_payment_123mo" class="lc_ut_designer lc_dt_element lc_dt_text lc_dt_text_editable lc_format_fit_text" id="{id}" title="Monthly Payment : $123/Mo" x-element-settings='{"fields":[{"key":"months","name":"No. of Months","type":"int","placeholder":"60"},{"key":"rate","name":"Interest Rate","type":"float","placeholder":"6.5"},{"key":"prefix","name":"Prefix","type":"text","placeholder":"&amp;#36;"},{"key":"suffix","name":"Suffix","type":"text","placeholder":"\/Month"}]}'>$123/Mo</div>

Default CSS

font-weight:bold;

JavaScript

registerDesignerFormattingFunction(
'format_{id}',
(el,dataValue,dataObject,elementSettings) => {

    const price = "{{item.price}}";
    const months = isNaN(parseInt(elementSettings?.months)) ? 60 : parseInt(elementSettings?.months);
    const rate = isNaN(parseFloat(elementSettings?.rate)) ? 6.5 : parseFloat(elementSettings?.rate)
    const suffix = elementSettings?.suffix ?? "";
    const prefix = elementSettings?.prefix ?? "";

    console.log("Running Function : " + price + " : " + rate);

    if (months <= 0) {
      throw new Error("Number of months must be greater than zero.");
    }

    //I don't like this pattern
    //It would be better to specify this macro in the field settings
    if (!price || isNaN(price)) {
      return; //No price, so, display placeholder?
    }

    const monthlyRate = rate / 100 / 12;

    // If the interest rate is 0%, simple division
    if (monthlyRate === 0) {
      el.innerHTML =
        prefix + Math.floor(price / months).toLocaleString() + suffix;
    }

    // Formula: M = P * (r(1 + r)^n) / ((1 + r)^n - 1)
    const numerator = price * monthlyRate * Math.pow(1 + monthlyRate, months);
    const denominator = Math.pow(1 + monthlyRate, months) - 1;
    const monthlyPayment = Math.floor(numerator / denominator).toLocaleString();

    el.innerHTML = prefix + monthlyPayment + suffix;

},
'[id="{id}"]');

---

← Back to Text Elements | 📋 All Elements