Magento 2 : Show admin category tree on frontend
I want to display categories tree on frontend like admin default categories tree.
Need to display category tree structure in my custom module and content area for frontend side.
Any Help would be appreciated.
Thanks.
magento2 frontend category-tree
edited Jun 7 '17 at 5:34
Rakesh Jesadiya
28.8k1571119
asked Jun 7 '17 at 5:32
Suresh ChikaniSuresh Chikani
9,88053270
add a comment |
I want to display categories tree on frontend like admin default categories tree.
Need to display category tree structure in my custom module and content area for frontend side.
Any Help would be appreciated.
Thanks.
magento2 frontend category-tree
edited Jun 7 '17 at 5:34
Rakesh Jesadiya
28.8k1571119
asked Jun 7 '17 at 5:32
Suresh ChikaniSuresh Chikani
9,88053270
ibnab.com/en/blog/magento-2/…
– Bilal Usean
Jun 7 '17 at 5:50
Not just show category name but need category with tree like same as admin.
– Suresh Chikani
Jun 7 '17 at 5:52
Please refer: mage2.pro/t/topic/912 It will help you
– Nikunj Vadariya
Jun 7 '17 at 5:54
@nikunjVadariya Thank you for your suggestion. Let me check.
– Suresh Chikani
Jun 7 '17 at 8:48
add a comment |
I want to display categories tree on frontend like admin default categories tree.
Need to display category tree structure in my custom module and content area for frontend side.
Any Help would be appreciated.
Thanks.
magento2 frontend category-tree
edited Jun 7 '17 at 5:34
Rakesh Jesadiya
28.8k1571119
asked Jun 7 '17 at 5:32
Suresh ChikaniSuresh Chikani
9,88053270
I want to display categories tree on frontend like admin default categories tree.
Need to display category tree structure in my custom module and content area for frontend side.
Any Help would be appreciated.
Thanks.
magento2 frontend category-tree
magento2 frontend category-tree
edited Jun 7 '17 at 5:34
Rakesh Jesadiya
28.8k1571119
asked Jun 7 '17 at 5:32
Suresh ChikaniSuresh Chikani
9,88053270
edited Jun 7 '17 at 5:34
Rakesh Jesadiya
28.8k1571119
asked Jun 7 '17 at 5:32
Suresh ChikaniSuresh Chikani
9,88053270
edited Jun 7 '17 at 5:34
Rakesh Jesadiya
28.8k1571119
edited Jun 7 '17 at 5:34
Rakesh Jesadiya
28.8k1571119
edited Jun 7 '17 at 5:34
Rakesh Jesadiya
28.8k1571119
28.8k1571119
asked Jun 7 '17 at 5:32
Suresh ChikaniSuresh Chikani
9,88053270
asked Jun 7 '17 at 5:32
Suresh ChikaniSuresh Chikani
9,88053270
asked Jun 7 '17 at 5:32
Suresh ChikaniSuresh Chikani
9,88053270
9,88053270
ibnab.com/en/blog/magento-2/…
– Bilal Usean
Jun 7 '17 at 5:50
Not just show category name but need category with tree like same as admin.
– Suresh Chikani
Jun 7 '17 at 5:52
Please refer: mage2.pro/t/topic/912 It will help you
– Nikunj Vadariya
Jun 7 '17 at 5:54
@nikunjVadariya Thank you for your suggestion. Let me check.
– Suresh Chikani
Jun 7 '17 at 8:48
add a comment |
ibnab.com/en/blog/magento-2/…
– Bilal Usean
Jun 7 '17 at 5:50
Not just show category name but need category with tree like same as admin.
– Suresh Chikani
Jun 7 '17 at 5:52
Please refer: mage2.pro/t/topic/912 It will help you
– Nikunj Vadariya
Jun 7 '17 at 5:54
@nikunjVadariya Thank you for your suggestion. Let me check.
– Suresh Chikani
Jun 7 '17 at 8:48
ibnab.com/en/blog/magento-2/…
– Bilal Usean
Jun 7 '17 at 5:50
ibnab.com/en/blog/magento-2/…
– Bilal Usean
Jun 7 '17 at 5:50
Not just show category name but need category with tree like same as admin.
– Suresh Chikani
Jun 7 '17 at 5:52
Not just show category name but need category with tree like same as admin.
– Suresh Chikani
Jun 7 '17 at 5:52
Please refer: mage2.pro/t/topic/912 It will help you
– Nikunj Vadariya
Jun 7 '17 at 5:54
Please refer: mage2.pro/t/topic/912 It will help you
– Nikunj Vadariya
Jun 7 '17 at 5:54
@nikunjVadariya Thank you for your suggestion. Let me check.
– Suresh Chikani
Jun 7 '17 at 8:48
@nikunjVadariya Thank you for your suggestion. Let me check.
– Suresh Chikani
Jun 7 '17 at 8:48
add a comment |
2 Answers
2
active
oldest
votes
1) go to "app" from root directory of Magento 2 and create new directory code.
Then create two more directories in app/code, Namespace and Module Name. The final directory will look like this: app/code/Demo/CategoryTree.
Demo as Namespace and CategoryTree as module name.
2) create "module.xml" file in app/code/Demo/CategoryTree/etc and paste below code into the 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) create "route.xml" file in app/code/Demo/CategoryTree/etc/frontend and paste below code into the 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) create "registration.php" file in app/code/Demo/CategoryTree and paste below code in file:
<?php
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
MagentoFrameworkComponentComponentRegistrar::register(
MagentoFrameworkComponentComponentRegistrar::MODULE,
'Demo_CategoryTree',
__DIR__
);
5) create "Index.php" file in app/code/Demo/CategoryTree/Controller/Index and paste below code into the file:
<?php
/**
*
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
namespace DemoCategoryTreeControllerIndex;
class Index extends MagentoFrameworkAppActionAction
{
/**
* @var MagentoFrameworkViewResultPageFactory $resultPageFactory
*/
protected $resultPageFactory;
/**
* @param MagentoFrameworkAppActionContext $context
* @param MagentoFrameworkViewResultPageFactory $resultPageFactory
*/
public function __construct(
MagentoFrameworkAppActionContext $context,
MagentoFrameworkViewResultPageFactory $resultPageFactory
) {
$this->resultPageFactory = $resultPageFactory;
parent::__construct($context);
}
/**
* Renders CATEGORYTREE Index page
*
* @param string|null $coreRoute
* @return MagentoFrameworkControllerResultForward
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
*/
public function execute($coreRoute = null)
{
$resultPage = $this->resultPageFactory->create();
$resultPage->getConfig()->getTitle()->set(__('CategoryTree'));
return $resultPage;
}
}
6) create "categorytree_index_index.xml" file in app/code/Demo/CategoryTree/view/frontend/layout and paste below code into the 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="MagentoCatalogBlockAdminhtmlCategoryTree" name="category.tree" template="Demo_CategoryTree::catalog/category/tree.phtml"/>
</referenceContainer>
</body>
</page>
7) copy from vendor/magento/module-catalog/view/adminhtml/templates/catalog/category/tree.phtml to app/code/Demo/CategoryTree/view/frontend/templates/catalog/category
8) create "requirejs-config.js" file in app/code/Demo/CategoryTree/view/frontend and paste below code into the file:
var config = {
"shim": {
"extjs/ext-tree": [
"prototype"
],
"extjs/ext-tree-checkbox": [
"extjs/ext-tree",
"extjs/defaults"
]
}
};
9) Run below commands in the root directory:
php bin/magento setup:upgrade
php bin/magento cache:clean
php bin/magento cache:flush
php bin/magento setup:static-content:deploy
10) run url like this "http://local-magento.com/categorytree/index/index"
so you will get output like below.
edited Mar 9 '18 at 10:39
Teja Bhagavan Kollepara
2,94841847
answered Jan 22 '18 at 7:33
Nilesh GosaiNilesh Gosai
599410
hi @nilesh gosai could u please help me on this magento.stackexchange.com/questions/249360/…
– Nagaraju Kasa
Nov 8 '18 at 14:32
add a comment |
Okay this is what I use to generate a menu based on my category tree. It should be noted that for ease all my categories are stored under the default category with ID2, that comes with a fresh install of Magento2. If you do not have this structure, you could alternatively define $soncats as an array of the IDs of categories you would like to loop through instead.
<ul id="nav" class="accordion vertnav vertnav-top grid-full wide">
<?php
$fathercat = $objectManager->create('MagentoCatalogModelCategory')->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('MagentoCatalogModelCategory')->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>
answered Jan 5 '18 at 9:02
JohnJohn
693520
Hello John, it seems like you have undefined variable $addedq.
– Purushotam Sangroula
Jan 5 '18 at 9:42
Hi Anime, thank you for spotting that, addedq was another variable previously defined and relative to my project in question, it is not necessary for the code to work
– John
Jan 5 '18 at 10:25
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e) {
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom)) {
StackExchange.using('gps', function() { StackExchange.gps.track('embedded_signup_form.view', { location: 'question_page' }); });
$window.unbind('scroll', onScroll);
}
};
$window.on('scroll', onScroll);
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f177791%2fmagento-2-show-admin-category-tree-on-frontend%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1) go to "app" from root directory of Magento 2 and create new directory code.
Then create two more directories in app/code, Namespace and Module Name. The final directory will look like this: app/code/Demo/CategoryTree.
Demo as Namespace and CategoryTree as module name.
2) create "module.xml" file in app/code/Demo/CategoryTree/etc and paste below code into the 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) create "route.xml" file in app/code/Demo/CategoryTree/etc/frontend and paste below code into the 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) create "registration.php" file in app/code/Demo/CategoryTree and paste below code in file:
<?php
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
MagentoFrameworkComponentComponentRegistrar::register(
MagentoFrameworkComponentComponentRegistrar::MODULE,
'Demo_CategoryTree',
__DIR__
);
5) create "Index.php" file in app/code/Demo/CategoryTree/Controller/Index and paste below code into the file:
<?php
/**
*
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
namespace DemoCategoryTreeControllerIndex;
class Index extends MagentoFrameworkAppActionAction
{
/**
* @var MagentoFrameworkViewResultPageFactory $resultPageFactory
*/
protected $resultPageFactory;
/**
* @param MagentoFrameworkAppActionContext $context
* @param MagentoFrameworkViewResultPageFactory $resultPageFactory
*/
public function __construct(
MagentoFrameworkAppActionContext $context,
MagentoFrameworkViewResultPageFactory $resultPageFactory
) {
$this->resultPageFactory = $resultPageFactory;
parent::__construct($context);
}
/**
* Renders CATEGORYTREE Index page
*
* @param string|null $coreRoute
* @return MagentoFrameworkControllerResultForward
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
*/
public function execute($coreRoute = null)
{
$resultPage = $this->resultPageFactory->create();
$resultPage->getConfig()->getTitle()->set(__('CategoryTree'));
return $resultPage;
}
}
6) create "categorytree_index_index.xml" file in app/code/Demo/CategoryTree/view/frontend/layout and paste below code into the 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="MagentoCatalogBlockAdminhtmlCategoryTree" name="category.tree" template="Demo_CategoryTree::catalog/category/tree.phtml"/>
</referenceContainer>
</body>
</page>
7) copy from vendor/magento/module-catalog/view/adminhtml/templates/catalog/category/tree.phtml to app/code/Demo/CategoryTree/view/frontend/templates/catalog/category
8) create "requirejs-config.js" file in app/code/Demo/CategoryTree/view/frontend and paste below code into the file:
var config = {
"shim": {
"extjs/ext-tree": [
"prototype"
],
"extjs/ext-tree-checkbox": [
"extjs/ext-tree",
"extjs/defaults"
]
}
};
9) Run below commands in the root directory:
php bin/magento setup:upgrade
php bin/magento cache:clean
php bin/magento cache:flush
php bin/magento setup:static-content:deploy
10) run url like this "http://local-magento.com/categorytree/index/index"
so you will get output like below.
edited Mar 9 '18 at 10:39
Teja Bhagavan Kollepara
2,94841847
answered Jan 22 '18 at 7:33
Nilesh GosaiNilesh Gosai
599410
hi @nilesh gosai could u please help me on this magento.stackexchange.com/questions/249360/…
– Nagaraju Kasa
Nov 8 '18 at 14:32
add a comment |
1) go to "app" from root directory of Magento 2 and create new directory code.
Then create two more directories in app/code, Namespace and Module Name. The final directory will look like this: app/code/Demo/CategoryTree.
Demo as Namespace and CategoryTree as module name.
2) create "module.xml" file in app/code/Demo/CategoryTree/etc and paste below code into the 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) create "route.xml" file in app/code/Demo/CategoryTree/etc/frontend and paste below code into the 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) create "registration.php" file in app/code/Demo/CategoryTree and paste below code in file:
<?php
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
MagentoFrameworkComponentComponentRegistrar::register(
MagentoFrameworkComponentComponentRegistrar::MODULE,
'Demo_CategoryTree',
__DIR__
);
5) create "Index.php" file in app/code/Demo/CategoryTree/Controller/Index and paste below code into the file:
<?php
/**
*
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
namespace DemoCategoryTreeControllerIndex;
class Index extends MagentoFrameworkAppActionAction
{
/**
* @var MagentoFrameworkViewResultPageFactory $resultPageFactory
*/
protected $resultPageFactory;
/**
* @param MagentoFrameworkAppActionContext $context
* @param MagentoFrameworkViewResultPageFactory $resultPageFactory
*/
public function __construct(
MagentoFrameworkAppActionContext $context,
MagentoFrameworkViewResultPageFactory $resultPageFactory
) {
$this->resultPageFactory = $resultPageFactory;
parent::__construct($context);
}
/**
* Renders CATEGORYTREE Index page
*
* @param string|null $coreRoute
* @return MagentoFrameworkControllerResultForward
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
*/
public function execute($coreRoute = null)
{
$resultPage = $this->resultPageFactory->create();
$resultPage->getConfig()->getTitle()->set(__('CategoryTree'));
return $resultPage;
}
}
6) create "categorytree_index_index.xml" file in app/code/Demo/CategoryTree/view/frontend/layout and paste below code into the 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="MagentoCatalogBlockAdminhtmlCategoryTree" name="category.tree" template="Demo_CategoryTree::catalog/category/tree.phtml"/>
</referenceContainer>
</body>
</page>
7) copy from vendor/magento/module-catalog/view/adminhtml/templates/catalog/category/tree.phtml to app/code/Demo/CategoryTree/view/frontend/templates/catalog/category
8) create "requirejs-config.js" file in app/code/Demo/CategoryTree/view/frontend and paste below code into the file:
var config = {
"shim": {
"extjs/ext-tree": [
"prototype"
],
"extjs/ext-tree-checkbox": [
"extjs/ext-tree",
"extjs/defaults"
]
}
};
9) Run below commands in the root directory:
php bin/magento setup:upgrade
php bin/magento cache:clean
php bin/magento cache:flush
php bin/magento setup:static-content:deploy
10) run url like this "http://local-magento.com/categorytree/index/index"
so you will get output like below.
edited Mar 9 '18 at 10:39
Teja Bhagavan Kollepara
2,94841847
answered Jan 22 '18 at 7:33
Nilesh GosaiNilesh Gosai
599410
hi @nilesh gosai could u please help me on this magento.stackexchange.com/questions/249360/…
– Nagaraju Kasa
Nov 8 '18 at 14:32
add a comment |
1) go to "app" from root directory of Magento 2 and create new directory code.
Then create two more directories in app/code, Namespace and Module Name. The final directory will look like this: app/code/Demo/CategoryTree.
Demo as Namespace and CategoryTree as module name.
2) create "module.xml" file in app/code/Demo/CategoryTree/etc and paste below code into the 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) create "route.xml" file in app/code/Demo/CategoryTree/etc/frontend and paste below code into the 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) create "registration.php" file in app/code/Demo/CategoryTree and paste below code in file:
<?php
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
MagentoFrameworkComponentComponentRegistrar::register(
MagentoFrameworkComponentComponentRegistrar::MODULE,
'Demo_CategoryTree',
__DIR__
);
5) create "Index.php" file in app/code/Demo/CategoryTree/Controller/Index and paste below code into the file:
<?php
/**
*
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
namespace DemoCategoryTreeControllerIndex;
class Index extends MagentoFrameworkAppActionAction
{
/**
* @var MagentoFrameworkViewResultPageFactory $resultPageFactory
*/
protected $resultPageFactory;
/**
* @param MagentoFrameworkAppActionContext $context
* @param MagentoFrameworkViewResultPageFactory $resultPageFactory
*/
public function __construct(
MagentoFrameworkAppActionContext $context,
MagentoFrameworkViewResultPageFactory $resultPageFactory
) {
$this->resultPageFactory = $resultPageFactory;
parent::__construct($context);
}
/**
* Renders CATEGORYTREE Index page
*
* @param string|null $coreRoute
* @return MagentoFrameworkControllerResultForward
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
*/
public function execute($coreRoute = null)
{
$resultPage = $this->resultPageFactory->create();
$resultPage->getConfig()->getTitle()->set(__('CategoryTree'));
return $resultPage;
}
}
6) create "categorytree_index_index.xml" file in app/code/Demo/CategoryTree/view/frontend/layout and paste below code into the 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="MagentoCatalogBlockAdminhtmlCategoryTree" name="category.tree" template="Demo_CategoryTree::catalog/category/tree.phtml"/>
</referenceContainer>
</body>
</page>
7) copy from vendor/magento/module-catalog/view/adminhtml/templates/catalog/category/tree.phtml to app/code/Demo/CategoryTree/view/frontend/templates/catalog/category
8) create "requirejs-config.js" file in app/code/Demo/CategoryTree/view/frontend and paste below code into the file:
var config = {
"shim": {
"extjs/ext-tree": [
"prototype"
],
"extjs/ext-tree-checkbox": [
"extjs/ext-tree",
"extjs/defaults"
]
}
};
9) Run below commands in the root directory:
php bin/magento setup:upgrade
php bin/magento cache:clean
php bin/magento cache:flush
php bin/magento setup:static-content:deploy
10) run url like this "http://local-magento.com/categorytree/index/index"
so you will get output like below.
edited Mar 9 '18 at 10:39
Teja Bhagavan Kollepara
2,94841847
answered Jan 22 '18 at 7:33
Nilesh GosaiNilesh Gosai
599410
1) go to "app" from root directory of Magento 2 and create new directory code.
Then create two more directories in app/code, Namespace and Module Name. The final directory will look like this: app/code/Demo/CategoryTree.
Demo as Namespace and CategoryTree as module name.
2) create "module.xml" file in app/code/Demo/CategoryTree/etc and paste below code into the 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) create "route.xml" file in app/code/Demo/CategoryTree/etc/frontend and paste below code into the 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) create "registration.php" file in app/code/Demo/CategoryTree and paste below code in file:
<?php
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
MagentoFrameworkComponentComponentRegistrar::register(
MagentoFrameworkComponentComponentRegistrar::MODULE,
'Demo_CategoryTree',
__DIR__
);
5) create "Index.php" file in app/code/Demo/CategoryTree/Controller/Index and paste below code into the file:
<?php
/**
*
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
namespace DemoCategoryTreeControllerIndex;
class Index extends MagentoFrameworkAppActionAction
{
/**
* @var MagentoFrameworkViewResultPageFactory $resultPageFactory
*/
protected $resultPageFactory;
/**
* @param MagentoFrameworkAppActionContext $context
* @param MagentoFrameworkViewResultPageFactory $resultPageFactory
*/
public function __construct(
MagentoFrameworkAppActionContext $context,
MagentoFrameworkViewResultPageFactory $resultPageFactory
) {
$this->resultPageFactory = $resultPageFactory;
parent::__construct($context);
}
/**
* Renders CATEGORYTREE Index page
*
* @param string|null $coreRoute
* @return MagentoFrameworkControllerResultForward
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
*/
public function execute($coreRoute = null)
{
$resultPage = $this->resultPageFactory->create();
$resultPage->getConfig()->getTitle()->set(__('CategoryTree'));
return $resultPage;
}
}
6) create "categorytree_index_index.xml" file in app/code/Demo/CategoryTree/view/frontend/layout and paste below code into the 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="MagentoCatalogBlockAdminhtmlCategoryTree" name="category.tree" template="Demo_CategoryTree::catalog/category/tree.phtml"/>
</referenceContainer>
</body>
</page>
7) copy from vendor/magento/module-catalog/view/adminhtml/templates/catalog/category/tree.phtml to app/code/Demo/CategoryTree/view/frontend/templates/catalog/category
8) create "requirejs-config.js" file in app/code/Demo/CategoryTree/view/frontend and paste below code into the file:
var config = {
"shim": {
"extjs/ext-tree": [
"prototype"
],
"extjs/ext-tree-checkbox": [
"extjs/ext-tree",
"extjs/defaults"
]
}
};
9) Run below commands in the root directory:
php bin/magento setup:upgrade
php bin/magento cache:clean
php bin/magento cache:flush
php bin/magento setup:static-content:deploy
10) run url like this "http://local-magento.com/categorytree/index/index"
so you will get output like below.
edited Mar 9 '18 at 10:39
Teja Bhagavan Kollepara
2,94841847
answered Jan 22 '18 at 7:33
Nilesh GosaiNilesh Gosai
599410
edited Mar 9 '18 at 10:39
Teja Bhagavan Kollepara
2,94841847
edited Mar 9 '18 at 10:39
Teja Bhagavan Kollepara
2,94841847
edited Mar 9 '18 at 10:39
Teja Bhagavan Kollepara
2,94841847
2,94841847
answered Jan 22 '18 at 7:33
Nilesh GosaiNilesh Gosai
599410
answered Jan 22 '18 at 7:33
Nilesh GosaiNilesh Gosai
599410
answered Jan 22 '18 at 7:33
Nilesh GosaiNilesh Gosai
599410
599410
hi @nilesh gosai could u please help me on this magento.stackexchange.com/questions/249360/…
– Nagaraju Kasa
Nov 8 '18 at 14:32
add a comment |
hi @nilesh gosai could u please help me on this magento.stackexchange.com/questions/249360/…
– Nagaraju Kasa
Nov 8 '18 at 14:32
hi @nilesh gosai could u please help me on this magento.stackexchange.com/questions/249360/…
– Nagaraju Kasa
Nov 8 '18 at 14:32
hi @nilesh gosai could u please help me on this magento.stackexchange.com/questions/249360/…
– Nagaraju Kasa
Nov 8 '18 at 14:32
add a comment |
Okay this is what I use to generate a menu based on my category tree. It should be noted that for ease all my categories are stored under the default category with ID2, that comes with a fresh install of Magento2. If you do not have this structure, you could alternatively define $soncats as an array of the IDs of categories you would like to loop through instead.
<ul id="nav" class="accordion vertnav vertnav-top grid-full wide">
<?php
$fathercat = $objectManager->create('MagentoCatalogModelCategory')->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('MagentoCatalogModelCategory')->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>
answered Jan 5 '18 at 9:02
JohnJohn
693520
Hello John, it seems like you have undefined variable $addedq.
– Purushotam Sangroula
Jan 5 '18 at 9:42
Hi Anime, thank you for spotting that, addedq was another variable previously defined and relative to my project in question, it is not necessary for the code to work
– John
Jan 5 '18 at 10:25
add a comment |
Okay this is what I use to generate a menu based on my category tree. It should be noted that for ease all my categories are stored under the default category with ID2, that comes with a fresh install of Magento2. If you do not have this structure, you could alternatively define $soncats as an array of the IDs of categories you would like to loop through instead.
<ul id="nav" class="accordion vertnav vertnav-top grid-full wide">
<?php
$fathercat = $objectManager->create('MagentoCatalogModelCategory')->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('MagentoCatalogModelCategory')->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>
answered Jan 5 '18 at 9:02
JohnJohn
693520
Hello John, it seems like you have undefined variable $addedq.
– Purushotam Sangroula
Jan 5 '18 at 9:42
Hi Anime, thank you for spotting that, addedq was another variable previously defined and relative to my project in question, it is not necessary for the code to work
– John
Jan 5 '18 at 10:25
add a comment |
Okay this is what I use to generate a menu based on my category tree. It should be noted that for ease all my categories are stored under the default category with ID2, that comes with a fresh install of Magento2. If you do not have this structure, you could alternatively define $soncats as an array of the IDs of categories you would like to loop through instead.
<ul id="nav" class="accordion vertnav vertnav-top grid-full wide">
<?php
$fathercat = $objectManager->create('MagentoCatalogModelCategory')->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('MagentoCatalogModelCategory')->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>
answered Jan 5 '18 at 9:02
JohnJohn
693520
Okay this is what I use to generate a menu based on my category tree. It should be noted that for ease all my categories are stored under the default category with ID2, that comes with a fresh install of Magento2. If you do not have this structure, you could alternatively define $soncats as an array of the IDs of categories you would like to loop through instead.
<ul id="nav" class="accordion vertnav vertnav-top grid-full wide">
<?php
$fathercat = $objectManager->create('MagentoCatalogModelCategory')->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('MagentoCatalogModelCategory')->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>
answered Jan 5 '18 at 9:02
JohnJohn
693520
edited 37 mins ago
answered Jan 5 '18 at 9:02
JohnJohn
693520
answered Jan 5 '18 at 9:02
JohnJohn
693520
answered Jan 5 '18 at 9:02
JohnJohn
693520
693520
Hello John, it seems like you have undefined variable $addedq.
– Purushotam Sangroula
Jan 5 '18 at 9:42
Hi Anime, thank you for spotting that, addedq was another variable previously defined and relative to my project in question, it is not necessary for the code to work
– John
Jan 5 '18 at 10:25
add a comment |
Hello John, it seems like you have undefined variable $addedq.
– Purushotam Sangroula
Jan 5 '18 at 9:42
Hi Anime, thank you for spotting that, addedq was another variable previously defined and relative to my project in question, it is not necessary for the code to work
– John
Jan 5 '18 at 10:25
Hello John, it seems like you have undefined variable $addedq.
– Purushotam Sangroula
Jan 5 '18 at 9:42
Hello John, it seems like you have undefined variable $addedq.
– Purushotam Sangroula
Jan 5 '18 at 9:42
Hi Anime, thank you for spotting that, addedq was another variable previously defined and relative to my project in question, it is not necessary for the code to work
– John
Jan 5 '18 at 10:25
Hi Anime, thank you for spotting that, addedq was another variable previously defined and relative to my project in question, it is not necessary for the code to work
– John
Jan 5 '18 at 10:25
add a comment |
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e) {
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom)) {
StackExchange.using('gps', function() { StackExchange.gps.track('embedded_signup_form.view', { location: 'question_page' }); });
$window.unbind('scroll', onScroll);
}
};
$window.on('scroll', onScroll);
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f177791%2fmagento-2-show-admin-category-tree-on-frontend%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e) {
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom)) {
StackExchange.using('gps', function() { StackExchange.gps.track('embedded_signup_form.view', { location: 'question_page' }); });
$window.unbind('scroll', onScroll);
}
};
$window.on('scroll', onScroll);
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e) {
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom)) {
StackExchange.using('gps', function() { StackExchange.gps.track('embedded_signup_form.view', { location: 'question_page' }); });
$window.unbind('scroll', onScroll);
}
};
$window.on('scroll', onScroll);
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e) {
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom)) {
StackExchange.using('gps', function() { StackExchange.gps.track('embedded_signup_form.view', { location: 'question_page' }); });
$window.unbind('scroll', onScroll);
}
};
$window.on('scroll', onScroll);
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
ibnab.com/en/blog/magento-2/…
– Bilal Usean
Jun 7 '17 at 5:50
Not just show category name but need category with tree like same as admin.
– Suresh Chikani
Jun 7 '17 at 5:52
Please refer: mage2.pro/t/topic/912 It will help you
– Nikunj Vadariya
Jun 7 '17 at 5:54
@nikunjVadariya Thank you for your suggestion. Let me check.
– Suresh Chikani
Jun 7 '17 at 8:48