Live Search

General Information

This module overrides the default search behavior and provides the user with a popup providing “Search as you type” functionality. Our module bundles multiple modules into one, So anything Live search related should be edited/overwritten in this module:

• "magento/module-live-search"
• "magento/module-live-search-metrics"
• "magento/module-live-search-product-listing"
• "magento/module-live-search-storefront-popover"
• "magento/module-live-search-terms"

As of version 1.1.0, the “Search as you type” popover queries the Live Search GraphQL API directly using the productSearch query. This replaces the deprecated Live Search JavaScript SDK used in earlier versions.

Because the module now sends a plain GraphQL query, you can extend it to request additional product fields. See Can I add fields to the search query? below.

This module depends on the Data Services module in order to send events back to Adobe.

Gitlab Modules:

Currently, the only way to access the repos in GitLab is by purchasing a Hyvä Enterprise license

Module - Hyva_MagentoLiveSearch

composer require hyva-themes/magento2-ee-magento-live-search
bin/magento setup:upgrade

Relevant External Documentation:

• Adobe Commerce Docs
• Adobe Commerce Live Search productSearch query
• Adobe Commerce Storefront Events SDK

Frequently asked questions

Does this module support the PLP Widget?

As of version 1.0.5 we provide compatibility for the Product Listing Page (PLP) Widget functionality.

For more details see our PLP Widget docs.

Can I customize the appearance of the search popover?

Yes, you can customize the appearance by modifying the overriding the frontend templates and classes provided by the modules. See Adobe's docs for more details and a list of CSS class names.

Can I add fields to the search query?

Yes. As of version 1.1.0, the GraphQL query is returned by Hyva\MagentoLiveSearch\ViewModel\LiveSearchApi::getProductSearchQuery(). To request additional fields, add an after plugin to this method and modify the returned query.

Any field available on the productSearch query can be added. See Adobe's productSearch docs for the full schema.

The following example adds the product's small image and description to every search result.

Register the plugin in your module's etc/frontend/di.xml:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Hyva\MagentoLiveSearch\ViewModel\LiveSearchApi">
        <plugin name="vendor_module_live_search_extra_fields"
                type="Vendor\Module\Plugin\AddFieldsToLiveSearchQuery"/>
    </type>
</config>

Then add the fields to the product selection in the plugin:

<?php

declare(strict_types=1);

namespace Vendor\Module\Plugin;

use Hyva\MagentoLiveSearch\ViewModel\LiveSearchApi;

class AddFieldsToLiveSearchQuery
{
    public function afterGetProductSearchQuery(LiveSearchApi $subject, string $result): string
    {
        return str_replace(
            'canonical_url',
            "canonical_url\n small_image { url label }\n description { html }",
            $result
        );
    }
}

Every field returned for items.product is available on product in Hyva_MagentoLiveSearch::search_as_you_type.phtml. To show the new fields, override that template in your theme and output them inside the x-for="product in liveSearchProducts" loop:

<img :src="product.small_image.url" :alt="product.small_image.label" width="48" height="48" />
<div class="line-clamp-2" x-html="product.description.html"></div>

x-html renders the description as HTML, so only use it for content that is trusted, such as product content managed in the Magento admin.

There is no need to override Hyva_MagentoLiveSearch::search_as_you_type_script.phtml.

Product attributes and low stock

Attributes such as material or activity, and the low stock flag, are not available on items.product. In Live Search, items.product.custom_attributes is always null. Request them on the sibling items.productView instead:

public function afterGetProductSearchQuery(LiveSearchApi $subject, string $result): string
{
    return str_replace(
        'items {',
        'items {
            productView {
                lowStock
                attributes(roles: ["visible_in_search"]) { name label value }
            }',
        $result
    );
}

Other fields selected on items, such as productView, are kept on the product under their own name. Output them in the template from product.productView:

<template x-if="product.productView.lowStock">
    <span>Only a few left</span>
</template>
<dl>
    <template x-for="attribute in product.productView.attributes" :key="attribute.name">
        <div>
            <dt x-text="attribute.label"></dt>
            <dd x-text="attribute.value"></dd>
        </div>
    </template>
</dl>

The roles argument limits the attributes by role. Roles include visible_in_search, visible_in_pdp and visible_in_compare_list. Leave it out to return attributes regardless of role. Multiple select attributes return their value as an array.