{
+ const [cart, setCart] = useState([]);
+
+ useEffect(() => {
+ const commerce = new Commerce(process.env.REACT_APP_CHEC_PUBLIC_KEY);
+ commerce.cart.retrieve().then((cart) => setCart(cart));
+ }, []);
+
+ console.log(cart);
+
+ return (
+
+ Cart
+
+
+ Powered By Commerce.JS
+
+
+
+ );
+};
+
+export default CartModal;
diff --git a/src/pages/home/Home.css b/src/pages/home/Home.css
index e69de29..f1bf9fe 100644
--- a/src/pages/home/Home.css
+++ b/src/pages/home/Home.css
@@ -0,0 +1,3 @@
+.ion-page ion-grid.home {
+ padding-top: 44px;
+}
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
index 0a381d8..2ac3d95 100644
--- a/src/pages/home/Home.tsx
+++ b/src/pages/home/Home.tsx
@@ -29,25 +29,16 @@ const Home: React.FC = () => {
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
-
-
+
+
@@ -61,6 +52,7 @@ const Home: React.FC = () => {
sizeLg="6"
sizeXl="6"
key={product.id}
+ className="ion-no-padding"
>
diff --git a/src/pages/product/Product.tsx b/src/pages/product/Product.tsx
index ecaa8d4..b7c5f2c 100644
--- a/src/pages/product/Product.tsx
+++ b/src/pages/product/Product.tsx
@@ -1,5 +1,6 @@
import {
IonBackButton,
+ IonButton,
IonButtons,
IonCol,
IonContent,
@@ -13,9 +14,10 @@ import {
} from "@ionic/react";
import "./Product.css";
import Commerce from "@chec/commerce.js";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
import { RouteComponentProps } from "react-router";
import ProductListing from "../../components/product/listing/ProductListing";
+import { addModal } from "../../utils/modal";
interface ProductDetailPageProps
extends RouteComponentProps<{
@@ -27,6 +29,7 @@ const ProductDetail: React.FC = ({
location: { state },
}) => {
const [product, setProduct] = useState((state && state["product"]) || null);
+ const pageRef = useRef(null);
useEffect(() => {
const commerce = new Commerce(process.env.REACT_APP_CHEC_PUBLIC_KEY);
@@ -36,8 +39,14 @@ const ProductDetail: React.FC = ({
.catch((e) => console.error(e));
}, [match.params.id]);
+ useEffect(() => {
+ if (state && state["product"]) {
+ setProduct(state["product"]);
+ }
+ }, [state]);
+
return (
-
+
@@ -46,6 +55,15 @@ const ProductDetail: React.FC = ({
+
+ {
+ addModal("cart-modal", pageRef);
+ }}
+ >
+ Cart
+
+
diff --git a/src/utils/modal.tsx b/src/utils/modal.tsx
new file mode 100644
index 0000000..2b29557
--- /dev/null
+++ b/src/utils/modal.tsx
@@ -0,0 +1,12 @@
+import { modalController } from "@ionic/core";
+
+export const addModal = async (component, presentingElement) => {
+ if (presentingElement.current != null) {
+ const modal = await modalController.create({
+ component,
+ swipeToClose: true,
+ presentingElement: presentingElement.current,
+ });
+ await modal.present();
+ }
+};