Provide Frontend Layout Handle to Adminhtml to Render Frontend Page/Blocks

adminhtmlfrontendlayoutupdate-handle

I'm currently working on a project which requires an area in the Admin panel which allows the admin to modify order related data (custom data set on order items) that can only be handled through a custom made GUI using Backbone/FabricJS. This GUI operates as a pseudo Product Page to load product related data relevant to the tasks performed within the GUI. This is done through a route defined in my module, which also has an associated layout file with a single layout handle for the frontend route to the GUI. I would like to provide access to this GUI from within the Admin panel (specifically from the order edit page as a link/button), however it is proving difficult to add that layout handle (including it's updates) to the adminhtml layout.

Can anyone suggest a way to load frontend layout handles to the adminhtml layout XML to provide such functionality?

Frontend Layout XML

<?xml version="1.0" encoding="UTF-8"?>
<layout>
    <gui_index_index>
        <reference name="root">
            <action method="setTemplate"><template>page/gui.phtml</template></action>
        </reference>
        <remove name="footer"/>
        <remove name="left"/>
        <remove name="header"/>
        <reference name="head">

            <!-- don't index the customizer -->
            <action method="setRobots"><value>NOINDEX,NOFOLLOW</value></action>

            <!--add productjs for options pricing-->
            <action method="addJs"><script>varien/product.js</script></action>
            <!--remove extraneous css -->
            <action method="removeItem"><type>skin_css</type><name>css/styles.css</name></action>
            <action method="removeItem"><type>skin_css</type><name>css/widgets.css</name></action>
            <action method="removeItem"><type>skin_css</type><name>css/cloud-zoom.css</name></action>
            <action method="removeItem"><type>skin_css</type><name>css/slider.css</name></action>
            <action method="removeItem"><type>skin_css</type><name>css/local.css</name></action>
            <action method="removeItem"><type>skin_css</type><name>css/mobile.css</name></action>
            <action method="removeItem"><type>skin_css</type><name>css/animation.css</name></action>
            <action method="removeItem"><type>skin_css</type><name>css/settings.css</name></action>
            <action method="removeItem"><type>skin_css</type><name>css/captions.css</name></action>
            <action method="removeItem"><type>skin_css</type><name>css/override.css</name></action>
            <action method="removeItem"><type>skin_css</type><name>css/print.css</name></action>
            <action method="removeItem"><type>skin_css</type><name>css/responsive.css</name></action>
            <!--remove extraneous js -->
            <action method="removeItem"><type>js</type><name>lib/ccard.js</name></action>
            <action method="removeItem"><type>js</type><name>scriptaculous/builder.js</name></action>
            <action method="removeItem"><type>js</type><name>scriptaculous/dragdrop.js</name></action>
            <action method="removeItem"><type>js</type><name>scriptaculous/controls.js</name></action>
            <action method="removeItem"><type>js</type><name>scriptaculous/slider.js</name></action>
            <action method="removeItem"><type>js</type><name>lib/ccard.js</name></action>
            <action method="removeItem"><type>js</type><name>queldorei/cloud-zoom.1.0.2.min.js</name></action>
            <action method="removeItem"><type>js</type><name>queldorei/jquery.ui.totop.js</name></action>
            <action method="removeItem"><type>js</type><name>queldorei/jquery.hoverIntent.min.js</name></action>
            <action method="removeItem"><type>js</type><name>queldorei/jquery.masonry.min.js</name></action>
            <action method="removeItem"><type>js</type><name>queldorei/jquery.anystretch.min.js</name></action>
            <action method="removeItem"><type>js</type><name>queldorei/jquery.mousewheel.js</name></action>
            <action method="removeItem"><type>js</type><name>queldorei/jquery.easing.js</name></action>
            <action method="removeItem"><type>js</type><name>queldorei/jquery.flexslider-min.js</name></action>
            <action method="removeItem"><type>js</type><name>queldorei/jquery.themepunch.plugins.min.js</name></action>
            <action method="removeItem"><type>js</type><name>queldorei/jquery.themepunch.revolution.min.js</name></action>
            <action method="removeItem"><type>js</type><name>queldorei/jquery.jcarousel.min.js</name></action>
            <action method="removeItem"><type>skin_js</type><name>js/enterprise/catalogevent.js</name></action>
            <action method="removeItem"><type>skin_js</type><name>js/enterprise/wishlist.js</name></action>
            <action method="removeItem"><type>skin_js</type><name>js/script.js</name></action>
            <!--add customizer css / js -->
            <action method="addItem"><type>skin_css</type><name>css/customizer.css</name></action>
            <action method="addItem"><type>skin_css</type><name>js/bootstrap-timepicker/bootstrap-timepicker.css</name></action>
            <action method="addItem"><type>skin_js</type><name>js/customizer/customizer.js</name></action>
            <!--add smallipop css from git submodule repo -->
            <action method="addItem"><type>js_css</type><name>lib/smallipop/css/jquery.smallipop.min.css</name></action>
        </reference>
        <reference name="content">
            <block type="core/text_list" name="product.json">
                <block type="catalog/product_view" name="product.options.json" template="gui/product/view/view.phtml">
                    <block type="gui/catalog_product_view" name="product.info.options.wrapper" as="product_options_wrapper" template="gui/product/view/options/wrapper.phtml" translate="label">
                        <label>Info Column Options Wrapper</label>
                        <block type="catalog/product_view_options" name="product.info.options" as="product_options" template="catalog/product/view/options.phtml">
                            <action method="addOptionRenderer"><type>text</type><block>catalog/product_view_options_type_text</block><template>catalog/product/view/options/type/text.phtml</template></action>
                            <action method="addOptionRenderer"><type>file</type><block>catalog/product_view_options_type_file</block><template>catalog/product/view/options/type/file.phtml</template></action>
                            <action method="addOptionRenderer"><type>select</type><block>catalog/product_view_options_type_select</block><template>catalog/product/view/options/type/select.phtml</template></action>
                            <action method="addOptionRenderer"><type>date</type><block>catalog/product_view_options_type_date</block><template>catalog/product/view/options/type/date.phtml</template></action>
                        </block>
                        <block type="gui/bundle_catalog_product_view_type_bundle" name="product.info.bundle.options" as="type_bundle_options" template="bundle/catalog/product/view/type/bundle/options.phtml">
                            <action method="addRenderer"><type>select</type><block>bundle/catalog_product_view_type_bundle_option_select</block></action>
                            <action method="addRenderer"><type>multi</type><block>bundle/catalog_product_view_type_bundle_option_multi</block></action>
                            <action method="addRenderer"><type>radio</type><block>bundle/catalog_product_view_type_bundle_option_radio</block></action>
                            <action method="addRenderer"><type>checkbox</type><block>bundle/catalog_product_view_type_bundle_option_checkbox</block></action>
                        </block>
                    </block>
                </block>
                <block type="gui/bundle_catalog_product_view_type_bundle" name="bundle.tojson" template="gui/product/view/type/bundle.phtml" />
                <block type="gui/catalog_product_view" name="product.sides" template="gui/product/view/sides.phtml" />
            </block>
            <block type="core/template" name="options_js" template="catalog/product/view/options/js.phtml" output="toHtml"/>
        </reference>
        <reference name="product.options.json">
            <block type="bundle/catalog_product_view_type_bundle" name="product.info.bundle" as="product_type_data" template="bundle/catalog/product/view/type/bundle.phtml">
                <action method="addPriceBlockType"><type>bundle</type><block>bundle/catalog_product_price</block><template>gui/product/view/price.phtml</template></action>
            </block>
        </reference>
        <reference name="before_body_end">
            <block type="core/text" name="amd.js.loader">
                <action method="setText"><text><![CDATA[<script data-main="/js/customizer/main" src="/js/lib/requirejs/require.js"></script>]]></text></action>
            </block>
            <block type="core/text" name="font.js.loader">
                <action method="setText"><text><![CDATA[<script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.0/webfont.js"></script>]]></text></action>
            </block>
        </reference>
    </gui_index_index>
    <gui_project_load>
        <update handle="gui_index_index"/>
        <remove name="product.json"/>
    </gui_project_load>
</layout>

Adminhtml Layout XML:

<?xml version="1.0" encoding="UTF-8"?>
<layout>
    <adminhtml_gui_index>
              <update handle="gui_index_index" />
    </adminhtml_gui_index>
</layout>

Adminhtml Index Action:

public function indexAction()
{

    $appEmulation = Mage::getSingleton('core/app_emulation');

    $initialEnvironmentInfo = $appEmulation->startEnvironmentEmulation('default','frontend');

/*        Mage::getDesign()->setArea('frontend');
        Mage::getDesign()->setTheme((string)Mage::app()->getConfig()->getNode('stores/default/design/theme/template'));
        Mage::getDesign()->setPackageName((string)Mage::app()->getConfig()->getNode('stores/default/package/name'));
*/
    //$this->getLayout()->getUpdate()->addHandle('gui_index_index');
    //$this->loadLayoutUpdates();

    //$this->loadLayout('gui_index_index', true, true);
    $this->loadLayout();
    //$this->getLayout()->getUpdate()->load('gui_index_index');
    //$this->getLayout()->generateXml();
    //var_dump(Mage::app()->getLayout()->getUpdate()->getHandles());die();
    $this->renderLayout();

    $appEmulation->stopEnvironmentEmulation($initialEnvironmentInfo);

}

Best Answer

In general, the cheapest way to achieve this is via environment app emulation, which it seems you're already doing. I would go ahead and pursue this route and look elsewhere in your layout definitions and local.xml for remove and unset definitions.

Something the below should coax the admin into loading the frontend root block for your design, but you should expect to have to refactor your domain logic out of controllers because it seems like your layout depends on the controller route. This can easily be handled by rather depending on assign:

public function indexAction()
{
    $product = Mage::getModel('catalog/product')->load(24); //obviously this is being loaded in some other way

    $appEmulation = Mage::getSingleton('core/app_emulation');

    $initialEnvironmentInfo = $appEmulation->startEnvironmentEmulation('default','frontend');

    $this->loadLayout();
    $this->getLayout()->getBlock('root')->assign(array('current_product',$product));
    $this->renderLayout();

    $appEmulation->stopEnvironmentEmulation($initialEnvironmentInfo);

}

Related Solutions

Magento – Layout handle from attribute set

By defining an observer to listen for controller_action_layout_load_before we are able to dynamically add layout handles on product pages based on the loaded product's attribute set:

<?php
class YourCompany_YourModule_Model_Observer
{
    public function addAttributeSetHandle(Varien_Event_Observer $observer)
    {
        $product = Mage::registry('current_product');
 
        /**
         * Return if it is not product page
         */
        if (!($product instanceof Mage_Catalog_Model_Product)) {
            return;
        }
 
        $attributeSet = Mage::getModel('eav/entity_attribute_set')->load($product->getAttributeSetId());
        /**
         * Convert attribute set name to alphanumeric + underscore string
         */
        $niceName = str_replace('-', '_', $product->formatUrlKey($attributeSet->getAttributeSetName()));
 
        /* @var $update Mage_Core_Model_Layout_Update */
        $update = $observer->getEvent()->getLayout()->getUpdate();
        $update->addHandle('PRODUCT_ATTRIBUTE_SET_' . $niceName);
    }
}

And now the following will work in a layout:

<PRODUCT_ATTRIBUTE_SET_shirts>
    <reference name="root">
      <action method="setTemplate"><template>page/view.phtml</template></action>
    </reference>
</PRODUCT_ATTRIBUTE_SET_shirts>

_{Code and examples sourced: http://magebase.com/magento-tutorials/creating-custom-layout-handles/}

Magento 2 – Retrieving Frontend Layout Blocks from Adminhtml

I have a solution, whether it is a good one I am not sure about but it does work. Disadvantages is that you have to have the Magento/blank theme installed and uses xpath so if Magento change their layout declaration it might break, both quite unlikely scenarios.

Here is my final solution:

class AccountLinks implements \Magento\Framework\Option\ArrayInterface
{
    /**
     * @var array
     */
    protected $_options = [];

    /**
     * @var \Magento\Framework\View\Layout\ProcessorFactory
     */
    protected $_layoutProcessorFactory;

    /**
     * @var \Magento\Theme\Model\ResourceModel\Theme\CollectionFactory
     */
    protected $_themesFactory;

    /**
     * @param \Magento\Framework\View\Layout\ProcessorFactory $_layoutProcessorFactory
     * @param \Magento\Theme\Model\ResourceModel\Theme\CollectionFactory $_themesFactory
     */
    public function __construct(
        \Magento\Framework\View\Layout\ProcessorFactory $_layoutProcessorFactory,
        \Magento\Theme\Model\ResourceModel\Theme\CollectionFactory $_themesFactory
    ) {
        $this->_layoutProcessorFactory = $_layoutProcessorFactory;
        $this->_themesFactory = $_themesFactory;
    }

    /**
     * Build options array
     *
     * @return array
     */
    public function toOptionArray()
    {
        if (!$this->_options) {

            foreach ($this->getLinksFromLayout() as $link) {
                /* @var $link \Magento\Framework\View\Layout\Element */
                $name = $link->asCanonicalArray();

                $this->_options[] = [
                    'value' => $name,
                    'label' => $name
                ];
            }
        }

        return $this->_options;
    }

    /**
     * Retrieve my account menu links.
     *
     * @return \SimpleXMLElement[]
     * @throws \Magento\Framework\Exception\LocalizedException
     */
    public function getLinksFromLayout()
    {
        $themeCollection = $this->_themesFactory->create();
        $theme = $themeCollection->getItemByColumnValue('code', 'Magento/blank');

        /* @var $layoutProcessor \Magento\Framework\View\Model\Layout\Merge */
        $layoutProcessor = $this->_layoutProcessorFactory->create(['theme' => $theme]);

        $layoutProcessor->addHandle('customer_account_index');
        $layoutProcessor->load();

        $layoutProcessorXML = $layoutProcessor->asSimplexml();

        $result = $layoutProcessorXML->xpath('//body/referenceBlock[@name="customer_account_navigation"]/block/@name');

        return $result;
    }

}

It doesn't use appState emulation, I would be interested in seeing an example that involves using it to access layout as I have bypassed a ton of abstraction in order to get a working solution but I tried many things and couldn't get it to register the frontend handle and return the child blocks.

Best Answer

Related Solutions

Magento – Layout handle from attribute set

Magento 2 – Retrieving Frontend Layout Blocks from Adminhtml

Related Topic