Add to cart

Author: imranhsayed

src/components/cart/add-to-cart.js

@@ -0,0 +1,37 @@
+import { isEmpty } from 'lodash';
+
+import axios from 'axios';
+import { ADD_TO_CART_ENDPOINT } from '../../utils/constants/endpoints';
+
+const AddToCart = ( { product } ) => {
+	
+	if ( isEmpty( product ) ) {
+		return null;
+	}
+	
+	const addToCart = ( productId, qty = 1 ) => {
+		axios.post( ADD_TO_CART_ENDPOINT, {
+				product_id: productId,
+				quantity: qty,
+			},
+			{
+				withCredentials: true,
+				headers: {
+					'X-Headless-CMS': true,
+				},
+			} )
+			.then( ( res ) => {
+				console.log( 'card added', res );
+			} )
+			.catch( err => {
+				console.log( 'err', err );
+			} );
+	};
+	
+	
+	return (
+		<button className="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow" onClick={ () => addToCart( product?.id ) }>Add to cart</button>
+	);
+}
+
+export default AddToCart

src/components/products/index.js

@@ -1,35 +1,20 @@
 import { isArray, isEmpty } from 'lodash';
-import Link from 'next/link';
-import Image from '../image';
-import { sanitize } from '../../utils/miscellaneous';
+import Product from './product';
 
 const Products = ({ products }) => {
 
 	if ( isEmpty( products ) || !isArray( products ) ) {
 		return null;
 	}
 
+	console.log( 'products', products );
+	
 	return (
 		<div className="flex flex-wrap -mx-2 overflow-hidden">
 
 			{ products.length ? products.map( product => {
-				const img = product?.images?.[0] ?? {};
 				return (
-					<div key={ product?.id } className="my-2 px-2 w-full overflow-hidden sm:w-1/2 md:w-1/3 xl:w-1/4">
-						<Link href={product?.permalink ?? '/'}>
-							<a>
-								<Image
-									sourceUrl={ img?.src ?? '' }
-									altText={ img?.alt ?? ''}
-									title={ product?.name ?? '' }
-									width="380"
-									height="380"
-								/>
-								<h3 className="font-bold uppercase">{ product?.name ?? '' }</h3>
-								<div dangerouslySetInnerHTML={{ __html: sanitize( product?.price_html ?? '' ) }}/>
-							</a>
-						</Link>
-					</div>
+					<Product key={ product?.id } product={product} />
 				)
 			} ) : null }
 

src/components/products/product.js

@@ -0,0 +1,37 @@
+import Link from 'next/link';
+import Image from '../image';
+import { sanitize } from '../../utils/miscellaneous';
+import AddToCart from '../cart/add-to-cart';
+import { isEmpty } from 'lodash';
+
+const Product = ( { product } ) => {
+	
+	if ( isEmpty( product ) ) {
+		return null;
+	}
+	
+	const img = product?.images?.[0] ?? {};
+	const productType = product?.type ?? '';
+	
+	return (
+		<div className="my-2 px-2 w-full overflow-hidden sm:w-1/2 md:w-1/3 xl:w-1/4">
+			<Link href={product?.permalink ?? '/'}>
+				<a>
+					<Image
+						sourceUrl={ img?.src ?? '' }
+						altText={ img?.alt ?? ''}
+						title={ product?.name ?? '' }
+						width="380"
+						height="380"
+					/>
+					<h3 className="font-bold uppercase my-2">{ product?.name ?? '' }</h3>
+					<div className="mb-4" dangerouslySetInnerHTML={{ __html: sanitize( product?.price_html ?? '' ) }}/>
+				</a>
+			</Link>
+			
+			{ 'simple' === productType ? <AddToCart product={product}/> : null }
+		</div>
+	)
+}
+
+export default Product;

src/utils/constants/endpoints.js

@@ -1,2 +1,8 @@
 export const HEADER_FOOTER_ENDPOINT = `${ process.env.NEXT_PUBLIC_WORDPRESS_SITE_URL }/wp-json/rae/v1/header-footer?header_location_id=hcms-menu-header&footer_location_id=hcms-menu-footer`;
 export const GET_PRODUCTS_ENDPOINT = `${process.env.NEXT_PUBLIC_SITE_URL}/api/get-products`;
+
+/**
+ * Cart
+ * @type {string}
+ */
+export const ADD_TO_CART_ENDPOINT = `${process.env.NEXT_PUBLIC_WORDPRESS_SITE_URL}/wp-json/rae/v1/cart/items`;