Trying to get PS 1.5-style tabs in 30bz

[dynambee]

Hi everyone,

I'm trying to get PS 1.5 sytle tabs to work in 30bz. @Nemo has a very helpful tutorial about how to do it with PS 1.6 but it involves editing the theme's product.tpl file and this file has been heavily rewritten in 30bz.

Following @Nemo's tutorial a friend of mine (I suck completely at PHP) tried to correctly insert the PS 1.5 code into the 30bz product.tpl file, but the insertion points @Nemo mentioned were often not there so the code is likely in the wrong place. After hacking around with it for a bit I renamed the original file on a brand new 30bz 1.0.1 installation and uploaded the hacked together product.tpl. The result is this:

https://www.zila.jp/index.php?id_product=1&controller=product

If that looks exactly like a normal product page, you're right. Making the changes with PS 1.5 code didn't actually result in any changes in the rendered page.

So I assume something is badly wrong with the file I uploaded but I don't know what. @Nemo, any ideas? @mdekker?

[dynambee]

No one has any ideas about this? Has using tabs become a bad practice? @Nemo, @mdekker, any thoughts?

[moy2010]

It's really easy. All you have to do is to toggle classes using jquery to display/hide the correspontind tab content.

[Havouza]

@moy2010 If its easy perhaps you can make a quick tutorial working on tb?

[lesley]

Sounds like a good topic for me to make a tutorial about on friday for the developer blog.

[Havouza]

I would be very pleased if this was solved. I have posted before about it. The nemo tutorial just dont work on tb

[lesley]

I will try to get it written up tomorrow, but by friday for sure. I can gist you the files now if you want, I just tested it.

[Havouza]

Yes please. How does that work?

[lesley]

Here is the gist, https://gist.github.com/Dh42/d94c08a568b5ef20194eeaf5cc33543c Add the css to the bottom of your product.css, and copy the product.tpl over your product.tpl file and it should work.

[Havouza]

es that worked. I know this is probably out of topic but perhaps you could point at the solution to get nemos Q & A module to be in one tab.

[lesley]

You will have to edit the temple that has the tab / block in it, not the one that has the content. What you will need to do is basically take out his 3h tag and make it a list item, something like this.

{l s='Questions and Answers' mod='psqanda'}

[lesley]

I have written an article about how to add the tabs if anyone needs it, https://thirtybees.com/developer-blog/adding-tabs-to-the-product-page/

[dynambee]

Thank you very much!

[alwayspaws]

May I please have a screenshot of what this looks like?

[lesley]

There is one at the bottom of the blog post.

[alwayspaws]

I looked at the image but it doesn't show me what this accomplishes, if you mean the image with the ladies legs.

[lesley]

@alwayspaws What the edit does is make tabs like on this page, http://store.nemops.com/free-modules/44-product-access.html instead of inline section areas like in our default theme.

[alwayspaws]

Thank you, Lesley. I never saw that before.

[lesley]

Most paid themes have it, its something we have been on the wall about putting in the default theme.

[alwayspaws]

Maybe my theme has it then: Transformer theme. I still haven't explored all its features. So much to do.

[lesley]

It does

[alwayspaws]

Wonderful! I'll check it out.

[hfxracing]

What if you want the ability to add a new Tab. Example a shipping Tab with unique title. A sizing chart is another good example. It would also need the ability to be linked only to certain products too.

[SLiCK_303]

@lesley said in Trying to get PS 1.5-style tabs in 30bz:

Most paid themes have it, its something we have been on the wall about putting in the default theme.

I like it the way it is, even though I have tried this too via nemos post. If you do make it this way, please make some sort of toggle for it one way or the other.

[lesley]

We have a post about it on our blog as well, https://thirtybees.com/developer-blog/adding-tabs-to-the-product-page/ might be a little helpful.

[SLiCK_303]

It doesn't include the reviews section, how does one make that a tab as well?