Come chiamare Owl Slider in Magento2

11

Se vogliamo aggiungere Owl Slider in Magento 1.X, seguiamo i passaggi seguenti.

  1. Copia owl.carousel.min.jse owl.carousel.jse incollare nellaskin/frontend/pakage_name/theme_name/js
  2. Copia owl.carousel.csse incolla inskin/frontend/pakage_name/theme_name/css
  3. Vai a app/design/frontend/pakage_name/theme_name/layout/page.xmle chiama js e css

E possiamo usare Owl Slider ovunque nel sito Magento 1.X.

Quindi in Magento 2 come possiamo chiamare il cursore Owl e dovrebbe essere chiamato ovunque nel sito in modo che io possa usare ogni volta che voglio.

Per questo mio problema ho fatto riferimento a questo link ma non è all'altezza e non funziona.

In questo momento ho inserito il cursore Owl js app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/jsma non funziona.

Qualsiasi aiuto sarebbe apprezzato.

javascript  theme  magento-2.0.7  slider 
— Dhaval
fonte
2
Possiamo anche seguire questa guida: boolfly.com/magento-2-slider-with-owl- carousel
— Khoa TruongDinh

Risposte:

11

Devi creare un requirejs-config.jsfile all'interno del tuo tema come,

Prima aggiungi il file owlcarousel.js all'interno,

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

Aggiungi il tuo css dentro,

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

chiama css nel tuo file tempalte usando,

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

o chiama css all'interno di un file di layout (best practice), a seconda delle tue esigenze:

  • intero sito : default.xmlper esempioapp/design/frontend/pakage_name/theme_name/Magento_Catalog/layout/default.xml
  • Pagina iniziale :cms_index_index.xml
<page ...>
<head>
     <css src="Magento_Catalog::css/owlcarousel.css"/>
</head>
<body>...</body> </page>

Ora crea il file requestjs-config.js

Magento_Catalog/requirejs-config.js

Definisci il tuo dispositivo di scorrimento,

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

Ora puoi usare owlcarousel sotto qualsiasi file 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>

Rimuovere il contenuto della cartella pub / static ed eseguire il php bin/magento setup:static-content:deploycomando.

— Rakesh Jesadiya
fonte
ma dove posso aggiungere CSS? e devo aggiungere css nel file require.js ??
— Dhaval,
non puoi aggiungere css nel file
— require.js
Ho 3 file di scorrimento del gufo owl.carousel.css , owl.carousel.js , owl.carousel.min e ho bisogno di aggiungere tutti questi file, quindi dove posso aggiungere e chiamare questi tutti i file in modo da poterlo utilizzare in tutto il sito di Magento ovunque io volere?
— Dhaval,
app / design / frontend / pakage_name / theme_name / Magento_Catalog / web / css
— Rakesh Jesadiya
ho aggiornato la risposta per controllare
— Rakesh Jesadiya,
9

per prima cosa devi mettere il cursore su,

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

Passaggio 2 Eseguire il mapping per il file in 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'

        }
    }
};

Step3 : Ho usato nel file bestseller come di seguito dove è necessario includere la mappatura del dispositivo di scorrimento, il loro nome / nome / Magat_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>

Step4 : per quella struttura dovrebbe essere come di seguito,

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


Puoi anche visitare altri link @ 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-attuazione-owl-cursore /

— Rushvi
fonte
In qualsiasi momento. Sono contento di sapere che ha funzionato per te :)
— Rushvi,
Vieni da Ahmedabad?
— Dhaval,
Ho chiamato il cursore del gufo js in requestjs-config.js ma il mio js non viene visualizzato in frontend. Hai qualche idea?
— Dhaval,
@watson Rimuovi il contenuto della cartella pub / static ed esegui php bin / magento setup: static-content: deploy command.
— Rushvi,
Lo faccio tante volte ma non ha funzionato.
— Dhaval,
4

Se si desidera aggiungere owl carouselin Magento 2modo, è necessario seguire questi passaggi.

  1. Copia owl.carousel.jsin app/design/frontend/<pakage_name>/<theme_name>/web/js/owl-carousel/.

  2. Aggiungi il tuo requirejsmodulo app/design/frontend/<pakage_name>/<theme_name>/web/js/carousel.js.

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

  3. Aggiungi requirejsconfig a app/design/frontend/<pakage_name>/<theme_name>/requirejs-config.js.

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

Come usare:

  • usa l' data-mage-initattributo per inserire Owl Carousel in un certo elemento:

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

  • utilizzare 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
fonte
0

Le altre 2 risposte sono eccellenti e ho copiato elementi di entrambi, ma occasionalmente trovavo problemi con i messaggi di errore "$ non è una funzione" e "Impossibile leggere la proprietà 'fn' di undefined". Inoltre volevo un metodo incentrato sulle pagine di contenuto.

Quindi questo metodo combinato potrebbe aiutare qualcuno

  1. Copia owl.carousel.js in app / design / frontend / vendorname / themename / Magento_Theme / web / js

(crea directory se non già presente)

  1. L'altra soluzione css potrebbe funzionare altrettanto bene, oppure potresti copiare owl.carousel.css e owl.theme.default.css nel file .Less per il tema e adattare lo stile alle tue preferenze.
  2. Copia il seguente codice in app / design / frontend / vendorname / themename /Magento_Theme/require-config.js

(se necessario, crea file / directory, questo codice sembra risolvere il problema "impossibile leggere la proprietà di FN").

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

  1. Nel contenuto della pagina inserire il seguente codice per definire le immagini della giostra

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

  2. Dopo il codice sopra, aggiungi il seguente codice per il carousel (questo sembra risolvere l'errore "$ is not a function")

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

  3. Distribuisci il contenuto statico, ad esempio php magento setup: static-content: deploy (nota che ci sono vari metodi per farlo che comportano lo svuotamento manuale delle cartelle cache e una cache magento php: comando clean).

  4. Dai un'occhiata sul sito web

— shires-boy
fonte
ho provato ma il cursore non sta arrivando. sebbene quando ispeziono la classe del gufo dell'elemento
— venga
-1 
define([
    "jquery",
], function ($) {
    !function(a,b,c,d){function e(b,c)................................(window.Zepto||window.jQuery,window,document)
});

Dovresti aggiungere owl.carousel.min.jsmagento2

— Prakash
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.