سبد خرید

نمایش خلاصه ای از خرید هایی که شما انجام خواهید داد

سبد خرید خالی می باشد
مبلغ کل
0
تسویه حساب

آموزش کامل و سورس سبد خرید css , jquery با پیشنمایش و دانلود
حميد  شریفی
حميد شریفی
تعداد کل دانلود ها : 569214
تعداد کل مطالب : 1109

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

تعداد دانلود:
1117
تعداد بازدید:
6872
تاریخ:

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

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

آیکن ها:  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()، تعریف شده اند برای به روز رسانی تعداد سبد خرید و کل در هنگام اضافه کردن / حذف محصولات جدید و یا زمانی که مقدار محصول اضافه شده به سبد خرید تغییر کرده است.

محصولات مشابه فروشی
هشتگ ها :

این محصول بدون نظر می باشد شما میتوانید اولین نظر را ثبت کنید

ارسال نظر

آخرین های مشابه مشاهده بیشتر

  • تلفن : 04136383693
  • پیامک : 500020606688
  • آدرس : آذربایجان شرقی، تبریز، شهرک مصلی، خیابان راجی، راجی 4، کوچه بیست هشتم، قطعه 1339، طبقه چهارم

ملت وب در سال 1393 فعالیت خود را در چهار بخش قالب های آماده، طراحی لوگو، طراحی سایت، طراحی بنر آغاز کرده است، که در مدت بسیار کم با تلاش های بی وقفه خود و همکاران توانسته بزرگترین وب سایت ارائه دهنده قالب های با کیفیت در ایران باشد رمز موفقیت شرکت ملت وب پشتیبانی بی دریغ از کاربران خود می باشد ما موقعیت خود را مدیون مشتریان وفادار خود هستیم پس همیشه همراهشان خواهیم بود .

  • logo-samandehi