futureshopで新規サイトを構築する、つまりはテーマを開発する手順を紹介します。
この記事は2024年7月の記事です。
参考サイト
・futureshop公式マニュアル
https://www.future-shop.jp/manual/
・futureshop公式faq
https://faq.future-shop.jp/hc/ja
・構築方法
https://b-risk.jp/blog/2021/07/use-commerce/
・ファイルのアップロード
https://www.future-shop.jp/manual/builder/item.html
・コマースクリエイターのパーツの種類
https://www.future-shop.jp/manual/builder/parts.html
・置換文字
https://www.future-shop.jp/manual/glossary/replace-letter.html
知識
サーバーを切り替える前にサイトを閲覧する方法
参考サイト
下記コードをhostsファイルに記載することで、futureshopのサイトを閲覧することができます。
219.99.174.101 契約ドメイン
219.99.174.101 www.契約ドメインSSL証明書が発行/更新されていない場合は、httpsでのサイト閲覧ができないため、プライバシーエラーの画面が表示されます。
ブラウザでアクセスすると、上記のような画面が閲覧できるので、「詳細を表示」をクリックて、ドメインに進むをクリックすると、閲覧することができます。
権限
構築するに辺り必要な権限は商品登録関係の権限です。
添付の赤枠の権限がないと、商品登録やカテゴリー登録ができないので、先に権限を確認しておきましょう。
お問い合わせ
WEBサイトには必須のお問い合わせもお申し込みが必要なので、最初に申し込みしておくことをお勧めします。
https://fs-form.future-shop.jp/apply/form_mailer.html
FTP
FTPは「CMSサーバー（VPS）オプション」を契約している店舗のみが使用できるのですが、独自ドメインを使うためのオプションなので、大体のクライアントは契約すると思います。
https://manual.future-shop.jp/adminSystem/ftpAccount.html
FTPアカウントの作成は最上位権限のフューチャーショップのアカウントでしか作成できないので、最初の段階で依頼しておくことをお勧めします。
ファイルパスを絶対パス
画像やCSS、JSなどのファイルパスは絶対パスです。
下記参照
https://manual.future-shop.jp/builder/item.html
全商品一覧
futureshopには全商品一覧ページが無いため、検索結果（条件なし）の一覧で全商品を見せることができます。
下記URL
https://www.buttery.jp/p/search
PHPのようなことはできない
基本的にはHTMLしか使えないと思ってください。
ページによって条件分岐させたりすることはできないです。
ログイン状態や会員ランクによっては条件分岐が可能。
ページのタイトルを取得したいなどは、下記の置換文字で対応する
https://www.future-shop.jp/manual/glossary/replace-letter.html
Webスキミング防止機能【外部JSの削除】
マイページやカート、ログイン関係のシステムページではWEBスキミング防止のために、外部jsが自動的に削除されます。
https://manual.future-shop.jp/guideContents/skimmingPrevention.html
テーマの構築手順
１．テーマの作成
管理画面の「commerce creator→テーマ一覧」で現在使用しているテーマとインストールしているテーマを見ることができます。
適用されているテーマはスタートアップテーマで、スマホとPCで分かれているテーマです。
オリジナルデザインを作成するにはcssが沢山使用されているので、使いずらいです。
そのため、スケルトンテーマを複製して、オリジナルのテーマを作成します。
そして、そのテーマを適用するために、一番下の「デバイス設定を変更する」をクリックします。
スタートアップテーマではスマホとPCでテーマが分かられていましたが、そんなことをする必要はないので、1つのテーマでスマホとPCを完結させます。
２．各ページの作成
テーマでは下記項目を変更することができます。
・カラー・サイズ
・ボタン（ボタンのテキストの変更）
・商品マーク（商品のタグの設定（画像やテキスト（レディースやメンズなど）））
・レイアウト（各ページのデザインの変更）
・オリジナルCSS（cssを追加）
・テーマ設定（テーマのメッセージなど）
色々と設定することができますが、レイアウト以外ほとんど使い事はないです。
たまにボタンと商品マークを使用するぐらいです。
上記はレイアウトですが、ECサイトで必要なページがすべて揃っています。
例えば、添付はトップページの編集画面です。
赤枠がトップページの要素（Body）です。
オレンジ枠でHeadタグの要素を変更することもできます。
トップページに入れたいデザイン（要素）を青枠から持ってきます。
フューチャーショップにはパーツという概念があり、下記が参考です。
https://manual.future-shop.jp/builder/parts.html
青枠には沢山のパーツがあり、各ページによって、必須のパーツもあります。
※大体のページで「エラー表示」というパーツが必須のパーツになります。
このパーツ自体を独自に作成することもできます。
「commerce creator→パーツ一覧」を見てます。
レイアウトにあった青枠のパーツはここで確認することができます。
「パーツを追加する」をクリックします。
すると、パーツを選択することができます。
今回はトップページのコンテンツエリアをフリーページで作成してみます。
パーツ名と置換文字が必須項目です。
置換文字は後から変更できないので、命名規則は気を付けましょう。
先ほどのレイアウトに戻ると、「トップページ（コンテント）」がありますので、反映します。
ちなみに枠を追加する場合は、「レイアウトパーツを追加する」をクリックすると、divタグやsectionタグを設置することができます。
