Cómo llamar a Owl Slider en Magento2

11

Si queremos agregar Owl Slider en Magento 1.X, seguimos los pasos a continuación.

Copiar owl.carousel.min.jsy owl.carousel.jsy pegar enskin/frontend/pakage_name/theme_name/js
Copiar owl.carousel.cssy pegar enskin/frontend/pakage_name/theme_name/css
Ir a app/design/frontend/pakage_name/theme_name/layout/page.xmly llamar js y css

Y podemos usar Owl Slider en cualquier parte del sitio Magento 1.X.

Entonces, en Magento 2, cómo podemos llamar al control deslizante Owl y debería llamarse a todas partes en el sitio para que pueda usarlo cuando quiera.

Para mi este problema, he referido este enlace, pero no está a la altura y no funciona.

En este momento he colocado el control deslizante Owl js app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/jspero no funciona.

Cualquier ayuda sería apreciada.

— Dhaval
fuente

2

También podemos seguir esta guía: boolfly.com/magento-2-slider-with-owl-carousel

— Khoa TruongDinh

11

Tienes que crear un requirejs-config.jsarchivo dentro de tu tema como,

Primero agregue el archivo owlcarousel.js dentro,

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

Agrega tu CSS dentro,

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

llame a CSS dentro de su archivo Tempalte usando,

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

o llame a css dentro de un archivo de diseño (mejor práctica), según sus necesidades:

todo el sitio : default.xmlpor ejemploapp/design/frontend/pakage_name/theme_name/Magento_Catalog/layout/default.xml
Página de inicio :cms_index_index.xml

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

Ahora cree el archivo requirejs-config.js

Magento_Catalog/requirejs-config.js

Define tu control deslizante,

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

Ahora puede usar owlcarousel debajo de cualquier archivo 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>

Elimine el contenido de la carpeta pub / static y ejecute el php bin/magento setup:static-content:deploycomando.

— Rakesh Jesadiya
fuente

pero donde puedo agregar css? y necesito agregar css en el archivo require.js ??

— Dhaval

no puede agregar css en el archivo

— require.js

Tengo 3 archivos deslizantes de búho owl.carousel.css , owl.carousel.js , owl.carousel.min y necesito agregar todos estos archivos, así que ¿dónde puedo agregar y llamar a todos estos archivos para poder usarlos en todo el sitio de magento donde sea que yo ¿querer?

— Dhaval

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

— Rakesh Jesadiya el

Tengo una actualización actualizada por favor compruebe

— Rakesh Jesadiya 01 de

9

primero debes poner el control deslizante en,

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

Paso 2 Realice la asignación del archivo en 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'

        }
    }
};

Paso 3 : Lo he usado en el archivo de bestseller como se muestra a continuación, donde debe incluir la asignación de controles deslizantes, 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>

Paso 4 : para que la estructura sea la siguiente,

<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>

También puede visitar más enlaces @ 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-implement-owl-slider /

— Rushvi
fuente

En cualquier momento. Me alegra saber que funcionó para ti :)

— Rushvi

¿Eres de ahmedabad?

— Dhaval

Tengo call owl slider js en requirejs-config.js pero mi js no se muestra en la interfaz. ¿Tiene alguna idea?

— Dhaval

@watson Elimine el contenido de la carpeta pub / static y ejecute php bin / magento setup: static-content: deploy command.

— Rushvi

Lo hago muchas veces pero no funcionó.

— Dhaval

4

Si desea agregar owl carouselde Magento 2manera, debe seguir estos pasos.

Copiar owl.carousel.jsa app/design/frontend/<pakage_name>/<theme_name>/web/js/owl-carousel/.

Agrega tu requirejsmódulo app/design/frontend/<pakage_name>/<theme_name>/web/js/carousel.js.

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

Agregar requirejsconfiguración a app/design/frontend/<pakage_name>/<theme_name>/requirejs-config.js.

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

Cómo utilizar:

use el data-mage-initatributo para insertar Owl Carousel en un 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>

utilizar con <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
fuente

0

Las otras 2 respuestas son excelentes, y he copiado elementos de ambas, pero ocasionalmente encontré problemas con los mensajes de error "$ no es una función" y "No se puede leer la propiedad 'fn' de undefined". También quería un método centrado en las páginas de contenido.

Entonces este método combinado podría ayudar a alguien

Copiar owl.carousel.js en app / design / frontend / vendorname / THEMENAME / Magento_Theme / web / js

(crear directorio si aún no está allí)

La otra solución css podría funcionar igual de bien, o podría copiar owl.carousel.css y owl.theme.default.css en el archivo .Less para el tema, y ajustar el estilo a sus preferencias.
Copia el siguiente código en app / design / frontend / vendorname / THEMENAME /Magento_Theme/require-config.js

(cree un archivo / directorio si es necesario, este código parece resolver el problema "no se puede leer la propiedad de FN").

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

En el contenido de la página, coloque el siguiente código para definir las imágenes del carrusel

<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>

Después del código anterior, agregue el siguiente código para el carrusel (esto parece resolver el error "$ no es una función")

<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>

Implemente el contenido estático, por ejemplo, php magento setup: static-content: deploy (tenga en cuenta que hay varios métodos para hacerlo que implican la eliminación manual de carpetas de caché y un php magento cache: comando de limpieza).
Compruébalo en el sitio web

— shires-boy
fuente

Lo intenté pero el control deslizante no viene. aunque cuando inspecciono la clase de elemento owl se agrega al div

— surbhi agr el

-1

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

Deberías agregar owl.carousel.min.jsmagento2

— Prakash
fuente