In đơn hàng khổ a6 trên Haravan

in_don_hang_hrv_a6.html

<style type="text/css">@page {
        margin: 12pt;
    }

    html {
        min-height: 100vh;
    }

    body {
        font-family: Roboto, Arial;
        font-size: 5pt;
        line-height: 10pt;
        margin: 0;
        min-height: 100vh;
    }

    .box-print {
        border: 1pt solid #000000;
        min-height: calc(100vh - 2pt);
    }

    p {
        margin: 0 0 12pt;
    }

    table {
        border: none;
        border-collapse: collapse;
    }

    table tr {
        border-collapse: collapse;
    }

    table tr td {
        padding: 7pt;
        border: 1pt solid #000000;
        border-collapse: collapse;
    }

    h1 {
        margin: 5pt 0 12pt;
        font-weight: bold;
        font-size: 17pt;
        line-height: 20pt;
    }

    h2 {
        font-size: 11pt;
        margin: 0 0 5pt;
        line-height: 13pt;
        font-weight: bold;
    }

    h3,
    h4 {
        margin: 0 0 2pt;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 9pt;
        line-height: 10pt;
    }

    h4 {
        text-transform: initial;
        margin: 0 0 7pt;
    }

    .colInfo {
        vertical-align: top;
        width: 64%;
        border-left: none;
    }

    .colInfo span {
        display: block;
        font-size: 9pt;
        line-height: 14pt;
    }

    .colInfo p {
        margin: 0 0 6pt;
        font-size: 9pt;
        line-height: 10pt;
    }

    .colBarcode {
        text-align: center;
        vertical-align: top;
        width: 36%;
        border-right: none;
    }

    .colBarcode p {
        margin: 4pt 0 3pt;
        font-size: 11pt;
        line-height: 13pt;
    }

    .colBarcode span {
        font-size: 11pt;
        line-height: 13pt;
    }

    .infoOrder {
        font-size: 9pt;
        line-height: 10pt;
    }

    .infoOrder td {
        width: 32%;
        vertical-align: top;
    }

    .infoOrder td:first-child {
        border-left: none;
    }

    .infoOrder td:last-child {
        width: 36%;
        border-right: none;
    }

    .infoOrder p:first-child {
        margin-bottom: 3pt;
    }

    .infoOrder p:last-child {
        margin-bottom: 7pt;
    }

    .listItem {
        margin: 0 0 9pt;
        border-collapse: collapse;
        border: 1pt solid #000000;
        vertical-align: top;
        width: 100%;
    }

    .listItem thead tr th {
        vertical-align: top;
        text-align: left;
        padding: 7pt;
        border: 1pt solid #000000;
        font-size: 9pt;
        line-height: 10pt;
        font-weight: bold;
    }

    .listItem thead tr th:nth-child(2) {
        width: 100pt;
        text-align: center;
    }

    .listItem thead tr th:nth-child(3) {
        width: 50pt;
        text-align: center;
    }

    .listItem tbody tr td {
        vertical-align: top;
        font-size: 8pt;
        line-height: 9pt;
        padding: 10pt 7pt;
    }

    .listItem tbody tr td:nth-child(2),
    .listItem tbody tr td:nth-child(3) {
        text-align: center;
    }

    .checkOut,
    .checkOut tr td {
        border: none;
        padding: 0 7pt;
        font-size: 9pt;
        line-height: 10pt;
    }

    .checkOut tr td:nth-child(2) {
        width: 100pt;
        text-align: center;
    }

    .checkOut tr td:nth-child(3) {
        width: 50pt;
        text-align: center;
    }
</style>
<div class="box-print">
<table cellpadding="0" cellspacing="0" width="100%">
	<tbody>
		<tr style="vertical-align: top;">
			<td class="colInfo" colspan="2" style="border-top: none;">
			<h2>Người gửi:</h2>

			<h3>{{shop_name}}</h3>
			<span>{{shop.domain}}</span> <span>{{shop.phone}}</span>

			<p>{{ 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>
			</td>
			<td class="colBarcode" style="border-top: none;">
			<p><b>MÃ ĐH: {{order_name}}</b></p>
			{% if order_name and order_name != "" %}<span style="display: inline-block; text-align: center;"><img class="print_barcode" style="height: 39pt;vertical-align: top; margin-bottom: 5pt;" val="{{order_name}}" /> 
              {% endif %}
            </td>
		</tr>
        <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>
		<tr style="vertical-align: top;">{% if shipment.sorting_code and shipment.sorting_code != "" and shipment.provider == "VNPost" %}
			<td class="colInfo" colspan="2">{% elsif shipment.route_code and shipment.route_code != "" and shipment.provider contains "Sapo Express" %}</td>
			<td class="colInfo" colspan="2">{% else %}</td>
			<td class="colInfo" colspan="3" style="border-right: none">{% endif %}
			<h2>Người nhận:</h2>

			<h4>{{shipping_address.name | escape}}</h4>
			<span>{{shipping_address.phone | escape}}</span>
			<p>{{ 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>
			</td>
			
		</tr>
		<tr class="infoOrder">
			<td>
			<p><b>Mã đơn hàng</b></p>

			<p>{{order_name}}</p>
			</td>
			<td>
			<p><b>Ngày đặt hàng</b></p>

			<p>{{ date | date: "%d/%m/%Y" }}</p>
			</td>
			<td>
			<p><b>Ghi chú</b></p>

			<p>{{shipping_note | escape}}</p>
			</td>
		</tr>
		<tr>
			<td colspan="3" style="border: none;">

			<table class="listItem">
				<thead>
					<tr style="white-space: nowrap;">
						  <th>Tên sản phẩm</th>
                          <th>Số lượng</th>
                          <th>Đơn giá</th>
                          <th>Thành tiền</th>
					</tr>
				</thead>
				<tbody>{% for line in line_items %}
					<tr>
						<td>{{line.title | escape}}{% if line.variant_title != "Default Title" %}-{{line.variant_title | escape}}{% endif %}
						 <br />
                        {% if line.sku and line.sku != "" %} <span>{{ line.sku | escape }}</span> {% endif %}
                         </td>
						<td>{{ line.quantity }}</td>
						<td>{{ line.price | money }}</td>
                        <td>{{ line.price | times: line.quantity | money}}</td>
					</tr>
					{% endfor %}
				</tbody>
			</table>

			<table cellpadding="0" cellspacing="0" class="checkOut" width="100%">
				<tbody>
					<tr class="infoOrder">
							<td>
							 {% for discount in discounts %}
								 				<p><b>Khuyến mãi:</b>{{ discount.code }}</p>
								 				<p>-{{ discount.savings | money }}</p>
							{% endfor %}	
							{%if redeem_services.redeem_name%}
												<p><b>{{redeem_services.redeem_name}} {%if redeem_services.redeem_discount_type =="percent" or redeem_services.redeem_discount_type == "membership" %}(Giảm {{redeem_services.redeem_discount | round }}%) {%endif%}</b></p>
												<p>-{{ redeem_services.redeem_used_amount | money }}</p>
							{% endif %}	
							<p><b>Phí vận chuyển</b>: +{{ shipping_price | money }}</p>

                              <p><b>Tổng tiền</b>:{{ total_price | money }}</p>
							</td>
					</tr>
				</tbody>
			</table>
			</td>
		</tr>
	</tbody>
</table>
</div>