نمایش رنگ و نوع گارانتی محصول و تغییر قیمت
سلام دوستان من دارم یه فروشگاه لوازم دیجیتال میسازم. یه بخش رو نمیتونم پیاده کنم. چجوری برای محصول رنگ و گارانتی های متفاوتی قرار بدیم که با انتخاب هر کدوم قیمت محصول تغییر پیدا کنه؟ چطوری به مدل وصل بشم و قیمت جدید رو بصورت لحظه ای نمایش بدم؟ آیا باید یه جدول برای رنگ و گارانتی بسازم و از رابطه چند به چند استفاده کنم؟ لطفا کامل بحث رو رو برام توضیح بدین. راستش من هنوز جاوا اسکریپت رو یاد نگرفتم و نمیتونم از جاوا اسکریپت تو کد هام استفاده کنم برای همین اگه برای حل این مسئله نیاز به جاوا اسکریپ بود لطفا کد اون رو هم قرار بدین.
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
سلام
شما باید حتماً باید از جاوا سکریپت استفاده کنید.
در این کد در از خط 1 الی 4 ما با عناصر html ارتباط میکنیم.
از خط 6-14 ما ترکیب های موجود را تعریف میکنیم که شامل نام رنگ (همان ارزش input برای رنگ مورد نظر) و نام گارانتی (همان ارزش option برای گارانتی مورد نظر) و قیمت این ترکیب (شما میتواند نام ها را از اعداد به نام انگلیسی تبدیل کنید به شرط اینکه ارزش input ها و option ها را در html هم تغییر دهید).
از خط 16-39 ما یک تابعی را تعریف میکنیم که در این تابع ما ابتدا گارانتی و رنگی که کاربر انتخاب کرده استخراج میکنیم (17-23) و بعد روی لیست ترکب ها پیمایش میکنیم و جستجو میکنیم که اگر ترکیبی با رنگ و گارنتی که کاربر انتخاب کرده وجود داشته باشد قیمیت جدید نمایش داده بشه و دکمه خرید فعال سازی میشود (24-34) و در صورتی که ترکیبی با این مشخصات وجود نداشته باشد به جای قیمت جمله "این ترکیب موجود نیست" نمایش داده میشود و دکمه خرید غیر فعال سازی میشود (35-38).
از خط 41-44 ما به مرورگر میگوییم که وقتی یکی از input های رنگ یا گارانتی تغییر کند این تابع را روشن کند
@3alisaki
سلام علی جان. ممنون بابت راهنماییت. ممنون میشم اگه یه زحمت بکشین و نحوه ارسال مقادیر بصورت ajax به کنترلر و دریافت نتیجه بصورت ajax و نمایش اون در بخش قیمت رو هم به کدها اضافه کنید. و اون متد هایی که در کنترلر برای ارسال نتیجه به ajax لازم هست رو هم اضافه کنید.
در اصل من میخام یه جدول به نام ویژگی محصولات (رنگ و گارانتی) بسازم که بوسیله ارتباط چند به چند با جدول محصولات هرموقع رویه رنگ یا گارانتی کلیک شد بوسیله ajax دیتا ها به کنترلر مدنظر ارسال و در اونجا چک بشه و قیمت جدید به ویو ارسال بشه.
@mhyeganeh @hesammousavi @ali.bayat
سلام دوستان کسی نیست در مورد این قضیه راهنمایی کنه؟ الان نمیدونم برای پیاده سازی این سیستم باید چکار کنم. تحلیل جداول به چه شکله؟
سلام
من دقیقیاً منظورتون متوجه نشدم. چیزی که فهمیدم که شما میخواهیید قیمت جدید که برحسب نوع و گرانتی هست به صورت ajax دریافت کنید و میخوایید از لاراول برای بک اند این پروژه استفاده کنید (متاسفانه من دانشی در مورد فریمورک لاراول ندارم و به همین دلیل من از PHP ساده استفاده میکنیم).
من میخواهم نظر شما به این جلب کنم که این کار هیچ نیازی به ajax نداره. شما نباید چنین کاری انجام بدید بجای اینکه در هر تغییر برید یک رکوست به سرور ارسال کنید شما بهتر هست که مثل مثالی که براتون کد آن زدم عمل کنید. شما میتواند متغیر availible_products را بواسطه PHP ست کنید که من آلان براتون مثال میزنم:
شما باید مقادیر متغییر های $colors و $warranties و $availibleproducts را از دیتابیس دریافت کنید.
<?php
$colors = array(
'آبی',
'زرد',
'بنفش',
'سبز'
);
$warranties = array(
'بدون',
'گارانتی آونگ',
'گارانتی ویستا (الماس)',
'گارانتی مادیران'
);
$availible_products = array(
array( 'color' => '0', 'warranty' => '0', 'price' => '100 هزار تومان' ),
array( 'color' => '0', 'warranty' => '1', 'price' => '110 هزار تومان' ),
array( 'color' => '0', 'warranty' => '2', 'price' => '120 هزار تومان' ),
array( 'color' => '1', 'warranty' => '0', 'price' => '115 هزار تومان' ),
array( 'color' => '1', 'warranty' => '1', 'price' => '105 هزار تومان' ),
array( 'color' => '2', 'warranty' => '0', 'price' => '125 هزار تومان' ),
array( 'color' => '3', 'warranty' => '0', 'price' => '125 هزار تومان' ),
);
?><html dir="rtl" lang="fa">
<body>
<p>رنگ:</p>
<div>
<?php foreach($colors as $index => $color) { ?>
<label>
<?php echo $color; ?>
<input type="radio" name="color-selector" value="<?php echo $index; ?>"<?php
if($index == 0) echo ' checked';
?> />
</label>
<?php } ?>
</div>
<p>گارانتی:</p>
<select name="warranty-selector" value="1">
<?php foreach($warranties as $index => $warranty) { ?>
<option value="<?php echo $index; ?>"><?php echo $warranty; ?></option>
<?php } ?>
</select>
<p>قیمت:</p>
<div id="product-price">100 هزار تومان</div>
<p><button id="buy-button">خرید</button></p>
<script>
var color_selector = document.getElementsByName('color-selector');
var warranty_selector = document.getElementsByName('warranty-selector')[0];
var product_price = document.getElementById('product-price');
var buy_button = document.getElementById('buy-button');
var availible_products = [
<?php foreach($availible_products as $product) { ?>{
color: '<?php echo $product['color']; ?>',
warranty: '<?php echo $product['warranty']; ?>',
price: '<?php echo $product['price']; ?>'
},<?php } ?>
];
function change_product_date() {
var selected_color = false;
color_selector.forEach(function(color_input) {
if (color_input.checked) {
selected_color = color_input.value;
}
});
var selected_warranty = warranty_selector.value;
var is_availible = false;
availible_products.forEach(function (product_details) {
if (!is_availible) {
if (product_details.color === selected_color &&
product_details.warranty === selected_warranty) {
is_availible = true;
product_price.innerText = product_details.price;
buy_button.disabled = false;
}
}
});
if (!is_availible) {
product_price.innerText = "این ترکیب موجود نیست";
buy_button.disabled = true;
}
}
color_selector.forEach(function(color_input) {
color_input.addEventListener('change', change_product_date);
});
warranty_selector.addEventListener('change', change_product_date);
</script>
</body>
</html>