Pop Up only responds to first Element

Ask the Community Customization
1

I have my pop up set to Element ID = Quote

On the page I have several buttons that contain the ID = Quote

The pop up only responds to the first instance of the Element ID (Button). Others down the page don’t activate the pop up.

How can I get all of the buttons to make the pop up activate?

3

Hi there, @Mark_Farrow and welcome to the Community :waving_hand:

I’ve checked your website and see that only one more button has id"Quote":

image
image1634×826 126 KB


There is another Get a Quote button on the page, but it doesn’t have ID “Quote”:

image
image1708×763 161 KB


Would you like both buttons to trigger the popup, or only the button from the 1st screenshot?

4

Sure its here: https://forestpest.wpenginepowered.com/

First Button on the page is “Get an Instant Quote”
Going down the page the next button is “Get a Quote”
Third Button is “Get a Free Quote”
4th Button is “Get a Quote”

I have all of their Element ID’s set to “Quote”

5

OK I just corrected that, and I do want all of the buttons to activate the POP UP. I also want to use this same technique on inner pages.

6

Got it, thanks!

I’ve forwarded your request to the dev team and will let you know once the solution is ready :slightly_smiling_face:

7

And the final question: should the Get a Quote button in the form also trigger the popup?

image
image1601×988 98 KB

8

Thank you.

9

@Mark_Farrow Could you just answer the question about the Get a Quote buttons in the forms (my previous message)?

10

No, the forms are a separate function. Using Formidable forms Plugin…

11

Got it, thanks!

I’ll keep you updated :slightly_smiling_face:

12

Hi @Mark_Farrow :waving_hand:

Thank you for waiting!

Here is a custom script from our devs:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const TARGET_BUTTON_NAMES = [
      'Get a Quote',
      'Get Instant Quote',
      'Get a Free Quote'
    ];

    function normalizedString(str) {
      return str.toLowerCase().trim();
    }

    function compareButtonText(text) {
      return TARGET_BUTTON_NAMES.map(normalizedString).includes(
        normalizedString(text)
      );
    }

    const buttons = Array.from(
      document.querySelectorAll('a[role="button"][class*="nectar-button"]')
    ).filter(({ textContent }) => compareButtonText(textContent));

    buttons.forEach((button) => {
      button.addEventListener('click', (e) => {
        e.preventDefault();
      });

      button.setAttribute('id', 'Quote');
    });
  });
</script>

Please add right after the widget’s installation code and let me know how it worked :slightly_smiling_face:

13

This version doesnt work it only works on the first button in the homepage other buttons don’t activate the pop up.

14

this version sent yesterday at 7am works:

<script>
const TEXT = 'quote';

const waitForElements = (selector, root = document) =>
	new Promise((res) => {
		const observer = new MutationObserver(() => {
			const elements = root.querySelectorAll(selector);
			if (elements.length) {
				res(elements);
				observer.disconnect();
			}
		});

		observer.observe(root, { childList: true, subtree: true });
	});

waitForElements('a[role="button"]').then((buttons) => {
	buttons.forEach((button) => {
		const buttonText = button.querySelector('span')?.textContent;

		if (!buttonText) return;

		if (buttonText?.toLowerCase()?.includes(TEXT)) {
			const triggerButton = document.querySelector('#Quote');

			if (!triggerButton) return;

			button.addEventListener('click', (e) => {
				e.preventDefault();
				e.stopPropagation();

				triggerButton.click();
			});
		}
	});
});
</script>
15

Now this one isn’t working for all buttons either…

16

I am so sorry about that!

I’ll double-check this solution with the devs and will get back to you once I have any news :slightly_smiling_face:

17

Actually the initial version does work, sorry about miscommunication.

18

Oh, that’s great!

If anything else comes up, we’ll be delighted to help :wink: