Liquid、JavaScriptなどに関する質問
実態はクレカ決済だが,Manual決済をした場合に通知メールにカード情報を載せる方法を教えてください。
AdminAPI(DraftOrderCreate&Complete)で注文作成し決済は別サービスで行っています。
この場合,注文通知メールとサンクスページの決済欄はManualと表示されます。
この「Manual」にカード情報を表示すべく,customAttributeにカードブランドと下4桁を格納させ通知メールLiquidを編集しました。
その結果,注文通知メールにはカードブランドと下4桁を表示させることに成功しました。
その際に使用したsrcは以下の通りです。
<p class="customer-info__item-content">
<img src="{{ attributes.cardBrand | payment_icon_png_url }}" class="customer-info__item-credit" height="24" alt="{{ attributes.cardBrand }}">
<span>(カード番号下4桁:{{ attributes.cardNum }}) <br /> <strong>{{ transaction.amount | money }}</strong></span>
</p>
これでテストしてみると,VISA・DC・Amexのアイコンは正常に出力されます。
しかし,JCB・Masterは正しく表示されません。この2社のアイコンも正しく表示したいのですが,どうすれば良いでしょうか?
開発ストアから実施している為にカードロゴが正しく表示されないのか?ShopifyPaymentsが有効になっていないことが原因なのか?
よろしくお願いします。
また,サンクスページの「Manual」項目も同様に手を加えたいのですが,やり方がわかりません。
サンクスページのお客様情報欄は,チェックアウト>追加スクリプトで手を加えられるものなのでしょうか?
shopifyPlusでないとカスタムできない領域でしょうか?
よろしくお願いします。
解決済! ベストソリューションを見る。
成功
Thank Youページのカスタマイズは、それ用のアプリでできることは追加スクリプトでも可能です。(アプリも内部で行っているのは、Scripttag APIでThank you ページに差し込んでいるだけです)
https://apps.shopify.com/thank-you-page?locale=ja
カードのロゴに関しては、Liquidで出せるもので対応されるのが無難かと思います。正式にサポートされたものではないので。
Draft orderは、管理画面からマーチャントが注文作成する操作のAPI版なので、意味的には決済は全てManual になると思います。
1.カード会社画像が出ない件
掲載されているサンプルで出ている様に見えますが、実際にはリンク切れするということでしょうか?
2.Thanksページを書き換える
おっしゃるとおりShopify Plusの契約が必要になります。
回答ありがとうございます。
現在出力されているJCB・Masterのロゴですが,
です。
ShopifyCloud内のPNGファイルを取りに行っているようですが,
JCB: https://cdn.shopify.com/shopifycloud/web/assets/v1/d37fc6cf4a3be5aa8f8c836148204e52.svg
Master: https://cdn.shopify.com/shopifycloud/web/assets/v1/b07d7f70cd57ff74e7e2827f124bd756.svg
の用にJCBの文字が入ったロゴタイプを出力したいのです。この場合,svgファイルを取りに行く必要があります。
そこで試しに
img src="{{ attributes.cardBrand | payment_icon_png_url }}"
↓
img src="{{ attributes.cardBrand | payment_icon_svg_url }}"
と書き換えてみましたが,アイコンは出力されません。
私のLiguid srcだとPNGファイルを取りに行っているので,svgファイルを読みに行くにはどうすれば良いのでしょうか?
お力を借りたいです。
サンクスページの件,理解しました。
<p class="customer-info__item-content">
{% if attributes.cardBrand == "JCB" %}
<img src="https://cdn.shopify.com/s/files/1/XXXXXXXX" class="customer-info__item-credit" height="24" alt="{{ attributes.cardBrand }}"></img>
{% else %}
<img src="{{ attributes.cardBrand | payment_icon_png_url }}" class="customer-info__item-credit" height="24" alt="{{ attributes.cardBrand }}"></img>
{% endif %}
{% if attributes.cardBrand == "Mastercard" %}
<img src="https://cdn.shopify.com/s/files/1/XXXXXXX" class="customer-info__item-credit" height="24" alt="{{ attributes.cardBrand }}"></img>
{% else %}
<img src="{{ attributes.cardBrand | payment_icon_png_url }}" class="customer-info__item-credit" height="24" alt="{{ attributes.cardBrand }}"></img>
{% endif %}
<span>(カード番号下4桁:{{ attributes.cardNum }}) <br /> <strong>{{ transaction.amount | money }}</strong></span>
</p>
上記のコードにすることで,無理矢理JCB・Masterロゴを出力することはできました。
「JCB・Mastterロゴをダウンロード>管理画面>設定>ファイルにアップロード>アセットURLをimg srcにペースト」というやり方です。
しかし,これはカードの著作権的に大丈夫なのでしょうか?
成功
Thank Youページのカスタマイズは、それ用のアプリでできることは追加スクリプトでも可能です。(アプリも内部で行っているのは、Scripttag APIでThank you ページに差し込んでいるだけです)
https://apps.shopify.com/thank-you-page?locale=ja
カードのロゴに関しては、Liquidで出せるもので対応されるのが無難かと思います。正式にサポートされたものではないので。
Draft orderは、管理画面からマーチャントが注文作成する操作のAPI版なので、意味的には決済は全てManual になると思います。
> 決済は別サービスで行っています。
なお、オンラインの購入者のフローにこれを差し込んでいる場合、アプリ開発の規約違反に当たる可能性があるので、ご注意ください。
岡村様
回答ありがとうございます。
ロゴ・サンクスページ・規約の件,了解しました。
Shopifyのチェックアウトは世界一コンバージョン率が高いチェックアウトです。2023年4月に実施された世界3大手マネジメントコンサルティング会社の共同調査によると、Sho...
By Minami_ Apr 11, 2024Shopifyのルーツ Shopifyは、スノーボードをオンラインで販売したいという夢を叶えるために2004年に誕生しました。当時は大企業だけがインターネットで販売す...
By JapanGuru Apr 7, 2024リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024