Hide results until form completion

Wishlist Calculator
Max 11

@Kastri, Here is the solution from our devs:

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());

The custom message should be set in the 2nd line of the code.

Replace WIDGET_ID in the 1st line of the code with ID of your widget and add the resulted code to the Custom JS field on the Settings tab of your widget’s settings. Try it out and let me know how it worked :slightly_smiling_face:

3 Likes