[Resolved] Javascript in sidebar not working

[mkjj]

Similar questions have been posted in this forum before but nothing really fits. I have to include a trust badge via JS. Usually, I put the code in the functions.php or a template file. We wanted to run an AB-test. Unfortunately, the plugin does not support testing modifications of the theme file system. So, I tried a HTML widget. No big deal, I thought. But no, the code works perfectly fine if put in the footer.php. But it does not work in the widget. It is in the source code, it seems ok, and I don’t see errors in the console (the GTM-related warnings are always there). Cache is cleared, of course.

The snippet:

<script type="text/javascript">
	(function () {
	var _tsid = 'X808D881B152E37ADE95DC6934A3D1CFD'; 
	_tsConfig = {
		'yOffset': '-35', /* offset from page bottom */
		'variant': 'reviews', /* reviews, default, custom, custom_reviews */
                'responsive': {'variant':'floating_reviews', 'position':'right', 'yOffset':'0'},
		'customElementId': '', /* required for variants custom and custom_reviews */
		'trustcardDirection': '', /* for custom variants: topRight, topLeft, bottomRight, bottomLeft */
                'customBadgeWidth': '', /* for custom variants: 40 - 90 (in pixels) */
		'customBadgeHeight': '', /* for custom variants: 40 - 90 (in pixels) */
		'disableResponsive': 'false', /* deactivate responsive behaviour */
		'disableTrustbadge': 'false', /* deactivate trustbadge */
		'trustCardTrigger': 'mouseenter', /* set to 'click' if you want the trustcard to be opened on click instead */ 'customCheckoutElementId': ''/* required for custom trustcard */
	};
	var _ts = document.createElement('script');
	_ts.type = 'text/javascript';
	_ts.charset = 'utf-8';
	_ts.async = true;
	_ts.src = '//widgets.trustedshops.com/js/' + _tsid + '.js'; var __ts = document.getElementsByTagName('script')[0]; __ts.parentNode.insertBefore(_ts, __ts);
})();</script>

https://www.agoshop.de/

What am I missing? Thank you very much!

[David]

Hi there,

can you provide a link to a page where i can see the sidebar that has the script inside ?

[mkjj]

Actually, it is on each an every page in the footer in the right column after the newsletter form. The badge floats on the right bottom of the page (at least, it should). The wrapper has the custom-html-widget class. It should look like here on the left bottom of the page (this is not WordPress, just an example).

Thank you!

[David]

Not sure why it won’t fire from the widget – it may be a case it has to be fired in the root of the document unless a customElementId is targeted.

Why not use a GP Hook Element, and hook it in to the wp_footer ? It should work using that method.

[mkjj]

Hi David,

this was my first idea. But the AB-test plugin does not “see” GP elements. This is a custom post type, isn’t it? There is a test included for custom post types, but GP elements aren’t available there. I will contact the developer and keep you posted.

Thanks, Mike

[David]

That plugin may no see the gp_element post type as its not ‘public’

See here:

https://generatepress.com/forums/topic/yoast-settings-in-elements-page/#post-2492817

[mkjj]

OK, I finally got it to work. That took some doing! I registered a new widget area and call it right before the closing BODY tag. Now, I can run a widget test. This seems to work fine.

I post the code for those who might be interested. But this is a pretty specific issue, and GP did not cause these problems. Anyway, here are the snippets.

For the functions.php

function register_custom_widget_area()
{
	register_sidebar(
		array(
			'id' => 'new-widget-area',
			'name' => 'A/B-Test',
			'before_widget' => '<div class="ab-test-widget">',
			'after_widget' => '</div>'
			)
		);
	}
add_action('widgets_init', 'register_custom_widget_area');

For the footer.php (or even better would be a hook element):

if (is_active_sidebar('new-widget-area')) :
dynamic_sidebar('new-widget-area');
endif;

Thank you, Mike

[mkjj]

I prefer a hook element over modifications of template files. But since I have DISALLOW_FILE_EDIT always enabled, I needed a shortcode. This goes in the functions.php

function ab_widget_area()
{
	ob_start();
	if (is_active_sidebar('new-widget-area')) :
		dynamic_sidebar('new-widget-area');
	endif;
	return ob_get_clean();
}
add_shortcode('ab-widget-area', 'ab_widget_area');

Now, I can call the new widget area using [ab-widget-area] without touching the footer.php. Not sure that buffering the output is needed here, but it will not hurt, I guess.

[mkjj]

And OF COURSE you guys offer an even better solution.

add_filter( 'generate_hooks_execute_php', '__return_true' );

Awesome! You keep surprising me. And I don’t say this lightly. 🙂

[David]

Thats great – glad to see you got it working, and thanks sharing how 🙂

[Author]

Posts