راهنمای مطالعه

سبد خرید یکی از مهم‌ترین بخش‌ها در یک فورشگاه آنلاین به‌حساب می‌آید، در این مقاله، قصد داریم نحو ساخت سبد خرید با استفاده از 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>

CSS

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

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

* {
  box-sizing: border-box;
}
 
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: #7EC855;
  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;
}

این مرحله را با تغییر ارتفاع «عنوان» به ۶۰ پیکسل و اضافه نمودن برخی سبک­‌های (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;
}

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

اولین مولفه‌­ها، دکمه‌­های حذف «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;
}

کلاس «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; }
}

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

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

سپس، تعداد دکمه تعداد سفارش را اضافه می­‌کنیم، که نیاز به دو دکمه برای اضافه و حذف تعداد محصول دارد. ابتدا، 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;
}

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

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

همچنین، می­‌توانید با اضافه کردن کد زیر آن را 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;
  }
}

جاوا اسکریپت

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

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

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

[mks_button size=”large” title=”مشاهده دمو” style=”squared” url=”https://designmodo.com/demo/shopping-cart/” target=”_blank” bg_color=”#88d651″ txt_color=”#FFFFFF” icon=”” icon_type=”” nofollow=”1″]

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

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

علی رجبی

دیدگاهتان را بنویسید

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

  +  4  =  5