Calculator: How to hide results until the form is submitted

[Max]

Want to hide calculation results until the form in your Calculator widget is submitted? We’ve got it covered

Replace WIDGET ID in the 1st line of the code below with the ID of your widget and add the resulted code to the Custom JS field on the Settings tab of your widget’s settings:

const WIDGET_ID = 'WIDGET ID';
const MESSAGE = 'Place order to see the results';

const style = document.createElement('style');
style.innerHTML = `
  .elfsight-app-${WIDGET_ID} [class*="result-primary__PrimaryContainer-sc"] *,
  .elfsight-app-${WIDGET_ID} [class*="result-secondary__SecondaryContainer-sc"] * {
    display: none;
  }
  .elfsight-app-${WIDGET_ID} [class*="result-primary__PrimaryContainer-sc"]:after,
  .elfsight-app-${WIDGET_ID} [class*="result-secondary__SecondaryContainer-sc"]:after {
    content: '${MESSAGE}';
  }
`;
document.body.append(style);

const waitForElem = (selector) =>
  new Promise((resolve) => {
    if (document.querySelector(selector)) {
      return resolve(document.querySelector(selector));
    }
    const observer = new MutationObserver(() => {
      if (document.querySelector(selector)) {
        observer.disconnect();
        resolve(document.querySelector(selector));
      }
    });
    observer.observe(document.body, {
      childList: true,
      subtree: true,
    });
  });

waitForElem(
  `[class*="${WIDGET_ID}"] [class*="SubmitMessage__Message-sc"]`
).then(() => style.remove());

This video shows it in action:

If you’d like to have this feature as an option in the settings, please upvote this ide on the Wishlist - Hide results until form completion

Guys, was this solution helpful to you? Share your feedback in the comments

[user33410]

Is there a way to display the message only once? Currently, it shows it for every calculation line, which is a bit repetitive.

[Max]

Hi there and welcome to the Community, @user33410

I’ve just tested your widget and the custom message is displayed only once:

When the form is submitted, all results are displayed correctly:

Could you please elaborate on what you mean under this? A screenshot of the issue would be much appreaciated

@user33410

it shows it for every calculation line

If the issue occurs only on the page, where the widget is installed, please send me a link to this page