もっと詳しく

『カートに入れる』ボタンを自作したい

オリジナルの『カートに入れる』ボタンを作成したいときに調べたときのことをメモ。

対象バージョンは4.1.1

参考ページ

ここにあったソースをちょっと改造

上記ページにあった参考のソースのままではなぜか、{{ product_class_id }}を取得することができなかったので、{{ form.ProductClass.vars.value }}に変更したら取得できました。このコードを商品ページのテンプレート（/app/template/default/Product/detail.twig）に置いてテストしてみたところ、ちゃんとカートに入れることができました。

<div class="好きな名前">
  <form name="form{{ Product.id }}" id="productForm{{ Product.id }}" action="{{ url('product_add_cart', {id:Product.id}) }}" method="post">
    <div class="好きな名前">
      <div class="好きな名前"><span>数量</span>
        <input type="number" id="quantity{{ Product.id }}" name="quantity" required="required" min="1" maxlength="9" class="test5" value="1">
      </div>
    </div>
    <input type="hidden" id="product_id{{ Product.id }}" name="product_id" value="{{ Product.id }}">
    <input type="hidden" id="ProductClass{{ Product.id }}" name="ProductClass" value="{{ form.ProductClass.vars.value }}">
    <!--<input type="hidden" id="ProductClass{{ Product.id }}" name="ProductClass" value="{{ product_class_id }}">-->
    <input type="hidden" id="_token{{ Product.id }}" name="_token" value="{{ csrf_token('Eccube\\Form\\Type\\AddCartType') }}" />
  </form>
  <div class="ec-productRole__btn">
    <button class="ec-blockBtn--action add-cart" data-cartid="{{ Product.id }}" form="productForm{{ Product.id }}" type="submit"> 購入する </button>
  </div>
</div>

カートに入れるために必要な情報

カートに入れるためには「数量、商品ID、クラスID、トークン」の4つが揃っていないとエラーになるようです。

<input type="number" id="quantity{{ Product.id }}" name="quantity" required="required" min="1" maxlength="9" class="test5" value="1">
<input type="hidden" id="product_id" name="product_id" value="{{ Product.id }}">
<input type="hidden" id="ProductClass" name="ProductClass" value="{{ product_class_id }}">
<input type="hidden" id="_token" name="_token" value="{{ csrf_token('Eccube\\Form\\Type\\AddCartType') }}" />

トークンの部分は以下のコードでもいいみたいです。

<input type="hidden" id="_token" name="_token" value="{{ form._token.vars.value }}" />

純正コードの控え

<form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  {% if Product.stock_find %}
  <div class="ec-productRole__actions"> {% if form.classcategory_id1 is defined %}
    <div class="ec-select"> {{ form_widget(form.classcategory_id1) }}
      {{ form_errors(form.classcategory_id1) }} </div>
    {% if form.classcategory_id2 is defined %}
    <div class="ec-select"> {{ form_widget(form.classcategory_id2) }}
      {{ form_errors(form.classcategory_id2) }} </div>
    {% endif %}
    {% endif %}
    <div class="ec-numberInput"><span>{{ '数量'|trans }}</span>
 {{ form_widget(form.quantity) }}
      {{ form_errors(form.quantity) }} </div>
  </div>
  <div class="ec-productRole__btn">
    <button type="submit" class="ec-blockBtn--action add-cart"> {{ 'カートに入れる'|trans }} </button>
  </div>
  {% else %}
  <div class="ec-productRole__btn">
    <button type="button" class="ec-blockBtn--action" disabled="disabled"> {{ 'ただいま品切れ中です。'|trans }} </button>
  </div>
  {% endif %}
  
  {{ form_rest(form) }}
</form>