Home Forums WoodMart support forum Search button in sticky nav no longer works Reply To: Search button in sticky nav no longer works

#288290

S.G.
Participant

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.