This week was a surprise Magento week at WebResourcesDepot for getting you closer to this awesome open source e-commerce application.

2 posts are published to guide you on installing & customizing your e-store:

• The Ultimate Guide To Creating E-Commerce Websites With Magento (Part 1)
  
• The Ultimate Guide To Creating E-Commerce Websites With Magento (Part 2)
  

And here is the 3rd (last) one which will help you a lot in beautifying your shop with 20+ free Magento themes:

Foot Prints – demo

Magento Classic – demo

Modern

EversonStore – demo

Cloth Store – demo

Telescope – demo

Electronic Store – demo

Absolute – demo

Blue Skin

Eco Handbag – demo

Grayscale

Kalocsa – demo

Sigyn SM – demo

Glam – demo

Teal – demo

Linen – demo

Hardwood – demo

Inspire Blue

Refresh

mCommerce – iPhone Optimized

Books On Magento:

• The Definitive Guide to Magento
  
• Magento 1.3: PHP Developer's Guide
  
• Magento 1.3 Theme Design
  

This article is sponsored by SSLmatic which sells SSL certificates (RapidSSL, Geotrust, Verisign) for much cheaper prices & offers great support. Check their site to get the cheap SSL certificates.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• WooThemes Launches With New Themes
• Skin Your Ajax Applications: ThemeRoller

In the first part of the Ultimate Magento Guide, we covered the back-end features of this open source e-commerce software. We also created a simple product and displayed it in our e-store.

Today we will focus on "customizing the basic layout of our e-store",  "what Magento Connect is” and "how we can install themes + extensions".

Let's Turn Off The Cache

Before heading to the customization, we will turn off the cache mode of Magento so that we can see our changes. Otherwise, Magento will keep showing the cached pages.

We can turn off the cache from our back-end. Go to System>Cache Management. Choose "disable" from the drop down menu which is an option in "All Cache". Follow the screenshot below if you are having some problem.

After disabling the cache, we will now change the name of our e-store which appears on many places (like after a new user registration). We can change it by going to System> Manage Stores, click the "Default Store View" and put the actual name of the store there just like “WRD E-Store”.

We can now customize our homepage. Let's start with the default logo and default welcome message.

Upload your logo to the mag/skin/frontend/default/default/images/ folder. This is the images folder of the default theme we are using now.

Go to your Magento back-end> System> Configuration> General> Design> Header.

Define the logo image source here and we are done with customizing our logo.

You can now see your front-end showing the new logo. And also, it is possible to change the alternative text of your logo and default welcome message here.

After these updates, our header looks like this:

Now we will move to "changing the homepage layout" in order to show our products there.

In the first part of our guide, I had described the CMS capabilities of Magento. We use these CMS capabilities for changing the look of our front page on WRD E-Store as “HOME”. Consdering "HOME "is also a static page, different snippets can be used to show different arrangements of products.

Showing all products of your e-store on homepage
{{block type="catalog/product_list" name="home.catalog.product.list" alias="products_homepage" template="catalog/product/list.phtml"}}

Showing only the new products
{{block type="catalog/product_new" name="home.catalog.product.new" alias="product_homepage" template="catalog/product/new.phtml"}}

Showing only the products from a specific category
{{block type="catalog/product_list" name="home.catalog.product.list" alias="products_homepage" category_id="4" template="catalog/product/list.phtml"}}

You can get the "category ID" at "Manage Categories" page under "Catalog". Then click on the specific category and you will get the "ID" in the header just like the following screenshot.

Now go to CMS> Manage Pages and select "homepage". You can add any of the previously mentioned snippets according to your needs. As we have only one product, I have used the 1^st snippet. These snippets are actually "content blocks" of Magento.

You can also select the layout of your "homepage" from here. Go to "Custom Design" and choose a layout.

The default Magento theme comes with 5 layout options

• Empty
• No Sidebar
• Two-column layout with left sidebar
• Two-column layout with left sidebar
• Three-column Layout

 I have selected 3-column layout and now we have a good-looking e-store.

Callouts

Callouts are the visuals (banners) for self-promotion like announcing special deals, new products, etc.

Now, we will upload new callouts for a small but awesome touch to our e-store as its still showing the default ones.

Customizing callouts:

1. Simply replace your image with col_right_callout.jpg (right callout) or col_lef_callout.jpg (left callout) in \skin\frontend\default\default\images\media.
2. You can change the alternative text and link for right callout by going to right_col.phtml in \app\design\frontend\default\default\template\callouts.
3. You can change the alternate text and link for left callout by going to catalog.xml in \app\design\frontend\default\default\layout.

After changing the callouts, I have following the following output of the e-commerce store.

We are done with the customization of the home page. Now we will take a look on what is Magento Connect.

Magento Connect

Magento Connect is the brand name for the official marketplace of plugins and themes where you can download/buy free and premium themes and extensions.

For example, by default, Magento only supports the most popular shipping methods and payment gateways. You can download extensions to extend its payment capabilities.

How to install an extension?

First off all, select an extension from Magento Connect. You will get an extension key upon agreeing with their terms and conditions. As an example, I'm getting the key of mCommerce-iPhone Optimized Theme.

Copy that key and return back to your back-end. Go to System> Magento Connect > Magento Connect Manager. You will be prompted once again to enter your admin login details. Fill in your credentials, put the extension key and click connect. The same console is used for updating Magento.

How to install a theme?

You can install a new theme by following the same process as written above.

When the installation via Magento Connect is completed, go to System> Configuration> General> Design>Themes, put the name of the theme (for example: Modern Theme), save it and you are done.

After installing a new theme, your home page may not load appropriately because of the different layout options. Just go to CMS> Manage Pages and choose the appropriate column layout and everything will be fixed.

The "Magento Ultimate Guide Series" includes necessary information for beginner and intermediate users. If you are looking for advanced sources and want to design for Magento then I will highly suggest you to read the wiki page.

Author: Saad Bassi

Saad Bassi is a 20 years old web developer from Pakistan who loves to create beautiful websites with great user experience.

He is the co-editor of CrispyTech and 1stWebDesigner, blogs about the next Windows at Windows8Geek and loves to make new friends, so, don't forget to say him a hello on Twitter.

Books On Magento:

• The Definitive Guide to Magento
  
• Magento 1.3: PHP Developer's Guide
  
• Magento 1.3 Theme Design
  

This article is sponsored by SSLmatic which sells SSL certificates (RapidSSL, Geotrust, Verisign) for much cheaper prices & offers great support. Check their site to get the cheap SSL certificates.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Wiki-Like Project Management Tool: Streber
• Web-Based MySQL Management With Only 1 File: Adminer
• Web Server That Runs On CD-Rom: Server2Go
• Web Based Task Manager: TaskFreak!
• Voice Enabled Powerful Web Chat Software: Ajax Chat

In the process of launching an e-store, when it comes to choosing the right solution, you will get puzzled by the hundreds of solutions available.

The options range from simple and free shopping cart systems to complex and paid e-commerce softwares which can charge you for both getting and “keeping” your shop online.

However, there are some applications which offer great features but still free.

One of the best and open source e-commerce solutions available for free is Magento.

In the following comprehensive tutorial, we will see what are the benefits and drawbacks of using Magento as your e-commerce application. We will make a demo store and take a look on some basic and intermediate features of Magento. So what are we waiting for? Let’s get started.

Why use Magento?

Pros:

• free (absolutely free, no charges at all for community version)
• open source (you can even make it better by writing your own code)
• easy upgrades (automatic upgrades without loosing your customizations)
• extensions, plugins (enhance your Magento installation with plugins just like WordPress)
• very comprehensive theming system (custom themes for your store similar to WordPress)
• downloadable goodies support

Cons:

• resource intensive (yes, Magento needs a lot of memory in order to work efficiently but don’t worry, we will also learn how to fix it up to run Magento in low cost hosting solutions.)
• latest version of PHP not supported (Magento only works with PHP 5.2)

Downloading Magento:

You can download Magento from their website. There are two versions available. One is the online installer and 2^nd  is the complete setup.  I will recommend you to download the full package.

Another option on this page is of downloading sample data (it is like sample text to fill your e-shop). As we are going to make an original e-store, we will not download it.

I am using Magento 1.3.2.3 and you can download it by going to release archives on Magento download page. The latest stable release 1.4.1 came out but still has some errors. So I will not recommend you to use it. However, this guide should also work with it.

Installing Magento:

As said earlier, the latest stable release of Magento works only with PHP 5.2 which is installed on most servers and some web servers also come with a one-click install option.

For learning purposes, it is a good practice to install it on localhost using xampp. It is recommended to use xampp 1.7.0/1.7.1 for easy install of Magento as it comes with PHP 5.2. If you are using the latest version of xampp, you will have to manually install PHP 5.2 if you want to run Magento. I will show you how to install Magento on xampp 1.7.0/1.7.1. You can download old versions of xampp from its official source code repository.

After installing xampp, go to your xampp directory. In my case, it is c:\xampp.

The two directories, C:\xampp\php and C:\xampp\apache\bin include php.ini file which is the configuration file for PHP language. We will uncomment the following lines of code to enable some necessary add-ons required by Magento to work properly.

Line 582: ;extension=php_curl.dll
Line 622: ;extension=php_mcrypt_filter.dll
Line 624: ;extension=php_mhash.dll

You can uncomment the lines mentioned above by simply removing the semi-colon which is the first character for each line of code.

Now, we will have to replace the libmysql.dll contained in xampp 1.7.0/1.7.1 which is buggy and will crash apache server during Magento installation. You can download a better version from here (or it can be found inside the MySQL server downloads from mysql.com). After the download, replace it with the existing libmysql.dll in C:\xampp\php and C:\xampp\apache\bin.

The last step is to change some code lines in Magento’s files to disable some checks. Otherwise we will not be able to login on localhost. Go to your Magento folder (In my case it is C:\xampp\htdocs\magento) then go to app/code/core/Mage/Core/Model/Session/Abstract/Varien.php. Then point to line 78. You will see session cookie parameters. We will comment line 81,82,83 to disable cookies. I am writing down the difference between original and edited file to give you a better understanding.

Original varien.php (Line 78 to Line 84)

$cookieParams = array(
	'lifetime' => $cookie->getLifetime(),
	'path'     => $cookie->getPath(),
	'domain'   => $cookie->getConfigDomain(),
	'secure'   => $cookie->isSecure(),
	'httponly' => $cookie->getHttponly()
);

Edited varien.php (Line 78 to Line 84)

$cookieParams = array(
	'lifetime' => $cookie->getLifetime(),
	'path'     => $cookie->getPath()
	//'domain'   => $cookie->getConfigDomain(),
	//'secure'   => $cookie->isSecure(),
	//'httponly' => $cookie->getHttponly()
);

We are done with all the fixes needed to run Magento on localhost. You have to fix these things only when you are installing it on localhost. On live servers, it doesn't need customizations

Now we will make a MySQL database in phpmyadmin as Magento uses MySQL to store its data.

Here we have created a MySQL database named Magento. So we are done. Let’s point our browser to http://localhost/magento.

Magento Installation Wizard

If you have followed all the steps correctly then you will get the welcome screen of Magento installation wizard.

Step 1:

The first step will show you the terms and conditions to use Magento, simply accept it and press next.

Step 2:

The second step is about localization. You will set default location, time zone and currency for your online shop. We are done here. Let’s move to the next step.

Step 3:

In the 3^rd step, you will see a screen asking for the MySQL database. As we created one with the name Magento, we will fill the information with it. The default password for the administrator user “root” in xampp is blank. So you don’t have to put anything here.

You will also be asked for the table prefix in the database. As we are installing Magento on localhost, it is not that important. But when you are going to create a practical store online, always fill this field with something weird and unpredictable like any randomly generated number as it will save you from SQL injection hacking.

Second box on this step asks you the base URL which will be used by your customers to browse the e-store. Moreover, the admin backend link will also be given here. You can also enable mod_rewrite, an Apache module to create custom links for better search engine optimization. Mod_rewrite is offered in most hosting solutions. You can also enable SSL here.

The last option is session storage. If you are on a shared hosting solution, then I will suggest you to choose file system as choosing MySQL database can put a heavy load on your servers. However, using MySQL to store session data is good from a security point of view.

Step 4:

Last step in the Magento installation Wizard is to create the admin user. You will have to put your first, last name, e-mail, username and passwords. Magento will ask you for the encryption key as it encrypts all the data.

In case you want to decrypt it; you will have to give the encryption key. Leave this field empty and Magento will use some random key for this purpose which will be given to you in next step.

Keep this key in safe place as it is very important.

At this point we have successfully installed Magento on our localhost. As a last step, you will be asked whether you want to go to the front or backend.

Front-end: it is the website which will be shown to the user upon access.

Back-end: it is your admin dashboard. Here you will manage your e-store.

Front-end

We will first get familiarized with the front-end and then come back to the back-end. This is how our default/empty store looks like.

For now, we have no products and an empty store so we will head up to the live demo on Magento’s official website.

Let’s start from the header.

On the left side of the header, there is Magento logo which is actually the logo of your online shop.  Later on, we will see how to customize it.

On the right side of the header, there is a search bar, a default welcome message after that, and some login/sign up links. You can also change your language here.

Category Bar: Magento uses categories to group same products. Each product should have at least one category. You can also use sub-categories for different products. Each category has its own page which you can customize from the back-end.

There are two sidebars on the demo store. Left sidebar is showing some offers and a popular tag block while right sidebar is showing your cart and the community poll.

The main content area is showing the landing page image and popular products of the store.

There are two other pages worth mentioning.

Category Page: This page shows up when a buyer clicks on a category link. It allows a buyer to sort products by position, name and price. Buyer can also choose the number of the products showing up on each page. Another feature of this page is grid and list view.

Product Page: This page shows up when a user clicks on a product to buy it. It contains short description of the product, a long description, price, and different images of the product just like Amazon.

Magento also has features for comparing products with each other and related products too. Now let’s move to our installation and have a look at the back-end (the admin area).

Back-end

Point your browser to http://locahost/magento/admin to login into the back-end. You will see a login area. Put your login information here which you created in step 2 of Magento installation wizard.

Here is how it looks like.

The following screenshots show you the Magento admin menu. We will explain each item separately and after that, we will create the e-store.

Dashboard: Gives an overview of your sales, orders and everything between them like customers, top products, etc. with the help of dynamic graphs.

The next tab is "sales". Let’s explore it.

Orders: All the orders by your customers are placed here. You can hold or unhold orders from this panel. You can also place new orders. Please keep in mind that it will be a temporary record and you can cancel these orders. At this step, the payment for the specific order is not yet confirmed.

Invoices: Invoice is the receipt of the payment for a specific order. After creating an invoice, the temporary order will be set as a permanent order and you will not be able to cancel it.

Shipments:  All the shipped products are placed here.

Credit Memo: Holds the records for refunded payments. For example; if you shipped a product to a customer and the customer demanded the refund after that, the specific record will lie under this tab.

Terms & Conditions: You can apply specific terms and conditions to your e-commerce store here.

Taxes: A very important tab in managing your e-commerce store. You can apply specific taxes with respect to the specific products and locations. A lot can be written on this feature but it will go beyond the scope of this guide.

The next tab in Magento backend is called catalog. Everything related to the products are inside this tab.

Manage Products: You can see all the products of your store. New products can also be created from here.

Manage Categories: Category management can be done under this tab.

Manage Attributes: Create different attributes on specific products. Explanation of attribute is mentioned below

What are Attributes?

An Attribute is a specific property of a product. For example: "resolution" and "color" of a high definition LCD monitor are attributes of that specific product. Products can also be grouped with the help of attributes.

Difference between Categories and Attributes

A very important concept in handling Magento like a pro is to understand the difference between categories and attributes. Categories are the main navigation menu of your e-store. For example: if you are selling computer related accessories, mouse, keyboards, processors can be categories and you can apply attributes like cache, clock speed, bus speed, price and so for the processor category. 

URL Rewrite Management: This is an awesome feature in Magento with respect to search engine optimization. You can change any link in your e-store to get a better place in search engines.

Search: This tab allows you to see what keywords were searched by your customers. It also tells you how many times a search has been made.

Tags: You can set tags for each product here. Tags are usually keywords which are good for SEO.

Google Base: An advanced feature. You will have to understand Google base before using this. Here is good explanation of Google Base.

Google Sitemap: You can generate the sitemap of your e-store for submitting it to the Google’s webmaster tools (another great feature when it comes to SEO).

The First Product

Now, we are able to create our first product as you have understood all the basic steps in maintaining Magento. After creating our demo e-store, I will explain you the remaining features. So let’s do it now.

Creating our first product

Each product should sit inside a category. Otherwise, it will not appear on your store. So, we will first create a category named "Mouse".

How to create a category in Magento?

The default store comes with an empty category named "default category". All the categories should be placed as sub-categories to this default category otherwise you will be unable to see them. Following screenshot shows the right method to add a category in Magento.

Let’s take a look at our first category.

You can choose the name + description to be displayed on category pages, the default image for the category and other options. Active option must be set to "yes". You will also be given the option here to set the meta keywords and description for this category which will appear on search engine listings.

When you will save the category, it will not appear under default category. You can do so by drag'n drop functionality.

Creating our first product with Magento

So, we have a category to group products. We are going to add the product now.

You will be asked to select the attribute set and type of the product.

Types of products:

1. Single Products can be sold individually. You can also group a single product with other single products using "group products".
2. Group Products contain many single products. They can be added to a customer’s cart with a single click. For example you can bundle an Apple magic mouse with a Macbook.
3. Configurable products allow customers to change different properties of a product.  For example: a customer can increase the ram of a specific processor if it is a configurable product.
4. Virtual Products are those products which are not physical. You can add additional warranties to this product.
5. Bundled Products are much like grouped products. There is not a big difference. Take a computer for example. You can remove monitor, graphics card and some other accessories from this product.
6. Downloadable products are pretty much self explanatory. An example is "premium themes". When a customer purchases such a product, he will be sent an e-mail with the product download link.

We will create a "single product" now.

You will have to mention the name of the product, short description and long description.

Following screenshot gives you the look of "New Product Tab". There are 10 tabs on the left menu. I will explain only those who are necessary to get started.

SKU: is an abbreviation of "Stock Keeping Unit". It’s a general term used in stocking items. What you need to learn is that each product in your store should have a unique SKU. In simplest word, it is an identifier for products.

Weight: weight for the product which can be important in calculating the shipping.

This window will show some additional tabs depending on the "attribute set" selected. The manufacturer and color fields are actually a part of the default attributes set.

Magento has the feature of generating RSS feeds and newsletters which include new products. Moreover, the new products also show up on homepage. In the next two fields, you can choose the period for which a product will be marked as "new".

You can enable or disable a product. If the product is set to be disabled, Magento will not show it on the front-end.

Visibility: allows you to choose the pages on which you want to show the product.

Price: The fields here are pretty self-explanatory. Special price allows you to give the customers discount for some days. Just like a sale on Christmas. This feature is for discounts and promotions.

Next tab is Meta Descriptions which is used for SEO of your store. You can set Meta title, keywords and Meta description here.

4th tab is Images. You can upload product photos here. By default, there are three types of images which Magento uses.

And here they are:

Small: shows up on category page

Thumbnail: shows up in shopping cart and

Base Image:  shows up on product page

Lets move to 5th tab.

Design tab allows you to customize the view of the product page. You can choose from different page layouts built in with Magento.

Inventory Tab allows you to set the quantity of number of products available in the store.

Category tab for selecting the category for your product . This is crucial. You will not be able to see your product until you select one category.

At this point you have a fully functional product and you can see your product on category pages. But we will take a look on remaining important tabs on creating a new product page.

Related Products tab allows you to select related products just like Amazon.

Up-Sells: Under this tab, you can select recommended products which the customer should buy instead of the one which we created now. The up-sells products can be of better quality and also expensive.

Cross-Sells: The products you want to show a customer on the shopping cart page before a user checks out can be set here.

Product Reviews: Ratings and product reviews for a specific product can be managed here.

Product Tags: You can set product tags here.

Customers Tagged Products: In Magento, customers can also tag products. They are shown under this tab.

Custom Options:  You can add custom options for a product here. Like attributes, you can’t group custom options and each product has its own custom options. You can add text fields, radio buttons and other form fields for custom forms here. This is an advanced feature.

Let’s move to the front-end and see how our e-store looks like.

The home page is showing no products. In other words, Magento is still showing the default e-store layout . We will change it in the next part of this guide. Click on the "Mouse" tab in category menu and we will see the category page as below.

Select the Apple Magic Mouse product which we just created and now you will see the product page.

We’ve created our first product. But there is still so much to cover on Magento. Although we can’t cover all in this guide, I will give you an overview of all the features. So let’s move back to Magento' s back-end.

Customers: You can manage all the customers here. Magento allows shoppers to register for easy shopping. They don’t need to give their shipping addresses again and again. This can be done by shoppers.

However, you can create customers and customer groups to apply different discounts from the back-end. You can also view the online customers on that specific time. Everything about them is managed here.

Promotions: Product sales can be managed here. There are two types of promotions. "Catalog price rules" apply on the whole e-store while "shopping cart price rules" only apply during the checkout process.

Newsletters: Magento has the built in functionality to handle newsletters. You can create newsletter templates here and also see the customers who have signed up to receive them. The full-featured newsletter system allows you to create templates for your newsletters. Then you just have to insert the necessary information and you are done.

Content Management System Capabilities of Magento

Magento also has CMS capabilities. You can create static pages, static blocks and polls here. We will take an in-depth look at these features when we will customize the layout of our store.

Reports: You can get all type of reports here. Magento offers more than 20 types of reports which help you to get every detail of your store.

System: Holds the settings for the administrator account and the general settings of your store.

You can set roles of users, cache management, currency rate, etc. here.

Until now, we have taken an overview of all the backend features. I have tried my best to cover the most important features of Magento.

In the next part of this guide we will move to the front-end and will customize the default layout of Magento. We will see what content blocks are and how we can change the basic features.

Go to: The Ultimate Guide To Creating E-Commerce Websites With Magento (Part 2).

Author: Saad Bassi

Saad Bassi is a 20 years old web developer from Pakistan who loves to create beautiful websites with great user experience.

He is the co-editor of CrispyTech and 1stWebDesigner, blogs about the next Windows at Windows8Geek and loves to make new friends, so, don't forget to say him a hello on Twitter.

Books On Magento:

• The Definitive Guide to Magento
  
• Magento 1.3: PHP Developer's Guide
  
• Magento 1.3 Theme Design
  

This article is sponsored by SSLmatic which sells SSL certificates (RapidSSL, Geotrust, Verisign) for much cheaper prices & offers great support. Check their site to get the cheap SSL certificates.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Wiki-Like Project Management Tool: Streber
• Web-Based MySQL Management With Only 1 File: Adminer
• Web Server That Runs On CD-Rom: Server2Go
• Web Based Task Manager: TaskFreak!
• Voice Enabled Powerful Web Chat Software: Ajax Chat

It is a very easy-to-setup plugin which can work with any standards compliant WordPress theme (and WordPress MU).

The plugin offers a flexible pricing structure for products with features like:

• flexible coupon/discount pricing rules
• product specific sales
• quantity discounts
• free shipping options
• multi-tier pricing for quantity discounts

and supports multiple payment providers like Google Checkout, Paypal & Payment Express.

GetShopped makes it possible to complete the shopping process quickly with a one-page-checkout & optionally, guest checkouts is supported.

It is easy to manage orders with the help of a powerful admin interface, print invoices, packing slips & more.

The plugin also offers lots of other features from comments to new/featured product widgets.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Wordpress QuickAdmin Plugin By WRD
• WooThemes Launches With New Themes
• Wappalyzer: Find Out Apps. Used On A Website
• Tiny And Chic Flash Mp3 Player: Audio Player
• simpleCart(js): Instant E-Commerce With PayPal Support

It comes with a powerful backend & highly customizable frontend.

nopCommerce has all the features of a standard e-commerce websites & offers more like:

• support for kit products (e.g. build your own computer)
• real-time currency exchange rates
• multilingual interface
• compare selected products
• highly flexible shipping calculation (integrated providers, width/height/order total based & more)
• tax calculations by country/state/product & more
• built-in forum & polls
• wishlist

One of the most impressive parts of the software is the integrated marketing capabilities it has. You can customize the design of a product or category page, create any type of discounts & even activate an affiliate system.

nopCommerce supports most of the popular payment gateways & with its pluggable modular/layered architecture, new ones can be added with ease (some are already created).

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Powerful CMS For ASP.NET: Kentico CMS
• Open Source CMS With ASP.NET: Umbraco
• Free Lifestream Application: AmpliFeeder
• Free ASP.NET Shopping Cart: dashCommerce
• 9 Free And Open Source Bug Tracking Softwares

It uses MySQL for storing the data & simpleTip plugin for displaying information about the products with style.

It takes advantage of the jQuery UI’s draggable & droppable behaviours to accomplish the flawless experience.

The shopping cart is not a ready-to-go one for an e-commerce website but it is a nice base for creating one by improving the features.

Tip: Tutorialzine provides other nice tutorials which you may be interested in like:

• A Stylish Navigation Menu With jQuery
• Creating a Facebook-like Registration Form with jQuery

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• TestSwarm: Continious & Distributed JS Testing
• PHP Shoutbox Script: wTag
• Open Source Tool To Create Web-Based Back-Office Applications: nuBuilder
• Display MySQL Data In Google Maps Using DrasticMap
• Creating A Slick Ajaxed Add-To-Basket With jQuery And PHP

It can be totally customized as you have full access to HTML/CSS via FTP & there are 50+ ready-to-use store designs that can be applied with few clicks.

BigCommerce is integrated with almost every payment, shipping & accounting system you can think of. Optionally, it offers its own merchant account system with under-the-market rates.

The software is fully optimized for SEO from valid W3C templates to automatically generated sitemap XML file & SEO-firendly links.

Besides the products, it is possible to create & share any content (like return policies, promotion details) with its CMS functionality.

The software offers a quality usability experience to customers with features like:

• one-click adding to cart
• ability to compare products
• tracking orders
• wishlists (public & private)
• single page & guest checkout
• powerful search system (suggestions, filtering by price/availability, etc.)
• & many more

It has everything to market the products easily like

• trackable coupon codes
• bulk discounts per product
• ability to create custom discount rules
• free shipping for purchases over $x
• affiliate system
• & more..

As BigCommerce is a hosted software, it comes with an included premium hosting with daily offsite backups, unlimited e-mails & top-notch security.

To sum up, the software offers more than anything a store owner can expect. It is a great choice for anyone who wants to run their stores without any technical hassle & get official support.

P.S. This post is a sponsored review.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• simpleCart(js) V2: Still Simple But More Powerful
• WordPress Plugin For E-Commerce: GetShopped
• simpleCart(js): Instant E-Commerce With PayPal Support
• Open Source Shopping Cart: OpenCart
• Free File Hosting Script: XtraUpload

The application is an upload & use shopping cart where no database is required and can be integrated into any website so easily.

It works by including a JavaScript file into the webpages and usage of special classes. As an example:

<div class="simpleCart_items"></div>

will display the full cart, no other code needed.

With the V2, it supports both PayPal + Google Checkout as the payment providers & multiple currencies/tax rates can be used.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Flexible, Feature-Rich & Instant E-Commerce Websites: BigCommerce
• Zoom Script With A Smart Interface: TJPzoom
• YUI Slideshow: Customizable And Animated Slideshows
• Wrap Content Around Images: jQSlickWrap
• WordPress Plugin For E-Commerce: GetShopped

It is designed to run on a LAMP (Linux, Apache, MySQL, PHP) server and offers lots of features which you can add more as it comes with the source.

The application has an unlimited category system, comes with several shipping provider (free shipping logic is integrated) & payment modules.

It is possible to define "special products" on the main page & per category. Products can be sorted by price, manufacturer, etc.

Some features of CRE Loaded PCI CE:

• article manager
• faq manager
• banner manager
• multilanguage support
• wishlists
• ability to checkout without registration
• cross-selling
• & more

It also has a strong admin interface where the store can be managed easily (by multiple admins when needed with the access-level based user system).

A very significant feature of the product is the importance it gives to the security. CRE Loaded PCI CE is compliant with all PCI data security standards (& has a "order fraud screen" in the backend).

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Web Server That Runs On CD-Rom: Server2Go
• Wiki-Like Project Management Tool: Streber
• Web-Based MySQL Management With Only 1 File: Adminer
• Web Based Task Manager: TaskFreak!
• Voice Enabled Powerful Web Chat Software: Ajax Chat

The shopping cart will:

• be hidden at the top of the page that can be displayed with a show/hide link
• open when an item is added to the basket & auto-close
• require a manual "hide" click if opened manually
• enable us to delete products

The HTML

For The Sliding Basket:

<div id="slidingTopWrap">
	<div id="slidingTopContent">
		<div id="basketWrap">
			<div id="basketTitleWrap">
				Your Basket <span id="notificationsLoader"></span>
			</div>
			<div id="basketItemsWrap">
				<ul>
				<li></li>
				<?php getBasket(); ?>
				</ul>
			</div>
		</div>
	</div>
	<div id="slidingTopFooter">
		<div id="slidingTopFooterLeft">
			<img src="images/arrow-down.png" alt="Show Basket" /> <a href="no-js.htm" onclick="return false;" id="slidingTopTrigger">Show Basket</a>
		</div>
	</div>
</div>

The Highlights

• the div slidingTopWrap is positioned absolutely with top: 0 CSS value to stick to the top of the page
• the div slidingTopContent is hided via JavaScript when the page loads & it is actually the part which slides
• the div basketWrap, nothing unusual, wraps the contents of the basket

The JavaScript (jQuery)

Manual Show/Hide Part

$("#slidingTopContent").hide();

$("#slidingTopTrigger").live("click", function(event) {
	$("#slidingTopContent").slideToggle("slow", function(){
		if ($("#slidingTopContent").is(":visible")) {
			$("#slidingTopFooterLeft").html('<img src="images/arrow-up.png" alt="Hide Basket" /> <a href="no-js.htm" onclick="return false;" id="slidingTopTrigger">Hide Basket</a>');
		} else {
			$("#slidingTopFooterLeft").html('<img src="images/arrow-down.png" alt="Show Basket" /> <a href="no-js.htm" onclick="return false;" id="slidingTopTrigger">Show Basket</a>');
		}
	});
}); 

The Highlights:

• we have $("#slidingTopContent").hide(); in the beginning to hide the div in the initial load
• when the #slidingTopTrigger is clicked, we use the slideToggle function to show/hide the #slidingTopContent. To understand whether it is open or not, we have an if then else clause as if ($("#slidingTopContent").is(":visible")) {
  • if the #slidingTopContent is visible, we insert the "hide HTML"
  • if the #slidingTopContent is not visible, we insert the "show HTML"
• you’ll see that we used the $("#slidingTopTrigger").live("click", function(event) { rather than a standard click function. The reason is adding the new created HTMLs to the DOM

Adding Products

$(".productPriceWrapRight a img").click(function() {
	var productIDValSplitter 	= (this.id).split("_");
	var productIDVal 			= productIDValSplitter[1];

	if ($("#slidingTopContent").is(":visible")) {

		$("#notificationsLoader").html('<img src="images/loader.gif">');

		$.ajax({
		type: "POST",
		url: "inc/functions.php",
		data: { productID: productIDVal, action: "addToBasket"},
		success: function(theResponse) {

		if( $("#productID_" + productIDVal).length > 0){
			$("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
			$("#productID_" + productIDVal).before(theResponse).remove();
			$("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
			$("#productID_" + productIDVal).animate({ opacity: 1 }, 500);
			$("#notificationsLoader").empty();

		} else {
			$("#basketItemsWrap li:first").before(theResponse);
			$("#basketItemsWrap li:first").hide();
			$("#basketItemsWrap li:first").show("slow");
			$("#notificationsLoader").empty();
		}

		}
		}); 

	} else {

		$("#slidingTopContent").slideToggle("slow", function(){		

			$("#slidingTopFooterLeft").html('<img src="images/arrow-up.png" alt="Hide Basket" /> <a href="aaa.htm" onclick="return false;" id="slidingTopTrigger">Hide Basket</a>');
			$("#notificationsLoader").html('<img src="images/loader.gif">');

			$.ajax({
			type: "POST",
			url: "inc/functions.php",
			data: { productID: productIDVal, action: "addToBasket"},
			success: function(theResponse) {

			if( $("#productID_" + productIDVal).length > 0){
				$("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
				$("#productID_" + productIDVal).before(theResponse).remove();
				$("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
				$("#productID_" + productIDVal).animate({ opacity: 1 }, 500);
				$("#notificationsLoader").empty();

			} else {
				$("#basketItemsWrap li:first").before(theResponse);
				$("#basketItemsWrap li:first").hide();
				$("#basketItemsWrap li:first").show("slow");
				$("#notificationsLoader").empty();
			}

			}
			}); 

			$("#slidingTopTrigger").fadeTo(4000, 1, function(){
				$("#slidingTopContent").slideToggle("slow", function(){
					$("#slidingTopFooterLeft").html('<img src="images/arrow-down.png" alt="Show Basket" /> <a href="aaa.htm" onclick="return false;" id="slidingTopTrigger">Show Basket</a>');
				});

			});

		});
	}

});

The Highlights:

As "how-to" on sending the Ajax query & fading animations are described in the previous post, we won’t repeating the same info here & focus on the effects.

• we again run the same if-then-else clause
  • if the #slidingTopContent is open send an Ajax query to functions.php and add-the-products to basket
  • if the #slidingTopContent is closed:
    • slideToggle the div
    • insert the "hide HTML" to #slidingTopFooterLeft"
    • send an Ajax query to functions.php and add-the-products to basket
    • wait for x seconds: $("#slidingTopTrigger").fadeTo(4000, 1, function(){
    • slideToggle the div
    • insert the "show HTML" to #slidingTopFooterLeft"

P.S. To make the example work on your side, you should be creating a new database with the jBasket.sql file inside the download package & configure the database connection information inside “inc/db.php” file.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Use PHP Functions In JavaScript: PHP.JS
• Use Any Font In Your Websites With FLIR
• Track Mouse Activities With JS And PHP: (smt)
• Tiny Content Management System: OneFileCMS
• TestSwarm: Continious & Distributed JS Testing