Conditional Logic to Replace Elfsight Form Submit Button

Ask the Community Customization
,
22

Thank you, Max.

I tested it and it works well initially, but if a customer goes back in the form after triggering the button, clicking the next button still opens the “Get Your Free Quote” page instead of behaving normally. I’ve recorded a screen capture to demonstrate the issue. Could this be a limitation of the JavaScript?

1 Like
23

Got it, thanks for sharing a screencast!

I really hope this behavior can be adjusted. Our devs will look into this and I’ll update you once it’s done :slightly_smiling_face:

1 Like
24

Hi @Michael_Surnak :waving_hand:

We’ve adjusted the script:

const widgetSelector =
  '.elfsight-app-17536663-c388-4d9c-900b-ac172987f487';

const newButtonLink =
  'https://k9poopertroopers.com.au/get-your-free-quote';

const originalTextMap = new WeakMap();
const patchedInputs = new WeakSet();
const boundButtons = new Set();

const rules = [
  {
    labelStartsWith:
      'What changes would you like to make to your service address/addresses?',
    inputSelector: 'input[value="Change a service address"]',
    buttonText: 'Get Your Free Quote'
  },
  {
    labelStartsWith:
      'How many service addresses would you like to add?',
    inputSelector: 'input[value="Just one"]',
    buttonText: 'Get Your Free Quote'
  },
  {
    labelStartsWith:
      'How many service addresses would you like to add?',
    inputSelector: 'input[value="Multiple"]',
    buttonText: 'Get Your Free Quote'
  }
];

function getActiveRule(container) {
  for (const rule of rules) {
    const field = [...container.querySelectorAll('[class*="FormFieldLayout__Container-sc"]')]
      .find(f => {
        const labelEl = f.querySelector('[class*="FormFieldLayout__Label-sc"]');
        return (
          labelEl &&
          labelEl.textContent
            .trim()
            .toLowerCase()
            .startsWith(rule.labelStartsWith.toLowerCase())
        );
      });

    if (!field) continue;

    const input = field.querySelector(rule.inputSelector);
    if (input && input.checked) {
      return rule;
    }
  }

  return null;
}

function patchStep(container) {
  const buttonEl = container.querySelector(
    'button[aria-label="Submit Change Request"]'
  );

  if (!buttonEl) return;

  const buttonLabel =
    buttonEl.querySelector('[class*="ButtonBase__Ellipsis-sc"]') ||
    buttonEl;

  if (!originalTextMap.has(buttonEl)) {
    originalTextMap.set(buttonEl, buttonLabel.textContent);
  }

  function syncButtonText() {
    const activeRule = getActiveRule(container);

    if (activeRule) {
      buttonLabel.textContent = activeRule.buttonText;
    } else {
      buttonLabel.textContent =
        originalTextMap.get(buttonEl) ?? buttonLabel.textContent;
    }
  }

  if (!boundButtons.has(buttonEl)) {
    boundButtons.add(buttonEl);

    buttonEl.addEventListener(
      'click',
      e => {
        const activeRule = getActiveRule(container);
        if (!activeRule) return;

        e.preventDefault();
        e.stopPropagation();
        window.open(newButtonLink, '_blank');
      },
      true
    );
  }

  rules.forEach(rule => {
    const field = [...container.querySelectorAll('[class*="FormFieldLayout__Container-sc"]')]
      .find(f => {
        const labelEl = f.querySelector('[class*="FormFieldLayout__Label-sc"]');
        return (
          labelEl &&
          labelEl.textContent
            .trim()
            .toLowerCase()
            .startsWith(rule.labelStartsWith.toLowerCase())
        );
      });

    if (!field) return;

    const input = field.querySelector(rule.inputSelector);
    if (!input) return;

    if (!patchedInputs.has(input)) {
      patchedInputs.add(input);
      input.addEventListener('change', syncButtonText);
    }
  });

  syncButtonText();
}

const waitForWidget = setInterval(() => {
  const container = document.querySelector(widgetSelector);
  if (container) {
    patchStep(container);
    setInterval(() => patchStep(container), 300);
    clearInterval(waitForWidget);
  }
}, 300);

Could you please test your widget once again and let me know if any issues appear on your end?

1 Like
25

IT WORKS! Thank you Max, I wasn’t sure if it was possible. Thank you to you and the team!

2 Likes
26

Perfect, you’re always welcome :wink:

1 Like