آموزش کامل و سورس سبد خرید css , jquery با پیشنمایش و دانلود

ما در مورد فرآیند "اضافه به سبد خرید" به الگوهای مختلفی استفاده می کنیم. ایده اصلی این الگو، اطلاع دادن به کاربر است که یک مورد به سبد اضافه شده است و او را با یک پیوند برای ادامه به پرداخت، ارائه می دهد.

ما با این ایده مخفی کردن سبد خرید به طور پیش فرض آزمایش کرده ایم و آن را زمانی که کاربر بر روی دکمه «افزودن به سبد خرید» کلیک می کند نشان می دهد. به این ترتیب کاربر می تواند سبد خرید را بررسی کند و به خرید پرداخت یا ادامه خرید را ادامه دهد. سبد خرید به پایین صفحه، در هر زمان در دسترس است.

آیکن ها:  Nucleoapp.com

ایجاد ساختار

ساختار سبد خرید سبد از دو عنصر اصلی تشکیل شده است: یک .cd-cart-triggerبرای سبد خرید و مجموع سبد خرید و یک .cd-cartمحتوا سبد خرید.

<div class="cd-cart-container empty">
   <a href="#0" class="cd-cart-trigger">
      Cart
      <ul class="count"><!-- cart items count -->
         <li>0</li>
         <li>0</li>
      </ul> <!-- .count -->
   </a>

   <div class="cd-cart">
      <div class="wrapper">
         <header>
            <h2>Cart</h2>
            <span class="undo">Item removed. <a href="#0">Undo</a></span>
         </header>
      
         <div class="body">
            <ul>
               <!-- products added to the cart will be inserted here using JavaScript -->
            </ul>
         </div>

         <footer>
            <a href="#0" class="checkout btn"><em>Checkout - $<span>0</span></em></a>
         </footer>
      </div>
   </div> <!-- .cd-cart -->
</div> <!-- cd-cart-container -->

لیست غیر ارادی داخل  div.bodyعنصر به طور پیش فرض خالی است (سبد خالی)؛ هنگامی که یک محصول به سبد اضافه می شود، یک عنصر مورد لیست با استفاده از جاوااسکریپت وارد شده است.

<div class="body">
   <ul>
      <li class="product">
         <div class="product-image">
            <a href="#0"><img src="img/thumb.jpg" alt="placeholder"></a>
         </div>

         <div class="product-details">
            <h3><a href="#0">Product Name</a></h3>

            <span class="price">$25.99</span>

            <div class="actions">
               <a href="#0" class="delete-item">Delete</a>

               <div class="quantity">
                  <label for="cd-product-'+ productId +'">Qty</label>
                  <span class="select">
                     <select id="cd-product-'+ productId +'" name="quantity">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <!-- ... -->
                     </select>
                  </span>
               </div>
            </div>
         </div>
      </li>

      <!-- other products added to the cart -->
   </ul>
</div>

افزودن سبک

.cd-cartو .cd-cart-triggerعناصر هر دو در موقعیت ثابت و خارج از دید نقل مکان کرد (با استفاده از یک translateY). هنگامی که یک آیتم به سبد اضافه می شود، .emptyکلاس از آن خارج می شود .cd-cart-containerو سبد نشان داده می شود.

.cd-cart-trigger,
.cd-cart {
  position: fixed;
  bottom: 20px;
  right: 5%;
  transition: transform .2s;
}
.empty .cd-cart-trigger, 
.empty .cd-cart {
  /* hide cart */
  transform: translateY(150px);
}

همانطور که برای انیمیشن سبد خرید: ما ارتفاع و عرض ثابت به  div.wrapper عنصر (همان از a.cd-cart-trigger)؛ هنگامی که سبد خرید باز است، ما از .cart-open کلاس استفاده می کنیم  تا ارتفاع و عرض آن را تحسین کنیم، در حالی که محتوای سبد کالایی را نشان می دهد.

.cd-cart .wrapper {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
  overflow: hidden;
  height: 72px;
  width: 72px;
  border-radius: 6px;
  transition: height .4s .1s, width  .4s .1s, box-shadow .3s;
  transition-timing-function: cubic-bezier(0.67, 0.17, 0.32, 0.95);
  background: #ffffff;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.17);
}

.cart-open .cd-cart .wrapper {
  height: 100%;
  width: 100%;
  transition-delay: 0s;
}

این .deletedکلاس برای حذف یک مورد از سبد خرید استفاده می شود: عنصر حذف شده دارای موقعیت مطلق است و  cd-item-slide-outانیمیشن برای ایجاد اثر کشویی استفاده می شود.

.cd-cart .body li.deleted {
  /* this class is added to an item when it is removed form the cart */
  position: absolute;
  left: 1.4em;
  width: calc(100% - 2.8em);
  opacity: 0;
  animation: cd-item-slide-out .3s forwards;
}

@keyframes cd-item-slide-out {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(80px);
    opacity: 0;
  }
}

اگر کاربر بر روی 'واگرد' کلیک کند، .deletedکلاس حذف می شود و عنصر در لیست دوباره وارد می شود.

مدیریت رویدادها

هنگامی که کاربر بر روی .cd-add-to-cartدکمه کلیک می کند، این  addProduct()تابع برای قرار دادن یک آیتم جدید در داخل .body > ulعنصر استفاده می شود. جزئیات محصول مورد استفاده متغیرهایی هستند که باید با اطلاعات واقعی محصول جایگزین شوند:

function addProduct() {
  //this is just a product placeholder
  var productAdded = $('<li class="product"><div class="product-image"><a href="#0"><img src="img/product-preview.png" alt="placeholder"></a></div><div class="product-details"><h3><a href="#0">Product Name</a></h3><span class="price">$25.99</span><div class="actions"><a href="#0" class="delete-item">Delete</a><div class="quantity"><label for="cd-product-'+ productId +'">Qty</label><span class="select"><select id="cd-product-'+ productId +'" name="quantity"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select></span></div></div></div></li>');
  cartList.prepend(productAdded);
}

توابع اضافی، مانند  updateCartCount()یا  updateCartTotal()، تعریف شده اند برای به روز رسانی تعداد سبد خرید و کل در هنگام اضافه کردن / حذف محصولات جدید و یا زمانی که مقدار محصول اضافه شده به سبد خرید تغییر کرده است.