Calculator: How to blur results until the form is submitted

Pro Tips Elfsight Widgets Tips
1

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

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"] {
    position: relative;
    filter: blur(5px);
    pointer-events: none;
    user-select: none;
  }
  .elfsight-app-${WIDGET_ID} [class*="result-primary__PrimaryContainer-sc"]:after,
  .elfsight-app-${WIDGET_ID} [class*="result-secondary__SecondaryContainer-sc"]:after {
    content: '${MESSAGE}';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.8);
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    filter: none;
    z-index: 10;
  }
`;
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 how this feature works:


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

2 Likes