Skip to content

Commit

Permalink
feat: Add Seo meta tag #35
Browse files Browse the repository at this point in the history
  • Loading branch information
@dgd03146
dgd03146 committed Aug 1, 2023
1 parent 2d38968 commit 4cc2094
Show file tree
Hide file tree
Showing 6 changed files with 155 additions and 98 deletions.
8 changes: 6 additions & 2 deletions components/layouts/toast/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,16 @@ const toastOptions: ToastOptions = {
export function showToast({ type, message }: ToastProps) {
switch (type) {
case TToastType.success:
toast.success(message || 'Success!', {
toast.success(message, {
...toastOptions,
});
break;
case TToastType.error:
toast.error(message || 'Try again', {
toast.error(message, {
...toastOptions,
});
case TToastType.info:
toast.error(message, {
...toastOptions,
});
break;
Expand Down
52 changes: 34 additions & 18 deletions pages/cart/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import PriceCard from '@components/cart/priceCard';
import Button from '@components/common/button';
import WithAuth from '@components/hoc/withAuth';
import Loading from '@components/layouts/loading';
import { TToastType, showToast } from '@components/layouts/toast';
import Head from 'next/head';
import useGetCarts from 'queries/hooks/cart/useGetCarts';
import React from 'react';
import { BsFillPlusCircleFill } from 'react-icons/bs';
Expand All @@ -20,25 +22,39 @@ const Cart = () => {
const totalPrice =
(hasProducts && products.reduce((prev, current) => prev + parseInt(current.price) * current.quantity, 0)) || 0;

const handleOrder = () => {
showToast({ type: TToastType.info, message: 'Ordering is temporarily unavailable' });
};

return (
<section tw="flex flex-col mb-8">
{!hasProducts && <h2 tw="text-primary3">There is no any item in Cart</h2>}
{hasProducts && (
<>
<ul tw="border-b border-white2 mb-8 py-4">
{products && products.map((product) => <CartItem key={product.id} product={product} />)}
</ul>
<div tw="flex justify-between items-center px-2 tablet:px-8 mb-8">
<PriceCard text="Item Total Price" price={totalPrice} />
<BsFillPlusCircleFill tw="shrink-0" />
<PriceCard text="Shipping Amount" price={SHIPPING} />
<FaEquals tw="shrink-0" />
<PriceCard text="Total Price" price={totalPrice + SHIPPING} />
</div>
<Button text="Order" />
</>
)}
</section>
<>
<Head>
<title>My Carts</title>
<meta
name="description"
content="Check your shopping cart at our store. Review your selected items, quantities, and get ready for checkout. Secure and easy online shopping."
/>
<meta name="keywords" content="Carts" />
</Head>
<section tw="flex flex-col mb-8">
{!hasProducts && <h2 tw="text-primary3">There is no any item in Cart</h2>}
{hasProducts && (
<>
<ul tw="border-b border-white2 mb-8 py-4">
{products && products.map((product) => <CartItem key={product.id} product={product} />)}
</ul>
<div tw="flex justify-between items-center px-2 tablet:px-8 mb-8">
<PriceCard text="Item Total Price" price={totalPrice} />
<BsFillPlusCircleFill tw="shrink-0" />
<PriceCard text="Shipping Amount" price={SHIPPING} />
<FaEquals tw="shrink-0" />
<PriceCard text="Total Price" price={totalPrice + SHIPPING} />
</div>
<Button text="Order" onClick={handleOrder} />
</>
)}
</section>
</>
);
};

Expand Down
85 changes: 49 additions & 36 deletions pages/products/[id]/[title].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { getProduct, getProducts } from '@services/products';
import useAddCart from 'queries/hooks/cart/useAddCart';

import { BLUR_IMAGE, REVALIDATE_TIME } from 'constants/constant';
import Head from 'next/head';

interface ProductPageParams extends ParsedUrlQuery {
id: string;
Expand Down Expand Up @@ -62,49 +63,61 @@ const Product = ({ product }: InferGetStaticPropsType<typeof getStaticProps>) =>
};

const handleAddCart = () => {
const product = { id, image, title, price, category, quantity: 1 };
const product = { id, image, title, price, category, quantity };
addOrUpdateItem.mutate(product);
};

return (
<div tw="w-11/12 mobile:w-10/12 tablet:w-8/12 my-8 mx-auto">
<div tw="py-8 flex gap-x-20 flex-col laptop:flex-row">
<div tw="basis-[60%]">
<ImageWrapper>
<Image
src={image}
alt="product"
layout="fill"
objectFit="cover"
objectPosition="center"
loading="lazy"
placeholder="blur"
blurDataURL={BLUR_IMAGE}
/>
</ImageWrapper>
</div>
<ProductInfo>
<p tw="text-sm text-gray2 mb-[2px]">{category}</p>
<h3 tw="text-primary3 mb-2 font-semibold text-2xl">{title}</h3>
<p tw="break-all mb-8">{description}</p>
<p tw="text-primary3 mb-8 font-semibold text-xl">£{price}</p>
<div tw="flex gap-x-4 mb-8">
<div tw="border-white2 border-[1px] flex items-center justify-between p-2 font-semibold ">
<button>
<HiMinus tw="text-gray1" onClick={handleMinus} />
</button>
<p tw="px-4">{quantity}</p>
<button onClick={handlePlus}>
<HiPlus />
<>
<Head>
<title>Ownus | {product.title}</title>
<meta name="description" content={product.description} />
<meta property="og:title" content={product.title} />
<meta property="og:image" content={product.image} />
<meta property="og:description" content={product.description} />
</Head>
<div tw="w-11/12 mobile:w-10/12 tablet:w-8/12 my-8 mx-auto">
<div tw="py-8 flex gap-x-20 flex-col laptop:flex-row">
<div tw="basis-[60%]">
<ImageWrapper>
<Image
src={image}
alt="product"
layout="fill"
objectFit="cover"
objectPosition="center"
loading="lazy"
placeholder="blur"
blurDataURL={BLUR_IMAGE}
/>
</ImageWrapper>
</div>
<ProductInfo>
<p tw="text-sm text-gray2 mb-[2px]">{category}</p>
<h3 tw="text-primary3 mb-2 font-semibold text-2xl">{title}</h3>
<p tw="break-all mb-8">{description}</p>
<p tw="text-primary3 mb-8 font-semibold text-xl">£{price}</p>
<div tw="flex gap-x-4 mb-8">
<div tw="border-white2 border-[1px] flex items-center justify-between p-2 font-semibold ">
<button>
<HiMinus tw="text-gray1" onClick={handleMinus} />
</button>
<p tw="px-4">{quantity}</p>
<button onClick={handlePlus}>
<HiPlus />
</button>
</div>
<button
tw="bg-primary3 text-white1 py-3 px-12 whitespace-nowrap hover:bg-primary4"
onClick={handleAddCart}
>
ADD CART
</button>
</div>
<button tw="bg-primary3 text-white1 py-3 px-12 whitespace-nowrap hover:bg-primary4" onClick={handleAddCart}>
ADD CART
</button>
</div>
</ProductInfo>
</ProductInfo>
</div>
</div>
</div>
</>
);
};

Expand Down
9 changes: 9 additions & 0 deletions pages/products/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import Products from '@components/products/products';
import { REVALIDATE_TIME } from 'constants/constant';
import { useGetProducts } from 'queries/hooks/products/useGetProducts';
import Loading from '@components/layouts/loading';
import Head from 'next/head';
import background from '/public/images/background.jpg';

export const getStaticProps: GetStaticProps = async () => {
const queryClient = new QueryClient();
Expand All @@ -34,6 +36,13 @@ const ProductsPage = () => {

return (
<>
<Head>
<title>"Ownus Flowers"</title>
<meta name="description" content="The perfect choice for your needs" />
<meta property="og:title" content="Ownus Flowers" />
<meta property="og:image" content={products && products[0].image} />
<meta property="og:description" content="The perfect choice for your needs" />
</Head>
<div tw="mx-auto">
<Categories selected={selected} handleCategory={handleCategory} />
{!products && isLoading && <Loading />}
Expand Down
97 changes: 56 additions & 41 deletions pages/products/new.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import tw, { styled } from 'twin.macro';
import { DEFAULT_PRODUCT, PRODUCTS_FILTER } from 'constants/constant';
import defaultImage from '/public/images/background6.jpg';
import useAddProduct from 'queries/hooks/products/useAddProduct';
import Head from 'next/head';

const NewProduct = () => {
const [product, setProduct] = useState<TProduct>(DEFAULT_PRODUCT);
Expand Down Expand Up @@ -42,50 +43,64 @@ const NewProduct = () => {
};

return (
<section>
<Image
tw="mx-auto mb-4 min-h-[300px] min-w-[300px] rounded-md"
src={file ? URL.createObjectURL(file) : defaultImage}
alt="local file"
width={300}
height={300}
/>
<Form onSubmit={handleSubmit} tw="flex flex-col mx-auto justify-center max-w-[500px] w-auto gap-y-8">
<input type="file" accept="image/*" name="file" required onChange={handleChange} lang="en" />
<input
type="text"
name="title"
value={product.title ?? ''}
placeholder="Product Name"
required
onChange={handleChange}
<>
<Head>
<title>"Ownus | Register New Product"</title>
<meta
name="description"
content="Register and showcase your new flower products on Ownus. Reach your customers more effectively."
/>
<select name="category" onChange={handleChange} value={product.category} required>
{PRODUCTS_FILTER.map(({ id, title }) => (
<option key={id} value={title}>
{title}
</option>
))}
</select>
<input
type="text"
name="price"
value={product.price ?? ''}
placeholder="Price"
required
onChange={handleChange}
<meta property="og:title" content="Register New Product | Ownus Flowers" />
<meta
property="og:description"
content="Register and showcase your new flower products on Ownus. Enhance your flower business with us"
/>
<input
type="text"
name="description"
value={product.description ?? ''}
placeholder="Prouduct Description"
required
onChange={handleChange}
</Head>
<section>
<Image
tw="mx-auto mb-4 min-h-[300px] min-w-[300px] rounded-md"
src={file ? URL.createObjectURL(file) : defaultImage}
alt="local file"
width={300}
height={300}
/>
<Button text={isUploading ? 'Uploading...' : 'Register Product'} disabled={isUploading} />
</Form>
</section>
<Form onSubmit={handleSubmit} tw="flex flex-col mx-auto justify-center max-w-[500px] w-auto gap-y-8">
<input type="file" accept="image/*" name="file" required onChange={handleChange} lang="en" />
<input
type="text"
name="title"
value={product.title ?? ''}
placeholder="Product Name"
required
onChange={handleChange}
/>
<select name="category" onChange={handleChange} value={product.category} required>
{PRODUCTS_FILTER.map(({ id, title }) => (
<option key={id} value={title}>
{title}
</option>
))}
</select>
<input
type="text"
name="price"
value={product.price ?? ''}
placeholder="Price"
required
onChange={handleChange}
/>
<input
type="text"
name="description"
value={product.description ?? ''}
placeholder="Prouduct Description"
required
onChange={handleChange}
/>
<Button text={isUploading ? 'Uploading...' : 'Register Product'} disabled={isUploading} />
</Form>
</section>
</>
);
};

Expand Down
2 changes: 1 addition & 1 deletion queries/hooks/cart/useAddCart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ function useAddCart() {
await queryClient.invalidateQueries(QUERY_KEYS.carts(userId));
showToast({ type: TToastType.success, message: 'Updated to cart successfully' });
setTimeout(() => {
router.push(ROUTE.products);
router.push(ROUTE.cart);
}, 3000);
return;
},
Expand Down

0 comments on commit 4cc2094

Please sign in to comment.