Question

我正在使用OpenCart 2.2运行隐形眼镜的在线商店。

我需要通过以下方式稍微修改产品页面：
当您购买隐形眼镜时，您有2个下拉列表，您可以在其中选择每只眼睛的屈光度（功率）。我想要做的是，如果你只选择一只眼睛的电源，购买产品的最小数量为1，但如果选择双眼，最小数量应为2.

所以我想到了if-else-elseif函数，因为只有3个案例可能 - 1 - 只选择了左眼; 2 - 选择双眼; 3 - 仅选择右眼。 This is how the product page looks now。
默认情况下，Qty = 1，但如果在两个下拉列表中都选择了某些内容，我想立即切换到2。

我想我需要一些AJAX才能做到这一点？我对AJAX知之甚少我 DON＆＃39; 希望有人为我做这件事，我只是想找出实现这一目标所需要的东西..

真正的蠢事和让我迷失的是选择选项被命名为＆＃34;选项[XXX]＆＃34;默认情况下来自OpenCart，商店和每个选项上的每个产品的数量（[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>

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

此代码还需要考虑其他一些事项：

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

此外，OpenCart对每个选项使用option_id和product_option_id，option_id是相同的ID，无论您使用的是什么产品。可能值得将其添加到选择HTML中，这样您就可以像查看标签的文本值一样更有效地查找元素。

OpenCart 2.2：如果选择了选项，则立即更改数量

1 个答案: