From 747fe52282444f4edbd81cc8f5b84ac8e7389391 Mon Sep 17 00:00:00 2001
From: Robert Field <robertfield@quadrimular.com>
Date: Mon, 27 Nov 2023 18:35:20 +0000
Subject: [PATCH] docs: updated docs with placeholders for new how tos (#144)

---
 .../docs/products/PXM/_category_.json         |   9 ++
 .../docs/products/PXM/how-to/_category_.json  |   8 ++
 .../PXM/how-to/storefront-show-products.mdx   | 106 ++++++++++++++++++
 .../docs/products/_category_.json             |   8 ++
 .../docs/products/accounts/_category_.json    |   8 ++
 .../products/accounts/how-to/_category_.json  |   8 ++
 .../how-to/storefront-customer-profiles.mdx   |   9 ++
 .../cart-and-checkout/_category_.json         |   8 ++
 .../cart-and-checkout/how-to/_category_.json  |   8 ++
 .../how-to/storefront-customer-profiles.mdx   |   9 ++
 .../docs/products/orders/_category_.json      |   8 ++
 .../products/orders/how-to/_category_.json    |   8 ++
 .../how-to/storefront-customer-profiles.mdx   |   9 ++
 .../docs/products/promotions/_category_.json  |   8 ++
 .../promotions/how-to/_category_.json         |   8 ++
 .../how-to/storefront-customer-profiles.mdx   |   9 ++
 16 files changed, 231 insertions(+)
 create mode 100644 apps/composable-cli-docs/docs/products/PXM/_category_.json
 create mode 100644 apps/composable-cli-docs/docs/products/PXM/how-to/_category_.json
 create mode 100644 apps/composable-cli-docs/docs/products/PXM/how-to/storefront-show-products.mdx
 create mode 100644 apps/composable-cli-docs/docs/products/_category_.json
 create mode 100644 apps/composable-cli-docs/docs/products/accounts/_category_.json
 create mode 100644 apps/composable-cli-docs/docs/products/accounts/how-to/_category_.json
 create mode 100644 apps/composable-cli-docs/docs/products/accounts/how-to/storefront-customer-profiles.mdx
 create mode 100644 apps/composable-cli-docs/docs/products/cart-and-checkout/_category_.json
 create mode 100644 apps/composable-cli-docs/docs/products/cart-and-checkout/how-to/_category_.json
 create mode 100644 apps/composable-cli-docs/docs/products/cart-and-checkout/how-to/storefront-customer-profiles.mdx
 create mode 100644 apps/composable-cli-docs/docs/products/orders/_category_.json
 create mode 100644 apps/composable-cli-docs/docs/products/orders/how-to/_category_.json
 create mode 100644 apps/composable-cli-docs/docs/products/orders/how-to/storefront-customer-profiles.mdx
 create mode 100644 apps/composable-cli-docs/docs/products/promotions/_category_.json
 create mode 100644 apps/composable-cli-docs/docs/products/promotions/how-to/_category_.json
 create mode 100644 apps/composable-cli-docs/docs/products/promotions/how-to/storefront-customer-profiles.mdx

diff --git a/apps/composable-cli-docs/docs/products/PXM/_category_.json b/apps/composable-cli-docs/docs/products/PXM/_category_.json
new file mode 100644
index 00000000..3e3fe2ae
--- /dev/null
+++ b/apps/composable-cli-docs/docs/products/PXM/_category_.json
@@ -0,0 +1,9 @@
+{
+  "label": "PXM",
+  "collapsible": false,
+  "position": 1,
+  "link": {
+    "type": "generated-index",
+    "description": "Composable starter storefront powered by Elastic Path"
+  }
+}
diff --git a/apps/composable-cli-docs/docs/products/PXM/how-to/_category_.json b/apps/composable-cli-docs/docs/products/PXM/how-to/_category_.json
new file mode 100644
index 00000000..ac6ac622
--- /dev/null
+++ b/apps/composable-cli-docs/docs/products/PXM/how-to/_category_.json
@@ -0,0 +1,8 @@
+{
+  "label": "How-To",
+  "collapsible": false,
+  "position": 1,
+  "link": {
+    "type": "generated-index"
+  }
+}
diff --git a/apps/composable-cli-docs/docs/products/PXM/how-to/storefront-show-products.mdx b/apps/composable-cli-docs/docs/products/PXM/how-to/storefront-show-products.mdx
new file mode 100644
index 00000000..2d02c274
--- /dev/null
+++ b/apps/composable-cli-docs/docs/products/PXM/how-to/storefront-show-products.mdx
@@ -0,0 +1,106 @@
+---
+sidebar_position: 1
+title: "Storefront: Show Products"
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# How to display products on your storefront
+
+In this tutorial, you'll learn how to display products in your storefront using the PXM (Product Experience Management) REST API.
+
+## Overview
+
+Using the PXM REST API, you can display products in your storefront with their images, prices, and other information.
+
+### Scenario
+
+You want your customers to be able to see products in your storefront:
+
+- List filtered products
+- Display product prices
+- Display a single product by ID
+
+## Prerequisites
+
+### Elastic Path Products
+
+It's assumed that you already have an Elastic Path account setup with a published catalog. If not, you can [sign up for a free trial](https://useast.cm.elasticpath.com/free-trial).
+
+It's also assumed you already have a storefront set up. It can be a custom tech stack or using or Composable Starter. If you don’t have a storefront set up, you can use our [Composable Starter](/docs/composable-starter/storefront-starter) to get started.
+
+### JS SDK
+This guide includes code snippets to send requests to your Elastic Path products using our JavaScript SDK.
+
+If you follow the JavaScript code blocks, it’s assumed you already have JS SDK installed and have created an instance of the client gateway.
+
+### React Shopper Hooks
+
+This guide also includes code snippets to send requests to your Elastic Path products using React Shopper Hooks.
+
+If you follow the React Shopper Hooks code blocks, it's assumed you already have React Shopper Hooks installed and have used ElasticPathProvider higher in your component tree.
+
+---
+
+## List Products
+
+You can list products in your storefront using the [PXM catalog view (shopper) endpoints](https://elasticpath.dev/docs/pxm/catalogs/shopper-catalog/catalog-shopper-overview).
+
+
+<Tabs>
+  <TabItem value="js-sdk" label="JS SDK">
+
+    ```typescript
+    client.ShopperCatalog.Products.All().then((productPage) => {
+      console.log('productPage', productPage)
+    })
+    ```
+
+  </TabItem>
+
+  <TabItem value="elastic-path-react" label="Elastic Path React">
+
+    ```tsx
+    import { useProducts } from "@elasticpath/react-shopper-hooks"
+
+    export default function Products() {
+    const { data, meta, isLoading } = useProducts()
+
+      return (
+        <div>
+          {isLoading && <span>Loading...</span>}
+          {data && !data.length && <span>No Products</span>}
+          {data && data.length > 0 && (
+            <ul>
+              {data.map((product) => (
+                <li key={product.id}>{product.attributes.title}</li>
+              ))}
+            </ul>
+          )}
+        </div>
+      )
+  }
+  ```
+
+  </TabItem>
+  <TabItem value="fetch" label="Fetch API">
+
+    ```js
+    fetch("https://useast.api.elasticpath.com/catalog/products", {
+        headers: {
+        "Content-Type": "application/json",
+        Authorization: "Bearer XXXX"
+      }
+    }).then(response => response.json())
+      .then(data => console.log(data));
+    ```
+
+  </TabItem>
+</Tabs>
+
+This endpoint doesn't require any parameters, although it support additional options for pagination, filters and sorting. More explanations can be found in the [API reference](https://elasticpath.dev/docs/pxm/catalogs/shopper-catalog/get-all-products)
+
+### Filtering Products
+
+You can filter products by using the `filter` query parameter. For example, to filter products by category, you can use the `category` filter:
\ No newline at end of file
diff --git a/apps/composable-cli-docs/docs/products/_category_.json b/apps/composable-cli-docs/docs/products/_category_.json
new file mode 100644
index 00000000..afd1a2fd
--- /dev/null
+++ b/apps/composable-cli-docs/docs/products/_category_.json
@@ -0,0 +1,8 @@
+{
+  "label": "Elastic Path Products",
+  "position": 1.5,
+  "link": {
+    "type": "generated-index",
+    "description": "Composable starter storefront powered by Elastic Path"
+  }
+}
diff --git a/apps/composable-cli-docs/docs/products/accounts/_category_.json b/apps/composable-cli-docs/docs/products/accounts/_category_.json
new file mode 100644
index 00000000..0e687551
--- /dev/null
+++ b/apps/composable-cli-docs/docs/products/accounts/_category_.json
@@ -0,0 +1,8 @@
+{
+  "label": "Accounts",
+  "collapsible": false,
+  "position": 2,
+  "link": {
+    "type": "generated-index"
+  }
+}
diff --git a/apps/composable-cli-docs/docs/products/accounts/how-to/_category_.json b/apps/composable-cli-docs/docs/products/accounts/how-to/_category_.json
new file mode 100644
index 00000000..ac6ac622
--- /dev/null
+++ b/apps/composable-cli-docs/docs/products/accounts/how-to/_category_.json
@@ -0,0 +1,8 @@
+{
+  "label": "How-To",
+  "collapsible": false,
+  "position": 1,
+  "link": {
+    "type": "generated-index"
+  }
+}
diff --git a/apps/composable-cli-docs/docs/products/accounts/how-to/storefront-customer-profiles.mdx b/apps/composable-cli-docs/docs/products/accounts/how-to/storefront-customer-profiles.mdx
new file mode 100644
index 00000000..768ac6a6
--- /dev/null
+++ b/apps/composable-cli-docs/docs/products/accounts/how-to/storefront-customer-profiles.mdx
@@ -0,0 +1,9 @@
+---
+sidebar_position: 1
+title: "Storefront: Customer Profile"
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# TODO
\ No newline at end of file
diff --git a/apps/composable-cli-docs/docs/products/cart-and-checkout/_category_.json b/apps/composable-cli-docs/docs/products/cart-and-checkout/_category_.json
new file mode 100644
index 00000000..8444edbe
--- /dev/null
+++ b/apps/composable-cli-docs/docs/products/cart-and-checkout/_category_.json
@@ -0,0 +1,8 @@
+{
+  "label": "Cart and Checkout",
+  "collapsible": false,
+  "position": 3,
+  "link": {
+    "type": "generated-index"
+  }
+}
diff --git a/apps/composable-cli-docs/docs/products/cart-and-checkout/how-to/_category_.json b/apps/composable-cli-docs/docs/products/cart-and-checkout/how-to/_category_.json
new file mode 100644
index 00000000..ac6ac622
--- /dev/null
+++ b/apps/composable-cli-docs/docs/products/cart-and-checkout/how-to/_category_.json
@@ -0,0 +1,8 @@
+{
+  "label": "How-To",
+  "collapsible": false,
+  "position": 1,
+  "link": {
+    "type": "generated-index"
+  }
+}
diff --git a/apps/composable-cli-docs/docs/products/cart-and-checkout/how-to/storefront-customer-profiles.mdx b/apps/composable-cli-docs/docs/products/cart-and-checkout/how-to/storefront-customer-profiles.mdx
new file mode 100644
index 00000000..768ac6a6
--- /dev/null
+++ b/apps/composable-cli-docs/docs/products/cart-and-checkout/how-to/storefront-customer-profiles.mdx
@@ -0,0 +1,9 @@
+---
+sidebar_position: 1
+title: "Storefront: Customer Profile"
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# TODO
\ No newline at end of file
diff --git a/apps/composable-cli-docs/docs/products/orders/_category_.json b/apps/composable-cli-docs/docs/products/orders/_category_.json
new file mode 100644
index 00000000..4c5a4c12
--- /dev/null
+++ b/apps/composable-cli-docs/docs/products/orders/_category_.json
@@ -0,0 +1,8 @@
+{
+  "label": "Orders",
+  "collapsible": false,
+  "position": 4,
+  "link": {
+    "type": "generated-index"
+  }
+}
diff --git a/apps/composable-cli-docs/docs/products/orders/how-to/_category_.json b/apps/composable-cli-docs/docs/products/orders/how-to/_category_.json
new file mode 100644
index 00000000..ac6ac622
--- /dev/null
+++ b/apps/composable-cli-docs/docs/products/orders/how-to/_category_.json
@@ -0,0 +1,8 @@
+{
+  "label": "How-To",
+  "collapsible": false,
+  "position": 1,
+  "link": {
+    "type": "generated-index"
+  }
+}
diff --git a/apps/composable-cli-docs/docs/products/orders/how-to/storefront-customer-profiles.mdx b/apps/composable-cli-docs/docs/products/orders/how-to/storefront-customer-profiles.mdx
new file mode 100644
index 00000000..768ac6a6
--- /dev/null
+++ b/apps/composable-cli-docs/docs/products/orders/how-to/storefront-customer-profiles.mdx
@@ -0,0 +1,9 @@
+---
+sidebar_position: 1
+title: "Storefront: Customer Profile"
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# TODO
\ No newline at end of file
diff --git a/apps/composable-cli-docs/docs/products/promotions/_category_.json b/apps/composable-cli-docs/docs/products/promotions/_category_.json
new file mode 100644
index 00000000..15897b0a
--- /dev/null
+++ b/apps/composable-cli-docs/docs/products/promotions/_category_.json
@@ -0,0 +1,8 @@
+{
+  "label": "Promotions",
+  "collapsible": false,
+  "position": 5,
+  "link": {
+    "type": "generated-index"
+  }
+}
diff --git a/apps/composable-cli-docs/docs/products/promotions/how-to/_category_.json b/apps/composable-cli-docs/docs/products/promotions/how-to/_category_.json
new file mode 100644
index 00000000..ac6ac622
--- /dev/null
+++ b/apps/composable-cli-docs/docs/products/promotions/how-to/_category_.json
@@ -0,0 +1,8 @@
+{
+  "label": "How-To",
+  "collapsible": false,
+  "position": 1,
+  "link": {
+    "type": "generated-index"
+  }
+}
diff --git a/apps/composable-cli-docs/docs/products/promotions/how-to/storefront-customer-profiles.mdx b/apps/composable-cli-docs/docs/products/promotions/how-to/storefront-customer-profiles.mdx
new file mode 100644
index 00000000..768ac6a6
--- /dev/null
+++ b/apps/composable-cli-docs/docs/products/promotions/how-to/storefront-customer-profiles.mdx
@@ -0,0 +1,9 @@
+---
+sidebar_position: 1
+title: "Storefront: Customer Profile"
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# TODO
\ No newline at end of file