每日、每周、每月套餐的价格选项
Price options for daily, weekly, monthly package
我正在为我工作的公司创建食品配送电子商务网站。
这不是简单的电子商务网站，我正在使用 PHP OOP 自定义创建它。就像包裹一样，充满了可定制性，而不是固定的。
这是图表：
Food Plan 1是我们在管理面板中创建的套餐名称，weekly, daily, monthly 是可自定义的选项，您可以看到每个选项的价格都有不同的价格。所以就是这个概念。
现在，当用户单击 choose package 按钮时，将出现问题表单，表单如下：
我希望我的价格（我已存储在数据库中）仅在用户单击 daily 并在下方单击 lunch/breakfast/dinner 时显示，然后 lunch/breakfast/dinner 的价格仅适用于 daily选项。与单击 weekly 和 monthly 相同。
数据库截图如下：
这里，d 代表 daily，w 代表 weekly，m 代表 monthly。
这是我的代码：
<?php
$getPlanById = $plan->getPlanById($proId);
if($getPlanById){
$result = $getPlanById->fetch_assoc();
$m_breakfast_price = $result['m_breakfast_price'];
$m_lunch_price = $result['m_lunch_price'];
$m_dinner_price = $result['m_dinner_price'];
$w_breakfast_price = $result['w_breakfast_price'];
$w_lunch_price = $result['w_lunch_price'];
$w_dinner_price = $result['w_dinner_price'];
$d_breakfast_pric = $result['d_breakfast_price'];
$d_lunch_price = $result['d_lunch_price'];
$d_dinner_price = $result['d_dinner_price'];
?>
<div class="col-md-6 offset-md-3">
<h2 class="h2-responsive font-weight-bold mt-5 mb-0">You've choosed <span class="text-primary border-bottom border-primary"><?php echo $result['pro_name']; ?></span> package.</h2>
<label>Rs./<?php echo $result['m_breakfast_price']; ?></label>
</div>
<?php } ?>
<div class="select_package_validity">
<h5 class="h5-responsive font-weight-bold">1. Select your package validity.</h5>
<input type="radio" class="custom-control-input plan_name" id="daily" name="plan_name_selector" value="Daily">
<input type="radio" class="custom-control-input plan_name" id="weekly" name="plan_name_selector" value="Weekly">
<input type="radio" class="custom-control-input plan_name" id="monthly" name="plan_name_selector" value="Monthly">
<input type="hidden" name="plan_name" class="form-control ml-4 mt-2 w-50 selected_plan_name" />
</div>
<div class="select_days mt-4">
<h5 class="h5-responsive font-weight-bold q2_text">2. How many days you need service in a week?</h5>
<input type="radio" class="custom-control-input plan_days" id="5" name="plan_days_selector" value="5">
<input type="radio" class="custom-control-input plan_days" id="6" name="plan_days_selector" value="6">
<input type="radio" class="custom-control-input plan_days" id="7" name="plan_days_selector" value="7">
<input type="hidden" name="plan_days" class="form-control ml-4 mt-2 w-50 selected_plan_days" />
</div>
<div class="days_names mt-4">
<h5 class="h5-responsive font-weight-bold q3_text mb-2">3. Select the days.</h5>
<input type="checkbox" class="custom-control-input" id="monday" name="day_name_selector" value="Monday">
<input type="checkbox" class="custom-control-input" id="tuesday" name="day_name_selector" value="Tuesday">
<input type="checkbox" class="custom-control-input" id="wednesday" name="day_name_selector" value="Wednesday">
<input type="checkbox" class="custom-control-input" id="thursday" name="day_name_selector" value="Thursday">
<input type="checkbox" class="custom-control-input" id="friday" name="day_name_selector" value="Friday">
<input type="checkbox" class="custom-control-input" id="saturday" name="day_name_selector" value="Saturday">
<input type="checkbox" class="custom-control-input" id="sunday" name="day_name_selector" value="Sunday">
</div>
<input type="hidden" class="form-control selected_days_names" name="days_names" />
</div>
<div class="food_time">
<h5 class="h5-responsive font-weight-bold">4. Select your food time</h5>
<input type="checkbox" class="custom-control-input" id="breakfast" name="food_time_selector" value="Breakfast">
<input type="checkbox" class="custom-control-input" id="lunch" name="food_time_selector" value="Lunch">
<input type="checkbox" class="custom-control-input" id="dinner" name="food_time_selector" value="Dinner">
<input type="hidden" class="form-control selected_food_time" name="food_time" />
</div>
<div class="plan_date_time">
<h5 class="h5-responsive font-weight-bold">5. When you want to start your package?</h5>
<input type="text" class="form-control startsfromdatetime" name="starts_from" placeholder="Select date..." />
</div>
那么，您能告诉我如何根据选择的 daily/weekly/monthly 和 lunch/dinner/breakfast 显示价格吗？
应该用 jQuery 还是 PHP 来完成？
请帮我解决这个问题。
您需要在此处组合使用 PHP 和 Javascript。 PHP 后端需要以对象的形式从您的数据库中获取数据，然后 Javascript 如果选择了一个选项，则用于在您的页面上显示价格。
请注意，您需要进行 ajax 调用才能将对象从 PHP 获取到 Javascript，对于现代浏览器可以使用 XHR, jQuery.ajax() or Fetch API 来完成。
这是一个如何完成的示例：
var validityButtons = document.getElementsByName('validity');
var foodTimeButtons = document.getElementsByName('foodtime');
var prices = {
breakfast: {
daily: 120,
weekly: 110,
monthly: 100
},
lunch: {
daily: 150,
weekly: 130,
monthly: 120
},
dinner: {
daily: 150,
weekly: 130,
monthly: 120
},
};
function calculatePrice() {
var price = 0;
var currentOption;
var showPrice = document.getElementById('price');
/* Iterate through radio buttons to get the checked one */
validityButtons.forEach(function(button) {
if (button.checked === true) {
currentOption = button.value;
}
});
/* Iterate through checkboxes to calculate price depending on selected options */
foodTimeButtons.forEach(function(button) {
if (button.checked) {
switch(button.value) {
case 'breakfast':
price += prices.breakfast[currentOption];
break;
case 'lunch':
price += prices.lunch[currentOption];
break;
case 'dinner':
price += prices.dinner[currentOption];
break;
default:
break;
}
}
});
/* Show price */
showPrice.innerText = price;
}
/* Fire a function when radio button gets clicked */
validityButtons.forEach(function(button) {
button.addEventListener('change', calculatePrice);
});
/* Fire a function when checkboxes are clicked */
foodTimeButtons.forEach(function(button) {
button.addEventListener('change', calculatePrice);
});
/* Calculate the price based on selected options on page load */
calculatePrice();
Select your package validity:
<label>
<input type="radio" name="validity" value="daily" checked> Daily
</label>
<label>
<input type="radio" name="validity" value="weekly"> Weekly
</label>
<label>
<input type="radio" name="validity" value="monthly"> Monthly
</label>
<br><br>
Select your food time:
<label>
<input type="checkbox" name="foodtime" value="breakfast" checked> Breakfast
</label>
<label>
<input type="checkbox" name="foodtime" value="lunch"> Lunch
</label>
<label>
<input type="checkbox" name="foodtime" value="dinner"> Dinner
</label>
<br><br>
Your price: <strong id="price"></strong>
我正在为我工作的公司创建食品配送电子商务网站。
这不是简单的电子商务网站，我正在使用 PHP OOP 自定义创建它。就像包裹一样，充满了可定制性，而不是固定的。
这是图表：
Food Plan 1是我们在管理面板中创建的套餐名称，weekly, daily, monthly 是可自定义的选项，您可以看到每个选项的价格都有不同的价格。所以就是这个概念。
现在，当用户单击 choose package 按钮时，将出现问题表单，表单如下：
我希望我的价格（我已存储在数据库中）仅在用户单击 daily 并在下方单击 lunch/breakfast/dinner 时显示，然后 lunch/breakfast/dinner 的价格仅适用于 daily选项。与单击 weekly 和 monthly 相同。
数据库截图如下：
这里，d 代表 daily，w 代表 weekly，m 代表 monthly。
这是我的代码：
<?php
$getPlanById = $plan->getPlanById($proId);
if($getPlanById){
$result = $getPlanById->fetch_assoc();
$m_breakfast_price = $result['m_breakfast_price'];
$m_lunch_price = $result['m_lunch_price'];
$m_dinner_price = $result['m_dinner_price'];
$w_breakfast_price = $result['w_breakfast_price'];
$w_lunch_price = $result['w_lunch_price'];
$w_dinner_price = $result['w_dinner_price'];
$d_breakfast_pric = $result['d_breakfast_price'];
$d_lunch_price = $result['d_lunch_price'];
$d_dinner_price = $result['d_dinner_price'];
?>
<div class="col-md-6 offset-md-3">
<h2 class="h2-responsive font-weight-bold mt-5 mb-0">You've choosed <span class="text-primary border-bottom border-primary"><?php echo $result['pro_name']; ?></span> package.</h2>
<label>Rs./<?php echo $result['m_breakfast_price']; ?></label>
</div>
<?php } ?>
<div class="select_package_validity">
<h5 class="h5-responsive font-weight-bold">1. Select your package validity.</h5>
<input type="radio" class="custom-control-input plan_name" id="daily" name="plan_name_selector" value="Daily">
<input type="radio" class="custom-control-input plan_name" id="weekly" name="plan_name_selector" value="Weekly">
<input type="radio" class="custom-control-input plan_name" id="monthly" name="plan_name_selector" value="Monthly">
<input type="hidden" name="plan_name" class="form-control ml-4 mt-2 w-50 selected_plan_name" />
</div>
<div class="select_days mt-4">
<h5 class="h5-responsive font-weight-bold q2_text">2. How many days you need service in a week?</h5>
<input type="radio" class="custom-control-input plan_days" id="5" name="plan_days_selector" value="5">
<input type="radio" class="custom-control-input plan_days" id="6" name="plan_days_selector" value="6">
<input type="radio" class="custom-control-input plan_days" id="7" name="plan_days_selector" value="7">
<input type="hidden" name="plan_days" class="form-control ml-4 mt-2 w-50 selected_plan_days" />
</div>
<div class="days_names mt-4">
<h5 class="h5-responsive font-weight-bold q3_text mb-2">3. Select the days.</h5>
<input type="checkbox" class="custom-control-input" id="monday" name="day_name_selector" value="Monday">
<input type="checkbox" class="custom-control-input" id="tuesday" name="day_name_selector" value="Tuesday">
<input type="checkbox" class="custom-control-input" id="wednesday" name="day_name_selector" value="Wednesday">
<input type="checkbox" class="custom-control-input" id="thursday" name="day_name_selector" value="Thursday">
<input type="checkbox" class="custom-control-input" id="friday" name="day_name_selector" value="Friday">
<input type="checkbox" class="custom-control-input" id="saturday" name="day_name_selector" value="Saturday">
<input type="checkbox" class="custom-control-input" id="sunday" name="day_name_selector" value="Sunday">
</div>
<input type="hidden" class="form-control selected_days_names" name="days_names" />
</div>
<div class="food_time">
<h5 class="h5-responsive font-weight-bold">4. Select your food time</h5>
<input type="checkbox" class="custom-control-input" id="breakfast" name="food_time_selector" value="Breakfast">
<input type="checkbox" class="custom-control-input" id="lunch" name="food_time_selector" value="Lunch">
<input type="checkbox" class="custom-control-input" id="dinner" name="food_time_selector" value="Dinner">
<input type="hidden" class="form-control selected_food_time" name="food_time" />
</div>
<div class="plan_date_time">
<h5 class="h5-responsive font-weight-bold">5. When you want to start your package?</h5>
<input type="text" class="form-control startsfromdatetime" name="starts_from" placeholder="Select date..." />
</div>
那么，您能告诉我如何根据选择的 daily/weekly/monthly 和 lunch/dinner/breakfast 显示价格吗？
应该用 jQuery 还是 PHP 来完成？
请帮我解决这个问题。
您需要在此处组合使用 PHP 和 Javascript。 PHP 后端需要以对象的形式从您的数据库中获取数据，然后 Javascript 如果选择了一个选项，则用于在您的页面上显示价格。
请注意，您需要进行 ajax 调用才能将对象从 PHP 获取到 Javascript，对于现代浏览器可以使用 XHR, jQuery.ajax() or Fetch API 来完成。
这是一个如何完成的示例：
var validityButtons = document.getElementsByName('validity');
var foodTimeButtons = document.getElementsByName('foodtime');
var prices = {
breakfast: {
daily: 120,
weekly: 110,
monthly: 100
},
lunch: {
daily: 150,
weekly: 130,
monthly: 120
},
dinner: {
daily: 150,
weekly: 130,
monthly: 120
},
};
function calculatePrice() {
var price = 0;
var currentOption;
var showPrice = document.getElementById('price');
/* Iterate through radio buttons to get the checked one */
validityButtons.forEach(function(button) {
if (button.checked === true) {
currentOption = button.value;
}
});
/* Iterate through checkboxes to calculate price depending on selected options */
foodTimeButtons.forEach(function(button) {
if (button.checked) {
switch(button.value) {
case 'breakfast':
price += prices.breakfast[currentOption];
break;
case 'lunch':
price += prices.lunch[currentOption];
break;
case 'dinner':
price += prices.dinner[currentOption];
break;
default:
break;
}
}
});
/* Show price */
showPrice.innerText = price;
}
/* Fire a function when radio button gets clicked */
validityButtons.forEach(function(button) {
button.addEventListener('change', calculatePrice);
});
/* Fire a function when checkboxes are clicked */
foodTimeButtons.forEach(function(button) {
button.addEventListener('change', calculatePrice);
});
/* Calculate the price based on selected options on page load */
calculatePrice();
Select your package validity:
<label>
<input type="radio" name="validity" value="daily" checked> Daily
</label>
<label>
<input type="radio" name="validity" value="weekly"> Weekly
</label>
<label>
<input type="radio" name="validity" value="monthly"> Monthly
</label>
<br><br>
Select your food time:
<label>
<input type="checkbox" name="foodtime" value="breakfast" checked> Breakfast
</label>
<label>
<input type="checkbox" name="foodtime" value="lunch"> Lunch
</label>
<label>
<input type="checkbox" name="foodtime" value="dinner"> Dinner
</label>
<br><br>
Your price: <strong id="price"></strong>