Live Search PLP Widget

General Information

When enabled, the Product Listing Page (PLP) Widget replaces the standard server-side rendered output for the entire product list (products, filters/facets and pagination) on both category and search results pages with a React-based application provided by Adobe.

PLP Widget support is only available from version 1.0.5 and above. See the changelog for more details.

Relevant External Documentation:

• Adobe Commerce Live Search Product Listing Page (PLP) Widget Docs
• Adobe Commerce Live Search Storefront Product Listing Page Application Repository README

Experimental Features

Our implementation of the PLP Widget allows enabling/disabling experimental features via admin panel configuration. Including:

• Search box: display a search box alongside the sorting options that allows filtering of results by a given search query
• Image carousel: supports displaying multiple images in a carousel for products with more than one image available
• Price slider: replace the price range filter (facet) with a price slider
• List view: enable a toggle alongside the sorting options that allows switching between grid and list view (grid view is still default)
• Image optimization: enables image optimization via Fastly (where supported/utilized) by adding additional query parameters to product image URLs

The above options can be configured in the Adobe Commerce Admin Panel under 'Stores Configuration > Hyvä Themes > Live Search > PLP Widget'

Frequently asked questions

How do I enable the PLP Widget?

In the Adobe Commerce admin panel under 'Stores > Configuration > Live Search > Storefront Features'.

Should I use the PLP Widget?

This decision should be based on 3 main factors: functionality, maintenance and performance.

The PLP Widget offers tighter integration with Adobe's Live Search services and offers additional features not possible with the default server-side rendered page, such as category merchandising and greater control over facets.

However, the PLP Widget has a looser integration with Hyvä and requires a different approach to customization (both styling and functional changes).

In addition, from our testing, performance is impacted due to the main page content being loaded via additional requests made after the initial page load, which means the product listing output takes longer to fully render. The PLP Widget does also have some CLS (Cumulative Layout Shift) impact, but this has mostly been mitigated with our implementation.

Can I customize the appearance of the PLP Widget?

Yes. Adobe provides documentation on the CSS classes to target for each of the key elements in the PLP Widget.

The recommended way to update the PLP Widget appearance in Hyvä, with the least amount of effort and maintenance overhead, is to update the styles by adding a custom Post-CSS file to your theme and including it in your themes tailwind-source.css file (located by default in the web/tailwind/ directory).

Our base styles are implemented this way in Hyva_MagentoLiveSearch in the plp-widget.css file. The styles in this file can be extended in your own theme.

Given the default output of the React application, our default styles have had to be more specific (in terms of selectors) than we'd have liked, so if you'd rather remove these base styles altogether in favor of your own, you can do so by adding vendor/hyva-themes/magento2-ee-magento-live-search/src to the excluded directories for the postcssImportHyvaModules plugin in your themes postcss.config.js file (located by default in the web/tailwind/ directory). See docs on how to exclude directories for more details, plus an example file showing how to exclude the Live Search module CSS files below:

const { postcssImportHyvaModules } = require("@hyva-themes/hyva-modules");

module.exports = {
    plugins: [
        postcssImportHyvaModules({
            excludeDirs: ["vendor/hyva-themes/magento2-ee-magento-live-search/src"],
        }),
        require("postcss-import"),
        require("tailwindcss/nesting"),
        require("tailwindcss"),
        require("autoprefixer"),
    ],
};

Can I customize the functionality of the PLP Widget?

Yes. Some functionality can be modified by changing configuration in the Adobe Commerce admin panel, such as which facets are displayed, and in which order, as well as being able to enable/disable experimental features, such as the search box, image carousel, list view, price slider and image optimisation.

Any additional modifications to functionality, would require forking, customizing and maintaining your own version of Adobe's React application. To include your version of this application in your project, it is recommended to override the Hyva_MagentoLiveSearch::plp_script.phtml template and replace the URL of the <script> tags src attribute (which defaults to https://plp-widgets-ui.magento-ds.com/v2/search.js), with the URL or view file path of your forked version.