Блог

Главная - Вопросы по программированию - Как создать калькулятор измерения цены продукта электронной коммерции с использованием JavaScript?

Как создать калькулятор измерения цены продукта электронной коммерции с использованием JavaScript?

#javascript #arrays #e-commerce #price

#javascript #массивы #электронная коммерция #Цена

Вопрос:

Этот формат кода я нашел из одного ответа, и это выгодно. Но мне нужны некоторые модификации здесь. Я новичок в javascript, и я хочу добавить сюда некоторый диапазон количеств. Я хочу разные цены при увеличении количества. Здесь вы можете увидеть разные «размеры» и разную «сторону и цвет». Например: если обычная цена составляет 38,4 доллара за 1 количество, то, когда количество составляет от 10 до 24, я хочу, чтобы общая стоимость рассчитывалась как цена в размере 9,71 доллара за количество. Как это можно сделать? Спасибо

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <h2>Build Your Bodycare</h2>
  <form action="insertlabel.php" id="privtelabel" method="POST">
        Size:
        <select name='product' id='product' required>
          <option value="18X24">18"X24"</option>
          <option value="12X18">12"X18"</option>
          <option value="12X24">12"X24"</option>
          <option value="16X24">16"X24"</option>
          <option value="24X24">24"X24"</option>
          <option value="24X32">24"X32"</option>
          <option value="24X36">24"X36"</option>
          <option value="24X48">24"X48"</option>
        </select>
    
        <br><br> Quantity: <input type="text" name="quantity" id='quantity' required> 
        <br><br>Side amp; Color:
        <select name='size' id='size' required>
          <option value="1-Side 1-Color">1-Side 1-Color</option>
          <option value="1-Side 2-Color">1-Side 2-Color</option>
          <option value="2-Side 1-Color">2-Side 1-Color</option>
          <option value="2-Side 2-Color">2-Side 2-Color</option>
          <option value="1-Side Full-Color">1-Side Full-Color</option>
          <option value="1-Side Full-Color">1-Side Full-Color</option>
        </select>
        
        <p>(Sizes are only for soaps.)</p>
        Price: <span id="totalCost"></span>

    </form>

    <script>
        //Store some references to our DOM elements
        var productEl = document.querySelector('#product');
        var quantityEl = document.querySelector('#quantity');
        var sizeEl = document.querySelector('#size');
        var totalCostEl = document.querySelector('#totalCost');

        //Add the change event handlers on the applicable elements
        productEl.addEventListener('change', calculateTotal);
        quantityEl.addEventListener('change', calculateTotal);
        sizeEl.addEventListener('change', calculateTotal);

        //Store your data in an object literal (essentially creating a map)
        var product_price = {}; //Noticed I replaced the [] with {}
        product_price['18X24'] = 5;
        product_price['12X18'] = 6;
        product_price['12X24'] = 6;
        product_price['16X24'] = 7;
        product_price['24X24'] = 8;
        product_price['24X32'] = 8;
        product_price['24X36'] = 10;
        product_price['24X48'] = 15;

        var size_price = {};   //Noticed I replaced the [] with {}
        size_price['1-Side 1-Color'] = 0;
        size_price['1-Side 2-Color'] = 2;
        size_price['2-Side 1-Color'] = 3;
        size_price['2-Side 2-Color'] = 5;
        size_price['1-Side Full-Color'] = 5;
        size_price['2-Side Full-Color'] = 5;


        //Here's our single event handler - called when any of the 3 elements fire a 'change' event
        function calculateTotal() {
        //console.log()
        var unitCost = product_price[productEl.value];
        var additionalCost = size_price[sizeEl.value] || 0;
        var qty = quantityEl.value || 0;

        totalCostEl.textContent = `Total cost: $${(unitCost * qty)   additionalCost}`;
        }
    </script>
   
</body>
</html>

Комментарии:

1. Не совсем ясно, чего вы хотите, но я думаю, вы хотите, чтобы цена за товар зависела от количества. Есть несколько способов сделать это. Одинакова ли скидка на все товары? Вы могли бы использовать некоторые инструкции if else, но, возможно, лучше использовать инструкцию switch.

2. Позвольте мне прояснить это для вас, я хочу указать диапазон цен в зависимости от количества, например, если кто-то выберет количество от 10 до 24, будет взиматься плата в размере 5 долларов за каждое количество, но обычная цена составляет 38,4 доллара. Эти 5 долларов за каждое количество будут применимы только в том случае, если кто-то выберет количество от 10 до 24. Я выберу такой ценовой диапазон до 1000. 10-24, 25-49,50-99, 100-249, 250-499, 500-999. Для каждого диапазона количества здесь цена за количество будет разной. Точно так же, как я упоминал для количества 10-24. Спасибо.

3. Ну ладно. Но если эта плата одинакова для всех продуктов, а количество обращений (количество варьируется от 10 до 24) ограничено, то это очень легко выполнить с помощью инструкции switch в вашей функции calculateTotal.

4. Нет, плата не та. Плата будет другой. Я собираюсь взимать 9,71 доллара за количество от 10 до 24, 7,71 доллара за количество от 25 до 49 и так далее. За каждое переданное количество будет взиматься разная плата.

5. Ок, это не то, что я имел в виду. Я понимаю, вы хотите устанавливать разные цены за разные диапазоны количества. Но отличаются ли сборы для количественных показателей для разных продуктов. Итак, взимается плата в размере 9,71 долларов США за 10-24 для продукта X также в размере 9,71 долларов США за 10-24 для продукта Y?

Ответ №1:

Я немного изменил свое решение. Вместо, например, {0-10: 6, 10-24: 7} я превратил его в {9 : 6, 24 : 7 } . Таким образом, я могу проверить количество. Я добавил оператор if else, но его легко превратить в оператор switch для всех различных диапазонов. Я только что добавил первые два диапазона.

 //Store some references to our DOM elements
var productEl = document.querySelector('#product');
var quantityEl = document.querySelector('#quantity');
var sizeEl = document.querySelector('#size');
var totalCostEl = document.querySelector('#totalCost');

//Add the change event handlers on the applicable elements
productEl.addEventListener('change', calculateTotal);
quantityEl.addEventListener('change', calculateTotal);
sizeEl.addEventListener('change', calculateTotal);

//Store your data in an object literal (essentially creating a map)
var product_price = {}; //Noticed I replaced the [] with {}
product_price['18X24'] = {
  9: 5,
  24: 6
};
product_price['12X18'] = {
  9: 6,
  24: 8.24
};
product_price['12X24'] = {
  9: 6,
  24: 7.45
};
product_price['16X24'] = {
  9: 7,
  24: 8.14
};
product_price['24X24'] = {
  9: 8,
  24: 9.24
};
product_price['24X32'] = {
  9: 8,
  24: 10.99
};
product_price['24X36'] = {
  9: 10,
  24: 11.99
};
product_price['24X48'] = {
  9: 15,
  24: 17.00
};

var size_price = {}; //Noticed I replaced the [] with {}
size_price['1-Side 1-Color'] = 0;
size_price['1-Side 2-Color'] = 2;
size_price['2-Side 1-Color'] = 3;
size_price['2-Side 2-Color'] = 5;
size_price['1-Side Full-Color'] = 5;
size_price['2-Side Full-Color'] = 5;


//Here's our single event handler - called when any of the 3 elements fire a 'change' event
function calculateTotal() {
  //console.log()


  var additionalCost = size_price[sizeEl.value] || 0;
  var qty = quantityEl.value || 0;

  var price;

  if (qty < 10) {
    price = product_price[productEl.value][9]
  } else if (qty >= 10) {
    price = product_price[productEl.value][24]
  }

  totalCostEl.textContent = `Total cost: $${(price * qty)   additionalCost}`;
}  
 <h2>Build Your Bodycare</h2>
<form action="insertlabel.php" id="privtelabel" method="POST">
  Size:
  <select name='product' id='product' required>
    <option value="18X24">18"X24"</option>
    <option value="12X18">12"X18"</option>
    <option value="12X24">12"X24"</option>
    <option value="16X24">16"X24"</option>
    <option value="24X24">24"X24"</option>
    <option value="24X32">24"X32"</option>
    <option value="24X36">24"X36"</option>
    <option value="24X48">24"X48"</option>
  </select>

  <br><br> Quantity: <input type="text" name="quantity" id='quantity' required>
  <br><br>Side amp; Color:
  <select name='size' id='size' required>
    <option value="1-Side 1-Color">1-Side 1-Color</option>
    <option value="1-Side 2-Color">1-Side 2-Color</option>
    <option value="2-Side 1-Color">2-Side 1-Color</option>
    <option value="2-Side 2-Color">2-Side 2-Color</option>
    <option value="1-Side Full-Color">1-Side Full-Color</option>
    <option value="1-Side Full-Color">1-Side Full-Color</option>
  </select>

  <p>(Sizes are only for soaps.)</p>
  Price: <span id="totalCost"></span>

</form>