リアルコマース スタッフブログ

Real Commerce株式会社スタッフブログ

CLOSE

makeshop検索画面のカスタマイズ方法

makeshopの検索ページをカスタマイズする1つの案をご紹介します。
検索ページは、検索結果を[SEARCH_RESULT]でループさせ、中身を表示させます。
今回は、商品を横に4つ並べた次のような結果を想定しています。

サンプルの確認

今回は検索結果部分を次のようにリストで表示することにします。

htmlを編集する

<div id="kensakuList">
    <ul>
    [SEARCH_RESULT]
        <li>
            <a href=[ITEMDETAIL_URL]>
                [IMAGE_L]
                <h3>[ITEM_NAME]</h3>
                <p class="price">[ITEM_PRICE]</p>
            </a>
        </li>
    [/SEARCH_RESULT]
    </ul>
</div>

検索結果を表示させるdivを用意し、その中に検索結果をリスト表示させる仕組みになっています。
検索結果表示で利用する商品画像は[IMAGE_L]を使っていますので、240pxで表示させます。

CSSを編集する

#kensakuList ul {
    letter-spacing: -.5em;
    width:100%;
}

#kensakuList li {
    width:22%;
    margin-right: 4%;
    margin-bottom: 20px;
    display: inline-block;
    vertical-align: top;
    letter-spacing: normal;
}

#kensakuList li:nth-child(4n) {
    margin-right: 0;
}

#kensakuList li a {
    width:100%;
    height: 100%;
    display: block;
}

#kensakuList li img {
    width:100%;
    height: auto;
    margin-bottom: 10px;
}

#kensakuList li h3 {
    font-weight: bold;
    font-size: 1em;
}

#kensakuList li p.price {
    margin-top: 5px;
    text-align: right;
}

検索結果で表示される商品のリストを上端揃えするために、今回はリスト1つ1つの要素をdisplay:inline-blockとvertical-align:top; を指定しました。そして、inline-blockを利用するために、letter-spacingでインラインブロック時に出来るスペースを無くしています。

ulを100%としており、1つ1つのリストの幅を22%、その隙間を4%としていますので、
22% + 4% + 22% + 4% + 22% + 4% + 22% = 100%
となっています。

今回は%で制御しましたので、おそらくどのようなデザインのサイトでもご利用いただけるかと思います。

この記事をシェアする