Reza added cart mobile

master
Reza_ashrafi 3 years ago
parent b1db5b2d03
commit 35713c49e2
  1. 151
      src/views/About/index.js
  2. 10
      src/views/About/index.scss
  3. 27
      src/views/Cart/Table/index.js
  4. 8
      src/views/Cart/Table/index.scss
  5. 248
      src/views/Cart/index.js
  6. 183
      src/views/Cart/index.scss

@ -14,15 +14,14 @@ const maxDesktopSize = 1250;
const maxMobileSize = 650;
const fontSize = {
desktop:{
desktop: {
h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40,
p: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 80,
h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70,
li : window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80,
}
li: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80,
},
};
export default class About extends Component {
state = {
fury: {
@ -55,52 +54,122 @@ export default class About extends Component {
const { fury, advantages, keywords } = this.state;
return (
<>
<div className="about d-flex flex-column align-items-center">
<Navbar page={'about'} />
<div className="about__fury d-flex">
<div className="about__fury--right d-flex flex-column justify-content-center">
<div className="right-top align-self-start">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{fury.title}</h1>
<p style={{ fontSize: fontSize.desktop.p }}>{fury.text}</p>
</div>
<div className="right-bottom align-self-end">
<h2 style={{ fontSize: fontSize.desktop.h2 }}>{keywords.title}</h2>
<ul>
{keywords.list.map((item, i) => (
<Fragment key={i}>
<li style={{ fontSize: fontSize.desktop.li }}>{item}</li><br/>
</Fragment>
{window.innerWidth > 1000 ? (
<>
<div className="about d-flex flex-column align-items-center">
<Navbar page={"about"} />
<div className="about__fury d-flex">
<div className="about__fury--right d-flex flex-column justify-content-center">
<div className="right-top align-self-start">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>
{fury.title}
</h1>
<p style={{ fontSize: fontSize.desktop.p }}>{fury.text}</p>
</div>
<div className="right-bottom align-self-end">
<h2 style={{ fontSize: fontSize.desktop.h2 }}>
{keywords.title}
</h2>
<ul>
{keywords.list.map((item, i) => (
<Fragment key={i}>
<li style={{ fontSize: fontSize.desktop.li }}>
{item}
</li>
<br />
</Fragment>
))}
</ul>
</div>
</div>
<div className="about__fury--left d-flex align-items-center">
<img
className="about__fury--left__1"
src={aboutLg}
alt="عکس"
/>
{this.props.absoluteImages.map((item, i) => (
<img src={item.imageUrl} className={item.class} alt="عکس" />
))}
</ul>
</div>
</div>
<div className="about__advantages d-flex">
<div className="about__advantages--right d-flex">
<img src={pic} alt={"عکس"} />
</div>
<div className="about__advantages--left">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>
{advantages.title}
</h1>
<ul>
{advantages.list.map((item, i) => (
<Fragment key={i}>
<li style={{ fontSize: fontSize.desktop.li }}>
{item}
</li>
<br />
</Fragment>
))}
</ul>
</div>
</div>
</div>
<div className="about__fury--left d-flex align-items-center">
<img className="about__fury--left__1" src={aboutLg} alt="عکس" />
<img className="about__fury--left__2" src={aboutMd} alt="عکس" />
<img className="about__fury--left__3" src={aboutXs1} alt="عکس" />
<img className="about__fury--left__4" src={aboutXs2} alt="عکس" />
<Footer />
</>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-about d-flex flex-column">
<Navbar page={"about"} />
<div className="mobile-about__fury d-flex flex-column">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{fury.title}</h1>
<p style={{ fontSize: fontSize.desktop.p }}>{fury.text}</p>
</div>
</div>
<div className="about__advantages d-flex">
<div className="about__advantages--right d-flex">
<img src={pic} alt={'عکس'} />
<div className="mobile-about__images-- d-flex">
{this.props.absoluteImages.map((item, i) => (
<img src={item.imageUrl} className={item.class} alt="عکس" />
))}
</div>
<div className="about__advantages--left">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{advantages.title}</h1>
<div className="right-bottom align-self-end">
<h2 style={{ fontSize: fontSize.desktop.h2 }}>
{keywords.title}
</h2>
<ul>
{advantages.list.map((item, i) => (
<Fragment key={i}>
<li style={{ fontSize: fontSize.desktop.li }}>{item}</li><br/>
</Fragment>
))}
</ul>
{keywords.list.map((item, i) => (
<Fragment key={i}>
<li style={{ fontSize: fontSize.desktop.li }}>{item}</li>
<br />
</Fragment>
))}
</ul>
</div>
<div className="mobile-about__video d-flex">
<img src={pic} alt={"عکس"} />
</div>
<div className="mobile-about__advantages--left">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>
{advantages.title}
</h1>
<ul>
{advantages.list.map((item, i) => (
<Fragment key={i}>
<li style={{ fontSize: fontSize.desktop.li }}>{item}</li>
<br />
</Fragment>
))}
</ul>
</div>
</div>
</div>
<Footer />
) : null}
</>
);
}
}
About.defaultProps = {
absoluteImages: [
{ class: "about__fury--left__1", imageUrl: aboutLg },
{ class: "about__fury--left__2", imageUrl: aboutMd },
{ class: "about__fury--left__3", imageUrl: aboutXs1 },
{ class: "about__fury--left__4", imageUrl: aboutXs2 },
],
};

@ -131,3 +131,13 @@
}
}
}
.mobile-about{
width: 100vw;
max-width: 650px;
margin: 0px auto;
padding : 0px 10px 40px;
direction: rtl;
padding-top: 70px;
overflow-x: hidden;
}

@ -43,6 +43,21 @@ const fontSize = {
export default function BasicTable(props) {
const classes = useStyles();
const {list, handleCounter, handleDelete} = props;
const sum = () => {
let total = 0;
for(let i = 0; i < list.length; i++) {
total += list[i].number;
}
return total;
};
const totalPrice = () => {
let total = 0;
for(let i = 0; i < list.length; i++) {
total += list[i].price * list[i].number;
}
return total;
}
return (
<>
@ -60,6 +75,14 @@ export default function BasicTable(props) {
{ 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
@ -94,9 +117,9 @@ const Item = (props) => {
<span style={{ fontSize: fontSize.mobile.info.span }}>
{data.options}
</span>
<div className="cart-item__delete d-flex align-items-center justify-content-center">
<div className="mobile-cart-table-product__info--delete d-flex align-items-center align-self-end">
<DeleteOutlineOutlinedIcon
style={{ color: "#FC120A", fontSize: 30, marginLeft: 5 }}
style={{ color: "#FC120A", fontSize: 25, marginLeft: 0 }}
onClick={() => handleDelete(data.id)}
/>
<span

@ -1,11 +1,14 @@
.mobile-cart-table-product{
width: 100%;
font-family: numeralLight;
img{
height: 100px;
width: 70px;
border-radius: 10px;
}
&__info{
width: 100%;
margin-left: 10px;
strong, p , span{
margin: 0px;
font-family: numeralLight;
@ -16,11 +19,16 @@
span{
color: #2580EC;
}
&--delete{
margin-top: 10px;
}
}
}
.mobile-cart-table-price{
text-align: center;
font-family: numeralLight;
&__price{
strong, span{
font-family: numeralLight;

@ -9,6 +9,7 @@ import book1 from "../../assets/images/book1.png";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop: {
@ -20,11 +21,19 @@ const fontSize = {
span: window.innerWidth > maxDesktopSize ? 10 : window.innerWidth / 95,
},
mobile: {
h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 18,
}
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,
},
};
export default class Cart extends Component {
state = {
selectedDelivery: { name : '', price : 0},
discount: 0,
totalPrice: null,
list: [
{
@ -79,9 +88,18 @@ export default class Cart extends Component {
handleDelete = (id) => {
let list = this.state.list.filter((item) => item.id !== id);
this.setState({
list: list
})
list: list,
});
};
totalPrice = () => {
let total = 0;
for (let i = 0; i < this.state.list.length; i++) {
total += this.state.list[i].price * this.state.list[i].number;
}
return total - this.state.discount + this.state.selectedDelivery.price;
};
render() {
return (
<>
@ -98,30 +116,29 @@ export default class Cart extends Component {
<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>
<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}
/>
))}
{this.state.list.map((item, i) => (
<Item
handleDelete={this.handleDelete}
handleCounter={this.handleCounter}
data={item}
key={i}
/>
))}
</tbody>
</table>
{this.state.totalPrice ? (
<div className="cart__right--price d-flex justify-content-end">
<div className="d-flex ml-2">جمع کل سبد خرید</div>
<div className="d-flex">
<strong>تومان {this.state.totalPrice}</strong>
<strong>{this.state.totalPrice} تومان </strong>
</div>
</div>
) : null}
@ -133,7 +150,7 @@ export default class Cart extends Component {
</h2>
<div className="d-flex justify-content-between">
{this.props.payMethods.map((item, i) => (
<PayMethod data={item} key={i} />
<DeliveryMethod data={item} key={i} parent={this} />
))}
</div>
</header>
@ -144,36 +161,195 @@ export default class Cart extends Component {
<Footer />
</>
) : null}
{
window.innerWidth < 1000 ?
{window.innerWidth < 1000 ? (
<div className="mobile-cart d-flex flex-column">
<Navbar />
<h1 style={{ fontSize: fontSize.mobile.h1 }}>سبد خرید</h1>
<div className="d-flex">
<Table list={this.state.list} handleCounter={this.handleCounter} handleDelete={this.handleDelete} />
<Table
list={this.state.list}
handleCounter={this.handleCounter}
handleDelete={this.handleDelete}
/>
</div>
<div className="mobile-cart__payMethods d-flex flex-column">
<h2 style={{ fontSize: fontSize.mobile.h2 }}>روشهای ارسال</h2>
<p style={{ fontSize: fontSize.mobile.p }}>
با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید
</p>
</div> : null
}
<div className="d-flex justify-content-between">
{this.props.payMethods.map((item, i) => (
<DeliveryMethod data={item} key={i} parent={this} />
))}
</div>
</div>
<DiscoutCode />
<Factor parent={this} />
<div className="mobile-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="mobile-cart__payMethods 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">
{this.props.payMethods.map((item, i) => (
<DeliveryMethod data={item} key={i} parent={this} />
))}
</div>
</div>
<button className="mobile-cart__submit">پرداخت</button>
</div>
) : null}
</>
);
}
}
const PayMethod = (props) => {
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 (
<div className="payment-methods d-flex justify-content-between align-items-center">
<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>
<>
{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}
</>
);
};

@ -4,6 +4,7 @@
max-width: 1250px;
margin: 0px auto;
padding: 0px 10px;
font-family: numeralLight;
&__right {
flex: 4;
padding: 10px 0px 0px;
@ -14,70 +15,214 @@
}
}
table {
tr{
tr {
th {
font-family: numeralLight;
color: #afafaf;
}
}
}
}
&__left {
flex: 1.2;
box-shadow: 0px 0px 13px #D5D5D5B0;
box-shadow: 0px 0px 13px #d5d5d5b0;
border-radius: 13px;
margin-right: 30px;
&--header{
h2{
&--header {
h2 {
font-family: numeralBold;
color: #2580EC;
color: #2580ec;
}
}
button{
button {
justify-self: flex-end;
padding: 12px;
width: 100%;
font-family: numeralLight;
color: white;
background-color: #6CBE44;
background-color: #6cbe44;
border: 0px;
border-radius: 10px;
margin-top: 50px;
}
.payment-methods{
.delivery-methods {
padding: 6px;
border-radius: 10px;
border: 1px solid #88A9FF;
border: 1px solid #88a9ff;
margin-top: 10px;
h3, strong, span{
h3,
strong,
span {
font-family: numeralLight;
font-weight: 100;
margin: 0px;
}
strong{
strong {
width: 50%;
color: #678EF8;
color: #678ef8;
letter-spacing: -1px;
}
h3, span{
color: #02A255;
h3,
span {
color: #02a255;
font-family: numeralMedium;
}
}
}
}
.mobile-cart{
.mobile-cart {
width: 100vw;
max-width: 650px;
margin: 0px auto;
padding : 0px 10px 40px;
padding: 0px 10px 40px;
direction: rtl;
padding-top: 60px;
overflow-x: hidden;
h1{
font-family: numeralLight;
&__submit{
justify-self: flex-end;
padding: 12px;
width: 100%;
font-family: numeralLight;
color: white;
background-color: #6cbe44;
border: 0px;
border-radius: 10px;
margin-top: 30px;
}
h1 {
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;
padding-bottom: 20px;
h2 {
font-family: numeralBold;
color: #2580ec;
}
p {
font-family: numeralLight;
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;
}
}
}
}

Loading…
Cancel
Save