Comment appeler Owl Slider dans Magento2

11

Si nous voulons ajouter Owl Slider dans Magento 1.X, nous suivons les étapes ci-dessous.

Copier owl.carousel.min.jset owl.carousel.jscoller dansskin/frontend/pakage_name/theme_name/js
Copiez owl.carousel.csset collez dansskin/frontend/pakage_name/theme_name/css
Aller app/design/frontend/pakage_name/theme_name/layout/page.xmlet appeler js et css

Et nous pouvons utiliser Owl Slider n'importe où sur le site Magento 1.X.

Donc, dans Magento 2, comment nous pouvons appeler le curseur Owl et il devrait être appelé partout dans le site afin que je puisse l'utiliser quand je veux.

Pour mon problème, j'ai référé ce lien mais ce n'est pas à la hauteur et ça ne fonctionne pas.

Pour l'instant, j'ai placé le curseur Owl js app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/jsmais cela ne fonctionne pas.

Toute aide serait appréciée.

javascript theme magento-2.0.7 slider Dhaval
la source

2

Nous pouvons également suivre ce guide: boolfly.com/magento-2-slider-with-owl-carousel

Khoa TruongDinh

11

Vous devez créer un requirejs-config.jsfichier dans votre thème comme,

Ajoutez d' abord le fichier owlcarousel.js à l'intérieur,

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

Ajoutez votre CSS à l'intérieur,

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

appeler css dans votre fichier tempalte en utilisant,

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

ou appelez css dans un fichier de mise en page (meilleure pratique), selon vos besoins:

site entier : default.xmlpar exempleapp/design/frontend/pakage_name/theme_name/Magento_Catalog/layout/default.xml
Page d'accueil :cms_index_index.xml

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

Créez maintenant le fichier requirejs-config.js

Magento_Catalog/requirejs-config.js

Définissez votre curseur,

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

Vous pouvez maintenant utiliser owlcarousel sous n'importe quel fichier 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>

Supprimez le contenu du dossier pub / statique et exécutez la php bin/magento setup:static-content:deploycommande.

Rakesh Jesadiya
la source

mais où puis-je ajouter css? et je dois ajouter css dans le fichier require.js ??

Dhaval

vous ne pouvez pas ajouter css dans le fichier require.js

Rakesh Jesadiya

J'ai 3 fichiers de curseur de hibou owl.carousel.css , owl.carousel.js , owl.carousel.min et j'ai besoin d'ajouter tous ces fichiers afin où puis-je ajouter et appeler ces tous les fichiers afin que je puisse utiliser dans tout le site magento où que je sois vouloir?

Dhaval

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

Rakesh Jesadiya

j'ai mis à jour la réponse plz check

Rakesh Jesadiya

9

vous devez d'abord mettre le curseur sur,

Étape 1 themename/themename/Magento_Theme/web/js/owl.carousel.js

Étape 2 Faites le mappage du fichier dans le nom / le nom / le thème Magento / requirejs-config.js

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

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


            owlcarouselslider:        'Magento_Theme/js/owl.carousel'

        }
    }
};

Étape 3 : J'ai utilisé dans le fichier du best-seller comme ci-dessous où vous devez inclure le mappage de curseur, le nom / le nom / 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>

Étape4 : Pour que la structure soit comme ci-dessous,

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

Vous pouvez également visiter plus de liens @ 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-implementation-owl-slider /

Rushvi
la source

À tout moment. Heureux de savoir que cela a fonctionné pour vous :)

Rushvi

Êtes-vous d'Ahmedabad?

Dhaval

J'ai appelé le curseur de hibou js dans requirejs-config.js mais mon js ne s'affiche pas en frontend. Avez-vous une idée?

Dhaval

@watson Supprimez le contenu du dossier pub / statique et exécutez la configuration php bin / magento: commande static-content: deploy.

Rushvi

Je le fais tellement de fois mais je ne l'ai pas travaillé.

Dhaval

4

Si vous souhaitez ajouter owl carouselde Magento 2manière, vous devez suivre ces étapes.

Copiez owl.carousel.jsvers app/design/frontend/<pakage_name>/<theme_name>/web/js/owl-carousel/.

Ajoutez votre requirejsmodule app/design/frontend/<pakage_name>/<theme_name>/web/js/carousel.js.

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

Ajoutez la requirejsconfiguration à app/design/frontend/<pakage_name>/<theme_name>/requirejs-config.js.

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

Comment utiliser:

utilisez l' data-mage-initattribut pour insérer Owl Carousel dans un certain élément:

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

utiliser avec <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
la source

0

Les 2 autres réponses sont excellentes, et j'ai copié des éléments des deux, mais j'ai parfois trouvé des problèmes avec les messages d'erreur "$ n'est pas une fonction" et "Impossible de lire la propriété 'fn' de indéfini". Je voulais aussi une méthode centrée sur les pages de contenu.

Donc, cette méthode combinée pourrait aider quelqu'un

Copiez owl.carousel.js dans app / design / frontend / vendorname / themename / Magento_Theme / web / js

(créer un répertoire s'il n'y est pas déjà)

L'autre solution css pourrait tout aussi bien fonctionner, ou vous pouvez copier owl.carousel.css et owl.theme.default.css dans le fichier .Less pour le thème, et ajuster le style selon vos préférences.
Copiez le code suivant dans app / design / frontend / vendorname / themename /Magento_Theme/require-config.js

(créez un fichier / répertoire si nécessaire, ce code semble résoudre le problème "Impossible de lire la propriété de FN".)

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

Dans le contenu de la page, placez le code suivant pour définir les images du carrousel

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

Après le code ci-dessus, ajoutez le code suivant pour le carrousel (cela semble résoudre l'erreur «$ n'est pas une fonction»)

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

Déployez le contenu statique, par exemple, configuration de php magento: static-content: deploy (notez qu'il existe différentes méthodes pour ce faire qui impliquent l'effacement manuel des dossiers de cache et une commande php magento cache: clean).
Découvrez-le sur le site

shires-boy
la source

j'ai essayé mais le curseur ne vient pas. bien que quand j'inspecte l'élément, la classe de hibou est ajoutée au div

surbhi agr

-1

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

Vous devez ajouter owl.carousel.min.jssur magento2

Prakash
la source

Comment appeler Owl Slider dans Magento2

Réponses: