0

I want to add a search box on the home page banner like this Banner Image

I added this banner via page-builder. Any way-out to add search box like this? Please guide

Rashi

1 Answer 1

2

Add Search Form

app/code/VendoreName/ModuleName/Helper

Data.php

<?php

namespace VendoreName\ModuleName\Helper;

use Magento\Framework\App\Helper\AbstractHelper;

class Data extends AbstractHelper
{
    protected $searchConfigProvider;

    public function __construct(
        \Magento\Search\ViewModel\ConfigProvider $searchConfigProvider
    ) {
        $this->searchConfigProvider = $searchConfigProvider;
    }

    public function getSearchconfigProvider()
    {
        return $this->searchConfigProvider;
    }

}

app/code/VendoreName/ModuleName/view/frontend/templates

form.mini.phtml

<?php
/** @var $block \Magento\Framework\View\Element\Template */
/** @var $helper \Magento\Search\Helper\Data */
/** @var $configProvider \Magento\Search\ViewModel\ConfigProvider */
$helper = $this->helper(\Magento\Search\Helper\Data::class);
$searchHelper = $this->helper(\VendoreName\ModuleName\Helper\Data::class);
$configProvider = $searchHelper->getSearchconfigProvider();
?>
<div class="block block-search">
    <div class="block block-title"><strong><?= $block->escapeHtml(__('Search')) ?></strong></div>
    <div class="block block-content">
        <form class="form minisearch" id="search_mini_form"
              action="<?= $block->escapeUrl($helper->getResultUrl()) ?>" method="get">
            <div class="field search">
                <label class="label" for="search" data-role="minisearch-label">
                    <span><?= $block->escapeHtml(__('Search')) ?></span>
                </label>
                <div class="control">
                    <input id="search"
                            <?php if ($configProvider->isSuggestionsAllowed()):?>
                               data-mage-init='{"quickSearch":{
                                    "formSelector":"#search_mini_form",
                                    "url":"<?= $block->escapeUrl($helper->getSuggestUrl())?>",
                                    "destinationSelector":"#search_autocomplete",
                                    "minSearchLength":"<?= $block->escapeHtml($helper->getMinQueryLength()) ?>"}
                               }'
                            <?php endif;?>
                           type="text"
                           name="<?= $block->escapeHtmlAttr($helper->getQueryParamName()) ?>"
                           value="<?= /* @noEscape */ $helper->getEscapedQueryText() ?>"
                           placeholder="<?= $block->escapeHtmlAttr(__('What are you looking for?')) ?>"
                           class="input-text"
                           maxlength="<?= $block->escapeHtmlAttr($helper->getMaxQueryLength()) ?>"
                           role="combobox"
                           aria-haspopup="false"
                           aria-autocomplete="both"
                           autocomplete="off"
                           aria-expanded="false"/>
                    <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"
                    aria-label="Search"
                >
                    <span><?= $block->escapeHtml(__('Search')) ?></span>
                </button>
            </div>
        </form>
    </div>
</div>

You can add using layout and static block.

Using Layout: Add below block to your layout

<block class="Magento\Framework\View\Element\Template" name="search-block-name" template="VendoreName_ModuleName::form.mini.phtml"/>

Using Static Block: Add Below line into your static block

{{block name="search-block-name" class="Magento\Framework\View\Element\Template" template="VendoreName_ModuleName::form.mini.phtml"}}

After adding the above file follow below:

Step-1: Create Static Block -> In this section, you add HTML CODE and paste this line

{{block name="search-block-name" class="Magento\Framework\View\Element\Template" template="VendoreName_ModuleName::form.mini.phtml"}}

Step-2: In Banner you can add widget in Message Text section, click on Insert widget and select CMS Static Block then select our search static block which we have already created.After saving content and clearing cache. Now you can show search into Banner.

8
  • Thanks for the answer but can you guide me i.e. I want to show it above banner as shown in the image. Will it work for that case? Moreover, I don't want to remove default search box of magento i.e. 2 search box on home page(one is magento default & other is the one that I want to add on banner image created via pagebuilder) Jan 5 at 12:06
  • yes please try it. It may be helps you.
    – Msquare
    Jan 5 at 12:44
  • If I am using layout, then I think there is no need to create any block and add the widget. The sequence that i followed - created helper file, created template file, call-template file via layout. I hope this is fine? Jan 5 at 12:49
  • Hi, I am able to show search box but the functionality is not working when I am entering something in box.Please guide on that part Jan 5 at 13:03
  • please check your file my Magento version is 2.3 magetnoRoot/vendor/magento/module-search/view/frontend/templates/form.mini.phtml and update file and make sure our custom changes are also update. Otherwise, everything is working in my case
    – Msquare
    Jan 5 at 13:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.