明細書カスタマイズについて

[sabkai]

現在、shopfiy標準の明細書をカスタマイズして使用しています。(以下参考サイト)
https://rewired.cloud/shopify-packing-slip-price-and-shipping/

上記カスタマイズだと、注文内容を修正した時に(商品売り切れによる削除等)、修正内容が反映されません。
素人ながら、商品明細を表示するfor文で"line_items_in_shipment"から"order.line_items"しているのが、影響しているのではと考えています。

何か解決方法はありますでしょうか？
また、アプリの使用は今のところ考えていないです。

ご教授よろしくお願いいたします。

[Qcoltd]

@sabkai 様

興味があり調査してみました。

おっしゃる通り、

"line_items_in_shipment"から"order.line_items"に変更すると、

注文情報の編集が明細表に反映されないようです。

> 何か解決方法はありますでしょうか？

十分な動作検証をしていませんが、

例えば、商品の価格を表示したい場合は下記のようにされてはいかがでしょうか？

    {% for line_item in line_items_in_shipment %}

      <!-- 価格を表示したい箇所に下記を記載 ここから -->
　　    　{% for orderline_item in order.line_items %}
 　　　　   　　{% if line_item.sku == orderline_item.sku %}
   　　　　　　 　　{{ orderline_item.final_line_price | money }}
    　　　　　　{% endif %}
     　{% endfor %}
      <!-- 価格を表示したい箇所に下記を記載 ここまで -->

    {% endfor %}

なお、

Shopify標準の明細表は一度表示してしまいますと、

明細表のテンプレートを更新しても、

その更新内容が反映されるまでに時間がかかりますので、

表示内容が変わらない場合はしばらく時間を置いてからお試しいただくか、

新たに注文を作成されてお試しいただくのが良いです。

ご参考まで。

(キュー田辺)

[sabkai]

田辺様

ご回答ありがとうございました。

いただいたソースコードを試して見ます。

また質問させてください。

宜しくお願いいたします。

[Ogata]

私も同じ問題に直面し調べたところ、下記記述でうまく動作しました。
元ネタは下記の投稿です。参考になりましたら幸いです。

https://community.shopify.com/c/shopify-design/show-item-prices-on-packing-slip-line-item-properties...

{% for line_item in line_items_in_shipment %}

{% assign final_price = nil %}
{% assign line_name = line_item.title %}
{% if line_item.variant_title != blank %}
{% assign line_name = line_name | append: " - " | append: line_item.variant_title %}
{% endif %}
{% for item in order.line_items %}
{% assign order_name = item.title %}
{% if order_name == line_name %}
{% assign final_price = item.final_price %}
{% endif %}
{% endfor %}
{% if final_price %}
{{ final_price | money }}
{% endif %}

[sabkai1]

Ogata様

ご返事が遅くなり申し訳ありません。

転記していただいたコードをそのままコピーしたのですが、上手く動作しませんでした。

原因がわかりましたら、教えてもらえないでしょうか？

よろしくお願いいたします

[Ogata]

こちらでカスタマイズしたソース全文をお伝えしますね。

ソース上部にロゴURLを挿入しているので、その部分は任意のものに変更してください。
今後のShopifyアップデート等で不具合を起こす可能性はございますので、あくまでも自己責任でご利用いただきますよう、お願いします。

<div class="wrapper">
  <div class="header">
<div class="shop-title">
<img src="　ロゴ画像のURL　" style="width: px; height: 52px;">
    </div>
    <div class="order-title">
      <p class="text-align-right">
        注文番号 {{ order.name }}
      </p>
      {% if order.po_number != blank %}
        <p class="text-align-right">
          注文書番号 #{{ order.po_number }}
        </p>
      {% endif %}
      <p class="text-align-right">
        {{ order.created_at | date: format: "date" }}
      </p>
    </div>
  </div>
  <div class="customer-addresses">
    <div class="shipping-address">
      <p class="subtitle-bold to-uppercase">
        {% if delivery_method.instructions != blank %}
          お届け先
        {% else %}
          お届け先
        {% endif %}
      </p>
      <p class="address-detail">
        {% if shipping_address != blank %}
          {{ shipping_address.name }}　様
          {% if shipping_address.company != blank %}
            <br>
            {{ shipping_address.company }}
          {% endif %}
          <br>

         {% if shipping_address.zip != blank %}
            <br>
            {{ shipping_address.zip }}
          {% endif %}

         {% if shipping_address.province != blank %}
            <br>
            {{ shipping_address.province }}
          {% endif %}
          
                   {% if shipping_address.city != blank %}
            <br>
            {{ shipping_address.city }}
          {% endif %}


         {{ shipping_address.address1 }} 
          {% if shipping_address.address2 != blank %}
            {{ shipping_address.address2 }} 
          {% endif %}

          {% if shipping_address.phone != blank %}
            <br>
            {{ shipping_address.phone }}
          {% endif %}
        {% else %}
          配送先住所がありません
        {% endif %}
      </p>
    </div>
    <div class="billing-address">
      <p class="subtitle-bold to-uppercase">
        請求先
      </p>
      <p class="address-detail">
        {% if billing_address != blank %}
          {{ billing_address.name }}　様
          {% if billing_address.company != blank %}
            <br>
            {{ billing_address.company }}
          {% endif %}
          <br>

         {% if billing_address.zip != blank %}
            <br>
            {{ billing_address.zip }}
          {% endif %}

         {% if shipping_address.province != blank %}
            <br>
            {{ billing_address.province }}
          {% endif %}
          
                   {% if shipping_address.city != blank %}
            <br>
            {{ billing_address.city }}
          {% endif %}

          {{ billing_address.address1 }}
          {%  if billing_address.address2 != blank %}
            {{ billing_address.address2 }}
          {% endif %}

          <br>

        {% else %}
          請求先住所がありません
        {% endif %}
      </p>
    </div>
  </div>
  <hr>
<div class="order-container">
    <div class="order-container-header">
      <div class="order-container-header-left-content">
        <p class="subtitle-bold to-uppercase">
          商品
        </p>
      </div>
      <div class="order-container-header-right-content">
        <p class="subtitle-bold to-uppercase">
          金額 ／ 数量
        </p>
      </div>
    </div>

    {% comment %}
    To adjust the size of line item images, change desired_image_size.
    The other variables make sure your images print at high quality.
    {% endcomment %}
    {% assign desired_image_size = 58 %}
    {% assign resolution_adjusted_size = desired_image_size | times: 300 | divided_by: 72 | ceil %}
    {% capture effective_image_dimensions %}
      {{ resolution_adjusted_size }}x{{ resolution_adjusted_size }}
    {% endcapture %}

  {% for line_item in line_items_in_shipment %}
      <div class="flex-line-item">

        <div class="flex-line-item-description">
          <p>
            <span class="line-item-description-line">
              {{ line_item.title }}
            {% if line_item.variant_title != blank %}
                {{ line_item.variant_title }}
              </span>
            {% endif %}
            {% if line_item.sku != blank %}
              <span class="line-item-description-line">
                {{ line_item.sku }}
              </span>
            {% endif %}
            {% for group in line_item.groups %}
              <span class="line-item-description-line">
                {{ group.title }}の一部
              </span>
            {% endfor %}
          </p>
        </div>
        <div class="flex-line-item-quantity">
          <p class="text-align-right">
  {% assign final_price = nil %}
              {% assign line_name = line_item.title %} {% if line_item.variant_title != blank %} {% assign line_name = line_name | append: " - " | append: line_item.variant_title %}  {% endif %} {% for item in order.line_items %} {% assign order_name = item.title %}
                {% if order_name == line_name %}
                  {% assign final_price = item.final_price %}
                {% endif %}
              {% endfor %}
              {% if final_price %}
                 {{ final_price | money }}
              {% endif %} 
               ／ 
           {{ line_item.quantity }}
          </p>

        </div>
      </div>
    {% endfor %}
  </div>
  {% unless includes_all_line_items_in_order %}
    <hr class="subdued-separator">
    <p class="missing-line-items-text ">
      この発送に含まれていない商品があります。（キャンセル商品含む）
    </p>
  {% endunless %}
  <hr>
  <p class="text-align-right">
    小計：{{ order.subtotal_price | money }}
  <br>
    （うち消費税）{{ order.tax_price | money }}
  <br>
    送料：{{ order.shipping_price | money }}
  <br>
  {%- if order.total_discount -%}
  <br>
    割引：-{{ order.total_discount | money }}
  <br>
  {%- endif -%}
    合計金額：{{ order.total_price | money }}
  </p>
  {% if order.note != blank %}
    <div class="notes">
      <p class="subtitle-bold to-uppercase">
        メモ
      </p>
      <p class="notes-details">
        {{ order.note }}
      </p>
    </div>
  {% endif %}
  {% if delivery_method.instructions != blank %}
    <div class="notes">
      <p class="subtitle-bold to-uppercase">
        配達指示
      </p>
      <p class="notes-details">
        {{ delivery_method.instructions }}
      </p>
    </div>
  {% endif %}
 <div class="footer">
    <p>
      ご不明点がございましたら{{ shop.email }}までお問い合わせください。
    </p>
    <p>
      <strong>
        {{ shop.name }}
      </strong>
      <br>
{{ shop.domain }}
    </p>
<!--      {{ shop_address.zip }} {{ shop_address.province }} {{ shop_address.city }} {{ shop_address.address1 }}  {{ shop_address.address2 }} -->
<!-- {{ shop.email }} -->
  </div>
</div>
<style type="text/css">
  body {
    font-size: 16px;
  }

  * {
    box-sizing: border-box;
  }

  .wrapper {
    width: 831px;
    margin: auto;
    padding: 4em;
    font-family: "Noto Sans", sans-serif;
    font-weight: 250;
  }

  .header {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    align-items: top;
  }

  .header p {
    margin: 0;
  }

  .shop-title {
    -webkit-box-flex: 6;
    -webkit-flex: 6;
    flex: 6;
    font-size: 1.9em;
  }

  .order-title {
    -webkit-box-flex: 4;
    -webkit-flex: 4;
    flex: 4;
  }

  .customer-addresses {
    width: 100%;
    display: inline-block;
    margin: 2em 0;
  }

  .address-detail {
    margin: 0.7em 0 0;
    line-height: 1.5;
  }

  .subtitle-bold {
    font-weight: bold;
    margin: 0;
    font-size: 0.85em;
  }

  .to-uppercase {
    text-transform: uppercase;
  }

  .text-align-right {
    text-align: right;
  }

  .shipping-address {
    float: left;
    min-width: 18em;
    max-width: 50%;
  }

  .billing-address {
    padding-left: 20em;
    min-width: 18em;
  }

  .order-container {
    padding: 0 0.7em;
  }

  .order-container-header {
    display: inline-block;
    width: 100%;
    margin-top: 1.4em;
  }

  .order-container-header-left-content {
    float: left;
  }

  .order-container-header-right-content {
    float: right;
  }

  .flex-line-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0em 0;
    page-break-inside: avoid;
  }

  .flex-line-item-img {
    margin-right: 0em;
    min-width: {{ desired_image_size }}px;
  }

  .flex-line-item-description {
    -webkit-box-flex: 7;
    -webkit-flex: 7;
    flex: 7;
  }

  .line-item-description-line {
    display: block;
  }

  .flex-line-item-description p {
    margin: 0;
    line-height: 1.5;
  }

  .flex-line-item-quantity {
    -webkit-box-flex: 3;
    -webkit-flex: 3;
    flex: 3;
  }

  .subdued-separator {
    height: 0.07em;
    border: none;
    color: lightgray;
    background-color: lightgray;
    margin: 0;
  }

  .missing-line-items-text {
    margin: 1.4em 0;
    padding: 0 0.7em;
  }

  .notes {
    margin-top: 2em;
  }

  .notes p {
    margin-bottom: 0;
  }

  .notes .notes-details {
    margin-top: 0.7em;
  }

  .footer {
    margin-top: 2em;
    text-align: center;
    line-height: 1.5;
  }

  .footer p {
    margin: 0;
    margin-bottom: 1.4em;
  }

  hr {
    height: 0.14em;
    border: none;
    color: black;
    background-color: black;
    margin: 0;
  }

  .aspect-ratio {
    position: relative;
    display: block;
    background: #fafbfc;
    padding: 0;
  }

  .aspect-ratio::before {
    z-index: 1;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid rgba(195,207,216,0.3);
  }

  .aspect-ratio--square {
    width: 100%;
    padding-bottom: 100%;
  }

  .aspect-ratio__content {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
</style>

[sabkai]

Ogata様

回答ありがとうございました。

これを元にカスタマイズして見ます。