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

CMS

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

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

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

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


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

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

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

しかし、現状HTMLを編集できるページは、

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

3ページのみです。


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

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

⇧デフォルトではこんな感じでカテゴリーの個別ページに遷移できます!

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

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

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

DEMO

スポンサーリンク

カテゴリーの作成

コーディング前に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のカスタマイズ方法を紹介していますが、直接のご依頼も受け付けています♪

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

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

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

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

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

タイトルとURLをコピーしました