|
|
import React, { Component } from "react"; |
|
|
import { Link } from "react-router-dom"; |
|
|
|
|
|
import Footer from "../Home/Footer/index"; |
|
|
import Navbar from "../Home/Navbar/index"; |
|
|
import Comment from "./Comment/index"; |
|
|
import Breadcrumbs from "./BreadCrumb/index"; |
|
|
import Gallery from "./Gallery/index"; |
|
|
import Info from "./Info/index"; |
|
|
import AddToCart from "./AddToCart/index"; |
|
|
import HomeScroll from "../Home/HomeScroll/index"; |
|
|
import HomeSlider from "../Home/HomeSlider/index"; |
|
|
|
|
|
import sciense_7 from "~/assets/images/sciense-7.png"; |
|
|
import sciense_6 from "~/assets/images/sciense-6.png"; |
|
|
import sciense_8 from "~/assets/images/sciense-8.png"; |
|
|
import sciense_9 from "~/assets/images/sciense-9.png"; |
|
|
import zist_10 from "~/assets/images/zist-10.png"; |
|
|
import film from "~/assets/Video/film.mp4"; |
|
|
import product_shipping from "~/assets/icons/product-shipping.png"; |
|
|
import product_cash_back from "~/assets/icons/product-cash-back.png"; |
|
|
import product_support from "~/assets/icons/product-support.png"; |
|
|
import send_comment from "~/assets/icons/send-comment.png"; |
|
|
|
|
|
import "./index.scss"; |
|
|
|
|
|
const maxDesktopSize = 1250; |
|
|
const maxMobileSize = 550; |
|
|
|
|
|
const fontSize = { |
|
|
desktop: { |
|
|
h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70, |
|
|
}, |
|
|
mobile: { |
|
|
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 18, |
|
|
h2: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 24, |
|
|
h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 26, |
|
|
a: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 26, |
|
|
p: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 30, |
|
|
li: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 29, |
|
|
}, |
|
|
}; |
|
|
export default class Product extends Component { |
|
|
render() { |
|
|
const { product, sameProducts, supportItems } = this.props; |
|
|
return ( |
|
|
<> |
|
|
{window.innerWidth > 1000 ? ( |
|
|
<> |
|
|
<div className="product d-flex flex-column"> |
|
|
<Navbar /> |
|
|
<Breadcrumbs /> |
|
|
<header className="product__header d-flex mt-4"> |
|
|
<Gallery gallery={product.gallery} /> |
|
|
<Info |
|
|
subTitle={product.subTitle} |
|
|
title={product.title} |
|
|
description={product.description} |
|
|
/> |
|
|
<AddToCart |
|
|
supportItems={supportItems} |
|
|
price={product.price} |
|
|
off={product.off} |
|
|
/> |
|
|
</header> |
|
|
<div className="product__comments d-flex flex-column"> |
|
|
<div className="d-flex justify-content-between"> |
|
|
<h3 style={{ fontSize: fontSize.desktop.h1 }}> |
|
|
نظرات خریداران |
|
|
</h3> |
|
|
<button> |
|
|
ارسال نظر |
|
|
<img src={send_comment} alt="ارسال نظر" /> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div className="product__comments--list d-flex flex-column"> |
|
|
<Comment comment={product.comments[0]} /> |
|
|
</div> |
|
|
</div> |
|
|
<Identifier item={sameProducts} /> |
|
|
</div> |
|
|
<Footer /> |
|
|
</> |
|
|
) : null} |
|
|
{window.innerWidth < 1000 ? ( |
|
|
<> |
|
|
<div className="mobile-product d-flex flex-column"> |
|
|
<Navbar /> |
|
|
<header className="mobile-product__header d-flex flex-column align-items-center"> |
|
|
<img src={product.image} alt={product.title} /> |
|
|
<h1 style={{ fontSize: fontSize.mobile.h1 }}> |
|
|
{product.title} |
|
|
</h1> |
|
|
<h2 style={{ fontSize: fontSize.mobile.h2 }}> |
|
|
{product.subTitle} |
|
|
</h2> |
|
|
<div className="d-flex flex-column mt-3"> |
|
|
<div className="d-flex"> |
|
|
<Link |
|
|
to={`/products/${product.id}/sample`} |
|
|
className="mobile-product__header--digitalButton" |
|
|
style={{ fontSize: fontSize.mobile.a }} |
|
|
> |
|
|
خرید نسخه دیجیتال |
|
|
</Link> |
|
|
<Link |
|
|
to={`/products/${product.id}/sample`} |
|
|
className="mobile-product__header--purchase" |
|
|
style={{ fontSize: fontSize.mobile.a }} |
|
|
> |
|
|
خرید نسخه چاپی |
|
|
</Link> |
|
|
</div> |
|
|
<Link |
|
|
to={`/products/${product.id}/sample`} |
|
|
className="mobile-product__header--sampleButton" |
|
|
style={{ fontSize: fontSize.mobile.a }} |
|
|
> |
|
|
مطالعه نمونه کتاب |
|
|
</Link> |
|
|
</div> |
|
|
</header> |
|
|
<div className="mobile-product__abstraction d-flex flex-column"> |
|
|
<h3 style={{ fontSize: fontSize.mobile.h3 }}>خلاصه کتاب</h3> |
|
|
<p style={{ fontSize: fontSize.mobile.p }}> |
|
|
{product.abstraction} |
|
|
</p> |
|
|
</div> |
|
|
<div className="mobile-product__modules d-flex flex-column"> |
|
|
<h3 style={{ fontSize: fontSize.mobile.h3 }}> |
|
|
این کتاب شامل چه مواردی است؟ |
|
|
</h3> |
|
|
<ul> |
|
|
{product.modules.map((item, i) => ( |
|
|
<React.Fragment key={i}> |
|
|
<Item item={item} /> |
|
|
</React.Fragment> |
|
|
))} |
|
|
</ul> |
|
|
</div> |
|
|
<div className="mobile-product__tips d-flex flex-column"> |
|
|
<h3 style={{ fontSize: fontSize.mobile.h3 }}> |
|
|
نکاتی که هنگام خرید باید به آن توجه داشته باشید؟ |
|
|
</h3> |
|
|
<ul> |
|
|
{product.tips.map((item, i) => ( |
|
|
<React.Fragment key={i}> |
|
|
<Item item={item} /> |
|
|
</React.Fragment> |
|
|
))} |
|
|
</ul> |
|
|
</div> |
|
|
<div className="mobile-product__description d-flex"> |
|
|
<p style={{ fontSize: fontSize.mobile.p }}> |
|
|
{product.description} |
|
|
</p> |
|
|
</div> |
|
|
<div className="mobile-product__comments d-flex flex-column"> |
|
|
<h3 style={{ fontSize: fontSize.mobile.h3 }}>نظرات خریداران</h3> |
|
|
<div className="mobile-product__comments--list d-flex"> |
|
|
{product.comments.map((item, i) => ( |
|
|
<Comment comment={item} key={i} /> |
|
|
))} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</> |
|
|
) : null} |
|
|
</> |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
Product.defaultProps = { |
|
|
supportItems: [ |
|
|
{ title: "ارسال رایگان", icon: product_shipping }, |
|
|
{ title: "پشتیبانی 24 ساعته ", icon: product_support }, |
|
|
{ title: "ضمانت بازگشت ", icon: product_cash_back }, |
|
|
], |
|
|
sameProducts: { |
|
|
type: window.innerWidth > 1000 ? "slider" : "scroll", |
|
|
title: "محصولات مرتبط", |
|
|
moreText: "لیست کتابها", |
|
|
height: window.innerWidth > 1000 ? 470 : 320, |
|
|
design: window.innerWidth > 1000 ? "simple" : "product", |
|
|
number: window.innerWidth > 1000 ? 4 : 2.8, |
|
|
data: [ |
|
|
{ |
|
|
id: 0, |
|
|
image: sciense_6, |
|
|
title: "منفجر کردن مغز خود را به ما بسپارید", |
|
|
subTitle: "پایه دهم ابتدایی", |
|
|
price: "78.000", |
|
|
oldPrice: "", |
|
|
date: new Date(), |
|
|
}, |
|
|
{ |
|
|
id: 1, |
|
|
image: sciense_7, |
|
|
title: "منفجر کردن مغز خود را به ما بسپارید", |
|
|
subTitle: "پایه ششم ابتدایی", |
|
|
price: "39.000", |
|
|
oldPrice: "59.000", |
|
|
date: new Date(), |
|
|
}, |
|
|
{ |
|
|
id: 2, |
|
|
image: sciense_8, |
|
|
title: "منفجر کردن مغز خود را به ما بسپارید", |
|
|
subTitle: "پایه ششم ابتدایی", |
|
|
price: "21.000", |
|
|
oldPrice: "", |
|
|
}, |
|
|
{ |
|
|
id: 3, |
|
|
image: sciense_9, |
|
|
title: "منفجر کردن مغز خود را به ما بسپارید", |
|
|
subTitle: "پایه دهم ابتدایی", |
|
|
price: "", |
|
|
oldPrice: "", |
|
|
}, |
|
|
{ |
|
|
id: 4, |
|
|
image: zist_10, |
|
|
title: "منفجر کردن مغز خود را به ما بسپارید", |
|
|
subTitle: "پایه هفتم ابتدایی", |
|
|
price: "59.000", |
|
|
oldPrice: "", |
|
|
}, |
|
|
{ |
|
|
id: 5, |
|
|
image: sciense_6, |
|
|
title: "منفجر کردن مغز خود را به ما بسپارید", |
|
|
subTitle: "پایه دهم ابتدایی", |
|
|
price: "78.000", |
|
|
oldPrice: "", |
|
|
date: new Date(), |
|
|
}, |
|
|
{ |
|
|
id: 6, |
|
|
image: sciense_7, |
|
|
title: "منفجر کردن مغز خود را به ما بسپارید", |
|
|
subTitle: "پایه ششم ابتدایی", |
|
|
price: "39.000", |
|
|
oldPrice: "59.000", |
|
|
date: new Date(), |
|
|
}, |
|
|
{ |
|
|
id: 7, |
|
|
image: sciense_8, |
|
|
title: "منفجر کردن مغز خود را به ما بسپارید", |
|
|
subTitle: "پایه ششم ابتدایی", |
|
|
price: "21.000", |
|
|
oldPrice: "", |
|
|
date: new Date(), |
|
|
}, |
|
|
{ |
|
|
id: 8, |
|
|
image: sciense_9, |
|
|
title: "منفجر کردن مغز خود را به ما بسپارید", |
|
|
subTitle: "پایه دهم ابتدایی", |
|
|
price: "", |
|
|
oldPrice: "", |
|
|
date: new Date(), |
|
|
}, |
|
|
{ |
|
|
id: 9, |
|
|
image: zist_10, |
|
|
title: "منفجر کردن مغز خود را به ما بسپارید", |
|
|
subTitle: "پایه هفتم ابتدایی", |
|
|
price: "59.000", |
|
|
oldPrice: "", |
|
|
date: new Date(), |
|
|
}, |
|
|
], |
|
|
}, |
|
|
product: { |
|
|
id: 1, |
|
|
image: sciense_7, |
|
|
title: "منفجر کردن مغز خود را به ما بسپارید", |
|
|
subTitle: "پایه ششم ابتدایی", |
|
|
price: "39.000", |
|
|
off: "30%", |
|
|
oldPrice: "59.000", |
|
|
date: new Date(), |
|
|
abstraction: |
|
|
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت", |
|
|
modules: [ |
|
|
"پک هدیه شامل یک عدد جلد سخت", |
|
|
"عینک واقعیت مجازی", |
|
|
"کارت گرافیک مناسب جهت اجرای بازی", |
|
|
], |
|
|
tips: [ |
|
|
"پک هدیه شامل یک عدد جلد سخت", |
|
|
"عینک واقعیت مجازی", |
|
|
"کارت گرافیک مناسب جهت اجرای بازی", |
|
|
], |
|
|
gallery: [ |
|
|
{ id: 0, value: film, type: "film" }, |
|
|
{ id: 1, value: sciense_6, type: "image" }, |
|
|
{ id: 2, value: sciense_7, type: "image" }, |
|
|
{ value: sciense_8, type: "image" }, |
|
|
], |
|
|
description: |
|
|
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت", |
|
|
comments: [ |
|
|
{ |
|
|
id: 0, |
|
|
username: "محمدرضا", |
|
|
date: new Date(), |
|
|
text: "عالی بود. ممنون از سایت زیباتون", |
|
|
score: 4, |
|
|
reply: "ممنون از شما که به ما اعتماد کردید", |
|
|
}, |
|
|
{ |
|
|
id: 1, |
|
|
username: "محمدرضا", |
|
|
date: new Date(), |
|
|
text: "عالی بود. ممنون از سایت زیباتون", |
|
|
score: 2.5, |
|
|
reply: "", |
|
|
}, |
|
|
{ |
|
|
id: 2, |
|
|
username: "محمدرضا", |
|
|
date: new Date(), |
|
|
text: "عالی بود. ممنون از سایت زیباتون", |
|
|
score: 5, |
|
|
reply: "", |
|
|
}, |
|
|
{ |
|
|
id: 3, |
|
|
username: "محمدرضا", |
|
|
date: new Date(), |
|
|
text: "عالی بود. ممنون از سایت زیباتون", |
|
|
score: 3.7, |
|
|
reply: "", |
|
|
}, |
|
|
{ |
|
|
id: 4, |
|
|
username: "محمدرضا", |
|
|
date: new Date(), |
|
|
text: "عالی بود. ممنون از سایت زیباتون", |
|
|
score: 2, |
|
|
reply: "", |
|
|
}, |
|
|
], |
|
|
}, |
|
|
}; |
|
|
|
|
|
const Item = (props) => { |
|
|
return <li style={{ fontSize: fontSize.mobile.li }}>+ {props.item}</li>; |
|
|
}; |
|
|
|
|
|
const Identifier = (props) => { |
|
|
return ( |
|
|
<> |
|
|
{props.item.type === "scroll" ? ( |
|
|
<HomeScroll |
|
|
number={props.item.number} |
|
|
height={props.item.height} |
|
|
title={props.item.title} |
|
|
data={props.item.data} |
|
|
designType={props.item.design} |
|
|
moreText={props.item.moreText} |
|
|
/> |
|
|
) : null} |
|
|
{props.item.type === "slider" ? ( |
|
|
<HomeSlider |
|
|
designType={props.item.design} |
|
|
number={props.item.number} |
|
|
height={props.item.height} |
|
|
title={props.item.title} |
|
|
data={props.item.data} |
|
|
/> |
|
|
) : null} |
|
|
</> |
|
|
); |
|
|
};
|
|
|
|