Easily integrate React Shopping Cart into your existing website without using Redux.
Home Page: https://sivadass.github.io/react-shopping-cart/
License: MIT License
Simple React Shopping Cart
https://sivadass.github.io/react-shopping-cart/
Goto the project folder and install required dependencies:
npm install
And run Webpack to watch for code changes and bundle js and scss files:
npm start
Project will be automatically open at http://localhost.com:8015
For production build:
npm run build
If you like to support this project, you can use the paypal link below:
When I set up the proxy server，He didn't seem to work.I would like to ask how to solve the problem。API request 404 devServer: { open: true, historyApiFallback: true, overlay: true, port: process.env.DEV_PORT, proxy('/apis', { target: "http://192.168.74.54:8088", secure: false, changeOrigin: true, pathRewrite: { "^/apis": "/" }, } },
hi how do you add working paypal transaction to your code
I tried to run the shopping cart in mylocal its not working by following the steps which you have specified in readMe.txt.please help me to run @sivadass
We can use arrow functions to ignore binding
Based on suggestion from Reddit user marmite22
In case someone has similar issue. This is what I did:
In the file Products.js change the function **searchingFor** to something similar to the following:
function searchingFor(term){ return function(x){ try{ return x.name.toLowerCase().includes(term.toLowerCase()) || !term; } catch(e){ return false; } } }
No one that knows to care about software licenses will use your software in a commercial setting because there is no license posted. Can you decide on a license and add it to the codebase? If you're open to suggestion, an MIT license is ideal for commercial use purposes.
whenever you click to the add to cart button its adds respective amount to sum
for no of items remain unchanged
Hi!!
I'm trying to upload my own images but they are not showing at all. How can I solve this?
Thanks!!
Can you advise what to change and make the amount changeable within the cart scrollbar?
when change one qty but add another one to cart, we will get pre one qty
I have been trying to run the site in localhost. I also read the README file. Tried npm install but shows something like this:
npm ERR! code 1
npm ERR! path C:\Users\Admin\OneDrive\Desktop\Projects\ReactJs\Grocer - E\react-shopping-cart\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: C:\Program Files\nodejs\node.exe C:\Users\Admin\OneDrive\Desktop\Projects\ReactJs\Grocer - E\react-shopping-cart\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli 'C:\\Program Files\\nodejs\\node.exe',
npm ERR! gyp verb cli 'C:\\Users\\Admin\\OneDrive\\Desktop\\Projects\\ReactJs\\Grocer - E\\react-shopping-cart\\node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! gyp verb cli 'rebuild',
npm ERR! gyp verb cli '--verbose',
npm ERR! gyp verb cli '--libsass_ext=',
npm ERR! gyp verb cli '--libsass_cflags=',
npm ERR! gyp verb cli '--libsass_ldflags=',
npm ERR! gyp verb cli '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb find Python Python is not set from command line or npm configuration
npm ERR! gyp verb find Python Python is not set from environment variable PYTHON
npm ERR! gyp verb find Python checking if "python3" can be used
npm ERR! gyp verb find Python - executing "python3" to get executable path
npm ERR! gyp verb find Python - "python3" is not in PATH or produced an error
npm ERR! gyp verb find Python checking if "python" can be used
npm ERR! gyp verb find Python - executing "python" to get executable path
npm ERR! gyp verb find Python - "python" is not in PATH or produced an error
npm ERR! gyp verb find Python checking if "python2" can be used
npm ERR! gyp verb find Python - executing "python2" to get executable path
npm ERR! gyp verb find Python - "python2" is not in PATH or produced an error
npm ERR! gyp verb find Python checking if Python is C:\Python37\python.exe
npm ERR! gyp verb find Python - executing "C:\Python37\python.exe" to get version
npm ERR! gyp verb find Python - "C:\Python37\python.exe" could not be run
npm ERR! gyp verb find Python checking if Python is C:\Python27\python.exe
npm ERR! gyp verb find Python - executing "C:\Python27\python.exe" to get version
npm ERR! gyp verb find Python - "C:\Python27\python.exe" could not be run
npm ERR! gyp verb find Python checking if the py launcher can be used to find Python
npm ERR! gyp verb find Python - executing "py.exe" to get Python executable path
npm ERR! gyp verb find Python - executable path is "C:\Users\Admin\AppData\Local\Programs\Python\Python310\python.exe"
npm ERR! gyp verb find Python - executing "C:\Users\Admin\AppData\Local\Programs\Python\Python310\python.exe" to get version
npm ERR! gyp verb find Python - version is "3.10.0"
npm ERR! gyp info find Python using Python version 3.10.0 found at "C:\Users\Admin\AppData\Local\Programs\Python\Python310\python.exe"
npm ERR! gyp verb get node dir no --target version specified, falling back to host node version: 16.14.2
npm ERR! gyp verb command install [ '16.14.2' ]
npm ERR! gyp verb install input version string "16.14.2"
npm ERR! gyp verb install installing version: 16.14.2
npm ERR! gyp verb install --ensure was passed, so won't reinstall if already installed
npm ERR! gyp verb install version is already installed, need to check "installVersion"
npm ERR! gyp verb got "installVersion" 9
npm ERR! gyp verb needs "installVersion" 9
npm ERR! gyp verb install version is good
npm ERR! gyp verb get node dir target node version installed: 16.14.2
npm ERR! gyp verb build dir attempting to create "build" dir: C:\Users\Admin\OneDrive\Desktop\Projects\ReactJs\Grocer - E\react-shopping-cart\node_modules\node-sass\build
npm ERR! gyp verb build dir "build" dir needed to be created? C:\Users\Admin\OneDrive\Desktop\Projects\ReactJs\Grocer - E\react-shopping-cart\node_modules\node-sass\build
npm ERR! gyp verb find VS msvs_version not set from command line or npm config
npm ERR! gyp verb find VS VCINSTALLDIR not set, not running in VS Command Prompt
npm ERR! gyp verb find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details
npm ERR! gyp verb find VS looking for Visual Studio 2015
npm ERR! gyp verb find VS - not found
npm ERR! gyp verb find VS not looking for VS2013 as it is only supported up to Node.js 8
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS msvs_version not set from command line or npm config
npm ERR! gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
npm ERR! gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details
npm ERR! gyp ERR! find VS looking for Visual Studio 2015
npm ERR! gyp ERR! find VS - not found
npm ERR! gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studio
npm ERR! gyp ERR! find VS including the "Desktop development with C++" workload.
npm ERR! gyp ERR! find VS For more information consult the documentation at:
npm ERR! gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Could not find any Visual Studio installation to use
npm ERR! gyp ERR! stack at VisualStudioFinder.fail (C:\Users\Admin\OneDrive\Desktop\Projects\ReactJs\Grocer - E\react-shopping-cart\node_modules\node-gyp\lib\find-visualstudio.js:121:47)
npm ERR! gyp ERR! stack at C:\Users\Admin\OneDrive\Desktop\Projects\ReactJs\Grocer - E\react-shopping-cart\node_modules\node-gyp\lib\find-visualstudio.js:74:16
npm ERR! gyp ERR! stack at VisualStudioFinder.findVisualStudio2013 (C:\Users\Admin\OneDrive\Desktop\Projects\ReactJs\Grocer - E\react-shopping-cart\node_modules\node-gyp\lib\find-visualstudio.js:351:14)
npm ERR! gyp ERR! stack at C:\Users\Admin\OneDrive\Desktop\Projects\ReactJs\Grocer - E\react-shopping-cart\node_modules\node-gyp\lib\find-visualstudio.js:70:14
npm ERR! gyp ERR! stack at C:\Users\Admin\OneDrive\Desktop\Projects\ReactJs\Grocer - E\react-shopping-cart\node_modules\node-gyp\lib\find-visualstudio.js:372:16
npm ERR! gyp ERR! stack at C:\Users\Admin\OneDrive\Desktop\Projects\ReactJs\Grocer - E\react-shopping-cart\node_modules\node-gyp\lib\util.js:54:7
npm ERR! gyp ERR! stack at C:\Users\Admin\OneDrive\Desktop\Projects\ReactJs\Grocer - E\react-shopping-cart\node_modules\node-gyp\lib\util.js:33:16
npm ERR! gyp ERR! stack at ChildProcess.exithandler (node:child_process:406:5)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:526:28)
npm ERR! gyp ERR! stack at maybeClose (node:internal/child_process:1092:16)
npm ERR! gyp ERR! System Windows_NT 10.0.19044
npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Admin\\OneDrive\\Desktop\\Projects\\ReactJs\\Grocer - E\\react-shopping-cart\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd C:\Users\Admin\OneDrive\Desktop\Projects\ReactJs\Grocer - E\react-shopping-cart\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.14.2
npm ERR! gyp ERR! node-gyp -v v7.1.2
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Admin\AppData\Local\npm-cache\_logs\2022-08-19T14_16_27_287Z-debug-0.log
PS C:\Users\Admin\OneDrive\Desktop\Projects\ReactJs\Grocer - E\react-shopping-cart>
Please help me out.
Hi sivadass,
Thanks for your template, there is a typo error in this.state.quickViewProduct in src\components\Product.js line number 54
Thanks
I keep getting Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. error from the console even after I Changed the url to the local json file
Hi @sivadass
I have downloaded the code for shopping cart app and tried to install it via the create-react-app method, so the webpack and babel files are downloaded automatically.
the set up runs, but i get a lot of warnings and also the products dont get listed.
i have attached a screenshot of the same, kindly help me learn about this.
Thanks!
How I can change the products file instead of using your Cloudinary URL?
When quantity of added is equal to 1, show it as 1 No., when it is greater than 1, show it as X Nos..
Based on suggestion from Reddit user marmite22
When you first add the items and then add to cart, add to cart button change their state to added ,it took lots of time to gain their state back ,In this time someone wants to minus the product ,they will able to do but the problem is it cannot be recalculate the amount again.
npm install fails.
Environment:
Ubuntu 20.04 LTS
Node 16.13.2
npm 8.1.2)
2022-08-03T17_45_48_515Z-debug.log
Log is attached.
Thanks.
As i have clone the repo and made build to run in my local system, It gives error as:-
npm ERR! missing script: start
Can you make it support local storage? because now if we refresh after adding to cart, all my items are cleared.
Reported by @Mthreat
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
