カスタムカードレイアウトを活用したeコマースアプリ

カスタムカードレイアウトを活用したeコマースアプリ

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

要件

必要な製品をカートに追加するボタンを使用して、カードレイアウトで製品を表示します。

使用ケース

eコマースビジネスは、注文の処理にオーダーマネージメントアプリを使用しています。商品は、商品画像が表示されるカードレイアウトで表示する必要があり、お客様は必要な商品をカートに追加して注文を行うことができます。

手順


フォーム

フォームリンク名

フィールドタイプ

フィールド名

フィールドリンク名

製品

製品

単行

製品

製品

イメージ

イメージ

イメージ

通貨

価格

価格

項目

項目

 

検索

製品

製品

番号

数量

数量

通貨

価格

価格

通貨

合計

合計

メール

メール

メール

注文

注文

名前

名前

名前

住所

住所

住所

電話

電話

電話番号

サブフォーム

項目
(既存のフォーム)

項目

通貨

合計

合計


2. メールフィールドの初期値をItemsフォームに設定します。初期値は${zoho.loginuserid}です。詳細はこちら。

3. 名前を変更して、Items ReportをMy Cartに設定し、Quick View > Layoutの下でLayoutを設定します。


4. QuickView > アクションに移動し、リネームしてDeleteアクションをカートから削除に変更し、追加のアクション（Edit、Duplicateなど）を削除します。



5. フィルターを設定してください。My Cartレポートのレポートプロパティにおいて、下記のようにしてください。これにより、顧客がレポート内で自分の商品のみを見ることを確実にします。


6. ページを作成し、商品リストという名前を付けます。

7. ボタンを追加し、注文を出すという名前を付け、アクションタブで以下のパラメータを設定します。


URLは、注文フォームにリダイレクトする必要があります。形式は以下の通りです。
https://creatorapp.zoho.com/<アプリ所有者名>/<アプリリンク名>/#Form:Order
8. HTMLスニペットを追加し、以下のHTMLコードを貼り付けてください。

  1. <%{ 翻訳します。
  2. ＞

  4. /* 文字の長さを定義するクラス */

  6. <スタイル>
  7.         .product-link { スタイル }
  8. テキストの装飾をなしにする
  9. フォントサイズ：1rem;
  10. 英語のテキストを日本語に翻訳し、丁寧な、ビジネスに適した、自然な表現を使用してください。HTMLタグや属性を変更しないでください。追加のコンテンツを生成しないでください。英語のテキストが他の言語に翻訳されないように注意してください。

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

  14. .product-cards {.product-cards（）}
  15. 表示：グリッド;
  16. grid-template-columns: 繰り返し(3, 1fr);
  17. grid-auto-rows: 自動;
  18. gap: 0.5rem;
  19. gap: 0.5rem;（ギャップ：0.5rem）
  20. 色付きの背景と左側に線を引いた枠を持つ文章を表示します。

  22. /* 戻ってきます */

  24. .no_record_wrapper { 付け加えられたレコードがない場合のラッパー}
  25.     表示：なし;
  26. さらなるヘルプが必要ですか？

  28. /* 追加されたレコードがありません */

  30. .row.reportfullwidth.custom-report.zc-card-report
    31. をご覧いただき、ありがとうございます。
  31. {（開始）
  32. 背景色：白色;
  33. 色付きの背景と左側に線を引いた枠を持つ、マージン1px、パディング2pxのリストを作成します。

  35. /* カードごとの詳細を定義するクラス */

  37. .product-card {
  38. .product-card {
  39. box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  40. box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  41. transition: 0.3秒;
  42. 幅：70％
  43. 高さ：fit-content;
  44. テキストを中央揃えにします。
  45. パディング：1rem;
  46. float: 左に位置;
  47. マージン：25px;
  48. 私たちは、テクニカルヘルプガイドの翻訳を行うために、あなたを担当させていただきます。HTMLコンテンツには英語のテキストが含まれていますので、英語のテキストを丁寧でビジネスに適した自然な表現で日本語に翻訳してください。HTMLタグや属性を変更しないでくださいし、追加のコンテンツを生成しないでください。英語のテキストが日本語に翻訳されていることを確認してください。

  50. /* 商品名と「カートに追加」テキストの間にスペースを追加するためのクラス */

  52. .product-card .product-container-card {
  53. .product-card .product-container-card {
  54. padding: 1rem;
  55. パディング：1rem;
  56. 英語のテキストを日本語に翻訳して、丁寧でビジネスに適した自然な表現を使用してください。HTMLタグや属性を変更したり、追加のコンテンツを生成しないでください。英語のテキストを日本語に翻訳するので、他の言語に翻訳しないでください。

  58. /* 画像の大きさを定義するクラス */

  60. .product-header-image {
  61. .product-header-image {
  62. 表示：ブロック;
  63. マージン：自動;
  64. 最大幅：150px;
  65. 高さ：60％
  66. 英語のテキストを日本語に翻訳して、丁寧でビジネス的な自然な言葉で伝えてください。HTMLタグや属性を変更したり、追加したりしないでください。英語のテキストを日本語に翻訳するだけで、他の言語に翻訳しないようにしてください。
  67. </style>

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

  71. <div class='product-cards'>
  72. <％
  73. IDがnullでないProductsのそれぞれの製品について
  74. ｛
  75. 変数 = product.Image.getprefix('\' lowqual').getsuffix('<img src = \'').replaceAll('/sharedBy/appLinkName/viewLinkName/fieldName',zoho.appuri + 'すべての製品/イメージ');
  76. ＞

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

  80. <div class='product-card'>
  81.    <img src=<%=var%> class='product-header-image' alt=<%=product.Product%>/>
  82.    <div class='product-container-card'>（製品コンテナカード）
  83.     <h4><b><%=product.Product%></b></h4>
  84.     <h4><b><%=product.Product%></b></h4>
  85.     /* カートに追加をクリックするとフォームを開くアクション */

  87. <p><a class='product-link' href='#Form:Items?zc_LoadIn=dialog&Product=<%=product.ID%>'>カートに追加</a></p>
  88.    </div>
  89.   </div>
  90. <％
  91. 背景色：RGB（245、245、245）、左側に2pxの線を引いた灰色、マージン：1px、パディング：2px
  92. ＞
  93. </div>
  94. <％ 
  95. 私たちは、技術的なヘルプガイドを英語から日本語に翻訳するために、あなたを翻訳者として行動させたいと思います。 英語のテキストを含むHTMLコンテンツを提供します。 英語のテキストを丁寧で、ビジネスに適した自然な方法で日本語に翻訳する必要があります。 HTMLタグや属性を変更しないでください。また、追加のコンテンツを生成しないでください。 英語のテキストが日本語に翻訳されており、他の言語に翻訳されていないことを確認してください。


10. ワークフローを作成して、Itemsフォームがロードされたときに、数量に値「1」、製品の価格を設定します。


11. 新しいアクションを追加をクリックし、delugeエディタに次のスニペットを追加します。
  1. // 選択された製品の詳細を取得する
  2. productDetails = Products[ID == input.Product];
  3. // フォームフィールドに製品の詳細を割り当てる
  4. input.Price = productDetails.Price;
  5. input.Quantity = 1;
  6. input.Total = productDetails.Price;
  7. // 現在のユーザーの製品を追跡するためにのみ使用されるため、メールフィールドを非表示にする
  8. hide Email;
  9. // 価格と合計フィールドを手動更新から無効にする
  10. disable Price;
  11. disable Total;
12. これにより、上記のスクリプトが商品の値がnullでない場合にのみ実行されるように条件を設定します。


13. 別のワークフローを追加して、数量が更新されたら合計を計算しましょう。


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


16. 新しいアクションを追加をクリックして、Deluge スクリプトを選択し、エディターに次のスクリプトを追加します。
  1. openUrl('https://creatorapp.zoho.com/<owner-name>/<app-linkname>/#Product_Listing','same window');
  2. reload;
  1. openUrl('https://creatorapp.zoho.com/<owner-name>/<app-linkname>/#Product_Listing','同じウィンドウ');
  2. リロードする;
17. 今度は、Ordersフォームにワークフローを追加して、選択したアイテムをサブフォーム行として追加しましょう。


18. 新しいアクションを追加をクリックし、以下のスニペットを追加します。
  1. // メールフィールドを非表示にする
  2. hide Items.Email;
  3. // 選択したアイテムをサブフォーム行に挿入する
  4. rows = Collection();
  5. // 後で合計を計算するための初期値を宣言する
  6. sum = 0.0;
  7. // 現在のユーザーのItemsフォームのレコードを反復して値を取得し、サブフォームに挿入する
  8. for each  rec in Items[Email == zoho.loginuserid]
  9. {
  10. row1 = Order.Items();
  11. row1.Product=rec.Product;
  12. row1.Price=rec.Price;
  13. row1.Quantity=rec.Quantity;
  14. row1.Total=rec.Total;
  15. rows.insert(row1);
  16. sum = sum + rec.Total;
  17. }
  18. input.Items.insert(rows);
  19. input.Total = sum;
19. ワークフローを追加して、Ordersフォームで選択した商品が変更されたときに価格を更新しましょう。


20. 新しいアクションを追加をクリックし、以下のスニペットを追加します。
  1. row.Price=row.Products.Price;（row.Priceはrow.Products.Priceと等しくなります）
21. 選択された数量が注文フォーム内で変更された場合に価格を更新し、選択されたアイテムの合計コストを計算するワークフローを追加しましょう。


22. 新しいアクションを追加をクリックし、次のスニペットを追加します。
  1. もし（row.Quantityが0でなく、row.Quantityがnullでない場合）
  2. {
  3. row.Cost = row.Quantity × row.Price;
  4. }
  5. input.Total = input.Itemsの合計（Cost）;
最後に、注文が確定した後にItemsフォームからレコードを削除するためのワークフローを追加しましょう。


24. 新しいアクションを追加をクリックして、Delugeスクリプトを選択し、エディターに以下のスクリプトを追加します。
  1. IDが0以外のアイテムを削除します。
  2. openUrl('https://creatorapp.zoho.com/<app-owner>/<app-linkname>/#Product_Listing','親ウィンドウ');

どのように動作するかを見てみましょう


注意事項

  1. カスタムカードレイアウトも、ZMLスニペットを用いて似たような方法で実装することができます。
  2. 「アイテム」フォームは、カスタマーから非表示にすることで、単独のコンポーネントとして表示されるのを防ぐことができます。

関連リンク

  1. ページ
  2. デルージュ

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

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

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

    Zoho CRM Training




              Zoho Desk Resources

              • Desk Community Learning Series


              • Digest


              • Functions


              • Meetups


              • Kbase


              • Resources


              • Glossary


              • Desk Marketplace


              • MVP Corner


              • Word of the Day






                        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.