From 4ca6d82ab5288632dfd9879e724b3a4831d54fe4 Mon Sep 17 00:00:00 2001 From: Vijayaraghavan M Date: Fri, 22 Jan 2021 13:22:42 +0530 Subject: [PATCH 1/4] Fetch and display categories dynamically --- pages/index.js | 19 +++++--- src/components/home/Categories.js | 76 +++++++++---------------------- src/queries/fragments/category.js | 14 ++++++ src/queries/get-categories.js | 13 ++++++ src/queries/index.js | 3 +- src/styles/sass/categories.scss | 46 +++++++++++++++++++ src/styles/sass/styles.scss | 1 + 7 files changed, 111 insertions(+), 61 deletions(-) create mode 100644 src/queries/fragments/category.js create mode 100644 src/queries/get-categories.js create mode 100644 src/styles/sass/categories.scss diff --git a/pages/index.js b/pages/index.js index 1c1bc97..32dee62 100644 --- a/pages/index.js +++ b/pages/index.js @@ -3,7 +3,8 @@ 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 { PRODUCTS_QUERY } from '../src/queries'; +import Categories from '../src/components/home/Categories'; +import { PRODUCTS_QUERY, CATEGORIES_QUERY } from '../src/queries'; const NewProducts = ({ products }) => { return ( @@ -47,24 +48,30 @@ const NewProducts = ({ products }) => { }; const Index = (props) => { - const { products } = props; - + const { products, categories } = props; + console.log(products, categories) return ( - {/**/} + ); }; 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 + }); + console.log(products_data, categories_data); return { props: { - products: data.products.nodes + products: products_data.products.nodes, + categories: categories_data.productCategories.nodes }, revalidate: 1 }; diff --git a/src/components/home/Categories.js b/src/components/home/Categories.js index 991ae79..e3865c3 100644 --- a/src/components/home/Categories.js +++ b/src/components/home/Categories.js @@ -1,63 +1,31 @@ import Link from 'next/link'; -const Categories = () => { +const Categories = ({ categories }) => { return (

Shop by Category

- +
+ { + categories.map(category => ( +
+ + + {category.name} +
+ {category.name} ({category.count}) +
+ + +
+ )) + } +
); diff --git a/src/queries/fragments/category.js b/src/queries/fragments/category.js new file mode 100644 index 0000000..b00459b --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/queries/get-categories.js b/src/queries/get-categories.js new file mode 100644 index 0000000..828171d --- /dev/null +++ b/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} +`; \ No newline at end of file diff --git a/src/queries/index.js b/src/queries/index.js index d8784bc..edb1723 100644 --- a/src/queries/index.js +++ b/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'; \ No newline at end of file +export { default as PRODUCT_SLUGS } from './get-product-slug'; +export { default as CATEGORIES_QUERY } from './get-categories'; \ No newline at end of file diff --git a/src/styles/sass/categories.scss b/src/styles/sass/categories.scss new file mode 100644 index 0000000..c430a51 --- /dev/null +++ b/src/styles/sass/categories.scss @@ -0,0 +1,46 @@ +.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; +} + +.category-view-link { + text-decoration: none; + color: #555; + border: 1px solid #555; + padding: 10px 16px; + background-color: #fff; + margin-top: 10px; +} + +.category-description { + max-width: 500px; + margin-top: 24px; + text-align: left; +} \ No newline at end of file diff --git a/src/styles/sass/styles.scss b/src/styles/sass/styles.scss index 283df9f..ff2e46d 100644 --- a/src/styles/sass/styles.scss +++ b/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"; From 471682197519b6b6b186891db0a2afd75087c661 Mon Sep 17 00:00:00 2001 From: Vijayaraghavan M Date: Fri, 22 Jan 2021 18:25:08 +0530 Subject: [PATCH 2/4] Get a product category by it's slug --- pages/category/[slug].js | 55 ++++++++++++++++++++++++++++++++ src/queries/get-category-slug.js | 11 +++++++ src/queries/get-category.js | 11 +++++++ src/queries/index.js | 4 ++- 4 files changed, 80 insertions(+), 1 deletion(-) create mode 100644 pages/category/[slug].js create mode 100644 src/queries/get-category-slug.js create mode 100644 src/queries/get-category.js diff --git a/pages/category/[slug].js b/pages/category/[slug].js new file mode 100644 index 0000000..1026c65 --- /dev/null +++ b/pages/category/[slug].js @@ -0,0 +1,55 @@ +import Layout from '../../src/components/layouts/Layout'; +import client from '../../src/apollo/ApolloClient'; +import { + CATEGORY_QUERY, + CATEGORY_SLUGS +} from '../../src/queries'; +import Categories from '../../src/components/home/Categories'; + +const Category = ({data}) => { + + const { category } = data || {} + + return ( + + + + ); +}; + +export async function getStaticProps({ params }) { + let { slug } = params; + + const { data } = await client.query({ + query: CATEGORY_QUERY, + variables: { slug } + }); + + return { + props: { + data: { + category: data?.productCategory + } + } + }; +} + +export async function getStaticPaths() { + + const { data } = await client.query({ + query: CATEGORY_SLUGS + }); + + const pathsData = []; + data.productCategories.nodes.map((product) => { + console.log(product); + pathsData.push({ params: { slug: `${product.slug}` } }); + }); + + return { + paths: pathsData, + fallback: true + }; +} + +export default Category; diff --git a/src/queries/get-category-slug.js b/src/queries/get-category-slug.js new file mode 100644 index 0000000..af2e6a6 --- /dev/null +++ b/src/queries/get-category-slug.js @@ -0,0 +1,11 @@ +import { gql } from '@apollo/client'; + +export default gql` + query { + productCategories { + nodes { + slug + } + } + } +`; \ No newline at end of file diff --git a/src/queries/get-category.js b/src/queries/get-category.js new file mode 100644 index 0000000..ef9efed --- /dev/null +++ b/src/queries/get-category.js @@ -0,0 +1,11 @@ +import { gql } from '@apollo/client'; +import CategoryFragment from './fragments/category'; + +export default gql` + query Category($slug: ID!) { + productCategory(id: $slug, idType: SLUG) { + ...CategoryFragment + } + } + ${CategoryFragment} +`; \ No newline at end of file diff --git a/src/queries/index.js b/src/queries/index.js index edb1723..ab06a9e 100644 --- a/src/queries/index.js +++ b/src/queries/index.js @@ -3,4 +3,6 @@ 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 CATEGORIES_QUERY } from './get-categories'; \ No newline at end of file +export { default as CATEGORIES_QUERY } from './get-categories'; +export { default as CATEGORY_QUERY } from './get-category'; +export { default as CATEGORY_SLUGS } from './get-category-slug'; \ No newline at end of file From 9c5decb7bb9b7605877c6418d4acbbb8b449859f Mon Sep 17 00:00:00 2001 From: Vijayaraghavan M Date: Mon, 25 Jan 2021 11:24:04 +0530 Subject: [PATCH 3/4] Display products in category archive page --- pages/category/[slug].js | 9 +++++-- pages/index.js | 45 ++----------------------------- src/components/home/Categories.js | 34 ++++++++++++----------- src/components/home/Products.js | 45 +++++++++++++++++++++++++++++++ src/queries/get-category.js | 7 +++++ 5 files changed, 80 insertions(+), 60 deletions(-) create mode 100644 src/components/home/Products.js diff --git a/pages/category/[slug].js b/pages/category/[slug].js index 1026c65..f294a2b 100644 --- a/pages/category/[slug].js +++ b/pages/category/[slug].js @@ -4,7 +4,7 @@ import { CATEGORY_QUERY, CATEGORY_SLUGS } from '../../src/queries'; -import Categories from '../../src/components/home/Categories'; +import Products from '../../src/components/home/Products'; const Category = ({data}) => { @@ -12,7 +12,12 @@ const Category = ({data}) => { return ( - +
+

+ {category.name} ({category.count}) +

+
+ ); }; diff --git a/pages/index.js b/pages/index.js index 32dee62..78bb164 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,51 +1,10 @@ import Layout from '../src/components/layouts/Layout'; -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 Products from '../src/components/home/Products'; import { PRODUCTS_QUERY, CATEGORIES_QUERY } from '../src/queries'; -const NewProducts = ({ products }) => { - return ( -
-

Products

- {products.length ? ( -
-
- {products.map((item) => - // @TODO Need to add support for Group product. - undefined !== item && 'GroupProduct' !== item.__typename ? ( -
- {/* @TODO need to get rid of using databseId here. */} - - - - {item.name} -
{item.name}
-

{item.price}

- - - - -
- ) : ( - '' - ) - )} -
-
- ) : ( - '' - )} -
- ); -}; const Index = (props) => { const { products, categories } = props; @@ -54,7 +13,7 @@ const Index = (props) => { - + ); }; diff --git a/src/components/home/Categories.js b/src/components/home/Categories.js index e3865c3..3d67b08 100644 --- a/src/components/home/Categories.js +++ b/src/components/home/Categories.js @@ -8,21 +8,25 @@ const Categories = ({ categories }) => {
{ categories.map(category => ( -
- - - {category.name} -
- {category.name} ({category.count}) -
- - -
+ undefined !== category + && 0 !== category.count + && null !== category.count ? ( +
+ + + {category.name} +
+ {category.name} ({category.count}) +
+ + +
+ ) : null )) }
diff --git a/src/components/home/Products.js b/src/components/home/Products.js new file mode 100644 index 0000000..0e68842 --- /dev/null +++ b/src/components/home/Products.js @@ -0,0 +1,45 @@ +import Link from 'next/link'; +import AddToCartButton from '../cart/AddToCartButton'; + +const Products = ({ products }) => { + return ( +
+

Products

+ {products.length ? ( +
+
+ {products.map((item) => + // @TODO Need to add support for Group product. + undefined !== item && 'GroupProduct' !== item.__typename ? ( +
+ {/* @TODO need to get rid of using databseId here. */} + + + + {item.name} +
{item.name}
+

{item.price}

+ + + + +
+ ) : ( + '' + ) + )} +
+
+ ) : ( + '' + )} +
+ ); +}; + +export default Products; \ No newline at end of file diff --git a/src/queries/get-category.js b/src/queries/get-category.js index ef9efed..0d60298 100644 --- a/src/queries/get-category.js +++ b/src/queries/get-category.js @@ -1,11 +1,18 @@ import { gql } from '@apollo/client'; import CategoryFragment from './fragments/category'; +import ProductFragment from './fragments/product'; export default gql` query Category($slug: ID!) { productCategory(id: $slug, idType: SLUG) { ...CategoryFragment + products { + nodes { + ...ProductFragment + } + } } } ${CategoryFragment} + ${ProductFragment} `; \ No newline at end of file From 613048782e70d916fa544c10e4b474a0e2fc481e Mon Sep 17 00:00:00 2001 From: Vijayaraghavan M Date: Mon, 25 Jan 2021 11:45:55 +0530 Subject: [PATCH 4/4] Fetch only required fields from GraphQL --- pages/product/[slug].js | 4 ++-- src/queries/get-product-slug.js | 8 ++------ 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/pages/product/[slug].js b/pages/product/[slug].js index 4ce82e3..5863211 100644 --- a/pages/product/[slug].js +++ b/pages/product/[slug].js @@ -72,8 +72,8 @@ export async function getStaticPaths() { const pathsData = []; - data.products.edges.map((product) => { - pathsData.push({ params: { slug: `${product.node.slug}` } }); + data.products.nodes.map((product) => { + pathsData.push({ params: { slug: `${product.slug}` } }); }); return { diff --git a/src/queries/get-product-slug.js b/src/queries/get-product-slug.js index c01adc6..fd5e31f 100644 --- a/src/queries/get-product-slug.js +++ b/src/queries/get-product-slug.js @@ -1,15 +1,11 @@ import { gql } from '@apollo/client'; -import ProductFragment from './fragments/product'; export default gql` query GET_PRODUCT_SLUGS { products: products { - edges { - node { - ...ProductFragment - } + nodes { + slug } } } - ${ProductFragment} `; \ No newline at end of file