Create a custom category view

[hanhoe]

Hello,

I want to display the Category in a custome style.

But I´m not able to display a category site with sub categories.

I have 6 Categories with a lot sub categories.

For example category "haus" has url key "haus".

"https://www.company.com/de/haus.html" bring the category with the image and description. But it did not show the sub categories

Thank you

[Vimal Kumar]

@hanhoe 
As I understand your question that you want to show sub-categories on category details page, then you can use following code in your theme list.phtml file?

Now add this below code to your theme ‘list.pthml’ file.
app\design\frontend\Themes\Yourtheme\Magento_catalog\templates\product\list.phtml

<?php
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$category = $objectManager->get('Magento\Framework\Registry')->registry('current_category');
$subcats = $category->getChildrenCategories();                                                   	
?>
<div class="product details product-item-details">
    <?php
	foreach ($subcats as $subcat) {
    	if ($subcat->getIsActive()) {
                                	$sub_category = $objectManager->create('Magento\Catalog\Model\Category')->load($subcat->getId());
                                	$subcat_url = $subcat->getUrl(); ?>
            <span class="product-image">
            <a href="<?php echo $subcat_url; ?>">
                     	<img src="<?php echo $sub_category->getImageUrl() ?>" height="300px" width="240px">
            </a>            	
            </span>
       	   <span class="product-item-name">
             <a href="<?php echo $subcat_url?>" class="product-item-link"><?php echo $subcat->getName(); ?></a>
             </span>
            <?php                        	
    	}
	} ?>
</div>

[hanhoe]

Hi @Vimal Kumar 

thank you for your support!

I want to write a module, to display the subcategory of the current category horizontal with image and name.

If I click on a sub category, the horizontal row should just display the name (without the image) and a second row, again with image and name of all sub category should be display, and if I click again on one of this sub sub category, a next row shoulf appear, and so on.

A little bit like this here:

https://www.highlite.com/en/catalog/category/view/s/amplifiers/id/118/

On top are the categories horizontal

Thank you!

[hanhoe]

Hi  @Vimal Kumar 

I was now almost alone to complete it. With css and your code.

So far I have:

<?php
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$category = $objectManager->get('Magento\Framework\Registry')->registry('current_category');
$subcats = $category->getChildrenCategories();                                                   	
?>
<div id="category-slider">
		<?php	
			foreach ($subcats as $subcat) {
				if ($subcat->getIsActive()) {
                                	$sub_category = $objectManager->create('Magento\Catalog\Model\Category')->load($subcat->getId());
                                	$subcat_url = $subcat->getUrl();
		?>
		<a style="display:inline-block" href="<?php echo $subcat_url; ?>">
			<div class="category-item">						
				<div class="category-item-image">				
					<img src="<?php echo $sub_category->getImageUrl() ?>">				           	
				</div>
				<div class="category-item-name">
				<?php echo $subcat->getName(); ?>
				</div>
			</div>
		</a> 
         <?php                        	
    	}
	} ?>
</div>

This display the sub category with images of the current category.

How can I made an own foreach for all parent categories (of the current category) and all parent of the parents :-)

And maybe with mouse over a small popup show all sub category of the selected sub category

So in both direction (up and down) of a hierachy categories can be selected by user

Thank you!