Additional tab content breaking down

This topic has 15 replies, 3 voices, and was last updated 4 years, 1 month ago by Artem Temos.

Viewing 16 posts - 1 through 16 (of 16 total)

Author

Posts
October 11, 2020 at 10:07 am #232385

addy
Participant

Hi there,

We have enabled the “Additional custom tab” in theme settings.

We are also using customer reviews plugin – https://wordpress.org/plugins/customer-reviews-woocommerce/

They have a shortcode – [cusrev_reviews_slider count=”5″ slides_to_show=”3″ show_products=”true” product_links=”true” sort_by=”date” sort=”DESC” categories=”” products=”” color_brdr=”#ebebeb” color_bcrd=”#fbfbfb” color_pr_bcrd=”#f2f2f2″ color_stars=”#6bba70″ shop_reviews=”false” count_shop_reviews=”1″ inactive_products=”false” autoplay=”false” avatars=”true”]

This shortcode works perfectly fine on other pages for example – homepage.

But when this shortcode is added on that “additional tab”, it breaks the formatting. And it looks broken. See the screenshot attached.

Sometimes it automatically fixes after 2-3 seconds. Sometimes you might need to forcefully slide the slider and it then fixes.

ON mobile, it is ALWAYS BROKEN.

See private section to know how to test at your end

Please advise.

Attachments:
You must be logged in to view attached files.

October 11, 2020 at 4:18 pm #232432

Elise Noromit
Member

Hello,

Please provide your site admin access to the private area.

Best Regards

October 11, 2020 at 5:03 pm #232445

addy
Participant

I have provided the admin access.

October 12, 2020 at 9:58 am #232552

Elise Noromit
Member

Hello,

Please test this slider in the usual page without HTML block and our additional tab, just create a page and test if there is a problem.

Best Regards

October 12, 2020 at 10:28 am #232569

addy
Participant

It is working everywhere with or without HTML block.

You can see it working very good on Homepage.

The CSS breaks only in additional TAB.

Can you please fix it with CSS for that HTML block?

October 12, 2020 at 12:14 pm #232599

Artem Temos
Keymaster

Hello,

It seems that the plugin carousel is not optimized to work in hidden content like tabs. You need to contact the plugin’s developers for help. The carousel should be reinited when the tab is opened and we can’t do this in our theme’s code.

Kind Regards

October 12, 2020 at 12:24 pm #232603

addy
Participant

We have already contacted the plugin.

They say it is a theme issue. See screenshot

Because the shortcode works everywhere else fine.

I request your cooperation and some thinking on this matter.

Please suggest some fix.

Attachments:
You must be logged in to view attached files.

October 12, 2020 at 1:14 pm #232618

Artem Temos
Keymaster

Sure, as we already mentioned, the carousel should be reinited when the tab is opened and we can’t do this in our theme’s code. But it will fix the problem.

October 12, 2020 at 1:24 pm #232620

addy
Participant

How to reinited the tab?

I really don’t know how to do that. But I want this problem to solve as soon as possible.

Can you please advise the code snippet for that?

I can add that in functions.php

October 12, 2020 at 2:48 pm #232667

Artem Temos
Keymaster

No the tab but the carousel. You need to reinit the carousel when the tab is opened. It is a plugin-related function that is why we don’t have a fix for this. You need to ask the plugin’s developers for help.

October 13, 2020 at 3:58 pm #232978

addy
Participant

Hi,

We had a long chat with the plugin author.

He offered me a temporary solution but we are still working on it.

He says the theme code collides with the plugin code. See screenshot

I search what you said – reinit the carousel but don’t know how to implement that.

Can you please see where the theme code might me colliding?

Also can you suggest more about “reinit the carousel” so I can reach the solution please. Do I need to implement that in Html or PHP?

Attachments:
You must be logged in to view attached files.

October 14, 2020 at 6:22 am #233078

Artem Temos
Keymaster

Hello,

Reinit carousel should be a JS code snippet that you can run when the tab is opened. So the code should recalculate the carousel parameters. You need to ask plugin’s developers for this code. Then, we will help you to implement it in a right place.

Kind Regards

October 31, 2020 at 12:30 pm #237507
addy
Participant
Hi,

Greetings!

The author of the plugin suggested us the JS snippet. It is working on Desktop. But it does not work on Phone.

Js snippet:
```
if(jQuery('.woocommerce-tabs .cr-reviews-slider').length){
jQuery('.woocommerce-tabs .wc-tabs a').on('click', function(){
if(jQuery('.woocommerce-tabs .cr-reviews-slider .slick-active').width() === 0) {
setTimeout(function () {
if (jQuery('.woocommerce-tabs .cr-reviews-slider.slick-initialized:visible').length) {
jQuery('.cr-reviews-slider').slick('setPosition');
}
}, 200);
}
});
}
```
I have added the code to the global JS. See screenshot.
You already have the admin access if required.

Attachments:
You must be logged in to view attached files.
October 31, 2020 at 12:43 pm #237517
Artem Temos
Keymaster
Try to replace the code with the following one
```
if(jQuery('.woocommerce-tabs .cr-reviews-slider').length){
jQuery('.woocommerce-tabs .wc-tabs a, .woodmart-accordion-title').on('click', function(){
if(jQuery('.woocommerce-tabs .cr-reviews-slider .slick-active').width() === 0) {
setTimeout(function () {
if (jQuery('.woocommerce-tabs .cr-reviews-slider.slick-initialized:visible').length) {
jQuery('.cr-reviews-slider').slick('setPosition');
}
}, 200);
}
});
}
```
November 5, 2020 at 2:57 am #238855

addy
Participant

Thank you.

November 5, 2020 at 6:58 am #238883

Artem Temos
Keymaster

You are welcome!
Author

Posts