Как создать блоки подкатегорий или упорядочить их в magento 2
Я хочу создать подкатегории на панели навигации для отображения в организованных блоках. Как я могу достичь этого с помощью кодирования.
Как тот, в http://rashmian.com / http://alothemes.com/demo/supermarket/index.php/?___store=english_2
Где категории, имеющие длинные подкатегории, хорошо организованы.
В первой ссылке они использовали расширение megamenu. Однако, если я хочу какое-либо бесплатное расширение или хочу достичь его путем кодирования.
4 answers
Создайте пользовательский блок:
class Categories extends \Magento\Framework\View\Element\Template
{
protected $_itemCollectionFactory;
protected $_request;
protected $_categoryFactory;
public function __construct(
\Magento\Framework\View\Element\Template\Context $context,
\Magento\Catalog\Model\ResourceModel\Category\CollectionFactory $categoriesCollection,
\Magento\Catalog\Model\CategoryFactory $categoryFactory,
\Magento\Framework\App\Request\Http $request,
array $data = []
) {
$this->_itemCollectionFactory = $categoriesCollection;
$this->_categoryFactory = $categoryFactory;
$this->_request = $request;
parent::__construct($context, $data);
}
public function getContent()
{
return __("Shop By Categories");
}
public function getMainCategories()
{
$categoryFactory = $this->_itemCollectionFactory->create()
->addAttributeToSelect('*');
return $categoryFactory;
}
public function getSubCategoryList($category)
{
$collection = $this->_categoryFactory->create()->getCollection()->addAttributeToSelect('*')
->addAttributeToFilter('is_active', 1)
->setOrder('position', 'ASC')
->addIdFilter($category->getChildren());
return $collection;
}
}
XML-формат макета:
<referenceContainer name="content">
<block class="Ktpl\Shopbycategories\Block\Homepagecategories" name="categories_display" template="vendor_Shopbycategories:categories.phtml" />
</referenceContainer>
Категории шаблонов.phtml:
<?php
$catTitle = $block->getContent();
$mainCats = $block->getMainCategories();
$subcats = $block->getMainCategories();
?>
<h2><b><?php echo __($catTitle); ?></b></h2>
<hr>
<?php foreach ($mainCats as $category): ?>
<?php if ($category->getLevel() == 2): ?>
<div style="box-shadow: 5px 5px 5px 5px rgb(237,237,237); width: 270px;height: 225px;float:left; margin: 10px 20px">
<div class="categories" style="margin: 10px 20px;">
<div class="category-title">
<h3><b><?php echo __($category->getName()); ?></b></h3>
</div>
<?php $subcount = 0; ?>
<?php foreach ($subcats as $key => $subcategory):?>
<?php if ($category->getId() == $subcategory->getParentId()):?>
<div class="sub-categories">
<a href="#">
<?php echo __($subcategory->getName()); ?>
</a>
</div>
<?php $subcount++; ?>
<?php endif;?>
<?php if ($subcount == '5'){break;} ?>
<?php endforeach; ?>
<hr>
<div class="shop-by-all-categories">
<a href="<?php echo $block->getUrl('categories/index/view/id/' . $category->getId()) ?>">
<?php echo __("Shop All " . $category->getName()); ?>
</a>
</div>
</div>
</div>
<?php endif; ?>
<?php endforeach; ?>
Структура:
vendor->module
->Block->Categories.php
->view->frontend
->layout->cms_page_view.xml
->templates->categories.phtml
А затем установите в этой строке значение администратор->содержимое->Ваша страница
После долгих усилий, что я сделал, это нарисовал css панели навигации, которую я хочу, и применил это в своем собственном файле таблицы стилей, т.е.: styles-l.css
.navigation .level0.active > .level-top,.navigation .level0.has-active > .level-top{
border-color: #ff5501;border-style: solid;
border-width: 0 0 3px;color: #333;
text-decoration: none;
display: inline-block
}
.navigation .level0.parent:hover > .submenu{overflow: visible !important}
.navigation .level0 .submenu{
background: #fff;
border: 1px solid #ccc;
box-shadow: 0 5px 5px rgba(0,0,0,0.19);
font-weight: 400;min-width: 230px;
padding: 15px 0;
display: none;
left: 0;
margin: 0 !important;
padding: 0;
position: absolute;
z-index: 1;
margin-top: 11px;
width: 800px;
}
.ui-menu-item {
display: inline-block;
}
.navigation .level0 .submenu a {
display: block;
line-height: inherit;
color: #575757;
padding: 8px 20px;
}
.navigation .level0 .submenu > ul{margin-top: 11px}
.navigation .level0 .submenu > ul:before,.navigation .level0 .submenu > ul:after{
content: '';display: block;overflow: hidden;position: absolute
}
.navigation .level0 .submenu > ul:before{
color: #fff;left: 20px;top: -20px;border: 10px solid transparent;
height: 0;width: 0;border-bottom-color: #fff;z-index: 4
}
.navigation .level0 .submenu > ul:after{
border: 11px solid transparent;
height: 0;width: 0;border-bottom-color: #ccc;color: #ccc;left: 19px;
top: -22px;z-index: 3
}
.navigation .level0 .submenu a{
display: block;line-height: inherit;
color: #575757;padding: 8px 20px
}
.navigation .level0 .submenu a:hover,.navigation .level0 .submenu a.ui-state-focus{
background: #e8e8e8;
color: #333;text-decoration: none
}
.navigation .level0 .submenu .active > a{
border-color: #ff5501;border-style: solid;
border-width: 0 0 0 3px;color: #333
}