商品ページのサブ画像をFlexslider2でスライドショー化

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
サブ画像のスライドショー化

 このところ連続でご紹介しているカートページのカスタマイズですが、今回は商品ページの施工です。
 「カート入力時にフリガナ、FAXを入力しなくて良い方が成約が上がる!」や「カート離脱防止アラートを表示させる」と一緒にご紹介しておくとコードの記載が簡単なので、商品ページのサムネイルをスライダー化するカスタマイズをご紹介しておきます。

Flexslider2を導入

 初期設定の商品画像はサブ画像はポップアップされてしまい、いちいち画像を閉じなくてはならず面倒です。(⇒WelcartBasicのデモサイトで確認

 これをスライドショー化できればいいなとおもっていたのですが、やっぱり『Welcart カスタマイズブログ』さんにありました!!

今回も『Welcart カスタマイズブログ』さんを参考に!

 生まれ年ワインショップのWelcartのカスタマイズは、半分以上このサイトを参考にさせてもらっています。今回もそう!設置も私が説明する必要はないと思うし、こんなに詳しく書けないので「画像をスライドショーで見せる FlexSlider2(『Welcart カスタマイズブログ』さん)をご覧ください。

 さて、では私は何を書くかというと、前回まで書いてきたfunction.php内のjQuery本体を読み込む命令文部分を、Flexslider2のカスタマイズも組み込んだものに変更するということ。

です。実際、生まれ年ワインショップは2017年2月現在、この形でjQuery本体を読み込む命令文部分は完成形となっています。

商品のメイン画像を大きくする

 『Welcart カスタマイズブログ』さんに

大きさを変える場合はusces_the_itemImageの中の数字を変えて下さい(メイン画像とサブ画像の2箇所)。

とあるように、画像のサイズはFlexSlider2の読込部分で調整できます。
 ただし、生まれ年ワインショップでは、できるだけ商品画像は最適化してからアップしていますが、たまに忘れてしまうことがあるため、画像が大きすぎてもメイン画像の部分に納まるように、画像ボックスのサイズを指定しています。なので、メイン画像のサイズを変更させたい場合は、この部分も数値を一致させなければなりません。

 例の如く実際の生まれ年ワインショップのコードを書いておきます。最初の1行が画像ボックスのサイズ指定をしている部分です。この部分とusces_the_itemImage(0, 375, 250,・・・の部分をご覧いただくと、横幅250pxで統一しているのが分かると思います。

サブ画像のスライドショー化

 以上です。皆さんもコピーしてやってみてください^^

お願い

検索でここにたどり着いた方は、自営業者さんでWelcartを導入しようと思っている方だと思います。役に立った方は、ビジネスでの贈り物に当店生まれ年ワインショップもしくは、日本初のプレゼント専門ワインショッププレゼントワインショップをご利用いただけると嬉しいですm(__)m
 

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

生まれ年ワインショップ

生まれ年ワインの魅力は何といっても、生きていた時間を飲むということです。自分と同じ年数を生きている飲食物なんて考えられますか?
大切な方の特別な記念日に、忘れられない生まれ年ワインを贈りませんか?

『生まれ年ワインショップ』へ

SNSでもご購読できます。

コメントを残す

*