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.

有帮助吗?

解决方案

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

其他提示

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>
许可以下: CC-BY-SA归因
scroll top