Create Quicktab blocks populated by cck fields

August 23, 2010

I tried to make a product page with some information, a picture, and then two tabs at the bottom with additional information (Ingredients and nutrition). This was easy with quicktabs module. With that installed, I had to create two new blocks, ingredients and nutrition. Then I went to the quicktabs section on the admin panel, created a new quicktab, created two block-type tabs in that one, and populated them with the blocks I just created, nutrition and ingredients. Then I had to go to the blocks overview page and activate the new quicktab block, and make it visible for the page i just created in a block area under the content (Content-bottom, I have a theme based on Zen).

This would have been OK if:

  1. I Would be the one that makes the product pages.
  2. There would be one to five different products.

But:

  1. The one that creates the products is just a common business man, not one that has the time or the technical skills to create a lot of blocks and quictabs.
  2. There are about 70-100 products..

Another problem with this is that there would appear 70-100 blocks with nutrition, and 70-100 blocks with ingredients, AND 70-100 Quicktabs blocks in content bottom, all activated for the single product page that it is related to. So this was not even an option, I started like this, but recognized after three products that I cant do like this. Then I searched for other modules, like Tabs, CCK Fieldgroup tabs, and so on, but I did not find a single one that could solve my problem. I found out that the thing I wanted was two extra cck-fields in the display where you add a new product (node type product), so that you could fill in the ingredients and nutrition on the same time as you create the product, And these fields would then appear in a quick-tab-block in content-bottom for that page automatically when saving the page.

So how did I fix it?

At first I created two new CCK-fields, and made them appear under the body of the product-type node.  This way the two fields appeared under each other and you could fill in the information at the same time as you created the product. Now I just had to make them appear in a tabbed form instead of under each other. I tried to search in my head and on Google for some javascript that I easily could use for this, but neither of them could give me an easy and great-looking solution that worked the “Drupal-way”. By the way, I do not like to create my own javascript anyway.

I created two new CCK fields for nutrition and ingredients

Then I thought that I can exclude these two fields from the view, and maybe pull them out from the node in a quicktab that i place in content-bottom. But then I saw that Quick-tabs DOES NOT have an option for showing CCK-fields in a tabbed form. This feels a little stupid to me. Next step was to dig in my head  and on Google for some php-knowledge, I really had to get this working now. I found out that you could pull a CCK-field to a block on this site, and now it became clear. I enabled the php-filter module thats included in the Drupal core. I deleted all the stupid qucktab-blocks that i had made, and all the ingredients- and nutrition-blocks from the blocks-overview page. Then I created a new block for ingredients, that included this great php-code:

<?php
if ( arg(0) == ‘node’ && is_numeric(arg(1)) ) {
$node = node_load(arg(1));
if ( $node->type == ‘produkt’ ) {
// Do something with $node
print $node->field_ingredienser[0]['value'];
}
}
?>
This code pulls the field “ingredienser” from the node type “product” and outputs the value. “ingredienser” is just swedish for ingredients. I did not enable this field for any page, just kept it in the list of inactive blocks. I duplicated it and made one for the nutrition also. (just changed the “field_ingredienser” to “field_nutrition”).
Then i went to quicktabs again, created a new quicktab block that had two tabs, populated with the two blocks with the php code inside. I saved this new quicktab-block, went back to the blocks-overview page and activated this block and made it show on all the productpages. I use mysite.com/products/product URL for the productpages, so the only thing i had to do was to activate it on the following pages: products/* .

And Voila!

Now the customer can create a product and fill in the basic info, upload the picture, fill in the nutrition field, fill in the ingredients field, and save. All on the same page. When the product is saved, everything shows up as it should on the product page! You can see the page that I use this solution on here: Musch.fi/barf (in Finnish) or here Musch.fi/sv/barf (in Swedish).

The two quicktabs now contains the data that I wrote in the cck fields

The two quicktabs now contains the data that I wrote in the cck fields

The plugins I used for making this happen is the following:

This is a Quite simple solution to my problem, until Quick-tabs starts to support cck fields for the tabs. Do not know if anyone else had this problem, but anyway, I still had to write down my solution somewhere if I need it more times.

See more articles in the category: Drupal
  • http://splithare.tk alex

    Hi there,
    thank you for sharing this – I am about to embark on a quest for exactly the same thing :) Can I ask you why CCK fieldgroup tabs didn’t work for you?

    • Jonathan

      Hi and thanks for the comment!
      CCK fieldgroup worked, but with that, the whole page became tabbed, I just wanted a small part on the bottom of the page tabbed, the rest stays the same whichever tab you are on.
      The page where I made this will be released tomorrow, then I will post a link here so that you can see it in action!

  • http://www.tinoanh.com Tin Hoang

    Wow, that little piece of code worked great. I just plugged it in and changed the produkt to product and ingredienser to comments.

    It allowed me to put user comments into a Quick Tab.

    • Jonathan

      Great that you found it useful! I’m glad that my swedish words in the code did not mess it up for you..:)
      And thanks for the comment! //Jonathan

  • zerodtkjoe

    Thanks for the info

  • http://healingspiritvet.com Maurice Green

    Jonathan
    I stumbled across the Quick Tabs module by accident and followed the link here. This is EXACTLY what I have been looking for to convert my daughter’s ZenCart site to Drupal with Ubercart. What a coincidence that you are working on a veterinary site. For example check out the tabbing module in ZenCart on this page:
    http://healingspiritvet.com/index.php?main_page=product_info&cPath=66_98&products_id=619
    That’s what I am trying to achieve.

    Maury

    • Jonathan

      Nice!
      This one that I’m working on is not actually a veterinary site, it is for a company that creates dog-food. But quite close anyway! :)
      Great that you found this usable, I am also planning to test Übercart with drupal sometime in the future! Haven’t got time fot it yet though..:)

      Jonathan

  • Pingback: Two types of blogposts that gets visitors | Jonathans

  • Elango

    I configured through this method but tabs contents not loading. any help please?

    • http://twitter.com/JonathanBJ Jonathan Björkskog

      Hi!
      Its hard to know what could be wrong, you should describe your problem a little longer than that.
      Regards Jonathan

    • Highvoltage

      Try this instead Elango

      if (arg(0) == ‘node’ && is_numeric(arg(1)) && is_null(arg(2))) {
      //get NID
      $nid = arg(1);
      //load node
      $node = node_load($nid);
      print $node->field_your_field[0]['value'];
      }

  • Highvoltage

    Hey Jonathan, Guess what?

    …. You rock my socks off :p

    Thank you for this awesome tutorial! I can’t believe quick tabs doesn’t support CCK either. Fields are a corner stone of every Drupal site out there practically.

    • http://twitter.com/JonathanBJ Jonathan Björkskog

      Yeah! There are fields in every Drupal site nowdays, and I was actually quite surprised myself that Quick tabs didn’t support CCK. Maybe it comes in a further release, I do not know..

      Anyway, thanks for your comment, I am always glad to rock some socks off! :) Welcome back for more reading! I am planning to write some more drupal-related articles soon..

  • Mike

    I may be misunderstanding what you were trying to achieve, but I think cck blocks contrib module (http://drupal.org/project/cck_blocks) may have given you what you wanted without the need for php coding.

    Enabling CCK Blocks provides a new yes/no checkbox at the bottom of the “global” fieldset for CCK field edit display. The checkboxes have the heading “Provide block for this field”.

    If you enable the block for a cck field, a block will automatically be generated. When inserted into a valid region, it will auto-display whenever a node bearing that field is viewed.

    The block can also be inserted into Quick Tabs.

    Hope that helps.

    • http://twitter.com/JonathanBJ Jonathan Björkskog

      I will take a look at it and see if that also does the trick! Thanks for the link. //Jonathan

      • Mike

        For some reason it truncated the url in my previous post. Here it is without the http to stop it being recognised as a link: //drupal.org/project/cck_blocks.

        • http://twitter.com/JonathanBJ Jonathan Björkskog

          Yeah, I got it the first time, but it’s good when it’s like a link so that everyone can follow it.. :) I’ve read through the cck_blocks module description now, and it looks like the plugin should do the same as I described in this post. Weird that I did not find that module the first time..:) But now I know how to do in the future if/when I need to get this same problem solved again! And the module can be used for more than this also!
          // Jonathan

  • Axiom3279

    Great post — very helpful. Thank you:) However I have a question: what if you have a variable number of tabs that need to be created on the node? Example would be an artist bio for a product (some artist don’t like to have their info online). I could do this by just directly manipulating the node.tpl file, but have yet to find a solution via quicktabs.

    • http://twitter.com/JonathanBJ Jonathan Björkskog

      That’s a good question! Maybe there is a solution to just hide the tabs that are empty? And then not write any info in the fields that should not be visible when adding a node? Someone knows a good way to fix this?

  • Jeff

    This could have been done a lot easier.  Download the Tabs.module at http://drupal.org/project/tabs. Create a custom node.tpl file for this content type.  Go to the jQuery UI tabs plugin page at http://docs.jquery.com/UI/Tabs and grab the demo code to render the tabs.  Stick it in the custom node.tpl file.  Inside the divs of each tab, programatically print out your cck fields.  Its more lightweight, faster, and less code.

    • http://www.facebook.com/Jonathan.Bjorkskog Jonathan Björkskog

      Great! Since I wrote this post people have been suggested a lot of ways to this in different ways! That is very good, it is always great to be able to do things in different ways!

    • Mightor

      Jeff, can you show us an example code? Let’s say the field is: field_my_custom_field. This seems to be more complex to me than Jonathan’s solution.

      • Mightor

        Sorry, never mind. I see the Demo code, under Example section… duh!

  • randm

    Thanks man!

  • Rick

    Jonathon, I have gone through the exact same process as you described and finally came across your post. I followed your instructions but when I display a page, the tabs show the php code, not the field text. I am using drupal 7 and believe I followed everything you described. Any ideas?

    • Rick

      I realized that I did not have permissions set to display ‘php code’ in the text format for the block. Once I set that, my php code executed. However, I still cannot get the  field to display. When I set the field to display in the content types (Content types>product>manage displays), the content renders. I also enabled the ‘provide block for this field (Content types>product>manage displays) and enabled the block – no data was rendered with this method either. Please help

  • p1nr

    Great Post! I’ve spent days trying to figure this out! One thing – Is there a way that allows the user to specify the title of the block as well? The perfect solution would be to have the user start off with one title and body field in the content type, then add then add as many additional tabs with a limit of 5, or 6 tabs.

  • Crescenzo Velleca

    …and in drupal 7?

  • p1nr

    having issues with this on Drupal 7.. I tried the php code adn made sure I enabled php within my modules pages but it didnt generate anything (I obviously change the text to call the correct fields and content types) I tried the different Php code listed in the comments and also downloaded the cck to block module. I was able to call that block on the quicktabs UI but still nothing shows.. any ideas?

  • p1nr

    nevermind.. had to change the display type for the blocks from hidden to default in the “manage display” section of the fields

  • http://www.facebook.com/aaaxu Alexandru Axu Anghel

    Drupal 7. Looking for vertical, horizontal, multi-level, open, collapsible, collapsed TABS?  Here you are: http://drupal.org/project/fieldgroup and tutorial on http://drupal.org/node/1319826.
    Sincerly your. 

  • Anonymous

    The field_group and elements module is the way to go now. But your article and the comments helped me anyway. Thanks.

    • http://jonathanbjorkskog.com/ Jonathan björkskog

      Yes, now there’s better ways than mine of doing this, thanks for the tip and the comment! :)

  • http://www.register-web-domain.in/ Domain registration

    Interesting article.It is extremely helpful for me Thanks

Important information

This is the search engine optimization (SEO) and web tactics webiste/blog for Jonathan Björkskog, working at and co-owning Genero Digital Agency, a digital advertising agency based in Helsinki, Finland. If you searched for my Swedish blog, you find it here: jonathanbjorkskog.net.

That's one of my passions.

If you were searching for the other one, kitesurfing, you should check out my kitesurfing blog instead.

Hosted at Bluehost

Advertising

External links (in Swedish)

C’mon, I am on Facebook as well

Head over to the wall and send me all your questions about Facebook, SEO, or any other awesome topic on the internet!

This WordPress Template

Do you want this clean WordPress template that I am using on this blog? I will drop it as a FREE Premium theme on my template site when it gets ready. If you want it now, for testing and customizing, drop me a mail and I will send it your way. jonathan.bjorkskog[a]gmail.com, or ask for it on twitter..
Content Priority Theme by Jonathan Björkskog @ Genero