Custom note on shipping preview print

phieuinvanchuyen.liquid

<meta charset="UTF-8">
 <div style="margin:0;font-family: Helvetica;font-size:12px;page-break-after:always;">
    <div>
        <div style="float: right; text-align: right; padding-right:20px;">
            <p>Ngày đặt hàng: {{ order_date | date: "%d/%m/%Y" }}</p>    
            <img style="margin-right:-10px" class="print_barcode order" val="{{tracking_number}}"></img>
        </div>
        <script>
            $(".print_barcode").each(function(){
                var barcode = $(this).attr("val");
                $(this).JsBarcode(barcode ,{
                                                width:  1,
                                                height: 40,
                                                quite: 10,
                                                format: "CODE128",
                                                displayValue: true,
                                                font:"monospace",
                                                textAlign:"center",
                                                fontSize: 12,
                                                backgroundColor:"",
                                                lineColor:"#000"
                                        }
                                )
                });
        </script>
        <div style="margin: 10px 0 1.5em 0;">
            <p><strong style="font-size: 18px;">{{ shop_name }}</strong></p>        
            {% if shop.address %}
            <p><strong>Địa chỉ: </strong>{{ shop.address }}{% if shop.ward %}, {{ shop.ward }}{% endif %}{% if shop.district %}, {{ shop.district }}{% endif %}{% if shop.province %}, {{ shop.province }}{% endif %}{% if shop.country %}, {{ shop.country }}{% endif %}</p>
            {% endif %}
            {% if shop.phone %}
            <p><strong>Điện thoại:</strong> {{ shop.phone }}</p>        
            {% endif %}
            <p><strong>Website:</strong> {{ shop.domain}}</p>       
            <p><strong>Email:</strong> {{ shop.email }}</p>     
        </div>
        <div style="clear:both"></div>
    </div>
    <div>
        <div style="width:60%;float:left;">
            <h3 style="font-size: 14px;line-height: 0">Chi tiết đơn hàng &nbsp;&nbsp;&nbsp; {{order_name}}</h3>
            <hr style="border: none; border-top: 2px solid #0975BD;"/>
            <table style="margin: 0 0 1.5em 0;font-size: 12px;width:100%;">
                <thead>
                    <tr>
                        <th style="width:25%;text-align: left;padding: 5px 0px">Mã sản phẩm</th>
                        <th style="width:35%;text-align: left;padding: 5px 0px">Sản phẩm</th>
                        <th style="width:15%;text-align: right;padding: 5px 0px">Số lượng</th>
                    </tr>
                </thead>
                <tbody>
                    {% for line_item in line_items %}
                    <tr valign="top" style="border-top: 1px solid #d9d9d9;">
                        <td align="left" style="padding: 5px 0px">{{ line_item.sku }}</td>
                        <td align="left" style="padding: 5px 5px 5px 0px;white-space: normal;">
                            {% if line_item.product.title %}
                            {% assign line_title = line_item.product.title %}
                            {% else %}
                            {% assign line_title = line_item.title %}
                            {% endif %}
                            <p style="margin-bottom: 5px;">{{ line_title }}</p>
                            {% if line_item.variant.title != "Default Title" %}
                            <p style="margin: 0">{{ line_item.variant.title }}</p>
                            {% endif %}
                        </td>
                        <td align="center" style="padding: 5px 0px">{{ line_item.quantity }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>            
        </div>
        <div style="width:40%;padding: 0px 0 0 20px;float:left;">
<h3 style="font-size: 14px;line-height: 0">Thông tin vận chuyển</h3>
            <hr style="border: none; border-top: 2px solid #0975BD;"/>
            <div style="margin: 0 0 1em 0; padding: 1em; border: 1px solid #d9d9d9;">
<p><b>Mã vận đơn: </b>{{tracking_number}}</p>
<p><b>Mã phiếu giao hàng: </b>{{shipmentId}}</p>
                <p><b>Nhà vận chuyển: </b>{{tracking_company}}</p>
<p><b>Tiền thu hộ: </b>{{COD_amount | money}}</p>
<p><b>Ghi chú </b> {{ shipping_note }} </p>

            </div>      
            <h3 style="font-size: 14px;line-height: 0">Thông tin người gửi</h3>
            <hr style="border: none; border-top: 2px solid #0975BD;"/>
            <div style="margin: 0 0 1em 0; padding: 1em; border: 1px solid #d9d9d9;">
            <p><b>Người gửi: </b>{{shop.owner_name}}</p>
            {% if shop.address %}
            <p><strong>Địa chỉ: </strong>{{ shop.address }}{% if shop.ward %}, {{ shop.ward }}{% endif %}{% if shop.district %}, {{ shop.district }}{% endif %}{% if shop.province %}, {{ shop.province }}{% endif %}{% if shop.country %}, {{ shop.country }}{% endif %}</p>
            {% endif %}
            {% if shop.phone %}
            <p><strong>Điện thoại:</strong> {{ shop.phone }}</p>        
            {% endif%}
            </div>      
            {% if shipping_address %}
            <h3 style="font-size: 14px;line-height: 0">Thông tin người nhận</h3>
            <hr style="border: none; border-top: 2px solid #0975BD;"/>
            <div style="margin: 0 0 1em 0; padding: 1em; border: 1px solid #d9d9d9;  white-space: normal;">
                <p><strong>Người nhận: </strong> {{ shipping_address.name }}</p>
                {% if shipping_address.address1 %}
                <p><strong>Địa chỉ: </strong>{{ shipping_address.address1 }}{% if shipping_address.ward %} , {{ shipping_address.ward }}{% endif %}{% if shipping_address.district %} , {{ shipping_address.district }}{% endif %}{% if shipping_address.province %}  , {{ shipping_address.province }} ,{% endif %}{% if shipping_address.country %} {{ shipping_address.country }}{% endif %}</p>
                {% endif %}
                {% if shipping_address.phone %}
                <p><strong>Điện thoại: </strong>{{ shipping_address.phone }}</p>
                {% endif %}
            </div>
            {% endif %}
        </div>
        <div style="clear:both"></div>
    </div>
    <p>Nếu bạn có thắc mắc, vui lòng liên hệ chúng tôi qua email <u>{{ shop.email }} {% if shop.phone %}</u> hoặc {{ shop.phone }} {% endif %}</p>
 </div>