2

short of it

I need to dynamically set the htmlClass of a <container> that is defined in the layout file.

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="empty"/>
    <referenceContainer name="root">
        <container name="jacket" htmlTag="div" htmlId="jacket" >
            <container name="binder" htmlTag="div" htmlId="binder" htmlClass="fluid max-1980">
                <container name="spine.main" htmlTag="main" htmlId="page"/>
                <container name="spine.spine" htmlTag="div" htmlId="spine" htmlClass="spine-column lightly" after="spine.main">
                    <container name="spine.spine.glue" htmlTag="div" htmlId="glue" htmlClass="spine-glue" />
                </container>
            </container>
        </container>
    </referenceContainer>
    <move element="page.wrapper" destination="spine.main" />
</layout>

Which in the past was a .phtml as shown below in the full question. All that is needed is to have

                <container name="spine.spine" htmlTag="div" htmlId="spine" htmlClass="spine-column lightly" after="spine.main">

and

            <container name="binder" htmlTag="div" htmlId="binder" htmlClass="fluid max-1980">

to have the class lightly and fluid max-1980 be set up based on the store config. I was using a helper in the .phtml file to do this, now not so sure how to convert this function over.

Full question

I have a very simple need. I want to recreate this old 1column.phtml file in magento 2. here is the file contents of the Magento 1.x .phtml file

<?php
/**
 * Template for Mage_Page_Block_Html
 */
$lang=$this->getLang();
$store = Mage::app()->getStore();
$name = $store->getFrontendName();
$randomClass = 'five'.rand(0,5).' ten'.rand(0,10);
$storeId = $store->getStoreId();
$storeCode = $store->getCode();
$theme = $this->helper('wsu_themecontrol');
$template = $this->helper('wsu_themecontrol/template');
$binderClassStr = $theme->getBinderClassStr($storeCode);
$binderStyleStr =  $theme->getBinderStyleStr($storeCode);
$bodyClasses = $storeCode.$storeId.' '.$this->getBodyClass() .' '. $theme->getThemeBodyClasses() .' '. $randomClass;
$spine_tool_bar_color = $theme->getCfgDesign('spine/spine_tool_bar_color');

$show_headerstorename   = $theme->getCfgLayout('spine/show_headerstorename');

$mainContentClasses= $template->getBlockClasses("main_content"); 

?>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js no-svg lt-ie9 lt-ie8 lt-ie7" lang="<?=$lang ?>"> <![endif]-->
<!--[if IE 7]><html class="no-js no-svg lt-ie9 lt-ie8" lang="<?=$lang ?>"> <![endif]-->
<!--[if IE 8]><html class="no-js no-svg lt-ie9" lang="<?=$lang ?>"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="<?=$lang ?>"><!--<![endif]-->
<head>
    <?=$this->getChildHtml('head')?>
</head>
<body class=" <?=$bodyClasses?>">
    <!-- WRAPPING -->
    <div id="jacket">
        <div id="binder" class="<?=$binderClassStr?>" style="<?=$binderStyleStr?>">
            <!-- CONTENT -->
            <main id="page" role="main">
                <section class="row" id="siteID">
                    <div style="float:right;">
                        <div class="quick-access <?=$spine_tool_bar_color; ?>" style="font-size:12px; font-weight:bold;">
                            <?=$this->getChildHtml('topLinks') ?>
                        </div>
                    </div>
                    <article>
                        <h2>WSU Marketplace</h2>
                        <?php if($show_headerstorename==1):?><h1><?=$name?></h1><?php endif; ?>
                        <?=$this->getChildHtml('breadcrumbs') ?> 
                    </article>
                </section>
                <!-- Responsive Sections -->
                <section class="row single content_area">
                    <div class="column">
                        <article>
                            <?=$this->getChildHtml('after_body_start') ?>
                            <div id="main" class="<?=$mainContentClasses?>" >
                                <?=$this->getChildHtml('topContainer'); ?>
                                <?=$this->getChildHtml('topBar') ?>
                                <?=$this->getChildHtml('global_notices') ?>
                                <?=$this->getChildHtml('global_messages') ?>
                                <?=$this->getChildHtml('content') ?>
                            </div><!-- end of main -->   
                        </article>
                    </div><!--/column-->
                </section>
                <footer class="padded">
                    <?=$this->getChildHtml('footer') ?>
                    <?=$this->getAbsoluteFooter() ?>
                </footer>
            </main><!--/#page-->
            <!-- /CONTENT -->
    
            <?=$this->getChildHtml('header') ?>
        </div><!--/cover-->
    </div><!--/jacket-->
    <!-- /WRAPPING -->
    <?=$this->getChildHtml('before_body_end') ?>
</body>
</html>

I have been trying to break it down part by part but the documentation at http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-overview.html is not as helpful as I would need. I have gotten this far, created a file in

/app/design/frontend/<vendor>/<theme>/Magento_Theme/page_layout/1column.xml

And this is what I put in there.

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="empty"/>
    <referenceContainer name="root">
        <container name="jacket" htmlTag="div" htmlId="jacket" >
            <container name="binder" htmlTag="div" htmlId="binder" >
                <container name="spine.main" htmlTag="main" htmlId="page"/>
                <container name="spine.spine" htmlTag="div" htmlId="spine" htmlClass="spine-column" after="spine.main">
                    <container name="spine.spine.glue" htmlTag="div" htmlId="glue" htmlClass="spine-glue" />
                </container>
            </container>
        </container>
    </referenceContainer>
    <move element="page.wrapper" destination="spine.main" />
</layout>

What I'm expecting is to match the first part of the structure as in the old file. I do get the jacket>binder>spine.main and the page.wrapper does get moved to the container spine.main as I hoped it would. What doesn't happen is that I don't get spine.spine>spine.spine.glue. It will not show up.

I'm also left wondering, how am I going to get the dynamic classes in these containers and the attribute strings for the tags as I have them in the old file.

Update, first issue resolved in the migration

So there is something that is not documented and should be. If you provide a container, then you must put something in it. If you don't then it will not render out. :-\ that is a bug as far as I am concerned. It shouldn't assume I'm not going to put something in the empty div after dom render. so here is what I had to do to get it to show up.

in /app/design/frontend/<vendor>/<theme>/Magento_Theme/layout/default.xml

I had to put in something, a block I guess is what it'd root to, but something in the container before it would render.

<?xml version="1.0"?>
<page layout="2columns-left" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>      
        <css src="https://repo.wsu.edu/spine/1/spine.min.css?2015-16-12" src_type="url" />
        <css src="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" src_type="url" />
        <script src="https://repo.wsu.edu/spine/1/spine.min.js?2015-16-12" src_type="url" />
    </head>
    <body>
        <move element="catalog.topnav" destination="spine.spine.glue" before="-"/>
    </body>
</page>

It seems to me that there is a disservice to the dev by doing it this way where the system is saying, I know better, you put an empty thing here, let me take that out for you. If that is not what it is doing some clarity would be greatly appreciated too.

This is what solved the first part of the issue. Now I just need to figure out how to do the same call for values like the classes that were dynamically created

Further update

I am trying to explore maybe using the <referenceContainer> in conjunction with a <action> to call the helper Data file. It is not working yet but I think it is clean pathway.

<referenceContainer name="spine.spine">
     <action method="setContainerClass" />
</referenceContainer>

and the helper file

<?php
namespace Wsu\Themecontrol\Helper;
class Data extends \Magento\Framework\App\Helper\AbstractHelper
{
    public function setContainerClass(){
        echo "<h1>here</h1>";
    }
}

still no luck in the alteration or even a hint it is on the right pathway.

Your Answer

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

Browse other questions tagged or ask your own question.