Magento 2.1.3 Module layout not being called

magento.stackexchange https://magento.stackexchange.com/questions/154416

Question

I'm trying to write a custom slideshow module for Magento 2. Everything almost works fine but when I try to load the block in home page, the module's layout file does not load, as the custom css is not there.

If I access my-domain.com/slideshow/index/index it works fine, layout and css are called.

If I add block to home page, content is loaded, I see content of slideshow.phtml, but no css.

I tried to recompile, refresh cache, etc..

Here are my files :

Routes (app/code/Shapes/Magento2Slideshow/etc/frontend/routes.xml):

<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/App/etc/routes.xsd">
    <router id="standard">
        <route id="slideshow" frontName="slideshow">
            <module name="Shapes_Magento2Slideshow" />
        </route>
    </router>
</config>

Controller (app/code/Shapes/Magento2Slideshow/Controller/Index/Index.php) :

<?php

namespace Shapes\Magento2Slideshow\Controller\Index;

use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\App\Cache\TypeListInterface;
use Magento\Framework\App\Cache\StateInterface;
use Magento\Framework\App\Cache\Frontend\Pool;
use Magento\Framework\View\Result\PageFactory;

class Index extends Action
{
    protected $_cacheTypeList;

    protected $_cacheState;

    protected $_cacheFrontendPool;

    protected $resultPageFactory;

    public function __construct(
        Context $context,
        TypeListInterface $cacheTypeList,
        StateInterface $cacheState,
        Pool $cacheFrontendPool,
        PageFactory $resultPageFactory
    ) {
        parent::__construct($context);
        $this->_cacheTypeList = $cacheTypeList;
        $this->_cacheState = $cacheState;
        $this->_cacheFrontendPool = $cacheFrontendPool;
        $this->resultPageFactory = $resultPageFactory;
    }

    public function execute()
    {
        $this->resultPage = $this->resultPageFactory->create();  
        return $this->resultPage;
    }
}

Block (app/code/Shapes/Magento2Slideshow/Block/Slideshow.php):

<?php

namespace Shapes\Magento2Slideshow\Block;

use Magento\Framework\View\Element\Template;
use Magento\Framework\View\Element\Template\Context;
use Shapes\Magento2Slideshow\Model\SlidesFactory;

class Slideshow extends Template
{
    /**
     * @var \Shapes\Magento2Slideshow\Model\SlidesFactory
     */
    protected $_modelSlidesFactory;

    /**
     * @param Context $context
     * @param SlidesFactory $modelSlidesFactory
     */
    public function __construct(
        SlidesFactory $modelSlidesFactory,
        Context $context
    ) {
        $this->_modelSlidesFactory = $modelSlidesFactory;
        parent::__construct($context);
    }

    public function getSlidesCollection() {
        $slidesModel = $this->_modelSlidesFactory->create();

        // Get SLIDES collection
        $slidesCollection = $slidesModel->getCollection();
        return $slidesCollection;
    }
}

Layout (app/code/Shapes/Magento2Slideshow/view/frontend/layout/slideshow_index_index.xml):

<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Shapes_Magento2Slideshow::css/style.css"/>
    </head>
    <body>
        <referenceContainer name="content">
            <block class="Shapes\Magento2Slideshow\Block\Slideshow" name="slideshow" template="Shapes_Magento2Slideshow::slideshow.phtml" />
        </referenceContainer>
    </body>
</page>

PHTML (app/code/Shapes/Magento2Slideshow/view/frontend/templates/slideshow.phtml):

<?php
   $Slidescollection = $block->getSlidesCollection();
   if ($Slidescollection->getSize() > 0) :
?>

<section id="RCSlide" class="RCSlide">
    <?php foreach ($Slidescollection as $slides) : ?>
        <div class="RCSlideContent" style="background:url('<?php echo $slides->getImagePath() ?>') center center no-repeat;">
            <div class="slideCaption">
                <h2><?php echo $slides->getTitle() ?></h2> 
                <p><?php echo $slides->getDescription() ?></p> 
            </div>
        </div>                
    <?php endforeach; ?>
</section>

<script type="text/javascript">
    require(['jquery', 'slickslider'], function($){ 
    jQuery(document).on('ready', function() {
        jQuery(".RCSlide").slick({
            dots: true,
            infinite: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            pauseOnHover: false,
            pauseOnFocus: false,
            autoplay: true,
            autoplaySpeed: 3000,
            speed: 800,
            cssEase: 'linear'
        });
    });
    });
</script>

<?php endif; ?>

Default layout override I use to put block on homepage (app/design/frontend/Shapes/mytheme/Magento_Theme/layout/default.xml) :

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Shapes\Magento2Slideshow\Block\Slideshow" name="slideshow" template="Shapes_Magento2Slideshow::slideshow.phtml" />
        </referenceContainer>
    </body>
</page>

Any idea on what I'm doing wrong please ?

I could add css in my theme but I would rather like to keep all module related files in one folder.

Was it helpful?

Solution

this css files does not called at home page. You have called css file for slideshow/index/index page.

Does not called this css from default.xml.So you should call this css from at default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <!-- Add this for all css at home -->    
    <head>
        <css src="Shapes_Magento2Slideshow::css/style.css"/>
    </head>
    <body>
        <referenceContainer name="content">
            <block class="Shapes\Magento2Slideshow\Block\Slideshow" name="slideshow" template="Shapes_Magento2Slideshow::slideshow.phtml" />
        </referenceContainer>
    </body>
</page>

Note

If you want to call the block and css for only Home page then you have add code in working handler file

It should be cms_index_index.xml instead of default.xml

OTHER TIPS

You Can Put Link for Call that Module on Home Page Like this if layout not being called:

<a href="<?php echo $this->getbaseUrl()?>slideshow/index/index">Slideshow</a>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top