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.
