Home Forums Meteorite Product page tab

This topic is: resolved

This topic contains 5 replies, has 2 voices, and was last updated by  Terra Themes 8 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #980

    JuanMZC
    Participant

    Hi there,

    I have plugin to embed PDF document on my website and there is an issue with the PDF width in single product page tabs. I mailed that to the support of this plugin and they reply the below email to me (copy and paste). Can you help me as it’s not clear to me where I should include this line of code window.dispatchEvent(new Event('resize')); and if this modification could ‘break’ or affect to your template?

    You can see an example on this page: https://alternativedebt.com.au/ads-platform/waddle/?profile=Waddle

    “Hi Juan,

    The PDF viewer size is calculated on the initial page load but with AJAX tabs such as those provided by your theme, the viewer size is calculated and doesn’t adjust further as the tabs are opened and closed because the event calling the calculation isn’t called again. You can confirm this by resizing your browser window which forces a reload event and the viewer adjusts correctly.

    To fix this, please see https://wp-pdf.com/kb/the-viewer-doesnt-display-at-all-or-at-wrong-size-when-inside-a-javascript-based-tab-or-ajax-page-transitions/ in particular the first section regarding the “resize” event. This is something that would need to be added to your theme (preferably as a child theme’s custom JS file or as part of a customisation plugin).

    If you have any other questions, please do not hesitate to ask.

    Emma


    Emma Balitski
    Customer Advocate”

    Thanks in advance.

    #981

    Terra Themes
    Keymaster

    Hi Juan,

    I can’t really say whether it would affect anything or not, but I guess not.

    As I read through the knowledgebase of the plugin I think the code has to be pasted into the code where the tab functionality is located. Since this is part of the WooCommerce plugin you would have to modify their files directly.

    However I think we can get a workaround for your issue.

    Please add the following code to a child theme or custom JS plugin.

    // Custom function to trigger rezise events on WooCommerce tab click
    jQuery( function($) {
      $( 'body' ).on( 'click', '.wc-tabs li a, ul.tabs li a', function( e ) {
        e.preventDefault();
        $(this).trigger('resize');
      } );
    });

    This is the code WooCommerce uses to click tabs, modified with the resize event the support gave you. Instead of Javascript this is in jQuery.
    I haven’t tested this, but it might work for you. I look forward to your feedback.

    #986

    JuanMZC
    Participant

    Thanks for your help.

    Where should I add that code? In the main.min.js file (/wp-content/themes/meteorite/js/) ?

    #987

    Terra Themes
    Keymaster

    As said above, normally custom code has to be used in a child theme or custom JS plugin. I’m saying this since it might help other users.
    However since you already modified the theme files you can put it into the main.min.js file under the custom code you have there aready.

    #988

    JuanMZC
    Participant

    It’s working. Thanks so much for your help!

    #989

    Terra Themes
    Keymaster

    That’s great! I’ll mark this topic as resolved. Let me know in another topic when you need further help.

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

You must be logged in to reply to this topic.