15 replies [Last post]
stephthegeek's picture
Offline
Theminator
Joined: 10/20/2007
Juice: 575
Was this information Helpful?

What is everyone using for this kind of thing? eg. http://www.flickr.com/photos/topnotchthemes/tags/tabs/

I've got a poll over on GDO where you can vote and/or add more info: http://groups.drupal.org/node/22536

Gorgeous original Drupal themes (and Ubercart themes!) ~ Psst: more Ubercart themes on our new site

torgosPizza's picture
Offline
Bug FinderEarly adopter... addicted to alphas.Getting busy with the Ubercode.
Joined: 08/14/2007
Juice: 4111
Re: Modules for doing related content in tabs on product pages

First thing that comes to mind is Magic Tabs. I recommended this to a similar person and it was exactly what they need. I think it's more or less a block that you can fill with whatever content you want, and style it as you need. I think it takes some PHP knowledge but I'd LOVE to see it integrated somehow with Ubercart.

For instance we have certain products that are "Download to Burn" (which is, you download a DVD .iso and burn it) and I had to write a helper form_alter() that checks to see if that attribute exists and if so, add a link to the Add to Cart form with information on what it is. A better solution would be, for the theme tpl.php file of that node type, adding Tabs with more detailed information would be awesome. We could throw all kinds of stuff into the tabs, from the main product info and image, to additional tabs with screenshots, FAQ information, etc.

Man... the more I think about this the more I would love to make an Ubercart-Magic Tabs mashup Contrib Smiling

--
Help directly fund development: Donate via PayPal!

stephthegeek's picture
Offline
Theminator
Joined: 10/20/2007
Juice: 575
Re: Modules for doing related content in tabs on product pages

Hunh, I saw that module but the "This module doesn't have a UI" part made me assume it probably wasn't widely used Smiling

I guess for your needs, it was needing to programmatically check for the argument that led to needing this solution?

I think there are basically two paradigms to related content -- it's either specific to that exact product (which is usually more appropriate for the CCK solution, since it's just putting fields from the node that you enter as usual into tabs), or generic across many products (better for the QuickTabs-style approach).

You can also get to the former using the latter by using arguments. For example, display a one-item view in a tab that takes in the product or some other field as the argument and uses that to pull up the relevant screenshots or category-specific FAQ or something. Or you could plunk in the views from uc_views. QuickTabs is also a very popular and well-supported module.

I'm asking this for the purposes of theming (of course Smiling) -- if we were to include tab styling in a theme, what approach should it be for, what solution gives the most flexibility?

Gorgeous original Drupal themes (and Ubercart themes!) ~ Psst: more Ubercart themes on our new site

Ryan's picture
Offline
Joined: 08/07/2007
Juice: 15459
I used jQuery UI Tabs on

I used jQuery UI Tabs on Biblical Training for a friend to great effect. It also requires some PHP knowledge, though, as you have to use an API similar to the Forms API to print out tabbed displays; I just integrated it into my template.php so a variable for the tabbed area was available on the appropriate lecture pages. See example.

ideal2545's picture
Offline
Joined: 01/08/2010
Juice: 6
Ryan, Would you be able to

Ryan,

Would you be able to post what you added to your template file to be able to add the tabbed content to the products, Ive been trying, but have been having no luck with my limited knowledge of php.

I am also using jQuery UI Tabs along with CCK FieldGroups

I appreciate the help.

Thanks!
Jon

jasonabc's picture
Offline
Uber Donor
Joined: 05/05/2008
Juice: 584
ideal2545 wrote: Ryan - would
ideal2545 wrote:

Ryan - would you be able to post what you added to your template file to be able to add the tabbed content to the products, Ive been trying, but have been having no luck with my limited knowledge of php.

I am also using jQuery UI Tabs along with CCK FieldGroups
Jon

I second this - Ryan - any chance you could help some UberJuniors out?

BigMike's picture
Offline
Joined: 10/20/2008
Juice: 1117
Re: ideal2545 wrote: Ryan - would

X3 for any method to achieve what steph posted. I'm trying to get CCK Fieldgroup Tabs and also Quicktabs to work with products but I can't get either of them to work... A simple tutorial on this would be great. Thanks!

r_wel's picture
Offline
Joined: 09/16/2011
Juice: 17
Solution to showed tabbed product content

I've been searching for weeks trying to figure out how to get tabbed content to work in Drupal 7. Like many others, I am trying to attach product detail in a tabbed format to each product. The closest I got was using a Quick Tabs block for each product page and a view for each Quick Tabs block. Not only is this very cumbersome but, in trying to configure the product page layout using mini-panels, the QT blocks no longer render in tabbed format.

It seems like many people have discussed this issue but I can find no solutions - I am not a coder so I am really home to find modules that can support it. I realize that this question has been asked many times but, has anyone determined a solution (hopefully without coding)

end user's picture
Offline
Joined: 01/11/2008
Juice: 1738
Re: Solution to showed tabbed product content

Related content is actually not that hard. I just figured it out today. The modules I needed were

Views
References
QuickTabs

Here's a page you can see as an example (still rough design) . This uses the three modules and each QT tae except for the description is done with views and references field. I'll try to do a rundown on how I did this in the next few days. I just figured it out so my head is full. http://maximumgrowth.ca/products/nutrients/holland-secret/holland-secret...

Oh and this is done by a non programmer, it just involved lots of reading, frustration and trial and error.

Oh the content listed in the Where to Buy and MSDS/Manuals tabs is referenced from these pages which are part of the site Distributors http://maximumgrowth.ca/distributors MADShttp://maximumgrowth.ca/resources/product-msds and Feed Charts http://maximumgrowth.ca/resources/nutrient-feed-charts

BigMike's picture
Offline
Joined: 10/20/2008
Juice: 1117
end user, That looks GREAT.

end user,

That looks GREAT. Yes, _please_ share a rundown on how you did this, step-by-step. MUCH MUCH APPRECIATED and again, looks GREAT!!

Thank you very much in advance,
Michael

end user's picture
Offline
Joined: 01/11/2008
Juice: 1738
Re: end user, That looks GREAT.

I'll post it for sure later Thursday. Just have to create the write up. One thing though this will be for Drual 7/UC3 but should be fairly simillar to D6/UC2. BTW now that I got my hands dirty D7 walks on D6.

The product page tabsare done using References module/Quick Tabs and Views. The trickets part was getting the views figured out but after a lot of reading I stumbled on a post I used to figure out the same thing for D6 which still worked for D7. Its pretty simple once you do it a few times.

end user's picture
Offline
Joined: 01/11/2008
Juice: 1738
Re: end user,That looks GREAT.

Ok see if I can explain this. This will have to be for D7/UC3 but I'm pretty sure and will check with it can be done with D6/UC2 pretty much the same way. I remember doing it once on a D6/UC2 test site.Actually what I'm gonna do is leave the QuickTabs out as that part is pretty simple even if you never set up QT before and I'll just do this with a Views block inserted into a region for now.So for the basic setup up you need the following modulesReferences (this is the module I used but there are a few others out there.Views

  • Download http://drupal.org/project/references and install References and Node References modules
  • Go to admin/structure/types/manage/product/fields and add in a new field called Node Reference and call it say Related Products.
  • Choose Select List for the widget type (or what ever widget you'd prefer).
  • Where is says "Content types that can be referenced" select the UC content types. In a stock install it would be called Product. Save the field to be taken to the next page.
  • Scroll down to the bottom where is says Number of values  and choose "Unlimited" for Maximum number of values users can enter for this field.
  • That should be it for the References module setup.

Now to create a view.

  • At /admin/structure/views click Add new view.
  • Give it a name
  • Choose Show "content type" of type "Product"
  • Sorted by leave it as is.
  • Uncheck the page view and select block at the bottom
  • Display format choose fields.
  • Click continue and edit.
  • Click on the Advanced link to expand it.
  • Under Contextual filters click add Content: Nid and click Add and configure contextual filter.
  • Select Provide default value  and select Content ID from URL Click apply.
  • Now look for Relationship and click on Add
  • Select  Content: Related Products (field_related_products) Appears in: node:product. (if you named your field Related Products)
  • Select Require this relationship and click add.
  • Now go to Filter criteria and remove all the filters.
  • Go to Fields and for testing purposes click on Content: Title.
  • Look for Relationship and choose field_related_products. Click apply. It should now show (field_related_products) Content: Title

Thats basically it for the view. You can go into the Grid setting and choose one column to show all products one under another. If not you can select any view type you want.Go to any of your products and edit one.

  • Scroll down till you see Related Products field and select the products you want to reference. Click save.

Now were gonna go into the block section at admin/structure/block

  • Scroll all the way down and look for View: Related Products and select the region you want it to appear in like say a side bar. Click on save.

So go back to your product and in the region where you put the block you should see a new Related Products block showing the nodes you selected on the Edit Node page.After that you can style the block any way you want.So thats the basic setup to get you going. You can do this with any node type you want to releate to.Now for QuitckTabs.This is pretty straight forward.

  • Once you install the QT module.
  • Go to admin/structure/quicktabs
  • Add a QuickTab  instance called Related Products or what ever you want.
  • Give it a title
  • Style
  • Default Tab.
  • When you go down to the bottom under Tab type select block
  • Under Tab content select the Related Products block.
  • Click save.
  • Now go back to admin/structure/block and look for the QuickTabs block.
  • Then select the region where you want it to show. Basically same as the way we selected the first block.

Thats the basic setup. After that its all styling.

BigMike's picture
Offline
Joined: 10/20/2008
Juice: 1117
Re: Re: end user,That looks GREAT.

OHH MAN THIS IS AWESOME. I am gonna do this this weekend!!!!! Thank you VERY much for the detailed walk through!! Seriously!!!

macca's picture
Offline
Joined: 01/20/2012
Juice: 5
Related Products

very new 2 Drupal I would like to create a related products block with UC 6.x.2.7 and Drupal 6,

i have been trying for the last few days with no success can you help, or point me to a howto searching but not finding anything the best i have found is this post but getting a bit lost trying to make it work

regards

macca's picture
Offline
Joined: 01/20/2012
Juice: 5
related products block

very new 2 Drupal I would like to create a related products block with UC 6.x.2.7 and Drupal 6,

i have been trying for the last few days with no success can you help, or point me to a howto searching but not finding anything the best i have found is this post but getting a bit lost trying to make it work

regards

end user wrote:

Ok see if I can explain this. This will have to be for D7/UC3 but I'm pretty sure and will check with it can be done with D6/UC2 pretty much the same way. I remember doing it once on a D6/UC2 test site.Actually what I'm gonna do is leave the QuickTabs out as that part is pretty simple even if you never set up QT before and I'll just do this with a Views block inserted into a region for now.So for the basic setup up you need the following modulesReferences (this is the module I used but there are a few others out there.Views

  • Download http://drupal.org/project/references and install References and Node References modules
  • Go to admin/structure/types/manage/product/fields and add in a new field called Node Reference and call it say Related Products.
  • Choose Select List for the widget type (or what ever widget you'd prefer).
  • Where is says "Content types that can be referenced" select the UC content types. In a stock install it would be called Product. Save the field to be taken to the next page.
  • Scroll down to the bottom where is says Number of values  and choose "Unlimited" for Maximum number of values users can enter for this field.
  • That should be it for the References module setup.

Now to create a view.

  • At /admin/structure/views click Add new view.
  • Give it a name
  • Choose Show "content type" of type "Product"
  • Sorted by leave it as is.
  • Uncheck the page view and select block at the bottom
  • Display format choose fields.
  • Click continue and edit.
  • Click on the Advanced link to expand it.
  • Under Contextual filters click add Content: Nid and click Add and configure contextual filter.
  • Select Provide default value  and select Content ID from URL Click apply.
  • Now look for Relationship and click on Add
  • Select  Content: Related Products (field_related_products) Appears in: node:product. (if you named your field Related Products)
  • Select Require this relationship and click add.
  • Now go to Filter criteria and remove all the filters.
  • Go to Fields and for testing purposes click on Content: Title.
  • Look for Relationship and choose field_related_products. Click apply. It should now show (field_related_products) Content: Title

Thats basically it for the view. You can go into the Grid setting and choose one column to show all products one under another. If not you can select any view type you want.Go to any of your products and edit one.

  • Scroll down till you see Related Products field and select the products you want to reference. Click save.

Now were gonna go into the block section at admin/structure/block

  • Scroll all the way down and look for View: Related Products and select the region you want it to appear in like say a side bar. Click on save.

So go back to your product and in the region where you put the block you should see a new Related Products block showing the nodes you selected on the Edit Node page.After that you can style the block any way you want.So thats the basic setup to get you going. You can do this with any node type you want to releate to.Now for QuitckTabs.This is pretty straight forward.

  • Once you install the QT module.
  • Go to admin/structure/quicktabs
  • Add a QuickTab  instance called Related Products or what ever you want.
  • Give it a title
  • Style
  • Default Tab.
  • When you go down to the bottom under Tab type select block
  • Under Tab content select the Related Products block.
  • Click save.
  • Now go back to admin/structure/block and look for the QuickTabs block.
  • Then select the region where you want it to show. Basically same as the way we selected the first block.

Thats the basic setup. After that its all styling.

end user's picture
Offline
Joined: 01/11/2008
Juice: 1738
Re: Modules for doing related content in tabs on product pages

I don't remember how I did it in D6/.UC2 but it was similar. You'll have to active the CCK node references field and set up a view that will display the referenced nodes you select on the node edit page.

This is what I have bookmarked when I was reading up on views and cck node reference http://drupal.org/node/289738

Hopefully this helps.