Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save yogeshdubey2006/aebd0668c19b53ae372da5eb5023633f to your computer and use it in GitHub Desktop.

Select an option

Save yogeshdubey2006/aebd0668c19b53ae372da5eb5023633f to your computer and use it in GitHub Desktop.
Magento - plus minus shopping quantity buttons
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="yogeshdubey2006@gmail.com">
<title>Magento - plus minus shopping quantity buttons</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-git.min.js"></script>
<style type="text/css">
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
font-family: Tahoma;
}
.container {
width: 1170px;
margin: 0 auto;
overflow: hidden;
color: #ffffff;
}
.content {
padding: 15px;
float: right;
margin-right: 15px;
background: #000;
line-height: 1.4;
font-size: 13px;
}
.main {
width: 1170px;
margin: 0 auto;
color: #fff;
}
</style>
</head>
<body>
<!--
I know this could be simplified, but I wanted support for multiple instances per page, and this supports that.
This could be easily modified to suit dynamic web applications also.
-->
<div class="main">
<div class="container">
<h1>Magento - plus minus shopping quantity buttons</h1>
<div class="content">
<a class="decrement_qty" href="javascript:void(0)">minus</a><input name="qty" size="4" value="1" /><a class="increment_qty" href="javascript:void(0)">plus</a>
</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
jQuery('.increment_qty').click(function() {
var oldVal = jQuery(this).parent().find("input").val();
if ( parseFloat(oldVal) >= 1 ) {
var newVal = parseFloat(oldVal) + 1;
jQuery(this).parent().find("input").val(newVal);
}
});
jQuery('.decrement_qty').click(function() {
var oldVal = jQuery(this).parent().find("input").val();
if ( parseFloat(oldVal) >= 2 ) {
var newVal = parseFloat(oldVal) - 1;
jQuery(this).parent().find("input").val(newVal);
}
});
});
//]]>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment