سبد خرید یکی از مهمترین بخشها در یک فورشگاه آنلاین بهحساب میآید، در این مقاله، قصد داریم نحو ساخت سبد خرید با استفاده از 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 #۱ --> <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="۱"> <button class="minus-btn" type="button" name="button"> <img src="minus.svg" alt="" /> </button> </div> <div class="total-price">$۵۴۹</div> </div> <!-- Product #۲ --> <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="۱"> <button class="minus-btn" type="button" name="button"> <img src="minus.svg" alt="" /> </button> </div> <div class="total-price">$۸۷۰</div> </div> <!-- Product #۳ --> <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="۱"> <button class="minus-btn" type="button" name="button"> <img src="minus.svg" alt="" /> </button> </div> <div class="total-price">$۳۴۹</div> </div> </div> |
CSS
مطمئن شوید که فونتی که در این آموزش استفاده میکنیم، را در سیستم خود دارید.
حال، با کدهای زیر برخی روشها (style) را به بدنه (body) اضافه میکنیم:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ |
* { 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: ۱۰۰%; height: ۱۰۰%; margin: ۰; background-color: #۷EC855; font-family: 'Roboto', sans-serif; } |
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ |
.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: ۳۰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: .۸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: ۵۰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: ۲۰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: ۸۳px; padding-top: ۲۷px; text-align: center; font-size: ۱۶px; color: #۴۳۴۸۴D; font-weight: ۳۰۰; } |
همچنین، میتوانید با اضافه کردن کد زیر آن را responsive کنید. این بخش مربوط به CSS است.
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ |
@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'); }); |
حال با دستورات زیر دکمهی مقدار را فعال میکنیم.
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ |
$('.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); }); |
برای مشاهده دمو برروی دکمه زیر کلیک کنید.
امیدواریم مطالب مفیدی را از این مقاله آموخته باشید.
افزودن دیدگاه