Auto Generate a Quote Number

Ask the Community Customization
1

It would be great for the Calculator widget to create a quote number, which is displayed within the results section and can be included in the email notifications.

2 Likes
3

Hi there, @Tony_Hill and welcome aboard :wave:

Could you let me know how many digits you’d like the quote number to have? Also, where would you prefer to see this number in the notification: in the email subject line or in the body of the message, above the results?

1 Like
4

5 digits would be fine.

In the body of the message would be great, above the results.

2 Likes
5

Okay! Would you like to implement this feature in both Calculators (from Airport and to Airport)?

1 Like
6

It would be required for both, please.

2 Likes
7

Thanks! I’ve passed your request to the dev team and will get back to you once I have their response :slightly_smiling_face:

8

Hi there, @Tony_Hill :wave:

The only solution in this case is to create a formula that will generate the quote number: RANDBETWEEN(10000, 99999)

image
image1542×910 50.2 KB


However, after any change made in the calculator, this number will always be regenerated.
Unfortunately, it’s impossible to add it to the email subject, but it will be displayed in the email notification itself.

Currently, this number is displayed with a comma as a thousand separator. You can completely remove the thousand separator for all calculations (screenshot):

image
image443×480 13 KB


If you’d like to remove the comma only for the quote number, you can use this code in the Custom JS section on the Settings tab of your widget’s settings:

const WIDGET_ID = 'YOUR WIDGET ID';
const calculationLabel = 'Quote Number';

const waitForElement = (selector, root = document) =>
	new Promise((res) => {
		const observer = new MutationObserver(() => {
			const element = root.querySelector(selector);
			if (element) {
				res(element);
				observer.disconnect();
			}
		});

		observer.observe(root, { childList: true, subtree: true });
	});

waitForElement(
	`.elfsight-app-${WIDGET_ID} [class*="results__Container-sc"]`
).then((resultsSection) => {
	const secondaryResults = resultsSection.querySelectorAll(
		'[class*="result-secondary__SecondaryContainer-sc"]'
	);
	const primaryResults = resultsSection.querySelectorAll(
		'[class*="result-primary__PrimaryContainer-sc"]'
	);

	const results = [
		...Array.from(secondaryResults),
		...Array.from(primaryResults),
	];

	results.forEach((result) => {
		const labelEl = result.querySelector('[class*="typography__Container-sc"]');
		const labelText = labelEl?.textContent?.toLowerCase();

		if (labelText !== calculationLabel.toLowerCase()) {
			return;
		}

		const calculationContainer = labelEl?.parentNode?.parentNode;

		if (!calculationContainer) {
			return;
		}

		const targetNumber = calculationContainer.querySelector(
			'[class*="animated-number__Content-sc"]'
		);

		if (!targetNumber) {
			return;
		}

		const removeCommas = (node) => {
			if (node.textContent) {
				node.textContent = node.textContent.replace(/,/g, '');
			}
		};

		removeCommas(targetNumber);

		const numberObserver = new MutationObserver((mutations) => {
			mutations.forEach((mutation) => {
				if (
					mutation.type === 'characterData' ||
					mutation.type === 'childList'
				) {
					removeCommas(targetNumber);
				}
			});
		});

		numberObserver.observe(targetNumber, {
			characterData: true,
			childList: true,
			subtree: true,
		});
	});
});

In the 1st line of the code, you should replace YOUR WIDGET ID with the ID of your widget.

Keep in mind that this code will remove the comma only from the widget. In the email notification, it still will be displayed.

Try it out and let me know if it worked for you :slightly_smiling_face: