カートメモ（備考欄）にデフォルトで入れた文言が２回繰り返し表示されるエラー

e-charity · ‎10-27-2024

shopifyテーマのDebutをベースにしておりますが、

カートメモ（備考欄）にデフォルトで文言を入れ、注文管理画面のメモ欄にも表示される様にしております。
ここでは例として「★お届け希望日を入力してください」ということにします。

（placeholderでは文言が消えるので、下記の方法で直接記入）

cart-template.liquid

<textarea name="note" rows="4" id="CartSpecialInstructions" class="cart-note__input" data-cart-notes>お届け希望日を入力してください{{ cart.note }}</textarea>

この状態で問題なくカート画面、注文管理のメモ欄に表示される場合と、

カート画面にも注文管理のメモ欄にも

「★お届け希望日を入力してください★お届け希望日を入力してください」

と２回繰り返し表示されるケースがあります。（店舗側、ユーザー側ともに）

同一のパソコンで、アカウントを変えてクロームブラウザを２つ開いた際に、

片方だけ２回繰り返し表示されているケースもありました。

また、liquid上で「★お届け希望日を入力せよ！！」と変更したとした場合、

変更直後には実際のカートメモに

「★お届け希望日を入力せよ！！★お届け希望日を入力してください」となり、

後半部分の表示が後追いで更新されて

「★お届け希望日を入力せよ！！★お届け希望日を入力せよ！！」となります。

キャッシュの問題かと思って悩んでるうちに自分のPC/スマホでは同事象が発生しなくなりましたが、

未だにユーザーからの実際の注文でダブり表示されるケースがあります。

改善出来る方法が分かる方おられましたら教えて頂きたいです。

Jizo_Inagaki · ‎11-01-2024

恐らく手法とコードの理解に原因があると思います。

前提として記載されているコードの基本的な動作は以下になります。

上記を踏まえ、カートページからチェックアウトページへ進んでから戻るなどの操作を行った場合は以下のようになります。

チェックアウトに移動するとcart.noteに「お届け希望日を入力してください」が保存される
チェックアウトから「カートページに戻った後にリロード」や「別ページに移動してからカートページに戻る」と「お届け希望日を入力してください{{ cart.note }}」の{{ cart.note }}に保存された「お届け希望日を入力してください」が出力される

上記の結果、入力欄には「お届け希望日を入力してくださいお届け希望日を入力してください」と出力されます。

これはエラーではなく書かれたコードに従った正常な動作です。

■対応策の検討

前述の仮説が正しい場合、以下などの方法が考えられると思います。