Magento 2 – Move Related Products to Custom Div in Custom PHTML Template

layoutmagento2related-productstemplate

I have made a custom phtml template called configurator.phtml on the product view page, like this:

    <referenceContainer name="page.wrapper">
        <block class="Magento\Catalog\Block\Product\View" name="configurator" template="product/view/configurator/configurator.phtml" before="-">
        </block>
    </referenceContainer>

The template looks like this:

<div id="configurator" class="active">
    <div class="summary">
        <div class="text">
            <h1><?php echo __('Configurator') ?></h1>
            <p><?php echo __("Do the meals come close to what you want, but is there something in the box why it isn't perfect? Here you can edit the meals inside your box, to make the perfect box for you!") ?></p>
        </div>
        <i class="material-icons close-configurator">close</i>
    </div>
    <div class="selector">
        <div class="top-menu">
            <div class="menu-item active"><?php echo __('Meals') ?></div>
            <div class="menu-item"><?php echo __('Ingredients') ?></div>
            <div class="menu-item"><?php echo __('Extra') ?></div>
        </div>
        <div class="content">
            <div class="meal-selector">
                <div class="meal-selector-products">
                    <!-- here be related products -->
                </div>
            </div>
        </div>
    </div>
</div>

Inside .meal-selector-products I want to display the related products. How can I move the related products to a custom div? I just can't figure out how to do it…

Best Answer

Move the element in your layout xml:

<move element="catalog.product.related" destination="configurator"/>
<referenceContainer name="page.wrapper">
    <block class="Magento\Catalog\Block\Product\View" name="configurator" template="product/view/configurator/configurator.phtml" before="-">
    </block>
</referenceContainer>

In your phtml edit like:

<div id="configurator" class="active">
    <div class="summary">
        <div class="text">
            <h1><?php echo __('Configurator') ?></h1>
            <p><?php echo __("Do the meals come close to what you want, but is there something in the box why it isn't perfect? Here you can edit the meals inside your box, to make the perfect box for you!") ?></p>
        </div>
        <i class="material-icons close-configurator">close</i>
    </div>
    <div class="selector">
        <div class="top-menu">
            <div class="menu-item active"><?php echo __('Meals') ?></div>
            <div class="menu-item"><?php echo __('Ingredients') ?></div>
            <div class="menu-item"><?php echo __('Extra') ?></div>
        </div>
        <div class="content">
            <div class="meal-selector">
                <div class="meal-selector-products">
                    <?php echo $block->getChildHtml('catalog.product.related') ?>
                </div>
            </div>
        </div>
    </div>
</div>

Then redeploy your static files and flush the cache completely.