Как при помощи js создать поле дополнительных ингридиентов?

Question

[programmistka]

Всем привет,был уже аналогичный вопрос от меня же,но не разобралась в плагинах от woocommerce,мне кажется что лучше чуть больше по времени посидеть и сделать все ручками,подскажите в каком направлении двигаться?
Есть готовый интернет магазин на WORDPRESS с кастомной темой,есть карточки товара,есть кнопка заказать,при помощи которой данные отправляются в форму,и далее на почтовый ящик.Нужно добавить в карточку товара дополнительные ингридиенты в виде чекбоксов,при выборе которых будет увеличиваться цена,и выбранные данные вместе с товаром будут отправляться в форму заказа.

Comments

[Refguser]

Если с готовыми плагинами не разобралась, то как ты собираешься написать свой? Нонсенс.

[alexalexes]

Лучше наймите человека, кто съел собаку на wordpress/woocommerce и его плагинах.
Если вы самостоятельно не раскопали проблему до глубины конкретных компонентов/шаблонов/скриптов плагина, которые отвечают за форму заказа, не только на клиентской стороне, но и на серверной (не описали глубокие технические детали реализации конкретно вашей формы заказа), то вы не решите задачу, при любой вариативности полей формы.

[Anton]

Причем тут js? Тут комплексный подход нужен... только js не обойтись...

Начать можно с изучения плагинов наподобие этого: https://wordpress.org/plugins/woo-variation-swatches/

Скачивай и изучай его код на js если у тебя woo только как админка а весь магазин на react например

[programmistka]

Anton, сайт html+css+js+php без каких либо фреймворков,комплексный подход в каком плане?,нужно только добавить поле доп ингридиентов чтобы менялась цена товара и все.

[Anton]

programmistka, Комплексный в плане woo.

сайт html+css+js+php без каких либо фреймворков это уйма работы... на словах всегда все просто )

[programmistka]

Anton, нашлось решение

<ul>
  <li>
    <label>
      <input type="checkbox" class="price" data-price="50">
      Опция 1 - 50₽
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" class="price" data-price="50">
      Опция 2 - 50₽
    </label>
  </li>
</ul>
<p>
  Итого: <span id="total">200</span>₽
</p>

но так как у меня цена динамичная и подгружается прямиком из wordpress то данный вариант не совсем подходит

[Anton]

programmistka, ага супер решение )) и как это в заказе будет отражатся? а если скидка, купон, налог... Речь походу только о фронтенде... ничего не понятно как этот HTML может помочь.

[programmistka]

Anton, да речь идет только о фронте,никаких скидок не предусматривается,никаких налогов и купонов,а работать он будет примерно так

document.querySelector('ul').addEventListener(
  'change',
  (e) => {
    const sum = [...document.querySelectorAll('.price')]
      .reduce(
        (acc, el) => acc + (el.checked ? +el.dataset.price : 0),
        0,
      );
    document.querySelector('#total').innerText = sum;
  }
)