• このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

長いスマホ商品ページでも購入導線をわかりやすく表示し離脱を防ぐ

画像やテキストで商品が訴求された長い商品ページは商品の情報が充実していてるのですが、いざ買おうと思ったときに「どっから買うたらええねん」となってしまうことがあります。特にスマートフォンでは画面が小さい分注意。

そうなってしまわないように、今回は商品ページでユーザーにを迷わせないようにカートボタンへの固定ボタンを表示させます。

サンプル

下記がサンプルの商品詳細ページです。iframe内をスクロールしてみてください。

スクロールすると、「この商品を購入する」のボタンをふわっと表示。
ボタンをタップすると、「カートに入れる」へ。スルスルっとレジまで連れて行ってくれます。

作り方

下記の方法で実装可能です。

  1. JQuery読み込み
  2. ボタンをHTMLで作成
  3. ボタンを画面下部に固定するCSS
  4. スクロールでふわっと表示するjQuery
  5. アンカーリンクでスムーズにスクロールするjQuery
1.JQuery読み込み
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

JQueryを使用しますのでライブラリを読み込んでおきます。
なお、新しいバージョンのほうが読み込み速度が速いです。

2.ボタンをHTMLで作成

<div class="toCartButton">
 <a href="#☆☆☆☆">
  <p>この商品を購入する ></p>
 </a>
</div>

☆☆☆☆の部分は、ボタンをタップしたときにスクロールする先のIDを記載して下さい。
なお、表示速度のことを考えると、htmlの下部に記述するほうが良いです。

3.ボタンを固定するCSSを追加

CSSでボタンをページ下部に固定します。

.toCartButton {
/*ページ下部に固定*/
    position: fixed;
    bottom: 0px;
    width: 100%;

}

こちらのCSSでページ下部にボタンを固定します。

関連記事:【jQuery】レンスポンシブな固定フッターメニューの作成方法 | Mobile First Marketing Labo

なお、ボタンの上に影を付ける場合は下記のCSSで設定可能。

/*ボタン上部に影をつける*/
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4);
4.スクロールでふわっと表示するJQUERY
$(function() {
    var topBtn = $('.toCartButton');    
    topBtn.hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 50) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
});

どのくらいスクロールしたら表示するかは、上の数字を書き換えると調整可能です。

5.アンカーリンクでスムーズにスクロールするjQuery
(function($) {
    'use strict';
 
    $(function() { 
        var scrollSpeed = 1000, // スクロール時間(ミリ秒)
                buttonOffset = 200; // トップへ戻る固定ボタンを表示するスクロール量(px)
     
        // スムーズスクロール
        $('a[href^="#"]').on( 'click', function() {
            var href= $(this).attr( 'href' );
            if ( href !== '#' || href !== '' ) {
                var target = ( href === '#top' && !$('#top').length ) ? 'html' : href,
                        position = $(target).offset().top;
                $('body, html').animate( {scrollTop:position}, scrollSpeed, 'swing' );
                return false;
            }
        });
        // トップへ戻る固定ボタンの表示・非表示
        if ( $('.scroll-fade').length ) {
            var sfBtn = $('.scroll-fade'),
                    sfBtnDisplay = '',
                    flagAnimate = false;
            $(sfBtn).css( 'display', 'none' );
            $(window).on( 'scroll', function() {
                sfBtnDisplay = sfBtn.css( 'display' );
                if ( $(this).scrollTop() > buttonOffset && sfBtnDisplay === 'none' && !flagAnimate ) {
                    flagAnimate = true;
                    sfBtn.fadeIn(function() {
                        flagAnimate = false;
                    });
                } else if ( $(this).scrollTop() <= buttonOffset && sfBtnDisplay !== 'none' && !flagAnimate )  {
                    flagAnimate = true;
                    sfBtn.fadeOut(function() {
                        flagAnimate = false;
                    });
                }
            });
        }
    });
 
})( jQuery );

関連記事:ページ内リンクをスムーズに移動!スムーズスクロールの設置方法 | Mobile First Marketing Labo

こちらで完成です!

いかがでしたでしょうか。

近年はモバイルファーストなサイトや1カラムのページが増えて、1ページが長いサイトが増加傾向にあります。そのようなサイトでは是非ともお試しください。