Tabs accesoiries don't work correctly

[w3houde]

Hi, thanks for sharing this tips so on my website tabs accesories don't show items.

So if I resize my window it's appear can you help me for display this correctly ?

Thank's in advance.

Best regards.

[webprom]

probably a css problem... will need to see your page, but busy today, maybe later

[w3houde]

Okay thank you,
Have a nice day !

Le 01/03/2016 13:45, Iggy Pritzker a écrit :

probably a css problem... will need to see your page, but busy today,
maybe later

—
Reply to this email directly or view it on GitHub
#1 (comment).

[w3houde]

I've fix it !
It's was my padding :)

Have a good day !

[webprom]

great :)

[maxalerator]

@w3houde Can you please share your solution sow i know on which css file in need to modify?

[maxalerator]

@webprom Thanks for sharing! It would be great if you have time to look at my product page with the same problem. Just can't figure it out...... new.carewebshops.nl/home/536-mflor-ithring-oak.html

[webprom]

looking... have you disabled "Gratis stalen" tab intentionally?

[maxalerator]

Even without having that tab enabled the accessories aren't showing. You can force the accessories to show by inspecting it with your browser. I actually want that tab displayed only on the gratis stalen but i can't manage to fix that either.... Thanks you for having a look!

[webprom]

.bx-viewport has height:0;
in your case a quick fix to try would be to add height

.accessories-block .bx-viewport {
  height: auto !important;
}

and for images there

.accessories-block .bx-viewport .product-box {
width:auto !important;
}

there is a JavaScript problem with bx slider inside. I don't have now accessories tab anywhere to test. but you may try to change the class and id in <ul id="bxslider" class="bxslider clearfix"> - maybe slider will not initialize.

[webprom]

or to make images fit

.accessories-block .bx-viewport .product-box {
width:178px !important;
}

[maxalerator]

Thank you very much! Looks like everything is showing correctly right now. Maybe you can add it to the css file

[webprom]

css? better to css file :)

[maxalerator]

I mean in your additional-css.css on github for other people to show the accessories correctly

[webprom]

hmm.. it's not a solution yet... let's leave it here. not many ppl use accessories tab i guess.
do you have a page with many accessories? want to see what happens if there are more than 1 row could hold

[maxalerator]

I added a lot of accessories to the product so you can see it know. I think everything is working as expected isn't it? How yould you add another module to a tab? I downloaded this module http://store.nemops.com/free-modules/32-ask-a-question.html#.VtrgP8cYGRs and i want it to display in its own tab. Could you help me with that? Thank you for your time!

[webprom]

yes, looks ok. with the module maybe try to move positions / hooks. Or ask the developer. He's writing something about hookDisplayProductTabs and hookDisplayProductTabsContent
also check developer replies: You need to remove the if(PS_VERSION... part

[webprom]

or copy some tab li and content box, and hook the module into the content somehow

[maxalerator]

I ask the question already on his page but it isn't accepted yet. I thought it maybe is somehow related to this modification. The module displayed under the review section in the first place and after i added this to the product.tpl it give me this result. I think I miss an {if} statement or something.

<div id="product-info" class="clearfix">
            <ul id="product-tabs" class="idTabs clearfix">
        <li><a href="#qnaTab">{l s='Gratis stalen' mod='prestaqna'}</a></li>
                {if isset($product) && $product->description}
                <li><a href="#ptab-info">{l s='More info'}</a></li>
                {/if}
                {if isset($features) && $features}
                <li><a href="#ptab-data">{l s='Data sheet'}</a></li>
                {/if}
                {if isset($packItems) && $packItems|@count > 0}
                <li><a href="#blockpack">{l s='Pack content'}</a></li>
                {/if}
                <li><a href="#ptab-reviews">{l s='Reviews'}</a></li>
                {if isset($accessories) && $accessories}
                <li><a href="#ptab-acc">{l s='Accessories'}</a></li>
                {/if}
            </ul>

`

        <h3 id="#qnaTab" class="page-product-heading">{l s='Ask a question' mod='prestaqna'}</h3>
        <div id="qnaTab">
            <p class="centertext">
                <span><strong>{l s='NO registration required!' mod='prestaqna'}</strong></span>
            </p>


            <p>{l s='If the question you have has not yet been answered here, use the form below to ask something about this addon.' mod='prestaqna'}</p>
            <form action="" method="POST" id="qna_ask" class="std box">


                <div class="field clearfix form-group">
                    <label for="qna_q">{l s='I want to know:' mod='prestaqna'} </label>
                    <textarea name="qna_q" id="qna_q" rows="8"/></textarea>
                </div>
                <div class="field clearfix form-group">
                    <label for="qna_name">{l s='Name:' mod='prestaqna'} </label>
                    <input type="text" name="qna_name" value="" id="qna_name" />
                    <small>{l s='(optional)' mod='prestaqna'}</small>
                </div>
                <div class="field clearfix required form-group">
                    <label for="qna_email">{l s='E-mail:' mod='prestaqna'} </label>
                    <input type="text" name="qna_email" value="" id="qna_email" />
                    <small><sup>*</sup>{l s='(Required to be notified when an answer is available)' mod='prestaqna'}</small>
                </div>

                <div class="form-group">
                    <input type="hidden" name="qna_prod" value="{$smarty.get.id_product}"/>
                    <a href="javascript:void(0)" title="{l s='Send question!' mod='prestaqna'}" class="btn btn-default" id="submitQNA">{l s='Send question!' mod='prestaqna'}</a>
                </div>
            </form>

            {if isset($qnas) && $qnas}


            {/if}
        </div>

        <script>
            var qna_error = "{l s='Whoops! It seems that your request could not be validated, please retry' mod='prestaqna'}",
                qna_badcontent = "{l s='Bad message content!' mod='prestaqna'}",
                qna_badname = "{l s='Bad name content!!' mod='prestaqna'}",
                qna_bademail = "{l s='Bad E-mail address!' mod='prestaqna'}",
                qna_confirm = "{l s='Thank you. Your question has been registered. You will be notified as soon as an answer is available' mod='prestaqna'}";

        </script>

    </section>`

[webprom]

looks like you have multiple IDs id="qnaTab" - make a special id for section and link to it from the tab name

[webprom]

must work now, good luck! :)

[maxalerator]

You are the best, thank you very much! It is only displayed under the review section at the moment so i still need to have a look at that but for now i'm happy with this...

[webprom]

looks like module developer just took reviews form, it's another tab but looks the same, modify reviews tab or questions tab with a different text etc.

[maxalerator]

Thanks I'll try that!

To fix the accessories i added this to product the css addition

 #product-tabs {
    margin: 0 0 20px;

and uncommented this

#product-info .page-product-box {
    background: #fff;
    /* padding: 1.5em !important; */
    margin-top: 0px;
    min-height: 12.8em;
}

Now it looks better ; )

[webprom]

yes, depends on design, if you were having some borders on tab, you'll need paddings

[Snake1588]

Hi, can you please help me. I have tried everything that it says here but i cant solve it. Accesories tab keeps to open up empty.

[webprom]

Sorry, busy these days. Did you tried this #1 (comment)

[maxalerator]

@Snake1588 maybe you can share your url sow we can check it with the web inspector. Already tried to clear your cache?

[Hop-Seb]

Hello and thank you to your files !

I use a module to manage tabs... but it doesn't work.
I use PerfectMultiTabs, what can I do to find a solution ?

How the hook "{$HOOK_PRODUCT_TAB}" can works ? if it is not in the < ul > ?
I don't understand... Because the tabs' titles are written but the hook is far...

Thanks