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.
Best Answer
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
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 ofdefault.xml