تعداد آیتم های اضافه شده به سبد خرید

قصد دارم که قالب booklyn رو با قابلیت های زیر تغییر بدم. راهنمایی میفرمایید:
1- آیکون سبد خرید روش تعداد محصولات اضافه شده به سبد خرید نمایش داده بده
2- محصولات با یه آیکون (مثبت و منفی) اضافه یا کم بشه. یعنی مثلا اگر از یه کالا یکی اضافه شده با کلیک روی علامت + تعداد بشه 2 تا (چه توی کاتالوگ ها چه توی mini shopping cat)
3- بعد از اضافه کردن محصول بلافاصله اعداد بروزرسانی بشه

در ضمن من میخوام flyout shopping cart رو تو یه صفحات خاصی داشته باشم و البته میخوام کلا نشون داده بشه نه اینکه با کلیک روی سبد خرید نمایش داده بشه.
در حقیقت ماهیت فروشگاه به نحوی هست که کاربر موقع خرید باید مدام لیست خریدش جلوی چشمش باشه ولی وقتی به صفحاتی مثل ورود یا خود سبد خرید میره دیگه لازم نیست نشون داده بشه

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

در رابطه با سوال شماره 2 شما، نکته ای قابل ذکر وجود دارد. اینکه تم های ارائه شده در ناپ شاپ ، قابلیت استفاده از + و - برای افزایش و کاهش تعداد موردنظر را دارند.

اما  اگر نیاز به تغییرات دستی دارید، 2 راه وجود دارد:
1- ابتدا باید 2 دکمه HTML تعریف کنید و سپس مطابق با سایتتان به آن استایل بدهید. (برای مثال من 2 دکمه با کلاس های 'plus' و 'minus' میسازم. یکی برای کم کردن ویکی برای زیاد کردن تعداد)
سپس دکه ها را هرجایی از سایت که میخواهید قرار دهید.
سپس کد جاوا اسکریپت که قرار است محاسبات را  انجام دهد، اضافه کنید.
کد زیر با استفاده از 2 تابع نوشته شده است. یکی برای افزایش و دیگری برای کاهش:

function incrementQuantityValue(event) {
        event.preventDefault();
        event.stopPropagation();

        var input = $(this).siblings('target goes here').first();

        var value = parseInt(input.val());
        if (isNaN(value)) {
            input.val(1);
            return;
        }

        value++;
        input.val(value);
    }

    function decrementQuantityValue(event) {
        event.preventDefault();
        event.stopPropagation();

        var input = $(this).siblings('target goes here').first();

        var value = parseInt(input.val());

        if (isNaN(value)) {
            input.val(1);
            return;
        }

        if (value <= 1) {
            return;
        }

        value--;
        input.val(value);
    } 

سپس باید توابع را در document.ready فراخوانی کنید:

$(document).ready(function () {
        $(' increment target').on('click', '.plus', incrementQuantityValue);
        $('decrement target').on('click', '.minus', decrementQuantityValue);
});

2- روش دوم با استفاده از BootStrap است که آن را با یک مثال بیان میکنم. پس از اضافه کردن کدهای زیر، دکمه هایی مانند عکس خواهید داشت که کار کاهش و افزایش تعداد را انجام خواهند داد:


کد HTML:

  <div class="center">
    <p>
      </p><div class="input-group">
          <span class="input-group-btn">
              <button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
         <span class="glyphicon glyphicon-minus"></span>
    </button>
   </span>
 <input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
     <span class="input-group-btn">
         <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">
                  <span class="glyphicon glyphicon-plus"></span>
       </button>
     </span>
  </div>
 <p></p>
<p>
      </p><div class="input-group">
          <span class="input-group-btn">
              <button type="button" class="btn btn-danger btn-number"  data-type="minus" data-field="quant[2]">
                <span class="glyphicon glyphicon-minus"></span>
              </button>
          </span>
          <input type="text" name="quant[2]" class="form-control input-number" value="10" min="1" max="100">
          <span class="input-group-btn">
              <button type="button" class="btn btn-success btn-number" data-type="plus" data-field="quant[2]">
                  <span class="glyphicon glyphicon-plus"></span>
    </button>
  </span>
 </div>
<p></p>
</div>

کد CSS:

.center{
width: 150px;
  margin: 40px auto;
}

کد JavaScript:

//plugin bootstrap minus and plus
//http://jsfiddle.net/laelitenetwork/puJ6G/
$('.btn-number').click(function(e){
    e.preventDefault();

    fieldName = $(this).attr('data-field');
    type      = $(this).attr('data-type');
    var input = $("input[name='"+fieldName+"']");
    var currentVal = parseInt(input.val());
    if (!isNaN(currentVal)) {
        if(type == 'minus') {

            if(currentVal > input.attr('min')) {
                input.val(currentVal - 1).change();
            } 
            if(parseInt(input.val()) == input.attr('min')) {
                $(this).attr('disabled', true);
            }

        } else if(type == 'plus') {

            if(currentVal < input.attr('max')) {
                input.val(currentVal + 1).change();
            }
            if(parseInt(input.val()) == input.attr('max')) {
                $(this).attr('disabled', true);
            }
        }
    } else {
        input.val(0);
    }
});
$('.input-number').focusin(function(){
   $(this).data('oldValue', $(this).val());
});
$('.input-number').change(function() {
    
    minValue =  parseInt($(this).attr('min'));
    maxValue =  parseInt($(this).attr('max'));
    valueCurrent = parseInt($(this).val());

    name = $(this).attr('name');
    if(valueCurrent >= minValue) {
        $(".btn-number[data-type='minus'][data-field='"+name+"']").removeAttr('disabled')
    } else {
        alert('Sorry, the minimum value was reached');
        $(this).val($(this).data('oldValue'));
    }
    if(valueCurrent <= maxValue) {
        $(".btn-number[data-type='plus'][data-field='"+name+"']").removeAttr('disabled')
    } else {
        alert('Sorry, the maximum value was reached');
        $(this).val($(this).data('oldValue'));
    }
});
$(".input-number").keydown(function (e) {
    // Allow: backspace, delete, tab, escape, enter and .
     if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
         // Allow: Ctrl+A
       (e.keyCode == 65 && e.ctrlKey === true) || 
      // Allow: home, end, left, right

برچسب ها: دکمه + و - برای تغییر تعداد کالا ، افزایش و کاهش تعداد کالا با دکمه مثبت و منفی ، تعیین تعداد کالا با دکمه + و -

ممنون از راهنماییتون.
توی تم بروکلین متاسفانه قابلیت نمایش تعداد کالا در سبد خرید در کنار آیکون سبد خرید وجود نداره. ضمن اینکه وقتی کالایی خرید میشه و مشتری گزینه "ادامه خرید" رو انتخاب میکنه چون صفحه مجدد لود نمیشه سبد خرید flyshoppingcart بروزرسانی نمیشه مگر کاربر دوباره refresh کنه

در خصوص دکمه های + و - من چیزی مثل نمونه زیر رو میخوام پیاده سازی کنم :
https://www.reyhoon.com/restaurants/red-crescent

اگر ببینید سناریوی خریدش رو :
1 - با زدن دکمه + محصول فورا سبد خریدی که مقابل چشم کاربر هست بروز میشه.
2 - کالایی که اضافه شده 3 تا دکمه + و - و حذف داره که در صورت کلیک شدن جمع فاکتور و بقیه موارد هم اصلاح میشه.

اون چیزی که فرمودید ساخت خود دکمه ها و تابع اضافه و کم کردن تکست باکس مربوطش بود. من در حقیقت قصد بازنویسی سبدخرید رو دارم.
میدونم مشکله و حتی شاید یه پلاگین آماده برای اینکار باشه ولی کل پروژه ام مدتهاست لنگ این مونده

البته گویا در نسخه اصلی 3.9 تم brooklyn قابلیت نمایش تعداد کالا روی سبد خرید وجود داره ولی تو نسخه ای که از اینجا تهیه کردم این قابلیت انگار نیست. احتمالا نسخه پایین تر 3.9 هست.

احتمالا شما پلاگین nop ajax cart که همراه تم ارائه شده است را نصب نکردید.

چرا همون رو نصب کردم.
توی نسخه  دموی ادمین سایت nop-template برای تم Brooklyn ، تو بخش تنظیمات خود تم این گزینه وجود داره انتخاب کنیم تعداد محصولات سبد خرید رو نشون بده روی آیکون سبدش یا نه.
ولی تو نسخه من همچین گزینه ای نیست.

دوست عزیز لینک دانلود آخرین و جدیدترین آپدیت تم بروکلین برای شما ارسال گردید.
آنرا دانلود و جایگزین تم قبلی نمایید.

لازم به ذکر است که تم ها و پلاگین های ما نسخه اورجینال می باشد و کسانی که از ما خرید نموده باشند می توانند آپدیت های جدید را هر زمان که بخواهند بصورت رایگان دریافت نمایند.
علاوه بر این زیان فارسی نیز بصورت رایگان به تم ها و پلاگین ها افزوده می شود.