Problem with quantity box in category view

[naoko15]

Hi, i had to add a cart button and quantity controls in the category layout. I did this successfully, but then i needed to modify them to make them look nice. So, in order to do this i cloned the add to cart button and the quantity box and created their own css. My problem is that now the quantity box is not working in the category layout and i've no idea why. The add to cart button works. Would anyone tell me what's wrong with my code, please? thanks a lot.

I'm using Joomla 2.5 and VM 2.0.12f

My test site: http://tinyurl.com/bq6jqv6

Code in category/default.php:

Code Select Expand

<?php // Display the quantity box ?>
<!-- <label for="quantity<?php echo $this->product->virtuemart_product_id;?>" class="quantity_box2"><?php echo JText::_('COM_VIRTUEMART_CART_QUANTITY'); ?>: </label> -->
<span class="quantity-box2">
<input type="text" class="quantity-input2" name="quantity[]" value="1" />
</span>
<span class="quantity-controls">
<input type="button" class="quantity-controls quantity-plus" />
<input type="button" class="quantity-controls quantity-minus" />
</span>
<?php // Display the quantity box END ?>

Code in vmprices.js

Code Select Expand

if(typeof Virtuemart === "undefined")
{
var Virtuemart = {
setproducttype : function (form, id) {
form.view = null;
var $ = jQuery, datas = form.serialize();
var prices = form.parents(".productdetails").find(".product-price");
if (0 == prices.length) {
prices = $("#productPrice" + id);
}
datas = datas.replace("&view=cart", "");
prices.fadeTo("fast", 0.75);
$.getJSON(window.vmSiteurl + 'index.php?option=com_virtuemart&nosef=1&view=productdetails&task=recalculate&virtuemart_product_id='+id+'&format=json' + window.vmLang, encodeURIComponent(datas),
function (datas, textStatus) {
prices.fadeTo("fast", 1);
// refresh price
for (var key in datas) {
var value = datas[key];
if (value!=0) prices.find("span.Price"+key).show().html(value);
else prices.find(".Price"+key).html(0).hide();
}
});
return false; // prevent reload
},
productUpdate : function(mod) {

var $ = jQuery ;
$.ajaxSetup({ cache: false })
$.getJSON(window.vmSiteurl+"index.php?option=com_virtuemart&nosef=1&view=cart&task=viewJS&format=json"+window.vmLang,
function(datas, textStatus) {
if (datas.totalProduct >0) {
mod.find(".vm_cart_products").html("");
$.each(datas.products, function(key, val) {
$("#hiddencontainer .container").clone().appendTo(".vmCartModule .vm_cart_products");
$.each(val, function(key, val) {
if ($("#hiddencontainer .container ."+key)) mod.find(".vm_cart_products ."+key+":last").html(val) ;
});
});
mod.find(".total").html(datas.billTotal);
mod.find(".show_cart").html(datas.cart_show);
}
mod.find(".total_products").html(datas.totalProductTxt);
}
);
},
sendtocart : function (form){

if (Virtuemart.addtocart_popup ==1) {
Virtuemart.cartEffect(form) ;
} else {
form.append('<input type="hidden" name="task" value="add" />');
form.submit();
}
},
cartEffect : function(form) {

var $ = jQuery ;
$.ajaxSetup({ cache: false })
var datas = form.serialize();
$.getJSON(vmSiteurl+'index.php?option=com_virtuemart&nosef=1&view=cart&task=addJS&format=json'+vmLang,encodeURIComponent(datas),
function(datas, textStatus) {
if(datas.stat ==1){
//var value = form.find('.quantity-input').val() ;
var txt = form.find(".pname").val()+' '+vmCartText;
$.facebox.settings.closeImage = closeImage;
$.facebox.settings.loadingImage = loadingImage;
$.facebox.settings.faceboxHtml = faceboxHtml;
$.facebox({ text: datas.msg +"<H4>"+txt+"</H4>" }, 'my-groovy-style');
} else if(datas.stat ==2){
var value = form.find('.quantity-input').val() ;
var txt = form.find(".pname").val();
$.facebox.settings.closeImage = closeImage;
$.facebox.settings.loadingImage = loadingImage;
$.facebox.settings.faceboxHtml = faceboxHtml;
$.facebox({ text: datas.msg +"<H4>"+txt+"</H4>" }, 'my-groovy-style');
} else {
$.facebox.settings.closeImage = closeImage;
$.facebox.settings.loadingImage = loadingImage;
$.facebox.settings.faceboxHtml = faceboxHtml;
$.facebox({ text: "<H4>"+vmCartError+"</H4>"+datas.msg }, 'my-groovy-style');
}
if ($(".vmCartModule")[0]) {
Virtuemart.productUpdate($(".vmCartModule"));
}
});
$.ajaxSetup({ cache: true });
},
product : function(carts) {
carts.each(function(){
var cart = jQuery(this),
addtocart = cart.find('input.addtocart-button'),
addtocart2 = cart.find('input.addtocart-button2'),
plus   = cart.find('.quantity-plus'),
minus  = cart.find('.quantity-minus'),
plus2   = cart.find('.quantity-plus2'),
minus2  = cart.find('.quantity-minus2'),
select = cart.find('select'),
radio = cart.find('input:radio'),
virtuemart_product_id = cart.find('input[name="virtuemart_product_id[]"]').val(),
quantity = cart.find('.quantity-input');
quantity2 = cart.find('.quantity-input2');

addtocart.click(function(e) {
Virtuemart.sendtocart(cart);
return false;
});
addtocart2.click(function(e) {
Virtuemart.sendtocart(cart);
return false;
});
plus.click(function() {
var Qtt = parseInt(quantity.val());
if (!isNaN(Qtt)) {
quantity.val(Qtt + 1);
Virtuemart.setproducttype(cart,virtuemart_product_id);
}

});
minus.click(function() {
var Qtt = parseInt(quantity.val());
if (!isNaN(Qtt) && Qtt>1) {
quantity.val(Qtt - 1);
} else quantity.val(1);
Virtuemart.setproducttype(cart,virtuemart_product_id);
});
plus2.click(function() {
var Qtt = parseInt(quantity.val());
if (!isNaN(Qtt)) {
quantity.val(Qtt + 1);
Virtuemart.setproducttype(cart,virtuemart_product_id);
}

});
minus2.click(function() {
var Qtt = parseInt(quantity.val());
if (!isNaN(Qtt) && Qtt>1) {
quantity.val(Qtt - 1);
} else quantity.val(1);
Virtuemart.setproducttype(cart,virtuemart_product_id);
});
select.change(function() {
Virtuemart.setproducttype(cart,virtuemart_product_id);
});
radio.change(function() {
Virtuemart.setproducttype(cart,virtuemart_product_id);
});
quantity.keyup(function() {
Virtuemart.setproducttype(cart,virtuemart_product_id);
});
});

}
};
jQuery.noConflict();
jQuery(document).ready(function($) {

Virtuemart.product($("form.product"));

$("form.js-recalculate").each(function(){
if ($(this).find(".product-fields").length) {
var id= $(this).find('input[name="virtuemart_product_id[]"]').val();
Virtuemart.setproducttype($(this),id);

}
});
});
}

Any help will be very much appreciated, thanks!

[bytelord]

Hello,

your wrong is here ... you are not running the javascript

you have:

<input type="text" value="1" name="quantity[]" class="quantity-input2">

instead of:

<input type="text" value="1" name="quantity[]" class="quantity-input2 js-recalculate">

but i believe you could change the style without edit the vmprice.js ...


Regards

[naoko15]

Thanks! but now the product is added to the cart but the quantity box is still not working :/

http://tinyurl.com/bq6jqv6

[bytelord]

Please check for similar errors, but i said i wouldn't use this method ... you could change the style for your CSS by just adding a little bit hierarchy on your CSS and write the right selector ...

for example for category view - products

.browse-view .row .spacer .quantity-box {

}

This will change the the css styling only for quantity-box under category view ... so there is not need to add second or any other classes like quantity-box2 ...

Regards

[naoko15]

I'll try it like that and get back to you, thanks!

[naoko15]

It works wonderfully! how do i do the same with input class=quantity input? As you can see i'm quite new to this and doesn't know much about hierarchy.

[bytelord]

Hello,

Is how you use the selector ... it's CSS stuff ... always you can find more using firebug

.browse-view .row .spacer .quantity-input {

}

Regards

[naoko15]

I'm almost there! quantity input is the only thing left to work! 

.browse-view .row .spacer .quantity-box {} worked but .browse-view .row .spacer .quantity-input {} didn't! why is this?

[bytelord]

You have it quantity-input2?? Did you fix that?

[naoko15]

Yes, i changed input class from quantity-input2 to quantity-input

http://tinyurl.com/bq6jqv6

[bytelord]

i check your only site your div class is quantity-input2

[naoko15]

How strange

[attachment cleanup by admin]

[bytelord]

Hello,

Use this .browse-view .row .spacer input.quantity-input {
}

[naoko15]

It didn't work either : (

[bytelord]

Please try it a little but i cannot find a solution for each class you are using ...

Regards