نحوه ساخت بخش سبد خرید با HTML و CSS و جاوااسکریپت

نحوه ساخت بخش سبد خرید با HTML و CSS و جاوااسکریپتReviewed by جواد نبوی on Aug 18Rating: 4.0

ساخت سبد خرید در html و CSS

در این آموزش می خواهیم یک سبد خرید را با html و CSS3 و جاوااسکریپت ایجاد کنیم. شاید برای قالب فروشگاهی تان به چنین چیزی نیاز داشته باشید. اگر وقت کافی برای کد نویسی از ابتدا را ندارید، این مطلب گزینه خوبی است. به علاوه اگر دانش لازم را ندارید میتوانید در این مطلب آموزش ببینید.

ساخت سبد خرید در سایت

بهتر است اول کار یک پیش نمایش از طرح نهایی ببینید:

ساختار HTML

بیایید اول ساختار HTML را بسازیم.

نخست، به یک div به عنوان ظرف احتیاج داریم که نام کلاس آن را میگذاریم “shopping-cart.” . درون ظرف یک عنوان خواهیم داشت و سه آیتم که هرکدام شامل موارد زیر هستند:

  • دو دکمه – یکی دکمه علاقه مندی و دیگری دکمه حذف
  • تصویر محصول
  • نام و توضیحات محصول
  • دکمه هایی که تعداد محصول قابل خرید را تعیین می کنند
  • قیمت نهایی
<div class="shopping-cart">
 <!-- Title -->
 <div class="title">
 سبد خرید
 </div>

<!-- Product #1 -->
 <div class="item">
 <div class="buttons">
 <span class="delete-btn"></span>
 <span class="like-btn"></span>
 </div>

<div class="image">
 <img src="item-1.png" alt="" />
 </div>

<div class="description">
 <span>پروژه های مشترک</span>
 <span>Bball High</span>
 <span>سفید</span>
 </div>

<div class="quantity">
 <button class="plus-btn" type="button" name="button">
 <img src="plus.svg" alt="" />
 </button>
 <input type="text" name="name" value="1">
 <button class="minus-btn" type="button" name="button">
 <img src="minus.svg" alt="" />
 </button>
 </div>

<div class="total-price">549 هزار تومان</div>
 </div>

<!-- Product #2 -->
 <div class="item">
 <div class="buttons">
 <span class="delete-btn"></span>
 <span class="like-btn"></span>
 </div>

<div class="image">
 <img src="item-2.png" alt=""/>
 </div>

<div class="description">
 <span>Maison Margiela</span>
 <span>کفش های کتانی آینده</span>
 <span>سفید</span>
 </div>

<div class="quantity">
 <button class="plus-btn" type="button" name="button">
 <img src="plus.svg" alt="" />
 </button>
 <input type="text" name="name" value="1">
 <button class="minus-btn" type="button" name="button">
 <img src="minus.svg" alt="" />
 </button>
 </div>

<div class="total-price">870 هزار تومان</div>
 </div>

<!-- Product #3 -->
 <div class="item">
 <div class="buttons">
 <span class="delete-btn"></span>
 <span class="like-btn"></span>
 </div>

<div class="image">
 <img src="item-3.png" alt="" />
 </div>

<div class="description">
 <span>Our Legacy</span>
 <span>بهترین شال گردن</span>
 <span>قهوه ای</span>
 </div>

<div class="quantity">
 <button class="plus-btn" type="button" name="button">
 <img src="plus.svg" alt="" />
 </button>
 <input type="text" name="name" value="1">
 <button class="minus-btn" type="button" name="button">
 <img src="minus.svg" alt="" />
 </button>
 </div>

<div class="total-price">349 هزار تومان</div>
 </div>
 </div>

CSS

بیایید با کد زیر کمی استایل به پروژه مان بدهیم. کافیست کد های زیر را در فایل استایل خود قرار دهید.

* {
 box-sizing: border-box;
}

html,
body {
 width: 100%;
 height: 100%;
 padding: 10px;
 margin: 0;
 direction:rtl;
 background-color: #7EC855;
 font-family: Tahoma, sans-serif;
}

خب حالا بیایید سایز سبد خریدمان را به اندازه ۷۵۰×۴۲۳ در بیاوریم و آن را زیباتر کنیم. توجه داشته باشید که ما از flexbox استفاده می کنیم. بنابراین برای خصوصیت display مقدار flex را در نظر میگیریم. همچنین خصوصیت flex direction را به صورت column در نظر میگیریم. چراکه مقدار پیشفرض flex direction به صورت row تنظیم شده است.

.shopping-cart {
 width: 750px;
 height: 423px;
 margin: 80px auto;
 background: #FFFFFF;
 box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.10);
 border-radius: 6px;
 
 display: flex;
 flex-direction: column;
}

بعد از این، اولین آیتم که همان عنوان سبد خرید است را استایل دهی می کنیم. ارتفاع ۶۰ را برای آن در نظر میگیریم و یک سری استایل پایه ای برایش میگذاریم. سپس برای سه آیتم بعدی که همان محصولات هستند، ارتفاع ۱۲۰px را در نظر میگیریم و display آن ها را به حالت flex در می آوریم.

.title {
 height: 60px;
 border-bottom: 1px solid #E1E8EE;
 padding: 20px 30px;
 color: #5E6977;
 font-size: 18px;
 font-weight: 400;
}

.item {
 padding: 20px 30px;
 height: 120px;
 display: flex;
}

.item:nth-child(3) {
 border-top: 1px solid #E1E8EE;
 border-bottom: 1px solid #E1E8EE;
}

تا اینجا ما استایل پایه ای و اسکلت بندی سبد خریدمان را ایجاد کردیم. حال میخواهیم به خود محصولات استایل دهیم.

اولین عناصری که میخواهیم استایل دهیم، دکمه های علاقه مندی و حذف هستند. من همیشه دکمه های انیمیشنی قلب تویتر را دوست داشتم. این دکمه ها جذابیت بینظیری به سبد خرید شما می دهند. بیاید باهم اینکار را انجام دهیم.

.buttons {
 position: relative;
 padding-top: 30px;
 margin-left: 60px;
 margin-right: auto;
}

.delete-btn {
 display: inline-block;
 cursor: pointer;
 width: 18px;
 height: 17px;
 background: url("delete-icn.svg") no-repeat center;
 margin-left: 20px;
 margin-right: auto;
}

.like-btn {
 position: absolute;
 top: 9px;
 right: 15px;
 left: auto;
 display: inline-block;
 background: url('twitter-heart.png');
 width: 60px;
 height: 60px;
 background-size: 2900%;
 background-repeat: no-repeat;
 cursor: pointer;
}

ما کلاس “is-active” را برای زمانی که روی دکمه کلیک می شود اضافه کرده ایم. این کلاس با کلیک کردن روی دکمه، توسط جی کوئری فعال می شود. سپس حرکت انیمیشنی دکمه انجام می شود. البته این کار را در مرحله بعدی انجام می دهیم.

.is-active {
 animation-name: animate;
 animation-duration: .8s;
 animation-iteration-count: 1;
 animation-timing-function: steps(28);
 animation-fill-mode: forwards;
}

@keyframes animate {
 ۰% { background-position: left; }
 ۵۰% { background-position: right; }
 ۱۰۰% { background-position: right; }
}

در مرحله بعد به تصاویر محصولات استایل میدهیم. برای تصویر margin را ۵۰px از راست تعیین می کنیم.

.image {
 margin-left: 50px;
 margin-right: auto;
}
.description {
 padding-top: 10px;
 margin-left: 60px;
 margin-right: auto;
 width: 115px;
}

.description span {
 display: block;
 font-size: 14px;
 color: #43484D;
 font-weight: 400;
}

.description span:first-child {
 margin-bottom: 5px;
}
.description span:last-child {
 font-weight: 300;
 margin-top: 8px;
 color: #86939E;
}

سپس باید دکمه های افزایش یا کاهش مقدار محصول را اضافه کنیم. در واقع دو دکمه مثبت و منفی داریم که با کلیک روی آنها میتوانیم تعداد محصول را کم یا زیاد کنیم.

در ابتدا کد CSS را اضافه کنید و پس از آن کد جاوااسکریپت را اضافه می کنیم.

.quantity {
 padding-top: 20px;
 margin-left: 60px;
 margin-right: auto;
}
.quantity input {
 -webkit-appearance: none;
 border: none;
 text-align: center;
 width: 32px;
 font-size: 16px;
 color: #43484D;
 font-weight: 300;
}

button[class*=btn] {
 width: 30px;
 height: 30px;
 background-color: #E1E8EE;
 border-radius: 6px;
 border: none;
 cursor: pointer;
}
.minus-btn img {
 margin-bottom: 3px;
}
.plus-btn img {
 margin-top: 2px;
}
button:focus,
input:focus {
 outline:0;
}

در آخر قیمت نهایی محصولات را استایل می دهیم.

.total-price {
 width: 83px;
 padding-top: 27px;
 text-align: center;
 font-size: 16px;
 color: #43484D;
 font-weight: 300;
}

حالا بیایید سبد خریدمان را با اضافه کردن کد زیر ریسپانسیو کنیم.

@media (max-width: 800px) {
 .shopping-cart {
 width: 100%;
 height: auto;
 overflow: hidden;
 }
 .item {
 height: auto;
 flex-wrap: wrap;
 justify-content: center;
 }
 .image img {
 width: 50%;
 }
 .image,
 .quantity,
 .description {
 width: 100%;
 text-align: center;
 margin: 6px 0;
 }
 .buttons {
 margin-right: 20px;
 }
}

خب این از CSS!

جاوااسکریپت

در فایل html خود بین تگ های <body> و <body/> یک تکه کد به صورت زیر بگذارید:

<scrpt>

کد های جاوااسکریپت این جا قرار میگیرند.

</script>

سپس هرچه کد از این به بعد می گوییم را بین دو تگ بالا قرار دهید.

برای اینکه حرکت انیمیشنی قلب را ایجاد کنیم کافیست کد جاوااسکریپت زیر را اضافه کنید:

$('.like-btn').on('click', function() {
   $(this).toggleClass('is-active');
});

بسیار عالی! حالا بیایید دکمه های افزایش و کاهش تعداد محصول را فعال کنیم:

$('.minus-btn').on('click', function(e) {
 e.preventDefault();
 var $this = $(this);
 var $input = $this.closest('div').find('input');
 var value = parseInt($input.val());
 
 if (value &gt; 1) {
 value = value - 1;
 } else {
 value = 0;
 }
 
 $input.val(value);
 
});
 
$('.plus-btn').on('click', function(e) {
 e.preventDefault();
 var $this = $(this);
 var $input = $this.closest('div').find('input');
 var value = parseInt($input.val());
 
 if (value &lt; 100) {
 value = value + 1;
 } else {
 value =100;
 }
 
 $input.val(value);
});

و این ورژن نهایی کار ما است:

لينک ها:


این مطلب ترجمه آزاد وب تستر از مقاله How to Create a Shopping Cart UI using CSS & JavaScript می باشد.

تبلیغات

نویسنده (مدیر سایت)

جواد نبوی هستم. حدود 7 سالی میشه در زمینه طراحی وب و گرافیک کار می کنم و بعد از توپ دیزاین، این دومین سایت آموزش طراحی وب و گرافیک هستش که راه انداختم. امیدوارم بتونم برای همه ی شما مفید باشم.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *