カートボタンの文字化け

Highlighted
新規メンバー
5 0 0

はじめまして。
カートの購入ボタン文字化けしてしまいます。
英語だと勿論問題ないのですが、日本語にすると以下のようになってしまいます。

買い物&#1…

 

他のWordpress内での文字化けはありません。

カートボタンと、遷移先のみが文字化けします。
安心して購入してもらうためにも早々に文字化けをしないようにしたいです。

アドバイスよろしくお願いします。

0 件の「いいね!」
Highlighted
Community Manager
Community Manager
740 159 248

WordPressとおっしゃってますが、BuyButtonを利用されているということですか?

おそらく、手前のサイトがShift JISで表示されていて、ブラウザがそのままShopifyをShift_JISで開こうとしているのではないかと思います。

Technical Partner Manager, Japan
Highlighted
新規メンバー
5 0 0

アドバイスありがとうございます!
公式にコンタクトとっても返信は1週間以上来ないので、Shopifyの利用を再検討していました…。
そんな中にご回答いただけた事、深く感謝しております。

説明不足を補います。
当方は自前のWordpressを利用してサイトを構築し、Buy Button だけをWordpressに組み込んでいます。
ShopifyをShift_JISで開こうとしているとのことですが、その場合においてどのようにしたら文字化けを防げるのでしょうか?
具体的なアドバイスをいただけると非常に助かります。
どうかよろしくお願いします。

0 件の「いいね!」
Highlighted
Community Manager
Community Manager
740 159 248

WordPress側がShift_JISであるというのは仮定なので、詳細情報をいただかないと正確な答えは出せませんが、私が以前試したWordPressへの貼り付けは文字化けせずうまく動作しました。

おそらくですが、Shopifyから貼り付けたコードはUTF-8で、そこにボタンのラベルなどが日本語で入っていて、それをWordPressのShift_JISで書かれたページソースに貼り付けたので、文字コードが混在して、Wordpressの文字コードが優先されて文字化けを起こしていると思います。

文字コードを同一ページで同居させるのは、通常のウェブサイトではできないので(無理ではないですが、かなりトリッキーになります)、WordPress側を現状の主流であるUTF-8に変えていただくのがよろしいかと思いますが、いかがでしょうか?

Technical Partner Manager, Japan
0 件の「いいね!」
Highlighted
新規メンバー
5 0 0
お返事ありがとうございます。
まず、当方ではstyle.cssにて
@charset "utf-8";
を設定してあります。

なので、通常は文字化けは一切起きません。
このshopifyの"Buy Button"だけが文字化けするのです。
こう考えると、shopifyにてボタンを作った際に、「コードをコピーする」というボタンをクリックする前に、内容のどこかを編集して文字化けを防ぐ必要があると思っています。

よろしくお願いします。

PS 公式のサポートって全然返事が来ないのですね…ひどい

0 件の「いいね!」
Highlighted
Community Manager
Community Manager
740 159 248

まず、元の文字化けしている部分(HTMLエンコードで共有されている部分)がBuyButtonのどの部分(ボタンのラベルなのか、カートの明細なのかなど)か教えていただけますか?

こう考えると、shopifyにてボタンを作った際に、「コードをコピーする」というボタンをクリックする前に、内容のどこかを編集して文字化けを防ぐ必要があると思っています。

おそらく、文字化けというよりかは、コピーしているコードの時点で日本語がエンコードされたりしている可能性もあるので、お使いのコードを丸々こちらに共有いただけますでしょうか?

PS 公式のサポートって全然返事が来ないのですね…ひどい

サポートは返事が来ないことはありませんが、日本のサポートは現在混み合っていて返事が返ってくるのに時間がかかっています。

 

Technical Partner Manager, Japan
0 件の「いいね!」
Highlighted
新規メンバー
5 0 0
いつも丁寧なご回答に感謝しております。
文字化けは、ボタンのラベル、カートの明細など、商品名以外は全てだと思って頂いて良いと思います。
以下にコードをそのまま貼り付けますので、一度お目通し頂けると幸いです。
よろしくお願いします。



0 件の「いいね!」
Highlighted
先駆者
154 50 159

横から失礼します。

書かれたコードはコメントアウトされ非表示になっていますので、添付の画像にあるようにソースコード貼り付け用のボタンを押し、出てきた画面内に貼り付けられることをお勧めします。

スクリーンショット 2020-11-27 21.54.38.png

なお、実行すると以下のような感じになります。

 

 

<!--  &amp;amp;lt;br&amp;amp;gt;/*&amp;amp;lt;![CDATA[*/&amp;amp;

 

 

(前述の「</>」ボタンをして出てくる画面にあるLanguageという文字の下のボタンを押して「HTML/XML」か「JavaScript」を選ぶと適した状態で表示されるはずです)

スクリーンショット 2020-11-28 12.30.19.png

 

Highlighted
新規メンバー
5 0 0

JIZO様

ご丁寧なアドバイス感謝します。
Wordpress上では普通に表示されるのに、ブラウザ上でサイトを見ると文字化けしている。
私のサイトの環境によるエラーなのでしょうか…。
だとしたら、何が原因になっているのか全く分かりません。

とりあえず、コードを貼り付けます。

もうShopifyを諦めて、BASEとかに移行するしかないのかなぁ…
支払いも無駄になってしまうのもありますが、自分のやりたいことを形にできないのが残念です…

<div id='product-component-1606705876785'></div>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }
  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src=scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }
  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'kokoromachi-gift.myshopify.com',
      storefrontAccessToken: '2c802e67099fa5d303d5d9b0555181fa',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: '4577988706398',
        node: document.getElementById('product-component-1606705876785'),
        moneyFormat: '%C2%A5%7B%7Bamount_no_decimals%7D%7D',
        options: {
  "product": {
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0",
          "margin-bottom": "50px"
        },
        "text-align": "left"
      },
      "title": {
        "font-size": "26px"
      },
      "button": {
        "font-weight": "bold"
      },
      "price": {
        "font-size": "18px"
      },
      "compareAt": {
        "font-size": "15.299999999999999px"
      },
      "unitPrice": {
        "font-size": "15.299999999999999px"
      }
    },
    "layout": "horizontal",
    "contents": {
      "img": false,
      "imgWithCarousel": true,
      "button": false,
      "buttonWithQuantity": true,
      "description": true
    },
    "width": "100%",
    "text": {
      "button": "買い物カゴに追加"
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  },
  "modalProduct": {
    "contents": {
      "img": false,
      "imgWithCarousel": true,
      "button": false,
      "buttonWithQuantity": true
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      },
      "button": {
        "font-weight": "bold"
      }
    },
    "text": {
      "button": "Add to cart"
    }
  },
  "cart": {
    "styles": {
      "button": {
        "font-weight": "bold"
      }
    },
    "text": {
      "title": "買い物カゴ",
      "total": "小計",
      "empty": "カートを空にする",
      "notice": "送料/割引はこの後の決済画面で表示されます",
      "button": "注文する",
      "noteDescription": "メモ欄"
    },
    "contents": {
      "note": true
    }
  },
  "toggle": {
    "styles": {
      "toggle": {
        "font-weight": "bold"
      }
    }
  }
},
      });
    });
  }
})();
/*]]>*/
</script>

 

0 件の「いいね!」
Highlighted
Community Manager
Community Manager
740 159 248

コードの共有ありがとうございます。

いただいたコードを自分のWordPressに貼り付けてブラウザで表示してみましたが、添付のように文字化けせずにちゃんとチェックアウトできます。ですので、まずコードは問題ありません。

(検証あとにすぐに削除したのでご安心ください)

貼り付けた方法は、WordPressから記事を作成し、そのエディタ上で、「+」で「カスタムHTML」を選択して、そこに共有いただいたコードをはりつけただけです。

WordPressは、自身で立ち上げたものではなくて、他のサービスが提供しているホスト型のものを使っています。そのバージョンも添付しました。

設定に文字コードをいじる部分はなさそうですが、ほぼ最新のものなので、UTF-8で扱われていると思います。


Wordpress上では普通に表示されるのに、ブラウザ上でサイトを見ると文字化けしている。
> 私のサイトの環境によるエラーなのでしょうか…。

テキストではわかりにくいので、画面のスクリーンショットをあげていただけますか?

WordPress上では表示されるとは、プレビューのことでしょうか?

コードをWordPressに挿入する手順は正しいか?(上記のようなやり方で行っているか)

 

など。

Screen Shot 2020-11-30 at 1.09.16 PM.pngScreen Shot 2020-11-30 at 1.18.42 PM.pngScreen Shot 2020-11-30 at 1.10.01 PM.pngScreen Shot 2020-11-30 at 1.09.45 PM.pngScreen Shot 2020-11-30 at 1.09.29 PM.png

Technical Partner Manager, Japan
0 件の「いいね!」