return (
<>
{Object.keys(product.productsByPrice).map((key, index) => {
return (
<Card
headerLeft={`${props.match.params.slug} mobile en-dessous de ${priceRange[key]}`}
headerRight={<button>view all</button>}
style={{
width: 'calc(100% - 40px)',
margin: '20px'
}}
>
<div className="cardHeader">
<div></div>
</div>
<div style={{ display: "flex" }}>
{product.productsByPrice[key].map(product => (
<Link to={`${product.slug}/${product._id}/p `}
style={{display:"block"}}
className="productContainer">
<div className="productImgContainer">
<img src={generatePublicUrl(product.productPictures[0].img)} alt="" />
</div>
<div className="productInfo">
<div style={{ margin: '5px 0' }}>{product.name}</div>
<div>
<span>4.3</span>
<span>3353</span>
</div>
<div className="productPrice">{product.price}</div>
</div>
</Link>
))}
</div>
</Card>
);
})
}
</>
);
{
"name": "pandcomm-clone",
"version": "0.1.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "pandcomm-clone",
"version": "0.1.0",
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.3.4",
"browserify-zlib": "^0.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^3.11.0",
"react-redux": "^8.0.5",
"react-responsive-carousel": "^3.2.10",
"react-router-dom": "^5.2.0",
"react-router-native": "^6.10.0",
"react-scripts": "5.0.1",
"redux": "^4.2.1",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.4.2",
"web-vitals": "^2.1.4"
}
},
</div>
{}
<div className="flexRow">
<MaterialButton
title="ADD TO CART"
bgColor="#ff9f00"
textColor="#ffffff"
style={{
marginLeft: "5px",
}}
icon={<IoMdCart />}
onClick={() => {
const { _id, name, price } = product.productDetails;
const img = product.productDetails.productPictures[0].img;
dispatch(addToCart({ _id, name, price, img }));
props.history.push(`/cart`);
}}
/>
<MaterialButton
title="BUY NOW"
bgColor="#fb641b"
textColor="#ffffff"
style={{
marginLeft: "25px",
}}
icon={<AiFillThunderbolt />}
/>
</div>
</div>
</div>
Hello Mr Rizwan Khan,I contact you from the city of Roanne in France, 60 km from the city of Lyon. Thank you for your videos Mern Stack | Ecommerce Project | Flipkart Clone, and the time you spend sharing.
I am facing a problem on the flipkart-clone file, when I click on the product images to access the following page, the address is put in the browser window:
( http://localhost:3000/SAMSUNG-Galaxy-S20-FE-5G-(Cloud-Lavender-128-Go)-(8-Go-de-RAM)/643062f36e324f827b1b0b5c/p>http://localhost:3000/SAMSUNG-Galaxy-S20-FE-5G-(Cloud-Lavender-128-Go)-(8-Go-de-RAM)/643062f36e324f827b1b0b5c/p )
But don't access it, I have to refresh the page to access it, and it's the same once I'm on the page and I click on the add to cart button I have to refresh the page to access the page http://localhost:3000/cart.>http://localhost:3000/cart. (my pandcom file matches your flipcart file). Is this from react versions…. A coding error, an error between admin -app and flipkart-clone ???(my zadmin app file corresponds to your admin app file)
Can you help me solve this problem, because I've been on it for 15 days and I can't find it after trying everything. Let me know if you need any other info? Thank you in advance for your response, and again, thank you for what you do.
Cordially
Paul Didier
{
"name": "admin-app",
"version": "0.1.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "admin-app",
"version": "0.1.0",
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.3.3",
"bootstrap": "^4.6.0",
"react": "^18.2.0",
"react-bootstrap": "^2.7.0",
"react-checkbox-tree": "^1.8.0",
"react-dom": "^18.2.0",
"react-icons": "^4.8.0",
"react-redux": "^8.0.5",
"react-router-dom": "^5.2.0",
"react-scripts": "5.0.1",
"redux": "^4.2.1",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.4.2",
"web-vitals": "^2.1.4"
}
},