Last night I attended the Auckland Magento Meetup – which was great fun and sponsored by the excellent Parallel Imported. During a site review – I suggested using dynamic content blocks on a site to display a relevant warning note about Telco compatibility (for cellphones) only on relevant product pages, rather than as a persistent sidebar block. This is a quick tutorial on how to set that up and display it – based on an example from Dominion New Zealand a webstore that World Wide Access launched in the US recently.
Overview
This tutorial will teach you how to show a particular block on the product page of only certain Magento products that have some attribute value. The finished result will look something like this page – notice the ‘Made to Order’ block which appears where the availability normally shows.
Compare that to this page where the made to order does not show.
To achieve this we need 3 components to be in place. The attribute, the template .phtml file and the CMS block. Read on to see how we create these.
The Attribute
Firstly we need our product to have a particular attribute – if the products are all of a particular attribute set, then you only need to add the attribute to that set, otherwise add it to the default set.
First create the attribute – if you need it on a category page, not a product page make sure you specify that it is Used in product listing, otherwise the queries will not fetch it and you’ll end up spending half a day debugging to find out why it’s always empty (*grumble*). The attribute can be text, or a drop down, or anything really – it will impact how we test it’s value in the .phtml file – but not by much.
Once you have the attribute you need to drag and drop it into an attribute set like this – you can put it in any group, in this example it is in General:
After that you can save your changes (it may take a while) and then to test that it worked, simply view one of the products and check your attribute is visible:
Note: These instruction are for making the attribute through the Magento admin – for a repeatable development process, you should create the attribute as part of an SQL script, but let’s keep things simple eh?
The .phtml
Once you have the attribute you can then use it on your product page templates. In our case we want made to order jackets to show the note explaining the made-to-order process so customers know what to expect. In the case of Parallel Imported, they are looking to show a telco compatibility notice on all mobile phones they sell. Same sort of problem, same solution.
The template code will look like this you can put this code anywhere in your product page (template/catalog/product/view.phtml):
<!-- Allow for made to order products which require a special availability notice -->
<?php if ($_product->getAttributeText('made_to_order') == "Made to Order"): ?>
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('made_to_order')->toHtml() ?>
<?php endif; ?>
As you can see all it is doing is testing the attribute value matches what we are looking for and if it does – we display a special CMS block. The different attribute types will be tested differently – because we are using a drop down, I use the getAttributeText function and compare it to the label I associated in the attribute configuration. If you are in doubt you can just echo the value when you are developing, to see what it is and what you expect it to be. Check the Product class for other attribute related getters. Normally you could use getMadeToOrder() for example – but in the drop-down case the value returned is the database index of that drop down value, which is not useful to compare in code (and it could differ between databases) so I use the actual text value.
The CMS block
Right this is the last step – we need to create a CMS block in the Magento backend that will display when the attribute is found. In my case the block id is set using this function call setBlockId('made_to_order') so I must make sure the block Id is made_to_order when I create the block.
The block contents are like this:
<p class="availability" style="display:block" >
Availability: <span class="in-stock">Made To Order</span>
</p>
<small style="font-size:12px;">
Your garment will be handmade in New Zealand and will be air couriered
free of charge. Allow 2 weeks for delivery.
<a href="/made-to-order">More...</a>
</small>
<style type="text/css">
.availability {
display:none;
}
</style>
The astute HTML/CSS coder will notice this is a _bit dubious_, as I use CSS to hide the old availability message and replace it with mine and add the made to order note. When you’ve been working with Magento long enough, you know sometimes you just have to take those quick wins when you can!
And that’s it – these 3 steps should have you creating dynamic content on your product pages in no time – hope you all find it useful, if you have any feedback, don’t be shy!
Originally published on magebase.com. Copyright © 2010 Magebase - All Rights Reserved.
Proud members of the 
Ashley,
You have provide details for EXACTLY what I need to accomplish. Only I have been unsuccessful. I am hoping you can provide some insight as to what I am doing wrong.
This is the code I inserted in the:
app\design\frontend\default\a999\template\catalog\product\view.phtml
getAttributeText(‘sizing_chart’) == “landau_women_alpha”): ?>
?php echo $this->getLayout()->createBlock(‘cms/block’)->setBlockId(‘landau_women_alpha’)->toHtml() ?>
I create a block called ( landau_women_alpha ). I inserted an HTML sizing chart in that block. it is set to active.
I have the attribute ( sizing_chart ) which is a drop down menu. I have various values in the drop down. ( landau_sizing_alpha ) is one of the values.
The test product is the LAN8219. I set the attribute ( sizing_chart ) titled SizingChart, to the drop down selection of landau_sizing_alpha. I only selected the sizing_chart attribute for the Configurable product that is being displayed and not the “simple products” that make up the Configurable product.
We have many brands, and for every brand we want to display the Sizing Chart that is indicated in the “sizing_chart” attribute. Once I get this working, I would need the PHP IF statements for every possible attribute value so that it will display the correct Sizing Chart for all products. Is it ok to have multiple “IF” statements? I know nothing about PHP.
Thanks,
Tim D.
It cut off my code snippet
. Will try it again.
getAttributeText('sizing_chart') == "landau_women_alpha"): ?>
?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('landau_women_alpha') ->toHtml() ?>
@Tim
You should simply be able to pull the sizing chart CMS block ID out of your attribute and use it in the createBlock statement without any IF statements like so:
$sizing_chart_id = getAttributeText('sizing_chart');
if ($sizing_chart_id) : ?>
< ?php echo $this->getLayout()->createBlock('cms/block')->setBlockId($sizing_chart_id) ->toHtml() ?>
< ?php endif; ?>
The if here is to make sure that you only try to create and display the sizing chart if the attribute is set. You just need to make sure that your sizing_chart attribute values correspond to the CMS Static Block IDs exactly.
Hi, Tim – also if it’s not working like you expect, try just echoing out the actual value being returned by getAttributeText() something like this (you don’t have to put it in html comments):
<!– –>
Then look at the HTML source to check what valu is actually being fetched – maybe it’s not what you expect.
Woops – it nuked my PHP – it’s just an echo of the getAttribute()
Robert or Ashley, thanks for the replies. It is still not working for me. Can you tell if I have anything wrong here? (I inserted a space in the < ?php so it would leave all my code)
getLayout()->createBlock(‘cms/block’)->setBlockId($landau_women_alpha) ->toHtml() ?>
The “landau_women_alpha” is for sure the value in the sizing_chart attribute that is selected for the configurable product LAN8219. The block id is also saved as landau_women_alpha .
I have only been working with Magento for 2 months and still learning :0 It seems there should be another file that I have to edit so that when it pulls the block (landau_women_alpha) in, it knows where to place it. Right now, I have put nothing anywhere that would indicate where the block should go.
I have placed the code I showed you above, at the top of the view.phtml file. I don’t know PHP but I don’t see how the code above is going to properly place the sizing chart (block) at the bottom of the Product Page.
I would be more than willing to pay one of you to fix this for me then I could see how it was done for other items I may want to dynamically include.
Tim
Ok.. it won’t nuke this!!
http://www.logomypolo.com/images/PHP_code.jpg
DISREGARD the previous email. It IS WORKING!!
I am using the original code format from Ashley. Robert when I tried your code I kept getting a fatal error. So I will just use the original code.
It really helps when you publish up the page after making changes :0 . Actually I was publishing thru Dreamweaver it was not pushing it up for some odd reason.
So now I have just a couple of other questions.
1) Since I have about 15-20 different sizing charts among all of our products, do I need to create a complete IF , ENDIF section for each possibility, or can I just have one IF, and one ENDIF, with all the possibilites in the middle (a complete php line for each option). I hope that makes sense.
2) Would it be just as easy to do this instead. Right close to where they choose their size, have a small image (ruler image with “Sizing Chart” on it) so that when they click that it brings up a popup window to show the sizing chart instead of having it displayed at the bottom of the page. I am really not 100% sure this would even be better. I would just have to get feedback from a customer to see what they liked better.
Thanks again for all of your help.
Tim
Hey Tim,
Answer to 1)
I strongly suggest to use the code I showed here since it will work and is the best solution in terms of flexibility so you don’t have to add or change your if statements whenever you add or change your block id’s. My code probably doesn’t work because I have added spaces to break the lines so you will need to take them out. So here we go with code without spaces (also take out the space in the < ?php):
< ?php $sizing_chart_id = getAttributeText('sizing_chart');if ($sizing_chart_id) : ?>
< ?php echo $this->getLayout()->createBlock('cms/block')->setBlockId($sizing_chart_id)->toHtml() ?>
< ?php endif; ?>
Answer 2)
From a user perspective, this is a good approach since you are providing an answer to their possible question (how do I know which size to choose?) at the point where they need to make the decision. This is what we’ve done on this page: http://staging.canine-spirit.com/grip-trex-boots-set-of-4.html – note the sizing guide button.
However, to implement this you will need to do a bit more than the snippet of code provided here.
Robert, your example you provided is beautiful. I am looking for a similar implementation of a sizing chart. Do you have any direction you can provide for the following:
1 – What is the best js or code to use for the tooltip window that does not conflict with other magento js?
2 – How did you get your button to be next to your attribute? Is there an extension you’re using to visualize your attributes and allow you to insert the size button adjacent to it?
I’d love to get the same functionality and would pay for it.
Hi Stewart,
thanks for the compliment.
The JS used for the window is part of a prototype based JS UI component library called Livepipe: http://livepipe.net/. We usually try to find JS plugins that are based on the Prototype library natively included in Magento. We don’t add jQuery (even though we’d prefer it) or any other JS frameworks to keep our JS footprint as light as possible.
We did extensive modifications to the site the example is from. Basically, the code showing the sizing guide button is added to the template that displays the configurable product options. It is part of the template customization and needs to be done manually for a specific template.
The color/size swatches is an extension we developed specifically for this site. We looked at a third party extension (from this site: http://www.temgra.com/index.php/magento-extensions ) but didn’t like any of the offers so we did it ourselves. We also integrated a custom zoomify js for the product images. All in all, quite a bit of work. If you wish to discuss our services and how we could help you, please use the contact form on our LERO9 site (link in the footer) or send me an email to robert [at] this site domain.
Stewart,
Without Ashely and Roberts insight I could not have gotten the sizing chart to show up like I wanted. I am not a programmer so I had to take their guidance and try to make it work for my site. It is not beautiful but it works. I summarized what I did for my test site here.
http://www.magentocommerce.com/boards/search_results/03448088a338a9ecdfb2ca293e7c78f8/
I gave Ashely and Robert full credit since I could have done nothing without their input. I have tried a couple of approached on the color swatches but we will be going with the Color Swatches Plus with Thumbnails from http://www.temgra.com . She had this example site:
http://www.johnnie-o.com/index.php/men/men-s-4-button-polo.html and that was really what I was looking for.
Later,
Tim
Tim D.
Hi guys,
Like Tim, I am attempting to create a dynamic link to a size guide (for example, size guides for “Dress Shirts & Sport Shirts” or “Tees & Knits” and so on). I have successfully made the attribute, and added it to an attribute set, but whenever the code into my view.phtml file, nothing appears – whether it’s the orginal code from Ashley’s awesome article, or Robert’s revised code.
Any ideas?
Thanks!
@DVN
First, let’s rule out the obvious: have you disabled the Magento cache or refreshed the cache after your phtml changes?
If yes, and they are not appearing, have you made the change in the correct template file for the design your site is using?
Provide the code you inserted and your attribute code. Use: < code > … < /code > (without the spaces) to enclose your code parts. You code blocks will look like this:
< ?php echo $some_php_code; ?>Hi Robert,
Thanks for replying! I feel like a moron, but it was the cache, after turning them off I can see the changes. What I entered was:
getAttributeText('fit_guide_template') == "mens_tees_knits"): ?>
getLayout()->createBlock('cms/block')->setBlockId('mens_tees_knits')->toHtml() ?>
However, like Tim – I have mutliple ‘Fit Guides’ that are dependent on the type of product on display (i.e., Sweater Fit guide for sweaters, trouser fit guide for trousers, etc.). I tried your code, but I can’t seem to make it work – would you suggest I just paste in the mutple php if statements?
Thanks for your help – I’m more of a designer, so my PHP knowledge is limited (read: almost non existent!).
Cheers,
DVN
Cut my code off, let my try that again:
++++++++getAttributeText('fit_guide_template') == "mens_tees_knits"): ?>
getLayout()->createBlock('cms/block')->setBlockId('mens_tees_knits')->toHtml() ?>
++++++++
Question regarding how you updated the availability. Magento seems to bundle the availability and pricing into one variable:
$this->getChildHtml(‘product_type_data’)
How were you able to separate out the availability in pricing? Let me know if this question doesn’t make sense and I can try and re-word.
Robert,
I am revisiting this. I am really wanting to go with your code so that I don’t have to paste one for each sizing chart. cuz then I would have to modify the view.phtml file everytime I added a new sizing charge and the code on the page could get rather long just from the MANY sizing charts.
I still can not get it to work. I have inserted this code on the page:
getLayout()->createBlock('cms/block')->setBlockId($sizing_chart_id)->toHtml() ?>
This is the message that is showing up on the page:
Fatal error: Call to undefined function getAttributeText() in /home/userfolder/public_html/store/app/design/frontend/default/a050/template/catalog/product/view.phtml on line 125
Any ideas on what I am doing wrong?
Thanks,
Tim
It cut out my code !!!
getLayout()->createBlock(‘cms/block’)->setBlockId($sizing_chart_id)->toHtml() ?>
I inserted spaces in the php and div tags. Hopefully it will keep the code this time.
Tim
<?php $sizing_chart_id = getAttributeText('sizing_chart');if ($sizing_chart_id) : ?>getLayout()->createBlock('cms/block')->setBlockId($sizing_chart_id)->toHtml() ?>Robert,
It is working now. I had a buddy tell me that I simply needed to make this change:
change
$sizing_chart_id = getAttributeText(‘sizing_chart’)
to:
$sizing_chart_id = $_product->getAttributeText(‘sizing_chart’)
Tim
Great tutorial!!! I needed this for both custom sizing charts as well as custom availability just as your tutorial is setup. However it did not work right away. After a little playing with it I realized the problem lies in ‘if’ statement:
getAttributeText(‘made_to_order’) == “Made to Order”): ?>
I simply changed the php call from getAttributeText to getData and it works:
getData(‘made_to_order’) == “1″): ?>
THANK YOU THANK YOU THANK YOU.
Now I am off to try out the custom sizing charts. Also people if you are having similar problems test the output of your attribute by echoing it to the page and then fix the above if statement accordingly.
Hi! I am trying to implement size charts but no luck. I was going to post my question but don’t even know where to start… So I am going to post my code – I know it is wrong (because it’s not working). But I don’t know what to do at this point – have been trying to follow your posts for hours… Please help!!!
In my case, I have a lot of products from various manufacturers. Every manufacturer has its own size chart. What I want is to be able to choose size chart ID from drop down attribute per product – in my code I am trying to display size chart named “casablanca” by the name of the manufacturer. My drop down attribute name is size_chart_template. And my static block’s name is casablanca.
(I will add spaces to the code)
getLayout()->createBlock(‘cms/block’)->setBlockId($size_chart_template)->toHtml() ?>
spaces in the code didn’t help. Trying again:
< ?php getLayout()->createBlock('cms/block')->setBlockId($size_chart_template)->toHtml() ?>getLayout()->createBlock(‘cms/block’)->setBlockId($size_chart_template)->toHtml() ? >
how do I post code here? spaces don’t help
Jen,
I have never been able to post the code correctly on this page. I am not sure what is wrong. You may capture a screenshot and attach a JPG. That would quick and simple. Robert or Ashley will probably be able to look at it and tell you what is wrong.
This function works very nice for me
hm.. I don’t see a place to attach images either
Do i need to register with this forum to see more functions?
Jen,
Why not use a site like http://imgur.com/ to upload your image, and then link to it here?
Good idea!
Here is direct link to my image with code: http://imgur.com/EcVdb.png
I am not good with PHP so the code is probably looking very ugly
My code is giving me the error: Fatal error: Call to undefined function getattributetext() referring to the first line of the code. As I understand it means that I am trying to call for something that does not exist. Yes, I don’t have anything that is called $size_chart_template_id – and I am not sure what supposed to go here… Not sure how to read the code…
I don’t have anything called $size_chart_template_casablanca either – but again, not sure what to put here…
Any help is appreciated..
Looks like you’re missing the “$_product->” on getAttributeText() and the “$this->” getLayout() ?
Ok, the error is now gone. But it does not display anything… empty.
Trying to past my new code… let’s see if it will let me:
“getAttributeText(‘size_chart_template’);
if ($size_chart_template_casablanca) : ?>
$this->getLayout()->createBlock(‘cms/block’)->setBlockId($size_chart_template)->toHtml() ?>”
nope
Ok, here is the picture with the code: http://imgur.com/OSpkQ.png
Can you please give me sample code with my attribute & block names? I think I am just messing things up because I am not sure how to read and apply the code.
My attribute name is “size_chart_template”
My static block name is “casablanca”
I did it! It works!!!! You made me think and I found the problem! Thanx a lot!
@Jen
We’ve added improved code support in the comments now. Essentially you can use the <code>[your code here]</code> tags to enter code and/or HTML in the comments.
To address your question: what value exactly are you putting in the “size_chart_template” attribute? You say it’s a drop-down attribute. Have you set values for it?
The way I understand what you want to do is:
Have a drop-down attribute you can assign to your products that contains the Static CMS block ID of the correct sizing chart.
So, you would have your static CMS blocks set up with ID’s that match your manufacturers such as your “casablanca” one. I suggest you use some naming convention for your CMS blocks like: “sizing_casablanca”. You would enter this in the “Identifier” field on the CMS static block page.
Your “sizing_chart_template” attribute would then have as one of its values: “sizing_casablanca”. Other values would be like: sizing_manufacturer_a, sizing_manufacturer_b, etc…
Then, when editing your products, you would select the appropriate sizing chart identifier.
On the product page phtml the code would be:
< ?php// get the value of the sizing_chart_template attribute. If set, it should contain a valid Static CMS block identifier
$sizing_cms_block_id = $_product->getAttributeText('sizing_chart_template');
// check if set and only then display the block
if ($sizing_cms_block_id) :
echo $this->getLayout()->createBlock('cms/block')->setBlockId($sizing_cms_block_id)->toHtml();
endif;
?>
It’s important to set all the things up correctly first and don’t forget to disable or refresh the cache when testing.
Here is my working code:
< ?php if ($_product->getAttributeText('size_chart_template') == "casablanca"): ?>
< ?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('casablanca')->toHtml() ?>
< ?php endif; ?>
@Jen
This will work but it’s not very flexible. You are checking if your attribute has the value “casablanca” effectively hard-coding one specific attribute value for all your products, but this will not be the case for other sizing charts. Try to follow the steps outlined in my comment above to create a more flexible solution.
Maybe I am pushing my luck – but since you’re professional…
Since I am inserting html data from static block via drop down attribute – sometimes there is too much info to be inserted into product page. What I am looking for is combining this code
< ?php if ($_product->getAttributeText('size_chart_template') == "casablanca"): ?>
< ?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('casablanca')->toHtml() ?>
< ?php endif; ?>
with this java script code
Size Chart
to get link that opens in a new window on click and displays the info that is in the block…
Any idea? And let me know if my request is beyond what you can help me with…
@Jen
What you are asking is beyond this tutorial. Basically, you could have an initially hidden div containing your sizing guide as per code above and then use javascript to show the div when a link is clicked.
The window.open() won’t work in this case as you don’t have a “page” as such so you’d need to use a prototype plugin or library that can show arbitrary HTML in a popup – lightbox style. Magento already comes with the window.js library (/js/prototype/window.js) you can use to show popups.
Thank you! I will try and figure this out.
I got it working the “flexible” way! Thank you so much!!! Such a relief…
very useful tips!
@Tim
I was trying to locate your full tutorial of how to do the size chart thing like Robert, but without any luck.
Do you have the directions somewhere?
Cheers,
Sharon
Thanks, Great tips . Work for me
Thanks for the great tutorial.
It is exactly what I am looking for.
To play Devil’s Advocate:
Using the Jean Sheepskin Low Boot example
Is there a way you can select size standard (EUR, US/CAN,UK)
Then based on that selection, see the appropriate size.
For Example:
Select Region: EUR > Select Size: 39,40,41 (in drop down menu)
Select Region: US/CAN > Select Size: 8.5,9,9.5 (in drop down menu)
I saw you were using ‘US 8′ in your size listings. I think
implementing a conditional selector like this would take
this example to the next level!
Thanks again for sharing your knowledge!
Perfect answer to my problem. My client wanted to quickly swap between items that her vendor wouldnt allow online sales aka “view only” and the normal magento product sale screen. Thanks!
This helped a lot!
I have this working with specific values for an attribute. Is there a way to have it show up ONLY if the value is Empty?
thanks
Depending on what type of attribute you are checking for, often an empty attribute will contain “No” if the attribute is a multi select or drop-down so you could check for:
if ('no' == strtolower(getAttributeText('my_attribute_code)) || !getAttributeText('my_attribute_code')) { // do your processing } else ...To make sure, you can just echo the attribute value and see what comes out when it’s blank and use that in your if statement.
can anyone help me to get out an image editor in magento