From dd8bfcf51b521538ba733b3e6f054ddbff0fca0e Mon Sep 17 00:00:00 2001
From: Imran <imranhsayed@gmail.com>
Date: Fri, 12 Nov 2021 20:50:09 +0530
Subject: [PATCH] Add To cart update
---
src/components/cart/add-to-cart.js | 43 ++--------------------
src/components/layouts/header/index.js | 2 +-
src/components/products/index.js | 2 -
src/utils/cart/api.js | 20 ++++++++++
src/utils/cart/index.js | 51 ++++++++++++++++++++++++++
src/utils/cart/session.js | 15 ++++++++
src/utils/constants/endpoints.js | 2 +-
tailwind.config.js | 10 ++++-
8 files changed, 101 insertions(+), 44 deletions(-)
diff --git a/src/components/cart/add-to-cart.js b/src/components/cart/add-to-cart.js
index 6067096..85ef167 100644
--- a/src/components/cart/add-to-cart.js
+++ b/src/components/cart/add-to-cart.js
@@ -1,9 +1,5 @@
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 } ) => {
@@ -11,43 +7,12 @@ const AddToCart = ( { 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>
);
};
diff --git a/src/components/layouts/header/index.js b/src/components/layouts/header/index.js
index 1aa1d1b..023a068 100644
--- a/src/components/layouts/header/index.js
+++ b/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="/">
diff --git a/src/components/products/index.js b/src/components/products/index.js
index ca40149..954ecb8 100644
--- a/src/components/products/index.js
+++ b/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">
diff --git a/src/utils/cart/api.js b/src/utils/cart/api.js
index e69de29..b81601e 100644
--- a/src/utils/cart/api.js
+++ b/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;
+}
+
diff --git a/src/utils/cart/index.js b/src/utils/cart/index.js
index e69de29..8806032 100644
--- a/src/utils/cart/index.js
+++ b/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 );
+ } );
+};
+
diff --git a/src/utils/cart/session.js b/src/utils/cart/session.js
index e69de29..b1ecb38 100644
--- a/src/utils/cart/session.js
+++ b/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' );
+}
+
diff --git a/src/utils/constants/endpoints.js b/src/utils/constants/endpoints.js
index 96c919b..7e12e48 100644
--- a/src/utils/constants/endpoints.js
+++ b/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/`;
diff --git a/tailwind.config.js b/tailwind.config.js
index 4e78c69..e3f958f 100644
--- a/tailwind.config.js
+++ b/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: [