Price Options For Daily, Weekly, Monthly Package

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 pa

Solution 1:

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.

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.

Here's an example of how it's done:

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
  },
};

functioncalculatePrice() {
  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><inputtype="radio"name="validity"value="daily"checked> Daily
</label><label><inputtype="radio"name="validity"value="weekly"> Weekly
</label><label><inputtype="radio"name="validity"value="monthly"> Monthly
</label><br><br>
Select your food time:
<label><inputtype="checkbox"name="foodtime"value="breakfast"checked> Breakfast
</label><label><inputtype="checkbox"name="foodtime"value="lunch"> Lunch
</label><label><inputtype="checkbox"name="foodtime"value="dinner"> Dinner
</label><br><br>
Your price: <strongid="price"></strong>