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 になると思います。
> 決済は別サービスで行っています。
なお、オンラインの購入者のフローにこれを差し込んでいる場合、アプリ開発の規約違反に当たる可能性があるので、ご注意ください。
岡村様
回答ありがとうございます。
ロゴ・サンクスページ・規約の件,了解しました。
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024