Как добавить js и css на домашнюю страницу (слайдер) в Magento 2?

В Magento 1 я включаю js и css следующим образом:

<action method="addJs"><script>lib/jquery/masterslider.min.js</script></action>
<action method="addCss"><stylesheet>css/masterslider.css</stylesheet></action>

Но в Magento 2 это не работает.

Как правильно добавить masterslider.min.js и masterslider.css в Magento 2 (слайдер для домашней страницы)? Эта вставка html на домашнюю страницу (админ-панель):

<div class="master-slider ms-skin-default" id="masterslider">

    <div class="ms-slide" data-delay="10">

        <img src="media/blank.gif" data-src="media/001.jpg" alt="Test slide"/>     

    </div>

</div>

<script>
    jQuery(function($){
    var slider = new MasterSlider();
    slider.setup('masterslider' , {
        width:1200,
        height:600,
        space:0,
        autoplay:true,
        loop:true,
        speed:8,
        view:"fade"
    });
    slider.control('arrows');
    });
</script>
Author: Rafael Corrêa Gomes, 2016-12-21
Source

3 answers

Это правильный путь!

  1. Путь: app/design/frontend/My-vendor/my-name-theme/web
  2. Добавить masterslider.min.js в app/design/frontend/My-vendor/my-name-theme/web/js

  3. Создайте requirejs-config.js, чтобы app/design/frontend/My-vendor/my-name-theme

    var config = { paths: { masterslider: 'js/masterslider.min', }, shim: { masterslider: { deps: ['jquery'] } } };

  4. Добавьте файл masterslider.css в app/design/frontend/My-vendor/my-name-theme/web/css/source

  5. Используйте или создайте файл _extend.less, чтобы app/design/frontend/My-vendor/my-name-theme/web/css/source Записать в _extend.less это в последней строке: @import 'masterslider.css';

  6. cd /var/www/domain/html rm -rf pub/static/* rm -rf var/view_preprocessed/* php /var/www/domain/html/bin/magento cache:clean php /var/www/domain/html/bin/magento setup:static-content:deploy en_US ru_RU php /var/www/domain/html/bin/magento cache:clean

  7. Вызов слайдера на домашней странице содержимого или в файле phtml, как это:

    <script>

    require([
        'jquery',
        'masterslider'
    ], function($) {
        jQuery(document).ready(function() {
            jQuery('#masterslider').show().masterslider({
            /* code slider */
            });
        });
    });

</script>
     5
    Author: Sylon, 2017-03-02 01:48:27

    Добавьте css и js из файла макета вашего интерфейса

    Вам нужно добавить код ниже в app/code/Vendor/Modulename/frontend/layout/routname_controllername_action.xml

    <?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="Vendor_Modulename::js/your-js.js"/>
        <css src="Vendor_Modulename::css/your-css.css"/>
    </head>
    <body>
    </body>
</page>

    Ваш путь js и css будет

    Приложение/код/Поставщик/Имя модуля/интерфейс/веб/css/ваш-css.css app/code/Vendor/Modulename/frontend/web/js/your-js.js

     5
    Author: Prashant Valanda, 2016-12-21 12:00:11

    Вы можете добавить приведенный ниже код в свой файл пользовательской темы app\design\frontend\<vendor>\<theme>\Magento_Theme\layout\cms_index_index.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">
    <head>
       <script src="js/your-js.js"/>
       <css src="css/your-css.css"/>
    </head>
    <body>              
    </body>
</page>

    И вы можете добавить этот файл в app\design\frontend\<vendor>\<theme>\web\css и app\design\frontend\<vendor>\<theme>\web\js уважаемую папку.

     0
    Author: Dipesh Rangani, 2016-12-23 13:21:16