اضافه کردن به سبد خرید

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

@behzad.azizan

منظورم چیز دیگه ای بود اضافه کردن به سبد خرید مشکلی نیست آموزش راکت رو دیدم اکیه
منظورم بود مثل همون تصویر وقتی روی هر کدوم میزنم به سبد خرید اضافه بشه و صفحه لود نشه و بد محاسبه بشه همون صفحه
تقریبا درست کردم ولی نیاز به دانش جاوا اسکریپ هم هست که صفحه لود نشه درسته ؟

به تکنولوژی که شما بتونین با استفاده از اون بدون نیاز به لود کل صفحه (رفرش) اطلاعاتی به سرور بفرستید و پاسخ بگیرید (ریکوئست و ریسپانس) میگن ajax

توی درخواست های HTTP ارتباط با سرور به صورت سرور و کلاینت هست. ایده اینه که کلاینت ها هر چیزی رو که بخوان از سرور بگیرن اول یک درخواست به سرور میزنن (request) و بعد سرور به اون درخواست پاسخ میده (response). توی وب ابتدایی همه درخواست ها به این صورت بود که کل صفحه رفرش میشد و بعد این نیاز مطرح شد که مثلا وقتی ما میخوایم یک تغییر توی سبد خرید (به عنوان مثال) بدیم چرا باید 20 درخواست دیگه رو به سرور بدیم؟!
که این باعث شد تکنولوژی ایجکس معرفی بشه و کل حرفش هم اینه که کلاینت ها بتونن بدون رفرش شدن صفحه با سرور در ارتباط باشن
توی این مثال شما هم همینه. سبد خرید و محاسبه قیمتش سمت سرور اتفاق میوفته . کلیک روی دکمه خرید ، سمت کلاینتت داره اتفاق میوفته پس باید با کلیک روی دکمه خرید یک درخواست به سرور زده بشه و سرور محصول مورد نظر رو به سبد خرید اضافه کنه و قیمت و قیمت کل و ... جدید رو در پاسخ به درخواست ارسال کنه.
فکر میکنم با این توضیحات بتونید راحت تر موضوع رو درک کنید موضوع پیچیده ای نیست اصلا این توضیحات رو بخونید و با ذهن آماده سرچ کنید یا فیلم آموزشی ببینید براش

میتونید از jquery برای این بخش استفاده کنید که خیلی راحت تره.

ببنید شما باید این کار هارو انجام بدین:
۱- گرفتن اطلاعات محصول و اضافه کردن به سبد
۲- اعتبار سنجی اطلاعات محصول سمت سرور

در مورد گزینه ۲ توضیح بدم. دلیلش اینه که مثلا فرض کنید شما محصولاتتون قیمت دارن. حالا طرف میاد سبد خریدشو پر میکنه و میاد یه inspect element ساده میزنه و قیمت نهایی رو تغییر میده (مثلا قیمت رو صفر میکنه). بعد همون سبد رو ارسال میکنه به سرور با قیمت صفر! و عملا محصولات شمارو رایگان میخره. اگر قیمت مطرح نیست و صرفا میخواین عنوان محصول رو به سبد اضافه کنید; مرحله دوم رو نیازی نیست انجام بدین. برای انجام مرحله اول یک نمونه کد قرار میدم:

قسمت html برای نمایش محصولات:

<div class=“products”>
    <span id=“”product1>
    محصول شماره یک
    </span>
    <span id=“”product2>
    محصول شماره دو
    </span>
    <span id=“”product3>
    محصول شماره سه
    </span>
    <span id=“”product4>
    محصول شماره چهار
    </span>
</div>

قسمت جاوا اسکریپت:

<script>
let basket = $(‘.basket’);
$(‘.products span’).click(function(){
    let product = $(this).text();
    basket.append('<div>’ + product + ‘</div>);
});
</script>

حالا شما یک تگ div درست می کنید با کلاس مثلا basket
الان روی هر کدوم از محصولات کلیک کنید متن اون محصول توسط یک تگ div توی تگ سبد خرید (تگی که کلاس basket داره) اضافه میشه.
بعد از این مرحله اطلاعات سبد رو به سرور ارسال می کنید. این روش کاملا کلاینت سایدی هست و سمت سرور مجددا واسه محکم کاری باید اسم محصولاتی که از طریق سبد خرید ارسال شده رو توی دیتابیس چک کنید که کاربر محصول الکی وارد نکنه.
برای ارسال اطلاعات به سرور هم خب روش های مختلفی هست که فکر کنم خودتون هم بتونید انجام بدین.