Web Designer Online » Development http://www.webdesigneronline.co.uk Web Designer Online Thu, 29 Jul 2010 09:40:22 +0000 http://wordpress.org/?v=2.8 en hourly 1 Some useful Magento template code snippets http://www.webdesigneronline.co.uk/some-useful-magento-template-code-snippets http://www.webdesigneronline.co.uk/some-useful-magento-template-code-snippets#comments Sat, 17 Jul 2010 00:33:22 +0000 Ahmed http://www.webdesigneronline.co.uk/?p=576

Over the last 2 month, I’ve built a few Magento sites during which I’ve had certain requests to add some basic extras to the site template – basic it may sound however if you have even a little experience with Magento, you’ll be aware of its complexity.

Product Reviews and Review form in a tab

1. Add the following:

<catalog_product_view>
<reference name=”product.info.tabs”>
<block type=”review/form” name=”product.review.form” as=”review_form”/>
<action method=”addTab” translate=”title” module=”review”>
<alias>avis</alias>
<title>Avis / commentaires</title>
<block>review/product_view_list</block>
<template>review/product/view/list.phtml</template>
</action>
</reference>

2. Add

<?php
layout = Mage::getSingleton(’core/layout’);
$block = $layout->getBlock(’content’)->getChild(’product.info’)->getChild(’info_tabs’)->getChild(’review_form’);
echo $block->toHtml();
?>

to app/design/frontend/[your_theme]/template/review/product/list.phtml

Note: For the above to work, your theme should already be using product tabs (Many tutorials are available online if you don’t have tabs)

Source: http://www.magentocommerce.com/boards/viewthread/31712/

Show Sub-Categories (as images with text) on Category or product Pages (and sort by name)

If a category contains both products and further sub-categories, then this code can be used so such a category shows both products and sub-categories.

Add the following:

<?php
function sortCategories($a, $b) {
return strcmp($a['name'], $b['name']);
}
?>
<?php
$obj = new Mage_Catalog_Block_Navigation();
$cat = Mage::getModel(’catalog/category’)->load($obj->getCurrentCategory()->getId()); //get current cat
$subcats = $cat->getChildren(); // Get sub cats
// loop on it
if ($subcats) { ?>
<h2 class=”catptitle”>Sub-categories</h2>
<?php }
$categoryArray = array();
foreach(explode(’,',$subcats) as $subCatid){ // split up the mage data for use
$_category = Mage::getModel(’catalog/category’)->load($subCatid);
if($_category->getIsActive()){
$caturl  = $_category->getURL(); // get link to image
$catname = $_category->getName(); // get the name
$catdesc = $_category->getDescription(); // get the name
if($_category->getImageUrl()){
$catimg = $_category->getImageUrl(); // hey, we got image
}else{
$catimg=null;
continue;
} // this is the basic testing data, format as desired & good luck!
$catdescTwo = substr(strip_tags($catdesc), 0, 70);
$categoryArray[] = array(
‘name’ => $catname,
‘url’ => $caturl,
‘desc’ => $catdescTwo,
‘img’ => $catimg
);
}
}
usort($categoryArray, “sortCategories”);
foreach ($categoryArray as $categoryItem) {
echo ‘<a href=”‘.$categoryItem['url'].’”>’.$categoryItem['name'].’</a>
<a href=”‘.$categoryItem['url'].’”><img alt=”" src=”‘.$categoryItem['img'].’” /></a>
‘.$categoryItem['desc'].’…’;
}
?>

to app/design/frontend/[your_theme]/template/catalog/category/list.phtml

OR app/design/frontend/[your_theme]/template/catalog/product/list.phtml

Display RSS Feed items

Step 1

Create a file called latest_news.phtml in app/design/frontend/default/[your_theme]/template/callouts/latest_news.phtml with the following:

<?php $channel = new Zend_Feed_Rss(’INSERT FEED URL’); ?>
<div class=”block block-latest-news”>
<div class=”sideBestS”>
<h2><?php echo $this->__(’Latest News’) ?></h2>
</div>
<div class=”block-content”>
<ol id=”graybox-latest-news”>
<?php $i = 0; ?>
<?php foreach ($channel as $item): ?>
<?php if ($i != 3) { ?>
<li><a href=”<?php echo $item->link; ?>”><?php echo $item->title; ?></a>
<p><?php echo substr($item->description,0,179) . “…”; ?></p>
</li>
<?php $i++; ?>
<?php } ?>
<?php endforeach; ?>
</ol>
</div>
</div>

Step 2

Add the following:

<reference name=”right”>
<block type=”core/template” name=”top.search” as=”topSearch” template=”catalogsearch/form.mini.phtml”/>
<block type=”core/template” name=”right.permanent.callout” template=”callouts/right_col.phtml”/>
<block type=”core/template” name=”right.latest.news” template=”callouts/latest_news.phtml”/>
</reference>

to app/design/frontend/[your_theme]/layout/page.xml

Note: The above will add the code to the right sidebar – you can reference it elsewhere on the site

Display a product’s “quantity in stock” on your Product Pages

<?php $stock_count = (int) Mage::getModel(’cataloginventory/stock_item’)->loadByProduct($this->getProduct())->getQty(); ?>

<?php echo $stock_count ?>

Flush/force DNS (Windows only)

Many a time, when you change the DNS records and nameservers of a domain to point to the new site, it can take up to 72 hours to propagate over the internet. Unfortunately sometimes, the client/customer/general users may see the new site before the developer and if there are any issues then the developer won’t be able to fix them until they can see the new site. Previously i used to wait like anybody else however recently a colleague showed me a method by which I can force my browser to  view the new site!

Step 1:

Open command promt (search/run “CMD” in windows)

In Command promt, type the following:

“ipconfig /flushdns”

image

Step 2

Go to the folder:

%SystemRoot%\system32\drivers\etc\

For windows 7, %SystemRoot% is C:\Windows\

For windows XP, it may be a little different.

Inside the folder “etc” is a file named – “hosts”. Open this with Notepad and add the line

xx.xxx.xxx.xx www.YOUR-DOMAIN.co.uk

At the bottom of the file (where xx.xxx.xxx.xx is the ip address of the new host)

Then you will have to clear your browser cache.

Ecommerce tracking in Magento Using Google Analytics

This one is simple.

Go to System > Configuration > Google API and insert you analytics ID.

Then

  • login to Google analytics
  • Select the account for your site
  • Click edit
  • on “Main Website Profile Information”, click edit
  • tick the radio button “Yes, an E-Commerce site”

Site search tracking in Magento Using Google Analytics

  • login to Google analytics
  • Select the account for your site
  • Click edit
  • on “Main Website Profile Information”, click edit
  • tick the radio button “Do Track Site Search”
  • insert the letter “q” in the input box

Display PHTML files in Dreamweaver

http://www.dreamweaverclub.com/dreamweaver-phtml-inc.php

Conclusion

Is there anything else you would like to do with Magento? leave a note below and I’ll see what i can do!

]]> http://www.webdesigneronline.co.uk/some-useful-magento-template-code-snippets/feed 1 10 great Alternatives to phpMyAdmin http://www.webdesigneronline.co.uk/10-great-alternatives-to-phpmyadmin http://www.webdesigneronline.co.uk/10-great-alternatives-to-phpmyadmin#comments Sat, 10 Oct 2009 15:32:29 +0000 Ahmed http://www.webdesigneronline.co.uk/?p=469

Most people in the web development world are under the impression that phpMyAdmin is the only MySQL client out there for websites. Going a step further, some users are aware of alternative however assume that phpMyAdmin is the best.

Now, I agree that phpMyAdmin is one of the best out there and is is very user friendly. I myself also used phpMyAdmin much until recently… I got introduced to another program which within an hour became my favourite and also this led me to research others out there. Thus, this post!

10 great Alternatives to phpMyAdmin

Adminer (formerly phpMinAdmin)

A full-featured MySQL management tool written in PHP. Does more or less everything phpMyAdmin however consist of a single file only that is ready to upload to your servers and connect to the DB.

image

Navicat

This, in my opinion, is the best MySQL client out there. It does everything you want from a very user friendly interface. However, it doesn’t come free. There is a small price tag to it but is well worth it!

image

Sequel Pro

One for the Mac users.

image

SQLWave

image

SQLyog

image

BlueSQL

Free web based DB management tool.

image

SQL Buddy

image

DBDesigner 4

image

SQLGate

image

HeidiSQL

image

Conclusion

Navicat and Adminer are probably the only other MySQL Clients you need in addition to phpMyAdmin. The rest? I’ll leave them to you to discover which is best suited to you.

]]> http://www.webdesigneronline.co.uk/10-great-alternatives-to-phpmyadmin/feed 55 10 Advance MooTools Scripts to Outshine your Industry http://www.webdesigneronline.co.uk/10-advance-mootools-scripts-to-outshine-your-industry http://www.webdesigneronline.co.uk/10-advance-mootools-scripts-to-outshine-your-industry#comments Tue, 04 Aug 2009 19:18:53 +0000 Ahmed http://www.webdesigneronline.co.uk/?p=279

Following my previous JavaScript article on jQuery – 10 Advance jQuery Scripts to take Your Website to the Next Level – Where I showcased some awesome jQuery scripts, I thought it good to do the same with MooTools.

I could have called this post “50 Advance MooTools Scripts” but kept it at 10 as otherwise you would lose interest and many of the scripts would have been useless. Thus, 10 is the special number today!

MooTools

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

Similar to jQuery, MooTools is another very popular JavaScript framework to help do more with less code. I have selected some awesome MooTools script you can use to help outshine the your industry!

Advanced Mootools

Calendar (to input dates)

A cool looking calendar by which you can easily select dates.

  • Style-able and semantic XHTML
  • Highly configurable use of inputs and selects
  • Future/past restrictions
  • Multi Calendar Support
  • And much more!

Homepage (inc. Demo, Download)

mParallax

SIMPLY AMAZING.

Turn’s a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way


Complicated, I know… See the effect in action and you’ll understand in a second!

Homepage (inc. Demo’s, Download)

FancyUpload

An elegant upload script:

FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable (is that a word?) via CSS and XHTML and uses MooTools to work in all modern browsers

Homepage (inc. Demo’s, Download)

FancyForm

Not your standard checkbox.

Homepage (inc. Demo’s, Download)

TableGear

Just click any field and start editing it. As soon as you move away from the field, it regains all of its formatting.

  • Designed for PHP/MySQL. (Works with other also)
  • Degradable to work without JavaScript
  • Very customisable

Homepage (inc. Download) | Demo

MooScroll

Customise scroll bars beyond your imagination. Strictly for the Geek only…

Homepage (inc. Demo’s, Download)

MenuMatic

Nice horizontal/vertical menu effect.

Homepage (inc. Download) | Demo 1(Horizontal) | Demo 2 (Vertical)

Slider with Range Indicator

Select a maximum and minimum value using a slider. You can customise the look how you like!

Homepage (inc. Demo, Download)

Horizontal Image Menu

Very nice! (With quite a few options!)

Homepage (inc. Demo, Download)

Kroppr – image cropping script

Impress all your users with this fine script. An image cropping tool that is able to rotate, zoom and move the image in the real time without using plugin’s – such as flash or java.

It’s very simple to implement also!

Homepage (inc. Demo, Download)

Conclusion

Who said jQuery was the only JavaScript library that’s cool. MooTools can be cool too!

If I was asked to recommend one above the other, I wouldn’t give a definite answer. It all depends on what your requirements are. Thereafter, you need to research both scripts and see which would be best for you in the long term!

Useful Links

]]> http://www.webdesigneronline.co.uk/10-advance-mootools-scripts-to-outshine-your-industry/feed 4 10 Advance jQuery Scripts to take Your Website to the Next Level http://www.webdesigneronline.co.uk/10-advance-jquery-scripts-to-take-your-website-to-the-next-level http://www.webdesigneronline.co.uk/10-advance-jquery-scripts-to-take-your-website-to-the-next-level#comments Thu, 23 Jul 2009 07:55:16 +0000 Ahmed http://www.webdesigneronline.co.uk/?p=102

Before 2008, there were only a handful (compared to now) of sites which were of a very high level of quality and stunningly unique; standing out from the rest. It was in 2008 when many tools and frameworks became more popular and widely used amongst the masses. This included CSS based design and everyone’s favourite – Wordpress! Due to this, today, every half decent web designer has a stunning website. You’re probably wondering what I’m getting at? To make your website standout from the rest, you need to take your website to the next level. In this post, I’m going to showcase many Advanced jQuery techniques to add that extra touch to your site.

Advanced jQuery

Below are a list of sites that offer some amazing jQuery script by which you can achieve some stunning effect for your site. I have given a brief introduction to each effect with a link to the original site direct download.

AJAX Fancy Captcha

Taking Captcha’s to the next level! A new, intuitive drag and drop captcha:


Here we’re asked to drag the pencil into the circle! Neat!

Note: According to the producers, this Captcha’s security level is medium.

Homepage (inc. Demo, Download)

jQuery Cycle – Custom Incoming/Outgoing Transitions

Cool image transitions that were once possible in Flash only. This powerful script has room for lots of customisation to all you to fine grain your transition over speed and easing in/out transitions.

Homepage (inc. Demo, Download)

Cool jQuery Sliding Panel

I really like this effect (might implement it here in the future!).

Homepage (inc. Download) | Demo | Tutorial for Wordpress 2.7+

jQuery Scrollable

A very nice/smooth script which you can implement to a div.

This script can be used for

  • Image Galleries
  • Products
  • Navigation
  • Anything else!

Some features:

  • Horizontal/Vertical
  • Can Scroll using navigational buttons, API calls, keyboard arrow keys, and the mouse scroll wheel.
  • Ability to make your own effects
  • and lots of other stuff! See script homepage for script
Homepage (inc. Demo, Download)

jQuery Filterable Portfolio

An awesome effect for portfolios and just showcasing your work!

Here you click the tabs above the images and jQuery performs a cool transition to filter out the required category!

Homepage (inc. Download) | Demo

Animated Portfolio

A Nice Effect!

Homepage (inc. Download) | Demo

Password Strength Meter

A customisable password strength meter to show how secure your password is.

With a bit of tweaking, you should be able to implement it with your registration forms. I’m sure the download contains all the instructions.

Note: Images can be changed!

Homepage (inc. Download) | Demo

jQuery Slide-In Tab

Again from the same site as the above two. This is similar to an accordion effect however horizontal from the edge of the screen.

Homepage (inc. Download) | Demo

JQuery Dashboard

Like the one found on a Mac.

Homepage (inc. Download, Full tutorial) | Demo

Smooth Tabbed Menu

Smooooth!

Homepage (inc. Download) | Demo

BONUS – jQuery Tetris!!!

WIN!

Source Code

Conclusion

You need to initially impress your users within a very short amount of time and one of the methods to achieve this is to use jQuery. By adopting some of the uses above backed up by some inspiration on your side, you can be sure that many of your users will return.

Important Note! All of the above methods are the foundation upon which a strong structure can be built. Use it to your advantage. With some tweaking and CSS, you can take much more out of them. For a freelancer. it’s very important.

If you’re not in the web design/development industry, then using even the most basic jQuery will more than likely impress your visitors! (It’s alright for some!)

Useful Links

]]> http://www.webdesigneronline.co.uk/10-advance-jquery-scripts-to-take-your-website-to-the-next-level/feed 48