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