eコマースアプリのカスタムカードレイアウト

eコマースアプリのカスタムカードレイアウト

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

要件

商品をカードレイアウトで表示し、必須の商品をカートに追加するボタンを配置します。

使用する Case

ある eコマース企業が、注文管理アプリを使用して注文を処理しています。商品はカードレイアウトで商品画像とともに表示され、顧客は必須の商品をカートに追加して注文を行うことができます。

手順

1. 次の詳細でフォームを作成します。

フォーム

フォームリンク名

項目タイプ

項目名

項目リンク名

商品

商品

単一行

商品

商品

画像

画像

画像

通貨

価格

価格

商品

商品

 

ルックアップ

商品

商品

数値

数量

数量

通貨

価格

価格

通貨

合計

合計

メール

メール

メール

順番

順番

名前

名前

名前

住所

住所

住所

電話番号

電話番号

Phone_Number

SubForm

商品
(既存 Form)

商品

通貨

合計

合計

2. 初期値を設定し、商品フォームのメール項目の値を${Zoho。loginuserid}にします。

3. 名前を変更し、商品レポートをMy カートにリネームします。そのうえで、Quick 表示> Layout で、次のレイアウトを設定します。


4. QuickView> 処理 に移動し、名前を変更して 削除処理をカートから削除にし、さらに 削除で 編集や複製などの追加処理を削除します。



5. フィルターを設定し、My カートレポートのレポートプロパティで、以下のように設定します。これにより、顧客はレポート内で自分の商品のみを閲覧できるようになります。


6. ページを作成し、名前を商品 Listingとします。

7. ボタンを追加し、名前を注文を作成とします。そのうえで、操作タブで次のパラメーターを設定します。


URL は注文フォームにリダイレクトされるようにします。形式は次のとおりです:
https://creatorapp.zoho.com/<app-owner-name>/<app-linkname>/#Form:Order
8. HTML スニペットを追加し、以下の HTML コードを貼り付けます。

  1. <%{
  2. %>

  4. /* フォントサイズを定義するクラス */

  6. <style>
  7. .商品-リンク {
  8. text-decoration: なし;
  9. フォント-size: 1rem;
  10. }

  12. /* カードレイアウトを定義するクラス */

  14. .商品-カード {
  15. display: grid;
  16. grid-テンプレート-columns: 繰り返し(3, 1fr);
  17. grid-auto-rows: auto;
  18. gap: 0。5rem;
  19. }

  21. /* 戻るボタンを取得するクラス */

  23. .no_record_wrapper {
  24. display: なし;
  25. }

  27. /* 「データが追加されていません」というテキストを削除するクラス */

  29. .row。reportfullwidth。カスタム-レポート。zc-カード-レポート
  30. {
  31. background-color: white;
  32. }

  34. /* 各カード内の詳細を定義するクラス */

  36. .商品-カード {
  37. 箱-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0。2);
  38. transition: 0。3s;
  39. width: 70%;
  40. height: fit-content;
  41. text-align: center;
  42. padding: 1rem;
  43. float: left;
  44. margin: 25px;
  45. }

  47. /* 商品名と「カートに追加」テキストの間に余白を追加するクラス */

  49. .商品-カード .商品-container-カード {
  50. padding: 1rem;
  51. }

  53. /* 画像サイズを定義するクラス */

  55. .商品-header-画像 {
  56. display: block;
  57. margin: auto;
  58. max-width: 150px;
  59. height: 60%;
  60. }
  61. </style>

  63. /* レポートから画像を取得するクラス */

  65. <div クラス='商品-カード'>
  66. <%
  67. for each 商品 in 商品[ID != null]
  68. {
  69. var = 商品。画像。getprefix('\' lowqual').getsuffix('<img src = \'').replaceAll('/sharedBy/appLinkName/viewLinkName/fieldName',Zoho。appuri + 'All_Products/Image');
  70. %>

  72. /* 上記スニペットで取得した各カード内に商品画像を表示するクラス */

  74. <div クラス='商品-カード'>
  75. <img src=<%=var%> クラス='商品-header-画像' alt=<%=商品。商品%>/>
  76. <div クラス='商品-container-カード'>
  77. <h4><b><%=商品。商品%></b></h4>
  78. /* 「カートに追加」をクリックしたときにフォームを開くアクション */

  80. <p><a クラス='商品-リンク' href='#Form:商品?zc_LoadIn=dialog&商品=<%=商品。ID%>'>カートに追加</a></p>
  81. </div>
  82. </div>
  83. <%
  84. }
  85. %>
  86. </div>
  87. <%
  88. }%>
9.My カートレポートを埋め込むページ上で、下図のように HTML スニペットと並べて配置します。


10. ワークフローを作成し、商品フォームの読み込み時に、数量に値「1」を設定し、商品価格を自動入力するようにします。


11. 新しいアクションを追加をクリックし、次のスニペットを Deluge エディターに追加します。
  1. // 選択された商品の詳細を取得
  2. productDetails = 商品[ID == input。商品];
  3. // 商品の詳細をフォーム項目に代入
  4. input。価格 = productDetails。価格;
  5. input。数量 = 1;
  6. input。合計 = productDetails。価格;
  7. // 現在のユーザーの商品を追跡するためだけに使用するメール項目を非表示にする
  8. 隠す メール;
  9. // 手動更新を防ぐため、価格と合計の項目を無効にする
  10. 無効にする 価格;
  11. 無効にする 合計;
12. 次に、条件を設定し、上記スクリプトが商品の値が null と等しくない場合にのみ実行されるようにします。


13. 次に、別のワークフローを追加し、数量が更新されたときに合計を計算するようにします。


14. 新しいアクションを追加をクリックし、次のスニペットを追加します。
  1. input。合計 = input。数量 * input。価格;
15. 次に、ワークフローを作成し、商品がカートに追加された後にユーザーを商品 Listingページへリダイレクトするようにします。


16. [新しいアクションを追加] をクリックし、Deluge Script を選択して、次のスクリプトをエディタに追加します:
  1. openUrl('https://creatorapp.zoho.com/<owner-name>/<app-linkname>/#Product_Listing','same window');
  2. 更新する;
17. 次に、注文フォームにワークフローを追加し、選択した商品のサブフォーム行を追加します。


18. [新しいアクションを追加] をクリックし、次のスニペットを追加します:
  1. // メール項目を非表示にする
  2. 隠す 商品。メール;
  3. // 選択した商品でサブフォーム行を挿入する
  4. rows = コレクション();
  5. // 合計を後で計算するための初期値を宣言する
  6. sum = 0。0;
  7. // 現在のユーザーの 商品 フォームのデータをループし、値を取得してサブフォームに挿入する
  8. for each rec in 商品[メール == Zoho。loginuserid]
  9. {
  10. row1 = 順番。商品();
  11. row1。商品=rec。商品;
  12. row1。価格=rec。価格;
  13. row1。数量=rec。数量;
  14. row1。合計=rec。合計;
  15. rows。insert(row1);
  16. sum = sum + rec。合計;
  17. }
  18. input。商品。insert(rows);
  19. input。合計 = sum;
19. 次に、注文フォームで選択した商品が変更されたときに価格を更新するワークフローを追加します。


20. [新しいアクションを追加] をクリックし、次のスニペットを追加します:
  1. row。価格=row。商品。価格;
21. 次に、注文フォームで選択した数量が変更されたときに価格を更新し、選択した商品の合計費用を計算するワークフローを追加します。


22. [新しいアクションを追加] をクリックし、次のスニペットを追加します:
  1. if(row。数量 != 0 && row。数量 != null)
  2. {
  3. row。費用=row。数量 * row。価格;
  4. }
  5. input。合計 = input。商品。sum(費用);
23. 最後に、注文が確定した後に商品フォームからデータを削除するワークフローを追加します。


24. [新しいアクションを追加] > Deluge Script をクリックし、次のスクリプトをエディタに追加します:
  1. 削除 差出人 商品[ID != 0];
  2. openUrl('https://creatorapp.zoho.com/<app-owner>/<app-linkname>/#Product_Listing','parent window');

動作を確認する


注意事項

  1. カスタムカードレイアウトは、同様の方法でZML スニペットを使用して実装することもできます。
  2. 商品フォームは、スタンドアロンコンポーネントとして表示されないように、顧客から非表示にすることができます。
  1. ページ
  2. Deluge

    Zoho CRM 管理者向けトレーニング

    「導入したばかりで基本操作や設定に不安がある」、「短期間で集中的に運用開始できる状態にしたい」、「運用を開始しているが再度学び直したい」 といった課題を抱えられているユーザーさまに向けた少人数制のオンライントレーニングです。

    日々の営業活動を効率的に管理し、導入効果を高めるための方法を学びましょう。

    Zoho CRM Training



              Zoho Campaigns Resources

                Zoho WorkDrive Resources




                  • Desk Community Learning Series


                  • Digest


                  • Functions


                  • Meetups


                  • Kbase


                  • Resources


                  • Glossary


                  • Desk Marketplace


                  • MVP Corner


                  • Word of the Day


                  • Ask the Experts






                          Latest Feature Updates



                                  Resources

                                  Videos

                                  Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                  eBooks

                                  Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                  Webinars

                                  Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                  CRM Tips

                                  Make the most of Zoho CRM with these useful tips.