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> {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
Post a Comment