アカウントページの都道府県がJP-〇の表記になる

[Go1000]

テーマはEditionsを使用しています。

アカウントページの住所編集画面で、都道府県選択は、日本語で北海道、青森県、、と表示され、

選択してもその都道府県が表示されるのですが、

保存後、住所を確認すると、都道府県の箇所がJP-〇の表示になります。

JP-〇を都道府県表示に直したいのですが、どうすれば良いでしょうか。

[NIIGAKI_HYUGA]

@Go1000 

初めまして。新垣です。

動作検証をしたわけはないので、動くか保証はできないのですが、

下記コード該当ページを出力しているファイルに追加してお試しください。

<script>
document.addEventListener('DOMContentLoaded', function() {
  var isoToPrefecture = { // ISOコードと都道府県の対応表
    'JP-01': '北海道', 'JP-02': '青森県', 'JP-03': '岩手県',
    'JP-04': '宮城県', 'JP-05': '秋田県', 'JP-06': '山形県', 'JP-07': '福島県',
    'JP-08': '茨城県', 'JP-09': '栃木県', 'JP-10': '群馬県', 'JP-11': '埼玉県',
    'JP-12': '千葉県', 'JP-13': '東京都', 'JP-14': '神奈川県', 'JP-15': '新潟県',
    'JP-16': '富山県', 'JP-17': '石川県', 'JP-18': '福井県', 'JP-19': '山梨県',
    'JP-20': '長野県', 'JP-21': '岐阜県', 'JP-22': '静岡県', 'JP-23': '愛知県',
    'JP-24': '三重県', 'JP-25': '滋賀県', 'JP-26': '京都府', 'JP-27': '大阪府',
    'JP-28': '兵庫県', 'JP-29': '奈良県', 'JP-30': '和歌山県', 'JP-31': '鳥取県',
    'JP-32': '島根県', 'JP-33': '岡山県', 'JP-34': '広島県', 'JP-35': '山口県',
    'JP-36': '徳島県', 'JP-37': '香川県', 'JP-38': '愛媛県', 'JP-39': '高知県',
    'JP-40': '福岡県', 'JP-41': '佐賀県', 'JP-42': '長崎県', 'JP-43': '熊本県',
    'JP-44': '大分県', 'JP-45': '宮崎県', 'JP-46': '鹿児島県','JP-47': '沖縄県'
  };

  // 都道府県コードを含む要素を取得
  var prefectureElements = document.querySelectorAll('都道府県を出力するタグのclass名');

  // 要素のそれぞれに対して、ISOコードを都道府県名に変換する
  prefectureElements.forEach(function(element) {
    var prefectureCode = element.innerText;
    var japaneseName = isoToPrefecture[prefectureCode];

    if (japaneseName) {
      element.innerText = japaneseName;
    }
  });
});
</script>

以上、参考になりましたら幸いです。

[Go1000]

初めまして。

早々にご回答くださり、ありがとうございます。

コード編集の知識が少ないので、へんてこなことを言っていたら、申し訳ありません。

下記liquid（account.liquid）内のprovince_codeのあたりに、教えていただいたコードを追加したらよいのかと思ったのですが、変化がなく…。

どのように追加すればよいかも教えていただけると嬉しいです。

このliquid内に追加するので合っているかも理解不足で申し訳ないのですが…。

<div class="account-page">
  <div class="account-page__header">
    <h1 class="account-page__heading">{{ 'customer.title' | t }}</h1>

    <a class="account-page__logout" href="{{ routes.account_logout_url }}">{{ 'layout.header.logout' | t }}</a>
  </div>

  <div class="order-history">
    <div class="order-history__header">
      <h2 class="order-history__heading">{{ 'customer.order_listing.header' | t }}</h2>
    </div>

    {% if customer.orders.size != 0 %}
      <table class="order-history__table">
        <thead>
          <tr>
            <th class="order-number first">{{ 'customer.order_listing.order' | t }}</th>
            <th class="payment-status">{{ 'customer.order_listing.payment' | t }}</th>
            <th class="fulfillment-status">{{ 'customer.order_listing.fulfillment' | t }}</th>
            <th class="total last">{{ 'customer.order_listing.total' | t }}</th>
          </tr>
        </thead>
        <tbody>
          {% for order in customer.orders %}
            <tr class="{% if forloop.first %}first{% endif %} {% if forloop.last %}last{% endif %} {% if order.cancelled %}cancelled_order{% endif %}">
              <td class="order-number first">{{ order.name | link_to: order.customer_url }} - {{ order.created_at | date: format: 'short_month' }}</td>
              <td class="payment-status {{ order.financial_status }}">{{ order.financial_status_label | capitalize }}</td>
              <td class="fulfillment-status {{ order.fulfillment_status }}">{{ order.fulfillment_status_label | capitalize }}</td>
              <td class="total last"><span class="money">{{ order.total_price | money }}</span></td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    {% else %}
      <p class="no-orders">{{ 'customer.order_listing.no_orders' | t }}</p>
    {% endif %}
  </div>

  <div class="account-details">
    <div class="account-details__header">
      <h2 class="account-details__heading">{{ 'customer.subtitle' | t }}</h2>
    </div>

    {% if customer.default_address %}
      <p class="account-details__address">
        {{ customer.default_address.last_name }} {{ customer.default_address.first_name }}<br><br>
        {{ customer.default_address.country }}<br>
        {{ customer.default_address.zip }} {% if customer.default_address.province_code != blank %}{{ customer.default_address.province_code }}{% endif %} {{ customer.default_address.city }}<br>  
        {{ customer.default_address.address1 }}<br>
        {% if customer.default_address.address2 != blank %}{{ customer.default_address.address2 }}<br>{% endif %}
        {% if customer.default_address.company != blank %}{{ customer.default_address.company }}<br>{% endif %}
        {% if customer.default_address.phone != blank %}<br>{{ customer.default_address.phone }}{% endif %}
      </p>
    {% endif %}

    <a class="account-details__view-addresses" href="{{ routes.account_addresses_url }}">{{ 'customer.addresses.view' | t: count: customer.addresses_count }}</a>

  </div>
</div>

[NIIGAKI_HYUGA · Accepted solution]

下記のように書き換えてみてください！

<div class="account-details">
  <!-- その他のアカウント詳細 -->

  {% if customer.default_address %}
    <p class="account-details__address">
      {{ customer.default_address.last_name }} {{ customer.default_address.first_name }}<br><br>
      {{ customer.default_address.country }}<br>
      {{ customer.default_address.zip }}
      <span class="japanese-prefecture">{{ customer.default_address.province_code }}</span> // province_codeを取得するためにspan要素を追加
      {{ customer.default_address.city }}<br>  
      {{ customer.default_address.address1 }}<br>
      {% if customer.default_address.address2 != blank %}{{ customer.default_address.address2 }}<br>{% endif %}
      {% if customer.default_address.company != blank %}{{ customer.default_address.company }}<br>{% endif %}
      {% if customer.default_address.phone != blank %}<br>{{ customer.default_address.phone }}{% endif %}
    </p>
  {% endif %}

  <!-- その他のコンテンツ -->
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  var isoToPrefecture = { // ISOコードと都道府県の対応表
    // ...（省略された都道府県コード対応表）
  };

  // 都道府県コードを含む要素を取得
  var prefectureElement = document.querySelector('.japanese-prefecture');

  // ISOコードを都道府県名に変換する
  if (prefectureElement) {
    var prefectureCode = prefectureElement.innerText;
    var japaneseName = isoToPrefecture[prefectureCode];

    if (japaneseName) {
      prefectureElement.innerText = japaneseName;
    }
  }
});
</script>

動かないようであれば、他のコードも見てみないと分からないので専門の方に個別で相談するのをお勧めします！

[Go1000]

教えていただいた内容で追加してみたら、都道府県が表示されるようになりました！

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

大変助かりました。