【BASE】トップページとは別ページに商品一覧を作成する方法

先日、ネットショップ無料作成サービスBASEでECサイトを開設する案件で、デザインのカスタマイズを担当しました。

既存のテーマでは、トップページに商品がずらーっと並んでいるのですが、

今回はページ構成を、「トップページ・会社概要・商品一覧・お問い合わせ」という感じにしたかったので、商品一覧をトップページとは別に表示するようにコーディングしました。

その方法を書いていこうと思います。

別ページに全商品を表示する方法ってあるんかな？

JavaScriptで表示する内容を指定すればできるよ！

HTML自体のカスタマイズは、BASEのApps「HTML編集（無料）」をインストールすることで、簡単にHTMLを編集することができます。

しかし、現状HTMLを編集できるページは、下記の3ページのみです。

HOME（トップページ）・・商品一覧の表示やカテゴリー選択ができるページ
ABOUT（会社概要ページ）・・ショップについての記載をするページ
商品詳細ページ・・商品選択後に金額やカートインボタンが表示されるページ

ちなみに・・

同じくネットショップ作成サービスのカラーミーショップでは、フリーページの作成が可能です。

既存ページのカスタマイズではなく、一からページの作成ができるので、オリジナルページの作成をしたい方はカラーミーショップがおすすめですよ！

さらに、「HOME（トップページ）」からカテゴリー分けしたカテゴリーの個別ページに遷移できるようになっていますが、

そのカテゴリー毎の個別ページ下部には、「HOME（トップページ）」の内容が表示されてしまうので、単純に商品のみのページにはなりません。

そこで、今回BASEでトップページとは別に商品一覧ページを作成した方法は、

BASEのApps「カテゴリ管理（無料）」で全商品のカテゴリーを作成してページ遷移できるようにし、さらにJavaScriptでその全商品のカテゴリーページの下部に表示されるトップページの内容を非表示にするというものです。

※BASEのApps「カテゴリ管理（無料）」「HTML編集（無料）」とをインストールする必要があります！

DEMO

この記事の内容は・・

カテゴリーの作成
1. カテゴリー追加
2. 商品登録
コピペ用コードと簡単な解説
1. トップページで商品一覧を非表示
2. 商品一覧ページの下部でトップページの内容を非表示
まとめ

カテゴリーの作成

コーディング前に2つ準備が必要なので、説明していきます！

カテゴリー追加

BASEのApps「カテゴリ管理（無料）」をインストールして、カテゴリーを作成していきます。

「+大カテゴリー追加」から追加していきますが、今回は一番最初に「all item」という全商品を登録するカテゴリーを作成しておきます。

⇒今回作成する商品一覧ページは、この全商品を登録するカテゴリー(「all item」)を表示したページとなります。

あとは、任意のカテゴリーを作成すればOK！

商品登録

先程のカテゴリ管理をインストールした状態で商品登録を行うと、下図のようにカテゴリ選択ができるようになります。

商品のカテゴリーを登録する際は、「all item（全商品）」と「カテゴリー❶（任意のカテゴリー）」の2つを選択して両方で商品が表示されるようにしておきます。

コピペ用コードと簡単な解説

❶トップページで商品一覧を非表示

❷商品一覧ページ(カテゴリー毎の個別ページ)の下部でトップページの内容を非表示

の2つを記述します。

こちらのページからJSファイルをアップロードして読み込むことも可能ですが、今回はHTMLに記述する方法です！

トップページで商品一覧を非表示

HTML

<!--トップページで商品一覧を非表示-->
<div id="【id名※1】">
  {block:ShopPublic}
----HTMLの中身は省略します----
  {/block:ShopPublic}
</div>
<script>
  var strtop = "https://【ショップURL】";
  var url = location.href ;
  if(strtop == url){
  document.getElementById("【id名※1】").style.display = "none";
  }
</script>

BASE独自タグの{block:ShopPublic}から{/block:ShopPublic}の中に商品一覧の記述がされているので、

HTML内を【{block:ShopPublic}】を検索(Ctrl+F)して、任意の【id名※1】の<div>で括ります。

<div id="【id名※1】">
  {block:ShopPublic}
----HTMLの中身は省略します----
  {/block:ShopPublic}
</div>

さらに、その下に「トップページのURLを開いているときは【id名※1】の中身を非表示にする」という<script>～</script>を記述します。

<script>
  var strtop = "https://【ショップURL】";
  var url = location.href ;
  if(strtop == url){
  document.getElementById("【id名※1】").style.display = "none";
  }
</script>

商品一覧ページの下部でトップページの内容を非表示

HTML

<!--商品一覧ページの下部でトップページの内容を非表示-->
<div id="top_page">
  {block:IndexPage}
----HTMLの中身は省略します----
  {/block:IndexPage}
</div>
<script>
  $(function(){
  if(document.URL.match(/categories/)) {
  document.getElementById("【id名※2】").style.display = "none";
  }});
</script>

トップページの記述は、BASE独自タグの{block:IndexPage}から{/block:IndexPage}にしますが、

HTML内で【{block:IndexPage}】検索(Ctrl+F)すると、4箇所あります。

4箇所のうち、</header>下の{block:IndexPage}から{/block:IndexPage}を上記のように任意の【id名※2】の<div>で括ります。

※{block:IndexPage}から{/block:IndexPage}以外にトップページの内容を記述している場合は、実際にトップページの内容を記述している箇所を任意の【id名※2】の<div>で括ってください。

<div id="top_page">
  {block:IndexPage}
----HTMLの中身は省略します----
  {/block:IndexPage}
</div>

その下に「カテゴリー別のURLを開いているときは【id名※2】の中身を非表示にする」という<script>～</script>を記述します。

<script>
  $(function(){
  if(document.URL.match(/categories/)) {
  document.getElementById("【id名※2】").style.display = "none";
  }});
</script>

まとめ

BASEはフリーページの作成ができず、既存のページを利用してのカスタマイズになるので、ちょっとややこしいですが・・

JavaScriptを使うことで、多少は理想のデザインに近付けることができます！

当ブログは、BASEのカスタマイズ方法を紹介していますが、直接のご依頼も受け付けています♪

こういうデザインにしたい！

試してみたけどできなかった・・

などの簡単な修正でしたらワンコインから受け付けていますので、TwitterのDMかお問い合わせフォームよりお気軽にご連絡ください＾＾

ちょっとややこしいですが、やってみてください〜

自分好みのサイトを作っちゃいましょ！

とりとん

最後まで読んでいただきありがとうございました！

＼ぽちっと応援お願いします♪ ／