Adding two products to cart with one click on the "Add to cart" button. Open Cart 1.5.5.1

StackOverflow https://stackoverflow.com/questions/21196479

  •  29-09-2022
  •  | 
  •  

Question

I have created configurator.tpl file (duplicate of product.tpl + some editing) in catalog/view/theme/theme-name/template/product/configurator.tpl in order to have 2 products at the same time on the product page. Also, I have created the controller file catalog/controller/product/configurator.php (duplicate of product.php + some editing). Everything it's OK. You can check here.

Now, I'm trying to add these 2 products to cart, clicking once the "Add to cart" button. Always these two products will be the same two (product_id=50 and product_id=51).
Do I have to modify "add to cart function", or maybe to call the function twice, once for each product_id? Any approach will be OK.

I've found some valuable info here but I can't imagine the solution. Please help!

Open Cart 1.5.5.1

Was it helpful?

Solution

Replace

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

    $.ajax({
        url: 'index.php?route=checkout/cart/add',
        type: 'post',
        data: $('.product-info.first input[type=\'text\'], .product-info.first input[type=\'hidden\'], .product-info.first input[type=\'radio\']:checked, .product-info.first input[type=\'checkbox\']:checked, .product-info.first select, .product-info.first textarea'),

to

addtocart2(pid) {

    $.ajax({
        url: 'index.php?route=checkout/cart/add',
        type: 'post',
        data: $('#product-'+pid+' .product-info.first input[type=\'text\'], #product-'+pid+' .product-info.first input[type=\'hidden\'],#product-'+pid+'  .product-info.first input[type=\'radio\']:checked, #product-'+pid+' .product-info.first input[type=\'checkbox\']:checked, #product-'+pid+' .product-info.first select,#product-'+pid+'  .product-info.first textarea'),

And replace

 <input type="button" value="Adauga in cos" id="button-cart" class="button" />

to

 <input type="button" value="Adauga in cos" onclick="addtocart2(<?=$product_id ?>)" class="button" />

and in the end add html id to priduct-info div

<div class="product-info first">

replace to

<div class="product-info first" id="product-<?=$product_id?>">

I do not know how you do output,so $product_id may be changed to $product['product_id'] or $product2_id;

OTHER TIPS

All the changes are for configurator.tpl
Replace $('#button-cart').bind('click', function() {
with

$('#button-cart').bind('click', function() {
 $.ajax({
    url: 'index.php?route=checkout/cart/add',
    type: 'post',
    data: $('.product-info.first input[type=\'text\'], .product-info.first input[type=\'hidden\'], .product-info.first input[type=\'radio\']:checked, .product-info.first input[type=\'checkbox\']:checked, .product-info.first select, .product-info.first textarea'),
    dataType: 'json',
    success: function(json) {
        $('.success, .warning, .attention, information, .error').remove();
        if (json['error']) {
            if (json['error']['option']) {
                for (i in json['error']['option']) {
                    $('#option-' + i).after('<span class="error">' + json['error']['option'][i] + '</span>');
                }
            }
        } 

        if (json['success']) {
            $('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
            $('.success').fadeIn('slow');
            $('#cart-total').html(json['total']);
            $('html, body').animate({ scrollTop: 0 }, 'slow'); 
        }   
    }
});

$.ajax({
    url: 'index.php?route=checkout/cart/add',
    type: 'post',
    data: $('.product-info.second input[type=\'text\'], .product-info.second input[type=\'hidden\'], .product-info.second input[type=\'radio\']:checked, .product-info.second input[type=\'checkbox\']:checked, .product-info.second select, .product-info.second textarea'),
    dataType: 'json',
    success: function(json) {
        $('.success, .warning, .attention, information, .error').remove();
        if (json['error']) {
            if (json['error']['option']) {
                for (i in json['error']['option']) {
                    $('#option-' + i).after('<span class="error">' + json['error']['option'][i] + '</span>');
                }
            }
        } 

        if (json['success']) {
            $('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
            $('.success').fadeIn('slow');
            $('#cart-total').html(json['total']);
            $('html, body').animate({ scrollTop: 0 }, 'slow');
        }   
    }
});
});

Replace <div class="product-info"> with
<div class="product-info first"> (for product 1) and with
<div class="product-info second"> (for product 2)

Replace just for the second product
<input type="hidden" name="product_id" size="2" value="<?php echo $product; ?>" /> with
<input type="hidden" name="product_id" size="2" value="<?php echo $product_id_2; ?>" />

That's all.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top