Search bar not working as expected

Specifically it’s not working on one type of page:

How it’s supposed to work:

  • Type search topic into search bar
    — If you click on specific product result from dropdown it takes you to that product page
    — If you press enter it will take you to a page to see all the search results.
    Works as expected on this page:
    MOFO | Home

What’s going wrong:
When I try and search on a product details page (e.g MOFO | Big Foot Coffee Table - Tall)

  • Click on search icon in header and type search topic into search bar
    — If you click on specific product result from dropdown it seems to take you to that product page but then immediately take you to search result page
    — If you press enter it will take you to a page to see all the search results (as expected).
    — ** Another odd thing that only happens on the product page only is the search results RG doesn’t expand to the correct width (like it does on other pages) - unsure if it’s related.

One solution is to just put a button on the search bar that triggers the navigation to the search results page, but I’d prefer to get it working like it does on all other pages.

Check your conditionals on the navigation workflow action as well as what I expect you have on the product page is an ‘page is loaded’ trigger that is likely causing the user to get redirected away from the product page

You likely didn’t add the custom CSS or a plugin element that controls the width of the RG as it is on other pages

Is this an app from a template?

Thanks for the suggestions.

  1. ‘When page is loaded’. Double checked this and I’m just setting a couple of states and tracking the visit. Nothing that impacts navigation.

I think it has something to do with with workflows attached to the search bar (search bar is a reusable element).

I have both:
When text is clicked → go to specific product page
When input value is changed → go to search results

Maybe it’s triggering both of these workflows when I click on the Product text?
But if that’s the case, why would it be having this issue ONLY on the one type of page…

  1. CSS / plugin. I have CSS on the reusable Search bar element. I’m presuming this CSS is effective since it works on all the other pages (but not the product page). There is no other CSS on the product page that could override this.

Not using any plugins.

If you copied and pasted that from another page, good chance that you need to remap the dynamic expression for the Group search box’s width. I’ve seen many times that the expression may look like it is correct, but is not actually mapped to the element on the page it was copied and pasted to.

Quite possible that the input value change is happening, where it may be getting reset.

Could be a speed delay

Try disabling the when input value is changed and test to see if it resolves your issue. If so, you have found the root cause of it.

CSS Width:
The CSS for the width is actually in the reusable element. I.e consistent referencing to the Search Box’s width on all pages. Either way i deleted and rewrote it. Same issue persists.

Navigating to Search results from product page:

  • Ok, think i got to the bottom about WHY it’s happening. Disabling the workflow ‘input value has changed’ did resolve the problem.

On the Product page, the search bar is usually hidden. If I type something in the search bar (e.g ‘sofa’) and click on one of the results it will take me to the product page from that result but the search bar will still be visible with ‘sofa’ in the search bar and the results showing.

I’m thinking after the navigation to the new page, it sees the search bar with ‘sofa’ in it, presumes it has changed and activates the search.

I tried reseting relevant inputs for the search bar after the search result was clicked but didn’t make a difference.

Before navigating to new page:

After navigating to new page:

Are you literally navigating to a new Page or are you just changing a view on a single page?

Search bar Reusable element workflow is as follows Go to page but since I’m already on a page product that may be impacting it?

Yes. But are you actually navigating between two distinct and separate pages in your app or are you navigating between views on the same one page in the app? It sounds like you are using one page because the reusable element would not keep it’s previous values if you had a reusable element on two separate and distinct pages since the values of the reusable are reset when the page is loaded.

Unsure if this answers your question:

  1. the URL changes (MOFO | Hug Sofa vs MOFO | Hippo Sofa)
  2. the type product stays the same.

Okay, so it is navigating to the same page, just changing the product displayed, which means in reality the page is not really ‘re-loading’ so the reusable element values are not getting reset.

So, issue is the ‘when input value is changed’ since you are possibly changing from a value to an empty value.

You may find adding a conditional to the workflow trigger ‘when input value is changed’ to add the condition ‘this inputs value is not empty’ so that it only triggers when a product value is selected, but not when it is cleared.

tried as you suggested. No impact.

To your point ‘possibly changing from a value to an empty value.’. Would the opposite not be happening, where the value in the search box stays ‘sofa’ rather than going to an empty state.

Maybe it could go ‘sofa’ → empty state → ‘sofa’

I just played with it.

When I am on a product page and I use the search icon to open up your search, I type into the input co and suggested results appear in an RG. I click onto a suggested result and I go to the product page fine, however, the suggestions do not close and the input value is not reset. Furthermore, if I instead of clicking onto a product from the suggestions and I click the arrow that is part of your search function it brings me to the search results page, because the user never completes a word in the input and so it sees only co

I am not being navigated away from the product page when I click on a product in the search suggestions…so what is the issue that you are having now?

I updated it last night.

Instead of input's value has changed to take me to search results page i use the arrow as a trigger to take me to the results page. Seems to solve the issue of clicking on a product in the RG but then being directed to search results page.

As you noted still having teh issue of:

  1. search value still filled in when I click on product in RG and go to new product page.
  2. search results rg having the incorrect width.

Run an action to reset the value when the user clicks the rg suggestions or the button.

I think it is an issue with your CSS for some reason, but not 100% sure…you could test out my dynamic width and height plugin to see if it fixes it up.

  • Tried this by setting on page load reset relevant inputs but no luck.
  • Can’t reset relevant inputs before triggering go to page
  • Can’t reset relevant inputs after go to page. go to page has to be last action in workflow.

Thanks - Will have a look at the plugin.

Keeping trying, you’ll find a way based on your setup to implement the the resetting of the value. Not all things are always straightforward, but there is almost always a way to get the functionality we need.

you can, because the input is not relevant at all since the user is clicking into the suggestions which is what the go to page action uses and not the input value…since there is no relevant input, you need to reset the group data that contains the input.

You can because the go to page workflow action if you set a conditional on it can be an action other than the last action in the series

There are no relevant inputs on page load because no inputs are used in a workflow action. Relevant inputs only resets inputs used within an action that is contained within the same series of actions you use the reset relevant inputs. Instead reset the group that contains the input element.