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. You may not know that most of the secured casino websites like Daisy slots used Magento blocks.
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>:
&amp;amp;lt;?php
// Display the needed tags for CSS and JS
echo (class_exists('Mage')) ? $head-&amp;amp;gt;getCssJsHtml() : '' ;
?&amp;amp;gt;
&amp;amp;lt;/head&amp;amp;gt;
Proceed by adding the Magento header block right after the <BODY> tag but before the <DIV> tag.
&amp;amp;lt;body&amp;amp;gt;
&amp;amp;lt;?php
// Display the Header HTML
echo (class_exists('Mage')) ? $header-&amp;amp;gt;toHTML() : '' ;
?&amp;amp;gt;
&amp;amp;lt;div class="body"&amp;amp;gt;
Finally, add the Magento footer block right between the end tag of </DIV> and </BODY> tag
&amp;amp;lt;/div&amp;amp;gt;
&amp;amp;lt;?php
// Display the Footer HTML
echo (class_exists('Mage')) ? $footer-&amp;amp;gt;toHTML() : '' ;
?&amp;amp;gt;
&amp;amp;lt;/body&amp;amp;gt;
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:
&amp;amp;lt;?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' =&amp;amp;gt; 'frontend'));
$Block = Mage::getSingleton('core/layout');
// Start pulling the blocks
$head = $Block-&amp;amp;gt;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-&amp;amp;gt;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-&amp;amp;gt;addJs('prototype/prototype.js');
// Get the header's HTML
$header = $Block-&amp;amp;gt;createBlock('Page/Html_Header');
$header-&amp;amp;gt;setTemplate('page/html/header.phtml');
// And the footer's HTML as well
$footer = $Block-&amp;amp;gt;createBlock('Page/Html_Footer');
$footer-&amp;amp;gt;setTemplate('page/html/footer.phtml');
}
?&amp;amp;gt;
&amp;amp;lt;html&amp;amp;gt;
&amp;amp;lt;head&amp;amp;gt;
&amp;amp;lt;script type="text/javascript"&amp;amp;gt;
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);
})();
&amp;amp;lt;/script&amp;amp;gt;
&amp;amp;lt;style type="text/css"&amp;amp;gt;
.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
}
&amp;amp;lt;/style&amp;amp;gt;
&amp;amp;lt;?php
// Display the needed tags for CSS and JS
echo (class_exists('Mage')) ? $head-&amp;amp;gt;getCssJsHtml() : '' ;
?&amp;amp;gt;
&amp;amp;lt;/head&amp;amp;gt;
&amp;amp;lt;body&amp;amp;gt;
&amp;amp;lt;?php
// Display the Header HTML
echo (class_exists('Mage')) ? $header-&amp;amp;gt;toHTML() : '' ;
?&amp;amp;gt;
&amp;amp;lt;div class="body"&amp;amp;gt;
&amp;amp;lt;h1&amp;amp;gt;How to add Magento blocks, CSS and Javascript to an external site&amp;amp;lt;/h1&amp;amp;gt;
&amp;amp;lt;p class="otherdata"&amp;amp;gt;Written by &amp;amp;lt;strong&amp;amp;gt;Richard Feraro&amp;amp;lt;/strong&amp;amp;gt; | Posted on &amp;amp;lt;strong&amp;amp;gt;July 2, 2010&amp;amp;lt;/strong&amp;amp;gt;&amp;amp;lt;/p&amp;amp;gt;
&amp;amp;lt;p class="text"&amp;amp;gt;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. &amp;amp;lt;/p&amp;amp;gt;
&amp;amp;lt;/div&amp;amp;gt;
&amp;amp;lt;?php
// Display the Footer HTML
echo (class_exists('Mage')) ? $footer-&amp;amp;gt;toHTML() : '' ;
?&amp;amp;gt;
&amp;amp;lt;/body&amp;amp;gt;
&amp;amp;lt;/html&amp;amp;gt;
About the author
Richard Feraro is a Magento Enterprise Certified developer from Manila, Philippines with 14 years of solid open-source development experience using Linux, Apache, MySQL & PHP.
Richard Feraro is a Magento Enterprise Certified developer from Manila, Philippines with 14 years of solid open-source development experience using Linux, Apache, MySQL & PHP.
91 thoughts on “How to add Magento blocks, CSS and Javascript to an external site”
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:
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.
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.
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.
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.
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?
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.
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.
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');
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…
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');
@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.
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>
@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.
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?
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?????
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…
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.
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?
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'));
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.
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.
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.
Those just return zero. It all seems to run – it just ends up with the wrong session/cart somehow.
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.
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.
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.
Great! Thanks for sharing it James 🙂
I was able to replicate your PHPSESSID cookie using the code below:
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.
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:
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?
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.
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:
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.
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.
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');
}
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());
}
}
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.
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.
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:
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() : '' ;
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.
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..
🙁
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.
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.
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.
Sorry –
toHTML() : '' ;
?>
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() : '' ;You can also post code here using the following format:
[php] your code here [/php]
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!
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.
Hi Brady, yes it pulls the theme’s file currently configured for the store found in the admin. See theme creation details here.
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.
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.
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!
Thanks 🙂
Someone named peaker was able to do it from the other post. Read his comments here.
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?
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');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.
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>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');Also, there’s only page.xml file in my magento default theme directory, no local.xml. I didn’t change any XML file too.
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…
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() : '' ;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
Sorry.
typo->either
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>Thanks, I will try it out. Sorry for hijacking your comment.
It’s already posted here.
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.
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?
Hello sajo!
You can use setLocaleCode.
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?????
Hello Rhonda.
Your question was also asked by Vikas on this thread. Check out the comments for more info.
Thanks!
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!
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();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
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.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?
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>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.
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
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'));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?
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();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.
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.
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.
Those just return zero. It all seems to run – it just ends up with the wrong session/cart somehow.
Check this post, it might be related.
Hmm, is there a way for me to see that particular page so I can check on it?
I’ve tried sending to your yahoo IM, don;t want to put the clients test details up on the web.
I was able to run your code in my local machine. See screenshot below:
I didn’t get any yahoo message. It’s richardferaro 🙂
Damn, then I must have something wrong somewhere. Thanks!
I updated the screenshot and moved the script to
sidebar.phpTry the code below too to clear the cart before you try your testing again.
<?php Mage::getSingleton('checkout/session')->clear(); ?>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.
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] => [email protected] [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?
Hmmm, if I can see that page I can troubleshoot it. Hit me up in ym: richardferaro.
It will be good if its running in subversion so you can see my changes if ever.
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.
Great! Thanks for sharing it James 🙂
I was able to replicate your PHPSESSID cookie using the code below:
Mage::getSingleton("core/session");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.
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.
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?
You’re welcome 🙂
Regarding your question, a simple
if...elseclause will do the trick by detecting the domain where the WP site is being accessed and applying the store code inMage::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.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.
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. 🙂
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?
see my reply below to Randall.
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();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.
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()); } }Hi, try moving just the line of code below to your theme’s
index.phpinstead of placing it in theheader.php:Mage::getSingleton('core/session', array('name' => 'frontend'));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!
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
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.
Also, thanks for the continued high-level support.
line1 code cut off:
Mage::getSingleton(‘core/session’, array(‘name’ => ‘frontend’));
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”);
It happened because Mage object have not been instantiated. You should place the code below at the top of
index.phpfile, just before theget_header()code:if(class_exists('Mage')){ Mage::getSingleton('core/session', array('name' => 'frontend')); }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.
not able to see the toolbar i checked the option from admin but its not showing toolbar on frontend.
plz help.
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() : '' ;is it possible to add one product into a post
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
I haven’t tried yet but it should be available upon setting of your store.
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
What have you done so far? Did you try using this:
$checkout = Mage::getSingleton(‘checkout/type_onepage’);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.
$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.
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..
🙁
Post your script here so I can examine your code
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
Thanks Richard! You have some incredibly helpful posts over the past couple years. Thank you thank you thank you.
Thank you Eric. I just transferred to a new work so hopefully I can write post more often 🙂