# 概要 - スクリーン、データベース、レイアウト設定、ユースケース

### 機能テンプレート概要

ショッピングカート付きのストアは、アプリに完全なeコマース体験をもたらします。ユーザーは複数のカテゴリの製品を閲覧し、それらの製品の詳細を表示し、ショッピングカートに追加し、Stripeで購入することができます。このテンプレートは、アプリを通じて販売している商品（物理的またはデジタル）に最適です。

### 画面概要

📚 **インストラクション画面**

クイックなヒント、ヘルプドキュメント、および興味を持つかもしれない関連するテンプレートでテンプレートの概要を素早く把握します。*この画面はいつでも削除できます。*

#### ユーザー画面

🏪 **すべての製品**

すべてのカテゴリの製品を表示

🔎 **カテゴリ**

特定のカテゴリに絞り込んだ製品を表示

👚 **製品の詳細**

製品の詳細を確認し、カートに追加

🛒 **カート**

カート内の製品を表示して削除したり、チェックアウト

💳 **チェックアウト**

ユーザーは配送先の住所を追加し、Stripeを使用してクレジットカード番号を入力し、購入を完了できます

🎉 **おめでとう**

購入が完了したときの成功画面

👤 **ショップにサインインするモーダル**

ユーザーがサインインするように促すモーダル（ショッピングカートではユーザーがログインしている必要があります）

### データベース概要

ショッピングカート付きのストアテンプレートには、サンプルデータが含まれたデータベースが付属しています。各Adaloデータベースにはコレクションが含まれ、各コレクションには関連するプロパティが付属しています。コレクション間の必要な関係も設定されています。

{% hint style="success" %}
**データベースに関する重要な注意:**

機能テンプレートからコレクションまたはプロパティを**削除**すると、アプリの機能に影響する可能性があります。

機能テンプレートにコレクションまたはプロパティを**追加**すると、アプリの機能に影響しません。
{% endhint %}

以下は含まれるコレクションとそのプロパティの概要です。コレクション名は太字で表示され、説明が含まれています。プロパティには、名前、プロパティタイプ（角かっこ内）、説明が含まれています。

#### 基本的なコレクションとプロパティ:

#### 👥 **ユーザー**

ユーザーコレクションは、すべてのAdaloアプリに自動的に付属しています。このコレクションには、アプリを使用するすべてのユーザーに関連する情報が格納されます。この情報は、ユーザーがアプリを使用するためにサインアップするときに最初に収集されます。

* Email \[テキスト] — ユーザーのメールアドレス。
* Password \[暗号化] — ユーザーがアプリにログインするためのパスワード。これは管理者を含め、誰にも表示されません。
* Username \[テキスト] — ユーザーのユーザー名。
* Full Name \[テキスト] — ユーザーの名前と姓。
* Profile Photo \[画像] — ユーザーのプロフィール写真。
* Orders \[注文との一対多の関係] — 各ユーザーのすべてのアクティブおよび完了した注文。 注文コレクションには、現在の注文と過去の注文の両方が表示されます。現在の注文は、チェックアウトを完了していないショッピングカートです。完了した注文は、ユーザーがチェックアウトを完了し、アイテムを支払ったものです。
* 名前 \[テキスト] — これは自動的にユーザーの名前と注文が作成された日時に設定されます
* ユーザー \[One-to-Many Relationship] — 注文の所有者であるユーザー
* 完了 \[True / False] — 注文が完了しているかどうか。デフォルトではfalseに設定されています。
* 注文アイテム \[One-to-Many Relationship] — 注文内に含まれる製品
* 配送先住所 \[Location] — 注文を配送する場所。場所の機能はすべてのAdaloプランで利用できるわけではなく、このプロパティを完全に使用するにはアップグレードが必要になる場合があります。また、Google Maps APIキーが必要です。
* 二次住所情報 \[テキスト] — ユーザーがアパート番号、スイート番号、またはその他の住所情報を入力する場所です。

#### 🛒 注文アイテム

注文アイテムコレクションには、現在の注文と過去の注文の両方が表示されます。現在の注文は、チェックアウトを完了していないショッピングカートです。完了した注文は、ユーザーがチェックアウトを完了し、アイテムを支払ったものです。

* 名前 \[テキスト] — これは製品が追加されると自動的に製品名に設定されます
* 価格 \[数値] — これは製品が追加されると自動的に製品の価格に設定されます。カート内の注文の合計金額を計算するために使用されます。
* 注文 \[One-to-Many Relationship] — 各注文アイテムは1つの注文に関連付けられています
* 製品 \[One-to-Many Relationship] — 各注文アイテムは、ユーザーがカートに追加していた製品に関連付けられています。

#### 📋 カテゴリ

カテゴリコレクションは、ストアの異なるカテゴリを作成する場所です。追加する各製品は特定のカテゴリに関連付けることができます。

* 名前 \[テキスト] — これはカテゴリ名です（例: アパレル）
* バナー \[画像] — 各カテゴリ画面の上部に配置される画像
* 製品 \[One-to-Many Relationship] — そのカテゴリに関連付けられた製品

#### 📋 製品

製品コレクションは、販売しているすべての製品を追加する場所です。

* 名前 \[テキスト] — 製品の名前
* 説明 \[テキスト] — 製品の簡単な説明および潜在的な購入者が知りたいと思う詳細
* 価格 \[数値] — 製品の価格
* 画像 \[画像] — 製品の画像
* カテゴリ \[One-to-Many Relationship] — 各製品は1つのカテゴリに属しています
* 注文アイテム \[One-to-Many Relationship] — この製品に関連付けられた注文アイテム

## レイアウト設定

ソーシャルメディアフィード機能テンプレートの各画面は、レスポンシブデザインを使用して作成されています。画面はどのデバイスやタブレットでも見栄えがします。

ほとんどの画面はカスタムレイアウトで設計されています。画面に新しいコンポーネントを追加すると、他の画面サイズに影響を与えることがあります。

### レイアウトの概要

異なる画面サイズのレイアウトを表示または編集するには — 画面タイトルをクリックしてドロップダウンを表示します。

<figure><img src="/files/2X5wCFBj9xIhYOWQYkew" alt="" width="311"><figcaption></figcaption></figure>

このテンプレートのデフォルトビューはデスクトップです。ビルダーで1つの画面の画面サイズを変更しても、キャンバス上の他の画面の画面サイズは変更されません。

#### 非表示コンポーネント

<figure><img src="/files/TSkjCvv3JEJBo4HgCJep" alt="" width="476"><figcaption></figcaption></figure>

各ビューには、デスクトップには表示されないがモバイルで表示されるコンポーネントがある場合があります。これらは左側パネルでグレーアウトされ、アイコンで示されます。

どのデバイスコンポーネントが表示されているかを確認する別の方法は、こちらのレイアウトタブです：

<figure><img src="/files/0fkpndVuEv0rWuupgZFN" alt="" width="540"><figcaption></figcaption></figure>

#### カスタムレイアウト

<figure><img src="/files/QGX74mlUmjqR6a9rV66B" alt="" width="347"><figcaption></figcaption></figure>

一部のコンポーネントには、画面サイズに基づいたカスタムレイアウトが付属しています。これらの設定を表示するには、レイアウトタブを確認し、カスタムレイアウト設定までスクロールしてください。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.adalo.com/ja/feature-templates/store-with-shopping-cart/overview-screens-database-layout-settings-use-cases.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
