Redirect to different page and retain selection

General
1

Hi,

Is this something that can be done?

I have a page which holds CMS Sort and Filter: Image Suppliers - BAPLA

What I would want to do now is have basically the same search bar on the homepage, where visitors can search and use the dropdowns and are then being redirected to the first page I mentioned upon submit and retain their selection.

Thanks

2

Hey @Marc! You check this thread → Show Search Results on CMS Filter Page from a different page on how to do it for the search bar.

If this is the functionality you are looking for, add the dropdowns and let me know so I can jump in and add the missing JS for them :muscle:

4

That is looking very promising. But I don’t understand what you mean with “add the dropdowns” and where you are going to add the missing JS then.

5

Sorry, I had not opened your homepage yet. I see you have the dropdowns already on the live site so it’s all good.

By adding the missing JS, I meant that I can jump to your live site and write the missing code for your solution as at the moment we only have the search bar working. I will then share this code for you to add it to your custom code section inside Webflow.

1 Like
6

Ok, awesome. Thanks, Luis. Do you need a read-only or something?

7

No need! :muscle:

8

Hey @marc! I will need you to modify one thing before I can send the complete code, can you change the group name for the Lincese checkboxes?

Right now both checkbox groups have the same name="Checkbox-10" and this is creating some conflict on the code. You can name them name="Checkbox-11". Also please add a unique id to your text input :pray:

9

Hi Luis, I believe I configured everything according to your requirements and as far as I understand things.

I am a bit unsure about the unique id for the text input, because there was an ID already and I believe it was unique (at least on the homepage). You do mean the search field, with the class of fs_cmsfilter_search-field, right?

In any way: many thanks for your support for this custom adjustment. :pray:

Looking forward to you checking if everything is correct now and to the code, naturally. :hugs:

10

Hey @Marc! Thanks for the adjustments! There is only one more thing I forgot to mention, can you add the id submit-button to the search button?

I believe this is the last adjustment for the code to work, you can copy/paste this into the </body> section for custom code on your homepage.

<script>
      window.onload = () => {
        const button = document.getElementById('submit-button');

        function gatherUserInput() {
          const userInput = document.getElementById('Search').value;

          const selectedSubjects = Array.from(
            document.querySelectorAll('input[name="Checkbox-Subject"]:checked')
          ).map((input) => input.nextElementSibling.textContent);

          const selectedLicenseTypes = Array.from(
            document.querySelectorAll('input[name="Checkbox-Licence"]:checked')
          ).map((input) => input.nextElementSibling.textContent);

          const queryParams = {};

          if (userInput.trim() !== '') {
            queryParams['*'] = userInput.replaceAll(' ', '+');
          }

          if (selectedSubjects.length > 0) {
            queryParams['subject'] = selectedSubjects.join('%2');
          }

          if (selectedLicenseTypes.length > 0) {
            queryParams['licence-type'] = selectedLicenseTypes.join('%2');
          }

          let queryString;
          queryString = Object.keys(queryParams)
            .map((key) => `${key}=${queryParams[key]}`)
            .join('&');

          const gatheredData = `/image-suppliers?${queryString}`;

          return gatheredData;
        }

        button.addEventListener('click', function (e) {
          e.preventDefault();
          const url = gatherUserInput();
          window.location.href = url;
        });
      };
    </script>

Let me know how it goes!

1 Like
11

It’s all working perfectly! Thanks again. :heart_eyes:

1 Like
12

You are welcome! :muscle: