FROM CACHE - jp_header

テーマdawnの備考欄追加方法

解決済

テーマdawnの備考欄追加方法

4seasons-
訪問者
3 0 0

こんにちは、プログラミング初心者です。

dawnというテーマでECサイトを構築しています。

商品ページと決済ページに連動している

「テーマ設定」→ 「カート」→ 「カートメモ」という設定をしようと思いましたが

そもそもカートの項目が無く設定ができませんでした。

 

直接UI Element Generatorでコードを作成したコードを

main-cart-itemsやmain-cart-footer.に挿入しようとおもいましたが

どちらにも</form>が無くどこに入れればよいかわかりません。

 

商品ページと決済画面(カート)が連動した備考欄の追加方法を

サポート頂けないでしょうか。

よろしくお願いします。

1 件の受理された解決策
Qcoltd
Shopify Partner
1058 435 427

成功

@4seasons-

 

先にご連絡させていただきました、Dawnの管理画面はバージョン12.0.0を基にご説明させて頂いておりましたので、バージョンが古い場合対象箇所が異なっている場合があります。

 

また、テンプレートにコードを追加することでも対応は可能ですが、こちらもテーマのバージョンが異なっている場合、設置場所が異なることがありますのでご了承ください。

 

Dawnバージョン12.0.0を基にした、テンプレートにメモ欄を表示するためのコード追加方法

 

1.管理画面 > オンラインシップ > 「・・・」をクリックし、コード編集をクリック

20231207_img01.png

2.検索窓に『main-cart-items』を入力し、main-cart-items.liqyuidをクリック

20231207_img02.png

3.448行目と449行目の下記コードを、

20231207_img03.png

      </p>
    </form>

下記コードに変更。

      </p>
      <div>
        <style>#cart-memo-title{margin-bottom:10px;} #cart-memo {width:50%; height:120px; padding:10px; font-size:14px;}</style>
        <p id='cart-memo-title'>注文に関する備考欄</p>
        <textarea id="cart-memo" name="attributes[CartMemo]" placeholder="ご質問等こちらのご記載ください。" class="cart-textarea">{{ cart.attributes["CartMemo"] }}</textarea>
      </div>
    </form>

20231207_img04.png

 

以上でDawnのバージョン12.0.0であれば、カート画面下記部分に表示されます。

20231207_img05.png

入力された内容は管理画面の赤枠部分に表示されます。

20231207_img06.png

 

ご参考まで。

(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

4件の返信4

Qcoltd
Shopify Partner
1058 435 427

@4seasons-

ご質問いただいている、カート画面でカートメモを表示したい件ですが、以下手順で表示が可能かと思います。

 

  1. 管理画面 > オンラインストア > カスタマイズをクリック
  2. 画面左側の歯車マークをクリック
  3. 左側メニューのカートを選択
  4. 「カートメモを有効にする」にチェックを入れて右上の保存するボタンをクリック

以上で下記のようにカート画面で『注文に関する特別な指示・備考』欄が表示されます。

20231206_img11.png

 

ご参考まで。

(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
4seasons-
訪問者
3 0 0
小坂様

お世話になっております。
ご回答頂きありがとうございます。

管理画面 > オンラインストア > カスタマイズをクリック 画面左側の歯車マークをクリック 左側メニューのカートを選択
→左側メニューにそもそもカートという項目がない為、こちらから進めないでいます。 何か他の方法はありますか? よろしくお願いします。

Qcoltd
Shopify Partner
1058 435 427

成功

@4seasons-

 

先にご連絡させていただきました、Dawnの管理画面はバージョン12.0.0を基にご説明させて頂いておりましたので、バージョンが古い場合対象箇所が異なっている場合があります。

 

また、テンプレートにコードを追加することでも対応は可能ですが、こちらもテーマのバージョンが異なっている場合、設置場所が異なることがありますのでご了承ください。

 

Dawnバージョン12.0.0を基にした、テンプレートにメモ欄を表示するためのコード追加方法

 

1.管理画面 > オンラインシップ > 「・・・」をクリックし、コード編集をクリック

20231207_img01.png

2.検索窓に『main-cart-items』を入力し、main-cart-items.liqyuidをクリック

20231207_img02.png

3.448行目と449行目の下記コードを、

20231207_img03.png

      </p>
    </form>

下記コードに変更。

      </p>
      <div>
        <style>#cart-memo-title{margin-bottom:10px;} #cart-memo {width:50%; height:120px; padding:10px; font-size:14px;}</style>
        <p id='cart-memo-title'>注文に関する備考欄</p>
        <textarea id="cart-memo" name="attributes[CartMemo]" placeholder="ご質問等こちらのご記載ください。" class="cart-textarea">{{ cart.attributes["CartMemo"] }}</textarea>
      </div>
    </form>

20231207_img04.png

 

以上でDawnのバージョン12.0.0であれば、カート画面下記部分に表示されます。

20231207_img05.png

入力された内容は管理画面の赤枠部分に表示されます。

20231207_img06.png

 

ご参考まで。

(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
4seasons-
訪問者
3 0 0

小坂様

 

バージョンをアップデートしたところ、
カートの項目より、備考欄追加できました。

サポートいただきありがとうございました!