1

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...

1

2 Answers 2

3
+50

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.

2
  • Thanks so much! Finally an usable answer! (Btw, add a / to the end of the <move />, otherwise it will generate an error :p Commented Mar 17, 2017 at 8:59
  • Your bounty will be rewarded in 23 hours Commented Mar 17, 2017 at 9:00
1
<move element="catalog.product.related" destination="block-name-where-you-want-to-place-it" />
3
  • The problem is the block name, I made a custom phtml, and now I am wondering how I can move the related products inside a div in the phtml Commented Mar 17, 2017 at 8:54
  • echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setTemplate("Magento_Catalog::product/list/items.phtml")->toHtml(); & U have layout file? blog.chapagain.com.np/…
    – Jackson
    Commented Mar 17, 2017 at 9:02
  • Not 100% sure but I don't think that you can move the block later on this way or do other stuff with it in layout files.
    – steros
    Commented Mar 17, 2017 at 12:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.