2016-06-21 80 views
1

我使用OpenCart 2.2運行隱形眼鏡在線商店。OpenCart 2.2:如果選擇了選項,立即更改數量

我需要稍微修改產品頁面:
當您購買隱形眼鏡時,您有兩個下拉列表,您可以在其中選擇每隻眼睛的屈光度(功率)。我想要做的是,如果您只選擇一隻眼睛開機,購買產品的最低數量爲1,但如果選擇雙眼,最小數量應爲2.

所以我考慮if-else-elseif函數,因爲只有3種情況可能 - 1 - 只選擇左眼; 2 - 選擇雙眼; 3 - 只選擇右眼。 This is how the product page looks now
默認情況下,Qty = 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> 
+0

您可以顯示顯示兩個'select's的HTML部分嗎? – tektiv

+0

請在數量字段中顯示HTML – Andy

回答

0

我看不出有任何理由使用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中,這樣您就可以更有效地查找元素,而不是像我所做的那樣檢查標籤的文本值。

+0

謝謝你的回答!我已經添加了數量的HTML代碼。 –

相關問題