From 15f9615514f8ea8c2f8961f25eac88d403b77c96 Mon Sep 17 00:00:00 2001 From: Imran Date: Sun, 19 Sep 2021 22:05:30 +0530 Subject: [PATCH 1/5] Add to cart --- src/components/cart/add-to-cart.js | 37 ++++++++++++++++++++++++++++++ src/components/products/index.js | 23 ++++--------------- src/components/products/product.js | 37 ++++++++++++++++++++++++++++++ src/utils/constants/endpoints.js | 6 +++++ 4 files changed, 84 insertions(+), 19 deletions(-) create mode 100644 src/components/cart/add-to-cart.js create mode 100644 src/components/products/product.js diff --git a/src/components/cart/add-to-cart.js b/src/components/cart/add-to-cart.js new file mode 100644 index 0000000..aa1bd9b --- /dev/null +++ b/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 ( + + ); +} + +export default AddToCart diff --git a/src/components/products/index.js b/src/components/products/index.js index b0c4526..ca40149 100644 --- a/src/components/products/index.js +++ b/src/components/products/index.js @@ -1,7 +1,5 @@ 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 }) => { @@ -9,27 +7,14 @@ const Products = ({ products }) => { return null; } + console.log( 'products', products ); + return (
{ products.length ? products.map( product => { - const img = product?.images?.[0] ?? {}; return ( -
- - - -

{ product?.name ?? '' }

-
- - -
+ ) } ) : null } diff --git a/src/components/products/product.js b/src/components/products/product.js new file mode 100644 index 0000000..af82602 --- /dev/null +++ b/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 ( +
+ + + +

{ product?.name ?? '' }

+
+ + + + { 'simple' === productType ? : null } +
+ ) +} + +export default Product; diff --git a/src/utils/constants/endpoints.js b/src/utils/constants/endpoints.js index eaf5abd..cd1d2c4 100644 --- a/src/utils/constants/endpoints.js +++ b/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`; From 3514eec1c48e538daf753247b4a387d49a2f4aea Mon Sep 17 00:00:00 2001 From: Imran Date: Sat, 2 Oct 2021 09:49:16 +0530 Subject: [PATCH 2/5] Add to cart ' --- src/components/cart/add-to-cart.js | 18 +++++++++++++++++- src/utils/constants/endpoints.js | 2 +- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/src/components/cart/add-to-cart.js b/src/components/cart/add-to-cart.js index aa1bd9b..2dbbabc 100644 --- a/src/components/cart/add-to-cart.js +++ b/src/components/cart/add-to-cart.js @@ -10,7 +10,7 @@ const AddToCart = ( { product } ) => { } const addToCart = ( productId, qty = 1 ) => { - axios.post( ADD_TO_CART_ENDPOINT, { + axios.post( 'http://localhost:8888/wp-json/rae/v1/cart/items/', { product_id: productId, quantity: qty, }, @@ -22,6 +22,22 @@ const AddToCart = ( { product } ) => { } ) .then( ( res ) => { console.log( 'card added', res ); + viewCart(); + } ) + .catch( err => { + console.log( 'err', err ); + } ); + }; + + const viewCart = () => { + axios.get( 'http://localhost:8888/wp-json/rae/v1/cart/items/', { + withCredentials: true, + headers: { + 'X-Headless-CMS': true, + }, + } ) + .then( ( res ) => { + console.log( 'res', res ); } ) .catch( err => { console.log( 'err', err ); diff --git a/src/utils/constants/endpoints.js b/src/utils/constants/endpoints.js index cd1d2c4..96c919b 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 ADD_TO_CART_ENDPOINT = `${process.env.NEXT_PUBLIC_WORDPRESS_SITE_URL}/wp-json/rae/v1/cart/items/`; From f7202e27cc37f89d70de7b245bace3d5ae684ee8 Mon Sep 17 00:00:00 2001 From: Imran Date: Sat, 2 Oct 2021 23:35:42 +0530 Subject: [PATCH 3/5] Add to cart --- src/components/cart/add-to-cart.js | 35 +++++++++++++++--------------- src/utils/cart/api.js | 19 ++++++++++++++++ src/utils/cart/session.js | 14 ++++++++++++ 3 files changed, 51 insertions(+), 17 deletions(-) create mode 100644 src/utils/cart/api.js create mode 100644 src/utils/cart/session.js diff --git a/src/components/cart/add-to-cart.js b/src/components/cart/add-to-cart.js index 2dbbabc..6067096 100644 --- a/src/components/cart/add-to-cart.js +++ b/src/components/cart/add-to-cart.js @@ -2,6 +2,8 @@ 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'; const AddToCart = ( { product } ) => { @@ -10,18 +12,19 @@ const AddToCart = ( { product } ) => { } const addToCart = ( productId, qty = 1 ) => { - axios.post( 'http://localhost:8888/wp-json/rae/v1/cart/items/', { + const storedSession = getSession(); + const addOrViewCartConfig = getAddOrViewCartConfig(); + axios.post( ADD_TO_CART_ENDPOINT, { product_id: productId, quantity: qty, }, - { - withCredentials: true, - headers: { - 'X-Headless-CMS': true, - }, - } ) + addOrViewCartConfig, + ) .then( ( res ) => { - console.log( 'card added', res ); + + if ( ! isEmpty( storedSession ) ) { + storeSession( res?.headers?.[ 'x-wc-session' ] ); + } viewCart(); } ) .catch( err => { @@ -30,12 +33,8 @@ const AddToCart = ( { product } ) => { }; const viewCart = () => { - axios.get( 'http://localhost:8888/wp-json/rae/v1/cart/items/', { - withCredentials: true, - headers: { - 'X-Headless-CMS': true, - }, - } ) + const addOrViewCartConfig = getAddOrViewCartConfig(); + axios.get( ADD_TO_CART_ENDPOINT, addOrViewCartConfig ) .then( ( res ) => { console.log( 'res', res ); } ) @@ -46,8 +45,10 @@ const AddToCart = ( { product } ) => { return ( - + ); -} +}; -export default AddToCart +export default AddToCart; diff --git a/src/utils/cart/api.js b/src/utils/cart/api.js new file mode 100644 index 0000000..30f2007 --- /dev/null +++ b/src/utils/cart/api.js @@ -0,0 +1,19 @@ +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/session.js b/src/utils/cart/session.js new file mode 100644 index 0000000..f60dac9 --- /dev/null +++ b/src/utils/cart/session.js @@ -0,0 +1,14 @@ +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' ); +} From 1fb7bceceefc681c0391f85b112eed2f01e1dab6 Mon Sep 17 00:00:00 2001 From: Imran Date: Sun, 3 Oct 2021 16:53:54 +0530 Subject: [PATCH 4/5] Add the add to cart feature --- src/utils/cart/index.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/utils/cart/index.js diff --git a/src/utils/cart/index.js b/src/utils/cart/index.js new file mode 100644 index 0000000..e69de29 From 40e70c483c9dab8dd6c87c225efaf46a13254b53 Mon Sep 17 00:00:00 2001 From: Imran Date: Sun, 17 Oct 2021 11:25:20 +0530 Subject: [PATCH 5/5] Add View cart --- src/utils/cart/api.js | 19 ------------------- src/utils/cart/session.js | 14 -------------- 2 files changed, 33 deletions(-) diff --git a/src/utils/cart/api.js b/src/utils/cart/api.js index 30f2007..e69de29 100644 --- a/src/utils/cart/api.js +++ b/src/utils/cart/api.js @@ -1,19 +0,0 @@ -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/session.js b/src/utils/cart/session.js index f60dac9..e69de29 100644 --- a/src/utils/cart/session.js +++ b/src/utils/cart/session.js @@ -1,14 +0,0 @@ -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' ); -}