Fix Credit Card Payment Checkout Issue in Magento 1.4.1.x

The Magento team has changed the way credit card numbers are validated in Magento version 1.4.1.0. The new method requires an additional JS include in your page.xml.

The new file is located at /js/lib/ccard.js.

If you update to Magento 1.4.1.0 and your theme does not include this file, your checkout will not work for credit card payment methods. When a Credit Card payment method is selected, the one page checkout will not proceed past the payment section. The continue button will not be clickable, rendering your Credit Card payment method completely unusable.

The solution is to add this new JS include in two places in your /app/design/frontend/default/[YourThemeName]/layout/page.xml

The first is in the default layout section around line 37.

<block type="page/html_head" name="head" as="head">
<action  method="addJs"><script>prototype/prototype.js</script></action>
<action method="addJs"  ifconfig="dev/js/deprecation"><script>prototype/deprecation.js</script></action>
<action  method="addJs"><script>lib/ccard.js</script></action>
<action  method="addJs"><script>prototype/validation.js</script></action>
<action  method="addJs"><script>scriptaculous/builder.js</script></action>
<action  method="addJs"><script>scriptaculous/effects.js</script></action>
<action  method="addJs"><script>scriptaculous/dragdrop.js</script></action>
<action  method="addJs"><script>scriptaculous/controls.js</script></action>
<action  method="addJs"><script>scriptaculous/slider.js</script></action>
<action  method="addJs"><script>varien/js.js</script></action>
<action  method="addJs"><script>varien/form.js</script></action>
<action  method="addJs"><script>varien/menu.js</script></action>
<action  method="addJs"><script>mage/translate.js</script></action>
<action  method="addJs"><script>mage/cookies.js</script></action>
 
<action  method="addCss"><stylesheet>css/styles.css</stylesheet></action>
<action  method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt  IE 8</if></action>
<action  method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
<action  method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>
 
<action  method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt  IE 7</if></action>
<action  method="addItem"><type>skin_js</type><name>js/ie6.js</name><params/><if>lt  IE 7</if></action>
</block>

The second place you need to add this JS file is in the print section around line 113.

<block type="page/html_head" name="head" as="head">
<action method="addJs"><script>prototype/prototype.js</script></action>
<action method="addJs"><script>mage/translate.js</script></action>
<action method="addJs"><script>lib/ccard.js</script></action>
<action method="addJs"><script>prototype/validation.js</script></action>
<action method="addJs"><script>varien/js.js</script></action>
 
<action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
<action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>
<action method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
<action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>
 
<action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
<action method="addItem"><type>skin_js</type><name>js/ie6.js</name><params/><if>lt IE 7</if></action>
 
</block>

Adding the new JS include in these two places should fix the checkout problem.

Solving Magento Error “Call to a member function toHtml()”

For everyone stuck in the same solution:
in page.xml under app/design/frontend/base/default/layout (or your custome page.xml)

change the line

<block type="core/profiler" output="toHtml"/>

to

<block type="core/profiler" output="toHtml" name="core_profiler"/>

Looks like there were some changes in the way Magento handles this call!
This solution work so far for 1.4.0.1 to 1.4.1.0……

Change Magento Admin URL

It is very easy to change admin URL for magento. If you want to change URL from

http://www.example.com/admin

TO

http://www.example.com/customadmin

All you need is to properly set your custom admin url in the config file /app/etc/local.xml. In this file change this:

<frontName><![CDATA[admin]]></frontName>

to this:

<frontName><![CDATA[customadmin]]></frontName>

Now save the file and clear the cache (if you are using it). If you still don’t have access to the admin you may clear the cache by deleting the contentss of the /var/cache directory. This is it.

Create Magento Store How to ?

There are numerous ways to setup multiple Magento stores that all share the same codebase and backend, but what method you use depends on your needs.

This article is written with cPanel in mind, though the methodologies listed below apply no matter what control panel you’re using.

Jump To Section

  1. URL Structure
  2. Shared Hosting Caveat
  3. Adding Another Store In Magento
  4. Parked Domain Method
  5. Addon Domain Method
  6. Subdomain Method
  7. Subdirectory Method
  8. Managing Multiple Stores
  9. Secure Checkout For Each Domain

URL Structure

The actual URL structure of your stores is a matter of personal preference. You can, for example, have two entirely different stores running on the same domain that share the same instance of Magento:

  • mall.com/shoes
  • mall.com/shirts

These stores could also be setup on their own domain and still share the same instance of Magento:

  • shoes.com
  • shirts.com

Another example would be a mall type setup, where your primary domain is the portal to access various stores:

  • mall.com
  • shoes.mall.com
  • shirts.mall.com

Regardless of the URL structure, the method for setting this up will pretty much be the same, and the result is what we’re really after, which is to have one codebase for all of your stores, and one backend to manage all of these stores from.

Shared Hosting Caveat

If you want each store to have it’s own SSL certificate and don’t want to share a single checkout, e.g. you don’t want visitors leaving domainA.com to checkout on domainB.com, then you will not be able to do this in a shared hosting environment.

The reason why you cannot do this is simple. In order for a website to have an SSL certificate, it requires a dedicated IP address.

There’s no way to allow an addon or parked domain in cPanel to have its own IP address. Instead, it shares the IP address of the primary domain.

You probably think you could sign up for two shared hosting accounts, so each one has its own dedicated IP address, but that won’t work either.

Since it’s shared hosting, there are security measures in place to prevent one user from reading the files of another user.

So for shared hosting clients, you’re limited to the following scenarios:

  1. All of your stores do not have a secure checkout, which is fine if you’re using PayPal, Google Checkout, or a similar third-party service that handles the processing of card data on their website. For example, visitors to any of your stores are redirected to a third-party website for card processing.
  2. All of your stores share a secure checkout point. For example, you own three domains: mall.com, shoes.com, and shirts.com You use mall.com as your primary domain and have an SSL certificate associated with it. The other two domains would be either addon or parked domains, and visitors to those sites would be redirected to mall.com to checkout.
  3. All of your stores are setup as subdomains, and you’ve purchased a wildcard SSL certificate, which is roughly $1000/year and is for legally registered businesses.

If you do need an SSL certificate for all of your domains, you will need to be in a dedicated hosting environment.

Adding Another Store In Magento

The first thing we need to do is setup our second store in Magento.

We’re going to do a hypothetical here for the naming conventions, and assume we ownshirts.com. Adjust the values accordingly for your own store.

  1. Login to the Magento admin.
  2. Go to the Catalog tab, and select Manage Categories.
  3. Click on the Add Root Category button on the left.
  4. On the right, for the Name, we’ll enter Shoes.com. Set the dropdown to Yes for both Is Active and Is Anchor.
  5. Click the Save Category button.
  6. Go to the System tab and select Manage Stores.
  7. Click on the Create Website button.
  8. For the Name, we’ll enter Shoes.com, and for the Code, we’ll enter shoes. We’ll use this value later, so don’t forget this!
  9. Click the Save Website button.
  10. Click on the Create Store button.
  11. For the Website, select Shoes.com from the dropdown. For the Name, we’ll enterMain Store. For the Root Category, select the Shoes.com from the dropdown.
  12. Click on the Save Store button.
  13. Click on the Create Store View button.
  14. For the Store, select Main Store from the dropdown, making sure it’s for theShoes.com website. For the Name, we’ll enter English. For the Code, we’ll entershoes_en. For the Status, select Enabled from the dropdown.
  15. Click the Save Store View button.
  16. Go to the System tab and select Configuration.
  17. For the Current Configuration Scope (located on the top left), change the dropdown menu from Default Config to Shoes.com.
  18. Select Web from the sidebar on the left under the General heading.
  19. For both the Unsecure and Secure sections, uncheck the Use default box next to theBase URL item, and enter the URL for your store, e.g. http://www.shoes.com/. Don’t forget the trailing slash!
  20. Click the Save Config button.

Now that we have our second store setup, you’ll need to choose one of the following methods for actually setting up the store on the server-side so visitors can access it.

If the URL structure you’ve chosen will have different domains for each store, the parked domain method is the fastest and easiest method.

Parked Domain Method

For this method, we’ll pretend we own shirts.com and shoes.com. The shirts.comdomain is our primary domain, and Magento is already installed on it. Here’s how we would set this up for the shoes.com domain:

  1. Login to cPanel for your domain and click on the Parked Domains icon.
  2. In the input field, enter the domain name that you’ll be setting up as a second store, e.g.shoes.com.
  3. Click on the Add Domain button.
  4. Open up the index.php file for Magento and replace the last line of code:
Mage::run();

…with the following code:

switch($_SERVER['HTTP_HOST']) {
	case 'shoes.com':
	case 'www.shoes.com':
		Mage::run('shoes', 'website');
	break;
	default:
		Mage::run();
	break;
}

If you have more than two stores, you will need to add additional cases to the above code block, e.g.:

switch($_SERVER['HTTP_HOST']) {

	// Shoes.com
	case 'shoes.com':
	case 'www.shoes.com':
		Mage::run('shoes', 'website');
	break;

	// Hats.com
	case 'hats.com':
	case 'www.hats.com':
		Mage::run('hats', 'website');
	break;

	// Shirts.com (default store)
	default:
		Mage::run();
	break;
}

Addon Domain Method

This is the same scenario as above, except it takes a little longer to setup. This method might be more useful to you if, for example, you wanted to have a blog on one domain, but not on the other. You couldn’t do that with a parked domain. Here’s how we would set this up for theshoes.com domain:

  1. Login to cPanel for your domain, and click on the Addon Domains icon.
  2. For the New Domain Name, we’ll enter shoes.com. cPanel will automatically fill in the next two fields, so remove public_html/ from the Document Root field, leaving us with just shoes.com. This step isn’t required, but for organizational purposes, it makes more sense.
  3. Set a password for this domain and click on the Add Domain button.
  4. Login to your site via SSH, and go to the directory that we previously set in theDocument Root field above when adding our domain. In our case, we would do the following:
    cd shoes.com/
  5. Copy the index.php and .htaccess file from the directory where Magento is installed, which would be in our root web directory:
    cp ../public_html/index.php ../public_html/.htaccess .
  6. Open up the index.php file that we just copied over and replace the following line of code:
    $mageFilename = 'app/Mage.php';

    …with the following:

    $mageFilename = '../public_html/app/Mage.php';
  7. With the index.php file still open, replace the following line of code:
    Mage::run();

    …with the following:

    Mage::run('shoes', 'website');
  8. Lastly, we need to create symbolic links to point to a few directories:
    ln -s ../public_html/404/ ./404
    ln -s ../public_html/app/ ./app
    ln -s ../public_html/includes/ ./includes
    ln -s ../public_html/js/ ./js
    ln -s ../public_html/media/ ./media
    ln -s ../public_html/report/ ./report
    ln -s ../public_html/skin/ ./skin
    ln -s ../public_html/var/ ./var

Subdomain Method

For this method, we’ll pretend we own mall.com, and it’s setup as a portal that links to the various shops within the mall. Magento will be installed on the mall.com domain, and all of the shops will be in subdomains, e.g.:

  • shoes.mall.com
  • shirts.mall.com

Here’s how we would set this up for the shoes subdomain:

  1. Login to cPanel for your domain, and click on the Subdomains icon.
  2. For the Subdomain, we’ll enter shoes. cPanel will automatically fill in the next field, so remove public_html/ from the Document Root field, leaving us with just shoes. This step isn’t required, but for organizational purposes, it makes more sense.
  3. Click the Create button.
  4. Login to your site via SSH, and go to the directory that we previously set in theDocument Root field above when creating our subdomain. In our case, we would do the following:
    cd shoes/
  5. Copy the index.php and .htaccess file from the directory where Magento is installed, which would be in our root web directory:
    cp ../public_html/index.php ../public_html/.htaccess .
  6. Open up the index.php file that we just copied over and replace the following line of code:
    $mageFilename = 'app/Mage.php';

    …with the following:

    $mageFilename = '../public_html/app/Mage.php';
  7. With the index.php file still open, replace the following line of code:
    Mage::run();

    …with the following:

    Mage::run('shoes', 'website');
  8. Lastly, we need to create symbolic links to point to a few directories:
    ln -s ../public_html/404/ ./404
    ln -s ../public_html/app/ ./app
    ln -s ../public_html/includes/ ./includes
    ln -s ../public_html/js/ ./js
    ln -s ../public_html/media/ ./media
    ln -s ../public_html/report/ ./report
    ln -s ../public_html/skin/ ./skin
    ln -s ../public_html/var/ ./var

Subdirectory Method

This is the same scenario as above, except all of the shops will be in subdirectories, e.g.:

  • mall.com/shoes
  • mall.com/shirts

Here’s how we would set this up for the shoes subdirectory:

  1. Login to your site via SSH, and create a subdirectory where your second store will be:
    cd public_html
    mkdir shoes/
    cd shoes/
  2. Copy the index.php and .htaccess file from the directory where Magento is installed, which would be in our root web directory:
    cp ../public_html/index.php ../public_html/.htaccess .
  3. Open up the index.php file that we just copied over and replace the following line of code:
    $mageFilename = 'app/Mage.php';

    …with the following:

    $mageFilename = '../public_html/app/Mage.php';
  4. With the index.php file still open, replace the following line of code:
    Mage::run();

    …with the following:

    Mage::run('shoes', 'website');

Managing Multiple Stores

It’s very important to remember that now that you have multiple stores to manage from one admin panel, that you make sure you’re changing the configuration for the appropriate store.

In the System → Configuration section, if you leave the dropdown menu for Current Configuration Scope set to Default Config, it will globally change the values for all of your stores, assuming you haven’t removed the checkmark next to Use default throughout the configuration sections.

You can change the configuration values globally, for each website, and for individual store views.

Secure Checkout For Each Store

For those of you in dedicated hosting environments, you can follow either the addon or parked domain method from above, and edit the httpd.conf file to give the addon or parked domain a dedicated IP address.

However, this is not advised. Your changes will most likely be overwritten with a control panel upgrade, Apache or PHP rebuild, or even simple maintenance.

Magento Layout / Structural Block How to?

1. Layout your Structural Blocks
When you begin the implementation process, first ask yourself this question: What are the layout needs of my store?
What this simply means is: “Will my store always have a left column? Or will some pages have a left, main and a right column? Or perhaps some of the pages will just one column?”. These questions are imperative because the variations of page structure will directly determine the number of skeleton templates you will need to create – For instance, if you have a one column and a 3 column layout, you will need to create two skeleton template accordingly. But before we go further, let’s first look at what a skeleton template looks like.

<div class="header">getChildHtml('header')?&gt;</div>
<div class="middle">
<div class="col-left">getChildHtml('left')?&gt;</div>
<div class="col-main">getChildHtml('content')?&gt;</div>
</div>
<div class="footer">getChildHtml('footer')?&gt;</div>

Pretty straight forward. This type of templates are what we call “skeleton templates” because it exists for the purpose of positioning structural blocks within a page. Such templates are located in app/design/frontend/default/default/template/page/, and you can name it anything you want – mycolumns.phtml, 2columns-left.phtml, whatever suits your fancy. “Wait a minute!!! What is all this getChildHtml(”)?> business?” you say. Ok, let’s move along.

If you examine the method getChildHtml(‘header’)?>, you will see that there’s an identifier called “header” being assigned to the area encased by the XHTML

. What getChildHtml does, is it grabs all the content blocks(see step 2 below) that is assigned to “header” via something called a layout (see step 3 below), and places it inside
2. Distribute your Content Blocks (aka Let’s cut up some real meat of the page)

Content blocks are the ones that actually parse your store’s data into visually appealing format using XHTML. Unlike other eCommerce solutions you may be used to, Magento supplies separate content blocks per separate functionalities. What this means is, your col_left.tpl (or whatever else you may be used to working with), no longer contains ALL the XHTML to be shown in the left column but rather, the functionality used in the left column will recruit its own template for use. Let’s take the demo Magento as an example. If you open a category page on your browser, you will see in the right column the following functionalities: mini-cart, compare products, newsletter and community poll. Each of these content blocks comes with its own template file. Because mini-cart is a separate functionality, as is the compare products, newsletter…etc, mini-cart has it’s own template file, compare products has its own template file, and newsletter has its own template file. The XHTMLyou create should be cut up accordingly on per functionality basis.

3. Let’s recap and comprehend
In this step, let’s take a breather and do a quick recap.
When working in the visual aspect of a store running on Magento, there’re three things you will use to visually parse your store data.

Structural Blocks
Structural blocks are the visual skeleton of a store page. These blocks exist for the sole reason of creating visual structure. Example structural blocks are header, left column, main column, footer…etc.

Content Blocks
Content blocks are the blocks that constructs the makeup of a structural block. Each content block represents distinct functionalities such as Mini-cart, mini-wishlist, compare products, newsletter signup…etc, and they comes with it’s own template.

Layouts
Located in app/design/frontend/your_package/your_theme/layout, layout is the one that puts all the pieces together. When a page loads in your store, the following things happen:
a. The layout first grabs the base skeleton template of the site.
b. It grabs all the content blocks that are assigned to the structural blocks of a page, and loads them.
Basically the layout says “Grab these content blocks and nest them inside these structural blocks.” The layout can be updated on a per page basis, so you can conveniently change the functionalities being loaded into each page of you store with just one file.

This is the absolute quick idea of how the templates work in Magento. We’re working on a full documentation and it will be released with the stable version of Magento. In the mean time, the best thing to do is read through the threads of the forum, stay active in the community and ask a lot of questions! I hope this reply gave you some understanding of how things work in Magento.

Include a Javascript file into Magento templates

Customising your magento store can be a good way to set your store apart from the competition so adding features that require javascript files is a common task when building a project.  Learn how to include a javscript file into your magento page templates with this quick how to.The default layout template load is made primarily through the page.xml file located at the following url for custom themed installs /app/design/frontend/your-instance-name/your-theme-name/layout/page.xml , or for the default theme at /app/design/frontend/default/default/layout/page.xml.

Find the following block encapsulator <block type=”page/html_head” name=”head” as=”head”> and simply add the following command inside the block

<action method=”addJs”><script>yourscriptname.js</script></action>

Then upload you updated page.xml file.

With that done, you need to now upload your javascript file to /skin/frontend/your-instance-name/your-theme-name/js/yourscriptname.js, or for the default theme /skin/frontend/default/default/js/yourscriptname.js

Get the current category name in Magento

A key part of the request execution has information stored into the Mage registry and accessing this information is a simple call requesting the needed data.  Learn how to access the registry to find the current category title.

The registry object we are interested in is ‘current_category’ and we will utilise the registry call getName() to create call to retrieve the needed information thusly;

Mage::registry('current_category')->getName();

src: http://www.magento-tutorial.com/

Creating new theme and apply it to a magento store

After finishing Magento installation its time to look at how you want your store to look, what theme will it have , and will the same theme feature across all your stores if you have more then one ?  Our tutorial shows you how to duplicate the default theme and begin to modify it to give you greater flexibility on the look and feel of your new e-commerce store.

Magentos’ file structure is divided into two key locations , one containing the files which our end user will have access to such as css and JavaScript and one containing the block, containers and actual code that will build up any given page.  For the default installations these paths are as follows when magento was installed to the root of your site:

For the building blocks of page construction – app/design/frontend/default/default/
For the accessible browser assets – skins/frontend/default/default/

In the installation above you can see that the file structure represent the hierarchy of the design aspects, in this case app/design/frontend/instance/theme/

When building a site it is a good idea to have a separate name for your instance and your theme , for example you may decide to call your instance e-commerce, and your theme standard-blue.  Giving your structures and assets a strong naming convention will help you to organise and navigate your files with ease.

So the first stage to building a new theme is to copy the two above folders and rename them as you see fit.  This will give you two new sets of files to upload to your server via FTP.

Magento will now be able to access your new instance and theme and that means we can apply our new files as standard to our store.  To do so log into your Magento admin area and choose ‘System’, from the drop down menu choose ‘Configuration’.  Once the configuration screen loads choose the ‘Design’ option from the menu on the left hand side.  If you have followed our tutorial ‘Setup a new store’ you can choose the store you wish to configure the design for by selecting it form the drop down menu in the configuration scope.

Within the design configuration panel there are two key elements we want to change, the value next to the label ‘Current Package Name’, change this to your new instance name, for example e-commerce’.  The value next to the ‘Default’ label under the themes section needs to be changed to your theme name, for example ’standard-blue’.

With these changes made choose ‘Save Config’ to have magento start to use your new files.

src: http://www.magento-tutorial.com/