[英]magento 2 expand layered navigation
在Magento 2.0中,默认设置是分层导航全部折叠,除了第一个过滤器(对我来说是价格)。 如何展开所有过滤器,以便每个过滤器选项在所有过滤器类别中可见?
我在代码中看到aria-expanded =“ false”,在HTML的某个地方有class =“ filter-options-content”和style =“ display:none;”。
有人知道在哪里编辑吗?
如果您正在使用Luma主题并且要执行此操作,请确保创建自己的主题作为Luma主题的子主题。 您可以在此处找到更多信息( https://community.magento.com/t5/Theming-Layout-Design-Questions/How-to-create-a-Child-Theme-in-Magento-2/mp/33314 #M384 )
然后,将位于“ vendor \\ magento \\ theme-frontend-luma \\ Magento_LayeredNavigation \\ templates \\ layer \\ view.phtml”中的文件复制到子主题的相应区域。
您需要将data-mage-init属性和“ active”属性更改为指定通过其索引打开哪些过滤器的格式。 我有6个过滤器,所以我希望该属性读取为“ 0 1 2 3 4 5”。
我在第30-45行之间进行了几处更改,如下所示:
<?php $wrapOptions = false; ?>
<?php
$filters = $block->getFilters();
$active_filters_str = implode(' ', range(0, count($filters)-1));
?>
<?php foreach ($filters as $filter): ?>
<?php if ($filter->getItemsCount()): ?>
<?php if (!$wrapOptions): ?>
<div class="filter-options" id="narrow-by-list" data-role="content" data-mage-init='{"accordion":{"openedState": "active", "collapsible": true, "active": "<?php echo $active_filters_str ?>", "multipleCollapsible": true}}'>
<?php $wrapOptions = true; endif; ?>
<div data-role="collapsible" class="filter-options-item">
<div data-role="title" class="filter-options-title"><?php /* @escapeNotVerified */ echo __($filter->getName()) ?></div>
<div data-role="content" class="filter-options-content"><?php /* @escapeNotVerified */ echo $block->getChildBlock('renderer')->render($filter); ?></div>
</div>
<?php endif; ?>
<?php endforeach; ?>
首先,确保使用“ $ filters = $ block-> getFilters();”将所有过滤器获取到变量中。 然后,使用“ $ active_filters_str = implode('',range(0,count($ filters)-1));为活动属性创建一个字符串,按索引列出它们 然后在mage-init属性中的active属性旁边回显此内容。
希望这可以帮助 :)
https://magento.stackexchange.com/questions/102259/open-category-filters-by-default-in-magento-2
vendor \\ magento \\ theme-frontend-luma \\ Magento_LayeredNavigation \\ templates \\ layer \\ view.phtml
<?php foreach ($block->getFilters() as $filter): ?>
<?php if ($filter->getItemsCount()): ?>
<?php if (!$wrapOptions): ?>
<?php $collapsibleRange = implode(' ', range(0, $filter->getItemsCount())); ?>
<strong role="heading" aria-level="2" class="block-subtitle filter-subtitle"><?php /* @escapeNotVerified */ echo __('Shopping Options') ?></strong>
<div class="filter-options" id="narrow-by-list" data-role="content" data-mage-init='{"accordion":{"openedState": "active", "collapsible": true, "active": "<?php echo $collapsibleRange ?>", "multipleCollapsible": true}}'>
<?php $wrapOptions = true; endif; ?>
<div data-role="collapsible" class="filter-options-item">
<div data-role="title" class="filter-options-title"><?php /* @escapeNotVerified */ echo __($filter->getName()) ?></div>
<div data-role="content" class="filter-options-content"><?php /* @escapeNotVerified */ echo $block->getChildBlock('renderer')->render($filter); ?></div>
</div>
<?php endif; ?>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.