Quantity problem when using custom fields

Good Morning,

I'm using Joomla 2.5 and Virtuemart 2.6, and I'm really liking the template and how it's working for a new venture of mine.

I have run into a problem however. When I use custom fields for product size and colour stock control, the add to card quantity buttons break.

I have attached an image, and can allow site access if required to see the problem.

Thanks!
Regards
Kevin

Hi

Please tell me the exact url to the page where You have made a screenshot.

Hello,

It is;

http://erinsboutique.co.uk/fashion/wome ... ess-detail

I will send you a user name and password in a PM.

The problem is replicated on all products that I have custom fields on (which will be almost all).

Thanks
Kevin

Hi

Please edit /layout/blocks/head.php and add this code at the end of this file:

Code: Select all

<script type="text/javascript">(function($) {$(document).ready(function() {
$('.quantity-plus').attr('value','+');
$('.quantity-minus').attr('value','-');
});})(jQuery)</script>


I am having the same issue. Using this code didn't help to resolved. Any other solution?

Hi

Please show me the exact page where You have this problem.

Thank you for taking care.

I have uploaded a demo here:

http://www.colorsstudio.eu/nano/index.p ... res-detail

You see the drop down box doesn't take the width of the name inside it and the quantity plus and minus button doesn't display at all

Hi

This looks like someone was manipulating with code, there can never be an !important rule in style attribute. Please send me an access to ftp. I'll make some overrides to fix this mistake.

Hi

Ok. I've added all fixed at the end of file /html/com_virtuemart/productdetails/default.php so it will be easier for You to copy.

Code: Select all

<script type="text/javascript">
(function($) {$(document).ready(function() {
   $('select.attribute_list').removeAttr('style');
   $('.addtocart-bar .quantity-plus').attr('value','+');
   $('.addtocart-bar .quantity-minus').attr('value','-');
});})(jQuery)
</script>

<style type="text/css">
.quantity-controls input[type="button"] {
    background: none repeat scroll 0 0 #1b1d1f;
    color: #ffffff !important;
    height: 32px;
    margin: 0 2px;
    padding: 0;
    width: 32px;
    line-height: 32px;
}

.quantity-controls input[type="button"]:hover {
    background-color: gray;
}

.addtocart-button {
    display: inline-block;
    position: relative;
    top: 6px;
}

input.addtocart-button {
    height: 32px;
    line-height: 32px;
}
</style>


Thanks for this solution but...

When you select a color from the drop down menu, then the plus and minus signs disappear.
Am not able to find the css style if this is true... to position it to the center of the button.

http://www.colorsstudio.eu/index.php/ha ... res-detail

Regards

Hi

I need to see the problem in order to help. Can You please put back the last part of the code I've added and let me know when this will be done so I'll see what I've missed.

Hi,

Sorry for that, I have had another issue with the Update Quantity In Cart Button and bkrztuk asked me to upload his html complete folder.
I have revered the files as it where when you have modified which has the issue. Just have in mind that what I am trying to succeed is the layout of the storefront demo.. with the quantity buttons on top and the add to cart big button at the bottom like the rest of the website.

Hi

That's an interesting issue. Looks like code is reverted after selection. Really odd solution ;/ Please make the ftp access You send me work again so I'll try with :before css selector and not use the javascript.

Hi

I've modified the code just a little bit to put back the + and - when it dissapeares.

Code: Select all

<script type="text/javascript">
(function($) {$(document).ready(function() {
   function watchtower() {
         $('select.attribute_list').removeAttr('style');
         $('.addtocart-bar .quantity-plus').attr('value','+');
         $('.addtocart-bar .quantity-minus').attr('value','-');
      setTimeout(watchtower,50);
   }

   $(watchtower);
});})(jQuery)
</script>

<style type="text/css">
.quantity-controls input[type="button"] {
    background: none repeat scroll 0 0 #1b1d1f;
    color: #ffffff !important;
    height: 32px;
    margin: 0 2px;
    padding: 0;
    width: 32px;
    line-height: 32px;
}

.quantity-controls input[type="button"]:hover {
    background-color: gray !important;
}

.addtocart-button {
    display: inline-block;
    position: relative;
    top: 6px;
}

input.addtocart-button {
    height: 32px;
    line-height: 32px;
}
</style>


Thanks thats ok now

Here again,

I was working on firefox and this solution was ok, but testing it in all other well known browsers Chrome, Safari, Opera it doesn't work.
There is a different layout on IE too, but it seems to work.

Can you give me a hand please.?

Hi

Are You sure cache is cleared in this browsers ? I've just checked and it's working in FF, Chrome, Safari, Opera (no IE other than emulation, but works there as well).

This code is very simple. The only problem I can think of is when there is an error in some other place so this code will not get used at all.