如何为每个选项逐个添加产品到购物车?

时间:2017-09-09 19:42:40

标签: php jquery forms opencart

我花了几个小时尝试了很多东西,但是没有用。 我正在修改OpenCart 3的Add to basket,如下图所示:

enter image description here

当前结果:

enter image description here

预期结果:
我想在购物车中的每一行都有产品 - 选项1 - 选项2。

enter image description here

我想逐个添加每个选项及其相关产品,而不是一次添加一个产品及其所有选项。要做到这一点,我有这些代码:

这是我的复选框的未呈现代码:

<div class="checkbox">
    <label>
        <input type="checkbox" 
                     data-input-group="chart-group-{{ option.product_option_id }}-{{ option_value.product_option_value_id }}" 
                     id="option-{{ option.product_option_id }}-{{ option_value.product_option_value_id }}" 
                     name="option[{{ option.product_option_id }}][]" 
                     value="{{ option_value.product_option_value_id }}" 
                     class="chart-group" />
        {% if option_value.image %} <img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" class="img-thumbnail" /> {% endif %}                  
        {{ option_value.name }}
    </label>
</div>

呈现JS和HTML:

&#13;
&#13;
$('#button-cart').on('click', function() {
    $(".chart-group:input:checked").each(function () {
      group_id = $(this).data('input-group');
        $('#input-quantity').val(
            $('input[name=quantity][data-input-group=' + group_id + ']').val()
        );
        
        $.ajax({
            url: 'index.php?route=checkout/cart/add',
            type: 'post',
            data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product textarea')
        });
    });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<div class="form-group required ">
		<div id="input-option229">
			<input type="hidden" name="product_id" value="53">
			<table>
				<tr>
					<td><div class="checkbox">
							<label>
								<input type="checkbox" data-input-group="chart-group-229-26" id="option-229-26" name="option[229][]" value="26" class="chart-group">
								70B </label>
						</div></td>
					<td><input type="text" data-input-group="chart-group-229-26" name="quantity" value="0" size="2" id="input-quantity-229-26" class="qty text-center"></td>
				</tr>
				<tr>
					<td><div class="checkbox">
							<label>
								<input type="checkbox" data-input-group="chart-group-229-27" id="option-229-27" name="option[229][]" value="27" class="chart-group">
								75B </label>
						</div></td>
					<td><input type="text" data-input-group="chart-group-229-27" name="quantity" value="0" size="2" id="input-quantity-229-27" class="qty text-center"></td>
				</tr>
				<tr>
					<td><div class="checkbox">
							<label>
								<input type="checkbox" data-input-group="chart-group-229-28" id="option-229-28" name="option[229][]" value="28" class="chart-group">
								80B </label>
						</div></td>
					<td><input type="text" data-input-group="chart-group-229-28" name="quantity" value="0" size="2" id="input-quantity-229-28" class="qty text-center"></td>
				</tr>
			</table>
			<button type="button" id="button-cart" data-loading-text="Loading..." class="button-cart btn btn-primary btn-sm btn-block"><i class="fa fa-cart-plus" aria-hidden="true"></i> Add to Cart</button>
			<input type="hidden" name="quantity" id="input-quantity" value="0">
		</div>
	</div>
&#13;
&#13;
&#13;

非常感谢任何帮助!

1 个答案:

答案 0 :(得分:0)

固定!

$('#button-cart').on('click', function() {

  $(".iqty:input:text").each(function () {
    $('.chart-group:input:checkbox').prop("checked", false);

    if ($(this).val() > 0) {
        group_id = $(this).data('input-group');
        $('input[type=checkbox][data-input-group=' + group_id + ']').prop("checked", true);
        $('#input-quantity').val(
            $('input[name=quantity][data-input-group=' + group_id + ']').val()
        );

        $('input[name=quantity][data-input-group=' + group_id + ']').val(0)
    } else {
        $('#input-quantity').val(0);
    }

...