How to add Magento blocks, CSS and Javascript to an external site

In: Feeling guru

3 Jul 2010

You might have a Magento based website running online and wanted to extend parts of it (also known as blocks, which may include some css and js in the code) to an external site which may either be a blog, another CMS or any other PHP based web application. If you have been following my previous posts, you will know that by adding the Mage.php file of your Magento instance to your application, you can actually pull the needed HTML blocks at any time. The only problem is that most of the examples available online asks you to use the getChildHtml(‘your-block-here’) in which most the time frustrates you because of its complexity and limited resources of how you can actually use it.

There are other ways of doing it. Oddly enough, some are pretty simple and straight forward.

We will use a single HTML file which will serve as our ‘external’ site. The source code of our index.php is shown below:

<html>
  <head>
    <script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'Josefin Sans Std Light', 'Lobster' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    </script>
    <style type="text/css">
      .wf-active p.text {
        font-family: 'Calibri', serif;
		font-size: 16px;
		text-align: justify;
		color:#666666;
		border: 1px solid #CCCCCC;
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
		padding: 20px
      }

	  .wf-active h2 {
	  	font-family: 'Lobster', serif;
        font-size: 20px;
		color: #666666
      }

      .wf-active h1 {
        font-family: 'Lobster', serif;
        font-size: 45px;
		color: #006699;
		margin-bottom: 10px;
      }

	  div.body {
	  	max-width: 850px;
		margin: auto;
		background-color: #FFFFFF;
		padding: 30px 50px 0px 50px;
		text-align: left;
		height: 60%;
	  }

	  p.bugs {
	  	font: 12px/1.55 Arial,Helvetica,sans-serif;
		text-align: center;
	  }

	  p.otherdata {
	  	font-family: 'Calibri', serif;
		font-size: 15px;
		color: #999999;
		margin-bottom: 20px
	  }

	  .otherdata strong {
	  	color: #000000
	  }
    </style>
  </head>
  <body>
  	<div class="body">
		<h1>How to add Magento blocks, CSS and Javascript to an external site</h1>
		<p class="otherdata">Written by <strong>Richard Feraro</strong> | Posted on <strong>July 2, 2010</strong></p>
		<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a quam massa. Nullam eget erat metus. Sed vel justo enim. Proin rhoncus laoreet bibendum. Nullam eget est nisi. In eget sem in erat sodales bibendum. Morbi gravida augue sed felis tincidunt a congue dui placerat. Aliquam purus risus, mollis sed ullamcorper non, viverra eu odio. Suspendisse nibh nisi, suscipit at viverra eu, convallis ac odio. Morbi nec sapien eros. Suspendisse nec nulla erat, ac porttitor neque. Integer felis dolor, sollicitudin sed semper et, imperdiet nec turpis. Proin blandit luctus egestas. </p>
	</div>
  </body>
</html>

The code above shall produce a page like the one in the screenshot below.

Our Sample External Page

We’ll start editing at the beginning of the file by adding a require_once() for our Mage.php file.

// Your Magento Mage.php
// Mage Enabler WordPress plugin users may
// skip these lines
require_once ("/your/magento/app/Mage.php");
umask(0);
Mage::app("default");

Proceed with adding the if(class_exists('Mage')){...} which encloses our Magento scripts to prevent the site from breaking if in case the Mage object failed to be instantiated. Check the inline comments for more details.

// Make sure to execute this block of code
// only if Mage object is present
if(class_exists('Mage')){
	// Instantiate session and generate needed cookie
	Mage::getSingleton('core/session', array('name' => 'frontend'));
	$Block = Mage::getSingleton('core/layout');

	// Start pulling the blocks
	$head = $Block->createBlock('Page/Html_Head');
	// Add default css
	// Magento adds the default skin directory
	// 'skin/frontend/default/default' before 'css/styles.css'
	// making it look like the URL below:
	// http://localhost/magento/skin/frontend/default/default/css/styles.css
	$head->addCss('css/styles.css');
	// Add Prototype JS file
	// Note that it automatically adds the 'js' directory at the beginning
	// making it look like the URL below:
	// http://localhost/magento/js/prototype/prototype.js
	$head->addJs('prototype/prototype.js');

	// Get the header's HTML
	$header = $Block->createBlock('Page/Html_Header');
	$header->setTemplate('page/html/header.phtml');

	// And the footer's HTML as well
	$footer = $Block->createBlock('Page/Html_Footer');
	$footer->setTemplate('page/html/footer.phtml');
}

That’s it. The codes above will generate the Magento session, the 3 blocks for CSS/JS (which uses the default skin of Magento and adds the Prototype JS file) and the HTML tags for the header and footer.

To use the blocks, insert the CSS/JS block right before the end tag of </HEAD>:

	<?php
		// Display the needed tags for CSS and JS
		echo (class_exists('Mage')) ? $head->getCssJsHtml() : '' ;
	?>
</head>

Proceed by adding the Magento header block right after the <BODY> tag but before the <DIV> tag.

<body>
  	<?php
		// Display the Header HTML
		echo (class_exists('Mage')) ? $header->toHTML() : '' ;
	?>
  	<div class="body">

Finally, add the Magento footer block right between the end tag of </DIV> and </BODY> tag

	</div>
	<?php
		// Display the Footer HTML
		echo (class_exists('Mage')) ? $footer->toHTML() : '' ;
	?>
  </body>

It should display a page of our external site which now uses the header and footer of Magento. Check the source to see the additional tags generated.

Our Sample External Page with Magento CSS, Prototype JS, Header and Footer

The full index.php can be found below:

<?php
// Your Magento Mage.php
// Mage Enabler WordPress plugin users may
// skip line numbers 5, 6 and 7
require_once ("/your/magento/app/Mage.php");
umask(0);
Mage::app("default");

// Make sure to execute this block of code
// only if Mage object is present
if(class_exists('Mage')){
	// Instantiate session and generate needed cookie
	Mage::getSingleton('core/session', array('name' => 'frontend'));
	$Block = Mage::getSingleton('core/layout');

	// Start pulling the blocks
	$head = $Block->createBlock('Page/Html_Head');
	// Add default css
	// Magento adds the default skin directory
	// 'skin/frontend/default/default' before 'css/styles.css'
	// making it look like the URL below:
	// http://localhost/magento/skin/frontend/default/default/css/styles.css
	$head->addCss('css/styles.css');
	// Add Prototype JS file
	// Note that it automatically adds the 'js' directory at the beginning
	// making it look like the URL below:
	// http://localhost/magento/js/prototype/prototype.js
	$head->addJs('prototype/prototype.js');

	// Get the header's HTML
	$header = $Block->createBlock('Page/Html_Header');
	$header->setTemplate('page/html/header.phtml');

	// And the footer's HTML as well
	$footer = $Block->createBlock('Page/Html_Footer');
	$footer->setTemplate('page/html/footer.phtml');
}

?>
<html>
  <head>
    <script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'Josefin Sans Std Light', 'Lobster' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    </script>
    <style type="text/css">
      .wf-active p.text {
        font-family: 'Calibri', serif;
		font-size: 16px;
		text-align: justify;
		color:#666666;
		border: 1px solid #CCCCCC;
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
		padding: 20px
      }

	  .wf-active h2 {
	  	font-family: 'Lobster', serif;
        font-size: 20px;
		color: #666666
      }

      .wf-active h1 {
        font-family: 'Lobster', serif;
        font-size: 45px;
		color: #006699;
		margin-bottom: 10px;
      }

	  div.body {
	  	max-width: 850px;
		margin: auto;
		background-color: #FFFFFF;
		padding: 30px 50px 0px 50px;
		text-align: left;
		height: 60%;
	  }

	  p.bugs {
	  	font: 12px/1.55 Arial,Helvetica,sans-serif;
		text-align: center;
	  }

	  p.otherdata {
	  	font-family: 'Calibri', serif;
		font-size: 15px;
		color: #999999;
		margin-bottom: 20px
	  }

	  .otherdata strong {
	  	color: #000000
	  }
    </style>
	<?php
		// Display the needed tags for CSS and JS
		echo (class_exists('Mage')) ? $head->getCssJsHtml() : '' ;
	?>
  </head>
  <body>
  	<?php
		// Display the Header HTML
		echo (class_exists('Mage')) ? $header->toHTML() : '' ;
	?>
  	<div class="body">
		<h1>How to add Magento blocks, CSS and Javascript to an external site</h1>
		<p class="otherdata">Written by <strong>Richard Feraro</strong> | Posted on <strong>July 2, 2010</strong></p>
		<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a quam massa. Nullam eget erat metus. Sed vel justo enim. Proin rhoncus laoreet bibendum. Nullam eget est nisi. In eget sem in erat sodales bibendum. Morbi gravida augue sed felis tincidunt a congue dui placerat. Aliquam purus risus, mollis sed ullamcorper non, viverra eu odio. Suspendisse nibh nisi, suscipit at viverra eu, convallis ac odio. Morbi nec sapien eros. Suspendisse nec nulla erat, ac porttitor neque. Integer felis dolor, sollicitudin sed semper et, imperdiet nec turpis. Proin blandit luctus egestas. </p>
	</div>
	<?php
		// Display the Footer HTML
		echo (class_exists('Mage')) ? $footer->toHTML() : '' ;
	?>
  </body>
</html>

About the author

Richard Feraro is a web programmer from Manila, Philippines with 13 years of solid open-source development experience using Linux, Apache, MySQL & PHP.

91 Responses to How to add Magento blocks, CSS and Javascript to an external site

Avatar

Michael Sacca UNITED STATES

July 3rd, 2010 at 4:53 am

Hey – first off – thanks for all your work on this and your help via twitter. I’m trying to plug this into the basic twenty-ten theme for WordPress – As soon as it hits the code:

toHTML() : ” ;
?>

It dies. Any ideas on what I’m doing wrong?

http://biffy.tinyfac.com is where it’s testing at

Much thanks in advance.

Avatar

Michael Sacca UNITED STATES

July 3rd, 2010 at 4:54 am

Sorry –


toHTML() : '' ;
?>

Avatar

Richard Feraro

July 3rd, 2010 at 12:03 pm

Hello Michael, you’re welcome.

I see that it’s blank which means there’s a fatal error somewhere within your code. Place error_reporting(E_ALL) (no quotes) at the very top of the file you’re working on to see the actual error.

Avatar

Richard Feraro

July 3rd, 2010 at 12:06 pm

It’s a short style IF condition. You should complete the syntax:

(your_condition_here) ? value_if_true : value_if_false;

echo (class_exists('Mage')) ? $header->toHTML() : '' ;

Avatar

Richard Feraro

July 3rd, 2010 at 12:09 pm

You can also post code here using the following format:
[php] your code here [/php]

Avatar

Brady UNITED STATES

July 6th, 2010 at 9:50 am

Hi Richard,

Thanks so much for this addition to your series. It definitely simplifies things for what I’m trying to do and I ALMOST have it working now.

When I plug in this code, it pulls in everything, except the CSS. Because it’s trying to pull in the default/default/css/styles.css, which doesn’t exist. Is there a way to point this to the current skin, instead of the default skin?

When I create a styles.css and try to pull in all my themed CSS files using @import in the default/css/styles.css, it doesn’t import them for some reason.

Thanks again!

Avatar

Richard Feraro

July 6th, 2010 at 12:16 pm

Is your store configured to use the skin that you want? I’ll try to install a different skin to see if it does pull what is currently configured in the admin.

Avatar

Richard Feraro UNITED STATES

July 6th, 2010 at 4:39 pm

Hi Brady, yes it pulls the theme’s file currently configured for the store found in the admin. See theme creation details here.

When I plug in this code, it pulls in everything, except the CSS. Because it?s trying to pull in the default/default/css/styles.css, which doesn?t exist. Is there a way to point this to the current skin, instead of the default skin?

Either you just copied the whole theme files from the default provided or you haven’t set the store to use the custom theme you made in the admin page.

When I create a styles.css and try to pull in all my themed CSS files using @import in the default/css/styles.css, it doesn?t import them for some reason.

It is configured in your custom theme’s local.xml and/or page.xml file to call the action method “addCss”. Check this link and also this one.

Don’t forget to clear or disable Magento’s cache in the administration panel right after you make any changes to your files.

Avatar

Michael Sacca UNITED STATES

July 9th, 2010 at 5:46 am

Hey – so thanks to your help I’ve got the basic working. Now most of my header is made up of echo $this->getChildHtml calls from w/ in the header. They’re not printing anything at the moment – what I can do to pull in these getChildHtml calls as well as the main header?

So my header code is:

<a name="top"></a>
    <div class="header">
        <h1 id="logo"><a href="<?php echo $this->getUrl('') ?>"><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>"/></a></h1>
        <?php echo $this->getChildHtml('store_language') ?>
        <img class="promo" src="<?php echo $this->getSkinUrl('images/freeshipping.png') ?>" alt="<?php echo $this->__('Free Shipping') ?>"/>
        <div class="mainLinks">
        <div class="headerLinks">
        <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('headerlinks')->toHtml() ?>
        </div>
        <div class="clear"></div>
        <div class="toplinks">
        <?php echo $this->getChildHtml('topLinks') ?> 
        

        </div>
        </div>
		<div class="clear"></div>
	</div>
  	
	<div id="navigation">
		<?php echo $this->getChildHtml('topMenu') ?>
	</div>
	<div class="clear"></div>

but it’s printing:

<a name="top"></a>
    <div class="header">
        <h1 id="logo"><a href="http://biffy.tinyfac.com/home/cart/index.php/"><img src="http://biffy.tinyfac.com/home/cart/skin/frontend/default/hellouno/images/logo.gif" alt="Magento Commerce"/></a></h1>
                <img class="promo" src="http://biffy.tinyfac.com/home/cart/skin/frontend/default/hellouno/images/freeshipping.png" alt="Free Shipping"/>

        <div class="mainLinks">
        <div class="headerLinks">
        <li class="first"><a href="#">Store Locator</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Support Policy</a></li>
<li><a href="#">Customer Service</a></li>
<li><a href="#">FAQs</a></li>
<li class="last"><a href="#">Contact Us</a></li>        </div>

        <div class="clear"></div>
        <div class="toplinks">
         
        </div>
        </div>
		<div class="clear"></div>
	</div>
  	
	<div id="navigation">
			</div>
	<div class="clear"></div>

any advice is much appreciated!

Avatar

Richard Feraro UNITED STATES

July 9th, 2010 at 3:59 pm

Thanks :)

Someone named peaker was able to do it from the other post. Read his comments here.

Avatar

Brady UNITED STATES

July 10th, 2010 at 9:01 am

Hi Richard,

I’m following your tutorial above using it on a fresh local install of the latest Magento and WordPress. So far everything looks pretty smooth, except I can’t get the JavaScript to import in the Head. I use your

$head->addJs('prototype/prototype.js');

, similar to how the CSS is brought in. The CSS imports fine, but the JavaScript doesn’t show up anywhere.

Any ideas?

Avatar

Brady UNITED STATES

July 10th, 2010 at 9:05 am

Actually, I take that back. The one prototype/prototype.js gets pulled in, but none of my other JavaScript does.

Here’s what I’m using:

	// Add Prototype JS file
	// Note that it automatically adds the 'js' directory at the beginning
	// making it look like the URL below:
	// http://localhost/magento/js/prototype/prototype.js
	$head->addJs('prototype/prototype.js');
	$head->addJs('lib/ccard.js');
	$head->addJs('protype/validatio.js');
	$head->addJs('scriptaculous/builder.js');
	$head->addJs('scriptaculous/effects.js');
	$head->addJs('scriptaculous/dragdrop.js');
	$head->addJs('scriptaculous/controls.js');
	$head->addJs('scriptaculous/slider.js');
	$head->addJs('varien/js.js');
	$head->addJs('varien/form.js');
	$head->addJs('varien/menu.js');
	$head->addJs('mage/translate.js');
	$head->addJs('mage/cookies.js');
	
	// Add default css
	// Magento adds the default skin directory
	// 'skin/frontend/default/default' before 'css/styles.css'
	$head->addCss('css/reset.css');
	$head->addCss('css/boxes.css');
	$head->addCss('css/menu.css');
	$head->addCss('css/clears.css');
	$head->addCss('css/styles.css');
	$head->addCss('css/print.css.css');

Avatar

Richard Feraro PHILIPPINES

July 10th, 2010 at 2:02 pm

You have to create an action method ‘addJs’ for each JS file that you want to add in your local.xml/page.xml found in your custom theme folder. Refer to this article from Magento.

Avatar

Brady UNITED STATES

July 13th, 2010 at 9:15 am

Hi Richard,

Sorry for all the confusion on my end. I read the article you referred to about creating the local.xml file to add the additional JS files.

My question is – those files are already added in the default page.xml. Do I need to re-add them in a local.xml file anyway?

page.xml:

<block type="page/html_head" name="head" as="head">
                <action method="addJs"><script>prototype/prototype.js</script></action>
                <action method="addJs"><script>lib/ccard.js</script></action> 
                <action method="addJs" ifconfig="dev/js/deprecation"><script>prototype/deprecation.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/reset.css</stylesheet></action>
                <action method="addCss"><stylesheet>css/boxes.css</stylesheet></action>
                <action method="addCss"><stylesheet>css/menu.css</stylesheet></action>
                <action method="addCss"><stylesheet>css/clears.css</stylesheet></action>
				<action method="addCss"><stylesheet>css/styles.css</stylesheet></action>

                <action method="addItem"><type>skin_css</type><name>css/iestyles.css</name><params/><if>lt IE 8</if></action>
                <action method="addItem"><type>skin_css</type><name>css/ie7minus.css</name><params/><if>lt IE 7</if></action>

                <action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
                <action method="addItem"><type>js</type><name>varien/iehover-fix.js</name><params/><if>lt IE 7</if></action>

                <action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>
            </block>

Avatar

Richard Feraro UNITED STATES

July 13th, 2010 at 4:05 pm

I was able to add the same files you listed in your code using the same example in the article:

	$head->addCss('css/reset.css');
	$head->addCss('css/boxes.css');
	$head->addCss('css/menu.css');
	$head->addCss('css/clears.css');
	$head->addCss('css/styles.css');
	$head->addCss('css/print.css.css');

	// Add Prototype JS file
	// Note that it automatically adds the 'js' directory at the beginning
	// making it look like the URL below:
	// http://localhost/magento/js/prototype/prototype.js
	$head->addJs('prototype/prototype.js');
	$head->addJs('prototype/validation.js');
	// This js file automatically adds the scriptaculous related js files
	$head->addJs('scriptaculous/scriptaculous.js');
	// Mage related js
	$head->addJs('varien/js.js');
	$head->addJs('varien/form.js');
	$head->addJs('varien/menu.js');
	$head->addJs('mage/translate.js');
	$head->addJs('mage/cookies.js');

Maybe its because of these two lines (check my inline comments):

// Is this file existing in your magento-root/js folder?
$head->addJs('lib/ccard.js');
// I'm sure this is a typo. It should be $head->addJs('prototype/validation.js');
$head->addJs('protype/validatio.js');

Avatar

Richard Feraro UNITED STATES

July 13th, 2010 at 4:18 pm

Also, there’s only page.xml file in my magento default theme directory, no local.xml. I didn’t change any XML file too.

Avatar

Brady UNITED STATES

July 14th, 2010 at 3:18 am

Hi Richard,

Thanks so much for the help, as always.

This was totally something I overlooked. When I look the source code of my dev site, I only saw one line of JS. But when I look at that JS it contains all the “addJs” files. I wasn’t aware that Magento combines the JS files.

Still working on pulling in the ‘getChildHtml’ references…

Avatar

Brady UNITED STATES

July 14th, 2010 at 5:49 am

Hi Richard,

Okay, I’m getting the hang od the getChildHtml replacement, but how do I nest blocks?

In your example above, it pulls in the header just fine, but leaves out the top links, navigation and search box. I’m able to pull in all those items separately, but how do I tell them to go into the header? I read on the forums about using ‘setParentBlock’ but that’s undefined when I try to access it from WordPress.

I’m defining the the navigation using:

// Get Navigation
	$topMenu = $Block->createBlock('Catalog/Navigation');
	$topMenu->setTemplate('catalog/navigation/top.phtml');

and displaying it using:

echo (class_exists('Mage')) ? $topMenu->toHTML() : '' ;

Avatar

Mark UNITED STATES

July 14th, 2010 at 7:39 am

This is what I am looking for.

@Brady How did you pull the items separately? What code are you using?

@Richard I understand you are busy but I think it would be a good idea to add a skeleton theme to the plugin that has all the header info and footer in it. Or a stand alone theme, eighter way the user would have the option to activate the theme, right? This might not work for everyone because not every magento theme is the same. Or maybe it will, not sure.

Thanks,
Mark

Avatar

Mark UNITED STATES

July 14th, 2010 at 7:41 am

Sorry.
typo->either

Avatar

Brady UNITED STATES

July 14th, 2010 at 1:33 pm

Hi Mark,

Here’s my WordPress Theme index.php file so far (sorry for the long post, Richard):

<?php
// Your Magento Mage.php
// Mage Enabler WordPress plugin users may skip line numbers 5, 6 and 7
// require_once ("/your/magento/app/Mage.php"); */
// umask(0); */
// Mage::app("default"); */

// Make sure to execute this block of code only if Mage object is present
if(class_exists('Mage')){
	// Instantiate session and generate needed cookie
	Mage::getSingleton('core/session', array('name' => 'frontend'));
	$Block = Mage::getSingleton('core/layout');

	// Start pulling the blocks
	$head = $Block->createBlock('Page/Html_Head');
	
	// Add default css
	// Magento adds the default skin directory 'skin/frontend/default/default' before 'css/styles.css' making it look like the URL below:
	// http://localhost/magento/skin/frontend/default/default/css/styles.css
	$head->addCss('css/reset.css');
	$head->addCss('css/boxes.css');
	$head->addCss('css/menu.css');
	$head->addCss('css/clears.css');
	$head->addCss('css/styles.css');
	$head->addCssIe('css/styles.css');
	$head->addCssIe('css/styles.css');
	$head->addCss('css/print.css.css');
	
	// Add Prototype JS file
	// Note that it automatically adds the 'js' directory at the beginning making it look like the URL below:
	// http://localhost/magento/js/prototype/prototype.js
	$head->addJs('prototype/prototype.js');
	$head->addJs('lib/ccard.js');
	$head->addJs('protype/validation.js');
	$head->addJs('scriptaculous/builder.js');
	$head->addJs('scriptaculous/effects.js');
	$head->addJs('scriptaculous/dragdrop.js');
	$head->addJs('scriptaculous/controls.js');
	$head->addJs('scriptaculous/slider.js');
	$head->addJs('varien/js.js');
	$head->addJs('varien/form.js');
	$head->addJs('varien/menu.js');
	$head->addJs('mage/translate.js');
	$head->addJsIE('css/styles.css');
	$head->addJs('mage/cookies.js');

	// Get the header's HTML
	$header = $Block->createBlock('Page/Html_Header');
	$header->setTemplate('page/html/header.phtml');
	/* $header = $Block->createBlock('page/html/header.phtml'); */

	// Get Top Search HTML
	$topSearch = $Block->createBlock('Core/Template');
	$topSearch->setTemplate('catalogsearch/form.mini.phtml');
	/* $topSearch = $Block->createBlock('catalogsearch/form.mini.phtml'); */
	/* $topSearch->setParentBlock($header); */

	// Get Navigation
	$topMenu = $Block->createBlock('Catalog/Navigation');
	$topMenu->setTemplate('catalog/navigation/top.phtml');

	// And the footer's HTML as well
	$footer = $Block->createBlock('Page/Html_Footer');
	$footer->setTemplate('page/html/footer.phtml');
} 
?>
<html>
  <head>
	<?php
		// Display the needed tags for CSS and JS
		echo (class_exists('Mage')) ? $head->getCssJsHtml() : '' ;
	?>
  </head>
  <body>
  	<?php
		// Display the Header HTML
		echo (class_exists('Mage')) ? $topSearch->toHTML() : '' ;
		echo (class_exists('Mage')) ? $header->toHTML() : '' ;
		echo (class_exists('Mage')) ? $topMenu->toHTML() : '' ;
	?>
		<div id="container">
			<div id="content" role="main">

			<?php
			/* Run the loop to output the posts.
			 * If you want to overload this in a child theme then include a file
			 * called loop-index.php and that will be used instead.
			 */
			 get_template_part( 'loop', 'index' );
			?>
			</div><!-- #content -->
		</div><!-- #container -->

	<?php get_sidebar(); ?>
	<?php
		// Display the Footer HTML
		echo (class_exists('Mage')) ? $footer->toHTML() : '' ;
	?>
  </body>
</html>

Avatar

Richard Feraro UNITED STATES

July 14th, 2010 at 4:10 pm

This is what I am looking for.

@Brady How did you pull the items separately? What code are you using?

It’s already posted here.

@Richard I understand you are busy but I think it would be a good idea to add a skeleton theme to the plugin that has all the header info and footer in it. Or a stand alone theme, eighter way the user would have the option to activate the theme, right?

You already answered that. I’ll just quote what you said, “This might not work for everyone because not every magento theme is the same.”

If you have read every Magento-related post I have here, you will see that I’m not really discussing any theme-related modification here. What I post here is how to use Magento’s session to an external site. That external site could be a forum, a blogging tool or any PHP based web application that’s why there’s no need to create any “skeleton theme” like you mentioned. Magento session, in its simplest definition is actually a PHP object and its up to the reader how he will use and manipulate that object to achieve his task (Magento Documentation).

Please consider also that I’m in Manila, Philippines and we have somewhere between 8 to 12 hour time difference. I may not be able to reply immediately, but I always reply back to every comment/inquiry here.

Avatar

Mark UNITED STATES

July 14th, 2010 at 10:47 pm

Thanks, I will try it out. Sorry for hijacking your comment.

Avatar

sajo GERMANY

August 18th, 2010 at 8:47 am

HI Richard,
thats what i searched for to build an ajax card! great post!!!

I got only one problem with the locale.
Mage::app()->getLocale()->getLocaleCode(); shows de_DE, thats perfect but that block is in en_EN.
any ideas how to set locale or right locale folder?

Avatar

Richard Feraro UNITED STATES

August 18th, 2010 at 5:13 pm

Hello sajo!

You can use setLocaleCode.

Avatar

Rhonda Morin UNITED STATES

October 26th, 2010 at 11:05 am

I have a full content site that has been around 12 years. I have added a magento store in the last 9 months. I am trying to get products from Magento to add to my pages on the content site. For instance: on the page about decorating a boys bedroom I want to pull the bunk beds or boy’s room lighting. Will this do this for me or do you know something that will do this for me?

I would hope it would have the photo, name, price and perhaps a little bit of the description. Then a link to the product. If I could select up to 3 products based on keywords that would rock. Anyone out there?????

Avatar

Richard Feraro PHILIPPINES

October 26th, 2010 at 12:09 pm

Hello Rhonda.

Your question was also asked by Vikas on this thread. Check out the comments for more info.

Thanks!

Avatar

James Rowe UNITED KINGDOM

November 2nd, 2010 at 10:49 pm

Hi Richard,

Thanks again for this fantastic information!

I’ve managed to get a number of different widgets to render static content from magento, as well as lists of products from certain categories. All was going well but I just hit a problem.

For some reason when I render the sidebar shopping cart it always thinks I have no products in my shopping cart. I am guessing that somehow it is not using the same session.

Any suggestions welcome! My site is using the Mage Enabler plugin and the wordpress header contains…

if(class_exists(‘Mage’)){
Mage::getSingleton(‘core/session’, array(‘name’ => ‘frontend’));
$mage_session = Mage::getSingleton(“customer/session”);
}

and then later in the page…

if (class_exists(‘Mage’)) {
$magento_block = Mage::getSingleton(‘core/layout’);
$block = $magento_block->createBlock(‘checkout/cart_sidebar’);
$block->setTemplate(‘checkout/cart/sidebar.phtml’);
echo $block->toHTML();
}

I also tried adding calls to addItemRenderer but it seemed to make no difference.

The problem is that the call in the sidebar.phtml to $this->getSummaryCount() always returns an ampty string/null.

Thanks in advance for your help and advice!

Avatar

Richard Feraro UNITED STATES

November 3rd, 2010 at 8:31 pm

Hi James :)

Try the code below. Echo it somewhere within the page where you are executing your previous code. If it displays the cart quantity, then something is wrong with your script.

$cartQty = Mage::helper('checkout/cart')->getSummaryCount();

or

echo Mage::getSingleton('checkout/cart')->getSummaryQty();

Avatar

James Rowe UNITED KINGDOM

November 3rd, 2010 at 9:32 pm

Hi Richard,

I checked deeper into the code inside the checkout/cart_sidebar block and found that code, always seems to return a blank.

Interestingly (although perhaps not useful) $block->getItemCount() seems to return 3, no matter how many items I have in the basket.

James

Avatar

Richard Feraro UNITED STATES

November 3rd, 2010 at 11:17 pm

I think getItemCount() only counts the unique items in the cart. So if you have 3 iPods, 4 USB Dongle, 1 iPad it will only return 3 instead of 8.

Avatar

James Rowe UNITED KINGDOM

November 4th, 2010 at 7:24 pm

Ah that would make sense, but it ALWAYS returns 3… even when my basket is empty.

What I can’t work out is why $cartQty = Mage::helper(‘checkout/cart’)->getSummaryCount(); isn’t working.

Any suggestions?

Avatar

Richard Feraro UNITED STATES

November 4th, 2010 at 7:57 pm

I was able to use getSummaryCount() using the script in this post. I replaced line 68 with the code below:

	<strong><?php echo "getSummaryCount() = " . Mage::helper('checkout/cart')->getSummaryCount();?></strong>

Avatar

Richard Feraro UNITED STATES

November 4th, 2010 at 8:04 pm

You need to double check as well if your using the right quote (cart) for that session by checking the quote data:

echo print_r(Mage::getSingleton('checkout/session')->getQuote()->getData());

You can check the existing carts in the admin panel to see how many quote/cart is active at the moment.

Avatar

James Rowe UNITED KINGDOM

November 5th, 2010 at 5:46 pm

Thanks Richard, I am sure I am getting closer to figuring this out – with your help!

I copied the example from other post, changing line 68 – and that worked perfectly as a stand-alone php file (not going through wordpress).

I then disabled Mage Enabler and copied the code from the example into my header.php – resulting in the same thing I had before (an empty basket).

Moving the file into my templates folder (still not going through wordpres) still worked.

So, I am guessing it must be something to do with wordpress itself, or my specific template. I will try running it under the default twentyten template to see if that works.

Have you heard of or from anyone else trying to put the basket inside a wordpress page?

Many Thanks,

James

Avatar

James Rowe UNITED KINGDOM

November 5th, 2010 at 5:58 pm

Unfortunately I get exactly the same behaviour in the TwentyTen template. I am guessing that wordpress must do something to the cookies, HTTP Request or Response Headers that stops magento from being able to match the users session up with their session in magento.

Any ideas?

Avatar

Richard Feraro UNITED STATES

November 5th, 2010 at 6:27 pm

I think it should work :) Try another way such as the code below:

<?php 
// Display number of unique items in cart
echo "Number of unique items: " . Mage::helper('checkout/cart')->getCart()->getItemsCount();
echo "<br>";
// Display total cart items
echo "Total cart items: " . Mage::helper('checkout/cart')->getCart()->getItemsQty();

Avatar

Richard Feraro UNITED STATES

November 5th, 2010 at 6:39 pm

You can extract the same information too within getQuote()->getData():

// Display number of unique items in cart
echo Mage::getSingleton('checkout/session')->getQuote()->getData('items_count');
// Display total cart items
echo intval(Mage::getSingleton('checkout/session')->getQuote()->getData('items_qty'));

Avatar

James Rowe UNITED KINGDOM

November 5th, 2010 at 6:50 pm

Those just return zero. It all seems to run – it just ends up with the wrong session/cart somehow.

Avatar

Richard Feraro UNITED STATES

November 5th, 2010 at 6:56 pm

Check this post, it might be related.

Avatar

Richard Feraro UNITED STATES

November 5th, 2010 at 7:06 pm

Hmm, is there a way for me to see that particular page so I can check on it?

Avatar

James Rowe UNITED KINGDOM

November 5th, 2010 at 7:17 pm

I’ve tried sending to your yahoo IM, don;t want to put the clients test details up on the web.

Avatar

Richard Feraro UNITED STATES

November 5th, 2010 at 7:25 pm

I was able to run your code in my local machine. See screenshot below:

Test Cart Widget

Avatar

Richard Feraro UNITED STATES

November 5th, 2010 at 7:26 pm

I didn’t get any yahoo message. It’s richardferaro :)

Avatar

James Rowe UNITED KINGDOM

November 5th, 2010 at 7:33 pm

Damn, then I must have something wrong somewhere. Thanks!

Avatar

Richard Feraro UNITED STATES

November 5th, 2010 at 7:45 pm

I updated the screenshot and moved the script to sidebar.php

Avatar

Richard Feraro UNITED STATES

November 5th, 2010 at 7:50 pm

Try the code below too to clear the cart before you try your testing again.

<?php Mage::getSingleton('checkout/session')->clear(); ?>

Avatar

James Rowe UNITED KINGDOM

November 5th, 2010 at 8:02 pm

Well I can add products using the shop section of the site, and the test php file correctly displays my product info. Just the pages from wordpress seem to have a different basket.

Don’t really know what else to try.

I guess I can build a standalone php page with just the basket in it and display in an iframe. Horrible hack but something about wordpress seems to stop it sharing its session.

Avatar

James Rowe UNITED KINGDOM

November 5th, 2010 at 8:09 pm

Ok, I have replaced my wordpress homepage with a static page – with a custom template. That template is the exact code from the example test file only.

That displays the following…

Very Nice T-shirt
Size:
Quantity:
Cart Qty: 0 Array ( [store_id] => 1 [is_checkout_cart] => 1 [remote_ip] => 88.81.146.120 [x_forwarded_for] => ) 1

While the test php file accessed directly (not through wordpress) works correctly…

Cart Qty: 4 Array ( [entity_id] => 25 [store_id] => 1 [created_at] => 2010-11-02 11:51:16 [updated_at] => 2010-11-05 11:58:09 [converted_at] => 0000-00-00 00:00:00 [is_active] => 1 [is_virtual] => 0 [is_multi_shipping] => 0 [items_count] => 4 [items_qty] => 4.0000 [orig_order_id] => 0 [store_to_base_rate] => 1.0000 [store_to_quote_rate] => 1.0000 [base_currency_code] => GBP [store_currency_code] => GBP [quote_currency_code] => GBP [grand_total] => 189.8400 [base_grand_total] => 189.8400 [checkout_method] => [customer_id] => 1 [customer_tax_class_id] => 3 [customer_group_id] => 1 [customer_email] => jim@jimcode.org [customer_prefix] => [customer_firstname] => James [customer_middlename] => [customer_lastname] => Rowe [customer_suffix] => [customer_dob] => [customer_note] => [customer_note_notify] => 1 [customer_is_guest] => 0 [remote_ip] => 88.81.146.120 [applied_rule_ids] => [reserved_order_id] => [password_hash] => [coupon_code] => [global_currency_code] => GBP [base_to_global_rate] => 1.0000 [base_to_quote_rate] => 1.0000 [customer_taxvat] => [customer_gender] => [subtotal] => 169.8400 [base_subtotal] => 169.8400 [subtotal_with_discount] => 169.8400 [base_subtotal_with_discount] => 169.8400 [is_changed] => 1 [trigger_recollect] => 0 [ext_shipping_info] => [gift_message_id] => [x_forwarded_for] => ) 1

So something to do with wordpress itself, rather than my templates seems to be causing this. Any suggestions?

Avatar

Richard Feraro UNITED STATES

November 5th, 2010 at 8:18 pm

Hmmm, if I can see that page I can troubleshoot it. Hit me up in ym: richardferaro.

Avatar

Richard Feraro UNITED STATES

November 5th, 2010 at 8:19 pm

It will be good if its running in subversion so you can see my changes if ever.

Avatar

Richard Feraro UNITED STATES

November 5th, 2010 at 9:31 pm

I was able to replicate your PHPSESSID cookie using the code below:

Mage::getSingleton("core/session");

Avatar

James Rowe UNITED KINGDOM

November 5th, 2010 at 11:32 pm

Finally fixed it Richard, many many thanks!!

For anyone else with similar issues – I was connecting to my magento session from within my header.php file of my wordpress theme. It needs to happen in each of the template files e.g. index.php – above the call to get_header.

Thanks again Richard.

Avatar

Richard Feraro UNITED STATES

November 5th, 2010 at 11:43 pm

Great! Thanks for sharing it James :)

Avatar

Christopher UNITED STATES

November 17th, 2010 at 8:50 am

Hello Richard,
Thanks for the handy plugin…
I am trying to get it working in WP, I’m running a multi-website setup of Magento and the problem I’m having is specifying which website’s templates to pull from. The plugin is working, but it’s pulling template files from my default website (not the “default” template). Now I could make this particular site the default I guess, but if everything works as I hope it will I’d like to set up the plugin for a few of the sites. Is there a way to specify the website?

In the mage-enabler settings I did see this “Default store (auto-detect) Store configuration to be used whenever a store is not defined in your script.” and it did list my default website/store/store view, so I’m assuming by that message there is a way to specify, but clearly I’m missing something.

Thanks in advance.

Avatar

Richard Feraro

November 17th, 2010 at 12:16 pm

Hello Christopher :)

You may edit the file mage-enabler.php to indicate the specific store you want to use. Just locate the mage_enabler() function and within it, modify the code Mage::app(); by adding your store code in it like the script below:

Mage::app('<your-store-code-here>');

Hope this will help you.

Avatar

Salty UNITED STATES

November 17th, 2010 at 2:01 pm

This proved extremely useful. It would be extremely beneficial if we can get a readme to use as reference for displaying products, categories, etc.

Your plugin IS the intermediary to the top CMS and Ecommerce softwares, you could easily solidify this into a product that MANY would use.

There is a ridiculous amount of potential.

Avatar

Richard Feraro UNITED STATES

November 17th, 2010 at 4:15 pm

Thank you for the feedback. I’m actually creating a demo site accessible via github or other version control system so the readers will be able to see how to incorporate Magento using Mage Enabler in the Twenty Ten WordPress template.

Avatar

Christopher UNITED STATES

November 18th, 2010 at 12:30 am

That did the trick Richard, Thanks for your help, I really appreciate it.

One more question: My sites are currently running individual instances of WP, but eventually I want to merge them into the new version 3 utilizing it’s multisite capabilities. I’m not clear how the multisite works yet, but if plugins are shared by all sites I imagine I’ll run into problems as I won’t be able to specify multiple magento stores to it’s associated WP site. But if each site can have it’s own version of your plugin, then everything should be fine. Do you have any experience / insight with this?

Avatar

Richard Feraro

November 18th, 2010 at 1:53 am

You’re welcome :)

Regarding your question, a simple if...else clause will do the trick by detecting the domain where the WP site is being accessed and applying the store code in Mage::app('<your-store-code-here>'); using the same procedure I posted earlier. Nevertheless, I’ll try to create a much cleaner approach with GUI on this one in the next revision of Mage Enabler.

Avatar

Salty UNITED STATES

November 18th, 2010 at 4:24 am

Thanks Richard for your continued support and assistance.

Will the demo site have example tags in it so we can see how to integrate Magento into wordpress instead of just seeing a wordpress site with magento?

For example, it’s all installed and working but I have no idea how the registration system is suppose to work besides the cookie being present and adding categories/products to pages in wordpress is a mystery to me.

How deep are your future plans with this? Is it just a hobby/side-project or would you be interested in actually supplying this as a product? There is no shortage of ecommerce sites that would find this extremely valuable.

Avatar

randall NETHERLANDS

November 21st, 2010 at 2:53 am

Hi Richard,

trying to follow your examples, but my lack of understanding of Magento is for the moment only bringing headaches.
i love the idea of using Magento as a backend behind wordpress but so far you seem to be the only one going this direction instead of the other way around.

wondering if its possible to only pull a product block (if thats what its called) into a wordpress post or page like:

{{block type=”catalog/product_list” category_id=”2″ template=”catalog/product/list.phtml”}}

My ideal would be to forget about any theming in Magento and only to pull the product, cart and checkout process to wordpress so you can concentrate on wordpress for the CMS and styling etc..

Thanks for the work done already on this site, it brings some good food for thought.

Avatar

Richard Feraro PHILIPPINES

November 21st, 2010 at 3:23 am

Hi Randall, thanks for the feedback. I believe some of the readers here did the same thing you mentioned which can be found in the comments area. :)

Avatar

Allan MacGregor CANADA

November 24th, 2010 at 1:20 am

Hi, I’m trying to make the footer shared between wordpress and Magento but I’m getting the following error

PHP Fatal error: Call to a member function toHTML() on a non-object in /srv/www/wooftown.demacmedia.com/public_html/wp-content/themes/twentyten/footer.php on line 19, referer: http://wooftown.demacmedia.com/?page_id=2

on my header.php I have:

// Make sure to execute this block of code
// only if Mage object is present
if(class_exists('Mage')){
	// Instantiate session and generate needed cookie
	Mage::getSingleton('core/session', array('name' => 'frontend'));
	$Block = Mage::getSingleton('core/layout');
	// And the footer's HTML as well
	$footer = $Block->createBlock('Page/Html_Footer');
	$footer->setTemplate('page/html/footer.phtml');
}

and on the footer I have:

		echo (class_exists('Mage')) ? $footer->toHTML() : '' ;

Any advice on how to solve this I noticed that Michael Sacca had a similar problem.

Cheers and thanks in advance.

Avatar

Allan MacGregor CANADA

November 24th, 2010 at 1:25 am

Douh! My mistake mage enable wasn’t activated but now I’m getting a new error:

PHP Fatal error: Uncaught exception ‘Zend_Controller_Response_Exception’ with message ‘Cannot send headers; headers already sent in /srv/www/wooftown.demacmedia.com/public_html/wp-content/themes/twentyten/header.php, line 14′ in /srv/www/wooftown.demacmedia.com/public_html/shop/lib/Zend/Controller/Response/Abstract.php:321\nStack trace:\n#0 /srv/www/wooftown.demacmedia.com/public_html/shop/lib/Zend/Controller/Response/Abstract.php(115): Zend_Controller_Response_Abstract->canSendHeaders(true)\n#1 /srv/www/wooftown.demacmedia.com/public_html/shop/app/code/core/Mage/Core/Model/App.php(1150): Zend_Controller_Response_Abstract->setHeader(‘Content-Type’, ‘text/html; char…’)\n#2 /srv/www/wooftown.demacmedia.com/public_html/shop/app/code/core/Mage/Core/Model/Cookie.php(91): Mage_Core_Model_App->getResponse()\n#3 /srv/www/wooftown.demacmedia.com/public_html/shop/app/code/core/Mage/Core/Model/Cookie.php(206): Mage_Core_Model_Cookie->_getResponse()\n#4 /srv/www/wooftown.demacmedia.com/public_html/shop/app/code/core/Mage/Core/Model/Session/A in /srv/www/wooftown.demacmedia.com/public_html/shop/lib/Zend/Controller/Response/Abstract.php on line 321

Now my function php file looks like this:

/**
 * Translator function
 *
 * @deprecated 1.3
 * @param string $text the text to translate
 * @param mixed optional parameters to use in sprintf
 */
if (!function_exists('__')) {
	function __()
	{
		return Mage::app()->getTranslator()->translate(func_get_args());
	}
}

Avatar

Richard Feraro PHILIPPINES

November 24th, 2010 at 2:04 am

Hi, try moving just the line of code below to your theme’s index.php instead of placing it in the header.php:

Mage::getSingleton('core/session', array('name' => 'frontend'));

Avatar

Lis UNITED STATES

November 24th, 2010 at 11:05 pm

I am trying to include just the toplinks (login, wishlist, cart) at the top of every WordPress page and can’t seem to make them appear. As far as I can see they are called from header.phtml

getChildHtml(‘topLinks’) ?>

but they simply will not show up. I am seeing a search bar, contents of top.phtml, part of header.phtml (excluding topLinks), and the footer, which contains newsletter signup, but the links won’t show. Attempts to copy the contents of top.links.phtml into one of the 3 files that are rendering — header, top, and footer — doesn’t do the trick.

Working with something like this

$toplinks = $Block->createBlock(‘Page/Html_toplinks’);?$toplinks->setTemplate(‘page/html/top.links.phtml’);?/* $toplinks = $Block->createBlock(‘page/html/top.links.phtml’); */

doesn’t seem to do it.

Any ideas? Thank you!

Avatar

Salty UNITED STATES

November 29th, 2010 at 1:44 pm

I’m wanting to do the same thing in which Randall described and have found no answers in the rest of the comments area. We would like to request some kind of direction to provide exactly what Randall has described but have no answers.

I visit this site very frequently, daily, weekly, and monthly for the sole purpose of one day having some kind of example of how to put catalogs/products/links inside wordpress.

Can you help us out Richard?

Avatar

Richard Feraro UNITED STATES

November 29th, 2010 at 11:58 pm

Try the code below:

// Blocks
$toplinks = $Block->createBlock("page/template_links");

$checkoutlinks = $Block->createBlock("checkout/links");
$checkoutlinks->setParentBlock($toplinks);

$wishlistlinks = $Block->createBlock('wishlist/links');
$wishlistlinks->setParentBlock($toplinks);

// Links
$toplinks->addLink($toplinks->__('My Account'), 'customer/account', $toplinks->__('My Account'), true, array(), 10, 'class="first"');
$wishlistlinks->addWishlistLink();
$checkoutlinks->addCartLink();
$checkoutlinks->addCheckoutLink();

$session = Mage::getSingleton('customer/session');
// Remove the double forward slashes from the code below to test login status. If credentials are wrong, a fatal error will occur.
// $session->login('<customer-username>','<customer-password>');
// Use the code below to logout session
// $session->logout(); 

if ($session->isLoggedIn()) {
	$toplinks->addLink($toplinks->__('Log Out'), 'customer/account/logout', $toplinks->__('Log Out'), true, array(), 100, 'class="last"');
} else {
	$toplinks->addLink($toplinks->__('Log In'), 'customer/account/login', $toplinks->__('Log In'), true, array(), 100, 'class="last"');
}

# Use the code below to print the links
echo '<div class="toplinks">'.$toplinks->toHtml().'</div>';

It should display something like the links below:

My Account My Wishlist My Cart Checkout Log In / Log Out

Avatar

Richard Feraro UNITED STATES

November 30th, 2010 at 12:21 am

How about doing this one:

$Block = Mage::getSingleton('core/layout');
$toolbar = $Block->createBlock('catalog/product_list');
// Try this code to display random products too
// $toolbar = $Block->createBlock('catalog/product_list_random');
$toolbar->setTemplate('catalog/product/list.phtml');

echo $toolbar->toHtml();

Avatar

Richard Feraro UNITED STATES

November 30th, 2010 at 12:21 am

see my reply below to Randall.

Avatar

Salty UNITED STATES

December 1st, 2010 at 7:52 am

Using createBlock() and addLink() are giving me non-object Fatal Errors in public_html/wp-content/themes/traction/footer.php

I have this on line 1 of footer.php: ‘frontend’)); ?>

At the very end of footer I placed the code exactly what you have provided above. Adminhtml cookie is present.

Have any idea what it could possibly be?

Also, when I go to shop.domain.com/admin I can’t log in because when I click login I get this in my bar: index/key/9e62290021e5959c39983fd2adaf20f7/, so my question would be, how do I access the backend to add things as right now it’s fresh.

Avatar

Salty UNITED STATES

December 1st, 2010 at 7:53 am

Also, thanks for the continued high-level support.

Avatar

Salty UNITED STATES

December 1st, 2010 at 7:54 am

line1 code cut off:

Mage::getSingleton(‘core/session’, array(‘name’ => ‘frontend’));

Avatar

Salty UNITED STATES

December 1st, 2010 at 9:50 am

Trying to log in wp-login.php on wordpress gives me:

Fatal error: Class ‘Mage’ not found in /public_html/wp-includes/user.php on line 114

114=
$session = Mage::getSingleton(“customer/session”);

Avatar

Richard Feraro PHILIPPINES

December 1st, 2010 at 10:12 am

It happened because Mage object have not been instantiated. You should place the code below at the top of index.php file, just before the get_header() code:

if(class_exists('Mage')){
    Mage::getSingleton('core/session', array('name' => 'frontend'));
}

Avatar

Richard Feraro PHILIPPINES

December 1st, 2010 at 10:15 am

Follow the code i posted to your comment where to place the code below:

if(class_exists('Mage')){
    Mage::getSingleton('core/session', array('name' => 'frontend'));
}

Don’t repeat that code anywhere else or you’ll get header been sent error.

Regarding your backend login error, check this post.

Avatar

hamza khan PAKISTAN

June 6th, 2011 at 10:45 pm

not able to see the toolbar i checked the option from admin but its not showing toolbar on frontend.
plz help.

Avatar

Nilesh Toshniwal INDIA

June 17th, 2011 at 10:19 pm

Hi Richard
Thx for nice post, but I am kinda hanged up actually if I try the code given you it doesn’t load the theme I am using on magento while it just loads default theme, actually I am looking to show magento’s header and footer in joomla template but for the time I am just trying to get it done in custom php file the code of the file is:

require_once '../app/Mage.php';
umask(0);
Mage::app();
if(class_exists('Mage')){
	// Instantiate session and generate needed cookie
	Mage::getSingleton('core/session', array('name' => 'frontend'));
	$Block = Mage::getSingleton('core/layout');

	// Start pulling the blocks
	$head = $Block->createBlock('Page/Html_Head');
	// Add default css
	// Magento adds the default skin directory
	// 'skin/frontend/default/default' before 'css/styles.css'
	// making it look like the URL below:
	// http://localhost/magento/skin/frontend/default/default/css/styles.css
	$head->addCss('css/styles.css');
	// Add Prototype JS file
	// Note that it automatically adds the 'js' directory at the beginning
	// making it look like the URL below:
	// http://localhost/magento/js/prototype/prototype.js
	$head->addJs('prototype/prototype.js');

	// Get the header's HTML
	$header = $Block->createBlock('Page/Html_Header');
	$header->setTemplate('page/html/header.phtml');

	// And the footer's HTML as well
	$footer = $Block->createBlock('Page/Html_Footer');
	$footer->setTemplate('page/html/footer.phtml');
}

	// Display the needed tags for CSS and JS
		echo (class_exists('Mage')) ? $head->getCssJsHtml() : '' ;


// Display the Header HTML
		echo (class_exists('Mage')) ? $header->toHTML() : '' ;
		
		echo (class_exists('Mage')) ? $footer->toHTML() : '' ;

Avatar

Dave IRELAND

August 19th, 2011 at 8:54 am

is it possible to add one product into a post

Avatar

Justin UNITED STATES

September 16th, 2011 at 5:59 am

Thanks for the tutorial, have you successfully incorporated Magento translations with these externally loaded Mage resources?

I can get the header and footer externalized just fine, but I cannot seem to get it to work.

Thanks in advance,

Justin

Avatar

Richard Feraro PHILIPPINES

September 17th, 2011 at 8:01 am

I haven’t tried yet but it should be available upon setting of your store.

Avatar

Mathew Beane UNITED STATES

September 28th, 2011 at 12:21 am

Have you had any luck implementing a checkout page, in wordpress? I would like to have a simple checkout, it would only ever have one product in it.

I am able to pull in some of the one page checkout blocks, but i am wondering if there is an easier way to handle a checkout.

Thanks,
Mathew

Avatar

Richard Feraro PHILIPPINES

September 28th, 2011 at 1:59 am

What have you done so far? Did you try using this:
$checkout = Mage::getSingleton(‘checkout/type_onepage’);

Avatar

Mathew Beane UNITED STATES

September 28th, 2011 at 2:06 am

Yes, that brings in the base template(including the html header stuff that I dont want), without any of the bits and pieces. I supposed you have to go through and load each piece, and put it in the proper spot, but I was hoping there was an easier way.

Avatar

Mathew Beane UNITED STATES

September 28th, 2011 at 2:36 am

$magento_block = Mage::getSingleton(‘core/layout’);
$block = $magento_block->createBlock(‘checkout/onepage’);
$block->setTemplate(‘checkout/onepage.phtml’);
echo $block->toHTML();

This is what I have had the most success with, but it does not pull in the other pieces yet.

Avatar

RAJ

November 23rd, 2012 at 10:24 pm

hii richard..i made a theme including html, js and css file.but now to custmise my theme with magento…i dont know how to and where to add my html my file and how to call my js and css from my html page in magento………
please help me….i am stuck here..
:(

Avatar

Richard Feraro

December 4th, 2012 at 3:17 am

Post your script here so I can examine your code

Avatar

Mike INDIA

December 12th, 2012 at 9:00 pm

Hi Richard,

By Default, I can get the header and footer of the default theme. But I like to render the header and footer of the perticuler theme. How can i write the code to get it.

Thanks
Mike

Avatar

Eric UNITED STATES

January 15th, 2013 at 1:35 am

Thanks Richard! You have some incredibly helpful posts over the past couple years. Thank you thank you thank you.

Avatar

Richard Feraro PHILIPPINES

January 24th, 2013 at 1:22 pm

Thank you Eric. I just transferred to a new work so hopefully I can write post more often :)

Comment Form

About my blog

This blog is targeted towards all levels of developers and also designers. Various topics are discussed such as Magento, PHP & MySQL, jQuery, WordPress, CSS and HTML.

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 12 other subscribers

PayPal Donation

WordPress + Magento

Proudly Pinoy!

Proudly Pinoy!

Recent Trackbacks

Archives

Disclaimer

All entries in this blog are my opinion and don't necessarily reflect the opinion of my employer or my mom.