Magento - How to make a quantity increment in product view?

Files needed, Files to be edited:

• JQuery (probably the latest version, better if minified)
• jincrement.js (this is our own js.. you can change its name as you like)
• jQuery.noConflict()
  
• styles.css (styling for the increment buttons)
• layout/catalog.xml (this is where we'll reference our js, just being clean)
• template/catalog/product/view/addtocart.phtml (we'll put a div here)

1. create a file with the name jincrement.js and put this code on it..

jQuery(document).ready(function(){
    var $j = jQuery.noConflict();
    $j("div.quantity").append('<input type="button" value="+" id="add1" class="plus" />').prepend('<input type="button" value="-" id="minus1" class="minus" />');
    $j(".plus").click(function(){
        var currentVal = parseInt($j(this).prev(".qty").val());
        if (!currentVal || currentVal=="" || currentVal == "NaN") 
           currentVal = 0;
           $j(this).prev(".qty").val(currentVal + 1);
    });
    $j(".minus").click(function(){
        var currentVal = parseInt($j(this).next(".qty").val());
        if (currentVal == "NaN") 
            currentVal = 0;
            if (currentVal > 0){
                $j(this).next(".qty").val(currentVal - 1);
            }
    });
});

2. Place the JQuery and jincrement.js on js/
3. in catalog.xml

<!--
Product view
-->
<reference name="head">
            <action method="addJs"><script>jquery.min.js</script></action>
            <action method="addJs"><script>jquery.noconflict.js</script></action>
            <action method="addJs"><script>jquery.jincrement.js</script></action>
           ... OTHER CODES HERE ...
</reference>

4. in addtocart.phtml
   in line 34, enclose in <div class="quantity"></div> the input tag...
   
   
5. style using styles.css.. this is my code for styling..

div.add-to-cart div.quantity input#minus1{
    background-color: #A1A1A1;
    border: 1px solid #BBB;
    border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    float: left;
    height: 20px;
    margin-right: 1px;
    padding-left: 2px;
    cursor: pointer;
}
div.add-to-cart div.quantity input#minus1:hover{
    background-color: #CCC;
    border: 1px solid #DDD;
}
div.add-to-cart div.quantity input#add1{
    background-color: #A1A1A1;
    border: 1px solid #BBB;
    border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    height: 20px;
    vertical-align: top;
    cursor: pointer;
}
div.add-to-cart div.quantity input#add1:hover{ 
    background-color: #CCC;
    border: 1px solid #DDD;
}
div.add-to-cart div.quantity{
    margin-bottom: 5px;
    float: right;
}

and that's it!

Magento - Embed Jquery Image Rotator

A client wants to have a javascript Image Rotator in her site that will dynamically fetch and display all the images inside the specified folder ( so that she can add and remove them any time she wants).. So I opted to use Jquery Framework to do the job...

here's the code I placed in catalog/navigation/getImage.phtml

<link rel="stylesheet" href="<?php echo $this->getBaseUrl().'jshowoff.css' ?>" type="text/css" media="screen, projection" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $this->getBaseUrl().'jquery.jshowoff.min.js' ?>"></script>

<?php
/* This code will dynamically fetch all the images inside the specified folder
 * and display it using jquery
 * youngstownph@gmail.com
 * Incramind 2010
 */
       

    $currentCategory = '';

    $currentCategory = Mage::registry('current_category');
    if(!empty($currentCategory))
    $currentCategory = Mage::registry('current_category')->getName();


switch ($currentCategory)
{

    case "Sjaals":

        $imagePath = "media/banner/Sjaals";
        break;

    case "Riemen":

        $imagePath = "media/banner/Riemen";
        break;

    default:
      
        $imagePath = "media/banner/default";
        break;

}

if ($dir = opendir($imagePath))

{
    $images = array();
    while (($file = readdir($dir))!== false)
            {

        if ($file != "." && $file != ".." && $file != "Thumbs.db")
                    {
                      
                            $images[] = $file;
                     
                    }
            }
    closedir($dir);
}

echo '<div id="slidingFeatures">';
foreach($images as $image) {
    echo '<div><img src="';
    echo $this->getBaseUrl().$imagePath."/".$image;
    echo '" alt="'.$image.'" /></div>';
}
echo '</div>';

?>

<script type="text/javascript">
        $(document).ready(function(){ $('#slidingFeatures').jshowoff({
                effect: 'slideLeft',
                controlText:{play:'Play',pause:'Pause',previous:'<',next:'>'},
                hoverPause: false
        }); });
</script>

If you want to display the rotator in the homepage...

{{block type="catalog/navigation" name="homepage.slider" template="catalog/navigation/getImage.phtml"}}

Add this code in the catalog.xml if you want the rotator to appear in the catalog page..

<block type="catalog/category_view" name="catalog.slider1" as="slider1" template="catalog/navigation/getImage.phtml" />

Don't forget to create the appropriate folders in the media/banner...
Hope this helps! Godbless!