reza added subject filter to products and set some design bugs

master
Reza_ashrafi 3 years ago
parent 14aed3c7b3
commit 7ca18bbe67
  1. 1
      src/views/About/index.scss
  2. 79
      src/views/Cart/DeliveryMethod/index.js
  3. 48
      src/views/Cart/DeliveryMethod/index.scss
  4. 57
      src/views/Cart/Discount/index.js
  5. 83
      src/views/Cart/Discount/index.scss
  6. 75
      src/views/Cart/Factor/index.js
  7. 53
      src/views/Cart/Factor/index.scss
  8. 87
      src/views/Cart/Item/index.js
  9. 71
      src/views/Cart/Item/index.scss
  10. 299
      src/views/Cart/Table/index.js
  11. 66
      src/views/Cart/Table/index.scss
  12. 204
      src/views/Cart/index.js
  13. 186
      src/views/Cart/index.scss
  14. 4
      src/views/Contact/index.scss
  15. 3
      src/views/Faq/index.scss
  16. 1
      src/views/Home/HomeSlider/Blog/index.scss
  17. 42
      src/views/Home/HomeSlider/Simple/index.js
  18. 6
      src/views/Home/HomeSlider/Simple/index.scss
  19. 18
      src/views/Home/HomeSlider/index.scss
  20. 4
      src/views/Home/Navbar/Laptop/index.scss
  21. 12
      src/views/Home/Navbar/index.scss
  22. 6
      src/views/Home/index.js
  23. 1
      src/views/Home/index.scss
  24. 1
      src/views/MyBooks/index.scss
  25. 2
      src/views/Product/AddToCart/index.js
  26. 23
      src/views/Products/List/index.js
  27. 4
      src/views/Products/index.js
  28. 1
      src/views/Products/index.scss
  29. 1
      src/views/QR/index.scss
  30. 1
      src/views/QRScan/index.scss

@ -5,6 +5,7 @@
padding: 0px 10px;
direction: rtl;
min-height: calc(100vh - 288px);
padding-top: 100px;
&__fury {
margin-top: 30px;
width: 100%;

@ -0,0 +1,79 @@
import './index.scss';
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop: {
h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40,
th: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80,
h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 55,
h3: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
strong: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
span: window.innerWidth > maxDesktopSize ? 10 : window.innerWidth / 95,
},
mobile: {
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 13,
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24,
h3: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30,
strong: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30,
span: window.innerWidth > maxMobileSize ? 10 : window.innerWidth / 34,
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32,
input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20,
},
};
const DeliveryMethod = (props) => {
return (
<>
{window.innerWidth > 1000 ? (
<div
className="delivery-methods d-flex justify-content-between align-items-center"
style={{
background:
props.parent.state.selectedDelivery === props.data
? "#ccffcc"
: "white",
}}
onClick={() =>
props.parent.setState({ selectedDelivery: props.data })
}
>
<strong style={{ fontSize: fontSize.desktop.strong }}>
{props.data.name}
</strong>
<div className="d-flex flex-column align-items-center">
<h3 style={{ fontSize: fontSize.desktop.h3 }}>
{props.data.price}
</h3>
<span style={{ fontSize: fontSize.desktop.span }}>تومان</span>
</div>
</div>
) : null}
{window.innerWidth < 1000 ? (
<div
className="mobile-delivery-methods d-flex justify-content-between align-items-center"
style={{
background:
props.parent.state.selectedDelivery === props.data
? "#ccffcc"
: "white",
}}
onClick={() =>
props.parent.setState({ selectedDelivery: props.data })
}
>
<strong style={{ fontSize: fontSize.mobile.strong }}>
{props.data.name}
</strong>
<div className="d-flex flex-column align-items-center">
<h3 style={{ fontSize: fontSize.mobile.h3 }}>{props.data.price}</h3>
<span style={{ fontSize: fontSize.mobile.span }}>تومان</span>
</div>
</div>
) : null}
</>
);
};
export default DeliveryMethod;

@ -0,0 +1,48 @@
.mobile-delivery-methods {
padding: 6px;
border-radius: 10px;
border: 1px solid #88a9ff;
margin-top: 10px;
width: 48%;
h3,
strong,
span {
font-family: numeralLight;
font-weight: 100;
margin: 0px;
}
strong {
// width: 50%;
color: #678ef8;
letter-spacing: -1px;
}
h3,
span {
color: #02a255;
font-family: numeralMedium;
}
}
.delivery-methods {
padding: 6px;
border-radius: 10px;
border: 1px solid #88a9ff;
margin-top: 10px;
h3,
strong,
span {
font-family: numeralLight;
font-weight: 100;
margin: 0px;
}
strong {
width: 50%;
color: #678ef8;
letter-spacing: -1px;
}
h3,
span {
color: #02a255;
font-family: numeralMedium;
}
}

@ -0,0 +1,57 @@
import React from 'react';
import './index.scss';
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop: {
h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 55,
input : window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 75,
button : window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 75,
p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
},
mobile: {
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24,
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32,
input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20,
button: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20,
},
};
const DiscoutCode = (props) => {
return (
<>
{window.innerWidth > 1000 ? (
<div className="discount-code d-flex flex-column">
<h2 style={{ fontSize: fontSize.desktop.h2 }}>کد تخفیف</h2>
<p style={{ fontSize: fontSize.desktop.p }}>
اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید و دکمه ثبت کد را
بزنید
</p>
<div className="discount-code__box d-flex align-items-center">
<input style={{ fontSize: fontSize.desktop.input }} type="text" />
<button style={{ fontSize: fontSize.desktop.button }}>ثبت کد</button>
</div>
</div>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-discount-code d-flex flex-column">
<h2 style={{ fontSize: fontSize.mobile.h2 }}>کد تخفیف</h2>
<p style={{ fontSize: fontSize.mobile.p }}>
اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید و دکمه ثبت کد را
بزنید
</p>
<div className="mobile-discount-code__box d-flex align-items-center">
<input style={{ fontSize: fontSize.mobile.input }} type="text" />
<button style={{ fontSize: fontSize.desktop.button }}>ثبت کد</button>
</div>
</div>
) : null}
</>
);
};
export default DiscoutCode;

@ -0,0 +1,83 @@
.discount-code {
border-bottom: 1px dotted #A5A5A5;
margin-top: 20px;
padding-bottom: 20px;
h2 {
font-family: numeralBold;
color: #2580ec;
}
p {
font-family: numeralLight;
color: #a5a5a5;
letter-spacing: -1px;
}
&__box{
border: 1px solid #2b95ff;
padding: 5px;
border-radius: 10px;
input {
color: #2b95ff;
font-family: numeralLight;
text-align: center;
padding: 0px;
border-radius: 10px;
border: 0px;
flex: 1;
direction: ltr;
&:focus{
outline : none;
}
}
button {
border-radius: 10px;
background-color: #2b95ff;
font-family: numeralLight;
color: white;
padding: 5px 10px;
border: 0px;
width: 80px;
}
}
}
.mobile-discount-code {
border-bottom: 1px dotted #A5A5A5;
margin-top: 20px;
padding-bottom: 20px;
h2 {
font-family: numeralBold;
color: #2580ec;
}
p {
font-family: numeralLight;
color: #a5a5a5;
letter-spacing: -1px;
}
&__box{
border: 1px solid #2b95ff;
padding: 5px;
border-radius: 10px;
input {
color: #2b95ff;
font-family: numeralLight;
text-align: center;
padding: 5px;
border-radius: 10px;
border: 0px;
flex: 1;
direction: ltr;
&:focus{
outline : none;
}
}
button {
border-radius: 10px;
background-color: #2b95ff;
font-family: numeralLight;
color: white;
padding: 10px 20px;
border: 0px;
}
}
}

@ -0,0 +1,75 @@
import React, { Component } from 'react';
import './index.scss';
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop: {
h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40,
th: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80,
h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 55,
h3: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
strong: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
span: window.innerWidth > maxDesktopSize ? 10 : window.innerWidth / 95,
},
mobile: {
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 13,
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24,
h3: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30,
strong: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30,
span: window.innerWidth > maxMobileSize ? 10 : window.innerWidth / 34,
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32,
input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20,
},
};
const Factor = (props) => {
const { list, parent } = props;
const totalPrice = () => {
let total = 0;
for (let i = 0; i < parent.state.list.length; i++) {
total += parent.state.list[i].price * parent.state.list[i].number;
}
return total;
};
return (
<>
{window.innerWidth < 1000 ? (
<div className="mobile-factor d-flex flex-column">
<div className="d-flex justify-content-between">
<strong>مبلغ سبد خرید</strong>
<span>{totalPrice()} تومان</span>
</div>
<div className="d-flex justify-content-between">
<strong>هزینه ارسال</strong>
<span>{props.parent.state.selectedDelivery.price} تومان</span>
</div>
<div className="d-flex justify-content-between">
<strong>میزان تخفیف</strong>
<span>{props.parent.state.discount} تومان</span>
</div>
</div>
) : null}
{window.innerWidth > 1000 ? (
<div className="factor d-flex flex-column">
<div className="d-flex justify-content-between">
<strong>مبلغ سبد خرید</strong>
<span>{totalPrice()} تومان</span>
</div>
<div className="d-flex justify-content-between">
<strong>هزینه ارسال</strong>
<span>{props.parent.state.selectedDelivery.price} تومان</span>
</div>
<div className="d-flex justify-content-between">
<strong>میزان تخفیف</strong>
<span>{props.parent.state.discount} تومان</span>
</div>
</div>
) : null}
</>
);
};
export default Factor;

@ -0,0 +1,53 @@
.mobile-factor{
border-bottom: 1px dotted #A5A5A5;
margin-top: 20px;
padding-bottom: 20px;
h2 {
font-family: numeralBold;
color: #2580ec;
}
p {
font-family: numeralLight;
color: #a5a5a5;
letter-spacing: -1px;
}
div{
margin-bottom: 10px;
strong{
font-family: numeralLight;
color: #373737;
font-weight: 300;
}
span{
font-family: numeralLight;
color: #373737;
}
}
}
.factor{
border-bottom: 1px dotted #A5A5A5;
margin-top: 20px;
padding-bottom: 20px;
h2 {
font-family: numeralBold;
color: #2580ec;
}
p {
font-family: numeralLight;
color: #a5a5a5;
letter-spacing: -1px;
}
div{
margin-bottom: 10px;
strong{
font-family: numeralLight;
color: #373737;
font-weight: 300;
}
span{
font-family: numeralLight;
color: #373737;
}
}
}

@ -1,87 +0,0 @@
import React from "react";
import DeleteOutlineOutlinedIcon from "@material-ui/icons/DeleteOutlineOutlined";
import "./index.scss";
const maxDesktopSize = 1250;
const fontSize = {
desktop: {
info: {
strong: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75,
p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
},
price: {
strong: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 60,
span: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95,
},
counter: {
button: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 65,
span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 65,
},
delete: {
span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75,
},
},
};
export default function Item(props) {
const { data, handleCounter, handleDelete } = props;
return (
<tr className="cart-item d-flex align-items-center">
<td className="cart-item__info d-flex">
<img src={data.image} alt={data.title} />
<div className="d-flex flex-column justify-content-center">
<strong style={{ fontSize: fontSize.desktop.info.strong }}>
{data.title}
</strong>
<p style={{ fontSize: fontSize.desktop.info.p }}>{data.subTitle}</p>
<span style={{ fontSize: fontSize.desktop.info.span }}>
{data.options}بسته الحاقی:
</span>
</div>
</td>
<td className="cart-item__price d-flex flex-column justify-content-center align-items-center">
<strong style={{ fontSize: fontSize.desktop.price.strong }}>
{data.price} تومان
</strong>
<span style={{ fontSize: fontSize.desktop.price.span }}>
{data.slicePrice} قیمت هر واحد
</span>
</td>
<td className="cart-item__counter d-flex align-items-center">
<div className="cart-item__counter--box d-flex justify-content-around align-items-center">
<button
onClick={() => handleCounter("increase", data.id)}
style={{ fontSize: fontSize.desktop.counter.button }}
>
+
</button>
<span style={{ fontSize: fontSize.desktop.counter.span }}>
{data.number}
</span>
<button
onClick={() => data.number > 1 ? handleCounter("decrease", data.id) : handleDelete(data.id)}
style={{ fontSize: fontSize.desktop.counter.button }}
>
-
</button>
</div>
</td>
<td className="cart-item__delete d-flex align-items-center justify-content-center">
<DeleteOutlineOutlinedIcon
style={{ color: "#FC120A", fontSize: 30, marginLeft: 5 }}
onClick={() => handleDelete(data.id)}
/>
<span
onClick={() => handleDelete(data.id)}
style={{ fontSize: fontSize.desktop.delete.span }}
>
حذف
</span>
</td>
</tr>
);
}

@ -1,71 +0,0 @@
.cart-item{
// justify-content: space-between;
border-top: 1px solid #eee;
padding: 15px 0px;
&__info{
flex: 3;
// flex-shrink: 1;
img{
height: 100px;
border-radius: 10px;
margin-left: 10px;
}
div{
strong{
font-family: numeralBold;
color: #373737;
}
p{
font-family: numeralLight;
color: #00CC69;
margin: 0px;
letter-spacing: -1px;
}
span{
font-family: numeralLight;
color: #2580EC;
letter-spacing: -1px;
}
}
}
&__price{
flex: 1.5;
flex-shrink: 1;
color: #4D4D4F;
strong{
font-family: numeralBold;
}
span{
font-family: numeralLight;
}
}
&__counter{
flex: 1.5;
flex-shrink: 1;
justify-content: center;
&--box{
padding: 5px 10px;
border: 1px solid rgb(177, 177, 177);
border-radius: 8px;
button{
border: 0px;
background-color: white;
color: #4D4D4F;
}
span{
margin: 0px 15px;
color: #4D4D4F;
}
}
}
&__delete{
flex: 1;
margin-left: 20px;
span{
font-family: numeralLight;
color : #FC120A;
}
}
}

@ -1,21 +1,21 @@
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import DeleteOutlineOutlinedIcon from "@material-ui/icons/DeleteOutlineOutlined";
import './index.scss';
import "./index.scss";
const useStyles = makeStyles({
table: {
},
table: {},
});
const maxMobileSize = 550;
const maxDesktopSize = 1250;
const fontSize = {
mobile: {
@ -36,16 +36,32 @@ const fontSize = {
span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 28,
},
},
desktop: {
info: {
strong: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75,
p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
},
price: {
strong: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 60,
span: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95,
},
counter: {
button: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 65,
span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 65,
},
delete: {
span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75,
},
},
};
export default function BasicTable(props) {
const classes = useStyles();
const {list, handleCounter, handleDelete} = props;
const { list, handleCounter, handleDelete } = props;
const sum = () => {
let total = 0;
for(let i = 0; i < list.length; i++) {
for (let i = 0; i < list.length; i++) {
total += list[i].number;
}
return total;
@ -53,42 +69,83 @@ export default function BasicTable(props) {
const totalPrice = () => {
let total = 0;
for(let i = 0; i < list.length; i++) {
for (let i = 0; i < list.length; i++) {
total += list[i].price * list[i].number;
}
return total;
}
};
return (
<>
{
window.innerWidth < 1000 ?
{window.innerWidth < 1000 ? (
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell align="right">محصولات</TableCell>
<TableCell align="center">قیمت</TableCell>
</TableRow>
</TableHead>
<TableBody>
{list.map((row, i) => (
<Item
data={row}
key={i}
handleCounter={handleCounter}
handleDelete={handleDelete}
/>
))}
<TableRow>
<TableCell align="right" component="th" scope="row">
<span style={{ color: "grey" }}>{sum()} محصول</span>
</TableCell>
<TableCell align="center">
<span style={{ color: "grey" }}>مبلغ کل {totalPrice()}</span>
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
) : null}
{window.innerWidth > 1000 ? (
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell align="right">محصولات</TableCell>
<TableCell align="center">قیمت</TableCell>
<TableCell align="center">تعداد</TableCell>
<TableCell align="center"></TableCell>
</TableRow>
</TableHead>
<TableBody>
{ list.map((row,i) => (
<Item data={row} key={i} handleCounter={handleCounter} handleDelete={handleDelete} />
{list.map((row, i) => (
<Item
data={row}
key={i}
handleCounter={handleCounter}
handleDelete={handleDelete}
/>
))}
<TableRow>
<TableCell align="right" component="th" scope="row">
<span style={{ color : 'grey' }}>{sum()} محصول</span>
<span style={{ color: "grey" }}></span>
</TableCell>
<TableCell align="center">
<span style={{ color : 'grey' }}>مبلغ کل {totalPrice()}</span>
<span style={{ color: "grey" }}>مبلغ کل {totalPrice()}</span>
</TableCell>
<TableCell align="center" component="th" scope="row">
<span style={{ color: "grey" }}>{sum()} محصول</span>
</TableCell>
<TableCell align="center" component="th" scope="row">
<span style={{ color: "grey" }}></span>
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer> : null
}
</TableContainer>
) : null}
</>
);
}
@ -102,66 +159,146 @@ export default function BasicTable(props) {
// price: 2500000,
const Item = (props) => {
const {data, handleCounter, handleDelete} = props;
return(
<TableRow key={data.name}>
<TableCell align="right" component="th" scope="row">
<div className="mobile-cart-table-product d-flex align-items-center">
<img src={data.image} alt={data.title} />
<div className="mobile-cart-table-product__info d-flex flex-column p-1">
<strong style={{ fontSize: fontSize.mobile.info.strong }}>
{data.title}
</strong>
<p style={{ fontSize: fontSize.mobile.info.p }}>{data.subTitle}</p>
<span style={{ fontSize: fontSize.mobile.info.span }}>
{data.options}
</span>
<div className="mobile-cart-table-product__info--delete d-flex align-items-center align-self-end">
const { data, handleCounter, handleDelete } = props;
return (
<>
{window.innerWidth < 1000 ? (
<TableRow key={data.name}>
<TableCell align="right" component="th" scope="row">
<div className="mobile-cart-table-product d-flex align-items-center">
<img src={data.image} alt={data.title} />
<div className="mobile-cart-table-product__info d-flex flex-column p-1">
<strong style={{ fontSize: fontSize.mobile.info.strong }}>
{data.title}
</strong>
<p style={{ fontSize: fontSize.mobile.info.p }}>
{data.subTitle}
</p>
<span style={{ fontSize: fontSize.mobile.info.span }}>
{data.options}
</span>
<div className="mobile-cart-table-product__info--delete d-flex align-items-center align-self-end">
<DeleteOutlineOutlinedIcon
style={{ color: "#FC120A", fontSize: 25, marginLeft: 0 }}
onClick={() => handleDelete(data.id)}
/>
<span
onClick={() => handleDelete(data.id)}
style={{
fontSize: fontSize.mobile.delete.span,
color: "#FC120A",
}}
>
حذف
</span>
</div>
</div>
</div>
</TableCell>
<TableCell>
<div className="mobile-cart-table-price d-flex flex-column align-items-center">
<div className="mobile-cart-table-price__price d-flex flex-column justify-content-center align-items-center">
<strong style={{ fontSize: fontSize.mobile.price.strong }}>
{data.price}
</strong>
<span style={{ fontSize: fontSize.mobile.price.span }}>
{data.slicePrice} قیمت هر واحد
</span>
</div>
<div className="mobile-cart-table-price__counter d-flex justify-content-around align-items-center">
<button
onClick={() => handleCounter("increase", data.id)}
style={{ fontSize: fontSize.mobile.counter.button }}
>
+
</button>
<span style={{ fontSize: fontSize.mobile.counter.span }}>
{data.number}
</span>
<button
onClick={() =>
data.number > 1
? handleCounter("decrease", data.id)
: handleDelete(data.id)
}
style={{ fontSize: fontSize.mobile.counter.button }}
>
-
</button>
</div>
</div>
</TableCell>
</TableRow>
) : null}
{window.innerWidth > 1000 ? (
<TableRow key={data.name}>
<TableCell align="right" component="th" scope="row">
<div className="cart-item__info d-flex">
<img src={data.image} alt={data.title} />
<div className="d-flex flex-column justify-content-center">
<strong style={{ fontSize: fontSize.desktop.info.strong }}>
{data.title}
</strong>
<p style={{ fontSize: fontSize.desktop.info.p }}>
{data.subTitle}
</p>
<span style={{ fontSize: fontSize.desktop.info.span }}>
{data.options}بسته الحاقی:
</span>
</div>
</div>
</TableCell>
<TableCell>
<div className="cart-item__price d-flex flex-column justify-content-center align-items-center">
<strong style={{ fontSize: fontSize.desktop.price.strong }}>
{data.price} تومان
</strong>
<span style={{ fontSize: fontSize.desktop.price.span }}>
{data.slicePrice} قیمت هر واحد
</span>
</div>
</TableCell>
<TableCell>
<div className="cart-item__counter d-flex align-items-center">
<div className="cart-item__counter--box d-flex justify-content-around align-items-center">
<button
onClick={() => handleCounter("increase", data.id)}
style={{ fontSize: fontSize.desktop.counter.button }}
>
+
</button>
<span style={{ fontSize: fontSize.desktop.counter.span }}>
{data.number}
</span>
<button
onClick={() =>
data.number > 1
? handleCounter("decrease", data.id)
: handleDelete(data.id)
}
style={{ fontSize: fontSize.desktop.counter.button }}
>
-
</button>
</div>
</div>
</TableCell>
<TableCell>
<div className="cart-item__delete d-flex align-items-center justify-content-center">
<DeleteOutlineOutlinedIcon
style={{ color: "#FC120A", fontSize: 25, marginLeft: 0 }}
style={{ color: "#FC120A", fontSize: 30, marginLeft: 5 }}
onClick={() => handleDelete(data.id)}
/>
<span
onClick={() => handleDelete(data.id)}
style={{ fontSize: fontSize.mobile.delete.span, color: "#FC120A"}}
style={{ fontSize: fontSize.desktop.delete.span }}
>
حذف
</span>
</div>
</div>
</div>
</TableCell>
<TableCell>
<div className="mobile-cart-table-price d-flex flex-column align-items-center">
<div className="mobile-cart-table-price__price d-flex flex-column justify-content-center align-items-center">
<strong style={{ fontSize: fontSize.mobile.price.strong }}>
{data.price}
</strong>
<span style={{ fontSize: fontSize.mobile.price.span }}>
{data.slicePrice} قیمت هر واحد
</span>
</div>
<div className="mobile-cart-table-price__counter d-flex justify-content-around align-items-center">
<button
onClick={() => handleCounter("increase", data.id)}
style={{ fontSize: fontSize.mobile.counter.button }}
>
+
</button>
<span style={{ fontSize: fontSize.mobile.counter.span }}>
{data.number}
</span>
<button
onClick={() => data.number > 1 ? handleCounter("decrease", data.id) : handleDelete(data.id)}
style={{ fontSize: fontSize.mobile.counter.button }}
>
-
</button>
</div>
</div>
</TableCell>
</TableRow>
</div>
</TableCell>
</TableRow>
) : null}
</>
);
}
};

@ -74,3 +74,69 @@
.MuiTableCell-root{
padding: 10px 0px !important;
}
.cart-item{
// justify-content: space-between;
border-top: 1px solid #eee;
padding: 15px 0px;
&__info{
// flex-shrink: 1;
img{
height: 100px;
border-radius: 10px;
margin-left: 10px;
}
div{
strong{
font-family: numeralBold;
color: #373737;
}
p{
font-family: numeralLight;
color: #00CC69;
margin: 0px;
letter-spacing: -1px;
}
span{
font-family: numeralLight;
color: #2580EC;
letter-spacing: -1px;
}
}
}
&__price{
color: #4D4D4F;
strong{
font-family: numeralBold;
}
span{
font-family: numeralLight;
}
}
&__counter{
justify-content: center;
&--box{
padding: 5px 10px;
border: 1px solid rgb(177, 177, 177);
border-radius: 8px;
button{
border: 0px;
background-color: white;
color: #4D4D4F;
}
span{
margin: 0px 15px;
color: #4D4D4F;
}
}
}
&__delete{
margin-left: 20px;
span{
font-family: numeralLight;
color : #FC120A;
}
}
}

@ -1,8 +1,10 @@
import React, { Component } from "react";
import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index";
import Item from "./Item/index";
import Table from "./Table/index";
import DiscoutCode from "./Discount/index";
import DeliveryMethod from "./DeliveryMethod/index";
import Factor from "./Factor/index";
import book1 from "../../assets/images/book1.png";
@ -19,6 +21,7 @@ const fontSize = {
h3: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
strong: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
span: window.innerWidth > maxDesktopSize ? 10 : window.innerWidth / 95,
p: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 90,
},
mobile: {
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 13,
@ -32,7 +35,7 @@ const fontSize = {
};
export default class Cart extends Component {
state = {
selectedDelivery: { name : '', price : 0},
selectedDelivery: { name: "", price: 0 },
discount: 0,
totalPrice: null,
list: [
@ -107,33 +110,16 @@ export default class Cart extends Component {
<>
<div className="cart d-flex flex-column">
<Navbar />
<div className="d-flex">
<div className="d-flex" style={{ width: "100%", flex: 1, marginBottom : 10 }}>
<section className="cart__right d-flex flex-column">
<header>
<h1 style={{ fontSize: fontSize.desktop.h1 }}>سبد خرید</h1>
</header>
<table>
<thead>
<tr>
<div className="d-flex align-items-center">
<th style={{ flex: 3, textAlign: "center" }}>1</th>
<th style={{ flex: 1.5, textAlign: "center" }}>2</th>
<th style={{ flex: 1.5, textAlign: "center" }}>3</th>
<th style={{ flex: 1, textAlign: "center" }}>4</th>
</div>
</tr>
</thead>
<tbody>
{this.state.list.map((item, i) => (
<Item
handleDelete={this.handleDelete}
handleCounter={this.handleCounter}
data={item}
key={i}
/>
))}
</tbody>
</table>
<Table
list={this.state.list}
handleCounter={this.handleCounter}
handleDelete={this.handleDelete}
/>
{this.state.totalPrice ? (
<div className="cart__right--price d-flex justify-content-end">
<div className="d-flex ml-2">جمع کل سبد خرید</div>
@ -154,7 +140,37 @@ export default class Cart extends Component {
))}
</div>
</header>
<button>پرداخت</button>
<DiscoutCode />
<Factor parent={this} />
<div className="cart__totalPrice d-flex align-items-center justify-content-center">
<h3 style={{ fontSize: fontSize.mobile.h2 }}>
جمع کل
<br />
سبد خرید
</h3>
<div className="d-flex align-items-center">
<strong style={{ fontSize: fontSize.mobile.h1 }}>
{this.totalPrice()}
</strong>
<span style={{ fontSize: fontSize.mobile.h3 }}>
تومان
</span>
</div>
</div>
<div className="cart__left--header d-flex flex-column mt-3">
<h2 style={{ fontSize: fontSize.desktop.h2 }}>
روشهای ارسال
</h2>
<p style={{ fontSize: fontSize.desktop.p }}>
با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید
</p>
<div className="d-flex justify-content-between">
{this.props.payMethods.map((item, i) => (
<DeliveryMethod data={item} key={i} parent={this} />
))}
</div>
</div>
<button className="cart__left--submit">پرداخت</button>
</section>
</div>
</div>
@ -184,7 +200,7 @@ export default class Cart extends Component {
))}
</div>
</div>
<DiscoutCode />
<DiscoutCode parent={this} />
<Factor parent={this} />
<div className="mobile-cart__totalPrice d-flex align-items-center justify-content-center">
<h3 style={{ fontSize: fontSize.mobile.h2 }}>
@ -219,140 +235,6 @@ export default class Cart extends Component {
}
}
const DeliveryMethod = (props) => {
return (
<>
{window.innerWidth > 1000 ? (
<div
className="delivery-methods d-flex justify-content-between align-items-center"
style={{
background:
props.parent.state.selectedDelivery === props.data
? "#00ff00"
: "white",
}}
onClick={() =>
props.parent.setState({ selectedDelivery: props.data })
}
>
<strong style={{ fontSize: fontSize.desktop.strong }}>
{props.data.name}
</strong>
<div className="d-flex flex-column align-items-center">
<h3 style={{ fontSize: fontSize.desktop.h3 }}>
{props.data.price}
</h3>
<span style={{ fontSize: fontSize.desktop.span }}>تومان</span>
</div>
</div>
) : null}
{window.innerWidth < 1000 ? (
<div
className="mobile-delivery-methods d-flex justify-content-between align-items-center"
style={{
background:
props.parent.state.selectedDelivery === props.data
? "#ccffcc"
: "white",
}}
onClick={() =>
props.parent.setState({ selectedDelivery: props.data })
}
>
<strong style={{ fontSize: fontSize.mobile.strong }}>
{props.data.name}
</strong>
<div className="d-flex flex-column align-items-center">
<h3 style={{ fontSize: fontSize.mobile.h3 }}>{props.data.price}</h3>
<span style={{ fontSize: fontSize.mobile.span }}>تومان</span>
</div>
</div>
) : null}
</>
);
};
const DiscoutCode = (props) => {
return (
<>
{window.innerWidth > 1000 ? (
<div
className="delivery-methods d-flex justify-content-between align-items-center"
style={{
background:
props.parent.state.selectedDelivery === props.data
? "#00ff00"
: "white",
}}
onClick={() =>
props.parent.setState({ selectedDelivery: props.data })
}
>
<strong style={{ fontSize: fontSize.desktop.strong }}>
{props.data.name}
</strong>
<div className="d-flex flex-column align-items-center">
<h3 style={{ fontSize: fontSize.desktop.h3 }}>
{props.data.price}
</h3>
<span style={{ fontSize: fontSize.desktop.span }}>تومان</span>
</div>
</div>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-discount-code d-flex flex-column">
<h2 style={{ fontSize: fontSize.mobile.h2 }}>کد تخفیف</h2>
<p style={{ fontSize: fontSize.mobile.p }}>
اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید و دکمه ثبت کد را
بزنید
</p>
<div className="mobile-discount-code__box d-flex align-items-center">
<input style={{ fontSize: fontSize.mobile.input }} type="text" />
<button>ثبت کد</button>
</div>
</div>
) : null}
</>
);
};
const Factor = (props) => {
const { list, parent } = props;
const totalPrice = () => {
let total = 0;
for (let i = 0; i < parent.state.list.length; i++) {
total += parent.state.list[i].price * parent.state.list[i].number;
}
return total;
};
return (
<>
{window.innerWidth < 1000 ? (
<div className="mobile-factor d-flex flex-column">
<h2 style={{ fontSize: fontSize.mobile.h2 }}>کد تخفیف</h2>
<p style={{ fontSize: fontSize.mobile.p }}>
اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید و دکمه ثبت کد را
بزنید
</p>
<div className="d-flex justify-content-between">
<strong>مبلغ سبد خرید</strong>
<span>{totalPrice()} تومان</span>
</div>
<div className="d-flex justify-content-between">
<strong>هزینه ارسال</strong>
<span>{props.parent.state.selectedDelivery.price} تومان</span>
</div>
<div className="d-flex justify-content-between">
<strong>میزان تخفیف</strong>
<span>{props.parent.state.discount} تومان</span>
</div>
</div>
) : null}
</>
);
};
Cart.defaultProps = {
payMethods: [
{

@ -1,40 +1,56 @@
.cart {
width: 100vw;
height: 100vh;
max-width: 1250px;
margin: 0px auto;
padding: 0px 10px;
padding: 0px;
font-family: numeralLight;
&__right {
flex: 4;
padding: 10px 0px 0px;
header {
h1 {
padding-top: 100px;
&__totalPrice{
padding: 20px 0px;
border-bottom: 1px dotted #A5A5A5;
padding-bottom: 20px;
h3{
font-family: numeralLight;
color: #00CC69;
margin: 0px;
}
div{
margin-right: 20px;
strong{
font-family: numeralBold;
color: #373737;
color: #4D4D4F;
margin-left: 5px;
}
}
table {
tr {
th {
font-family: numeralLight;
color: #afafaf;
}
span{
font-family: numeralLight;
color: #848484;
}
}
}
&__right {
flex: 4;
padding: 10px 0px 0px;
}
&__left {
flex: 1.2;
box-shadow: 0px 0px 13px #d5d5d5b0;
border-radius: 13px;
margin-right: 30px;
&--header {
h2 {
font-family: numeralBold;
color: #2580ec;
}
p {
font-family: numeralLight;
color: #a5a5a5;
letter-spacing: -1px;
}
}
button {
&--submit{
justify-self: flex-end;
padding: 12px;
width: 100%;
@ -45,29 +61,6 @@
border-radius: 10px;
margin-top: 50px;
}
.delivery-methods {
padding: 6px;
border-radius: 10px;
border: 1px solid #88a9ff;
margin-top: 10px;
h3,
strong,
span {
font-family: numeralLight;
font-weight: 100;
margin: 0px;
}
strong {
width: 50%;
color: #678ef8;
letter-spacing: -1px;
}
h3,
span {
color: #02a255;
font-family: numeralMedium;
}
}
}
}
@ -95,29 +88,7 @@
font-family: numeralBold;
color: #373737;
}
&__totalPrice{
padding: 20px 0px;
border-bottom: 1px dotted #A5A5A5;
padding-bottom: 20px;
h3{
font-family: numeralLight;
color: #00CC69;
margin: 0px;
}
div{
margin-right: 20px;
strong{
font-family: numeralBold;
color: #4D4D4F;
margin-left: 5px;
}
span{
font-family: numeralLight;
color: #848484;
}
}
}
&__payMethods {
border-bottom: 1px dotted #A5A5A5;
margin-top: 20px;
@ -131,98 +102,9 @@
color: #a5a5a5;
letter-spacing: -1px;
}
.mobile-delivery-methods {
padding: 6px;
border-radius: 10px;
border: 1px solid #88a9ff;
margin-top: 10px;
width: 48%;
h3,
strong,
span {
font-family: numeralLight;
font-weight: 100;
margin: 0px;
}
strong {
// width: 50%;
color: #678ef8;
letter-spacing: -1px;
}
h3,
span {
color: #02a255;
font-family: numeralMedium;
}
}
}
.mobile-discount-code {
border-bottom: 1px dotted #A5A5A5;
margin-top: 20px;
padding-bottom: 20px;
h2 {
font-family: numeralBold;
color: #2580ec;
}
p {
font-family: numeralLight;
color: #a5a5a5;
letter-spacing: -1px;
}
&__box{
border: 1px solid #2b95ff;
padding: 5px;
border-radius: 10px;
input {
color: #2b95ff;
font-family: numeralLight;
text-align: center;
padding: 5px;
border-radius: 10px;
border: 0px;
flex: 1;
direction: ltr;
&:focus{
outline : none;
}
}
button {
border-radius: 10px;
background-color: #2b95ff;
font-family: numeralLight;
color: white;
padding: 10px 20px;
border: 0px;
}
}
}
.mobile-factor{
border-bottom: 1px dotted #A5A5A5;
margin-top: 20px;
padding-bottom: 20px;
h2 {
font-family: numeralBold;
color: #2580ec;
}
p {
font-family: numeralLight;
color: #a5a5a5;
letter-spacing: -1px;
}
div{
margin-bottom: 10px;
strong{
font-family: numeralLight;
color: #373737;
font-weight: 300;
}
span{
font-family: numeralLight;
color: #373737;
}
}
}
}

@ -6,6 +6,7 @@
direction: rtl;
min-height: calc(100vh - 288px);
overflow-x: hidden;
padding-top: 100px;
&__forms {
width: 100%;
justify-content: space-between;
@ -151,6 +152,9 @@
width: 100%;
height: 430px;
border-radius: 20px;
img{
transform: scale(0.4);
}
}
}
}

@ -5,6 +5,7 @@
padding: 0px 10px;
direction: rtl;
min-height: calc(100vh - 288px);
padding-top: 100px;
&__header {
margin-top: 30px;
width: 600px;
@ -63,7 +64,7 @@
padding: 0px 10px;
direction: rtl;
overflow-x: hidden;
padding-top: 80px;
padding-top: 90px;
&__header {
margin-top: 30px;
width: 100%;

@ -6,6 +6,7 @@
width: 100%;
text-decoration: none;
position: relative;
max-width: 300px;
img {
width: 100%;
height: 200px;

@ -7,10 +7,10 @@ const maxDesktopSize = 1250;
const fontSize = {
desktop: {
h1: window.innerWidth > maxDesktopSize ? 22 : window.innerWidth / 65,
h2: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85,
notAvailable: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70,
available: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70,
h1: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 65,
h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
notAvailable: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
available: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
},
};
@ -27,22 +27,26 @@ export default class Simple extends Component {
<h1 style={{fontSize : fontSize.desktop.h1 }}>{data.title}</h1>
<h2 style={{fontSize: fontSize.desktop.h2 }}>{data.subTitle}</h2>
{
data.price ?
<div className="slider-simple__price d-flex justify-content-center">
{
data.oldPrice ?
<div>
<div style={{fontSize: fontSize.desktop.available }} className="slider-simple__price--old d-flex">
{data.oldPrice} تومان
<span></span>
</div>
</div> : null
}
<div style={{fontSize: fontSize.desktop.available }} className="slider-simple__price--price">{data.price} تومان</div>
</div> :
<div style={{fontSize: fontSize.desktop.notAvailable }} className="slider-simple__notAvailabe">ناموجود</div>
data.price !== undefined ?
data.price ?
<div className="slider-simple__price d-flex justify-content-center">
{
data.oldPrice ?
<div>
<div style={{fontSize: fontSize.desktop.available }} className="slider-simple__price--old d-flex">
{data.oldPrice} تومان
<span></span>
</div>
</div> : null
}
<div style={{fontSize: fontSize.desktop.available }} className="slider-simple__price--price">{data.price} تومان</div>
</div> :
<div style={{fontSize: fontSize.desktop.notAvailable }} className="slider-simple__notAvailabe">ناموجود</div>
: null
}
</Link>
</article>

@ -3,13 +3,13 @@
a{
width : 100%;
text-decoration: none;
max-width: 200px;
&:hover{
}
img{
width: 100%;
height: 300px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
height: 250px;
border-radius: 10px;
}
h1{
font-family: numeralBold;

@ -17,7 +17,7 @@
.home-slider {
width: 100%;
padding: 2px 0px 0px;
margin: 10px 0px 10px;
margin: 20px 0px 10px;
position: relative;
.rec-arrow-left{
top : calc(50% - 22px) !important;
@ -39,17 +39,17 @@
}
.Carousel-button-10 {
background-color: white !important;
background-color: grey !important;
}
.rec-pagination {
z-index: 600;
z-index: 200;
// left: calc(50% - 20px) !important;
& button {
background-color: grey;
margin: 2px !important;
box-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
box-shadow: 0px 0px 0px rgba(100, 100, 100, 1);
&:focus{
box-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
box-shadow: 0px 0px 0px rgba(100, 100, 100, 1);
}
}
}
@ -64,15 +64,15 @@
background-color: inherit !important;
box-shadow: none !important;
border: 0px !important;
color: white !important;
color: grey !important;
&:focus{
color: white !important;
color: grey !important;
}
&:disabled{
color: #eee !important;
color: black !important;
}
&:enabled{
color: white;
color: grey;
}
&:hover{
color: white;

@ -6,6 +6,8 @@
font-family: numeralLight;
z-index: 100;
overflow: hidden;
background-color: white;
padding: 0px 10px 0px 20px;
&::-webkit-scrollbar{
display: none;
width: 0px;
@ -14,6 +16,8 @@
// width: 100px;
// height: 50px;
// background : greenyellow;
position: relative;
left: 14px;
}
&__list{
margin : 0px;

@ -1,7 +1,11 @@
.navbar{
width: 100%;
position: fixed;
top: 0px;
left: 0px;
max-width: 1250px;
position: fixed !important;
top: 0px !important;
overflow-x: hidden;
}
background-color:white !important;
z-index: 200;
// margin: 0px auto !important;
}

@ -471,7 +471,7 @@ Home.defaultProps = {
type: window.innerWidth > 1000 ? "slider" : "scroll",
title: "کتابهای من",
moreText: 'لیست کتابها',
height: window.innerWidth > 1000 ? 470 : 270,
height: window.innerWidth > 1000 ? 340 : 270,
design: window.innerWidth > 1000 ? "simple" : "myProduct",
number: window.innerWidth > 1000 ? 4 : 2.8,
data: [
@ -554,7 +554,7 @@ Home.defaultProps = {
type: window.innerWidth > 1000 ? "slider" : "scroll",
title: "پرفروشترین کتابهای دانوین",
moreText: 'لیست کتابها',
height: window.innerWidth > 1000 ? 470 : 320,
height: window.innerWidth > 1000 ? 420 : 320,
design: window.innerWidth > 1000 ? "simple" : "product",
number: window.innerWidth > 1000 ? 4 : 2.8,
data: [
@ -650,7 +650,7 @@ Home.defaultProps = {
{
type: window.innerWidth > 1000 ? "slider" : "scroll",
title: "جدیدترین کتابهای دانوین",
height: window.innerWidth > 1000 ? 470 : 320,
height: window.innerWidth > 1000 ? 420 : 320,
design: window.innerWidth > 1000 ? "tab" : 'product',
number: window.innerWidth > 1000 ? 4 : 3.5,
moreText: 'لیست کتابها',

@ -4,6 +4,7 @@
margin: 0px auto;
padding : 0px 10px;
direction: rtl;
padding-top: 100px;
}

@ -5,6 +5,7 @@
padding : 0px 10px;
direction: rtl;
min-height: calc(100vh - 288px);
padding-top: 100px;
}
.mobile-mybooks{

@ -37,7 +37,7 @@ export default function AddToCart(props) {
خرید نسخه دیجیتال
</button>
<button style={{ fontSize: fontSize.desktop.button }} className="product-addtocart__box--addButton">
افزپدن به سبد خریذ
افزودن به سبد خرید
</button>
<div className="product-addtocart__box--accept d-flex">
<input type="checkbox" />

@ -16,9 +16,26 @@ export default class List extends React.Component {
sortList = sortList.sort((a, b) => (a.price < b.price && ( a.price !== '' || b.price !== '' ) ? -1 : 1));
}
var filterList;
for(let j = 0; j <= parent.state.selectedFilters.subject.length; j++) {
filterList = sortList.filter(item => parent.state.selectedFilters.subject.indexOf(item.title) === -1);
};
if(parent.state.selectedFilters.subject.length > 0 && parent.state.selectedFilters.level.length > 0){
console.log(parent.state.selectedFilters.subject.length, parent.state.selectedFilters.level.length);
for(let j = 0; j < parent.state.selectedFilters.subject.length; j++) {
filterList = sortList.filter(item => item.title.indexOf(parent.state.selectedFilters.subject[j]) !== -1);
};
for(let j = 0; j < parent.state.selectedFilters.level.length; j++) {
filterList = filterList.filter(item => item.subTitle.indexOf(parent.state.selectedFilters.level[j]) !== -1);
};
}else if(parent.state.selectedFilters.level.length > 0){
for(let j = 0; j < parent.state.selectedFilters.level.length; j++) {
filterList = sortList.filter(item => item.subTitle.indexOf(parent.state.selectedFilters.level[j]) !== -1);
};
}else if(parent.state.selectedFilters.subject.length > 0){
for(let j = 0; j < parent.state.selectedFilters.subject.length; j++) {
filterList = sortList.filter(item => item.title.indexOf(parent.state.selectedFilters.subject[j]) !== -1);
};
}else{
filterList = sortList;
}
return (
<div className="products-list d-flex flex-wrap">

@ -111,13 +111,13 @@ Products.defaultProps = {
'اول',
'دوم',
'سوم',
'چهارم',
'دهم',
],
products: [
{
id: 0,
image: book1,
title: "کتاب علوم تجربی",
title: "کتاب شیمی آلی",
subTitle: "پایه دهم ابتدایی",
price: "78.000",
oldPrice: "",

@ -5,6 +5,7 @@
padding : 0px 10px;
direction: rtl;
min-height: calc(100vh - 288px);
padding-top: 100px;
&__body{
margin-top: 20px;
&--left{

@ -128,6 +128,7 @@
direction: rtl;
overflow-x: hidden;
min-height: calc(100vh - 288px);
padding-top: 100px;
.qr__sidebar {
flex: 1;
&--header {

@ -111,4 +111,5 @@
padding: 0px 10px;
direction: rtl;
overflow-x: hidden;
padding-top: 100px;
}

Loading…
Cancel
Save