Add to Cart Card Made

temp
Pedram Keshavarzi 3 years ago
parent 50543dec50
commit 9729e99d5e
  1. 15
      src/assets/icons/vuesax-linear-group.svg
  2. 9
      src/assets/icons/vuesax-linear-shield-tick.svg
  3. 9
      src/assets/icons/vuesax-linear-tick-circle.svg
  4. 51
      src/components/AddToCart/index.js
  5. 2
      src/components/Checkbox/index.js
  6. 4
      src/components/VerticalExpandableProductFilter/index.js
  7. 75
      src/views/Product/Desktop/ProductOverAll/index.js
  8. 1
      tailwind.config.js

@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" width="35.544" height="35.544" viewBox="0 0 35.544 35.544">
<g id="vuesax_linear_group" data-name="vuesax/linear/group" transform="translate(0 0)">
<g id="group" transform="translate(0 0)">
<path id="Vector" d="M14.055,17.772h1.481A2.971,2.971,0,0,0,18.5,14.81V0H5.169A5.918,5.918,0,0,0,0,3.036" transform="translate(3.717 2.962)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,17.772a4.437,4.437,0,0,0,4.443,4.443H5.924a2.962,2.962,0,1,1,5.924,0h5.924a2.962,2.962,0,1,1,5.924,0h1.481a4.437,4.437,0,0,0,4.443-4.443V13.329H25.177A1.485,1.485,0,0,1,23.7,11.848V7.4a1.485,1.485,0,0,1,1.481-1.481h1.91L24.555,1.5A2.986,2.986,0,0,0,21.978,0H19.253V10.367a2.971,2.971,0,0,1-2.962,2.962H14.81" transform="translate(2.962 7.405)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M5.924,2.962A2.962,2.962,0,1,1,2.962,0,2.962,2.962,0,0,1,5.924,2.962Z" transform="translate(8.886 26.658)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M5.924,2.962A2.962,2.962,0,1,1,2.962,0,2.962,2.962,0,0,1,5.924,2.962Z" transform="translate(20.734 26.658)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-5" data-name="Vector" d="M5.924,4.443V7.4H1.481A1.485,1.485,0,0,1,0,5.924V1.481A1.485,1.485,0,0,1,1.481,0h1.91Z" transform="translate(26.658 13.329)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-6" data-name="Vector" d="M0,0H8.886" transform="translate(2.962 11.848)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-7" data-name="Vector" d="M0,0H5.924" transform="translate(2.962 16.291)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-8" data-name="Vector" d="M0,0H2.962" transform="translate(2.962 20.734)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-9" data-name="Vector" d="M0,0H35.544V35.544H0Z" transform="translate(0 0)" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="35.994" height="35.994" viewBox="0 0 35.994 35.994">
<g id="vuesax_linear_shield-tick" data-name="vuesax/linear/shield-tick" transform="translate(0 0)">
<g id="shield-tick" transform="translate(0 0)">
<path id="Vector" d="M10.618.349,3.134,3.168A5.2,5.2,0,0,0,0,7.682V18.825a7.291,7.291,0,0,0,2.595,5.159L9.043,28.8a6.826,6.826,0,0,0,7.709,0L23.2,23.985A7.291,7.291,0,0,0,25.8,18.825V7.682a5.207,5.207,0,0,0-3.134-4.529L15.177.349A7.626,7.626,0,0,0,10.618.349Z" transform="translate(5.114 2.996)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,4.034,2.415,6.449,8.863,0" transform="translate(13.573 13.768)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0H35.994V35.994H0Z" transform="translate(35.994 35.994) rotate(180)" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="38.085" height="38.085" viewBox="0 0 38.085 38.085">
<g id="vuesax_linear_tick-circle" data-name="vuesax/linear/tick-circle" transform="translate(0 0)">
<g id="tick-circle" transform="translate(0 0)">
<path id="Vector" d="M15.869,31.738A15.869,15.869,0,1,0,0,15.869,15.915,15.915,0,0,0,15.869,31.738Z" transform="translate(3.174 3.174)" fill="#42e337" stroke="#9eff97" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,4.491,4.491,8.982l9-8.982" transform="translate(12.298 14.552)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M0,0H38.085V38.085H0Z" fill="#afe7ab" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 824 B

@ -0,0 +1,51 @@
import React from "react";
import circleTick from '../../assets/icons/vuesax-linear-tick-circle.svg';
import shieldTick from '../../assets/icons/vuesax-linear-shield-tick.svg';
import linearGroup from '../../assets/icons/vuesax-linear-group.svg';
const AddToCartCard = ({
numberOfSuggest,
sendingTime,
button,
price,
profit
}) =>{
const specialities = [
{
icon: circleTick,
description: ` توصیه به خرید توسط ${numberOfSuggest} نفر`,
},
{
icon: linearGroup,
description: `زمان ارسال ${sendingTime} روز کاری پس از سفارش`,
},
{
icon: shieldTick,
description: `گارانتی اصالت و سلامت فیزیکی`,
}
];
return(
<div className="felx flex-col bg-grayF7 p-4 pt-0 w-full mx-4 items-center justify-center">
{specialities.map((item, index) => (
<div className="flex items-center p-2 w-full border-0 border-b border-solid border-gray-300">
{item.icon && <img src={item.icon} className="pl-3" />}
<p className="text-sm text-blue52 text-right">{item.description}</p>
</div>
))}
<div className="w-full flex flex-col items-center justify-center p-4">
<h1 className="text-xl text-gray-500">
<span className=" text-blueC0"> {price} </span>
تومان </h1>
{ profit && <h5 className="text-xs p-2 pb-0 text-blue52">با خرید این کالا {profit} تومان سود کنید</h5>}
</div>
<div className="w-full flex justify-center">
{button}
</div>
</div>
);
};
export default AddToCartCard;

@ -17,7 +17,7 @@ export default function Checkbox(props) {
</svg>
<div className="checkbox-container">
<input className="checkbox-input" name={props.name} id={"ch"+props.name} type="checkbox" checked={props.checked} onClick={props.onclick}/>
<input className="checkbox-input" name={props.name} id={"ch"+props.name} type="checkbox" checked={props.checked} onClick={props.onclick} onChange={props.onChange}/>
<label className="checkbox" htmlFor={"ch"+props.name}>
<span>
<svg width="12px" height="10px">

@ -66,9 +66,9 @@ export default function VerticalExpandableProductFilter(props) {
<Checkbox name={`ch${name}_${i}`} checked={checkedBox[i]} onclick={(e) => {
checkedBox[i] = !checkedBox[i]
setChecked(checkedBox)
props.onChange(name , item1.name);
}} />
}} onChange={() => props.onChange(name , item1.name)} />
<strong className="text-xs font-light text-gray-500">
{props.preName ? props.preName + ' ' + item1.name : item1.name}
</strong>

@ -9,6 +9,7 @@ import Header from "../../../../components/Header";
import Comment from "../../Comment";
import Rate from "../../Rate";
import StarRating from "../../../../components/StarRating";
import AddToCartCard from "../../../../components/AddToCart";
export const ProductOverAll = ({
productType,
@ -94,9 +95,52 @@ export const ProductOverAll = ({
/>
</div>
</div>
<div className="flex justify-center py-6">
<Button
title="مشاهده دوره ویدیویی این محصول >"
backgroundColor={isDark ? "bg-transparent" : "bg-blueC0'"}
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "2px" }}
color={isDark ? "text-white" : "text-blue52"}
selectable={true}
onClick={() => setType("physical")}
customStyle='bg-black bg-opacity-10'
twPaddings='py-4 px-32'
radius={false}
/>
</div>
</div>
<div>
<h1>aopdjsoqweqweqweqweqweWajsduh</h1>
<AddToCartCard
price={type === "digital" ? book?.product[0]?.price : book?.product[1]?.price}
sendingTime={20}
numberOfSuggest={160}
profit={12000}
button={
<Button
onClick={() =>
proxy.status()
? pushToCart({
productId:
type === "digital"
? book?.product[0]?.id
: book?.product[1]?.id,
userId: userId,
count: 1,
})
: toast.info("ابتدا وارد حساب کاربری خود شوید.")
}
title='افزودن به سبد خرید'
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "1px" }}
width="100%"
color="text-white"
twPaddings='py-4'
/>
}
/>
</div>
</header>
@ -119,34 +163,7 @@ export const ProductOverAll = ({
</h2>
<div className="w-full flex flex-row justify-between items-center mt-4">
<Button
onClick={() =>
proxy.status()
? pushToCart({
productId:
type === "digital"
? book?.product[0]?.id
: book?.product[1]?.id,
userId: userId,
count: 1,
})
: toast.info("ابتدا وارد حساب کاربری خود شوید.")
}
title={
"خرید با قیمت" +
" " +
(type === "digital"
? book?.product[0]?.price
: book?.product[1]?.price) +
" " +
"تومان"
}
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "1px" }}
width="65%"
color="text-white"
/>
</div>
<div className="w-full flex flex-row justify-between items-center mt-4">
<Button

@ -33,6 +33,7 @@ module.exports = {
grayEE: "#EEEEEE",
grayF9: "#F9F9F9",
grayF4: "#EBF0F4",
grayF7: "#F7F7F7"
}),
textColor: (theme) => ({
...theme("colors"),

Loading…
Cancel
Save