DebutのSlideshowでcenterModeを実装する

[sfujihara]

英語版のこちらと同じ内容の相談になります。回答がまだついてないようなので日本語でさせてください。

https://community.shopify.com/c/Technical-Q-A/Debut-theme-show-partial-next-slide/m-p/831938

現在Debutを使ってストアを構築しているのですが、slickをカスタマイズしてcenterModeをいれたいと思っています。バナー3枚のスライドショーをいれたときに、1枚がメインで表示され、左右に残りのバナーが見切れて見えるイメージです。

slideshowまわりのjQueryがvendor.jsに格納されているようで、slickの設定箇所（Prettier整形後の6888行目：slidesToShowの項目がある同じオブジェクト）に下記コードを追加しましたが、特に見た目が変わりません。

centerMode: 1,//trueにしても挙動は変わらず
centerPadding: '100px',

原因や、centerModeを機能させる方法を御存知の方がいればコメントいただけると幸いです。 

[Jizo_Inagaki · Accepted solution]

Debuteを多少いじっている者ですが、Slickに関しては触っていないため認識間違いなどありましたら申し訳ありません。

v16.7.0 ではですが、vender.jsのほうは以下のあたりでしょうか？

//以上省略と、以下整形状態
 /*!* slick-slim.min.js*/
    ! function(e) {
        "use strict";
        "function" == typeof define && define.amd ? define(["jquery"], e) : "undefined" != typeof exports ? module.exports = e(require("jquery")) : e(jQuery)
    }(function(e) {
        "use strict";
        var t = window.Slick || {};
        t = function() {
            function t(t, i) {
                var o, r = this;
                r.defaults = {
                    accessibility: !0,
                    appendArrows: e(t),
                    appendDots: e(t),
//以下省略

ただ、theme.jsにも設定があり、おそらくですが以下のような仕組みかと考えています。

• デフォルトの設定はvender.js
• 実際に使用する際には、theme.jsでセクションごとに設定を記載して上書き

theme.jsの該当箇所は、7109行目の theme.Quotes などです(整形したかもしれないので行数は合っていない可能性があります)。

そのため以下の手順が考えられます。

• vender.jsの t.prototype などの各部に対しても、他の設定項目と同様にcenterMode用の記述を追加
• theme.jsに新たなセクションを追加(あるいは既存のセクションの追加)し、他のセクションと同様の記述をカスタムして追加

ここまでを踏まえますと、2017 年の投稿ですが以下のように新たにassetsにslick用のjsやcssを入れて使う方法が検討できるように思います。

https://community.shopify.com/c/Shopify-Design/Slick-Slider-integration-almost-working-HELP/td-p/344...
※上記は解決しておらず、Debutか不明で、かつ古いのでいろいろ違う部分はありますが先行事例として一応記載します

すでにテーマ内に存在するライブラリをまた新たに読み込むのは非効率的ではあり、干渉の危険もありますが。

以上ですが推測で書いている部分が多いため、間違った情報となっていましたら申し訳ありません。

[sfujihara]

jizoさま

早速のご回答ありがとうございます。

>vender.jsのほうは以下のあたりでしょうか？

はい、そのとおりです。

• vender.jsの t.prototype などの各部に対しても、他の設定項目と同様にcenterMode用の記述を追加
• theme.jsに新たなセクションを追加(あるいは既存のセクションの追加)し、他のセクションと同様の記述をカスタムして追加

ここまでを踏まえますと、2017 年の投稿ですが以下のように新たにassetsにslick用のjsやcssを入れて使う方法が検討できるように思います。

上記試してみます！

[Jizo_Inagaki]

確認いただきありがとうございます。

メールで返信の通知を目にしまして誤字に気がつき、取り急ぎ一部訂正させていただきます。

ここまでを踏まえますと、2017 年の投稿ですが以下のように新たにassetsにslick用のjsやcssを入れて使う方法が検討できるように思います。

上記の箇所ですが、下記が本来考えていた記述でした。(『』内の1字のみが変更点です)

• 「ここまでを踏まえますと、2017 年の投稿ですが以下のように新たにassetsにslick用のjsやcssを入れて使う方法『も』検討できるように思います。」

vender.jsとtheme.jsに追加する方法と上記は別なので、ややこしくなってしまい申し訳ありません。

[sfujihara]

こちら時間立ってしまいましたがありがとうございました。

結局いろいろと試行錯誤したのですが、コメントいただいた内容に近い形で解決できました。以下要因と解決策です。

-----

前提

• slickライブラリにおけるcenterModeはライブラリに定義されている。
  • slickライブラリは通常、CDNから呼び出して使う。
• 一方、Debutにおけるslickライブラリはvendor.jsにハードコートされており、そこから呼び出して使っている。
  • 【主要因】vendor.jsにハードコードされる際に、centerModeの設定部分が削除されている

対応

• vendor.jsのもともとあるslick定義部分をコメントアウト、slickライブラリの最新版から内容をペーストする。
• 注：コメントアウトして、CDNからの呼び出しだとサイトの他の部分に不具合が発生する。何かの干渉が発生しているからかもです。

上記の対応でざっと触ってサイトの挙動は大丈夫そうですが、この回答案を参考にされる方は気をつけて実装してください。