Add Magento search on Home Page banner

Question

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

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

Rashi

Answer 1

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.