css не загружается в карусель owl magento 2

Question

css не загружается в карусель owl magento 2

Здравствуйте, ребята, я пытаюсь использовать карусель owl в файле phtml в консоли, он показывает ошибку в отношении css Ниже приведен мой default_head_block.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>        
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <css src="web/css/owl.carousel.css" /> 
     <css src="web/css/owl.theme.css" /> 


</head>
</page>

Ниже приведен мой default.xml файл через я вызываю файл phtml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<body>
    <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\Template" name="slider_test" template="Magento_Theme::slider.phtml" after="-" />
    </referenceContainer>
    <referenceBlock name="logo">
        <arguments>
            <argument name="logo_img_width" xsi:type="number">148</argument>
            <argument name="logo_img_height" xsi:type="number">43</argument>
        </arguments>
    </referenceBlock>
</body>
</page>

Ниже приведен мой файл slider.phtml, в котором я называю карусель owl

 <div class="owl-carousel" id="car">
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 </div>

<script type="text/javascript">
require([
    'jquery',
    'owlcarouselslider'
    ], function ($) {
          $("#car").owlCarousel();
});
</script>

Выводится следующее

Ниже приведена ошибка, которая отображается в консоли

4

javascript css magento2 owl-carousel magento-2.1

Author: Harsh Jayswal, 2019-03-08

Source

3 answers

Эта ошибка обычно появляется, когда статический контент неправильно генерируется Magento. Он также может отображаться при использовании установки vanilla Magento и не обязательно связан с темой или установленным расширением.

В большинстве случаев эта ошибка исчезает, как только вы настроите правильные разрешения и создадите статический контент для своего магазина.

Решение 1.

Правильно установите разрешения Magento, следуя инструкциям в разделе Основные Настройка разрешений ниже:

Https://support.weltpixel.com/hc/en-us/articles/115001868933-How-to-set-Magento-2-permissions-and-avoid-installation-errors

Перейдите в режим разработчика, а затем в рабочий режим. Это действие выполняет очистку кэша, компилирует ваш код и генерирует статическое содержимое.

Https://support.weltpixel.com/hc/en-us/articles/115004436368-How-to-set-Magento-2-Developer-and-Production-Mode-via-SSH

Создайте статическое содержимое для каждой локали, если вы используете локаль, отличную от en_US (nl_NL, en_GB)

Пример: php bin/magento настройка: статическое содержимое: развертывание -f en_GB

Если это не поможет, может возникнуть дополнительная проблема, связанная с папками pub/static, вызванная отсутствием файла .htaccess.

Решение 2.

Чтобы устранить эту проблему,

Перейдите в раздел Путь к файлу pub/статический/
Проверьте, есть ли файл .htaccess доступен (скрытый файл - нажмите ctrl+H, чтобы просмотреть его).
Если он недоступен, на основе версии Magento получите файл .htaccess в пути к файлу pub/static/ и переместите его на свой сервер.
Наконец, очистите свой браузер и кэш Magento и проверьте еще раз.

Я надеюсь, что это поможет

2

Author: Muhammad Hasham, 2019-03-08 07:02:20

Из-за вашего localhost/magento в качестве базового URL-адреса он неправильно добавляет ваш CSS.

Вам необходимо установить локальный домен

В вашем файле vhost вашего xampp или wampp

Добавить следующее: Примечание: Измените каталог в соответствии с вашим

<VirtualHost *:80>
    ServerAdmin [email protected]
    DocumentRoot "C:/xampp/htdocs/magento"
    ServerName magento.local
    ErrorLog "logs/dummy-host2.example.com-error.log"
    CustomLog "logs/dummy-host2.example.com-access.log" common
</VirtualHost>

В файле хоста Windows (если вы используете Windows) добавьте следующую строку:

127.0.0.1       magento.local

Перезапустите apache и измените базовый URL-адрес magento. Это должно сработать

Главное в том, что вам нужно изменить свой URL на какой-то URL выглядит как домен (например, magento.local)

1

Author: Shoaib Munir, 2019-03-08 07:03:17

score 2 · Accepted Answer

Обновленные файлы

Все мои css файлы расположены в приложение/код/дизайн/интерфейс/пользовательская тема/имя темы/веб/css/cssfilename.css

Все файлы js расположены в

App/code/design/frontend/CustomTheme/ThemeName/web/js/jsfilename.js

Requirejs-config.js файл

var config = {
paths: {            
        'owlcarouselslider': "js/owl.carousel.min",
        'banner':"js/banner"
       },   
shim: {
            'owlcarouselslider':
            {
                deps: ['jquery']
            },
            'banner':
            {
                deps:['jquery']
            }

      }
 };

App/code/design/frontend/CustomTheme/ThemeName/Magento_Theme/layout/default_head_blocks.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>        
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <css src="css/owl.carousel.css" />
    <css src="css/main.css" /> 
    <css src="css/owl.theme.css" /> 
    <css src="css/banner.css" /> 

</head>
</page>

Приложение/код/дизайн/интерфейс/Пользовательская тема/Имя/magento_theme/макет/default.xml файл

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">

<body>
    <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\Template" name="slider_test" template="Magento_Theme::slider.phtml" after="-" />
    </referenceContainer>
    <referenceBlock name="logo">
        <arguments>
            <argument name="logo_img_width" xsi:type="number">148</argument>
            <argument name="logo_img_height" xsi:type="number">43</argument>
        </arguments>
    </referenceBlock>
</body>
</page>

Приложение/код/дизайн/интерфейс/Пользовательская тема/Имя/magento_theme/шаблоны/слайдер.phtmlфайл

<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>

</div>

<script>

require([
    'jquery',
    'owlcarouselslider','banner'
    ], function ($) {

  var owl = $('.owl-carousel');
  owl.owlCarousel({
items:4,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:1000,
autoplayHoverPause:true
  });

});

Banner.js файл

require(['jquery'],function($){

$(document).ready(function(){
var owl = $('.owl-carousel');
owl.owlCarousel({
items:4,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:1000,
autoplayHoverPause:true
});

});

});

Выводится следующее