Skip to content

Commit

Permalink
Merge pull request #60 from Purple-books-company/Nivetha-dev
Browse files Browse the repository at this point in the history 
Nivetha dev product page
  • Loading branch information
@Shalini-2209
Shalini-2209 authored Jul 4, 2021
2 parents 0be3a42 + 97a1c10 commit 184906d
Show file tree
Hide file tree
Showing 7 changed files with 238 additions and 160 deletions.
216 changes: 119 additions & 97 deletions src/components/pages/Category/Components/procard.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React, { useState } from "react";
import React,{ useState,useEffect,forwardRef,useImperativeHandle } from "react";
import { FiHeart } from "react-icons/fi";
import { FaHeart } from "react-icons/fa";
import product_card from "../../../../api/Products.json";
import { fetchResult } from "../../../../services/api/loaded-services";
import {
Badge,
Card,
Expand All @@ -21,106 +23,86 @@ import {
Productpage
} from "../../../../styles/pages/category-styles";

const Card1 = () => {
const Card1 = forwardRef((props,ref)=> {
const [productData, setproductData] = useState(Array())
const [wishlist, setwishlist] = useState(true)
const [radioPrice, SetRadioPrice] = useState("100to200");
const [radioSize, SetRadioSize] = useState("XXL");
const [toggleHeart, setToggleHeart] = useState(false);
console.log(radioPrice);

useImperativeHandle(ref, () => ({
async fetchCategory(cat){
let pro=[];
pro = await fetchResult("product",cat)
setproductData(pro)
console.log("product",productData)
console.log("casga",cat)
}
}));

function HeartToggle(id) {
setToggleHeart(!toggleHeart);
console.log(id);
console.log(toggleHeart);
}
const listItems1 = product_card.slice(0, 10).map((item, id) => (
<Card className="col-xs-6 col-md-4 col-lg-2" key={id}>
<Badge Status={item.badge}>{item.badge}</Badge>
<a href="/products">
<CardImg
alt="Card image"
className="card-img-top"
variant="top"
src={item.thumb}
/>
</a>
<div className="card-block">
<CardProductName href="/products" className="card-title">
{item.product_name}
</CardProductName>
<CardProductDescription className="card-text">
{item.description}
</CardProductDescription>
<CardProductBottomDetails className="product-bottom-details">
₹{item.newprice}
<CardProductOldprice>₹{item.oldprice}</CardProductOldprice>
<CardProductOffer>{item.offer}%OFF</CardProductOffer>
<CardWishlist id={id} href="">
<FiHeart
className={toggleHeart ? "heart active" : "heart"}
onClick={() => HeartToggle(id)}
/>
</CardWishlist>
</CardProductBottomDetails>
</div>
</Card>
));
const listItems2 = product_card.slice(10, 20).map((item, id) => (
<Card className="col-xs-6 col-md-4 col-lg-2" key={id}>
<Badge Status={item.badge}>{item.badge}</Badge>
<a href="/products">
<CardImg
alt="Card image"
className="card-img-top"
variant="top"
src={item.thumb}
/>
</a>
<div className="card-block">
<CardProductName href="/products" className="card-title">
{item.product_name}
</CardProductName>
<CardProductDescription className="card-text">
{item.description}
</CardProductDescription>
<CardProductBottomDetails className="product-bottom-details">
₹{item.newprice}
<CardProductOldprice>₹{item.oldprice}</CardProductOldprice>
<CardProductOffer>{item.offer}%OFF</CardProductOffer>
<CardWishlist href="">
<FiHeart />
</CardWishlist>
</CardProductBottomDetails>
</div>
</Card>
));
const listItems3 = product_card.slice(20).map((item, id) => (
<Card className="col-xs-6 col-md-4 col-lg-2" key={id}>
<Badge Status={item.badge}>{item.badge}</Badge>
<a href="/products">
<CardImg
alt="Card image"
className="card-img-top"
variant="top"
src={item.thumb}
/>
</a>
<div className="card-block">
<CardProductName href="/products" className="card-title">
{item.product_name}
</CardProductName>
<CardProductDescription className="card-text">
{item.description}
</CardProductDescription>
<CardProductBottomDetails className="product-bottom-details">
₹{item.newprice}
<CardProductOldprice>₹{item.oldprice}</CardProductOldprice>
<CardProductOffer>{item.offer}%OFF</CardProductOffer>
<CardWishlist href="">
<FiHeart />
</CardWishlist>
</CardProductBottomDetails>
</div>
</Card>
));
// const listItems2 = product_card.slice(10, 20).map((item, id) => (
// <Card className="col-xs-6 col-md-4 col-lg-2" key={id}>
// <Badge Status={item.badge}>{item.badge}</Badge>
// <a href="/products">
// <CardImg
// alt="Card image"
// className="card-img-top"
// variant="top"
// src={item.thumb}
// />
// </a>
// <div className="card-block">
// <CardProductName href="/products" className="card-title">
// {item.product_name}
// </CardProductName>
// <CardProductDescription className="card-text">
// {item.description}
// </CardProductDescription>
// <CardProductBottomDetails className="product-bottom-details">
// ₹{item.newprice}
// <CardProductOldprice>₹{item.oldprice}</CardProductOldprice>
// <CardProductOffer>{item.offer}%OFF</CardProductOffer>
// <CardWishlist href="">
// <FiHeart />
// </CardWishlist>
// </CardProductBottomDetails>
// </div>
// </Card>
// ));
// const listItems3 = product_card.slice(20).map((item, id) => (
// <Card className="col-xs-6 col-md-4 col-lg-2" key={id}>
// <Badge Status={item.badge}>{item.badge}</Badge>
// <a href="/products">
// <CardImg
// alt="Card image"
// className="card-img-top"
// variant="top"
// src={item.thumb}
// />
// </a>
// <div className="card-block">
// <CardProductName href="/products" className="card-title">
// {item.product_name}
// </CardProductName>
// <CardProductDescription className="card-text">
// {item.description}
// </CardProductDescription>
// <CardProductBottomDetails className="product-bottom-details">
// ₹{item.newprice}
// <CardProductOldprice>₹{item.oldprice}</CardProductOldprice>
// <CardProductOffer>{item.offer}%OFF</CardProductOffer>
// <CardWishlist href="">
// <FiHeart />
// </CardWishlist>
// </CardProductBottomDetails>
// </div>
// </Card>
// ));
const ShopbyPrice = () => (
<div style={{ boxSizing: "border-box", margin: "0 -5px" }} className="row">
<Shopcol className="col-xs-12 col-md-4 col-lg-2">
Expand Down Expand Up @@ -274,20 +256,60 @@ const Card1 = () => {
return (
<Productpage className="container">
<div className="row">
{listItems1}
{productData.length > 0 &&
productData.map((item,id) => (
<Card className="col-xs-6 col-md-4 col-lg-2" key={id}>
<Badge Status={item.badge}>NEW</Badge>
<a href="/products">
<CardImg
alt="Card image"
className="card-img-top"
variant="top"
src={item.image}
/>
</a>
<div className="card-block">
<CardProductName href="/products" className="card-title">
{item.name}
</CardProductName>
<CardProductDescription className="card-text">
{item.description}
</CardProductDescription>
<CardProductBottomDetails className="product-bottom-details">
₹{item.buyingPrice}
<CardProductOldprice>₹{item.originalPrice}</CardProductOldprice>
<CardProductOffer>{item.discount}%OFF</CardProductOffer>
<CardWishlist id={id} href="">
<span>
{
wishlist ?
<FiHeart onClick={() => setwishlist(!wishlist)} />
:
<FaHeart onClick={() => setwishlist(!wishlist)}/>
}
</span>
{/* <FiHeart
className={toggleHeart ? "heart active" : "heart"}
onClick={() => HeartToggle(id)}
/> */}
</CardWishlist>
</CardProductBottomDetails>
</div>
</Card>
))}
<Shopbyprice className="row">
<h4>Shop by Price</h4>
<ShopbyPrice />
</Shopbyprice>
{listItems2}
{/* {listItems2} */}
<Shopbysize className="row">
<h4>Shop by Size</h4>
<ShopbySize />
</Shopbysize>
{listItems3}
{/* {listItems3} */}
</div>
</Productpage>
);
};
});

export default Card1;
5 changes: 2 additions & 3 deletions src/components/pages/Category/Components/productCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,7 @@ import {
Caro,
CartButton,
WishlistButton,
Similar,
Productpage
Similar
} from "../../../../styles/pages/category-styles";
import { Button } from "../../../../styles/widgets/widgets";
import StarRatings from "react-star-ratings";
Expand Down Expand Up @@ -364,7 +363,7 @@ const Card2 = () => {
$(this).addClass("active").siblings().removeClass("active");
});
});
return <Productpage>{listItems}</Productpage>;
return <div>{listItems}</div>;
};

export default Card2;
Loading

0 comments on commit 184906d

Please sign in to comment.