Skip to main content

How to customize template

This page explains how to customize a template for your product finder. Create a new .phtml file and upload it to design/frontend/*/*/Mirasvit_Finder/templates/finder/.

Let's explore the default Horizontal template and analyze its parts.

In Luma theme it is located in:

vendor/mirasvit/module-finder/src/Finder/view/frontend/templates/finder/horizontal.phtml

In Hyva theme it is located in:

vendor/mirasvit/module-finder-hyva/src/MirasvitFinder/view/frontend/templates/finder/horizontal.phtml

1. Data retrieval​

$finder  = $block->getFinder();
$filters = $block->getFilters();

The code retrieves the finder object (the main search block) and an array of filters (the list of filters to be displayed to the user). This part of code should be used without any changes.

2. Main HTML structure​

<div class="mst-finder__finder mst-finder__finder-horizontal _col-<?= count($filters) ?>" data-finder="<?= $finder->getId() ?>">
    <div class="mst-finder__finder-header">
        <h3><?= $finder->getBlockTitle() ?></h3>
</div>

A container is created with classes for styling and a column count equal to the number of filters. The finder’s title is displayed in the header.

Main HTML structure for Hyva​

<div class="card p-4 mb-4"
     data-finder="<?= (int)$finder->getId() ?>"
     x-data="finder_<?= $escaper->escapeHtmlAttr($uniqueId) ?>()"
     x-init="init()">
</div>

This <div> sets up a visually styled container for a product finder block and connects it to Alpine.js for interactivity.

3. Rendering filters​

<div class="mst-finder__finder-filters">
    <?php foreach ($filters as $filter): ?>
        <?= $block->getFilterHtml($filter) ?>
    <?php endforeach ?>
</div>

For each filter, the $block->getFilterHtml($filter) method is called, which generates the HTML for that specific filter (such as a dropdown, checkboxes, etc.).

4. Control buttons​

<div class="mst-finder__finder-footer">
    <button class="action" data-action-reset><?= __('Reset') ?></button>
    <button class="action primary" data-action-find><?= __('Find') ?></button>
</div>

At the bottom of the block, there are two buttons: Reset (to clear filters) and Find (to search for products based on the selected filters).

5. Inserting JS and CSS​

<?= $block->getJsHtml() ?>

<link rel="stylesheet" type="text/css" media="all" href="<?= $block->getCssAsset() ?>">

Additional JavaScript required for the block’s functionality is inserted. A CSS file is included for styling the finder.

6. Chosen JS Plugin Initialization​

<script>
    require([
        'jquery'
    ], function ($) {
        require([
            'Mirasvit_Finder/js/chosen.jquery'
        ], function () {
            jQuery().ready(function() {
                jQuery('.mst-finder__finder-filters select').chosen('destroy');
                jQuery('.mst-finder__finder-filters .chosen-container').remove();
                jQuery('.mst-finder__finder-filters select').show();
                jQuery('.mst-finder__finder-filters select').chosen();
            });
        });
    });
</script>

Uses AMD loading via RequireJS (Magento 2 standard). After loading jQuery and the chosen.jquery plugin:

  • Any previous Chosen instances are destroyed (to prevent duplicate initialization).
  • Old Chosen containers are removed.
  • The select elements are shown and re-initialized with Chosen for an enhanced user experience (e.g., styled dropdowns).

The code if you use Hyva theme​

<script>
function finder_<?= $escaper->escapeJs($uniqueId) ?>() {
    return createFinderComponent({
        finderId: <?= (int)$finder->getId() ?>
    });
}
</script>

This code dynamically generates a JavaScript function with a unique name for each finder block on the page. When called, this function initializes a finder component for the corresponding finder ID, ensuring that each finder instance is managed separately and safely in the browser.