I have created a child theme based off of Luma. On my category page layered navigation instead of it saying Shopping Options at the top I would like to have an image there. In my child theme I created a folder called Magento_LayeredNavigation/templates/layer and copied the view.phtml.
I changed the code to add my image, flushed the cache and the image appears correctly. The problem is the layers in the navigation are forced to remain open and will not close. I made sure to flush my cache and the browser multiple times each, ran compile and did the static deploy. I thought I had messed up the code to add an image so I removed my code so now the view.phtml is identical to the original and tried again. The layered navigation is forced to stay open. Once I remove my folder and go back to the original file everything works again. With the view.phtml files being identical why would one work and one not based on the location?
Edit: I ran a diff on the output of the files. What I believe the problem is is that even though my view.phtml is identical the outputs are different.
My non working version looks like this-
<div class="sidebar sidebar-main">
<div class="block filter">
<div class="block-title filter-title">
<strong>Shop By</strong>
</div>
<div class="block-content filter-content">
<strong role="heading" aria-level="2" class="block-subtitle filter-subtitle">Shopping Options</strong>
<dl class="filter-options" id="narrow-by-list">
<dt role="heading" aria-level="3" class="filter-options-title">Manufacturer</dt>
<dd class="filter-options-content">
<ol class="items am_shopby_filter_items_attr_manufacturer">
My working version looks like this-
<div class="sidebar sidebar-main">
<div class="block filter" id="layered-filter-block" data-mage-init='{"collapsible":{"openedState": "active", "collapsible": true, "active": false, "collateral": { "openedState": "filter-active", "element": "body" } }}'>
<div class="block-title filter-title" data-count="0"><strong data-role="title">Shop By</strong></div>
<div class="block-content filter-content">
<strong role="heading" aria-level="2" class="block-subtitle filter-subtitle">Shopping Options</strong>
<div class="filter-options" id="narrow-by-list" data-role="content" data-mage-init='{"accordion":{"openedState": "active", "collapsible": true, "active": false, "multipleCollapsible": false}}'>
<div data-role="collapsible" class="filter-options-item">
<div data-role="title" class="filter-options-title">Manufacturer</div>
<div data-role="content" class="filter-options-content">
It is the data-mage-init that is missing but both of my view phtml use this code-
<?php if ($block->canShowBlock()): ?>
<div class="block filter">
<div class="block-title filter-title">
<strong><?= /* @escapeNotVerified */ __('Shop By') ?></strong>
</div>
<div class="block-content filter-content">
<?= $block->getChildHtml('state') ?>
<?php if ($block->getLayer()->getState()->getFilters()): ?>
<div class="block-actions filter-actions">
<a href="<?= /* @escapeNotVerified */ $block->getClearUrl() ?>" class="action clear filter-clear"><span><?= /* @escapeNotVerified */ __('Clear All') ?></span></a>
</div>
<?php endif; ?>
<?php $wrapOptions = false; ?>
<?php foreach ($block->getFilters() as $filter): ?>
<?php if (!$wrapOptions): ?>
<strong role="heading" aria-level="2" class="block-subtitle filter-subtitle"><?= /* @escapeNotVerified */ __('Shopping Options') ?></strong>
<dl class="filter-options" id="narrow-by-list">
<?php $wrapOptions = true; endif; ?>
<?php if ($filter->getItemsCount()): ?>
<dt role="heading" aria-level="3" class="filter-options-title"><?= $block->escapeHtml(__($filter->getName())) ?></dt>
<dd class="filter-options-content"><?= /* @escapeNotVerified */ $block->getChildBlock('renderer')->render($filter) ?></dd>
<?php endif; ?>
<?php endforeach; ?>
<?php if ($wrapOptions): ?>
</dl>
<?php endif; ?>
</div>
</div>
So now the question is why is the data init not appearing?
