category

会員サイトでユーザーがエントリを作成したり画像をアップできるページを用意する #craftcms

2020-05-02

Craft CMS で会員制サイトのサンプルを作って、そこでユーザーが自分でエントリ作ったりできるのを試してみる。

フロントエンド（テンプレート）側で簡単にできて楽チン。

自作のフォームからエントリを作成する

エントリを作るところとかはドキュメントを参考にすればサクッとできる。

Entry Form | Craft 3 Documentation
https://docs.craftcms.com/v3/d...

最初 GraphQL でやろうかと思ったけど、Craft CMS のデフォルト機能で問題なくいけた。

<form method="post" accept-charset="UTF-8" enctype="multipart/form-data">
    {{ csrfInput() }}
    {{ actionInput('entries/save-entry') }}
    {{ redirectInput('mypage/product') }}
    {{ 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>

name を name="fields[productDescription]" のように作ったフィールドのハンドルにしておく。

画像をアップロードするフィールドを用意する

画像をアップする時は、 form の enctype を設定しておく必要がある。

Assets Fields | Craft 3 Documentation
https://docs.craftcms.com/v3/a...

name は他のフィールドと同様な感じに設定で問題ない。

複数アップロードできるようにするなら multiple 属性をつけた上で、 name="fields[productPicture][]" のように [] を追加する。

<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>

これでこんな感じのページからエントリの作成＆アップロードができる。

エントリが作成された。