0

In a Magento2 store, I'm trying to add a custom search input to filter all the subcategories from a category.

So I'm working on Magento_LayeredNavigation

Hyva Theme of course. (so Alpine.JS as JS library)

So in my app/design/frontend/Owner/sitename/Magento_LayeredNavigation/templates/layer/filter.phtml


<?php
/**
 * Hyvä Themes - https://hyva.io
 * Copyright © Hyvä Themes 2020-present. All rights reserved.
 * This product is licensed per Magento install
 * See https://hyva.io/license
 */

declare(strict_types=1);

use Magento\Catalog\Helper\Data;
use Magento\Framework\Escaper;
use Magento\LayeredNavigation\Block\Navigation\FilterRenderer;

// phpcs:disable Magento2.Templates.ThisInTemplate.FoundHelper

/** @var FilterRenderer $block */
/** @var Escaper $escaper */

$catalogHelper = $this->helper(Data::class);
$uniqueId = '_' . uniqid();

/** @var array $filterItems */
?>
<div x-data="{ filteredItems: <?= /* @noEscape */ json_encode($filterItems) ?>,onChangeHandler(event) {
    /*DO SOMETHING LIKE THIS HERE AFTER CONVERSION*/
    return this.filteredItems.filter(filteredItem => filteredItem.toLowerCase().includes(event.target.value.toLowerCase()))
  } 
}">
    <input class="mb-2 p-1" type="text" @change="onChangeHandler($event)" id="filter-search<?= $uniqueId ?>"/>
    <?php foreach ($filterItems as $filterItem): ?>
            <?php if ($filterItem->getCount() > 0): ?>
                <a href="<?= $escaper->escapeUrl($filterItem->getUrl()) ?>"
                   class="flex gap-2 text-3xs uppercase font-semibold tracking-wide">
                    <span class="filter-name text-clay"><?= /* @noEscape */ $filterItem->getLabel() ?></span>
                    <?php if ($catalogHelper->shouldDisplayProductCountOnLayer()): ?>
                        <span class="count text-middlegrey">(<?= /* @noEscape */(int)$filterItem->getCount() ?>)</span>
                    <?php endif; ?>
                </a>
            <?php else: ?>
                <span class="flex gap-2 text-3xs uppercase font-semibold tracking-wide">
                    <span class="filter-name text-clay"><?= /* @noEscape */ $filterItem->getLabel() ?></span>
                <?php if ($catalogHelper->shouldDisplayProductCountOnLayer()): ?>
                    <span class="count text-middlegrey">(<?= /* @noEscape */ (int)$filterItem->getCount() ?>)</span>
                <?php endif; ?>
            </span>
            <?php endif; ?>
    <?php endforeach ?>
</div>

But if I try to convert the $filterItems PHP array to a JS array i got Proxy {} on console.

I wanna convert it to loop over the newly JS array and be able to filter the labels based on what the @change event gets as value.

Do you guys have any idea to fix this issue?

Simply I wanna filter the subcategories with an input, like this ------->

enter image description here

D.D.
  • 99
  • 10
  • Could you show how `filteredItems: = /* @noEscape */ json_encode($filterItems) ?>` statement looks like after the PHP rendering? Furthermore the `.filter()` method returns a new shallow copy, so you will need `items` and `filteredItems` JS arrays. – Dauros Feb 22 '23 at 12:13
  • After PHP rendering if I `console.log(filteredItems)` it looks like an empty Object. My idea was to then loop over that JS array, instead of the PHP's `$filteredItems` – D.D. Feb 22 '23 at 12:20
  • Can you please just look at the generated source code? You can see there what is the results of PHP's `json_encode()`. The first issue seems to be there. – Dauros Feb 22 '23 at 12:35

0 Answers0