Magento 2 – How to Display Search Button

layoutmagento2.2PHPsearch

I need to add a icon instead the search input form and when I click on this icon to display the search input form? something like minicart.

enter image description here

Best Answer

1.Go to your custom theme like Package/Theme and create directory Magento_Search. 2.Copy form-mini.phtml from vendor/magento/module-search/view/frontend/templates. 3.I changed some piece of code in template please focus on line with comment "changes done here"

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile
?>
<?php
/** @var $block \Magento\Framework\View\Element\Template */
/** @var $helper \Magento\Search\Helper\Data */
$helper = $this->helper(\Magento\Search\Helper\Data::class);
?>

<div class="block block-search">
    <div class="block block-title"><strong><?= /* @escapeNotVerified */ __('Search') ?></strong></div>
    <div class="block block-content">
        <div id="search-btn"><a href="javascript:void(0)"><?php  echo __('Search');?></div><!-- change done here-->
        <div id="custom-search" style="display: none;"> <!-- change done here-->
            <form class="form minisearch" id="search_mini_form" action="<?= /* @escapeNotVerified */ $helper->getResultUrl() ?>" method="get">
              <div class="field search">
                  <label class="label" for="search" data-role="minisearch-label">
                      <span><?= /* @escapeNotVerified */ __('Search') ?></span>
                  </label>
                  <div class="control">
                      <input id="search"
                             data-mage-init='{"quickSearch":{
                                  "formSelector":"#search_mini_form",
                                  "url":"<?= /* @escapeNotVerified */ $helper->getSuggestUrl()?>",
                                  "destinationSelector":"#search_autocomplete"}
                             }'
                             type="text"
                             name="<?= /* @escapeNotVerified */ $helper->getQueryParamName() ?>"
                             value="<?= /* @escapeNotVerified */ $helper->getEscapedQueryText() ?>"
                             placeholder="<?= /* @escapeNotVerified */ __('Search entire store here...') ?>"
                             class="input-text"
                             maxlength="<?= /* @escapeNotVerified */ $helper->getMaxQueryLength() ?>"
                             role="combobox"
                             aria-haspopup="false"
                             aria-autocomplete="both"
                             autocomplete="off"/>
                      <div id="search_autocomplete" class="search-autocomplete"></div>
                      <?= $block->getChildHtml() ?>
                  </div>
              </div>
              <div class="actions">
                  <button type="submit"
                          title="<?= $block->escapeHtml(__('Search')) ?>"
                          class="action search">
                      <span><?= /* @escapeNotVerified */ __('Search') ?></span>
                  </button>
              </div>
          </form>  
        </div><!-- change done here-->

    </div>
</div>
<script type="text/javascript">// changes done here 
  require(['jquery'], function($){
    $(document).ready( function() {
      $('#search-btn').click(function(){
        $('#custom-search').toggle('slow');
      });
    });
  });
</script>

Now there will display a link "Search" and when you will click search box will show and when you will again click it will hide.

Related Topic