Ho to add custom checkbox per product in the cart

[xOMEGAx]

Hi all,

 

my first post here and I hope this is the right section.

I am going crazy to add a check per product in the cart table.

 

I have added this html code in shopping-cart-product-line.tpl:

<div class="checkbox">
    <label><input type="checkbox" data-id="{$product.id_product}" class="is_a_checkbox" id="checkbox_{$product.id_product}_{$product.id_product_attribute}" name="checkbox_{$product.id_product}_{$product.id_product_attribute}" {if $product.is_checkbox == 1}checked="checked"{else}{/if}/> {l s="This is a checkbox test"} </label>
</div>

Then in cart-summary.js

$('input.is_a_checkbox').click(function (event) {
	var id = $(this).attr('name');
	var productId = $(this).data("id");
    if (this.checked) {
        $(this).attr('checked', true);
        //alert(id);

        $.ajax({
			type: 'POST',
			headers: { "cache-control": "no-cache" },
			url: baseUri + '?rand=' + new Date().getTime(),
			async: true,
			cache: false,
			dataType: 'json',
			data: 'controller=cart'
				+ '&ajax=true'
				+ '&update=true'
				+ '&summary=true'
				+ '&id_product=' + productId
				+ '&is_checkbox=1'
				+ '&token=' + static_token
				+ '&allow_refresh=1',
				
			success: function(jsonData)
			{
				if (jsonData.hasError)
				{
					var errors = '';
					for(var error in jsonData.errors)
						//IE6 bug fix
						if(error !== 'indexOf')
							errors += $('<div />').html(jsonData.errors[error]).text() + "\n";
					if (!!$.prototype.fancybox)
					    $.fancybox.open([
				        {
				            type: 'inline',
				            autoScale: true,
				            minHeight: 30,
				            content: '<p class="fancybox-error">' + errors + '</p>'
				        }],
						{
					        padding: 0
					    });
					else
					    alert(errors);
					$('input[name='+ id +']').val();
				}
				else
				{
					if (jsonData.refresh)
						window.location.href = window.location.href;
					updateCartSummary(jsonData.summary);
					
					console.log(jsonData);
					
					if (window.ajaxCart != undefined)
						ajaxCart.updateCart(jsonData);
					updateHookShoppingCart(jsonData.HOOK_SHOPPING_CART);
					updateHookShoppingCartExtra(jsonData.HOOK_SHOPPING_CART_EXTRA);
					if (typeof(getCarrierListAndUpdate) !== 'undefined')
						getCarrierListAndUpdate();
					if (typeof(updatePaymentMethodsDisplay) !== 'undefined')
						updatePaymentMethodsDisplay();
				}
			},
			error: function(XMLHttpRequest, textStatus, errorThrown) {
				if (textStatus !== 'abort')
				{
					error = "TECHNICAL ERROR: unable to save update CHECKBOX \n\nDetails:\nError thrown: " + XMLHttpRequest + "\n" + 'Text status: ' + textStatus;
					if (!!$.prototype.fancybox)
					    $.fancybox.open([
				        {
				            type: 'inline',
				            autoScale: true,
				            minHeight: 30,
				            content: '<p class="fancybox-error">' + error + '</p>'
				        }],
						{
					        padding: 0
					    });
					else
					    alert(error);
				}
			}		
				
		});
   
        
        
    } else {
        $(this).attr('checked', false);
        alert(id);
    }
});

In ps_cart_product, I added a new column called is_checkbox as int(11) and null.

 

Unfotunately when I print the jsonData the is_checkbox value is always false.

 

Any good hint?

[shokinro]

have you processed the data and saved it into database on server side?

You only pass the data via ajax call to URL baseUri + '?rand=' + new Date().getTime(), but I do not see any where you process the data to save the value in database.

[xOMEGAx]

Hello shokinro,

thank you for the answer.

I found the problem in my JS and wrote a PHP function to save data to MySQL.

 

It was my fault. Solved!

[shokinro]

you are welcome @xOMEGAx.  glad you have got a solution.