每日，每周，每月套餐的价格选项 [英] Price options for daily, weekly, monthly package
问题描述
我正在为我工作的公司创建一个用于食品配送的电子商务网站.
这不是一个简单的电子商务网站，我正在用PHP OOP自定义它.就像包一样，充满了可定制的内容，而不是固定的.
以下是该图:
食物计划1 是我们在管理面板中创建的套餐名称，每周，每天，每月都是可自定义的选项，您可以看到的每个选项的价格都有不同的价格.这就是概念.
现在，当用户单击choose package按钮时，将出现问题表单，这是表单:
我希望我的价格(我已经存储在数据库中的价格)仅在用户单击daily时显示，而在下面单击午餐/早餐/晚餐"，然后仅lunch/breakfast/dinner的价格用于daily选项.和单击weekly和monthly相同.
这是数据库屏幕截图:
在这里，d表示daily，w表示weekly，m表示monthly.
这是我的代码:
I am creating e-commerce website for food delivery for the company where i am working for.
It's not simple e-commerce website and i am creating it custom with PHP OOP. It's like packages, full of customizeable, not fixed.
Here is the graph:
Food Plan 1 is package name which we are creating in admin panel, weekly, daily, monthly is customizeable option, and the prices you can see every option has different price. So this is the concept.
Now, when user click on choose package button then questions form will appear, Here is the form:
I want that my prices (which i have stored in database) will appear only when user click on daily and below click on lunch/breakfast/dinner then the prices of lunch/breakfast/dinner only for daily option. and same with clicking on weekly and monthly.
Here is the database screenshot:
Here, d is for daily, w is for weekly and m is for monthly.
Here is my code:
<?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完成?
请帮助我.
So, Can you please tell me how can I display prices according to selected daily/weekly/monthly with lunch/dinner/breakfast?
Should it be done with jQuery or PHP?
Please help me with this.
推荐答案
您需要在此处使用PHP和Javascript的组合.后端需要PHP才能以对象的形式从数据库中获取数据，然后如果选择了某个选项，则Javascript会使用PHP在页面上显示价格.
You'll need to use a combination of PHP and Javascript here. PHP is needed for the backend to get the data from your database in form of an object which then Javascript uses to show the prices on your page if an option is selected.
请注意，您需要进行ajax调用，才能将对象从PHP转换为Javascript，这可以使用 jQuery.ajax()或获取API 用于现代浏览器.
Note that you'll need to make an ajax call to get your object from PHP to Javascript which can be done using XHR, jQuery.ajax() or Fetch API for modern browsers.
下面是一个示例:
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>
这篇关于每日，每周，每月套餐的价格选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
