Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 10, 2023 at 2:29 pm #1397473
    paolam111

    Hi, I developed a plugin that uses angular to inject content inside a page on my site. I am using enfold as a template. I noticed in the documentation that you can use shortcodes to add elements to the page. In my application, however, I would directly generate html code and only inject it into the website after the shortcodes are processed. Is there any guideline to generate enfold template elements directly using html and not shortcodes, or a javascript function to render shortcodes after processing?

    February 11, 2023 at 9:34 pm #1397595
    Mike

    Hey paolam111,
    We don’t have specific documentation for shortcodes as typically the shortcode is displayed on rendering, you could try ob_start and ob_end_clean.
    Another option would be to inject the shortcode with javascript or jQuery, for example:

    window.addEventListener('DOMContentLoaded', function() {
  (function($){	
        var wpseo_breadcrumb = '<?php echo do_shortcode("[wpseo_breadcrumb]"); ?>';
      $('.breadcrumb.breadcrumbs.avia-breadcrumbs').replaceWith('<div class="breadcrumb breadcrumbs avia-breadcrumbs">' + wpseo_breadcrumb + '</div>');
  })(jQuery);
});

    Best regards,
    Mike

    February 14, 2023 at 11:09 pm #1397998
    paolam111

    Perfect! The assumption of using shortcodes was to make sure that the generated markup had all the CSS classes and attributes set correctly. Over the past few hours I have tried using the generated markup and the graphical result does not seem to have any missing issues/styles. However, I noticed that when using tabsection and accordion, it is as if the event handling via javascript is missing or something else because it doesn’t work (it redirects to the same page by changing the url without opening the correct tab/accordion). Is there by any chance a function I need to call to make the elements I inject into the page content (via angular/jquery) work properly, even on the mobile side?

    • This reply was modified 1 year, 10 months ago by paolam111.
    February 15, 2023 at 11:42 am #1398047
    Mike

    Hi,
    Can you show an example so we can understand better, the tab section and accordion loads the content on page load and it just not visible, then clicking makes it visible, if you are only adding content after a click then try adding a delay, but I would recommend adding the content on page load. I don’t have much experience with angular.

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.