Feature - Dynamic Categories

next.config.js

@@ -26,8 +26,7 @@ module.exports = withOffline(
             target: 'serverless',
             images: {
                   domains: [
-                        backend_hostname,
-                        'https://via.placeholder.com'
+                        backend_hostname
                     ],
             },
         })

pages/index.js

@@ -3,8 +3,9 @@ import Link from 'next/link';
 import client from '../src/apollo/ApolloClient';
 import AddToCartButton from '../src/components/cart/AddToCartButton';
 import Hero from '../src/components/home/Hero';
+import Categories from '../src/components/home/Categories';
 import Image from '../src/components/Image';
-import { PRODUCTS_QUERY } from '../src/queries';
+import { PRODUCTS_QUERY, CATEGORIES_QUERY } from '../src/queries';
 
 const NewProducts = ({ products }) => {
     return (
@@ -46,24 +47,30 @@ const NewProducts = ({ products }) => {
 };
 
 const Index = (props) => {
-    const { products } = props;
+    const { products, categories } = props;
 
     return (
         <Layout>
             <Hero />
-            {/*<Categories/>*/}
+            <Categories categories={categories}/>
             <NewProducts products={products} />
         </Layout>
     );
 };
 
 export async function getStaticProps() {
-    const { data } = await client.query({
+    const { data: products_data } = await client.query({
         query: PRODUCTS_QUERY
     });
+
+    const { data: categories_data } = await client.query({
+        query: CATEGORIES_QUERY
+    });
+
     return {
         props: {
-            products: data.products.nodes
+            products: products_data.products.nodes,
+            categories: categories_data.productCategories.nodes
         },
         revalidate: 1
     };

src/components/Image.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 const Image = (props) => {
 
     const [error, setError] = useState(false);
-    
+
     const {
         src,
         width,
@@ -28,7 +28,7 @@ const Image = (props) => {
 
     return (
         <Img 
-        src={error ? fallBackUrl : src}
+        src={ (error || !src) ? fallBackUrl : src }
         width={width}
         height={height} 
         onError={errorHandler}

src/components/home/Categories.js

@@ -1,60 +1,34 @@
 import Link from 'next/link';
-
-const Categories = () => {
+import Image from '../Image';
+const Categories = ({ categories }) => {
     return (
         <div className="container">
             <h2 className="text-center mb-4">Shop by Category</h2>
             <div className="woocommerce">
-                <ul className="products row mx-auto">
-                    <li className="product-category product first col-md-4">
-                        <Link as={`/`} href={`/`}>
-                            <a className="">
-                                <Image
-                                    src="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/accessories.jpg"
-                                    alt="Accessories"
-                                    width={324}
-                                    height={324}
-                                    sizes="(max-width: 324px) 100vw, 324px"
-                                />
-                                <h2 className="woocommerce-loop-category__title">
-                                    Accessories <mark className="count">(4)</mark>
-                                </h2>
-                            </a>
-                        </Link>
-                    </li>
-                    <li className="product-category product col-md-4">
-                        <Link as={`/`} href={`/`}>
-                            <a className="">
-                                <Image
-                                    src="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/hoodies.jpg"
-                                    alt="Hoodies"
-                                    width={324}
-                                    height={324}
-                                    sizes="(max-width: 324px) 100vw, 324px"
-                                />
-                                <h2 className="woocommerce-loop-category__title">
-                                    Hoodies <mark className="count">(4)</mark>
-                                </h2>
-                            </a>
-                        </Link>
-                    </li>
-                    <li className="product-category product last col-md-4">
-                        <Link as={`/`} href={`/`}>
-                            <a className="">
-                                <Image
-                                    src="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/tshirts.jpg"
-                                    alt="Tshirts"
-                                    width={324}
-                                    height={324}
-                                    sizes="(max-width: 324px) 100vw, 324px"
-                                />
-                                <h2 className="woocommerce-loop-category__title">
-                                    Tshirts <mark className="count">(4)</mark>
-                                </h2>
-                            </a>
-                        </Link>
-                    </li>
-                </ul>
+                <div className="row mx-auto">
+                    {
+                        categories.map(category => (
+                            category && category.count ? (
+                                <div className="category-container col-md-3 mb-5">
+                                    <Link as={`/`} href={`/`}>
+                                        <a className="category-link">
+                                            <Image
+                                                src={category?.image?.sourceUrl}
+                                                alt={category?.name}
+                                                width={324}
+                                                height={324}
+                                                sizes="(max-width: 324px) 100vw, 324px"
+                                            />
+                                            <h5 className="category-name">
+                                                {category.name} <mark className="count">({category.count})</mark>
+                                            </h5>
+                                        </a>
+                                    </Link>
+                                </div>
+                            ) : null
+                        ))
+                    }
+                </div>
             </div>
         </div>
     );

src/queries/fragments/category.js

@@ -0,0 +1,14 @@
+import ImageFragment from './image';
+
+const CategoryFragment = `
+    fragment CategoryFragment on ProductCategory {
+        name
+        count
+        image {
+            ...ImageFragment
+        }
+        slug
+    }
+    ${ImageFragment}
+`;
+export default CategoryFragment;

src/queries/get-categories.js

@@ -0,0 +1,13 @@
+import { gql } from '@apollo/client';
+import CategoryFragment from './fragments/category';
+
+export default gql`
+    query {
+        productCategories {
+            nodes {
+                ...CategoryFragment
+            }
+        }
+    }
+    ${CategoryFragment}
+`;

src/queries/index.js

@@ -2,4 +2,5 @@ export { default as PRODUCTS_QUERY } from './get-products';
 export { default as PRODUCT_QUERY } from './get-product';
 export { default as LOGIN_USER } from './auth/login';
 export { default as REGISTER_USER } from './auth/register';
-export { default as PRODUCT_SLUGS } from './get-product-slug';
+export { default as PRODUCT_SLUGS } from './get-product-slug';
+export { default as CATEGORIES_QUERY } from './get-categories';

src/styles/sass/categories.scss

@@ -0,0 +1,31 @@
+.wd-content {
+	padding: 24px 10px 10px 14px;
+}
+
+.category-container {
+	text-align: center;
+}
+
+@media screen and ( max-width: 500px ) {
+	.category-container {
+		min-width: 400px;
+	}
+}
+
+@media screen and ( max-width: 400px ) {
+	.category-container {
+		min-width: 300px;
+	}
+}
+
+.category-link {
+	cursor: pointer;
+    color: #333333;
+}
+
+.category-image {
+	max-width: 240px;
+}
+.category-name {
+	margin: 16px;
+}

src/styles/sass/styles.scss

@@ -6,6 +6,7 @@
 @import "navbar";
 @import "home";
 @import "products";
+@import "categories";
 @import "cart";
 @import "checkout";
 @import "layouts/my-account";