سورس jquery افزودن به سبد خرید سریع

استفاده از صفحه نمایش بزرگتر نباید محدود به استفاده از تصاویر / عناصر بزرگتر باشد. ما می توانیم این پیکسل های اضافی را با افزایش تجربه کاربر با ویژگی های اضافی کار کنیم.

UX استاندارد برای یک گالری محصول: کلیک کاربر بر روی یک محصول که او دوست دارد، و سپس به صفحه محصول تک حرکت می کند. از این جا، او قصد دارد برخی از گزینه ها را انتخاب کند و در نهایت محصول را به سبد خرید اضافه کند. هیچ چیز در این فرآیند شکسته نشده است. با این حال، یک مشتری بازگشتی که با خط تولید آشناست، ممکن است مفید باشد برای انتخاب و خرید یک محصول به طور مستقیم از گالری!

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

آیکون های کتابخانه هسته ای ما .

ایجاد ساختار

ساختار اصلی HTML یک لیست غیر ارادی است. هر آیتم لیست حاوی لیست غیر ارادی (کشویی تصویر محصول)، div.cd-customization(با دکمه اضافه کردن به سبد خرید و گزینه های سفارشی سازی محصول) و div.cd-item-info(با عنوان محصول و قیمت).

<ul class="cd-gallery">
   <li>
      <div class="cd-single-item">
         <a href="#0">
            <ul class="cd-slider-wrapper">
               <li class="selected"><img src="img/thumb-1.jpg" alt="Preview image"></li>
               <li><img src="img/thumb-2.jpg" alt="Preview image"></li>
               <!-- other product images here -->
            </ul>
         </a>

         <div class="cd-customization">
            <div class="color" data-type="select">
               <ul>
                  <li class="color-1 active">color-1</li>
                  <li class="color-2">color-2</li>
                  <!-- other product colors here -->
               </ul>
            </div>
				
            <div class="size" data-type="select">
               <ul>
                  <li class="small active">Small</li>
                  <li class="medium">Medium</li>
                  <!-- other product sizes here -->
               </ul>
            </div>

            <button class="add-to-cart">
               <em>Add to Cart</em>
               <svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">
                  <path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"/>
               </svg>
            </button>
         </div> <!-- .cd-customization -->

         <button class="cd-customization-trigger">Customize</button>
      </div> <!-- .cd-single-item -->

      <div class="cd-item-info">
         <b><a href="#0">Product Name</a></b>
         <em>$9.99</em>
      </div> <!-- cd-item-info -->
   </li>

   <!-- other list items here -->
</ul> <!-- cd-gallery -->

افزودن سبک

بیایید از لغزنده محصول شروع کنیم. به طور پیش فرض، آیتم های لیست در حالت مطلق قرار دارند و به سمت راست (خارج از .cd-galleryوالد آنها ) ترجمه می شوند، بنابراین آنها قابل مشاهده نیستند. سپس از 2 کلاس برای درست کردن آنها استفاده کردیم:  .selected(اضافه شده به آیتم اول لیست - تصویر محصول قابل مشاهده) و  .move-left (تصویر محصول در سمت چپ - قابل مشاهده نیست).

.cd-slider-wrapper {
  position: relative;
  overflow: hidden;
}
.cd-slider-wrapper li {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  /* by default, move the product image to the right*/
  transform: translateX(100%);
  transition: transform 0.3s 0s, visibility 0s 0.3s;
}
.cd-slider-wrapper li.selected {
  /* this is the visible product image */
  position: relative;
  visibility: visible;
  z-index: 1;
  transform: translateX(0);
  transition: transform 0.3s 0s, visibility 0s 0s;
}
.cd-slider-wrapper li.move-left {
  /* move the product image to the left */
  transform: translateX(-100%);
}

درباره گزینه های سفارشی سازی محصول: .cd-customizationعنصر زمانی نشان داده می شود که کاربر بر روی محصول قرار می گیرد. آن را در موقعیت مطلق قرار می دهد و در پایین .cd-single-itemعنصر والد قرار می گیرد. 
برای ایجاد گزینه های سفارشی سازی (رنگ و اندازه)، ما از دو <ul>عنصر مختلف استفاده کردیم ، هر دو در یکdiv[data-type="select"](div.size و div.color) پیچیده شده اند. <ul>عنصر در موقعیت مطلق و نسبی محور است به پدر و مادر خود در حالی که  div[data-type="select"]به یک ارتفاع ثابت (34px) و یک سرریز: مخفی. هر عنصر لیست در لیست غیر ارادی ارتفاع برابر است به div[data-type="select"]طوری که، به طور پیش فرض، تنها گزینه انتخاب شده قابل مشاهده است. 
هنگامی که یک کاربر روی یکی از دو گزینه سفارشی کلیک کند، ویژگی سرریز  div[data-type="select"]آن به صورت قابل مشاهده است تا کل<ul> عنصر نشان داده شده است.

.cd-customization {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  visibility: hidden;
  opacity: 0;
}

.no-touch .cd-single-item:hover .cd-customization {
  /* product customization visible */
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

.cd-customization .color, .cd-customization .size {
  height: 34px;
  position: relative;
  overflow: hidden;
}
.cd-customization .color ul, .cd-customization .size ul {
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 100%;
}
.cd-customization .color.is-open, .cd-customization .size.is-open {
  /* color/size list open - make ul element visible */
  overflow: visible;
}

برای اینکه اطمینان حاصل شود که <li>آیتم انتخاب شده همیشه قابل مشاهده است، ما مجبور شدیم که اقلام لیست را در داخل<ul>والد خود با توجه به گزینه انتخاب شده تنظیم مجدد کنیم . برای انجام این کار، .selected-nکلاس را ایجاد کردیم(جایی که n مورد انتخاب است). به عنوان مثال،  .selected-3کلاس  div[data-type="select"]هنگامی که مورد لیست سوم انتخاب شده است، اضافه می شود:

.cd-customization .color.selected-3 ul li:first-of-type, 
.cd-customization .size.selected-3 ul li:first-of-type {
  /* third option selected in the ul.color/ul.size list */
  transform: translateY(0);
}
.cd-customization .color.selected-3 ul li:nth-of-type(2), 
.cd-customization .size.selected-3 ul li:nth-of-type(2) {
  transform: translateY(100%);
}
.cd-customization .color.selected-3 ul li:nth-of-type(3), 
.cd-customization .size.selected-3 ul li:nth-of-type(3) {
  transform: translateY(-100%);
}

درباره انیمیشن افزودن به سبد خرید: .add-to-cartدکمه توسط <em>(پیام متنی دکمه) و یک SVG (آیکون چک) تشکیل شده است. به طور پیش فرض SVG قابل مشاهده نیست (به سمت راست، خارج از دکمه منتقل شده است). 
هنگامی که محصول به سبد اضافه می شود، .is-addedکلاس به .add-to-cartدکمه اضافه می شود  : <em>(متن) پنهان شده (به سمت چپ منتقل شده)، در حالی که svg در داخل دکمه حرکت می کند و انیمیشن طراحی شروع می شود:

.cd-customization .add-to-cart em {
  /* this is the button text message */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.cd-customization .add-to-cart svg {
  /* this is the check icon */
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  /* move the icon on the right - outside the button */
  transform: translateX(50%) translateY(-50%);
}
.cd-customization .add-to-cart.is-added em {
  /* product added to the cart - hide text message on the left with no transition*/
  color: transparent;
  transform: translateX(-100%);
}
.cd-customization .add-to-cart.is-added svg {
  /* product added to the cart - move the svg back inside the button */
  transform: translateX(-50%) translateY(-50%);
}

درباره انیمیشن نقاشی SVG، ما از دو ویژگی svg استفاده کردیم  stroke-dasharrayو  stroke-dashoffset. اولین مورد به شما اجازه می دهد طول فاصله و شکاف را مشخص کنید، در حالی که دوم اجازه می دهد تا جایی که dasharray شروع می شود را تغییر دهید. در مورد ما، ما یک سکته مغزی- dasharray = "19.79 19.79" و سکته مغزی-dashoffset = "19.79" (جایی که 19.76 طول مسیر است) تعیین می کنیم:

<svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">
   <path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"/>
</svg>

و سپس مقدار dashoffset را به 0 اضافه کنید تا انیمیشن نقاشی ایجاد شود.

اگر شما علاقه مند به جزئیات بیشتر در مورد انیمیشن آیکون SVG، شما می توانید نگاهی به آنچه که ما در مقاله انجام شده  آیکون SVG متحرک .

توجه داشته باشید : برای تحریک مقدار dashoffset، ما می توانستیم از انتقال CSS (و نه با استفاده از روش jQuery) استفاده کنیم، اما متاسفانه IE11 به نظر می رسد که با انتقال برخی خواص svg مشکلی ایجاد می کند.

نکته آخر برای دستگاه های لمسی: ما از Modernizer برای استفاده از دستگاه های لمسی استفاده کردیم و .cd-customization-trigger(نماد تنظیمات) را برای .cd-customizationنمایش دید در عنصر افزودن اضافه کردیم .

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

هنگامی که یک کاربر با یکی از گزینه های سفارشی سازی محصول (به عنوان مثال، گزینه رنگ) تعامل می کند، .hoverکلاس به .cd-single-itemعنصر متناظر اضافه می شود. این کلاس می .cd-customization elementتواند قابل مشاهده باشد، به طوری که اگر مکانیزم محصول را ترک کند ناپدید می شود (ما فرض کردیم که کاربر به محصول علاقه مند است، زیرا او با آن تعامل داشته، و نمی خواهد گزینه ها را از دست بدهد، اگر به طور تصادفی محصول را ترک می کند) به همین دلیل، .hoverکلاس از همه محصولات دیگر حذف می شود (به طوری که کاربر می تواند تنها بر روی محصولی که با آن تعامل دارد تمرکز کند). این  resetCustomization()کار برای این کار تعریف شده است:

function resetCustomization(selectOptions) {
   //add .hover class to the item user is interacting with
   //close ul.color/ul.size if they were left open and user is not interacting with them anymore
   //remove the .hover class from items if user is interacting with a different one
   selectOptions.siblings('[data-type="select"]').removeClass('is-open').end().parents('.cd-single-item').addClass('hover').parent('li').siblings('li').find('.cd-single-item').removeClass('hover').end().find('[data-type="select"]').removeClass('is-open');
}

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