display subcategoies and their products on parent category page

Question

I want to display subcategoies and their products on parent category page
I tried this code on ../Magento_Catalog/templates/category/products.phtml but it shows all product of the parent category on each subcategories

<?php $category = $block->getCurrentCategory(); ?>
<?php $subcategories = $category->getChildrenCategories(); ?>
<?php $_helper = $this->helper('Magento\Catalog\Helper\Output'); ?>
<?php $objectManager = \Magento\Framework\App\ObjectManager::getInstance(); ?>
<?php if(count($subcategories) > 0): ?>
    <div class="products wrapper grid products-grid">
        <ol class="products list items product-items">
            <?php foreach($category->getChildrenCategories() as $subcategory): ?>
                <?php $subcategory = $objectManager->create('Magento\Catalog\Model\Category')->load($subcategory->getId()); ?>
                <li class="item  col-xs-12">
                    <div class="product-item-info">
                        <?php if ($_imgUrl = $subcategory->getImageUrl()): ?>
                            <a href="<?= $subcategory->getUrl() ?>" class="product photo product-item-photo">
                                <span class="product-image-container">
                                    <?php $_imgHtml = '<img src="' . $_imgUrl . '" />'; ?>
                                    <?php echo $_imgHtml = $_helper->categoryAttribute($subcategory, $_imgHtml, 'image'); ?>
                                </span>
                            </a>
                        <?php endif; ?>
                        <div class="product details product-item-details">
                            <strong class="product name product-item-name">
                                <a class="product-item-link" href="<?= $subcategory->getUrl() ?>"><?= $subcategory->getName() ?></a>
                            </strong>

                            <?= $block->getProductListHtml() ?>

                        </div>
                    </div>
                </li>
            <?php endforeach; ?>
        </ol>
    </div>
<?php else: ?>
    <?php if (!$block->isContentMode() || $block->isMixedMode()): ?>
        <?= $block->getProductListHtml() ?>
    <?php endif; ?>
<?php endif; ?>

help please

Answer 1

Create a Block function in custom module and call that function from your phtml

public function __construct(
    \Magento\Framework\View\Element\Template\Context $context,
    \Magento\Catalog\Model\ResourceModel\Product\CollectionFactory $productCollectionFactory,
    \Magento\Catalog\Model\CategoryFactory $categoryFactory,
    \Magento\Framework\Registry $registry,
    array $data = []
) {
    $this->_productCollectionFactory = $productCollectionFactory;
    $this->_categoryFactory = $categoryFactory;
    $this->registry = $registry;
    parent::__construct($context, $data);
}

public function getCurrentCategory()
{
    return $this->registry->registry('current_category');
}

public function getCatgeoryProducts($categoryIds) {
    if(!empty($categoryIds)){
         $subCategory =  $this->_categoryFactory->create()->load($categoryId);
         $subCategoryIds[] = $subCategory->getChildren();
     }

    if(!empty($subCategoryIds)){
        $subCategories = implode(",",$subCategoryIds);
    }

    if(count($subCategoryIds) > 0) {
        $collection = $this->_productCollectionFactory->create()
                       ->addAttributeToSelect('*');

        $collection->addCategoriesFilter(['in' => $subCategories]);
        $collection->addAttributeToFilter('visibility',\Magento\Catalog\Model\Product\Visibility::VISIBILITY_IN_SEARCH);
        $collection->addAttributeToFilter('status',\Magento\Catalog\Model\Product\Attribute\Source\Status::STATUS_ENABLED);
    }
    return $collection;
}

From Your Phtml file,

$currentCatgeory = $block->getCurrentCategory();
 $currentCategoryId = $currentCategory->getId();
$subcategories = $block->getCatgeoryProducts($currentCategoryId); 
echo '<pre>';print_r($subcategories->getData());