Magento2でフクロウスライダーを呼び出す方法

11

Magento 1.Xでフクロウスライダーを追加する場合は、以下の手順に従います。

コピーowl.carousel.min.jsしowl.carousel.jsて貼り付けるskin/frontend/pakage_name/theme_name/js
にコピーowl.carousel.cssして貼り付けskin/frontend/pakage_name/theme_name/css
移動してapp/design/frontend/pakage_name/theme_name/layout/page.xmljsとcssを呼び出す

また、Magento 1.XサイトのどこでもOwl Sliderを使用できます。

Magento 2では、フクロウスライダーを呼び出す方法を説明します。これは、サイト内のどこでも呼び出す必要があるため、いつでも使用できます。

私のこの問題について、私はこのリンクを参照しましたが、それはマークまでではなく、機能していません。

現在、フクロウスライダーjsを配置しましたapp/design/frontend/pakage_name/theme_name/Magento_Catalog/web/jsが、機能しません。

任意の助けいただければ幸いです。

— ダヴァル
ソース

2

また、このガイドに従うこともできます。boolfly.com

— Khoa TruongDinh 16/07/07

11

次のrequirejs-config.jsようなテーマ内に1つのファイルを作成する必要があります。

最初にowlcarousel.jsファイルを中に追加し、

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

内部にCSSを追加し、

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

使用してtempalteファイル内のCSSを呼び出し、

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

または、必要に応じて、レイアウトファイル内でcssを呼び出します（ベストプラクティス）。

サイト全体：default.xmlたとえばapp/design/frontend/pakage_name/theme_name/Magento_Catalog/layout/default.xml
ホームページ：cms_index_index.xml

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

次にrequirejs-config.jsファイルを作成します

Magento_Catalog/requirejs-config.js

スライダーを定義し、

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

これで、任意のphtmlファイルでowlcarouselを使用できます。

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

pub / staticフォルダーのコンテンツを削除して、php bin/magento setup:static-content:deployコマンドを実行します。

— ラケシュジェサディヤ
ソース

しかし、どこにCSSを追加できますか？require.jsファイルにcssを追加する必要がありますか？

— Dhaval、2016

require.jsファイルにcssを追加できない

— Rakesh Jesadiya

私には3つのフクロウスライダーファイルowl.carousel.css、owl.carousel.js、owl.carousel.minがあり、これらすべてのファイルを追加する必要があるので、どこにでもこれらのすべてのファイルを追加して呼び出し、magentoサイト全体で使用できます欲しいです？

— Dhaval

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

— Rakesh Jesadiya 2016

私はupdatead answer plz checkを持っています

— Rakesh Jesadiya

9

最初にスライダーを置く必要があります、

ステップ1 themename/themename/Magento_Theme/web/js/owl.carousel.js

ステップ2 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'

        }
    }
};

ステップ3：スライダーマッピングを含める必要がある以下のベストセラーファイルで使用しました：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>

Step4：その構造は以下のようになるはずです、

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

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-implementing-owl-slider /

— ルシュヴィ
ソース

どんなときも。それがあなたのために働いたことを知ってうれしい:)

— Rushvi

あなたはアーメダバード出身ですか？

— Dhaval、2016

requirejs-config.jsでフクロウスライダーjsを呼び出しましたが、私のjsがフロントエンドに表示されません。何か考えはありますか？

— Dhaval、2016

@watson pub / staticフォルダーのコンテンツを削除し、php bin / magento setup：static-content：deployコマンドを実行します。

— Rushvi 2016

何度もやったけどうまくいかなかった。

— Dhaval

4

途中で追加owl carouselしたいMagento 2場合は、次の手順に従ってください。

にコピーowl.carousel.jsしapp/design/frontend/<pakage_name>/<theme_name>/web/js/owl-carousel/ます。

requirejsモジュールを追加しますapp/design/frontend/<pakage_name>/<theme_name>/web/js/carousel.js。

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

にrequirejs設定を追加しapp/design/frontend/<pakage_name>/<theme_name>/requirejs-config.jsます。

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

使い方：

data-mage-init属性を使用して、特定の要素にフクロウカルーセルを挿入します。

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

で使用<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>

— ヴォロディミル・リスニアック
ソース

0

他の2つの答えは優れており、両方の要素をコピーしましたが、「$は関数ではありません」および「未定義のプロパティ 'fn'を読み取れません」というエラーメッセージの問題をときどき見つけました。また、コンテンツページを中心とした方法が欲しかった。

したがって、この結合された方法は誰かを助けるかもしれません

owl.carousel.jsをapp / design / frontend / vendorname / themename / Magento_Theme / web / jsにコピーします

（ディレクトリがまだない場合は作成します）

他のcssソリューションも同様に機能するか、owl.carousel.cssとowl.theme.default.cssをテーマの.Lessファイルにコピーして、好みに合わせてスタイルを調整します。
次のコードをapp / design / frontend / vendorname / themename /Magento_Theme/require-config.jsにコピーします

（必要に応じてファイル/ディレクトリを作成します。このコードは、「FNのプロパティを読み取れない」問題を解決するようです。）

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

ページコンテンツに次のコードを配置して、カルーセル画像を定義します

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

上記のコードの後に、カルーセル用に次のコードを追加します（これにより、「$は関数ではありません」エラーが解決されるようです）

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

php magento setup：static-content：deployなどの静的コンテンツをデプロイします（これを行うには、キャッシュフォルダーの手動クリアとphp magento cache：cleanコマンドを含むさまざまな方法があります）。
ウェブサイトでチェックしてください

— シャーズボーイ
ソース

試しましたがスライダーが来ません。ただし、要素のフクロウクラスを検査すると、divに追加されます

— surbhi agr

-1

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

あなたはowl.carousel.min.jsmagento2 を追加する必要があります

— プラカシュ
ソース