Search button in sticky nav no longer works

Some more info:
Since the css and JS are missing the <div class=”woodmart-search-full-screen” /> is showing at the bottom of each page on desktop. See screenshot.
We need a way to add the form and initialise it so the ajax works and apply the CSS.

Hi Artem,

We checked with the child theme switched off, and the issue on mobile is the same (on desktop, the search icon was obviously added through the child theme so it won’t work without it, but the problem seems to be essentially the same – we need to be able to add back the CSS and JS you’ve removed with the update).

I’ve added the link in the private content area.

Thanks,
Shira

Thanks, Artem.

1. Can you please provide a patch for this fix? If you fix it yourselves via FTP on our staging site, we won’t be able to then apply it to the production site once we’re ready to release.

2. Let me try to explain the second issue better.
You can download 2 screen recordings here: https://we.tl/t-zdhC1N16kP. One showing how it should be working and one showing it not working properly after the theme update.

What we did was reuse your search code to inject the search functionality to the sticky nav:

ok so we inject the search button into the sticky nav :
<div class="wd-header-search search-button wd-tools-element">
       <a href="#" rel="nofollow noopener">
          <span class="wd-tools-icon search-button-icon"></span>
       </a>
</div>

And to inject the search form into the body:

<div class="woodmart-search-full-screen" style="top: 60px">
   <span class="woodmart-close-search wd-cross-button">close</span>
   <form
      role="search"
      method="get"
      class="searchform woodmart-ajax-search"
      action=""
      data-thumbnail="1"
      data-price="1"
      data-post_type="product"
      data-count="20"
      data-sku="0"
      data-symbols_count="3"
      >
      <input
         type="text"
         class="s"
         placeholder="Search for products"
         value=""
         name="s"
         autocomplete="off"
         />
      <input type="hidden" name="post_type" value="product" />
      <button type="submit" class="searchsubmit">Search</button>
   </form>
   <div class="search-info-text">
      <span>Start typing to see products you are looking for.</span>
   </div>
   <div class="search-results-wrapper">
      <div class="woodmart-scroll has-scrollbar">
         <div
            class="woodmart-search-results woodmart-scroll-content"
            tabindex="0"
            style="right: -15px"
            >
            <div
               class="autocomplete-suggestions"
               style="
               position: absolute;
               display: none;
               max-height: 300px;
               z-index: 9999;
               "
               ></div>
         </div>
         <div class="woodmart-scroll-pane" style="display: none">
            <div
               class="woodmart-scroll-slider"
               style="height: 677px; transform: translate(0px, 0px)"
               ></div>
         </div>
      </div>
      <div class="woodmart-search-loader wd-fill"></div>
   </div>
</div>

This is all woodmart markup we just reused it in our own way.
But since you are now loading JS and CSS on demand this functionality no longer works – we need to know how to load the necessary assets on every page and initialise the full page search facility.

Alternatively, if you could provide another way of adding search as an icon to the sticky header, that would be even better.

Hi Artem,

Thanks for this. It did solve the mobile search bug – thank you, but unfortunately not the desktop one because those CSS and JS files are still missing.
How can we add them back in?

Hi,

Please see in private content.
If you make any changes, please detail them for us so I can relay to our developer.

Kind regards,
Shira

Please see in private content.

Sorry about that. Not sure why. I’ve changed it to the one in private content below and checked that it does work.

Thanks, Artem.

We’ve not managed to sort it out.
he only code we have in the child theme is the generated search form and it looks like this:

<div class="woodmart-search-full-screen" style="top: 60px">
   <span class="woodmart-close-search wd-cross-button">close</span>
   <form
      role="search"
      method="get"
      class="searchform woodmart-ajax-search"
      action=""
      data-thumbnail="1"
      data-price="1"
      data-post_type="product"
      data-count="20"
      data-sku="0"
      data-symbols_count="3"
      >
      <input
         type="text"
         class="s"
         placeholder="Search for products"
         value=""
         name="s"
         autocomplete="off"
         />
      <input type="hidden" name="post_type" value="product" />
      <button type="submit" class="searchsubmit">Search</button>
   </form>
   <div class="search-info-text">
      <span>Start typing to see products you are looking for.</span>
   </div>
   <div class="search-results-wrapper">
      <div class="woodmart-scroll has-scrollbar">
         <div
            class="woodmart-search-results woodmart-scroll-content"
            tabindex="0"
            style="right: -15px"
            >
            <div
               class="autocomplete-suggestions"
               style="
               position: absolute;
               display: none;
               max-height: 300px;
               z-index: 9999;
               "
               ></div>
         </div>
         <div class="woodmart-scroll-pane" style="display: none">
            <div
               class="woodmart-scroll-slider"
               style="height: 677px; transform: translate(0px, 0px)"
               ></div>
         </div>
      </div>
      <div class="woodmart-search-loader wd-fill"></div>
   </div>
</div>

and we inject that into the body after ‘.cart-widget-side’.

Could you please let us know how we can simply initialise the full page search functionality and trigger the form when we click the search icon?
It would help us avoid similar issues in future updates too.

Thanks,
Shira

Hi Artem,
Where can I get the code for the full screen search icon is there a demo of this facility that i can see working? a link and some instruction on how to enable this feature would be very helpful.

Many thanks,

Hi Artem,

So now we have a styled search form and the search button is correct but we need to initialise the full page search JavaScript – none of the functionality is working. We’ve tried calling woodmartThemeModule.searchFullScreen() but nothing changes. It seems like it may have been removed.

Disabling the sticky clone isn’t an option for us. We need that sticky clone option so we can include things like the shopping cart icon.

Can you please help us understand how to initialise the full page search JavaScript from our search icon?

Thanks,

Hi,

Showing a search input box and including search in the sticky header shouldn’t really be an either-or choice. Can you please share whether there are any plans to allow that? It would help us to plan our work on this feature.

Thanks,
Shira

Not necessarily, that would be ideal but the option to show the input field on both is also fine. The problem is that if we show the input field in the nav, search isn’t included at all in the sticky menu.

Hi,

Yes. Since my last message, we disabled our child theme and I changed the nav to the full page search (the icon-only option) to check if that works, and we found out that the full page search is still not initialising. I did the same on our production site which runs the older woodmart theme and it works fine there. So it seems that the problem we’ve been discussing initially isn’t a customisation problem. Full page search hasn’t been working since the update.

Can you please take a look at how it can be fixed?
And if it is possible to have the search form input box appear on both the standard desktop nav and the sticky nav, can you please take a look at why that’s not working either?

I’ve included our FTP details and the admin access again for you in the private content section.

Thanks,
Shira

Why do you need the production site? They’re both live and we’ve only updated staging so everything we’re talking about is there. We will only update production once all the bugs are fixed.
We’re unable to share access to the production site because we have sensitive customer information there (We’re a health site). But it’s also not relevant to this problem. I only mentioned it because I used it to confirm that the problem didn’t exist with the old version of the theme.

Thank you Atrem,

I can see that the full page search is fixed.
Can you please share the details of the fix so we can use it again when enable the child theme and when we migrate to production?

You were also going to look at why when it’s set to search form, that search form isn’t added to the sticky nav. I can see that that isn’t fixed. Can you please look into it?

Thanks,
Shira