3

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.

1

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

  • Yes, I know I can add css by adding <head></head> in default.xml, but I thought I might be able to keep it all in the module files. I will have a look at cms_index_index, seems a nice way to call it only for homepage yes, thank you. – David Jan 12 '17 at 10:19
  • app/design/frontend/Shapes/mytheme/Magento_Theme/layout/cms_index_index trick works just fine, thanks again ! – David Jan 12 '17 at 10:23
0

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>
  • I know I can also add css by adding <head></head> in default.xml, but I thought I might be able to keep it all in the module files. – David Jan 12 '17 at 10:20

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.