+ Magento v1.4 .2 does support the image viewing with its zooming effect using Prototype framework in which users have to drag and release a zoom button in order to zoom in/out the image . I found it not a friendly effect.

+ Instead of using this, I decided to use the Featured Image Zoomer v1.5 (reference: http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm) in which users just need to roll the mouse over the image, a zoomed image will automatically appear beside.

+ Also, users can use the mouse wheel to adjust the zoom size.

Steps to do:

1. Download and import JQuery (current version: 1.4.4) into the head section of the site.

2. Place the script featuredimagezoomer.js in your Magento script folder. My case is “[home url]/js/jquery”. Please notice that you need to remove the code jQuery.noConfict() in this script as it will terminate all the Prototype script. (An error of this is the Add to Cart button would become ‘unclickable’)

3. Open the media.phtml from the path below

[home url]/app/design/frontend/default/[your theme]/template/catalog/product/view/media.phtml

and make the following changes:

4. Place the following code in the beginning of the file to import the featuredimagezoomer.js script. The reason I put the script in this file is so that the site won’t take unnecessary time for loading this script in other pages which don’t need the zooming effect.

<script type=”text/javascript” src=”<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_JS); ?>jquery/featuredimagezoomer.js”>
</script>

<?php echo ‘
<script type=”text/javascript”>

jQuery(document).ready(function(jQuery){

jQuery(“#image”).addimagezoom({
zoomrange: [3, 10],
magnifiersize: [350,350],
magnifierpos: “right”,
cursorshade: true,
largeimage: “‘ . $this->helper(‘catalog/image’)->init($_product, ‘image’) . ‘” //<– No comma after last option!
})
})
</script>’
?>

5. In the paragraph <p class=”product-image product-image-zoom”>, make sure the image tag inside has the id=”image”.

6. In the division <div class=”more-views”>, replace the <a> inside the <li> with the following:

<a href=”#” onclick=”updateImage(‘<?php echo $this->helper(‘catalog/image’)->init($this->getProduct(), ‘image’, $_image->getFile())->resize(300); ?>’, ‘<?php echo $this->helper(‘catalog/image’)->init($this->getProduct(), ‘image’, $_image->getFile()); ?>’)” title=”<?php echo $this->htmlEscape($_image->getLabel()) ?>” ondblclick=”popWin(‘<?php echo $this->getGalleryUrl($_image) ?>’, ‘gallery’, ‘width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes’); return false;”>
<img src=”<?php echo $this->helper(‘catalog/image’)->init($this->getProduct(), ‘thumbnail’, $_image->getFile())->resize(66); ?>” width=”66″ height=”66″ alt=”<?php echo $this->htmlEscape($_image->getLabel()) ?>” />
</a>

7. Amend the code below to the last section of the file:

<script type=”text/javascript”>

function updateImage(smallImage, imageSource){
document.getElementById(‘image’).src = smallImage;

jQuery(“#image”).addimagezoom({
zoomrange: [3, 10],
magnifiersize: [350,350],
magnifierpos: “right”,
cursorshade: true,
largeimage: imageSource //<– No comma after last option!
})
}
</script>

8. The last thing to do is update the style sheet. Open the style.css, find the line below:

.product-view .product-img-box .product-image-zoom

and remove the z-index:9 from the style sheet. Without this step, even though all the code and script works fine you still won’t be able to see any thing from the front end as the CSS does not allow to.

Done. Enjoy!

To create New Arrivals page and Specials page that

+ work just like other category pages

+ can be filtered by normal Shopping Options including by Category

+ and have paging toolbar

Logic explanation:

Magento (current ver: 1.4.2) does not support New Arrivals page and Specials page even though it does have the options to setup a product as new/special product. In order to create these pages, I have searched and found some solutions that can display the new arrival products by simply creating a CMS page with a small block of code. However, it does not work as I expected that those pages did not have the filterable functionality as well as the paging toolbar. Therefore, I have come up with my own solution that uses the root category (in my sample is Our Collections category) as the base category for the New Arrivals page and the Special page. By adding “key=value” attribute into the URL, the New Arrivals page is differentiated with the Specials page by the different value entered.

For New Arrivals page, the attribute “type=new-arrivals” is added into the url as example below: …index.php/our-collections.html?type=new-arrivals.

For Specials page, the attribute “type=specials” is added into the url as example below: …index.php/our-collections.html?type=specials.

What we then have to do is updating a core function of Magento that loads product collection so that when the page above is clicked, it will load only new arrival / special products. The function updated is called _getProductCollection that can be found in the file app\code\core\Mage\Catalog\Block\Product\List.php. Please make sure that you have backed up this file before making any changes.

Apart from other small changes (eg. page title change, breadscrumb change), that are all important things that we have to do so that the page can work properly as a normal category page.

Steps to do:

Step 1: Updating the Magento core file: app\code\core\Mage\Catalog\Block\Product\List.php

Replacing thefunction _getProductCollection() with the following code:

protected function _getProductCollection()
{
$currentUrl = Mage::helper(‘core/url’)->getCurrentUrl();
$todayDate  = Mage::app()->getLocale()->date()->toString(Varien_Date::DATETIME_INTERNAL_FORMAT);

if (is_null($this->_productCollection)) {
$layer = $this->getLayer();
/* @var $layer Mage_Catalog_Model_Layer */
if ($this->getShowRootCategory()) {
$this->setCategoryId(Mage::app()->getStore()->getRootCategoryId());
}

// if this is a product view page
if (Mage::registry(‘product’)) {
// get collection of categories this product is associated with
$categories = Mage::registry(‘product’)->getCategoryCollection()
->setPage(1, 1)
->load();
// if the product is associated with any category
if ($categories->count()) {
// show products from this category
$this->setCategoryId(current($categories->getIterator()));
}
}

$origCategory = null;
if ($this->getCategoryId()) {
$category = Mage::getModel(‘catalog/category’)->load($this->getCategoryId());
if ($category->getId()) {
$origCategory = $layer->getCurrentCategory();
$layer->setCurrentCategory($category);
}
}
$this->_productCollection = $layer->getProductCollection();

$this->prepareSortableFieldsByCategory($layer->getCurrentCategory());

if ($origCategory) {
$layer->setCurrentCategory($origCategory);
}
}

if (strpos($currentUrl, “type=new-arrivals”) !== false){    // if the string “type=new-arrivals” exists in the url then
$this->_productCollection = $this->_addProductAttributesAndPrices($this->_productCollection)
->addStoreFilter()
->addAttributeToFilter(‘news_from_date’, array(‘date’ => true, ‘to’ => $todayDate))
->addAttributeToFilter(‘news_to_date’, array(‘or’=> array(
0 => array(‘date’ => true, ‘from’ => $todayDate),
1 => array(‘is’ => new Zend_Db_Expr(‘null’)))
), ‘left’)
->addAttributeToSort(‘news_from_date’, ‘desc’);
}
elseif (strpos($currentUrl, “type=specials”) !== false) {    // if the string “type=specials” exists in the url then
$this->_productCollection = $this->_addProductAttributesAndPrices($this->_productCollection)
->addStoreFilter()
->addAttributeToFilter(‘special_from_date’, array(‘date’ => true, ‘to’ => $todayDate))
->addAttributeToFilter(‘special_to_date’, array(‘or’=> array(
0 => array(‘date’ => true, ‘from’ => $todayDate),
1 => array(‘is’ => new Zend_Db_Expr(‘null’)))
), ‘left’)
->addAttributeToSort(‘special_from_date’, ‘desc’);
}

return $this->_productCollection;
}

Step 2:

Changing the page title as it, by default, is “Our Collections“. Open the file app\design\frontend\default\[your theme]\template\catalog\category\view.phtml and find the line below

<h1><?php echo $_helper->categoryAttribute($_category, $_category->getName(), ‘name’) ?></h1>

and replace the whole line with the following code:

<?php
$currentUrl = Mage::helper(‘core/url’)->getCurrentUrl();
?>

<?php if (strpos($currentUrl, “type=new-arrivals”) !== false):?>
<h1><?php echo “New Arrivals” ?></h1>
<?php elseif (strpos($currentUrl, “type=specials”) !== false):?>
<h1><?php echo “Specials” ?></h1>
<?php else: ?>
<h1><?php echo $_helper->categoryAttribute($_category, $_category->getName(), ‘name’) ?></h1>
<?php endif; ?>

Step 3:

Create a New Arrivals link in your website (such as in homepage) that has the address below: [home url]/our-collections.html?type=new-arrivals.

Create a Specials link in your website (such as in homepage) that has the address below: [home url]/our-collections.html?type=specials.

Now you can click into the New Arrivals or Specials link to see the result. Make sure that you have created some products that are set as new products and special products so that the page won’t be empty.

Enjoy!

1) For the HTML codes, put all the moving elements inside the “movingElement” Division. Then put this division inside the parent one which is “movingWrapper”. Make sure that you have all the important attributes and the windows events.

<div id=”movingWrapper” style=”width: 100%; overflow: hidden” onmouseover=”stopMoving();” onmouseout=”continueMoving();”>
<div id=”movingElement” style=”width: 250px”>

<p>

Welcome to Javascript for HTML moving
</p>
</div>
</div>

2) For Javascripts, paste these code right under the “movingWrapper” Division in the HTML file:

<script type=”text/javascript”>
//Get wrapper division
var wrapper = document.getElementById(“movingWrapper“);
//Get wrapper division width
var width = wrapper.scrollWidth;

//Get Element to be moved
var element = document.getElementById(“movingElement“);
element.style.position = ‘relative’;

var step = 0.3;            //Moving step
var start = width;        //Start position. This example is for moving from right to left
var end = -element.scrollWidth;            //End position. Moving the element to the left until it completely disappears
var interval = 10        //Interval time

var int=self.setInterval(“move()”,interval);

var pos = start;        //Current position

//This moves the element
function move()
{
if (start < end)
pos += step;
else
pos -= step;

element.style.left = pos + ‘px’;

if (start < end)
if (pos > end) pos = wrapper.scrollWidth;
if (start > end)
if (pos < end) pos = wrapper.scrollWidth;
}

function stopMoving()
{
clearInterval(int);
}

function continueMoving()
{
int = self.setInterval(“move()”,10);
}
</script>

Done ! Enjoy

1) Insert in html page :
<div id="slideshow">
    <img src="img/img1.jpg" alt="" class="active"/>
    <img src="img/img2.jpg" alt="" />
    <img src="img/img3.jpg" alt="" />
</div>

2)  Insert in CSS :

#slideshow {
    position:relative;
    height:350px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}

3)  Insert the script  in the head of html :

jQuery.noConflict();

function slideSwitch() {
    var $active = jQuery('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = jQuery('#slideshow IMG:last');

    var $next =  $active.next().length ? $active.next()
        : jQuery('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
} jQuery(function() {
    setInterval( "slideSwitch()", 5000 );
});

And don't forget to update your Jquery script. Enjoy !

- Insert this script file to your page : “moveTween.js”  moveTween

- Create the DOM event with toggleDown and toggleUp functions , eg.  onmouseover(toggleDown([ID name], [direction], [startPos], [endPos])) , onmouseout(toggleDown([ID name], [direction], [startPos], [endPos])), …

Here is an example, when the “logo” is onmouseover, it will drop down from the top :

<div id="logo" onclick="location.href='http://www.vitacreations.com';"
style="position: absolute; top: 0; cursor:pointer;"
onmouseover="toggleDown('logo','top',0,20)";
onmouseout="toggleUp('logo','top',0,20);">
</div>

1 – Disappear the Product Prices :

Open [YOUR THEME]\template\catalog\product\list.phtml go to line 98 or find this code <?php echo $this->getPriceHtml($_product, true) ?> and replace it by :

<?php if (Mage::isInstalled() && Mage::getSingleton(‘customer/session’)->isLoggedIn()): ?> <?php /*check loggin in or not*/?>
<?php echo $this->getPriceHtml($_product, true) ?>
<?php endif;?>

2 – Disappear the “Shop by” Box:

- Open [YOUR THEME]\template\catalog\layer\view.phtm go to line 34 or find this code <?php if($this->canShowBlock()): ?> and replace it by:

<?php if (Mage::isInstalled() && Mage::getSingleton(‘customer/session’)->isLoggedIn()): ?>  <?php /*check loggin in or not*/?>
<?php if($this->canShowBlock()): ?>

- Add this code to the end:

<?php endif; ?>

1 – Open the .xml file located in [Your Theme]/layout

2 – Add these codes to the <default> template

<reference name=”head”>
<action method=”setTitle”><title>THIS IS YOUR TITLE</title></action>
</reference>

Done. Enjoy !

2 – Click on the Link on the top right of the map , and then click  Customise and preview embedded map

3 – In the new window, we can adjust the map size or the view…

4 – Copy and paste the code that Google gave you to embed in your website

1 – Open this file [Your Themes]/template/page/html/breadcrumbs.phtml , if its not there, just copy the breadcrumbs.phtml in base/template/page/html/ to your theme in order to keep your default theme

2 – Delete the last line : <?php endif; ?>

3 – Add these codes to the end:

<?php else: ?>
<?php if(Mage::getSingleton(‘cms/page’)->getIdentifier() != ‘home’): ?>
<div>
<ul>
<li><a href=”<?php echo $this->getUrl(”) ?>”>Home</a><span>/ </span></li>
<li><strong><?php echo $this->getLayout()->getBlock(‘head’)->getTitle() ?></strong></li>
</ul>
</div>
<?php endif; endif;?>

Done ! Enjoy !

* Add the category tree of current viewing in left navigation sidebar instead of the “Browse by” box on top

* Remove the popup menu

There are 3 files that you need to change, including one hardcode file (navigation.php). Therefore, you better make sure that you already backup these files before changing them. And also, keep changing the hardcode file that way whenever you update your Margento version because it may change this file automatically. (My current ver is 1.4.0.1)

Get into your current theme in your Magento folder, in this case, my theme is “TRANGUYEN” :

1) app\design\frontend\default\TRANGUYEN\layout\catalog.xml : find and remove some codes in lines 82 to 84 like this

<!–<reference name=”left”>
<block type=”catalog/navigation” name=”catalog.leftnav” after=”currency” template=”catalog/navigation/left.phtml”/>
</reference>–>

2) skin\frontend\default\TRANGUYEN\css\styles.css : add these codes in line 1182 to 1188 like this, (max level = 5)

/*new code for leftnav*/
#leftnav li.level1 { padding-left:10px; }
#leftnav li.level2 { padding-left:20px; }
#leftnav li.level3 { padding-left:30px; }
#leftnav li.level4 { padding-left:40px; }
#leftnav li.level5 { padding-left:50px; }
/*end new code*/

3) app\code\core\Mage\Catalog\Block\navigation.php: this is the core code file of Magento, you need to add some codes in lines 223 and 234 as below:

Copy code:

if ($this->isCategoryActive($category)) {     // new code for left navigation category tree
if ($hasChildren){

$j = 0;
$htmlChildren = ”;
foreach ($children as $child) {
if ($child->getIsActive()) {
$htmlChildren.= $this->drawItem($child, $level+1, ++$j >= $cnt);
}
}

if (!empty($htmlChildren)) {
/*$html.= ‘<ul>’.”\n”                  // new code for left navigation category tree
.$htmlChildren                             //
.’</ul>’;*/                                       //
$html .= $htmlChildren;         //
}

}
}

Done. Enjoy !