Post by mvlismas » Mon Sep 24, 2018 9:43 pm

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?

Attachments

Capture.PNG

Capture.PNG (95.43 KiB) Viewed 977 times


Newbie

Posts

Joined
Tue Aug 21, 2018 10:10 am

Post by storiqax » Mon Sep 24, 2018 10:12 pm

Hello, try the following:

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>
and it to:

Code: Select all

 <li class="active"><a href="#tab-description" data-toggle="tab">{{ tab_description }}</a></li>

User avatar
New member

Posts

Joined
Tue May 29, 2018 10:19 pm

Post by mvlismas » Mon Sep 24, 2018 11:22 pm

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>

Newbie

Posts

Joined
Tue Aug 21, 2018 10:10 am

Post by mvlismas » Tue Sep 25, 2018 12:13 am

This is a little strange because according to https://getbootstrap.com/docs/4.0/components/navs/ the following SHOULD work...

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 %}
Does anybody have any clue why the Description tab is not selected by default?

Newbie

Posts

Joined
Tue Aug 21, 2018 10:10 am

Post by storiqax » Tue Sep 25, 2018 12:17 am

mvlismas wrote:
Mon Sep 24, 2018 11:22 pm
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>
Well, the "active" exist as I can see.
If you click it, it works fine? Could you send me your site link?

User avatar
New member

Posts

Joined
Tue May 29, 2018 10:19 pm

Post by mvlismas » Tue Sep 25, 2018 12:48 am

Sent site URL via PM

Newbie

Posts

Joined
Tue Aug 21, 2018 10:10 am

Post by mvlismas » Tue Sep 25, 2018 12:58 am

I noticed using an inspector...

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>
When the Description is clicked on and 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" aria-expanded="true">Description</a>
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.

Newbie

Posts

Joined
Tue Aug 21, 2018 10:10 am

Post by mvlismas » Tue Sep 25, 2018 2:06 am

Can anybody please assist?

Newbie

Posts

Joined
Tue Aug 21, 2018 10:10 am

Post by storiqax » Tue Sep 25, 2018 2:16 am

Try to change the line before that from

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>
to

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>

User avatar
New member

Posts

Joined
Tue May 29, 2018 10:19 pm

Post by mvlismas » Tue Sep 25, 2018 2:52 am

OK, I seem to have got it to work. Here is what I did:
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>
Changed to this:

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>
Added
aria-expanded="true" to the end of the 4th line down.
then added
" in"
after
<div class="tab-pane fade show active

Newbie

Posts

Joined
Tue Aug 21, 2018 10:10 am

Post by mvlismas » Tue Sep 25, 2018 2:53 am

Not sure if this is a bug, or if some extension messed up my code?
But thank you for all your help!

Newbie

Posts

Joined
Tue Aug 21, 2018 10:10 am
Who is online

Users browsing this forum: No registered users and 227 guests