フューチャーショップの商品ページカスタマイズ（SP版）。スライダー実装でページネーション表示。

Eコマース

SHARE

ECサイト構築プラットフォーム、フューチャーショップ（FutureShop2）を利用されている方専用記事。
標準の寂しい商品画像スライド機能に、ページネーションを追加できる方法をご紹介します。

ワラ

この記事の内容、ファイルを読み込むだけで実装可能だよ。（画像ホスティングオプションを利用していないとファイルを書きかえる必要がありますが、、、）

必要ファイルをダウンロード

bxslider

今回スライダー機能を実装するにあたり『bxslider』プラグインを使用。

以下の公式サイトからファイルをダウンロード
https://bxslider.com/

今回必要なファイルは以下の1つだけ、自身のサーバ環境にアップロードし使用します。
jquery.bxslider.min.js

商品ページへ必要ファイルの出力。記述。

必要なファイルを商品ページでのみ出力/記述するようにします。
全ページに出力/記述してしまうとページ読み込み速度の低下や、予期せぬ挙動が発生する原因となってしまいます。

コメントパターンへの登録

fs2管理画面 > モバイル > ページ設定 > コメントパターン一覧

上記項目から『パターン新規登録』。
コメント名：任意
コメント内容：下記の内容を記述

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.bxslider.min.js"></script>
<script type="text/javascript">
jQuery(function($){
    //商品詳細代替スライダー
    (function(){
        if ($('.fs_sp_flick_item_container').length > 0) {
            //サブ画像のALTテキストを削除
            // $(".FS2_additional_image_detail_sub .FS2_additional_image_detail_alt").remove();
            //スライダーラッパー要素生成
            var $itemSlider = $("
", {
                "class": "itemslider"
            });
            var $listItemSlider = $("
", {
                "class": "list_itemslider"
            });
            $itemSlider.insertBefore(".FS2_ItemThumbnails");
            $listItemSlider.appendTo($itemSlider);
            //スライダー要素移動
            $(".FS2_ItemThumbnails .fs_sp_flick_item_container").appendTo($listItemSlider);
            
            $(window).on('load', function() {
                $listItemSlider.bxSlider();
            });
            //スライダー発動
            /*
            var allImage = $listItemSlider.find("img");
            var allImageCount = allImage.length;
            var completeImageCount = 0;
            for(var i = 0; i < allImageCount; i++){
                $(allImage[i]).on("load", function(){
                    completeImageCount ++;
                    if (allImageCount === completeImageCount){
                        $listItemSlider.bxSlider();
                    }
                });
            }
            */
            //元のスライダーを削除
            $(".FS2_ItemThumbnails").remove();
        }
    })();
});
</script>

jqueryの読み込みについて

すでにサイト内にjqueryライブラリを読み込み済みの場合、以下の記述は必要ありません。挙動エラーの原因となる可能性があるので外してください。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

画像タップイベントを無効化

fs2の画像ホスティングオプションではアンカータグが設定されており、タップすると画像URLページへと遷移されてしまいます。
ユーザー体験としてはいい印象を受けないので以下記述を追加して、タップイベントを無効化してもいいかもしれないですね。

<script type="text/javascript">
$(function(){
	$('.fs_sp_flick_item_container a').click(function(){
		return false;
	})
});
</script>

CSSの設定

商品画像、ページネーションのデザイン設定を行います。

fs2管理画面 > モバイル > デザイン設定 > デザイン設定

デザインCSSの編集：下記の内容を記述

/* FS2打消し用
-------------------------------------*/
div:after {content:".";display: none;height:0;clear:both;visibility:hidden;}

/* 商品画像 スライダー
-------------------------------------*/
/* ロード対策 */
.itemslider .fs_sp_flick_item_container{width: 100%;}
.itemslider>.list_itemslider>.fs_sp_flick_item_container:nth-of-type(n+2) {display:none}

.itemslider .fs_sp_flick_item_container img{width:100%; display:block;}
.itemslider .bx-wrapper{width:100%; margin:0 auto 20px; position:relative}
/* ページネーション */
.itemslider .bx-wrapper .bx-pager{text-align:center;padding: 0 30px;width: 81%;width: -webkit-calc(100% - 60px);width: calc(100% - 60px);display: table;margin-top: 30px;}
.itemslider .bx-wrapper .bx-pager .bx-pager-item{display: table-cell; *zoom:1; *display:inline;font-size: 0;}
.itemslider .bx-wrapper .bx-pager .bx-pager-item:last-child{margin-right:0}
.itemslider .bx-wrapper .bx-pager .bx-pager-item a{width: auto;height: 2px;display:block;border: none;cursor:pointer;text-indent:-9999px;text-align:left;border-radius: 0;background: #c9c9c9;transition: .3s ease-in-out;}
.itemslider .bx-wrapper .bx-pager .bx-pager-item a.active{background: #2293d3;cursor:default;}
.itemslider .bx-wrapper .bx-controls-direction a{position:absolute;top:50%;outline:0;text-indent:-9999px;z-index: 1000;-webkit-transform:translate(0,-50%);-moz-transform:translate(0,-50%);-ms-transform:translate(0,-50%);-o-transform:translate(0,-50%);transform: translate(0,-50%);margin-top: -12px;}
.itemslider .bx-wrapper .bx-next{ background:rgba(0,0,0,0.20);  width:42px;  height:42px;  -moz-border-radius:21px;  -webkit-border-radius:21px;  -o-border-radius:21px;  -ms-border-radius:21px;  border-radius:21px;  z-index:10;  right:3%}
.itemslider .bx-wrapper .bx-next::after{ right:17px;  z-index:11;  text-shadow:none;  display:inline-block;  position:absolute;  top:33%;  visibility:visible;  border-top:2px solid #fff;  border-right:2px solid #fff;  content:"";  -webkit-transform:rotate(45deg);  transform:rotate(45deg);  width:12px;  height:12px}
.itemslider .bx-wrapper .bx-prev{ background:rgba(0,0,0,0.20);  width:42px;  height:42px;  -moz-border-radius:21px;  -webkit-border-radius:21px;  -o-border-radius:21px;  -ms-border-radius:21px;  border-radius:21px;  z-index:10;  left:3%}
.itemslider .bx-wrapper .bx-prev::after{ left:17px;  z-index:11;  text-shadow:none;  display:inline-block;  position:absolute;  top:33%;  visibility:visible;  border-left:2px solid #fff;  border-bottom:2px solid #fff;  content:"";  -webkit-transform:rotate(45deg);  transform:rotate(45deg);  width:12px;  height:12px}

※bxsliderプラグインの挙動対策（読み込まれるまで画像が縦に並ぶ）として、読み込み完了まで2枚目以降の画像を非表示としております。

商品ページへコメントパターンの出力

fs2管理画面 > モバイル > ページ設定 > 各ページ設定 > 商品

商品詳細のコメントパターンへ先ほど登録したものを設定します。

これで設定は完了です。
実環境をご確認ください。スライダー機能が実装され、ページネーションが出現していませんか。
ページネーションデザインを変更したい場合、任意でCSSの調整を行ってください。

さいごに

少しのUI/UX改善で、離脱率/回遊率/CV率に大きく影響することがあります。
自身がユーザ目線でサイトを使用し、少しでも気になる箇所があれば、徹底的に解決しましょう。

前の記事

wordPress
コピペで簡単！WordPress管理画面をカスタマイズ。これ…

次の記事

これからECサイト（通販）を運営するなら選ぶカートシステムは…
Eコマース