見出し画像

[Shopify]希望お届け日と時間帯を選択できる機能設置方法(後編)

こんにちは。@まりんです。

先日、カートページに配達希望日&時間帯を選択できる機能の設置方法についてご紹介しました。

今日は、その続きで、注文確定後に自動送信されるお客様宛の「注文確認メール」とショップオーナー側に送信される「新しい注文メール」にも、お客様ご希望配達日時を反映させる方法についてご紹介します。

また、Order Printerにも使えるのでぜひ♪

✔︎今日のゴール

▼お客様に届く注文完了通知

お届け

▼自分に届く注文通知

自分

✔︎挿入は簡単!それぞれのattributesを追記するだけ

前回、ダッシュボードの注文管理に反映させるために、以下のattributesを使用しました。

希望日:attributes["配達希望日"]
時間帯:attributes["時間帯"]

これを通知本文内に挿入するだけです!

Step1 お客様に届く「注文の確認」通知

❶ダッシュボード>設定>通知>注文の確認

注文確認

本文のお好きなところに以下を挿入

{% if attributes["配達希望日"] != '' %}
  {{ attributes["配達希望日"] }}
{% endif %}
{% if attributes["時間帯"] != '' %}
    {{ attributes["時間帯"] }}
{% endif %}

以上です!

今回、配送先住所の上に設置してみました。以下、コードです。

{% capture email_title %}ご購入いただきありがとうございました! {% endcapture %}
{% capture email_body %}
 {% if requires_shipping %}
 {% case delivery_method %}
     {% when 'pick-up' %}
       注文の受取の準備が整うと、メールが届きます。
     {% when 'local' %}
       {{ customer.first_name }}様、ご注文の品を配達する準備を行っております。
     {% else %}
       {{ customer.first_name }}様、ご注文いただき、誠にありがとうございます。注文の発送準備を行なっております。商品が発送されましたら、Eメールにてお知らせいたします。
   {% endcase %}
     {% if delivery_instructions != blank  %}
       <p><b>配達情報:</b> {{ delivery_instructions }}</p>
     {% endif %}
 {% endif %}
{% endcapture %}

<!DOCTYPE html>
<html lang="ja">
 <head>
 <title>{{ email_title }}</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta name="viewport" content="width=device-width">
 <link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
 <style>
   .button__cell { background: {{ shop.email_accent_color }}; }
   a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
 </style>
</head>

 <body>
   <table class="body">
     <tr>
       <td>
         <table class="header row">
 <tr>
   <td class="header__cell">
     <center>

       <table class="container">
         <tr>
           <td>

             <table class="row">
               <tr>
                 <td class="shop-name__cell">
                   {%- if shop.email_logo_url %}
                     <img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
                   {%- else %}
                     <h1 class="shop-name__text">
                       <a href="{{shop.url}}">{{ shop.name }}</a>
                     </h1>
                   {%- endif %}
                 </td>

                   <td class="order-number__cell">
                     <span class="order-number__text">
                       注文 {{ order_name }}
                     </span>
                   </td>
               </tr>
             </table>

           </td>
         </tr>
       </table>

     </center>
   </td>
 </tr>
</table>

         <table class="row content">
 <tr>
   <td class="content__cell">
     <center>
       <table class="container">
         <tr>
           <td>
             
           <h2>{{ email_title }}</h2>
           <p>{{ email_body }}</p>
           {% if order_status_url %}
             <table class="row actions">
 <tr>
   <td class="empty-line"> </td>
 </tr>
 <tr>
   <td class="actions__cell">
     <table class="button main-action-cell">
       <tr>
         <td class="button__cell"><a href="{{ order_status_url }}" class="button__text">注文を表示する</a></td>
       </tr>
     </table>
     {% if shop.url %}
   <table class="link secondary-action-cell">
     <tr>
       <td class="link__cell">または<a href="{{ shop.url }}">ショップにアクセスする</a></td>
     </tr>
   </table>
{% endif %}

   </td>
 </tr>
</table>

           {% else %}
             {% if shop.url %}
   <table class="row actions">
     <tr>
       <td class="actions__cell">
         <table class="button main-action-cell">
           <tr>
             <td class="button__cell"><a href="{{ shop.url }}" class="button__text">ショップにアクセスする</a></td>
           </tr>
         </table>
       </td>
     </tr>
   </table>
{% endif %}

           {% endif %}

           </td>
         </tr>
       </table>
     </center>
   </td>
 </tr>
</table>

         {% assign gift_card_line_item = line_items | where: "gift_card" %}
         {% if gift_card_line_item.first %}
           <table class="row section">
 <tr>
   <td class="section__cell">
     <center>
       <table class="container">
         <tr>
           <td>
             <h3>ギフトカード</h3>
           </td>
         </tr>
       </table>
       <table class="container">
         <tr>
           <td>
             
             <p> ギフトカードの個別のメールが届きます。</p>

           </td>
         </tr>
       </table>
     </center>
   </td>
 </tr>
</table>
         {% endif %}

         <table class="row section">
 <tr>
   <td class="section__cell">
     <center>
       <table class="container">
         <tr>
           <td>
             <h3>注文概要</h3>
           </td>
         </tr>
       </table>
       <table class="container">
         <tr>
           <td>
             
           
<table class="row">
 {% for line in subtotal_line_items %}
 <tr class="order-list__item">
   <td class="order-list__item__cell">
     <table>
       <td>
         {% if line.image %}
           <img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
         {% endif %}
       </td>
       <td class="order-list__product-description-cell">
         {% if line.product.title %}	
           {% assign line_title = line.product.title %}	
         {% else %}	
           {% assign line_title = line.title %}	
         {% endif %}

         {% if line.quantity < line.quantity %}
           {% capture line_display %} {{ line.quantity }} of {{ line.quantity }} {% endcapture %}
         {% else %}
           {% assign line_display = line.quantity  %}
         {% endif %}

         <span class="order-list__item-title">{{ line_title }} × {{ line_display }}</span><br/>

         {% if line.variant.title != 'Default Title' %}
           <span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
         {% endif %}

         {% if line.selling_plan_allocation %}
           <span class="order-list__item-variant">{{ line.selling_plan_allocation.selling_plan.name }}</span><br/>
         {% endif %}

         {% if line.refunded_quantity > 0 %}
           <span class="order-list__item-refunded">返金済み</span>
         {% endif %}

         {% if line.discount_allocations %}
           {% for discount_allocation in line.discount_allocations %}
             {% if discount_allocation.discount_application.target_selection != 'all' %}
               <span class="order-list__item-discount-allocation">
                 <img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
                 <span>
                   {{ discount_allocation.discount_application.title | upcase }}
                   (-{{ discount_allocation.amount | money }})
                 </span>
               </span>
             {% endif %}
           {% endfor %}
         {% endif %}
       </td>
         <td class="order-list__price-cell">
           {% if line.original_line_price != line.final_line_price %}
             <del class="order-list__item-original-price">{{ line.original_line_price | money }}</del>
           {% endif %}
           <p class="order-list__item-price">
             {% if line.final_line_price > 0 %}
               {{ line.final_line_price | money }}
             {% else %}
               無料
             {% endif %}
           </p>
         </td>
     </table>
   </td>
 </tr>{% endfor %}
</table>

           <table class="row subtotal-lines">
 <tr>
   <td class="subtotal-spacer"></td>
   <td>
     <table class="row subtotal-table">
       {% for discount_application in discount_applications %}
         {% if discount_application.target_selection == 'all' %}
           {% capture discount_title %}
             {% if discount_application.title %}
               {{ discount_application.title | upcase }}
             {% else %}
               ディスカウント
             {% endif %}
           {% endcapture %}
           
<tr class="subtotal-line">
 <td class="subtotal-line__title">
   <p>
     <span>ディスカウント</span>
       <span class="subtotal-line__discount">
         <img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
         <span class="subtotal-line__discount-title">{{ discount_title }}</span>
       </span>
   </p>
 </td>
 <td class="subtotal-line__value">
   <strong>-{{ discount_application.total_allocated_amount | money }}</strong>
 </td>
</tr>

         {% endif %}
       {% endfor %}

       
<tr class="subtotal-line">
 <td class="subtotal-line__title">
   <p>
     <span>小計</span>
   </p>
 </td>
 <td class="subtotal-line__value">
   <strong>{{ subtotal_price | money }}</strong>
 </td>
</tr>

       {% if delivery_method == 'pick-up' %}
         
<tr class="subtotal-line">
 <td class="subtotal-line__title">
   <p>
     <span>受取</span>
   </p>
 </td>
 <td class="subtotal-line__value">
   <strong>{{ shipping_price | money }}</strong>
 </td>
</tr>

       {% else %}
         
<tr class="subtotal-line">
 <td class="subtotal-line__title">
   <p>
     <span>配送</span>
   </p>
 </td>
 <td class="subtotal-line__value">
   <strong>{{ shipping_price | money }}</strong>
 </td>
</tr>

       {% endif %}

       {% if current_total_duties %}
         
<tr class="subtotal-line">
 <td class="subtotal-line__title">
   <p>
     <span>関税</span>
   </p>
 </td>
 <td class="subtotal-line__value">
   <strong>{{ current_total_duties | money }}</strong>
 </td>
</tr>

       {% endif %}

       
<tr class="subtotal-line">
 <td class="subtotal-line__title">
   <p>
     <span>税金合計</span>
   </p>
 </td>
 <td class="subtotal-line__value">
   <strong>{{ tax_price | money }}</strong>
 </td>
</tr>


       {% if total_tip and total_tip > 0 %}
         
<tr class="subtotal-line">
 <td class="subtotal-line__title">
   <p>
     <span>Tip</span>
   </p>
 </td>
 <td class="subtotal-line__value">
   <strong>{{ total_tip | money }}</strong>
 </td>
</tr>

       {% endif %}
     </table>
     <table class="row subtotal-table subtotal-table--total">
       
<tr class="subtotal-line">
 <td class="subtotal-line__title">
   <p>
     <span>合計</span>
   </p>
 </td>
 <td class="subtotal-line__value">
   <strong>{{ total_price | money_with_currency }}</strong>
 </td>
</tr>

     </table>

     {% if total_discounts > 0 %}
       <p class="total-discount">
         割引 <span class="total-discount--amount">{{ total_discounts | money }}</span>
       </p>
     {% endif %}

     {% assign transaction_size = 0 %}
     {% assign transaction_amount = 0 %}
     {% for transaction in transactions %}
       {% unless transaction.kind == "capture" or transaction.kind == "void" %}
         {% assign transaction_size = transaction_size | plus: 1 %}
         {% assign transaction_amount = transaction_amount | plus: transaction.amount %}
       {% endunless %}
     {% endfor %}

     {% if transaction_size > 1 or transaction_amount < total_price %}
       <table class="row subtotal-table">
         <tr><td colspan="2" class="subtotal-table__line"></td></tr>
         <tr><td colspan="2" class="subtotal-table__small-space"></td></tr>

         {% for transaction in transactions %}
           {% if transaction.status == "success" and transaction.kind == "authorization" or transaction.kind == "sale" %}
             {% if transaction.payment_details.credit_card_company %}
               {% capture transaction_name %}{{ transaction.payment_details.credit_card_company }} (カード番号下4桁: {{ transaction.payment_details.credit_card_last_four_digits }}){% endcapture %}
             {% else %}
               {% capture transaction_name %}{{ transaction.gateway_display_name }}{% endcapture %}
             {% endif %}

             
<tr class="subtotal-line">
 <td class="subtotal-line__title">
   <p>
     <span>{{transaction_name}}</span>
   </p>
 </td>
 <td class="subtotal-line__value">
   <strong>{{ transaction.amount | money }}</strong>
 </td>
</tr>

           {% endif %}
           {% if transaction.kind == 'refund' %}
             {% if transaction.payment_details.credit_card_company %}
               {% assign refund_method_title = transaction.payment_details.credit_card_company %}
             {% else %}
               {% assign refund_method_title = transaction.gateway %}
             {% endif %}

             
<tr class="subtotal-line">
 <td class="subtotal-line__title">
   <p>
     <span>返金</span>
       <br>
       <small>{{ refund_method_title | capitalize }}</small>
   </p>
 </td>
 <td class="subtotal-line__value">
   <strong>- {{ transaction.amount | money }}</strong>
 </td>
</tr>

           {% endif %}
         {% endfor %}
       </table>
     {% endif %}
   </td>
 </tr>
</table>


           </td>
         </tr>
       </table>
     </center>
   </td>
 </tr>
</table>


         <table class="row section">
 <tr>
   <td class="section__cell">
     <center>
       <table class="container">
         <tr>
           <td>
             <h3>お客様情報</h3>
           </td>
         </tr>
       </table>
       <table class="container">
         <tr>
           <td>
             
           <table class="row">
             <tr>
               {% if attributes["配達希望日"] != '' %}
               <td class="customer-info__item">
                 <h4>お届け希望日</h4>
                 {{ attributes["配達希望日"] }}
               </td>
               {% endif %}
               
             </tr>
           </table>
<table class="row">
             <tr>
               {% if attributes["時間帯"] != '' %}
               <td class="customer-info__item">
                 <h4>時間帯</h4>
                 {{ attributes["時間帯"] }}
               </td>
               {% endif %}
               
             </tr>
           </table>
           <table class="row">
             <tr>
               {% if requires_shipping and shipping_address %}
               <td class="customer-info__item">
                 <h4>配送先住所</h4>
                 {{ shipping_address | format_address }}
               </td>
               {% endif %}
               {% if billing_address %}
               <td class="customer-info__item">
                 <h4>請求先住所</h4>
                 {{ billing_address | format_address }}
               </td>
               {% endif %}
             </tr>
           </table>
           <table class="row">
             <tr>
               {% if requires_shipping and shipping_address %}
               <td class="customer-info__item">
                 <h4>配送方法</h4>
                 <p>{{ shipping_method.title }}</p>
               </td>
               {% endif %}
               {% assign transaction_count = transactions | size %}
               {% if transaction_count > 0 %}
               <td class="customer-info__item">
                 <h4>決済方法</h4>
                 {% for transaction in transactions %}
                   {% if transaction.status == "success" or transaction.status == "pending" %}
                     {% if transaction.kind == "authorization" or transaction.kind == "sale" %}
                       {% if transaction.payment_details.credit_card_company %}
                           <p class="customer-info__item-content">
                             <img src="{{ transaction.payment_details.credit_card_company | payment_icon_png_url  }}" class="customer-info__item-credit" height="24" alt="{{ transaction.payment_details.credit_card_company }}">
                             <span>{{ transaction.payment_details.credit_card_last_four_digits }}で終わる — <strong>{{ transaction.amount | money }}</strong></span>
                           </p>
                         {% elsif transaction.gateway_display_name == "Gift card" %}
                         <p class="customer-info__item-content">
                           <img src="{{ transaction.gateway_display_name | downcase | replace: ' ', '-'  | payment_type_img_url }}" class="customer-info__item-credit" height="24">
                         {{ transaction.payment_details.gift_card.last_four_characters | upcase }}で終わる — <strong>{{ transaction.amount | money }}</strong> <br />
                               ギフトカード残高: {{ transaction.payment_details.gift_card.balance |  money }}
                         </p>
                         {% else %}
                             <p class="customer-info__item-content">
                             {{ transaction.gateway_display_name }} — <strong>{{ transaction.amount | money }}</strong>
                             </p>
                         {% endif %}
                 {% endif %}
                   {% endif %}
                 {% endfor %}
               </td>
               {% endif %}
             </tr>
           </table>

           </td>
         </tr>
       </table>
     </center>
   </td>
 </tr>
</table>

         <table class="row footer">
 <tr>
   <td class="footer__cell">
     <center>
       <table class="container">
         <tr>
           <td>
             
             <p class="disclaimer__subtext">ご不明な点がございましたら、このメールにご返信いただくか、<a href="mailto:{{ shop.email }}">{{ shop.email }}</a>までご連絡ください。</p>
           </td>
         </tr>
       </table>
     </center>
   </td>
 </tr>
</table>

<img src="{{ 'notifications/spacer.png' | shopify_asset_url }}" class="spacer" height="1" />

       </td>
     </tr>
   </table>
 </body>
</html>

Step2 運営側に届く「新しい注文」通知

ダッシュボード>設定>通知>スタッフ注文通知の「新しい注文」を開く

スクリーンショット 2021-07-09 午後3.10.10

❷本文にStep1の❷と同じコードを挿入する

以上で完了です!

こちらは配達方法の上に表示されるように書いたコードです。

{% capture email_title %}
   セキュリティチェック
{% endcapture %}
<!DOCTYPE html>
<html lang="ja">
   <head>
 <title>{{ email_title }}</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta name="viewport" content="width=device-width">
 
 <link rel="stylesheet" type="text/css" media="screen" href="/assets/admin/merchant_mailer/style.css">
 <style data-premailer="ignore">
   .button__cell { background: {{ shop.email_accent_color }}; }
   a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
   @media print{
     body {
       color: black !important;
     }

     .subtitle-lines,
     .subtotal-line__title,
     .subtotal-line__value {
       padding: 0 !important;
       margin: 0 !important;
     }

     .subtotal-table {
       margin: 0 !important;
     }
   }
 </style>
</head>

   <body>
       <table class="row">
           <tr class="mail-priority-indicator mail-priority-indicator--{% if fulfillment_aborted or has_high_risks? %}high{% else %}low{% endif %}">
               <td></td>
           </tr>
       </table>
       <table class="body">
           <tr>
               <td>
                   {% if fulfillment_aborted %}
                       <center>
                           <table class="row banner-container banner-alert__table">
   <tr>
       <td class="banner-alert__cell">
           <img src="{{ 'mailer/merchant/critical_alert.png' | cdn_asset_url }}" alt="Critical Alert" width="20px">
       </td>
       <td class="banner-description__cell">
           <strong class="banner-alert__title">注文は自動で発送済みになりませんでした</strong>
           高い不正注文のリスクが検出されました。この注文を発送する、またはこの注文の支払いを確定する前に、リスク分析を確認の上、この注文に不正がないかどうかご判断ください。
       </td>
   </tr>
</table>

                       </center>
                   {% endif %}
                   {% if has_high_risks? %}
                       <center>
                           <table class="row banner-container banner-alert__table">
   <tr>
       <td class="banner-alert__cell">
           <img src="{{ 'mailer/merchant/critical_alert.png' | cdn_asset_url }}" alt="Critical Alert" width="20px">
       </td>
       <td class="banner-description__cell">
           <strong class="banner-alert__title">不正注文のリスクが高いことが検出されました</strong>
           この注文を発送する、またはこの注文の支払いを確定する前に、リスク分析を確認の上、この注文に不正がないかどうかご判断ください。
       </td>
   </tr>
</table>

                       </center>
                   {% endif %}
                   <table class="row">
 <tr>
   <td class="section__cell">
     <center>
       <table class="container section">
         <tr>
           <td>
             
                       <table class="row content">
 <tr>
   <td class="content__cell {% if no_top_border == 'hide_border' %}no_top__border{% endif %}">
     <center>
       <table class="container">
         <tr>
           <td>
             
                           <table class="row">
                               <tr>
                                   <td>
                                       {% assign current_date = date | date: "%b %d" %}
                                       {% assign current_time = date | date: "%l:%M %P" %}
                                       {% if customer.name %}
                                           {{ customer.name }}が{{ current_date }}の{{ current_time | strip }}に、{{ name }}の注文を行いました。
                                       {% else %}
                                           誰かが{{ current_date }}の{{ current_time | strip }}に、{{ name }}の注文を行いました。
                                       {% endif %}
                                       <table class="row actions">
 <tr>
   <td class="empty-line"> </td>
 </tr>
 <tr>
   <td class="actions__cell">
     <table class="button main-action-cell">
       <tr>
         <td><a href="https://{{ shop.permanent_domain }}/admin/orders/{{ id }}" class="mail-button">注文を表示する</a></td>
       </tr>
     </table>
   </td>
 </tr>
</table>

                                   </td>
                               </tr>
                           </table>

           </td>
         </tr>
       </table>
     </center>
   </td>
 </tr>
</table>
                       <table class="row content">
 <tr>
   <td class="content__cell {% if no_top_border == 'hide_border' %}no_top__border{% endif %}">
     <center>
       <table class="container">
         <tr>
           <td>
             
                           <strong class="order-list__summary-title">注文概要</strong>
                           <br>
                           <br>
                           
<table class="row">
 {% for line in subtotal_line_items %}
 <tr class="order-list__item">
   <td class="order-list__item__cell">
     <table>
       <td>
         {% if line.image %}
           <img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
         {% endif %}
       </td>
       <td class="order-list__product-description-cell">
         {% if line.quantity < line.quantity %}
           {% capture line_display %} {{ line.quantity }} of {{ line.quantity }} {% endcapture %}
         {% else %}
           {% assign line_display = line.quantity  %}
         {% endif %}
         
         <span class="order-list__item-title">
           {% if line.product.title == blank %}
             {{ line.title }}</span><br/>
           {% else %}
             {{ line.product.title }}
           {% endif %}
         </span><br/>
         
         {% if line.quantity %}
           {% if line.original_line_price != line.final_line_price %}
             <span><del class="order-list__item-original-price">{{ line.original_price | money }}</del></span>
           {% endif %}
            <span>{{ line.final_price | money }} x {{ line.quantity }} </span><br/>
         {% endif %}
         
         {% if line.variant.title != 'Default Title' %}
           <span class="order-list__item-variant">{{ line.variant.title }}</span>

           {% if line.sku != blank %}
             <span class="order-list__item-variant">• </span>
           {% endif %}
         {% endif %}

         {% if line.sku != blank %}
           <span class="order-list__item-variant">SKU: {{ line.sku }}</span>
         {% endif %}
         
         {% if line.selling_plan_allocation != nil %}
           <p class="order-list__item-variant">{{ line.selling_plan_allocation.selling_plan.name }}</p>
         {% endif %}

       </td>
         <td class="order-list__price-cell">
           <p class="order-list__item-price">
             {% if line.final_line_price > 0 %}
               {{ line.final_line_price | money }}
             {% else %}
               無料
             {% endif %}
           </p>
         </td>
     </table>
   </td>
 </tr>{% endfor %}
</table>

                           <table class="row subtotal-lines">
 <tr>
   <td>
     <table class="row subtotal-table">
       
       
       {% assign discount_value = 0 %}
       {% for discount_application in discount_applications %}
         {% if discount_application.target_selection == 'all' %}
             {% assign discount_value = discount_application.total_allocated_amount %}
         {% endif %}
       {% endfor %}
       
<tr class="subtotal-line">
 <td class="subtotal-line__title">
   <p>
     {% if titleBold %}
       <span><strong>小計</strong></span>
     {% else %}
       <span>小計</span>
     {% endif %}
   </p>
 </td>
 <td class="subtotal-line__value">
   {% if valueBold %}
     <strong>{{ subtotal_price | plus: discount_value | money }}</strong>
   {% else %}
     {{ subtotal_price | plus: discount_value | money }}
   {% endif %}  
 </td>
</tr>


       {% for discount_application in discount_applications %}
         {% if discount_application.target_selection == 'all' %}
           {% capture discount_title %}
             {% if discount_application.title %}
               {{ discount_application.title | upcase }}
             {% else %}
               ディスカウント
             {% endif %}
           {% endcapture %}
           
<tr class="subtotal-line">
 <td class="subtotal-line__title">
   <p>
     {% if titleBold %}
       <span><strong>ディスカウント</strong></span>
     {% else %}
       <span>ディスカウント</span>
     {% endif %}
       <span class="subtotal-line__discount">
         <span class="subtotal-line__discount-title">{% if discount_title.size > 0 %}({{ discount_title | strip }}){% endif %}</span>
       </span>
   </p>
 </td>
 <td class="subtotal-line__value">
   {% if valueBold %}
     <strong>-{{ discount_application.total_allocated_amount | money }}</strong>
   {% else %}
     -{{ discount_application.total_allocated_amount | money }}
   {% endif %}  
 </td>
</tr>

         {% endif %}
       {% endfor %}

       {% if delivery_method == 'pick-up' %}
         
<tr class="subtotal-line">
 <td class="subtotal-line__title">
   <p>
     {% if titleBold %}
       <span><strong>受取</strong></span>
     {% else %}
       <span>受取</span>
     {% endif %}
   </p>
 </td>
 <td class="subtotal-line__value">
   {% if valueBold %}
     <strong>{{ shipping_price | money }}</strong>
   {% else %}
     {{ shipping_price | money }}
   {% endif %}  
 </td>
</tr>

       {% else %}
         
<tr class="subtotal-line">
 <td class="subtotal-line__title">
   <p>
     {% if titleBold %}
       <span><strong>配送</strong></span>
     {% else %}
       <span>配送</span>
     {% endif %}
       <span class="subtotal-line__discount">
         <span class="subtotal-line__discount-title">{% if shipping_method.title.size > 0 %}({{ shipping_method.title }}){% endif %}</span>
       </span>
   </p>
 </td>
 <td class="subtotal-line__value">
   {% if valueBold %}
     <strong>{{ shipping_price | money }}</strong>
   {% else %}
     {{ shipping_price | money }}
   {% endif %}  
 </td>
</tr>

       {% endif %}

       {% for tax_line in tax_lines %}
         
<tr class="subtotal-line">
 <td class="subtotal-line__title">
   <p>
     {% if titleBold %}
       <span><strong>税</strong></span>
     {% else %}
       <span>税</span>
     {% endif %}
       <span class="subtotal-line__discount">
         <span class="subtotal-line__discount-title">{% if tax_line.title.size > 0 %}({{ tax_line.title }} {{ tax_line.rate | times: 100 }}%){% endif %}</span>
       </span>
   </p>
 </td>
 <td class="subtotal-line__value">
   {% if valueBold %}
     <strong>{{ tax_line.price | money }}</strong>
   {% else %}
     {{ tax_line.price | money }}
   {% endif %}  
 </td>
</tr>

       {% endfor %}

     </table>
     <table class="row subtotal-table subtotal-table--total">
       
<tr class="subtotal-line">
 <td class="subtotal-line__title">
   <p>
     {% if titleBold %}
       <span><strong>合計</strong></span>
     {% else %}
       <span>合計</span>
     {% endif %}
   </p>
 </td>
 <td class="subtotal-line__value">
   {% if valueBold %}
     <strong>{{ total_price | money_with_currency }}</strong>
   {% else %}
     {{ total_price | money_with_currency }}
   {% endif %}  
 </td>
</tr>

     </table>
   </td>
 </tr>
</table>


           </td>
         </tr>
       </table>
     </center>
   </td>
 </tr>
</table>
                       <table class="row content">
 <tr>
   <td class="content__cell {% if no_top_border == 'hide_border' %}no_top__border{% endif %}">
     <center>
       <table class="container">
         <tr>
           <td>
             
                           {% if gateway %}
                               <table class="row">
                                   <tr>
                                       <td class="customer-info__item customer-info__item--last">
                                           <strong>支払い処理方法</strong>
                                           <br>
                                           <p>{{ gateway }}</p>
                                       </td>
                                   </tr>
                               </table>
                           {% endif %}
{% if order.attributes["配達希望日"] != '' %}
<br>
<table class="row">
 <tr>
   <td class="customer-info__item customer-info__item--last">
<strong>お届け希望日</strong>
<br>
<p> {{ order.attributes["配達希望日"] }}</p>
   </td>
 </tr>
</table>
 {% endif %}
{% if order.attributes["時間帯"] != '' %}
<br>
<table class="row">
 <tr>
   <td class="customer-info__item customer-info__item--last">
<strong>時間帯</strong>
<br>
<p> {{ order.attributes["時間帯"] }}</p>
   </td>
 </tr>
</table>
 {% endif %}
                           {% if requires_shipping and shipping_address %}
                               {% if shipping_methods.first %}
                                   <br>
                                   <table class="row">
                                       <tr>
                                           <td class="customer-info__item customer-info__item--last">
                                               <strong>配達方法</strong>
                                               <br>
                                               {% for shipping_method in shipping_methods %}
                                                   <p>{{ shipping_method.title }}</p>
                                               {% endfor %}
                                           </td>
                                       </tr>
                                   </table>
                               {% endif %}
                               <br>
                               <table class="row">
                                   <tr>
                                       <td class="customer-info__item customer-info__item--last">
                                           <strong>配送先住所</strong>
                                           <br>
                                           <p>
                                               {{ shipping_address.name }}<br>
                                               {{ shipping_address.street }}<br>
                                               {{ shipping_address.city }},
                                               {{ shipping_address.province }}
                                               {{ shipping_address.zip }}<br>
                                               {{ shipping_address.country }}<br>
                                               {{ shipping_address.phone }}<br>
                                           </p>
                                       </td>
                                   </tr>
                               </table>
                           {% endif %}

           </td>
         </tr>
       </table>
     </center>
   </td>
 </tr>
</table>

           </td>
         </tr>
       </table>
     </center>
   </td>
 </tr>
</table>
                   <footer class="no-print">
 <br>
 <table border="0" cellpadding="0" cellspacing="0" class="mail-footer">
   <tbody>
     <tr>
       <td align="center" valign="bottom">
         <img src="{{ 'mailer/merchant/shopify_logo.png' | cdn_asset_url }}" alt="Shopify" width="89">
       </td>
     </tr>
     <tr>
       <td align="center">
         <p>© Shopify | <span class="apple-link">151 O'Connor Street, Ground floor, Ottawa, ON, K2P 2L8</span></span></p>
       </td>
     </tr>
   </tbody>
 </table>
</footer>

<img class="no-print" src="{{ 'notifications/spacer.png' | shopify_asset_url }}" class="spacer" height="1" />

               </td>
           </tr>
       </table>
   </body>
</html>


さいごに

アプリなしでも配送希望日や時間帯の設置は簡単にできましたね♪

また、明細書を簡単に作成できるOrder Printerというアプリにも挿入しても上手く表示されます。送付状に記載したい場合にもぜひ試してみてくださいね。

この記事が気に入ったらサポートをしてみませんか?