Recently I was designing a VirtueMart webshop for a customer of mine, and got stuck trying to place the quantity buttons next to the quantity box above eachother, the up button on top, the down button below.
When I searched the forums, I did not manage to find a solutions… was anybody doing this, or was I the only one?
Finally a nice guy on LinkedIn managed to help me out!
The solution is two-fold: quantity_box_general.tpl.php needs to be changed and theme.css needs to be changed (to make it look pretty…).
In the steps below, I assume you are using the default template for VirtueMart. If not, read your template name every time you see the word 'default'.
Step 1
- open file components/com_virtuemart/themes/default/templates/product_details/includes/quantity_box_general.tpl.php in a text editor
- look for these lines at the bottom of this file:
case "none" :
default:
$html .= '<input type="text" class="inputboxquantity" size="4" id="quantity'.$prod_id.'" name="quantity[]" value="'.$quantity.'" />
<input type="button" class="quantity_box_button quantity_box_button_up" onclick="var qty_el = document.getElementById(\'quantity'.$prod_id.'\'); var qty = qty_el.value; if( !isNaN( qty )) qty_el.value++;return false;" />
<input type="button" class="quantity_box_button quantity_box_button_down" onclick="var qty_el = document.getElementById(\'quantity'.$prod_id.'\'); var qty = qty_el.value; if( !isNaN( qty ) && qty > 0 ) qty_el.value–;return false;" />
';
break;
}
- replace these lines with the following lines:
case "none" :
default:
$html .= '<table>
<tr>
<td><label for="quantity7" class="quantity_box">'.$VM_LANG->_('PHPSHOP_CART_QUANTITY').': </label><input class="inputboxquantity" size="2" id="quantity7" name="quantity[]" value="1" type="text"></td><td>
<input class="quantity_box_button quantity_box_button_up" onclick="var qty_el = document.getElementById(\'quantity7\'); var qty = qty_el.value; if( !isNaN( qty )) qty_el.value++;return false;" type="button">
<br>
<input class="quantity_box_button quantity_box_button_down" onclick="var qty_el = document.getElementById(\'quantity7\'); var qty = qty_el.value; if( !isNaN( qty ) && qty > 0 ) qty_el.value–;return false;" type="button">
</td>
</tr>
</table>
';
break;
}
Step 2
- open file components/com_virtuemart/themes/default/templates/theme.css in a text editor
- look for these lines:
/* The quantity box beneath the "add to cart" button */
.quantity_box {
vertical-align: middle;
}
.quantity_box_button {
width:10px;
vertical-align:middle;
height:10px;
background-repeat: no-repeat;
background-position: center;
border:1px solid #000;
}
.quantity_box_button_down {
background-image: url(images/down_small.gif);
}
.quantity_box_button_up {
background-image: url(images/up_small.gif);
}
- replace these lines with the following lines:
/* The quantity box beneath the "add to cart" button */
.quantity_box {
vertical-align: middle;
}
.quantity_box_button {
width:10px;
height:10px;
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
margin-top: 3px;
border: none;
}
.quantity_box_button_down {
background-image: url(images/down_small.gif);
margin-top: 2px;
}
.quantity_box_button_up {
background-image: url(images/up_small.gif);
}
That is all there is to it!
Have fun!
_____________________________________________________________________________________________Robin Roelofsen
"I think complexity is mostly sort of crummy stuff that is there because it's too expensive to change the interface."
Jaron Lanier
