ECCUBE on qwerty.work

【EC-CUBE】会員登録機能を停めてゲスト購入のみにする方法

Tue, 22 Feb 2022 11:14:53 +0900

基本リピーター客はいないので非会員のゲスト購入のみにしたいとき、購入手続き時に会員登録の画面を出さないようにする必要がありますが、その方法のメモ。

https://b3s.be-s.co.jp/webdtp/ec-cube/1266/ https://b3s.be-s.co.jp/webdtp/ec-cube/1266/

【EC-CUBE】関連商品プラグインで表示される商品一覧をカスタマイズしたいとき

Fri, 18 Feb 2022 14:55:37 +0900

デフォルトのソース

何もいじっていなければ、テンプレートは以下のようになっているはずです。これをカスタマイズします。

/app/Plugin/RelatedProduct4/Resource/template/front/related_product.twig

<script>
    $(function () {
         $('#RelatedProduct-product_area').appendTo($('.ec-layoutRole__main, .ec-layoutRole__mainWithColumn, .ec-layoutRole__mainBetweenColumn'));
     });
</script>
<div id="RelatedProduct-product_area" class="ec-shelfRole">
    <ul class="ec-shelfGrid">
        {% for RelatedProduct in Product.RelatedProducts %}
            {% set ChildProduct = RelatedProduct.ChildProduct %}
            {% if ChildProduct.Status.id == constant("Eccube\\Entity\\Master\\ProductStatus::DISPLAY_SHOW") %}
                  <li class="ec-shelfGrid__item">
                    <a href="{{ url('product_detail', {id : ChildProduct.id}) }}">
                        <p class="ec-shelfGrid__item-image">
                            <img src="{{ asset(RelatedProduct.ChildProduct.main_list_image|no_image_product, 'save_image') }}">
                        </p>
                        <p>{{ RelatedProduct.ChildProduct.name }}</p>
                         <p>
                              {% if RelatedProduct.ChildProduct.hasProductClass %}
                                  {% if RelatedProduct.ChildProduct.getPrice02Min == RelatedProduct.ChildProduct.getPrice02Max %}
                                      {{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }}
                                  {% else %}
                                     {{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }} ～ {{ RelatedProduct.ChildProduct.getPrice02IncTaxMax|price }}
                                  {% endif %}
                              {% else %}
                                  {{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }}
                              {% endif %}
                          </p>
                      </a>
                      <span>{{ RelatedProduct.content|raw }}</span>
                  </li>
              {% endif %}
         {% endfor %}
      </ul>
  </div>

related-product-plugin/related_product.twig at 4.0 · EC-CUBE/related-product-plugin · GitHub

カスタマイズ後はEC-CUBEの管理画面にログインして以下の画面で「登録」ボタンを押さないとページに反映されないので注意してください。

[コンテンツ管理]-[ページ管理]-[商品詳細ページ]

カスタマイズに使った変数

  変数
  内容




  {{ RelatedProduct.ChildProduct.id }}

  {{ ChildProduct.id }}
  商品ID


  {{ RelatedProduct.ChildProduct.code_min }
  商品コード

  {{ RelatedProduct.ChildProduct.name }}
  商品名


  {% for hoge in ChildProduct.ProductClasses %}

  　{{hoge.id }}

  {% endfor %}
  商品クラスID

カートに入れるために必要なProductClassのIDが取得できずに困りましたが、以下のページが参考になりました。``文を使って取得することが必要でした。

https://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=17413&forum=5 https://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=17413&forum=5

{% for hoge in Product.ProductClasses %}
　{{hoge.id }}
{% endfor %}

デバッグしたいとき

Product.idなど、Productに関して取得できる変数や値の内容を知りたいということがありました。

.envファイルを開いてデバッグモードにして、商品詳細ページのテンプレート（detail.twig）に{{dump(Product)}} を追記して、商品詳細ページをブラウザで表示すると変数や配列に入っている値を確認できます。

デバッグモードに変更する方法と追記するコード

.envファイルの変更

#本番モード
APP_ENV=prod
APP_DEBUG=0
 ↓
#デバッグモード
APP_ENV=dev
APP_DEBUG=1

テンプレートに追記するコード

Prodect関連の配列や値を確認したい場合。以下のコードをTWIGテンプレートに追記すると配列の内容が画面上に表示されます。

{{dump(Product)}}

参考ページ

https://homupedia.com/eccube4-template-data.html https://homupedia.com/eccube4-template-data.html

作成したソース

<script>
    $(function () {
        $('#RelatedProduct-product_area').appendTo($('.ec-layoutRole__main, .ec-layoutRole__mainWithColumn, .ec-layoutRole__mainBetweenColumn'));
    });
</script>
<div id="RelatedProduct-product_area" class="ec-shelfRole">
<h3>関連商品</h3>
<table class="table table-striped table-hover rp-list-table">
<thead>
    <tr>
        <td>商品コード</td><td>商品名</td><td>金額<small>（税込）</small></td><td>数量</td><td>カート</td>
    </tr>
</thead>
<tbody>
{% for RelatedProduct in Product.RelatedProducts %}
{% set ChildProduct = RelatedProduct.ChildProduct %}
{% if ChildProduct.Status.id == constant("Eccube\\Entity\\Master\\ProductStatus::DISPLAY_SHOW") %}
    <tr class="ec-productRole__actions test">
    <form name="form{{ ChildProduct.id }}" id="productForm{{ ChildProduct.id }}" action="{{ url('product_add_cart', {id:ChildProduct.id}) }}" method="post">
        <td><a href="{{ url('product_detail', {id : ChildProduct.id}) }}">{{ RelatedProduct.ChildProduct.code_min }}</a></td>
        <td>{{ RelatedProduct.ChildProduct.name }}{% for ChildProductClass in ChildProduct.ProductClasses %}&nbsp;<small>（デバッグ用ClassID:{{ChildProductClass.id }}）</small>{% endfor %}</td>
        <td>
            {% if RelatedProduct.ChildProduct.hasProductClass %}
                {% if RelatedProduct.ChildProduct.getPrice02Min == RelatedProduct.ChildProduct.getPrice02Max %}
                    {{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }}
                {% else %}
                    {{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }} ～ {{ RelatedProduct.ChildProduct.getPrice02IncTaxMax|price }}
                {% endif %}
            {% else %}
                {{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }}
            {% endif %}
        </td>
        <td class="ec-numberInput"><input type="number" id="quantity{{ ChildProduct.id }}" name="quantity" required="required" min="1" maxlength="9" class="quantity form-control" value="1"></td>
        <td><div class="ec-productRole__btn">
            <button class="ec-blockBtn--action add-cart" data-cartid="{{ ChildProduct.id }}" form="productForm{{ ChildProduct.id }}" type="submit">{{ 'カートに入れる'|trans }}</button>
        </div></td>
    <!-- エラーになるので非表示 <input type="hidden" id="mode" name="mode" value="add_cart" />-->
    <input type="hidden" id="product_id{{ ChildProduct.id }}" name="product_id" value="{{ ChildProduct.id }}">
    {% for ChildProductClass in ChildProduct.ProductClasses %}
    <input type="hidden" id="ProductClass{{ ChildProduct.id }}" name="ProductClass" value="{{ChildProductClass.id }}">
    {% endfor %}
    <input type="hidden" id="_token{{ ChildProduct.id }}" name="_token" value="{{ csrf_token('Eccube\\Form\\Type\\AddCartType') }}" />
    </form>
    </tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</div>

商品詳細ページで使用するときの注意事項

form id=“form1"があるとうまく動かない

商品詳細ページにオリジナルのカートボタンを設置する際は、商品詳細ページのテンプレート（detail.twig）にあるメイン商品のカードボタン（``）をコメントアウトするなどして、無効または削除しないと関連商品プラグインのテンプレート（related_product.twig）に追加設置したカートボタンで商品がカートに入りませんでした。どうやらform1が優先されるみたいです。

モーダルがうまく動かないとき

「カートに入れる」ボタンを押したときに表示されていたモーダルウィンドウが表示されなくなってしまったときは、商品一覧のテンプレート（list.twig）を参考に商品詳細ページのテンプレート（detail.twig）にある以下の部分を変更したら動きました。これがモーダルウィンドウ（ec-modal）を発火させるトリガーの要素の指定みたいです。

$form = $('#form1');
 ↓
var $form = $(this).parents('.test').find('form');

この上あたりにある規格チェックや数量チェックの一部JSが邪魔してうまく修正できなかったので、そのチェック部分はコメントアウトしました。

その他参考ページ

https://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=flat&order=DESC&topic_id=23859&forum=11 https://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=flat&order=DESC&topic_id=23859&forum=11

【EC-CUBE】この好みの場所に『カートに入れる』ボタンを設置したいとき

Thu, 17 Feb 2022 17:16:29 +0900

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

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

対象バージョンは4.1.1

参考ページ

https://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=flat&topic_id=25215&forum=10 https://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=flat&topic_id=25215&forum=10

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

上記ページにあった参考のソースのままではなぜか、{{ 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>

【EC-CUBE4】商品詳細ページをカスタマイズしたいときのメモ

Wed, 16 Feb 2022 17:02:53 +0900

テンプレートの場所

管理画面からテンプレートを編集

[コンテンツ管理]-[ページ管理]-[商品詳細ページ]

テンプレートの場所

eccubeディレクトリ/app/template/default/Product/detail.twig
または
eccubeディレクトリ/src/Eccube/Resource/template/default/Product/detail.twig

【EC-CUBE】商品CSVアップロード時に「XX'」が存在していませんとなるとき

Mon, 31 Jan 2022 12:14:42 +0900

エクセルで作成したCSVアップロードでエラー

複数の『商品カテゴリID』と『タグID』のある商品CSVをエクセルで作成し、EC-CUBE4.1.1の管理画面からアップロードしようとしたところ、以下のようなエラーが出て、アップロードに失敗しました。

エラーが発生しました。2行目以降の登録処理はキャンセルされました。

[ERROR] 2行目のタグ(ID)「15"」が存在しません。

[ERROR] 2行目のタグ(ID)「“7」が存在しません。

[ERROR] 2行目の商品カテゴリ(ID)「33”」が存在しません。

[ERROR] 2行目の商品カテゴリ(ID)「“7」が存在しません。

原因

カテゴリIDやタグIDを複数指定する場合、"7,15"といった感じでダブクォーテーションで囲まないといけません。よって、エクセル上は"7,15"と表示されているのですが、CSVをメモ帳や他のテキストエディタで開くと"""7,15"""となっていました。

以下はエクセルでの入力画面。

メモ帳で開くと、ダブルクォーテーションが3つ連続していました。これがエラーの原因です。

恐らく、書式が「文字列」になっている部分は「カンマ」があるとCSVの列が崩れないよう、自動的にダブルクォーテーションが追加されるようになっているみたいですね。更にダブルクォーテーションがあると、エスケープの意味でダブルクォーテーションをダブルクォーテーションで囲うようになるんだと思います。

これを修正すると正常にアップロードできるようになります。

回避策

エクセルで編集する場合、『商品カテゴリID』と『タグID』の列は書式を「文字列」にして「"」無しにすれば"7,15"のようにCSV出力できます。

メモ帳でCSVを開いてみると、エクセルではダブルクォーテーションを付けていないのに、ちゃんとダブルクォーテーションが一つ付いていました。

無事アップロード完了

CSVを修正してアップロードすれば、以下のように成功するはずです。

CSVファイルをアップロードしました。

[SUCCESS] 〇〇〇～〇〇〇行目を登録しました。

ECCUBE on qwerty.work

【EC-CUBE】会員登録機能を停めてゲスト購入のみにする方法

【EC-CUBE】関連商品プラグインで表示される商品一覧をカスタマイズしたいとき

関連商品のテンプレートTWIGファイルをカスタマイズしたい

テンプレートファイルの場所

商品詳細ページに表示される部分のテンプレート

管理画面用テンプレート

デフォルトのソース

カスタマイズに使った変数

デバッグしたいとき

デバッグモードに変更する方法と追記するコード

.envファイルの変更

テンプレートに追記するコード

参考ページ

作成したソース

商品詳細ページで使用するときの注意事項

form id=“form1"があるとうまく動かない

モーダルがうまく動かないとき

その他参考ページ

【EC-CUBE】この好みの場所に『カートに入れる』ボタンを設置したいとき

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

参考ページ

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

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

純正コードの控え

【EC-CUBE4】商品詳細ページをカスタマイズしたいときのメモ

テンプレートの場所

管理画面からテンプレートを編集

テンプレートの場所

【EC-CUBE】商品CSVアップロード時に「XX'」が存在していませんとなるとき

エクセルで作成したCSVアップロードでエラー

原因

回避策

無事アップロード完了