帳票テンプレート作成機能で利用可能なコードサンプル

対象プラン：プレミアム、Premium、WMS（新デザインのみ）

コードの書き方のサポートは行っておりません。テンプレート作成が難しい場合は、作成代行を行っておりますので、ご利用をご検討くださいませ。

（作成代行の詳細はこちら）

・商品バーコードを表示したい

barcode_base64 というメソッドを用意しています。

以下のコードを追加することで、バーコードを表示することができます。

例)

Plaintext


<img src="data:image/png;base64, {{shipping_schedule.number | barcode_base64: 'qr' }}">

・QRコードを非表示にしたい

以下のコードを削除してください。

Plaintext

<!-- QRコード -->
<div class='text-right qr-code'>
  <img src="data:image/png;base64, {{shipping_schedule.number | barcode_base64: 'qr'}}">
</div>

・会社名を非表示にして、会社ロゴを会社名の場所に表示したい

会社名を記載している箇所に、「ロゴ」を表示するコードを移動させることで実現できます。

変更前)

Plaintext

<!-- 発行者情報 -->
<div class='col-xs-6 text-right'>
  <h3><strong>{{shipping_schedule.company_name}}</strong></h3>
  <address class='small-font company-info'>
    {{shipping_schedule.company_info}}
  </address>

  <!-- ロゴ -->
  {% if shipping_schedule.logo_url %}
    <img class="issuer-image" src="{{shipping_schedule.logo_url}}">
  {% endif %}
</div>

変更後)

Plaintext

<!-- 発行者情報 -->
<div class='col-xs-6 text-right'>
  {% if shipping_schedule.logo_url %}
    <img class="issuer-image" src="{{shipping_schedule.logo_url}}">
  {% endif %}
  <address class='small-font company-info'>
    {{shipping_schedule.company_info}}
  </address>
</div>

・バーコードもしくは品番を非表示にする

テーブルで表示しているので、タイトルと値の箇所を削除します。

変更前)

Plaintext


 <!-- 注文内容 -->
    <div class='row'>
      <div class='col-xs-12'>
        <table class='table table-borderless small-font'>
					<thead>
					  <tr class='nowrap'>
					    <th>商品名</th>
					    <th>品番</th>
					    <th>バーコード</th>
					    <th class='text-right'>数量</th>
					    {% unless shipping_schedule.gift_enabled %}
					      <th class='text-right static-width'>単価</th>
					      <th class='text-right static-width'>金額</th>
					    {% endunless %}
					  </tr>
					</thead>
					<tbody class='table-bold-border-top'>
					  {% for item in shipping_schedule.items %}
					    <tr>
					      <td class="product-name">
					        <p>{{item.name}}</p>
					        <p>{{item.note}}</p>
					      </td>
					      <td>
					        {{item.product_code}}
					      </td>
					      <td>
					        {{item.barcode}}
					      </td>
					      ....

変更後)

Plaintext


 <!-- 注文内容 -->
    <div class='row'>
      <div class='col-xs-12'>
        <table class='table table-borderless small-font'>
					<thead>
					  <tr class='nowrap'>
					    <th>商品名</th>
					    <th class='text-right'>数量</th>
					    {% unless shipping_schedule.gift_enabled %}
					      <th class='text-right static-width'>単価</th>
					      <th class='text-right static-width'>金額</th>
					    {% endunless %}
					  </tr>
					</thead>
					<tbody class='table-bold-border-top'>
					  {% for item in shipping_schedule.items %}
					    <tr>
					      <td class="product-name">
					        <p>{{item.name}}</p>
					        <p>{{item.note}}</p>
					      </td>
					      ....

・納品書番号に表示する項目を変更する

用意してある変数を利用し、好きな値を表示することができます。

注文番号や出荷番号などを自由に追加、削除してください。

Plaintext

<!-- 注文情報 -->
<div class='clearfix'>
  <table class='pull-right order-table'>
    {% if shipping_schedule.order_date %}
      <tr>
        <td class='text-right'>注文日:</td>
        <td>{{shipping_schedule.order_date | date: "%Y/%m/%d"}}</td>
      </tr>
    {% endif %}
    {% if shipping_schedule.order_number %}
      <tr>
        <td class='text-right'>注文番号:</td>
        <td>{{shipping_schedule.order_number}}</td>
      </tr>
    {% endif %}
    <tr>
      <td class='text-right'>出荷番号:</td>
      <td>{{shipping_schedule.schedule_number}}</td>
    </tr>
    {% if shipping_schedule.due_date %}
      <td class='text-right'>出荷日:</td>
      <td>{{shipping_schedule.due_date | date: "%Y/%m/%d"}}</td>
    {% endif %}
  </table>
</div>
<!-- QRコード -->
<div class='text-right qr-code'>
  <img src="data:image/png;base64, {{shipping_schedule.schedule_number | barcode_base64}}">
</div>

・出荷先情報を非表示にする

出荷先情報は以下のように表示されています。不要な変数を削除することで、表示する項目を制限することが可能です。

変更前)

Plaintext

 <!-- 出荷先情報 -->
<h3><strong>{{shipping_schedule.consignee.name}}</strong></h3>
<address class='small-font'>
  <p>{{shipping_schedule.consignee.postal_code}}</p>
  <p>{{shipping_schedule.consignee.address1}}</p>
  <p>{{shipping_schedule.consignee.address2}}</p>
  <p>{{shipping_schedule.consignee.phone_number}}</p>
</address>

変更後) 名称だけ表示する場合

Plaintext

 <!-- 出荷先情報 -->
<h3><strong>{{shipping_schedule.consignee.name}}</strong></h3>