Magento – Magento 2 layout with no html head or body tags for ajax output

ajaxlayoutmagento2page-layouts

I'm attempting to output the wishlist block as an ajax request. I've attempted to do it in the controller using

$block = $resultPage->getLayout()
->createBlock('Magento\Wishlist\Block\Customer\Wishlist','miniwishlist')            
->setTemplate('Company_Module::miniwishlist.phtml')
->toHtml();

But as the block contains several child blocks and I didn't have any success in using the setChild method programmatically.

I've since created a layout file that returns the block by itself. The problem is that output contains html, head, body tags, css and javascript.

I want to return only the block and nothing else. How can I achieve that?

Best Answer

I went about it differently, but got the result I was after, with very little modification.

I access the contents of the wishlist block using a modified url http://domain.com/wishlist/index/index/ajax/1

I've appended the 'ajax/1' to the normal wishlist request

In my module I overwrote the block \Magento\Wishlist\Block\Customer\Wishlist and modified the function _toHtml as follows:

protected function _toHtml()
{
    if ($this->currentCustomer->getCustomerId()) {
        if ($this->getRequest()->getParam('ajax')) {
            die(parent::_toHtml());
        }
        else return parent::_toHtml();
    } else {
        return '';
    }
}

I also had to add the template file View.phtml to my module, which works nicely as I am able to modify that to get the desired output for my ajax call.

Related Solutions

Magento – How to remove html head body tags in layout magento 2

To remove HTML head tags, Try this code:

<referenceContainer name="head" remove="true"/>
<referenceContainer name="header" remove="true"/>
<referenceContainer name="menu" remove="true"/>
<referenceContainer name="notifications" remove="true"/>
<referenceContainer name="footer" remove="true"/>
<referenceContainer name="body" remove="true"/>

Magento 2 – How to Render HTML with AJAX

I would also go the way 2 and, indeed, you actually can render "pure" HTML via AJAX without the head, body, css and so on.

The trick is to:

tell your controller to instanciate a Response that is of type \Magento\Framework\View\Result\Layout rather than \Magento\Framework\View\Result\Page
use a layout XML file with a root node that is <layout...>...</layout> rather than <page...>...</page>

Here is a very simple implementation.

The controller

<?php    
namespace Namespace\Module\Controller\Index;

use Magento\Framework\App\Action\Action;
use Magento\Framework\App\ResponseInterface;
use Magento\Framework\Controller\ResultFactory;

class Index extends Action
{
    /**
     * Dispatch request
     *
     * @return \Magento\Framework\Controller\ResultInterface|ResponseInterface
     * @throws \Magento\Framework\Exception\NotFoundException
     */
    public function execute()
    {
        return $this->resultFactory->create(ResultFactory::TYPE_LAYOUT);
    }
}

The layout

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
    <container name="root">
        <block class="Namespace\Module\Block\Some\Block" name="namespace_module.some_block" />
    </container>
</layout>

Example on Github

See this example module: https://github.com/herveguetin/Herve_AjaxLayout_M2

This module generates this: