ホームページに人気ランキングを実装するチュートリアル

セクションを編集 編集するliquidファイルを探す ホームページに指定コレクションの商品一覧を出力するセクションファイルを開きます。 Dawnの場合はSections内の「featured-collection.liquid」が該当します。 わからない場合は、それっぽいファイルを開き、{% schema %}内の一番最初に記述してある「name」を確認してください。「特集コレクション」や「Featured collection」と記述してあれば、それが編集するファイルです。 セクション設定を追記 編集するファイルがわかったら、{% schema %}内にセクション設定を追加します。場所は「settings」内ならどこでも構いませんが、最後の方をお勧めします。 }, { "type": "checkbox", "id": "show_ranking", "label": "ランキングバッジを表示する", "default": false } ], "presets": [ この設定をしておかないと、ランキングを表示させたくない商品リストにもランキングバッジが表示されてしまいます。 追記する際は、カンマやカッコに注意してください。 Liquidタグを追加 次にこのタグをforループ内に挿入するのですが、テーマによって構造が異なりますので、まずは{% for %}タグを探してみて下さい。「{% for」で検索してみると早く見つかります。 {% for product in collection.products %} {% render 'product-grid-item' %} {% endfor %} ランキング表示にはforループ内のアイテムを1からカウントするLiquidコード「forloop.index」にHTMLタグを加え以下の構造にします。 {% for product in collection.products %} {% if section.settings.show_ranking %} {{ forloop.index }} {% endif %} {% render 'product-grid-item' %} {% endfor %} HTMLタグやクラス名は自由に変えてください。 {% for %}内にHTMLが書かれていない場合 {% for product in collection.products %} {% render 'product-grid-item', ranking_badge: forloop.index %} {% endfor %} {% render %}タグの末尾に「, ranking_badge: forloop.index」を追記してください。（古いテーマの場合は{% include %}タグの場合があります。 続いて「Snippets」よりレンダリングされてるファイル（上記の場合は「product-grid-item.liquid」）を開き、最初のHTMLタグ下にコードを挿入します。 {% if section.settings.show_ranking %} {{ ranking_badge }} {% endif %} これで一通りの実装は完了です。 コレクションを作成 コレクションを作成する 管理画面の「商品管理→コレクション」よりランキング表示用のコレクションを作成します。 「コレクションを作成する」ボタンより編集画面に移動して下さい。 タイトルは何でも構いませんが、判別しやすいよう「ランキング」とします。 続いて「コレクションの種類」を登録します。コレクションの作成方法に関しては、公式マニュアルをご覧ください。 自動設定で商品の並び順を「ベストセラー」にすれば、メンテ不要のリアルタイム人気ランキングが作成できますし、手動で作成するのもありですね。 総合ランキングを作るなら、「在庫数が0より大きい」や「商品価格が0より大きい」などの設定で作れます。 セクションを追加 カスタマイザーを開く 管理画面の「カスタマイズ」ボタンよりセクション設定画面に移動します。 セクションを追加 ホームページの「セクションを追加する」より、「特集コレクション（先程編集したファイル）」を選択します。 タイトルはとりあえず「人気ランキング」とします。 続いて先程作成したコレクションを選択して下さい。 商品点数を調整できるテーマであれば、トップ3でもトップ10でもお好きなように設定してください。 最後に「ランキングアイコンを表示する」にチェックをいれたらナンバリングされます。 ※上記はMinimalという無料テーマのカスタマイズ画面見本です。 CSSで装飾 セクションにスタイルを追記 ランキングの出力までは出来たので、後はCSSで装飾していきます。装飾の必要がなければ設定しなくても構いません。 CSSを記述する場所は、反映されるならどこでも構いませんが、インラインでいくなら以下のソースを1で編集したセクションファイル内の上部に貼り付けてください。 また、Assets内にカスタマイズ用のCSSを作っているなら、そちらに反映させてもかまいません。 {% if section.settings.show_ranking %} {% style %} .ranking-item { position: relative; } .ranking-item .ranking-badge { position: absolute; top: 0; left: 30px; display: flex; justify-content: center; align-items: center; min-width: 2em; height: 2em; font-weight: 700; line-height: 1; color: #999; background-color: #eee; z-index: 1; } .ranking-item:nth-child(-n+3) .ranking-badge { color: #fff; } .ranking-item:first-child .ranking-badge { background-color: #c90; } .ranking-item:nth-child(2) .ranking-badge { background-color: #999; } .ranking-item:nth-child(3) .ranking-badge { background-color: #633; } {% endstyle %} {% endif %} テーマによって、商品カードに余白が設定されておりますので、ずれる場合は8・9行目のtopとleftの値を調整してください。 デザインはCSSを調整してお好みでカスタマイズしてください。 また、カスタマイズ代行依頼をしていただきデザイン見本をお送りいただければ、ご希望のデザインで実装いたします。 実装サンプル 当店のホーム画面に実装サンプルがございます。

カートにアイテムが追加されました

ホームページに人気ランキングを実装するチュートリアル

アプリレスで簡単に人気ランキング機能が実装できます

2024年7月

2024年8月