Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature - Category archive #67

Draft
wants to merge 4 commits into
base: master
Choose a base branch
from
Draft

Feature - Category archive #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4ca6d82
Fetch and display categories dynamically
VijayaRaghavanM Jan 22, 2021
4716821
Get a product category by it's slug
VijayaRaghavanM Jan 22, 2021
9c5decb
Display products in category archive page
VijayaRaghavanM Jan 25, 2021
6130487
Fetch only required fields from GraphQL
VijayaRaghavanM Jan 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions pages/category/[slug].js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import Layout from '../../src/components/layouts/Layout';
import client from '../../src/apollo/ApolloClient';
import {
CATEGORY_QUERY,
CATEGORY_SLUGS
} from '../../src/queries';
import Products from '../../src/components/home/Products';

const Category = ({data}) => {

const { category } = data || {}

return (
<Layout>
<div className="category-container mb-5">
<h1 className="category-name">
{category.name} <mark className="count">({category.count})</mark>
</h1>
</div>
<Products products={category.products.nodes} />
</Layout>
);
};

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;
64 changes: 15 additions & 49 deletions pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +1,36 @@
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 { PRODUCTS_QUERY } from '../src/queries';
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 (
<div className="container mt-5">
<h2 className="text-center mb-5">Products</h2>
{products.length ? (
<div className="mt-2">
<div className="products-wrapper row">
{products.map((item) =>
// @TODO Need to add support for Group product.
undefined !== item && 'GroupProduct' !== item.__typename ? (
<div className="product-container col-md-3 mb-5" key={item.id}>
{/* @TODO need to get rid of using databseId here. */}
<Link href={`/product/${item.slug}`}>
<a>
<span className="product-link">
<img
className="product-image"
src={item.image.sourceUrl}
srcSet={item.image.srcSet}
alt={item.name}
/>
<h5 className="product-name">{item.name}</h5>
<p className="product-price">{item.price}</p>
</span>
</a>
</Link>
<AddToCartButton product={item} />
</div>
) : (
''
)
)}
</div>
</div>
) : (
''
)}
</div>
);
};

const Index = (props) => {
const { products } = props;

const { products, categories } = props;
console.log(products, categories)
return (
<Layout>
<Hero />
{/*<Categories/>*/}
<NewProducts products={products} />
<Categories categories={categories}/>
<Products 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
});
console.log(products_data, categories_data);
return {
props: {
products: data.products.nodes
products: products_data.products.nodes,
categories: categories_data.productCategories.nodes
},
revalidate: 1
};
Expand Down
4 changes: 2 additions & 2 deletions pages/product/[slug].js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
80 changes: 26 additions & 54 deletions src/components/home/Categories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,35 @@
import Link from 'next/link';

const Categories = () => {
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="">
<img
src="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/accessories.jpg"
alt="Accessories"
width="324"
height="324"
srcSet="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/accessories.jpg 801w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/accessories-150x150.jpg 150w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/accessories-300x300.jpg 300w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/accessories-768x768.jpg 768w"
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="">
<img
src="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/hoodies.jpg"
alt="Hoodies"
width="324"
height="324"
srcSet="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/hoodies.jpg 800w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/hoodies-150x150.jpg 150w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/hoodies-300x300.jpg 300w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/hoodies-768x768.jpg 768w"
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="">
<img
src="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/tshirts.jpg"
alt="Tshirts"
width="324"
height="324"
srcSet="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/tshirts.jpg 801w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/tshirts-150x150.jpg 150w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/tshirts-300x300.jpg 300w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/tshirts-768x768.jpg 768w"
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="products row mx-auto">
{
categories.map(category => (
undefined !== category
&& 0 !== category.count
&& null !== category.count ? (
<div className="category-container col-md-3 mb-5">
<Link href={`/category/${category.slug}`}>
<a className="category-link">
<img
className='category-image'
src="http://headless.test/wp-content/uploads/2021/01/single-1.jpg"
alt={category.name}
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>
);
Expand Down
45 changes: 45 additions & 0 deletions src/components/home/Products.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import Link from 'next/link';
import AddToCartButton from '../cart/AddToCartButton';

const Products = ({ products }) => {
return (
<div className="container mt-5">
<h2 className="text-center mb-5">Products</h2>
{products.length ? (
<div className="mt-2">
<div className="products-wrapper row">
{products.map((item) =>
// @TODO Need to add support for Group product.
undefined !== item && 'GroupProduct' !== item.__typename ? (
<div className="product-container col-md-3 mb-5" key={item.id}>
{/* @TODO need to get rid of using databseId here. */}
<Link href={`/product/${item.slug}`}>
<a>
<span className="product-link">
<img
className="product-image"
src={item.image.sourceUrl}
srcSet={item.image.srcSet}
alt={item.name}
/>
<h5 className="product-name">{item.name}</h5>
<p className="product-price">{item.price}</p>
</span>
</a>
</Link>
<AddToCartButton product={item} />
</div>
) : (
''
)
)}
</div>
</div>
) : (
''
)}
</div>
);
};

export default Products;
14 changes: 14 additions & 0 deletions src/queries/fragments/category.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import ImageFragment from './image';

const CategoryFragment = `
fragment CategoryFragment on ProductCategory {
name
count
image {
...ImageFragment
}
slug
}
${ImageFragment}
`;
export default CategoryFragment;
13 changes: 13 additions & 0 deletions src/queries/get-categories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { gql } from '@apollo/client';
import CategoryFragment from './fragments/category';

export default gql`
query {
productCategories {
nodes {
...CategoryFragment
}
}
}
${CategoryFragment}
`;
11 changes: 11 additions & 0 deletions src/queries/get-category-slug.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { gql } from '@apollo/client';

export default gql`
query {
productCategories {
nodes {
slug
}
}
}
`;
18 changes: 18 additions & 0 deletions src/queries/get-category.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +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}
`;
8 changes: 2 additions & 6 deletions src/queries/get-product-slug.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}
`;
5 changes: 4 additions & 1 deletion src/queries/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,7 @@ 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';
export { default as CATEGORY_QUERY } from './get-category';
export { default as CATEGORY_SLUGS } from './get-category-slug';
Loading