2020-05-04
Craft CMS でマーケットプレイス的なサイトのプロトタイプを作ってみる。
会員登録ができて、ユーザーが商品を登録し、ユーザーが商品を購入する、みたいなのをイメージして。
ユーザー登録とかその辺は以前に作ってあったのだけど、また別の時に振り返る。
完全に作りきるとか、このままリリースってレベルではなくて、それはちゃんとプロジェクトとしてやる時に精度をあげつつ、とりあえず大枠を通してやってみようという感じで。
あたりを。
セクションの構成としては「商品（ product ）」「注文状況（ order ）」。
エントリを追加するのは Craft CMS のドキュメントにある方法で問題なく行える。
Entry Form | Craft 3 Documentation
https://docs.craftcms.com/v3/d...
ここにあるように作る。画像の登録は先日のエントリにある通り。
画像を削除する方法とかも考えておいた方がよさそう。
コードとしてはこんな感じでたとえば addproduct.twig とかにしておく。
{% if currentUser.isInGroup('owner') %} // ユーザーグループとかで制御かけるなら分岐を入れておく
<h2 class="h2">アイテム管理</h1>
{% macro errorList(errors) %} // エラーの対応
{% if errors %}
<ul class="errors">
{% for error in errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
{% endmacro %}
<form method="post" accept-charset="UTF-8" enctype="multipart/form-data"> // 画像アップするので変更しておく
{{ csrfInput() }}
{{ actionInput('entries/save-entry') }} // エントリを作成する時の投げ先
{{ redirectInput('mypage/product') }} // エントリが作成された後のリダイレクト先のURLを指定
{{ hiddenInput('sectionId', '1') }} // エントリを作成するセクションを指定
{{ hiddenInput('enabled', '1') }} // 作成するエントリのステータスを指定
<div class="form-group">
<label for="title" class="col-form-label">商品名</label>
<input id="title" type="text" name="title"
{%- if entry is defined %} value="{{ entry.title }}"{% endif -%} class="form-control mx-2">
{% if entry is defined %}
{{ _self.errorList(entry.getErrors('title')) }}
{% endif %}
</div>
<div class="form-group">
<label for="productDescription" class="col-form-label">商品説明</label>
<textarea id="productDescription" name="fields[productDescription]" class="form-control mx-2"> // name は fields[ハンドル名] になる
{%- if entry is defined %}{{ entry.productDescription }}{% endif -%}
</textarea>
{% if entry is defined %}
{{ _self.errorList(entry.getErrors('productDescription')) }}
{% endif %}
</div>
<div class="form-group">
<label for="productPrice" class="col-form-label">料金</label>
<input type="number" id="productPrice" name="fields[productPrice]" {%- if entry is defined %} value="{{ entry.productPrice }}"{% endif -%} class="form-control mx-2">
{% if entry is defined %}
{{ _self.errorList(entry.getErrors('productPrice')) }}
{% endif %}
</div>
<div class="form-group">
<label for="productPicture" class="col-form-label">商品写真</label>
<div class="row">
<div class="col-md-9">
<input id="photo" type="file" name="fields[productPicture][]" multiple accept="image/png,image/jpeg">
</div>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit">上記の内容で商品を登録</button>
</form>
{% endif %}写真を登録するときのアップ先が今はCMSの設定として asset/product/{user.id} になってる。
商品ごとに分けてもよかったのだけど、この処理の時点でエントリIDが判明していないので一旦はユーザーごとに、ということで。
登録した商品情報（エントリ）を編集することがあると思うので、そこを考える。
だいたいは商品登録のテンプレートと同じになる。
とりあえず /editproduct?id=hoge みたいなURLで編集ページへ遷移してくる想定で考える。
editproduct.twig の先頭でエントリIDを取得しておく。
その上でエントリの情報を entry にセットする。
{% set eid = craft.request.getParam('id') %}
{% if eid is defined %}
{% set entry = craft.entries().id(eid).one() %}
{% endif %}編集する内容をあらかじめvalueに設定しておく。
<div class="form-group">
<label for="title" class="col-form-label">商品名</label>
<input id="title" type="text" name="title"
{%- if entry is defined %} value="{{ entry.title }}"{% endif -%} class="form-control mx-2">
{% if entry is defined %}
{{ _self.errorList(entry.getErrors('title')) }}
{% endif %}
</div>
<div class="form-group">
<label for="productDescription" class="col-form-label">商品説明</label>
<textarea id="productDescription" name="fields[productDescription]" class="form-control mx-2">
{%- if entry is defined %}{{ entry.productDescription }}{% endif -%}
</textarea>
{% if entry is defined %}
{{ _self.errorList(entry.getErrors('productDescription')) }}
{% endif %}
</div>画像を削除するだけのところを考える必要がある。一旦後回し。
あとはエントリのアップデートなので
{{ hiddenInput('entryId', eid) }}を設定するのを忘れないようにする。
これで商品の登録、編集が可能になる。
特にプラグインとかは不要でテンプレートだけで作れる。
GraphQLの Mutation とかも考えなくてよかった。
なんかこの辺、難しく考え過ぎてた気がするなー