Console errors just on my posts

Hi,

Using Algolia search plugin on my woocommerce site and it works well except on my (blog) post pages. Every time I search and trigger Algolia’s autocomplete I get console errors - algoliasearch is not defined. I’ve spoken to their support team who advised adding:

<script src="<?php echo ALGOLIA_PLUGIN_URL . 'js/algoliasearch/dist/algoliasearch-lite.umd.js'; ?>"></script>
<script src="<?php echo ALGOLIA_PLUGIN_URL . 'js/autocomplete.js/dist/autocomplete.min.js'; ?>"></script>
<script src="<?php echo ALGOLIA_PLUGIN_URL . 'js/autocomplete-noconflict.js'; ?>"></script>

I added this to the footer as suggested to temporarily see if it fixed the issue, but just results in a further error:

Uncaught TypeError: wp.template is not a function
    algolia_setup (index):1456
    algolia_setup (index):1455
    init common.js:89
    jQuery 10
    init common.js:73
    fire Router.js:38
    loadEvents Router.js:53
    <anonymous> main.js:96
    jQuery 13

Which is coming from slightly further down my autocomplete.php script. Seems like there is something wrong around the enqueueing of scripts but I have no idea what it could be. Weird how it’s only affecting my posts and not my pages, products or any of my other custom post types.

This is an example of a page where the issue is present - https://4x4tyres.co.uk/bfgoodrich-mud-terrain-tyres/

Does anyone have any ideas?

Hey @the_lar I guess you have to double check how and where you are loading your libraries, because just browsing your code any of your scripts are being loaded, look:

I guess there should be the three of them, but there’s none:

<script src="<?php echo ALGOLIA_PLUGIN_URL . 'js/algoliasearch/dist/algoliasearch-lite.umd.js'; ?>"></script>
<script src="<?php echo ALGOLIA_PLUGIN_URL . 'js/autocomplete.js/dist/autocomplete.min.js'; ?>"></script>
<script src="<?php echo ALGOLIA_PLUGIN_URL . 'js/autocomplete-noconflict.js'; ?>"></script>

That’s why is saying algolia is not declared, I hope this helps.

The fact that when you included the ‘algolia’ source manually it pushed the error on to another missing dependency (wp-util), makes me suspect there’s a plugin trying to do something clever with minification or inlining.

I can see you’re running Lightspeed cache and Cloudflare Rocket Loader. Have you tried disabling frontend caches and all minification / performance plugins, and then enabling progressively to find the culprit?

Hi guys, thanks for the replies.

I’ve done some digging on this and found that even when I completely deactivate Algolia plugin, there are still a bunch of scripts missing from my wp_footer call that should be there - but only on post types. So basically it’s not just an Algolia issue at all - it’s an issue that’s always been present on post types on my site, I’ve just never noticed before!

So in order to investigate I decided to deactivate ALL but my essential plugins leaving my roots/sage based theme active to try and see what’s going on.

My layouts/app.blade.php file has this at the bottom:

<!-- start wp_footer() -->
    @php wp_footer() @endphp
    <!-- end wp_footer() -->
  </body>

So with these HTML comments in place on my app template and with just my Sage theme and Woocommerce, ACF, Member, User Switching and Contact form 7 plugins activated… this is the relevant HTML that is produced by wp_footer() on my test post:

        <!-- start wp_footer() -->
    	<script type="text/javascript">
		(function () {
			var c = document.body.className;
			c = c.replace(/woocommerce-no-js/, 'woocommerce-js');
			document.body.className = c;
		})();
	</script>
	    <!-- end wp_footer() -->

As you can see, not much there at all!

And this is the HTML produced from wp_footer() from my homepage (page type):

    <!-- start wp_footer() -->
    	<script type="text/javascript">
		(function () {
			var c = document.body.className;
			c = c.replace(/woocommerce-no-js/, 'woocommerce-js');
			document.body.className = c;
		})();
	</script>
	<style id='core-block-supports-inline-css' type='text/css'>
/**
 * Core styles: block-supports
 */

</style>
<script type='text/javascript' src='//localhost:3000/app/plugins/contact-form-7/includes/swv/js/index.js?ver=5.8' id='swv-js'></script>
<script type='text/javascript' id='contact-form-7-js-extra'>
/* <![CDATA[ */
var wpcf7 = {"api":{"root":"https:\/\/localhost:3000\/wp-json\/","namespace":"contact-form-7\/v1"}};
/* ]]> */
</script>
<script type='text/javascript' src='//localhost:3000/app/plugins/contact-form-7/includes/js/index.js?ver=5.8' id='contact-form-7-js'></script>
<script type='text/javascript' src='//localhost:3000/app/plugins/woocommerce/assets/js/jquery-blockui/jquery.blockUI.js?ver=2.7.0-wc.8.1.1' id='jquery-blockui-js'></script>
<script type='text/javascript' id='wc-add-to-cart-js-extra'>
/* <![CDATA[ */
var wc_add_to_cart_params = {"ajax_url":"\/wp\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%","i18n_view_cart":"View cart","cart_url":"https:\/\/localhost:3000\/basket\/","is_cart":"","cart_redirect_after_add":"no"};
/* ]]> */
</script>
<script type='text/javascript' src='//localhost:3000/app/plugins/woocommerce/assets/js/frontend/add-to-cart.js?ver=8.1.1' id='wc-add-to-cart-js'></script>
<script type='text/javascript' src='//localhost:3000/app/plugins/woocommerce/assets/js/js-cookie/js.cookie.js?ver=2.1.4-wc.8.1.1' id='js-cookie-js'></script>
<script type='text/javascript' id='woocommerce-js-extra'>
/* <![CDATA[ */
var woocommerce_params = {"ajax_url":"\/wp\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%"};
/* ]]> */
</script>
<script type='text/javascript' src='//localhost:3000/app/plugins/woocommerce/assets/js/frontend/woocommerce.js?ver=8.1.1' id='woocommerce-js'></script>
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=AIzaSyDfHVajOB_Jna2xYINwnM_El_7we22lMz8&#038;libraries=places' id='google-maps-js'></script>
    <!-- end wp_footer() -->

You can see all the Woocommerce scripts and CF7 scripts are present - which is not the case on the post

So next I tried deactivating Sage and activating Storefront theme to see if it was the same - it wasn’t, with Storefront I am getting all of the wp_footer scripts on post types the same as on my homepage (which is a page type).

Next, after re-activating Sage, I added a breakpoint to line 3069 of /web/wp/wp-includes/general-template.php and changed code to:

ob_start();
do_action( 'wp_footer' );
$html_footer = ob_get_clean();

Weirdly, even on my test post when I hit the breakpoint in my IDE $html_footer is complete and appears to contain all of the scripts that it should do, Woocommerce scripts are there, as are CF7 scripts - it’s just not making it into the source code of the post itself it seems.

So at this point it ‘looks’ like a Sage Issue - but I really don’t know what it could possibly be?

Again, if anyone has any ideas, please help. Many thanks