Request Feature for Loan Calculator

Share your use case and provide as many details to support your idea as possible. Thank you! :blush:

I’ve created a Loan Calculator for a credit union here (Loan Calculator – Mulcair Credit Union). Is it possible to restrict the min/max values of the loan amount and loan term sliders depending on the loan type value selected from the dropdown please?

2 Likes

Hey there, @Dave_Clarke :wave:

I see that you have 3 Loan types. You can create 3 different Loan Amount and Loan Term sliders with different min/max values and display them based on the chosen Loan Type.

For example:

  • Show Loan Amount/Term 1 if Loan Type is Car Loan Over 8K - 7.5% (7.78% APR)

  • Show Loan Amount/Term 2 if Loan Type is Agri Loan - 6.55% (APR 6.75%)

  • Show Loan Amount/Term 3 if Loan Type is Standard Loan - 11.95% (APR 12.67%)


Please try it out and let me know how it worked :slightly_smiling_face:

1 Like

Thanks Max. Really appreciate your response.

Ideally I’d like to create something along the lines of this calculator (https://kilrushcreditunion.ie/) where the repayments section uses tabs to display each of the frequency payments. Would something like this be possible with custom code or even to pay for some custom development from you guys?

Thanks for any help.

Dave…

2 Likes

I am not sure if it’s feasible, but I’ll discuss it with the devs and update you on Monday :slightly_smiling_face:

1 Like

Thanks Max. Have a nice weekend.

2 Likes

Have a nice weekend too :wink:

1 Like

Hi @Dave_Clarke :wave:

Our devs came up with a custom solution for you:

const TARGET_FIELD_NAME = 'Repayment Frequency';

function listener(selector, callback) {
  const firstTarget = document.querySelector(selector);
  if (firstTarget) {
    return callback(firstTarget);
  }

  const observer = new MutationObserver((_, observer) => {
    const targetNode = document.querySelector(selector);
    if (targetNode) {
      observer.disconnect();
      callback(targetNode);
    }
  });
  observer.observe(document.body, { childList: true, subtree: true });
}

function normalizedString(str) {
  return str.trim().toLowerCase();
}

function installStyles() {
  const style = document.createElement('style');
  style.innerHTML = `
		[class*='FormFieldLayout__Container-sc'].payment {
			margin: 0;
		}

		[class*='FormFieldLayout__Container-sc'].payment
			[class*='choice__OptionsContainer-sc'] {
			display: flex;
		}

		[class*='FormFieldLayout__Container-sc'].payment
			[class*='choice-option__Container-sc'] {
			display: none;
		}

		[class*='FormFieldLayout__Container-sc'].payment
			[class*='choice-option__ItemLabel-sc'] {
			color: #fff;
			flex: 1 1 auto;
			text-align: center;
			padding: 4px 8px;
			border-radius: 4px;
		}

		[class*='FormFieldLayout__Container-sc'].payment
			[class*='choice-option__Label-sc'] {
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0;
		}

		[class*='FormFieldLayout__Container-sc'].payment
			[class*='choice-option__ItemLabel-sc'] {
			margin: 0 !important;
		}

		[class*='FormFieldLayout__Container-sc'].payment
			[class*='choice-option__Input-sc']:checked
			~ [class*='choice-option__ItemLabel-sc'] {
			background-color: #fff;
			color: rgb(5, 105, 155);
			font-weight: 600;
		}
	`;
  document.head.appendChild(style);
}

listener('[class*="form__Container-sc"]', (form) => {
  const targetLabelBlock = Array.from(
    form.querySelectorAll(
      '[class*="FormFieldLayout__Container-sc"] [class*="FormFieldLayout__Label-sc"]'
    )
  ).find(
    (node) =>
      normalizedString(node.textContent) === normalizedString(TARGET_FIELD_NAME)
  );

  if (!targetLabelBlock) {
    return;
  }

  targetLabelBlock.style.display = 'none';

  const targetField = targetLabelBlock.parentNode;
  targetField.classList.add('payment');
  const resultContainer = form.parentNode.querySelector(
    '[class*="results__Container-sc"]'
  );
  if (!resultContainer) {
    return;
  }

  installStyles();
  resultContainer.prepend(targetField);
});

Please add this code to the Custom JS section on the Settings tab of your widget’s settings and let me know how it worked :slightly_smiling_face:

Note: It’s important to not change the name of the field “Repayment Frequency”

Brilliant Max. Thanks for that. I’ll try that out now and play around with it.

2 Likes