لدينا العديد من الطرق لإضافة منتجات إلى عربة التسوق. الممارسة المعتادة هي النقر فوق الزر "إضافة إلى CART" ، والذي سيقفز إلى عربة التسوق. في عربة التسوق ، يمكنك النقر فوق الزر "التحقق" للتحقق. واليوم سأقدم لك حل أكثر ودية.
عرض رمز مصدر التنزيل التجريبي
بشكل افتراضي ، تكون عربة التسوق مخفية وغير مرئية. عندما ينقر المستخدم على زر الإضافة إلى CART ، ستتم إضافة معلومات المنتج إلى العربة. ستظهر عربة التسوق في الزاوية اليمنى السفلى من الصفحة في شكل زر. سيقوم النقر فوق الزر بتوسيع عربة التسوق لعرض معلومات المنتج في العربة. في الوقت نفسه ، يمكنك أيضًا حذف أو تسوية المنتجات في العربة. يمكن للمستخدمين أيضًا إغلاق عربات التسوق الخاصة بهم ومواصلة التسوق.
هيكل HTML
يتضمن هيكل HTML أساسًا جزأين. الجزء الأول هو زر "إضافة إلى عربة التسوق" في قائمة المنتجات. كما هو موضح في الكود التالي ، نستخدم سمة البيانات-* لجلب معرف المنتج والصورة والاسم والسعر والمعلومات الأخرى معًا.
<a href = "#0" data-price = "3669
الجزء الثاني هو عربة التسوق ، ويشمل جزء عربة التسوق عربة تسوق Trigger و Cart Statistics Part.CD-Cart-trigger ومحتوى هيئة عربة التسوق.
<viv> <a href = "#0"> عربة التسوق <ul> <!-عدد العناصر العاكسة-> <li> 0 </li> <li> 0 </li></ul> </a> <viv> <viv> <header> <h2> CART للتسوق </h2> <span> تم حذفها <a href = "#0" جزء ، تم إدخاله ديناميكيًا بواسطة javaScript-> </ul> </viv> <tower> <a href = "#0"> <em> current- ￥ <span> 0 </span> </em> </a> </tower> </viv> </viv> </viv> </div>
قائمة UL في عنصر div.body فارغ بشكل افتراضي. يتم استخدامه لعرض معلومات قائمة المنتجات من عربة التسوق. هيكلها الخام كما يلي. يتم إدخاله ديناميكيًا بواسطة JavaScript.
<viv> <ul> <li> <iv> <a href = "#0"> <img src = "img/pro.jpg"> </a> </viv> <viv> <h3> <a href = "#0"> اسم المنتج </a> </h3> <span> ￥ 399999 </span> بالنسبة إلى = "CD-Product-'+productid+'"> عدد العناصر </label> <span> <span> x <i id = "cd-prod-'+proid+'"> 1 </i> </span> </span> </iv> </iv> </iv> </iv> </iv> </li> </ul> </div> </liv> </liv> </li </li> </viv> </viv> </viv> </viv> </li> </viv> </viv>
لا يتم عرض جزء CSS في هذه المقالة. يمكنك تنزيل css/style.css في الكود المصدر لعرضه.
جافا سكريبت
يعتمد رمز هذا المثال على jQuery ، لذلك يجب تحميل ملف مكتبة jQuery مسبقًا.
عندما ينقر المستخدم على الزر. add-button ، قم بإعداد وظيفة AddProduct () وأدخل معلومات المنتج في .body> ul.
دالة AddProduct (proname ، proid ، price ، proimg) {var Quatity = $ ("#cd-product-"+proid) .text () ؛ var select = '' ، productAdded = '' ؛ if (Quantity == '') {var select = '<span> x <i id = "cd-product-'+proid+'"> 1 </i> </span>' ؛ var productAdded = $ ('<li> <iv> <a href = "#0"> <img src = "'+proimg+'"> </a> </viv> <viv> <h3> <a href = "#0">'+proname+'</a> </h3> <span> ￥'+' HREF = "#0"> حذف </a> <viv> <label for = "cd-product-'+proid+'"> عدد الملفات </label> '+select+' </viv> </iv> </li> ') ؛ cartlist.prepend (productAdded) ؛ } آخر {Quantity = parseint (الكمية) ؛ $ ("#cd-product-"+proid) .html (الكمية+1) ؛ }}ما سبق هو التنفيذ المستند إلى JavaScript للتأثير المضافة إلى عربة التسوق مع تنزيل رمز المصدر. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!