Hello. I am running OC 3.0.2.0.
When a user looks at a product, to see the description they would have to click on the the description tab. How can this tab show it's information by default?
When a user looks at a product, to see the description they would have to click on the the description tab. How can this tab show it's information by default?
Attachments
Capture.PNG (95.43 KiB) Viewed 977 times
Hello, try the following:
Go to catalog\view\theme\default\template\product\product.twig
Find the following line:
and it to:
Go to catalog\view\theme\default\template\product\product.twig
Find the following line:
Code: Select all
<li><a href="#tab-description" data-toggle="tab">{{ tab_description }}</a></li>
Code: Select all
<li class="active"><a href="#tab-description" data-toggle="tab">{{ tab_description }}</a></li>
The closest line I could find to what you posted is:
Code: Select all
<a class="nav-link active" id="description-tab" data-toggle="tab" href="#tab-description" role="tab" aria-controls="tab-description" aria-selected="true">
{{ tab_description }}</a></li>
This is a little strange because according to https://getbootstrap.com/docs/4.0/components/navs/ the following SHOULD work...
Does anybody have any clue why the Description tab is not selected by default?
Code: Select all
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" id="description-tab" data-toggle="tab" href="#tab-description" role="tab" aria-controls="tab-description" aria-selected="true">
{{ tab_description }}</a></li>
{% if attribute_groups %}
<li class="nav-item">
<a class="nav-link" id="specification-tab" data-toggle="tab" href="#tab-specification" role="tab" aria-controls="tab-specification" aria-selected="true">
{{ tab_attribute }}</a></li>
{% endif %}
Well, the "active" exist as I can see.mvlismas wrote: ↑Mon Sep 24, 2018 11:22 pmThe closest line I could find to what you posted is:Code: Select all
<a class="nav-link active" id="description-tab" data-toggle="tab" href="#tab-description" role="tab" aria-controls="tab-description" aria-selected="true"> {{ tab_description }}</a></li>
If you click it, it works fine? Could you send me your site link?
I noticed using an inspector...
When the Description is not expanded the inspection looks like:
When the Description is clicked on and expanded, the inspection looks like:
So the main difference is the aria-expanded="true" tag. I am not sure how or where to place this. I tried a few different things. After trying I cleared the Cache and SASS.
When the Description is not expanded the inspection looks like:
Code: Select all
<a class="nav-link active" id="description-tab" data-toggle="tab" href="#tab-description" role="tab" aria-controls="tab-description" aria-selected="true">Description</a>
Code: Select all
<a class="nav-link active" id="description-tab" data-toggle="tab" href="#tab-description" role="tab" aria-controls="tab-description" aria-selected="true" aria-expanded="true">Description</a>
Try to change the line before that from
to
Code: Select all
<li class="nav-item">
<a class="nav-link active" id="description-tab" data-toggle="tab" href="#tab-description" role="tab" aria-controls="tab-description" aria-selected="true">Description</a></li>
Code: Select all
<li class="nav-item active">
<a class="nav-link active" id="description-tab" data-toggle="tab" href="#tab-description" role="tab" aria-controls="tab-description" aria-selected="true" aria-expanded="true">Description</a></li>
OK, I seem to have got it to work. Here is what I did:
Originally had:
Changed to this:
Added
aria-expanded="true" to the end of the 4th line down.
then added
" in"
after
<div class="tab-pane fade show active
Originally had:
Code: Select all
<ul class="nav nav-tabs">
<li class="nav-item active">
<a class="nav-link" id="description-tab" data-toggle="tab" href="#tab-description" role="tab" aria-controls="tab-description" aria-selected="true">
{{ tab_description }}</a></li>
{% if attribute_groups %}
<li class="nav-item">
<a class="nav-link" id="specification-tab" data-toggle="tab" href="#tab-specification" role="tab" aria-controls="tab-specification" aria-selected="true">
{{ tab_attribute }}</a></li>
{% endif %}
{% if review_status %}
<li class="nav-item">
<a class="nav-link" id="review-tab" data-toggle="tab" href="#tab-review" role="tab" aria-controls="tab-review" aria-selected="true">
{{ tab_review }}</a></li>
{% endif %}
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab-description" role="tabpanel" aria-labelledby="description-tab">
{{ description }}
</div>
Code: Select all
<ul class="nav nav-tabs">
<li class="nav-item active">
<a class="nav-link" id="description-tab" data-toggle="tab" href="#tab-description" role="tab" aria-controls="tab-description" aria-selected="true" aria-expanded="true">
{{ tab_description }}</a></li>
{% if attribute_groups %}
<li class="nav-item">
<a class="nav-link" id="specification-tab" data-toggle="tab" href="#tab-specification" role="tab" aria-controls="tab-specification" aria-selected="true">
{{ tab_attribute }}</a></li>
{% endif %}
{% if review_status %}
<li class="nav-item">
<a class="nav-link" id="review-tab" data-toggle="tab" href="#tab-review" role="tab" aria-controls="tab-review" aria-selected="true">
{{ tab_review }}</a></li>
{% endif %}
</ul>
<div class="tab-content">
<div class="tab-pane fade show active in" id="tab-description" role="tabpanel" aria-labelledby="description-tab">
{{ description }}
</div>
aria-expanded="true" to the end of the 4th line down.
then added
" in"
after
<div class="tab-pane fade show active
Who is online
Users browsing this forum: No registered users and 227 guests