javascript - Add to cart button when a product has a required option in OpenCart 2.3.0.2 -


how 1 go adding required options ajax call after clicking add cart button?

currently code in common.js is:

var cart = { 'add': function(product_id, quantity) {     $.ajax({         url: 'index1.php?route=checkout/cart/add',         type: 'post',         data: 'product_id=' + product_id + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),         datatype: 'json',         success: function(json) {                        if (json['redirect']) {                 location = json['redirect'];             }              if (json['success']) {                  $.notify({                     message: json['success'],                     target: '_blank'                  },{                     // settings                     element: 'body',                     position: null,                     type: "info",                     allow_dismiss: true,                     newest_on_top: false,                     placement: {                         from: "top",                         align: "right"                     },                     offset: 20,                     spacing: 10,                     z_index: 2031,                     delay: 2000,                     timer: 1000,                     url_target: '_blank',                     mouse_over: null,                     animate: {                         enter: 'animated fadeindown',                         exit: 'animated fadeoutup'                     },                     onshow: null,                     onshown: null,                     onclose: null,                     onclosed: null,                     icon_type: 'class',                     template: '<div data-notify="container" class="col-xs-11 col-sm-3 alert alert-success" role="alert">' +                         '<button type="button" aria-hidden="true" class="close" data-notify="dismiss">×</button>' +                         '<span data-notify="message"><i class="fa fa-check-circle"></i>&nbsp; {2}</span>' +                         '<a href="{3}" target="{4}" data-notify="url"></a>' +                     '</div>'                   });                  $('#cart_block #cart_content').load('index1.php?route=common/cart/info #cart_content_ajax');                 $('#cart_block #total_price_ajax').load('index1.php?route=common/cart/info #total_price');                 $('#cart_block #cart_count_ajax').load('index1.php?route=common/cart/info #cart-total');                 $('#cart-total').html(json['total']);             }         }     }); }, 'update': function(key, quantity) {     $.ajax({         url: 'index1.php?route=checkout/cart/edit',         type: 'post',         data: 'key=' + key + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),         datatype: 'json',         success: function(json) {             if (geturlvar('route') == 'checkout/cart' || geturlvar('route') == 'checkout/checkout') {                 location = 'index.php?route=checkout/cart';             } else {                 $('#cart_block #cart_content').load('index1.php?route=common/cart/info #cart_content_ajax');                 $('#cart_block #total_price_ajax').load('index1.php?route=common/cart/info #total_price');                 $('#cart_block #cart_count_ajax').load('index1.php?route=common/cart/info #cart-total');             }                    }     });          }, 'remove': function(key) {     $.ajax({         url: 'index1.php?route=checkout/cart/remove',         type: 'post',         data: 'key=' + key,         datatype: 'json',                    success: function(json) {             if (geturlvar('route') == 'checkout/cart' || geturlvar('route') == 'checkout/checkout') {                 location = 'index1.php?route=checkout/cart';             } else {                 $('#cart_block #cart_content').load('index1.php?route=common/cart/info #cart_content_ajax');                 $('#cart_block #total_price_ajax').load('index1.php?route=common/cart/info #total_price');                 $('#cart_block #cart_count_ajax').load('index1.php?route=common/cart/info #cart-total');                 $('#cart-total').html(json['total']);             }         }     });          } 

}

obviously, options not added in call add cart. did managed show options, can see example here:

https://www.amsterdamvapes.com/eleaf-istick-pico-set

there see 7 related products, 1 required option.

the related options getting saved in $product['options]' array , they're showed code in product.tpl file;

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

in product.tpl file add cart button gets code;

<li><a onclick="cart.add('<?php echo $product['product_id']; ?>','1','<?php echo $related_option_value['name']; ?>');" class="btn-secondary btn-buy"><i class="fa fa-shopping-cart"></i><?php echo $button_cart; ?></a></li> 

i can understand have add possible options onclick function product_id added. , add code common.js options onclick event have no clue on how that.

can steer me in right direction add option values ajax call?

sincerely hope can out! cheers, david

@daniel suggestion fiddled around working javascript , went trial , error.

i got working now, lot!


Comments

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -