Yahoo！ショップトリプルでサイト作成時のポイントをまとめてみた～part01～

Yahoo！ショッピングをトリプルで制作する際のポイントをまとめてみました。
これから作成するかたの参考になれば幸いです。

ではさっそく！

1）共通部分はjsやiframeで読み込ませよう

headerやfooter、sideバーなど共通のパーツについてはそれぞれのHTMLを作成して
JSやiframeで読み込ませます。

私の場合はJSで対応しました。

▼パーツ化するとよいもの
・header.html
・footer.html
・side.html
(partsなどのフォルダを作ってそこに入れておく)

▼実際のソース

<!DOCTYPE html>
<html lang="ja">
    <head>
        --メタタグやスタイルシートなど--
    </head>

    <body>
        <header id="commonHeader"></header>

        <section id="commonBanner"></section>
            
        <footer id="commonFooter"></footer>

        <!--js-->
        --ここらへんにJSを直接記述--
    </body>
</html>

WordPressを考えてheadとかもパーツ化してもいいのでは？と考えましたが
これはうまくいきませんでした。

ちなみにswiperを使用したスライドの部分も最初はパーツ化して読み込ませていたのですが
動きがおかしかったのでパーツ化することを諦めました。

基本的にパーツ化するのは必要最低限の共通項目にしておくことをおすすめします。

またJSで共通パーツを読み込ませる際に気を付けることがあります。
一般的なHTMLや通常のサーバであれば下記の形でパーツ化したHTMLを読み込ませることが
可能ですが、Yahoo！トリプルではsc.jsが邪魔してうまくいかない場合があります。

またJSで読み出しを行うのでHTMLに直書きしているソースが先に出て
headerやsideが後から各つきながら表示されてしまう場合にも有効です。

$(function(){
　　$("#commonHeader").load("parts/header.html");
　　$("#commonBanner").load("parts/banner.html");
　　$("#commonFooter").load("parts/footer.html");
});

その場合は下記のように変更してみてください。

$(function () {
    $("#commonHeader").load('parts/header.html', function () {
        $("#commonBanner").load('partse/banner.html', function () {
            $("#commonFooter").load('parts/footer.html', function () {
                afterLoad();
            });
        });
    });
});

2）アンカーリンクやポップアップはHTML ページに含まれる画像やスタイルシートなどすべてのリソースの読み込みが完了した時点で発火するようにJSを記述しよう

通常通りにアンカーリンクやポップアップのJSを入れてもYahoo！トリプルの場合うまくいかないことが
多いです。そこでJSの書き方を以下のように変更します。

ちなみに今回ポップアップは「lightbox.min.js」を使用しました。

▼ポップアップ

window.addEventListener("load", function () {

    $('a[data-lightbox]').each(function (index, elem) {
        let clone = elem.cloneNode(true);
        elem.parentNode.insertBefore(clone, elem);
        elem.parentNode.removeChild(elem);
    });
}, false);

▼アンカーリンク

window.addEventListener("load", function () {
    $('a[href^="#"]').each(function (index, elem) {
        let clone = elem.cloneNode(true);
        elem.parentNode.insertBefore(clone, elem);
        elem.parentNode.removeChild(elem);
    });
 
    {
        $('a[href^="#"]').click(function () {
            var speed = 400;
            var href = $(this).attr("href");
            var target = $(href == "#" || href == "" ? 'html' : href);
            var position = target.offset().top;
            $('body,html').animate({ scrollTop: position }, speed, 'swing');
            return false;
        });

        var lochref = window.location.href;
        if (lochref.indexOf('#') > -1) {
            var anchor = lochref.slice(lochref.indexOf('#'));
            window.setTimeout(function () {
                $('body, html').animate({ scrollTop: $(anchor).offset().top }, 1);
            }, 1);
        }
    }
}, false);

これでアンカーリンクをスムーズにしたりポップアップも使えるようになります。
ここらへんはうちのエンジニアさんががんばって対応してくれました！感謝です。

ひとまず今回のまとめはここまで！
続きのポイントは次週かきます～！

Share: