Saya ingin menampilkan pohon kategori di frontend seperti admin pohon kategori default.
Perlu menampilkan struktur pohon kategori di modul khusus saya dan area konten untuk sisi frontend.
Bantuan apa pun akan dihargai.
Terima kasih.
Saya ingin menampilkan pohon kategori di frontend seperti admin pohon kategori default.
Perlu menampilkan struktur pohon kategori di modul khusus saya dan area konten untuk sisi frontend.
Bantuan apa pun akan dihargai.
Terima kasih.
Jawaban:
1) buka "app" dari direktori root Magento 2 dan buat kode direktori baru. Kemudian buat dua direktori lagi di app / code , Namespace dan Module Name. Direktori final akan terlihat seperti ini: app / code / Demo / CategoryTree .
Demo sebagai Namespace dan CategoryTree sebagai nama modul.
2) buat file "module.xml" di app / code / Demo / CategoryTree / etc dan rekatkan kode di bawah ini ke dalam file:
<?xml version="1.0"?>
<!--
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Demo_CategoryTree" setup_version="1.0.0">
<sequence>
<module name="Magento_Catalog"/>
</sequence>
</module>
</config>
3) buat file "route.xml" di app / code / Demo / CategoryTree / etc / frontend dan tempel kode di bawah ini ke dalam file:
<?xml version="1.0"?>
<!--
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="standard">
<route id="categorytree" frontName="categorytree">
<module name="Demo_CategoryTree" />
</route>
</router>
</config>
4) buat file "registration.php" di app / code / Demo / CategoryTree dan rekatkan kode di bawah ini dalam file:
<?php
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Demo_CategoryTree',
__DIR__
);
5) buat file "Index.php" di app / code / Demo / CategoryTree / Controller / Index dan rekatkan kode di bawah ini ke dalam file:
<?php
/**
*
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
namespace Demo\CategoryTree\Controller\Index;
class Index extends \Magento\Framework\App\Action\Action
{
/**
* @var \Magento\Framework\View\Result\PageFactory $resultPageFactory
*/
protected $resultPageFactory;
/**
* @param \Magento\Framework\App\Action\Context $context
* @param \Magento\Framework\View\Result\PageFactory $resultPageFactory
*/
public function __construct(
\Magento\Framework\App\Action\Context $context,
\Magento\Framework\View\Result\PageFactory $resultPageFactory
) {
$this->resultPageFactory = $resultPageFactory;
parent::__construct($context);
}
/**
* Renders CATEGORYTREE Index page
*
* @param string|null $coreRoute
* @return \Magento\Framework\Controller\Result\Forward
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
*/
public function execute($coreRoute = null)
{
$resultPage = $this->resultPageFactory->create();
$resultPage->getConfig()->getTitle()->set(__('CategoryTree'));
return $resultPage;
}
}
6) buat file "categorytree_index_index.xml" di app / code / Demo / CategoryTree / view / frontend / layout dan tempel kode di bawah ini ke dalam file:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="styles"/>
<head>
<css src="extjs/resources/css/ext-all.css"/>
<css src="extjs/resources/css/ytheme-magento.css"/>
</head>
<body>
<referenceContainer name="sidebar.additional">
<block class="Magento\Catalog\Block\Adminhtml\Category\Tree" name="category.tree" template="Demo_CategoryTree::catalog/category/tree.phtml"/>
</referenceContainer>
</body>
</page>
7) menyalin dari vendor / magento / modul-katalog / tampilan / adminhtml / templat / katalog / kategori / tree.phtml ke aplikasi / kode / Demo / CategoryTree / view / frontend / templates / katalog / kategori
8) buat file "requireejs-config.js" di app / code / Demo / CategoryTree / view / frontend dan tempel kode di bawah ini ke dalam file:
var config = {
"shim": {
"extjs/ext-tree": [
"prototype"
],
"extjs/ext-tree-checkbox": [
"extjs/ext-tree",
"extjs/defaults"
]
}
};
9) Jalankan perintah di bawah ini di direktori root:
php bin/magento setup:upgrade
php bin/magento cache:clean
php bin/magento cache:flush
php bin/magento setup:static-content:deploy
10) jalankan url seperti ini " http://local-magento.com/categorytree/index/index " sehingga Anda akan mendapatkan output seperti di bawah ini.
Oke inilah yang saya gunakan untuk menghasilkan menu berdasarkan pohon kategori saya. Perlu dicatat bahwa untuk memudahkan semua kategori saya disimpan di bawah kategori default dengan ID2, yang dilengkapi dengan instalasi baru Magento2. Jika Anda tidak memiliki struktur ini, Anda dapat mendefinisikan $soncats
sebagai array ID kategori yang ingin Anda lewati.
<ul id="nav" class="accordion vertnav vertnav-top grid-full wide">
<?php
$fathercat = $objectManager->create('Magento\Catalog\Model\Category')->load(2); //this is my master root category, holds all other categories so I can loop through.
$soncats = $fathercat->getChildrenCategories();
$catids = array(2);
foreach ($soncats as $soncat) {
$categoryid = $soncat->getId();
array_push($catids,$categoryid);
}
for($i = 1; $i < count($catids); ++$i) {
$basic = 1;
$catId = $catids[$i];
$subcategory = $objectManager->create('Magento\Catalog\Model\Category')->load($catId);
$subcats = $subcategory->getChildrenCategories();
$categoryname = $subcategory->getName();
$categoryurl = $subcategory->getUrl(); ?>
<li class="level0 nav-<?php echo $i;?> level-top parent"><a href="<?php echo $categoryurl ?>" class="level-top"><?php echo $categoryname; ?><span class="caret"> </span> </a><span class="opener"> </span>
<div class="level0-wrapper dropdown-6col" style="left: 0;">
<div class="level0-wrapper2">
<ul class="level0 part">
<?php
foreach ($subcats as $subcat) {
if ($subcat->getIsActive()) {
$subcat_url = $subcat->getUrl();
$subcat_name = $subcat->getName(); ?>
<li class="level1 nav-1-<?php echo $basic;?> item"><a href="<?php echo $subcat_url ?>"><?php echo $subcat_name; ?></a></li>
<?php
} $basic++; } ?>
</ul>
</div>
</div>
</div>
</li>
<?php } ?>
</ul>