0

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

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

| improve this answer | |
  • Thanks so much! Finally an usable answer! (Btw, add a / to the end of the <move />, otherwise it will generate an error :p – Maarten Wolfsen Mar 17 '17 at 8:59
  • Your bounty will be rewarded in 23 hours – Maarten Wolfsen Mar 17 '17 at 9:00
0
<move element="catalog.product.related" destination="block-name-where-you-want-to-place-it" />
| improve this answer | |
  • 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 – Maarten Wolfsen Mar 17 '17 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 Mar 17 '17 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 Mar 17 '17 at 12:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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