How Do I Change the Magento Default Dashboard with an Extension?

What is the easiest way to improve your Magento dashboard for eCommerce? Is there an extension?

I've long been bothered by the default Magento dashboard, but have also had a terribly difficult time trying to code the dashboard myself. 

My first thought was to create something that would help me better find customers and track where we would lose a customer along the purchasing process. For example, would the customer leave the shopping cart because the shipping was too high or was my site's checkout process not clear enough. This is essential information for every eCommerce business owner. But, without programming knowledge, it can prove to be difficult to program something like this.

Luckily, I've stumbled upon a fantastic extension.  It literally blew me away and best of all it is free. 

It has real time analytics and an actionable dashboard! 

It also gives you information about visits, orders, revenues, conversion %, average order value, and revenue per visit. One of the most important things is that it looks presentable and clean on your admin dash. 

Jirafe turned my dashboard into this! 

[Continue reading...]

CSS - How to Setup Different Website Background Images When Viewed via Mobile Phones vs. Tablets vs. Computer

Media Query in CSS to have different devices open up different backgrounds

Most of us bootstrappers do not have the capital to hire someone to create a mobile website. We are forced to find alternative solutions to solve our issues.

What happens when your website shows up fine on your computer, but then it doesn't display properly on your mobile phone or tablet?

Specifically, I had the issue of my background image showing up fine on my laptop/computer, but when displayed on my phone, it became distorted or the images were taking too long to load.

I wanted to figure out if I could show a different background when viewing on a laptop versus tablet or mobile device.

The solution is to use Media Query. Basically what it does is based on the device's width, it will display a different background. Below is a breakdown of the CSS coding you can use. 

In addition, you can change the image versus the color by adding:
background-image:url('INSERT IMG URL');
after body {

On regular browsers you should get the teal background color.
1) orange on an ipad (landscape)
2) black on an ipad (portrait)
3) red on an iphone 4 (portrait)
4) pink on an iphone 4 (landscape)
5) green on regular smartphones, e.g Androids (landscape)
6) purple on a regular smartphone (portrait)

body {
    background-color:teal;
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
    body {
        background-color:yellow;
    }
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
    body {
        background-color:orange;
    }
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
    body {
        background-color:black;
    }
}

/* iPhone 4 - (portrait) ---------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:portrait),
only screen and (min-device-pixel-ratio : 2)  and (orientation:portrait){
    body {
        background-color:red;
    }
}

/* iPhone 4 - (landscape) ---------- */
@media screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:landscape), screen and (min-device-pixel-ratio : 2) and (orientation:landscape){
    body {
        background-color:pink;
    }
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px)
and (max-width: 480px) {
    body {
        background-color:green;
    }
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
    body {
        background-color:purple;
    }
}`

[Continue reading...]

How do you change the bookmarks in the aheadWorks Blog extension for Magneto Community?

This is how you change the bookmarks in the aheadWorks Blog extension for Magneto Community.

Previously I made a post about adding a Blog extension to Magento Community. There is an option to add bookmark buttons to the bottom of the blog post. But, the default bookmarks provided include social media sites that are largely outdated. For example, I believe they included Digg and Delicious. While these are still available to use, most users don't use these any longer.

Here is the end result after my changes.

There also isn't a user friendly option to easily change the bookmark links out for Google+, Pintrest, Twitter, or LinkedIn. To do you you have to dive a bit deeper into the code.

Here is how you can do it.

In your hosting site, you can manage bookmarks within this file -

\app\design\frontend\default\default\template\aw_blog\bookmark.phtml

Find this code:

<div class="postBookmarks"><h4>Bookmark with:</h4>

After the above code add the below: 

For Facebook add: 

    <a target="_blank" href="http://www.facebook.com/sharer.php?u=<?php echo $post->getAddress(); ?>&t=<?php echo $post->getTitle(); ?>" class="bm">
        <img src="<?php echo Mage::getDesign()->getSkinUrl('aw_blog/images/communityIcons'); ?>/http-www-facebook-com-.gif" width="16" height="16" alt = "" /> <?php echo $this->__(''); ?></a>

For Twitter add:

    <a target="_blank" href="http://twitter.com/home?status=<?php echo $this->getPost()->getTitle();?>%20<?php echo $this->getPost()->getAddress();?>" class="bm">
<img src="<?php echo Mage::getDesign()->getSkinUrl('aw_blog/images/communityIcons'); ?>/http-twitter-com.gif" width="16" border="0" height="16"> </a>

For Google+ add:

<a target="_blank" href="https://plus.google.com/share?url=<?php echo $this->getPost()->getAddress();?>&title=<?php echo $this->getPost()->getTitle();?>&annotation=<?php echo $this->getPost()->getTitle();?>&cd=bm&btnA=Add" class="bm">
<img src="<?php echo Mage::getDesign()->getSkinUrl('aw_blog/images/communityIcons'); ?>/http-google-com-bookmarks.gif" width="16" border="0" height="16"> </a>&nbsp

For LinkedIn add:

<a target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php echo $this->getPost()->getTitle();?>&title=<?php echo $this->getPost()->getTitle();?>" class="bm">
<img src="<?php echo Mage::getDesign()->getSkinUrl('aw_blog/images/communityIcons'); ?>/http-linkedin-com.gif" width="16" border="0" height="16"> </a>
</div>

The Blog package includes many different icons which you can find within the below directory. 

\skin\frontend\default\default\aw_blog\images\communityIcons

These can be changed by replacing/renaming the logos. In the above code, if you search for .gif that is the 'icon' name that will show up on your webpage and is stored in the above directory trail.

[Continue reading...]

Top 5 Free Magento Community eCommerce Extensions

Five Practical Magento Community Extensions - Version 1.7 and On

Blog - Community Edition

New websites are launched everyday and as the world begins to clog up the search engines, it becomes more and more difficult to get your website to the top of the search engine listing for your desired keywords. We need every edge we can get. By adding a blog to your eCommerce site, you have improve the odds of the search engines picking up your website.

This extension will help you create a blog within your eCommerce site!

Seamless Delete Order

During the testing phases of creating a Magento Community eCommerce site, it is not unlikely that we will run test orders. How else are you suppose to know if your site works? This means adding products to our carts, creating accounts, and checking out as if we were a real customer. Magento doesn't have the option to delete orders. After checking on numerous sites, where people have suggested complex coding, I came across something practical. A Magento extension called Seamless Delete Order.

What this extension does is help you delete selected orders that you have in your Sales > Order Page.

Offline Maintenance Page

You would have thought this extension would have already been included in Magento, but it isn't. This extension lets you take your site offline while you work on your site. The best thing about this extension is that you will and only the admin will be able to see the site when it is taken offline. That way you can adjust PHP, Java, HTML, CSS, and MySQL coding and see the effects immediately.

My only advice is to clear your cache after you've made changes to your coding to see the effect on your webpages. You can do this by hitting ctrl+shift+del.

Your Online store on Facebook.

Add your store to Facebook. This extension creates a seamless transition into Facebook. Most of us already think of selling on eBay or Amazon, but what about Facebook. There are limitation to the number of items you can put on your Facebook store, but these can be lifted if you are willing to upgrade your extension. Personally, I feel this just gives you another avenue to generate revenues for your eCommerce site. A must have.

Facebook Connect and Like Free

It seems like nowadays, everything is integrated. You can now use  your Facebook to help facilitate the signing up with an account process. It is always a pain to sign up for an account just to put in an order. Sometimes you just want to buy the item. Well this Facebook Magento integration helps you reduce the number of steps you need to put in an order. 

[Continue reading...]

Ecommerce Experiment

I am probably going to allocate anywhere from $200-2000 for my new project.

I'm taking the plunge!

Stay tuned... this will be a work in progress.

[Continue reading...]