Search button in sticky nav no longer works

Hi,

First, I’d like to say how excited we are about the new performance-focused update. It’s much needed and we hope to see the benefits when we implement.

However, we’ve hit a bit of a snag when we updated. The search icon in the sticky nav no longer works (it works fine in the non-sticky nav before you scroll).

1. Mobile: the search button for the mobile sticky header no longer works (it should trigger the sidebar navigation as the normal header). See screen recording ‘sticky-mobile’ downloadable from the link below.
2. Desktop: We’ve added a search icon to the sticky header, that triggers the full screen search facility, and that no longer works either – full screen search JS and css seems to be missing but the markup is in the dom. <div class=”woodmart-search-full-screen” />. See screen recording ‘sticky-desktop’ downloadable from the link below.

Download screen recordings: https://we.tl/t-dZQH8rOKDt

Hope you can help,
Shira

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.

Attachments:

You must be logged in to view attached files.

Hello,

Thank you for the feedback.

1. Please, send us a link where we can see this issue on your website.

2. Try to switch to the parent theme and test how it works.

Kind Regards

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

It seems to be a bug with the mobile search. We will fix this in our next theme update. If you want, you can provide us with FTP access and we will fix this on your website as well.

As for the second problem, we still can’t understand what is wrong. Could you please clarify the problem and provide us with some screenshots?

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.

Try to upload the files from archive and replace in the folder woodmart/js/scripts. Here is the link https://drive.google.com/file/d/1jTkHng9ShZE6UGRBfWbKNNFGYZ6vliy4/view
It should fix both issues.

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?

Please, provide your admin and FTP access so we can check why this fix doesn’t work for you

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, provide us your WordPress admin access as well.

Please see in private content.

The password seems to be wrong https://prnt.sc/12itfou

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

It doesn’t work correctly because you have outdated code in the child theme. You need to take the actual code from the current version in the parent theme. This function is located in the file woodmart/inc/modules/search.php

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

Hello,

Firstly, you need to remove this code from your child theme. Then, you need to get a new code from the parent theme 6.0.4. We have changed this markup and CSS classes that is why it doesn’t work with the latest version.
To make it work without customization you need to replace your main header search form with the full screen search icon.

Kind Regards

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,

Here is an example https://woodmart.xtemos.com/demo-decor/demo/decor/
You can edit the search element in your header via WoodMart -> Header builder -> Edit your current header. Also, try to disable the sticky clone option https://xtemos.com/docs/woodmart/header-builder/enable-sticky-header-option/

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,

Hello,

As we said, you need to add the full-screen search to your main header, and then it would work on the sticky header as well. As for now, it requires additional code customization and it is out of our theme support scope.

Kind Regards

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

Hello,

Do you want to show different types of the search on the regular header and on the sticky one? Currently, we don’t have such plans for our future updates, unfortunately.

Kind Regards

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.

Could you please provide us with your FTP access so we can check why it doesn’t work?

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

We need your live website FTP, not the staging.

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.

We have fixed this issue on your staging website. Please, check how it works now.

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

[Author]

Posts