Add To Cart And View Cart API

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

@@ -1,53 +1,18 @@
 import { isEmpty } from 'lodash';
-
-import axios from 'axios';
-import { ADD_TO_CART_ENDPOINT } from '../../utils/constants/endpoints';
-import { getSession, storeSession } from '../../utils/cart/session';
-import { getAddOrViewCartConfig, getAddToCartConfig } from '../../utils/cart/api';
+import {addToCart} from '../../utils/cart';
 
 const AddToCart = ( { product } ) => {
 
 	if ( isEmpty( product ) ) {
 		return null;
 	}
 
-	const addToCart = ( productId, qty = 1 ) => {
-		const storedSession = getSession();
-		const addOrViewCartConfig = getAddOrViewCartConfig();
-		axios.post( ADD_TO_CART_ENDPOINT, {
-				product_id: productId,
-				quantity: qty,
-			},
-			addOrViewCartConfig,
-		)
-			.then( ( res ) => {
-
-				if ( ! isEmpty( storedSession ) ) {
-					storeSession( res?.headers?.[ 'x-wc-session' ] );
-				}
-				viewCart();
-			} )
-			.catch( err => {
-				console.log( 'err', err );
-			} );
-	};
-
-	const viewCart = () => {
-		const addOrViewCartConfig = getAddOrViewCartConfig();
-		axios.get( ADD_TO_CART_ENDPOINT, addOrViewCartConfig )
-			.then( ( res ) => {
-				console.log( 'res', 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>
+			onClick={ () => addToCart( product?.id ?? 0 ) }>
+			Add to cart
+		</button>
 	);
 };
 

src/components/layouts/header/index.js

@@ -18,7 +18,7 @@ const Header = ( { header } ) => {
 				<link rel="icon" href={ favicon || '/favicon.ico' }/>
 			</Head>
 			<div className="header">
-				<nav className="bg-white p-4">
+				<nav className="bg-white py-5">
 					<div className="flex items-center justify-between flex-wrap container mx-auto">
 						<div className="flex items-center flex-shrink-0 text-black mr-20">
 							<Link href="/">

src/components/products/index.js

@@ -7,8 +7,6 @@ const Products = ({ products }) => {
 		return null;
 	}
 
-	console.log( 'products', products );
-
 	return (
 		<div className="flex flex-wrap -mx-2 overflow-hidden">
 

src/utils/cart/api.js

@@ -0,0 +1,20 @@
+import { getSession } from './session';
+import { isEmpty } from 'lodash';
+
+export const getAddOrViewCartConfig = () => {
+
+	const config = {
+		headers: {
+			'X-Headless-CMS': true,
+		},
+	}
+
+	const storedSession = getSession();
+
+	if ( !isEmpty( storedSession ) ) {
+		config.headers['x-wc-session'] = storedSession;
+	}
+
+	return config;
+}
+

src/utils/cart/index.js

@@ -0,0 +1,51 @@
+import { getSession, storeSession } from './session';
+import { getAddOrViewCartConfig } from './api';
+import axios from 'axios';
+import { CART_ENDPOINT } from '../constants/endpoints';
+import { isEmpty } from 'lodash';
+
+/**
+ * Add To Cart Request Handler.
+ *
+ * @param {int} productId Product Id.
+ * @param {int} qty Product Quantity.
+ */
+export const addToCart = ( productId, qty = 1 ) => {
+
+	const storedSession = getSession();
+	const addOrViewCartConfig = getAddOrViewCartConfig();
+
+	axios.post( CART_ENDPOINT, {
+			product_id: productId,
+			quantity: qty,
+		},
+		addOrViewCartConfig,
+	)
+		.then( ( res ) => {
+
+			if ( isEmpty( storedSession ) ) {
+				storeSession( res?.headers?.[ 'x-wc-session' ] );
+			}
+			viewCart();
+		} )
+		.catch( err => {
+			console.log( 'err', err );
+		} );
+};
+
+/**
+ * View Cart Request Handler
+ */
+export const viewCart = () => {
+
+	const addOrViewCartConfig = getAddOrViewCartConfig();
+
+	axios.get( CART_ENDPOINT, addOrViewCartConfig )
+		.then( ( res ) => {
+			console.log( 'res', res );
+		} )
+		.catch( err => {
+			console.log( 'err', err );
+		} );
+};
+

src/utils/cart/session.js

@@ -0,0 +1,15 @@
+import { isEmpty } from 'lodash';
+
+export const storeSession = ( session ) => {
+
+	if ( isEmpty( session ) ) {
+		return null;
+	}
+
+	localStorage.setItem( 'x-wc-session', session );
+}
+
+export const getSession = () => {
+	return localStorage.getItem( 'x-wc-session' );
+}
+

src/utils/constants/endpoints.js

@@ -5,4 +5,4 @@ export const GET_PRODUCTS_ENDPOINT = `${process.env.NEXT_PUBLIC_SITE_URL}/api/ge
  * Cart
  * @type {string}
  */
-export const ADD_TO_CART_ENDPOINT = `${process.env.NEXT_PUBLIC_WORDPRESS_SITE_URL}/wp-json/rae/v1/cart/items/`;
+export const CART_ENDPOINT = `${process.env.NEXT_PUBLIC_WORDPRESS_SITE_URL}/wp-json/rae/v1/cart/items/`;

tailwind.config.js

@@ -3,7 +3,15 @@ module.exports = {
 		'./src/components/**/*.js',
 		'./pages/**/*.js'],
 	theme: {
-		extend: {},
+		container: {
+			padding: {
+				DEFAULT: '1rem',
+				md: '2rem',
+				lg: '4rem',
+				xl: '5rem',
+				'2xl': '6rem',
+			},
+		},
 	},
 	variants: {},
 	plugins: [