Couple of ways to do the spinner, this is what my line looks like..
Code:
// show the quantity box
$the_button = '<div id="cartAdd-wrapper" class="btn-group"><span id="down" class="btn" onclick="updateSpinner(this);"><i class="fa fa-arrow-left"></i></span><input type="text" id="content" class="small" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="3" size="3" /><span id="up" class="btn" onclick="updateSpinner(this);"><i class="fa fa-arrow-right"></i></span></div><br />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT) . '';
The problem with spinners is you can bypass the max and min quantities for the product. The answer is setting a small script at the top of the tpl_product_info.php page to prevent it and called from the onclick event..
Stops it from going below 0 and grater than max product amounts..
Code:
<script type="text/javascript">
function updateSpinner(obj)
{
var contentObj = document.getElementById("content");
var value = parseInt(contentObj.value);
if(obj.id == "down") {
value--;
if (value < 0) {
value = 0;
}
} else {
value++;
if (value >= <?php echo $products_quantity; ?>) {
value = <?php echo $products_quantity; ?>
}
}
contentObj.value = value;
}
</script>
I use Font Awesome arrows but you can change that to whatever you need..
To make the Font Awesome to behave like buttons, you need some css for the class btn.
in your stylesheet_TEMPLATE.css
Code:
.btn {color: #710505;
cursor:pointer;
}
.btn i{
font-size:170%;
color:#520303;
padding:1px;
border:1px solid #520303;
min-width:10px;
background:#dbdbea;transition:background 2s ease;-webkit-transition:background 2s ease;-moz-transition:background 2s ease;-o-transition:background 2s ease;
}
.btn i:hover{background:#171717;color:#fff;border:1px solid #171716;}
The css is a bit old, beleave RGBA makes it allot easier now..
Bookmarks