@lagudal

Как сделать, чтобы при добавлению в корзину qty бралось из инпута а не из селекта, если инпут изменен вручную?

Буквально на днях помогли со скриптом, суть:
При изменении кол-ва товара может меняться цена - ну как обычно, купи 3 за ... 10 за ... 100 за и тд и тп.
Скрипт добавляет дропдаун, в котором сразу выбирается кол-во и цена.
Но понятно, что с дропдауном можно выбрать только какое-то конкретное кол-во, от которого начинается новая цена, и нельзя выбрать промежуточное. Логично, что покупатель может захотеть выбрать любое значение, и для этого остается ввести это значение в стандартный инпут.
Вот тут и проблема: если на странице добавлен данный дропдаун, то при добавлении в корзину кол-во всегда берется из него, даже если вводишь в инпут ручками, все равно берется из селекта. Если значение селекта не выбрано, то будет добавляться в корзину всегда 1 шт, неважно, сколько ввел в инпут. Если выбрал другое значение селекта, а потом ввел вручную, в корзину добавляется последнее значение селекта.
Как это исправить, как сделать чтобы добавлялось в корзину то значение, которое находится в инпуте?
Код php

<?php
    $allTiers = $_product->getTierPrice();
    $checktiers = array_filter($allTiers);
    ?>

<?php if (!empty($checktiers)): ?>
          <select name="qty" id="qty" class="qty customizer__qty validation-passed"  data-validate="<?= $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>">
          </select>
          <?php else: ?>
          <input type="number" name="qty" id="qty" value="<?= /* @escapeNotVerified */ $block->getProductDefaultQty() * 1 ?>"
          title="<?= /* @escapeNotVerified */ __('Qty') ?>" class="input-text qty" data-validate="<?= $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>" /> 
    <?php endif; ?>


javascript

<script> require(['jquery', 'Magento_Catalog/js/price-utils'], function ($, priceUtils) {
    'use strict';
    var tierPrices = <?php echo json_encode($allTiers) ?>;
    var createDropdown = function () {
        jQuery("select#qty").append("<option value=''>Выберите кол-во товаров...</option>")
        for (var i = 0; i < tierPrices.length; i++) {
            var obj = tierPrices[i];
            jQuery("select#qty").append("<option value='" + Number(obj.price_qty) + "'>Buy " + Number(obj.price_qty) + " For " + priceUtils.formatPrice(obj.price) + " each</option>")
        }
    };
    var getPrice = function (qty) {
        qty = Number(qty);
        var i = tierPrices.length;
        while (i--) {
            if (qty >= tierPrices[i]['price_qty']) {
                return tierPrices[i]['price'];
            }
        }
        return null;
    };
    var updatePrice = function (price) {
        var newPrice = priceUtils.formatPrice(price);
        jQuery('.price-final_price .price').html(newPrice);
    };
    var updatePriceHtml = function (amount) {
        var price = getPrice(amount);
        if (price !== null) {
            updatePrice(price);
        }
    };
    jQuery('select#qty').change(function () {
        if (tierPrices.length > 0) {
            updatePriceHtml(this.value);
        }
    });
    setTimeout(function () {
        if (tierPrices.length > 0) {
            createDropdown();
            updatePriceHtml(jQuery('select#qty').val());
        }
    }, 700);
});
</script>
  • Вопрос задан
  • 57 просмотров
Решения вопроса 1
@lagudal Автор вопроса
Вопрос решен. В phtml шаблоне поменял расположение инпута и селекта, и все заработало.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы