آموزش ساخت رابط کاربری سبد خرید با استفاده از CSS و جاوا اسکریپت

سبد خرید یکی از مهم‌ترین بخش‌ها در یک فورشگاه آنلاین به‌حساب می‌آید، در این مقاله، قصد داریم نحو ساخت سبد خرید با استفاده از CSS و جاوا اسکریپت را آموزش دهیم. در این مطلب از فونت‌های گوگل، به‌خصوص «Roboto»، استفاده می‌کنیم.

عنوان آموزش: HTML / CSS3 / JavaScript

میزان سختی: متوسط (Intermediate)

زمان تخمینی آموزش: ۳۰ دقیقه

HTML

گام ۱: ابتدا ساختار HTML را می‌سازیم.

برای این کار نیاز به یک کانتینر div داریم که آن را «.shopping-cart» می‌نامیم.

مقاله مرتبط: دانلود رایگان مجموعه آیکون های فروشگاهی

در کانتینر، یک عنوان و سه آیتم داریم که به شرح زیر هستند:

دو دکمه، دکمه حذف (Delete) و دکمه موردعلاقه (Favorite)
تصویر محصول
نام و توضیحات محصول
دکمه‌هایی که تعداد محصولات را مشخص می‌کنند
قیمت کل

<div class="shopping-cart">
  <!-- Title -->
  <div class="title">
    Shopping Bag
  </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>Common Projects</span>
      <span>Bball High</span>
      <span>White</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>Future Sneakers</span>
      <span>White</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>Brushed Scarf</span>
      <span>Brown</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>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

۴۱

۴۲

۴۳

۴۴

۴۵

۴۶

۴۷

۴۸

۴۹

۵۰

۵۱

۵۲

۵۳

۵۴

۵۵

۵۶

۵۷

۵۸

۵۹

۶۰

۶۱

۶۲

۶۳

۶۴

۶۵

۶۶

۶۷

۶۸

۶۹

۷۰

۷۱

۷۲

۷۳

۷۴

۷۵

۷۶

۷۷

۷۸

۷۹

۸۰

۸۱

۸۲

۸۳

۸۴

۸۵

۸۶

۸۷

۸۸

۸۹

۹۰

۹۱

۹۲

۹۳

۹۴

۹۵

۹۶

Shopping Bag

</div>

</div>

</div>

<span>Common Projects</span>

<span>Bball High</span>

<span>White</span>

</div>

</button>

</button>

</div>

</div>

</div>

</div>

<span>Maison Margiela</span>

<span>Future Sneakers</span>

<span>White</span>

</div>

</button>

</button>

</div>

</div>

</div>

</div>

<span>Our Legacy</span>

<span>Brushed Scarf</span>

<span>Brown</span>

</div>

</button>

</button>

</div>

</div>

CSS

مطمئن شوید که فونتی که در این آموزش استفاده می‌کنیم، را در سیستم خود دارید.

حال، با کدهای زیر برخی روش‌ها (style) را به بدنه (body) اضافه می‌کنیم:

* {
  box-sizing: border-box;
}
 
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: #7EC855;
  font-family: 'Roboto', sans-serif;
}

۱۰

۱۱

۱۲

* {

box-sizing: border-box;

}

html,

body {

width: ۱۰۰%;

height: ۱۰۰%;

margin: ۰;

background-color: #۷EC855;

font-family: 'Roboto', sans-serif;

}

سبد خرید را در اندازه ۷۵۰×۴۲۳ پیکسل تنظیم می‌کنیم. توجه داشته باشید که ما از فلکس‌باکس (flexbox) استفاده می‌کنیم، بنابراین سبد خرید را طوری تنظیم می‌کنیم که فلکس را نمایش دهد و جهت فلکس عمودی باشد، زیرا به‌صورت پیش‌فرض، جهت فلکس افقی است.

* {
  box-sizing: border-box;
}
 
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: #7EC855;
  font-family: 'Roboto', sans-serif;
}

۱۰

۱۱

۱۲

* {

box-sizing: border-box;

}

html,

body {

width: ۱۰۰%;

height: ۱۰۰%;

margin: ۰;

background-color: #۷EC855;

font-family: 'Roboto', sans-serif;

}

این مرحله را با تغییر ارتفاع «عنوان» به ۶۰ پیکسل و اضافه نمودن برخی سبک‌های (style) پایه‌ای شروع می‌کنیم. سپس، به سراغ سه آیتمی که در سبد خرید هستند، می‌رویم. ارتفاع هر یک از این سه مورد را ۱۲۰ پیکسل قرار می‌دهیم و آن‌ها را برای نمایش فلکس تنظیم می‌کنیم.

.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;
}

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

.title {

height: ۶۰px;

border-bottom: ۱px solid #E1E8EE;

padding: ۲۰px ۳۰px;

color: #۵E6977;

font-size: ۱۸px;

font-weight: ۴۰۰;

}

.item {

padding: ۲۰px ۳۰px;

height: ۱۲۰px;

display: flex;

}

.item:nth-child(۳) {

border-top: ۱px solid #E1E8EE;

border-bottom: ۱px solid #E1E8EE;

}

حال، ساختار پایه سبد خرید را طراحی کرده‌ایم. در این قسمت، محصولاتمان را به ترتیب می‌سازیم.

اولین مولفه‌ها، دکمه‌های حذف «delete» و موردعلاقه «favorite» هستند.

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

.buttons {
  position: relative;
  padding-top: 30px;
  margin-right: 60px;
}
.delete-btn,
.like-btn {
  display: inline-block;
  Cursor: pointer;
}
.delete-btn {
  width: 18px;
  height: 17px;
  background: url(&quot;delete-icn.svg&quot;) no-repeat center;
}
 
.like-btn {
  position: absolute;
  top: 9px;
  left: 15px;
  background: url('twitter-heart.png');
  width: 60px;
  height: 60px;
  background-size: 2900%;
  background-repeat: no-repeat;
}

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

.buttons {

position: relative;

padding-top: ۳۰px;

margin-right: ۶۰px;

}

.delete-btn,

.like-btn {

display: inline-block;

Cursor: pointer;

}

.delete-btn {

width: ۱۸px;

height: ۱۷px;

background: url("delete-icn.svg") no-repeat center;

}

.like-btn {

position: absolute;

top: ۹px;

left: ۱۵px;

background: url('twitter-heart.png');

width: ۶۰px;

height: ۶۰px;

background-size: ۲۹۰۰%;

background-repeat: no-repeat;

}

کلاس «is-active» را با استفاده از jQuery برای زمانی که روی دکمه کلیک می‌شود، تنظیم می‌کنیم تا با کلیک بر روی آن قلب به حرکت درآید، البته این مورد مطلب مربوط به بخش بعدی (جاوا اسکریپت) است.

.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; }
}

۱۰

۱۱

۱۲

۱۳

.is-active {

animation-name: animate;

animation-duration: .۸s;

animation-iteration-count: ۱;

animation-timing-function: steps(۲۸);

animation-fill-mode: forwards;

}

@keyframes animate {

۰% { background-position: left; }

۵۰% { background-position: right; }

۱۰۰% { background-position: right; }

}

گام بعدی، تصویر محصول است که نیاز به حاشیه ۵۰ پیکسلی از سمت راست دارد.

.image {
  margin-right: 50px;
}
 
Let’s add some basic style to  product name and description.
.description {
  padding-top: 10px;
  margin-right: 60px;
  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;
}

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

.image {

margin-right: ۵۰px;

}

Let’s add some basic style to product name and description.

.description {

padding-top: ۱۰px;

margin-right: ۶۰px;

width: ۱۱۵px;

}

.description span {

display: block;

font-size: ۱۴px;

color: #۴۳۴۸۴D;

font-weight: ۴۰۰;

}

.description span:first-child {

margin-bottom: ۵px;

}

.description span:last-child {

font-weight: ۳۰۰;

margin-top: ۸px;

color: #۸۶۹۳۹E;

}

سپس، تعداد دکمه تعداد سفارش را اضافه می‌کنیم، که نیاز به دو دکمه برای اضافه و حذف تعداد محصول دارد. ابتدا، CSS را ایجاد می‌کنیم و سپس با اضافه کردن برخی مشخصات جاوا اسکریپت این کار را انجام می‌دهیم.

.quantity {
  padding-top: 20px;
  margin-right: 60px;
}
.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;
}

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

.quantity {

padding-top: ۲۰px;

margin-right: ۶۰px;

}

.quantity input {

-webkit-appearance: none;

border: none;

text-align: center;

width: ۳۲px;

font-size: ۱۶px;

color: #۴۳۴۸۴D;

font-weight: ۳۰۰;

}

button[class*=btn] {

width: ۳۰px;

height: ۳۰px;

background-color: #E1E8EE;

border-radius: ۶px;

border: none;

cursor: pointer;

}

.minus-btn img {

margin-bottom: ۳px;

}

.plus-btn img {

margin-top: ۲px;

}

button:focus,

input:focus {

outline:۰;

}

و در آخر به سراغ قیمت کلی محصول می‌رویم.

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

.total-price {

width: ۸۳px;

padding-top: ۲۷px;

text-align: center;

font-size: ۱۶px;

color: #۴۳۴۸۴D;

font-weight: ۳۰۰;

}

همچنین، می‌توانید با اضافه کردن کد زیر آن را responsive کنید. این بخش مربوط به CSS است.

@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;
  }
}

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

@media (max-width: ۸۰۰px) {

.shopping-cart {

width: ۱۰۰%;

height: auto;

overflow: hidden;

}

.item {

height: auto;

flex-wrap: wrap;

justify-content: center;

}

.image img {

width: ۵۰%;

}

.image,

.quantity,

.description {

width: ۱۰۰%;

text-align: center;

margin: ۶px ۰;

}

.buttons {

margin-right: ۲۰px;

}

جاوا اسکریپت

با اضافه کردن کد زیر، هنگام کلیک برروی قلب،‌ با حالتی انیمیشن وار حرکت می‌کند.

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

$('.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 &amp;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 &amp;lt; 100) {
        value = value + 1;
    } else {
        value =100;
    }
 
    $input.val(value);
});

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

$('.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; ۱) {

value = value - ۱;

} else {

value = ۰;

}

$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; ۱۰۰) {

value = value + ۱;

} else {

value =۱۰۰;

}

$input.val(value);

});

برای مشاهده دمو برروی دکمه زیر کلیک کنید.

مشاهده دمو

امیدواریم مطالب مفیدی را از این مقاله آموخته باشید.

منبع designmodo.com

پربازدید‌ترین‌های ماه

مقایسه کنترل پنل‌های سی پنل و پلسک

به‌کارگیری قانون هشتاد بیست برای بهبود بازاریابی ایمیلی

آیا لازم است سایت خود را در گوگل ثبت کنیم؟

Google Search Console چیست؟ آموزش کنسول جستجوی گوگل

۷ ابزار تاثیرگذار در طراحی سایت

آموزش ساخت رابط کاربری سبد خرید با استفاده از CSS و جاوا اسکریپت

HTML

CSS

جاوا اسکریپت

افزودن دیدگاه

انصراف از پاسخ

پربازدید‌ترین‌های ماه

HTML

CSS

جاوا اسکریپت

شاید از این ها خوشتان آمد

افزودن دیدگاه