javascript - OpenCart 2.2 : Instantly change the quantity if option is selected

Question

我正在使用 OpenCart 2.2 运营一家隐形眼镜在线商店。

我需要按以下方式稍微修改产品页面:
当您购买隐形眼镜时，您有 2 个下拉列表，您可以在其中选择每只眼睛的屈光度(度数)。我想做的是，如果您选择仅一只眼开机，则该产品的最低购买数量为1，但如果选择双眼开机，则该产品的最低购买数量应为2。

所以我正在考虑 if-else-elseif 函数，因为只有 3 种可能的情况 - 1 - 仅选择左眼； 2 - 选择双眼； 3 - 仅选择右眼。 This is how the product page looks now .
默认情况下数量 = 1，但如果在两个下拉列表中都选择了某些内容，我希望将其立即切换到 2。

我想我需要一些 AJAX 来做到这一点？我对 AJAX 的了解非常少。
我不期望有人为我做这件事，我只是想找出我需要什么来实现它。

真正的问题和让我迷失的是，OpenCart 默认情况下选择的选项被命名为“选项[XXX]”，并且商店中的每个产品和每个选项的数字([xxx])都不同..

如果可能的话，有人可以给我任何线索吗？

编辑:
以下是我显示选择标签的方式:

<div id="product">
    <?php if ($option['type'] == 'select') { ?>
        <div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
             <label class="control-label" for="input-option<?php echo $option['product_option_id']; ?>"><?php echo $option['name']; ?></label>
             <select name="option[<?php echo $option['product_option_id']; ?>]" id="input-option<?php echo $option['product_option_id']; ?>" class="form-control">
                 <option value=""><?php echo $text_select; ?></option>
                 <?php foreach ($option['product_option_value'] as $option_value) { ?>
                     <option value="<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
                     <?php if ($option_value['price']) { ?>
                         (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                     <?php } ?>
                 </option>
                 <?php } ?>
            </select>
        </div>
    <!-- ... -->
    <?php } ?>
<!-- ... -->
</div>

谢谢各位的解答!以下也是数量 HTML 代码:

<div class="form-group">
  <label class="control-label" for="input-quantity"><?php echo $entry_qty; ?></label>
  <input type="text" name="quantity" value="<?php echo $minimum; ?>" size="2" id="input-quantity" class="form-control" />
  <input type="hidden" name="product_id" value="<?php echo $product_id; ?>" />
  <br />
  <button type="button" id="button-cart" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-primary btn-lg btn-block"><?php echo $button_cart; ?></button>
</div>

Answer 1

我认为没有任何理由为此使用 AJAX，只需使用 jQuery/JavaScript 即可完成:

(function($) {
  'use strict';
  $(document).on('ready', function() {
    var optionNames = ['power - right eye', 'power - left eye'];

    var $qtyInput = $('#product input[name=qty]');

    var $options = $('#product select').filter(function() {
      var text = $.trim($(this).prev('label').text().toLocaleLowerCase());

      return $.inArray(text, optionNames) > -1;
    });

    $options.on('change', function() {
      var selectedTotal = $options.filter(function() {
        return !!$(this).val();
      }).length;

      if (selectedTotal > 0) {
        $qtyInput.val(selectedTotal).prop('min', selectedTotal);
      }

    });
  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="product">
    <div class="form-group required">
      <label class="control-label" for="input-option1">power - left eye</label>
      <select name="option[1]" id="input-option1" class="form-control">
        <option value="">-- Please Select --</option>
        <option value="1">First</option>
      </select>
    </div>
    <div class="form-group required">
      <label class="control-label" for="input-option2">power - right eye</label>
      <select name="option[2]" id="input-option2" class="form-control">
        <option value="">-- Please Select --</option>
        <option value="1">First</option>
      </select>
    </div>
    <div class="form-group">
      <input type="number" name="qty" value="1" min="1" required />
    </div>
  </div>
</div>

您可能需要更改选择器以匹配您所拥有的选择器，因为您没有向我们显示您的数量输入字段。

使用此代码需要考虑的其他一些事项:

数量始终设置为 2 或 1，无论用户是否已输入 6。您可能需要添加逻辑来阻止这种情况发生。

此外，OpenCart 为每个选项使用 option_id 和 product_option_id，无论什么产品，option_id 都是相同的 ID轮到你了。可能值得将其添加到选择的 HTML 中，这样您就可以比像我所做的那样检查标签的文本值更有效地查找元素。