Como chamar o Owl Slider no Magento2

11

Se quisermos adicionar o Owl Slider no Magento 1.X, seguiremos as etapas abaixo.

Copie owl.carousel.min.jse owl.carousel.jse colar emskin/frontend/pakage_name/theme_name/js
Copie owl.carousel.csse cole noskin/frontend/pakage_name/theme_name/css
Ir app/design/frontend/pakage_name/theme_name/layout/page.xmle chamar js e css

E podemos usar o Owl Slider em qualquer lugar do site Magento 1.X.

Assim, no Magento 2, como podemos chamar o controle deslizante de Coruja e deve ser chamado em qualquer lugar do site para que eu possa usá-lo sempre que quiser.

Para o meu problema, consulte este link, mas ele não está à altura da marca e não está funcionando.

No momento, coloquei o controle deslizante Owl js, app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/jsmas não está funcionando.

Qualquer ajuda seria apreciada.

— Dhaval
fonte

2

Nós também pode seguir este guia: boolfly.com/magento-2-slider-with-owl-carousel

— Khoa TruongDinh

11

Você deve criar um requirejs-config.jsarquivo dentro do seu tema, como

Primeiro adicione o arquivo owlcarousel.js dentro,

app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/js

Adicione seu css para dentro,

app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/css

chame css dentro do seu arquivo tempalte usando,

<link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('Magento_Catalog::css/owlcarousel.css')?>">

ou chame css dentro de um arquivo de layout (prática recomendada), dependendo de suas necessidades:

site inteiro : default.xmlpor exemploapp/design/frontend/pakage_name/theme_name/Magento_Catalog/layout/default.xml
Página inicial :cms_index_index.xml

<page ...>
<head>
     <css src="Magento_Catalog::css/owlcarousel.css"/>
</head>
<body>...</body> </page>

Agora crie o arquivo requirejs-config.js

Magento_Catalog/requirejs-config.js

Defina seu controle deslizante,

var config = {
    paths: {            
            'owlcarousel': "Magento_Catalog/js/owlcarousel"
        },   
    shim: {
        'owlcarousel': {
            deps: ['jquery']
        }
    }
};

Agora você pode usar o owlcarousel em qualquer arquivo phtml,

<div id="owlslider" class="products list items product-items">
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>       
  </ul>
</div>
    <script>
    (function  () {
        require(["jquery","owlcarousel"],function($) {
            $(document).ready(function() {
                $("#owlslider").owlCarousel({
                    navigation : true, // Show next and prev buttons
                    autoPlay: false, //Set AutoPlay to 3 seconds 
                    items : 5
                });
            });
        });
    })();
    </script>

Remova o conteúdo da pasta pub / static e execute o php bin/magento setup:static-content:deploycomando.

— Rakesh Jesadiya
fonte

mas onde posso adicionar css? e eu preciso adicionar css no arquivo require.js ??

— Dhaval

você não pode adicionar css em arquivo require.js

— Rakesh Jesadiya

Eu tenho 3 arquivos de controle deslizante de coruja owl.carousel.css , owl.carousel.js , owl.carousel.min e preciso adicionar todos esses arquivos para onde posso adicionar e chamar esses arquivos para que eu possa usar em todo o site magento onde quer que eu quer?

— Dhaval

app / design / frontend / pakage_name / theme_name / Magento_Catalog / web / css

— Rakesh Jesadiya

eu tenho cheque resposta plz updatead

— Rakesh Jesadiya

9

primeiro você precisa colocar o controle deslizante,

Passo 1 themename/themename/Magento_Theme/web/js/owl.carousel.js

Etapa 2 Faça o mapeamento para o arquivo em themename / themename / Magento_Theme / requirejs-config.js

/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

var config = {
    map: {
        '*': {


            owlcarouselslider:        'Magento_Theme/js/owl.carousel'

        }
    }
};

Passo 3 : Eu usei no arquivo do best-seller como abaixo, onde você precisa incluir o mapeamento do slider, themename / themename / Magento_Catalog / templates / product / bestseller_list.phtml:

<script>

    require([
        'jquery',
        'owlcarouselslider'
        ], function () {
            'use strict';
            jQuery.noConflict();
                jQuery("#best-seller-carousel").owlCarousel({
                autoPlay: 3000, //3000 Set AutoPlay to 3 seconds
                margin:5,
                items : 5,
                itemsDesktop : [1199,5],
                itemsDesktopSmall : [979,5],
                itemsTablet : [768,5],
                navigation : true,
                pagination : false
          });
    });
</script>

Etapa 4 : para essa estrutura deve ser como abaixo,

<div id="demo">
<div id="best-seller-carousel">
    <div class="item"><h1>1</h1></div>
    <div class="item"><h1>2</h1></div>
    <div class="item"><h1>3</h1></div>
    <div class="item"><h1>4</h1></div>
    <div class="item"><h1>5</h1></div>
    <div class="item"><h1>6</h1></div>
    <div class="item"><h1>7</h1></div>
    <div class="item"><h1>8</h1></div>
</div>
</div>

Você também pode visitar mais links em http://cookie-code.net/magento-2/using-requirejs-in-magento-2-implementing-owl-slider/
http://cookie-code.net/magento-2 / using-requirejs-in-magento-2-deployment-owl-slider /

— Rushvi
fonte

A qualquer momento. Fico feliz em saber que funcionou para você :) #

— 217

Você é de Ahmedabad?

— Dhaval

Eu chamo js de controle deslizante de coruja no requirejs-config.js, mas meu js não está aparecendo no frontend. Você tem alguma ideia?

— Dhaval

@watson Remova o conteúdo da pasta pub / static e execute o comando php bin / magento setup: static-content: deploy command.

— Rushvi

Faço isso muitas vezes, mas não funcionou.

— Dhaval

4

Se você quer adicionar owl carouselem Magento 2forma, você deve seguir estes passos.

Copie owl.carousel.jspara app/design/frontend/<pakage_name>/<theme_name>/web/js/owl-carousel/.

Adicione seu requirejsmódulo app/design/frontend/<pakage_name>/<theme_name>/web/js/carousel.js.

define([
    'jquery',
    'owlCarousel'
], function($) {
    return function(config, element) {
        $(element).owlCarousel(config);
    };
});

Adicionar requirejsconfiguração a app/design/frontend/<pakage_name>/<theme_name>/requirejs-config.js.

var config = {
    map: {
        '*': {
            'carousel': 'js/carousel',
            'owlCarousel': 'js/owl-carousel/owl.carousel'
        }
    }
};

Como usar:

use o data-mage-initatributo para inserir o Owl Carousel em um determinado elemento:

<div class="owl-carousel" data-mage-init='{"carousel":{"option": value}}'>
    <div class="item">Item 1</div>
    ...
    <div class="item">Item n</div>
</div>

use com <script type="text/x-magento-init" />:

<div id="owl-carousel" class="owl-carousel">
    <div class="item">Item 1</div>
    ...
    <div class="item">Item n</div>
</div>

<script type="text/x-magento-init">
{
    "#owl-carousel": {
        "carousel": {"option": value}
    }
}
</script>

— Volodymyr Lisniak
fonte

0

As outras 2 respostas são excelentes e copiei elementos de ambas, mas ocasionalmente encontrava problemas com as mensagens de erro "$ não é uma função" e "Não é possível ler a propriedade 'fn' de indefinida". Também queria um método centrado nas páginas de conteúdo.

Portanto, esse método combinado pode ajudar alguém

Copie owl.carousel.js para app / design / frontend / vendorname / themename / Magento_Theme / web / js

(crie um diretório se ainda não estiver lá)

A outra solução css pode funcionar tão bem quanto você pode copiar owl.carousel.css e owl.theme.default.css no arquivo .Less para o tema e ajustar o estilo às suas preferências.
Copie o seguinte código em app / design / frontend / vendorname / themename /Magento_Theme/require-config.js

(crie um arquivo / diretório, se necessário, esse código parece resolver o problema "não é possível ler a propriedade do FN".)

var config = {
paths: {            
        'owlcarousel': "Magento_Theme/js/owl.carousel"
    },   
shim: {
    'owlcarousel': {
        deps: ['jquery']
    }
}
};

No conteúdo da página, coloque o código a seguir para definir as imagens do carrossel

<div class="owl-carousel owl-theme">
  <div><img src="{blah blah}"/></div>
  <div><img src="{blah blah}"/></div>
  <div><img src="{blah blah}"/></div>
  <div><img src="{blah blah}"/></div>
</div>

Após o código acima, adicione o código a seguir para o carrossel (isso parece resolver o erro "$ não é uma função")

<script>
    require([
        'jquery',
        'owlcarousel'
        ], function () {
            'use strict';
            jQuery.noConflict();
                jQuery(".owl-carousel").owlCarousel({
                    nav: true, // Show next and prev buttons
                    navText:["<",">"], //show prev next
                    loop: true,
                    autoplay: true, //Set AutoPlay  
                    autoplayHoverPause: true, //stop when mouse on carousel
                    items : 1
          });
    });
</script>

Implante o conteúdo estático, por exemplo, php magento setup: static-content: deploy (observe que existem vários métodos para fazer isso, que envolvem a limpeza manual de pastas de cache e um comando php magento cache: clean).
Confira no site

— menino-condado
fonte

Eu tentei, mas o controle deslizante não está chegando. embora quando eu inspecionar elemento de classe coruja não ser adicionados ao div

— Surbhi agr

-1

define([
    "jquery",
], function ($) {
    !function(a,b,c,d){function e(b,c)................................(window.Zepto||window.jQuery,window,document)
});

Você deve adicionar owl.carousel.min.jsno magento2

— Prakash
fonte