
先日、ネットショップ無料作成サービスBASEでECサイトを開設する案件で、デザインのカスタマイズを担当しました。
既存のテーマでは、トップページに商品がずらーっと並んでいるのですが、
今回はページ構成を、「トップページ・会社概要・商品一覧・お問い合わせ」という感じにしたかったので、商品一覧をトップページとは別に表示するようにコーディングしました。
その方法を書いていこうと思います。

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

JavaScriptで表示する内容を指定すればできるよ!
HTML自体のカスタマイズは、BASEのApps「HTML編集(無料)」をインストールすることで、簡単にHTMLを編集することができます。
しかし、現状HTMLを編集できるページは、
の3ページのみです。
さらに、「HOME(トップページ)」からカテゴリー分けしたカテゴリーの個別ページに遷移できるようになっていますが、
そのカテゴリー毎の個別ページ下部には、「HOME(トップページ)」の内容が表示されてしまうので、単純に商品のみのページにはなりません。

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

カテゴリーの作成

コーディング前に2つ準備が必要なので、説明していきます!
カテゴリー追加
BASEのApps「カテゴリ管理(無料)」をインストールして、カテゴリーを作成していきます。
「+大カテゴリー追加」から追加していきますが、今回は一番最初に「all item」という全商品を登録するカテゴリーを作成しておきます。
⇒今回作成する商品一覧ページは、この全商品を登録するカテゴリー(「all item」)を表示したページとなります。
あとは、任意のカテゴリーを作成すればOK!
商品登録
先程のカテゴリ管理をインストールした状態で商品登録を行うと、下図のようにカテゴリ選択ができるようになります。
商品のカテゴリーを登録する際は、「all item(全商品)」と「カテゴリー❶(任意のカテゴリー)」の2つを選択して両方で商品が表示されるようにしておきます。

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

❶トップページで商品一覧を非表示
❷商品一覧ページ(カテゴリー毎の個別ページ)の下部でトップページの内容を非表示
の2つを記述します。
トップページで商品一覧を非表示
<!--トップページで商品一覧を非表示--> <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>
商品一覧ページの下部でトップページの内容を非表示
<!--商品一覧ページの下部でトップページの内容を非表示--> <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かお問い合わせフォームよりお気軽にご連絡ください^^

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

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