Tidied up home styling and add product detail page

src/App.tsx

@@ -3,6 +3,8 @@ import { IonApp, IonRouterOutlet, setupConfig, isPlatform } from "@ionic/react";
 import { IonReactRouter } from "@ionic/react-router";
 import Home from "./pages/home/Home";
 
+import "./global.css";
+
 /* Core CSS required for Ionic components to work properly */
 import "@ionic/react/css/core.css";
 
@@ -21,6 +23,7 @@ import "@ionic/react/css/display.css";
 
 /* Theme variables */
 import "./theme/variables.css";
+import ProductDetail from "./pages/product/Product";
 
 if (isPlatform("desktop")) {
  setupConfig({
@@ -35,6 +38,7 @@ const App: React.FC = () => (
  <Route exact path="/home">
  <Home />
  </Route>
+ <Route path="/product/:id" component={ProductDetail} />
  <Route exact path="/">
  <Redirect to="/home" />
  </Route>

src/components/product/listing/ProductListing.css

@@ -0,0 +1,4 @@
+.product-listing .images img {
+ object-fit: cover;
+ border-radius: 0.5rem;
+}

src/components/product/listing/ProductListing.tsx

@@ -0,0 +1,47 @@
+import { IonCard, IonCol, IonGrid, IonRow } from "@ionic/react";
+import "./ProductListing.css";
+
+interface ProductListingProps {
+ product: any;
+}
+
+const ProductListing: React.FC<ProductListingProps> = ({ product }) => {
+ // console.log(product);
+ const { variants, assets, meta, related_products } = product;
+ const images = assets.filter(({ is_image }) => is_image);
+ // console.log(images);
+ return (
+ <IonGrid className="product-listing">
+ <IonRow>
+ <IonCol className="ion-hide-md-down" size="5">
+ Content
+ </IonCol>
+ <IonCol>
+ <IonGrid>
+ <IonRow className="images">
+ {images.map(({ id, url }) => {
+ return (
+ <IonCol
+ size="12"
+ sizeSm="12"
+ sizeMd="12"
+ sizeLg="12"
+ sizeXl="12"
+ key={id}
+ >
+ <img src={url} />
+ </IonCol>
+ );
+ })}
+ </IonRow>
+ </IonGrid>
+ </IonCol>
+ </IonRow>
+ <IonRow className="ion-hide-md-up">
+ <IonCol>Content</IonCol>
+ </IonRow>
+ </IonGrid>
+ );
+};
+
+export default ProductListing;

src/components/product/product-card/ProductCard.css

@@ -0,0 +1,27 @@
+.product-card img {
+ height: 300px;
+ width: 100%;
+ object-fit: cover;
+ border-radius: 0.5rem;
+}
+
+.product-card ion-card {
+ min-height: 200px;
+ box-shadow: none;
+ border-radius: 0;
+}
+
+.product-card ion-card-header {
+ padding: 6px 0 10px 0;
+ font-size: 1em;
+}
+
+.product-card ion-card-title {
+ font-size: 20px;
+ font-weight: 400;
+ font-family: "Inter";
+}
+
+.product-card .price {
+ font-size: 16px;
+}

src/components/product/product-card/ProductCard.tsx

@@ -0,0 +1,49 @@
+import {
+ IonCard,
+ IonCardContent,
+ IonCardHeader,
+ IonCardTitle,
+ IonCol,
+ IonGrid,
+ IonRow,
+} from "@ionic/react";
+import { useHistory } from "react-router";
+import "./ProductCard.css";
+
+interface ProductCardProps {
+ product: object;
+}
+
+const ProductCard: React.FC<ProductCardProps> = ({ product }) => {
+ const history = useHistory();
+ return (
+ <div className="product-card">
+ <IonCard
+ className="ion-no-margin ion-no-padding"
+ onClick={(e) => {
+ history.push(`/product/${product["id"]}`, {
+ product,
+ });
+ }}
+ >
+ {product["media"] != null && (
+ <img src={product["media"]["source"]} className="product-image" />
+ )}
+ <IonCardHeader>
+ <IonCardTitle>
+ <IonGrid>
+ <IonRow>
+ <IonCol>{product["name"]}</IonCol>
+ <IonCol className="ion-text-end price" size="4">
+ {product["price"]["formatted_with_symbol"]}
+ </IonCol>
+ </IonRow>
+ </IonGrid>
+ </IonCardTitle>
+ </IonCardHeader>
+ </IonCard>
+ </div>
+ );
+};
+
+export default ProductCard;

src/global.css

@@ -0,0 +1,2 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:wght@500&display=swap");

src/pages/home/Home.tsx

@@ -1,17 +1,21 @@
 import {
  IonCol,
  IonContent,
+ IonFooter,
  IonGrid,
  IonHeader,
+ IonIcon,
+ IonImg,
  IonPage,
  IonRow,
+ IonSplitPane,
  IonTitle,
  IonToolbar,
 } from "@ionic/react";
 import "./Home.css";
 import Commerce from "@chec/commerce.js";
 import { useEffect, useState } from "react";
-import ProductListing from "../../components/product-listing/ProductListing";
+import ProductCard from "../../components/product/product-card/ProductCard";
 
 const Home: React.FC = () => {
  const [products, setProducts] = useState([]);
@@ -27,33 +31,52 @@ const Home: React.FC = () => {
  <IonPage>
  <IonHeader>
  <IonToolbar>
- <IonTitle>ChopChop</IonTitle>
+ <IonTitle>
+ <img src="assets/chopchop.svg" height="28px" width="144px" />
+ </IonTitle>
  </IonToolbar>
  </IonHeader>
  <IonContent fullscreen>
  <IonHeader collapse="condense">
  <IonToolbar>
- <IonTitle size="large">ChopChop</IonTitle>
+ <IonTitle size="large">
+ <img src="assets/chopchop.svg" height="28px" />
+ </IonTitle>
  </IonToolbar>
  </IonHeader>
  <IonGrid>
  <IonRow>
- {products.map((product) => {
- return (
- <IonCol
- size="12"
- sizeSm="6"
- sizeMd="4"
- sizeLg="4"
- key={product.id}
- >
- <ProductListing product={product} />
- </IonCol>
- );
- })}
+ <IonCol className="ion-hide-md-down" size="5">
+ &nbsp;
+ </IonCol>
+ <IonCol>
+ <IonGrid>
+ <IonRow>
+ {products.map((product) => {
+ return (
+ <IonCol
+ size="12"
+ sizeSm="6"
+ sizeMd="6"
+ sizeLg="6"
+ sizeXl="6"
+ key={product.id}
+ >
+ <ProductCard product={product} />
+ </IonCol>
+ );
+ })}
+ </IonRow>
+ </IonGrid>
+ </IonCol>
  </IonRow>
  </IonGrid>
  </IonContent>
+ <IonFooter>
+ <IonToolbar>
+ <IonTitle>Powered By Commerce.JS</IonTitle>
+ </IonToolbar>
+ </IonFooter>
  </IonPage>
  );
 };

src/pages/product/Product.tsx

@@ -0,0 +1,66 @@
+import {
+ IonCol,
+ IonContent,
+ IonFooter,
+ IonGrid,
+ IonHeader,
+ IonPage,
+ IonRow,
+ IonTitle,
+ IonToolbar,
+} from "@ionic/react";
+import "./Product.css";
+import Commerce from "@chec/commerce.js";
+import { useEffect, useState } from "react";
+import { RouteComponentProps } from "react-router";
+import ProductCard from "../../components/product/listing/ProductListing";
+import ProductListing from "../../components/product/listing/ProductListing";
+
+interface ProductDetailPageProps
+ extends RouteComponentProps<{
+ id: string;
+ }> {}
+
+const ProductDetail: React.FC<ProductDetailPageProps> = ({
+ match,
+ location: { state },
+}) => {
+ const [product, setProduct] = useState((state && state["product"]) || null);
+
+ useEffect(() => {
+ const commerce = new Commerce(process.env.REACT_APP_CHEC_PUBLIC_KEY);
+ commerce.products
+ .retrieve(match.params.id)
+ .then((product) => setProduct(product))
+ .catch((e) => console.error(e));
+ }, []);
+
+ return (
+ <IonPage>
+ <IonHeader>
+ <IonToolbar>
+ <IonTitle>
+ <img src="assets/chopchop.svg" height="28px" width="144px" />
+ </IonTitle>
+ </IonToolbar>
+ </IonHeader>
+ <IonContent fullscreen>
+ <IonHeader collapse="condense">
+ <IonToolbar>
+ <IonTitle size="large">
+ <img src="assets/chopchop.svg" height="28px" />
+ </IonTitle>
+ </IonToolbar>
+ </IonHeader>
+ {product && <ProductListing product={product} />}
+ </IonContent>
+ <IonFooter>
+ <IonToolbar>
+ <IonTitle>Powered By Commerce.JS</IonTitle>
+ </IonToolbar>
+ </IonFooter>
+ </IonPage>
+ );
+};
+
+export default ProductDetail;

src/theme/variables.css

@@ -1,6 +1,16 @@
 /* Ionic Variables and Theming. For more info, please see:
 http:https://ionicframework.com/docs/theming/ */
 
+.font-sans {
+ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+ Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+.font-serif {
+ font-family: "EB Garamond", -apple-system, BlinkMacSystemFont, "Segoe UI",
+ Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
 /** Ionic CSS Variables **/
 :root {
  /** primary **/
@@ -74,6 +84,9 @@ http:https://ionicframework.com/docs/theming/ */
  --ion-color-light-contrast-rgb: 0, 0, 0;
  --ion-color-light-shade: #d7d8da;
  --ion-color-light-tint: #f5f6f9;
+
+ --ion-font-family: "Inter";
+ font-family: var(--ion-font-family) !important;
 }
 
 @media (prefers-color-scheme: dark) {