Docs

[anandawebservices]

Hi there,

We have a custom Cornerstone element, which works great for the public. It incorporates a slider using slick.js.

When on the Cornerstone edit screen, the JS to invoke slick.js seems not to run. If I run that code manually in the console, everything works fine.

Should I be adding this JS to a special hook or giving it another dependency when in the Cornerstone preview / edit screen?

[Rupok]

Hi there,

Thanks for writing in! If you have enqueued the script then it should be enough. There are some Addons like this utilizing slick without any issue.

Let us know how you are adding the script for your element.

Cheers!

[anandawebservices]

Hey Rupok, thanks for your answer. I should have looked for an addon like that back when we started out!

It’s enqueued and the <script> tag shows up in the page source code (in Cornerstone and outside of it). No JS errors.

Here’s the code, although it doesn’t tell you much 😉

wp_enqueue_script( $this->element_id, $default_script_path_url, $this->default_script_dependencies, ananda_x_get_version_from_timestamp( $default_script_path ), true );

That in turn is called from this:

add_action( 'wp_enqueue_scripts', array($this, 'enqueue_default' ) );

You can see it “live” here:
http://medretreat.staging.wpengine.com/

Any thoughts? It’s mysterious to me.

[Rad]

Hi there,

Hmm, I like to see and test too. Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks!

[anandawebservices]

This reply has been marked as private.

[anandawebservices]

Perhaps also relevant and of interest: we have a “Featured Trio” custom Cornerstone block that has a similar behavior. When you’re editing in Cornerstone, it doesn’t really preview (in fact, you can’t see it at all), but it looks fine to the website visitor when they visit the homepage of the site.

Edit: Looks like this is the same problem, the JavaScript isn’t running, or at least not at the right time.

[Jack]

Hi there!

Cornerstone uses xData.api.map which is how it handles callbacks for when the element renders (if your element should show a live preview).

You can run a search in Cornerstone and you’ll see it used in all elements, you’ll need to make sure your custom element uses a similar method or the live preview won’t work (though it should still work on the front-end if correctly enqueued). 🙂

Thanks!

[anandawebservices]

Thanks, that provided the solution!

It would be really great to document this in the Custom Cornerstone Element page (which is already very helpful). It would have saved me a couple of hours, as well as some time for you folks (thanks again).

For others who have the same problem and find this, I ran this script, dependent on the jquery and cornerstone-site-body scripts:

(function($) {

	xData.api.map( 'ananda-x-featured-trio', function( params ) {
		// code to do everything goes here
	});
	
})( jQuery );

I didn’t have to change the original JS, just wrap it in the above.

However, the custom Cornerstone element had to have this attribute, output in its shortcode.php, for everything to work:
data-x-element="ananda-x-featured-trio"

So the shortcode in my case ended up looking like this:

<div <?php echo cs_atts( array( 'id' => $id, 'class' => $class, 'style' => $style ) ); ?>
	data-x-element="ananda-x-featured-trio">
	<div class="slider center">
		<?php echo do_shortcode( $content ); ?>
	</div>
</div>

[Rad]

Hi there,

Thanks for sharing, and yes, it should be well documented and it will be in the future 🙂

Thanks!

[Author]

Posts