22 posts
  • Sells items exclusively on Envato Market
  • Has been part of the Envato Community for over 2 years
  • Has referred 1+ members
  • Has collected 10+ items on Envato Market
+1 more
wplab says

Hello everybody! I’m looking an advice, if you have experience with new Visual Composer Frontend builder, please.

How to init my own carousel javascript in a shortcode at VC Frontend editor?

I use “wp_enqueue_scripts” to load my front-end JS, but it doesn’t work when i add a shortcode in VC front editor.

thank you so much

396 posts
  • Has been part of the Envato Community for over 5 years
  • Has collected 100+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Located in United States
WPWiseOwl says

Have you viewed the page source in the browser and checked to see whether the JS path is actually valid / resolves? Any errors in the console?

Regardless of whether you use “wp_enqueue_scripts” or no, if it’s a bad url then it’s not going to load. Where / in what file are you enqueuing? Are you using an hook to run the enqueue code? This is all not at all specific to VC but JS and WP.

Aside from that also have a look here for VC specifics when you’re sure of the rest – http://kb.wpbakery.com/index.php?title=Category:Visual_Composer

1284 posts
  • Has been part of the Envato Community for over 4 years
  • Has sold $40,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 50+ items on Envato Market
+5 more
Smartik says

This is all not at all specific to VC but JS and WP.
I have not tried Visual Composer but I guess the problem here is in WP but in the plugin itself. Basically it should init/create the carousel javascript after it is added. If the js that call the carousel is in an external file then it probably is not going to be loaded again, it is loaded only once when the page is ready. This is something like jQuery ajax where you have to re-init the js when ajax is complete.
22 posts
  • Sells items exclusively on Envato Market
  • Has been part of the Envato Community for over 2 years
  • Has referred 1+ members
  • Has collected 10+ items on Envato Market
+1 more
wplab says

Thank you for reply.

There are no errors in JS console, also i read documentation and tried to get support from WPBakery, they promised write me an example, the right way to init JS, but promises remained promises for the past two weeks, it is sad :(

I will try to explain

I keep all the JS functions for front-end in a single file, it loads and works well, as the rest parts of the theme works fine, like widgets, that uses JS from that file.

I believe that i need to call some hook to init my carousel when shortcode is loaded, but i did not find any docs how to do that.

22 posts
  • Sells items exclusively on Envato Market
  • Has been part of the Envato Community for over 2 years
  • Has referred 1+ members
  • Has collected 10+ items on Envato Market
+1 more
wplab says

i’ve found a temporary solution, to call JS function in a shortcode template, but I’m not sure that this is a right way. what do you think? anyway thanks for your answers!

22 posts
  • Sells items exclusively on Envato Market
  • Has been part of the Envato Community for over 2 years
  • Has referred 1+ members
  • Has collected 10+ items on Envato Market
+1 more
wplab says

just got a reply from WPbakery, I had to do what I did, i need to call my init function from a shortcode template. In my opinion, it is not very correct, but it works.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by