PluginUs.Net - Business Tools for WooCommerce and WordPress

[realize your idea - make your dreams come true]
Botoscope is currently in early access

Support Forum

You need to log-in to create request (topic) to the support

Composite products spinner never stops when Fox is activated

The support doesn work on Saturdays and Sundays, so some Friday requests can be answered on Monday. If you have problems with registration ask help on contact us page please
If you not got email within 24~36 business hours, firstly check your spam box, and if no any email from the support there - back to the forum and read answer here. DO NOT ANSWER ON EMAILS [noreply@pluginus.net] FROM THE FORUM!! Emails are just for your info, all answers should be published only here.
The support doesn work on Saturdays and Sundays, so some Friday requests can be answered on Monday.
Support notice: Our support team will be on vacation from August 8 to September 3, so response times may be delayed and replies may be irregular.
12

I am running FOX - Currency Switcher v1.4.9, composite products plugin 11.0.7 and woocommerce  Version 10.9.4.

On the front end, when I go to choose a component from a composite product that is optional, it lets me make my choice, but it leaves the spinner spinning. This is disconcerting since it makes it look like the site is still working but it isn't. Whatever is supposed to turn off the spinner isn't working it seems. Our live site product page exhibits the behavior here: https://northarmknives.com/product/lynx-hunting-knife-with-kydex-sheath  for the"Carry Type" component.

If i disable Fox, the spinner doesn't keep turning.

 

 

Hello John

Thanks for the clear report and the live URL, that helps a lot. I was able to reproduce the stuck spinner on your product page for the"Carry Type" component, and I can confirm it happens only while FOX is active, so we definitely need to get to the bottom of it.

To diagnose this properly I need to test on a copy of your site rather than the live one, so I can switch the theme, toggle options and disable other plugins one by one without disturbing your shop or your customers. The stuck spinner can come from the theme, from another script that hooks into the component selection, or from the way FOX redraws prices when a cache mode is used, and the only reliable way to tell these apart is to test on your actual setup.

Could you please:

1. Create a staging copy of this live site (most hosts offer a one-click staging clone; if yours does not, a manual clone to a subdomain is fine).
2. Make sure FOX - Currency Switcher is updated to the latest version on that staging copy.
3. Post the access to that staging site in the private area of this ticket: FTP or SFTP details plus a wp-admin login.

Once I have that, I will run the tests there (theme switch, plugin-by-plugin check, and the FOX cache-related options) and report back with what is keeping the spinner on and how to fix it.

Please put the credentials only in the private section of this ticket, not in a public reply. Then write here short message that you did it.

https://share.pluginus.net/image/i20230222134241.png
https://share.pluginus.net/image/i20230222134615.png

Hi Alex,

Thanks for your analysis so far. I prefer not to create a staging site except for major overhauls. We are on AWS lightsail and staging a new site is no small thing.

But I am willing to try out suggestions you may have if they are reasonable to do while I have the site closed briefly for maintenance. This morning I did switch temporarily to the storefront theme and the behavior is the same.

If I could revert safely back to an older version of Fox, I'd be willing to install and try it. It feels like this happened relatively recently in the last couple of months or so.

Thanks,

John

Hello John

That is fair, and thanks for testing the theme already. Switching to Storefront and seeing the same behavior rules out the theme, which is useful. Let us drop the staging idea and work with what you have.

Two things I would like to ask you for.

First, the rollback. You are on the free line of the plugin, so previous versions are available directly from WordPress.org. The safest way to do it:

Install the free plugin WP Rollback from Plugins, Add New. It adds a Rollback link under each plugin and does the swap in place, keeping your settings.
Roll FOX back to 1.4.7 and test the Carry Type component again. If the spinner behaves, roll forward to 1.4.8 and test again. That gives us the exact release where it broke.
Please do not deactivate and delete the plugin to downgrade. Deleting can run the uninstall routine and clear your currency settings. Rollback or an overwrite install keeps them.
While testing, turn off automatic updates for FOX on the Plugins screen, otherwise WordPress may quietly put 1.4.9 back and the test result will be misleading.

If you prefer not to install another plugin, you can also download an older version manually from the Advanced View section at the bottom of the plugin page on WordPress.org, then upload it through Plugins, Add New, Upload Plugin. WordPress will offer to replace the current version with the uploaded one.

Second, Composite Products. I do not have a license for it, so I cannot reproduce your exact setup on my own installation, and that is the piece I am missing. Since you own it, could you download the plugin zip from your WooCommerce.com account and put a link to it in the private section of this ticket. Please send the plugin file only!

https://share.pluginus.net/image/i20230222134241.png
https://share.pluginus.net/image/i20230222134615.png

With that I can build a copy of your combination locally, Composite Products 11.0.7 plus FOX, and trace what happens when an optional component is selected.

One more small thing that would speed this up a lot, and takes half a minute. On the product page, open your browser console, F12, then the Console tab. Select an option in Carry Type and see if a red error appears. If it does, copy the full text including the file name and line and paste it here. A spinner that never stops usually means a script threw an error partway through the update, and the error text tells us immediately whose script it was.

 

 

Rollback with the plugin to 1.4.7 didn't help. I then installed 1.4.9 and that didn't change anything either. After doing that, rollback to 1.4.8 and 1.4.2 were the only options. I can't actually be sure I tried 1.4.7 now that I think of it. Anyway, I also updated to the latest composite products 11.1.0. Still the same.

I provided the private link to the latest composite products zip file.

No red messages appeared on the console when selecting a carry component.

Thanks Alex. I hope this helps.

Hello John

Thank you for the rollback tests and for checking the console. The absence of any red error is actually an important clue, and together with the markup on your page it gives us the full picture.

What is happening

The spinner you see is ours, not from Composite Products. It is the FOX price preloader. It appears as a CSS animation attached to every price that FOX renders while two options are enabled in the plugin settings: the one that says you are using a cache plugin on your site, and the preloader option that belongs to it.

The idea behind it is this. When your pages are cached, the HTML can be served to a visitor with prices that were generated for somebody else, possibly in another currency. So FOX marks every price with a small spinner, then immediately after the page loads it asks the server for the correct prices, replaces them, and removes the spinner. On a normal product page this happens within a fraction of a second and nobody notices it.

Why it never stops on a composite product

Composite Products does not print the component data into the page. When you pick an option in a component, it makes its own AJAX request and inserts the returned markup into the page afterwards. That markup already contains the FOX price with the spinner class on it, because the server generated it the same way it generates any other price.

The problem is timing. The FOX refresh pass runs once, right after the page is ready. By the time Composite inserts your component, that pass is long finished. Nothing runs a second time, so that particular price keeps its spinner forever. There is no error anywhere, which is exactly why your console stayed clean, and it is also why rolling FOX back did not change anything. The behaviour is not new, it only becomes visible in combination with a plugin that loads its content later.

What we propose

Below is a small snippet you can add to your site. It watches the component drop-down and the AJAX request that Composite Products makes, and when new prices appear on the page it asks FOX to refresh them and clears the spinner. Please add it through the functions.php of your child theme, or through a code snippet plugin if you prefer, then clear any caching layer you have.

add_action( 'wp_footer', function () {

	if ( ! function_exists( 'is_product' ) || ! is_product() ) {
		return;
	}
	?>
	<script>
	(function ( $ ) {

		var woocs_url = ( typeof woocs_ajaxurl !== 'undefined' )
			? woocs_ajaxurl
			: ( window.wc_add_to_cart_params ? wc_add_to_cart_params.ajax_url : '/wp-admin/admin-ajax.php' );


		function woocs_redraw_composite_prices() {

			var $stale = $( '.woocs_price_code.woocs_preloader_ajax[data-redraw-id]' );

			if ( ! $stale.length ) {
				return;
			}

			var ids = {};

			$stale.each( function () {
				var $item = $( this );
				if ( $item.data( 'product-id' ) ) {
					ids[ $item.data( 'redraw-id' ) ] = $item.data( 'product-id' );
				}
			} );

			if ( $.isEmptyObject( ids ) ) {
				$stale.removeClass( 'woocs_preloader_ajax' );
				return;
			}

			$.post( woocs_url, {
				action:       'woocs_get_products_price_html',
				products_ids: ids
			}, function ( data ) {

				if ( typeof data === 'string' ) {
					try { data = JSON.parse( data ); } catch ( e ) { data = {}; }
				}

				if ( data && data.ids ) {
					$stale.each( function () {
						var $item = $( this ),
						    html  = data.ids[ $item.data( 'redraw-id' ) ];

						if ( typeof html !== 'undefined' ) {
							$item.replaceWith( html );
						}
					} );
				}

				// The fresh HTML carries the preloader class as well, and nothing
				// may keep spinning in any case.
				$( '.woocs_price_code' ).removeClass( 'woocs_preloader_ajax' );
			} );
		}

		// Trigger 1: the component drop-down itself
		$( document.body ).on( 'change', 'select.component_options_select', function () {
			setTimeout( woocs_redraw_composite_prices, 500 );
		} );

		// Trigger 2: right after Composite finished loading the component data
		$( document ).ajaxComplete( function ( event, xhr, settings ) {

			if ( ! settings ) {
				return;
			}

			var url  = settings.url || '',
			    data = ( typeof settings.data === 'string' ) ? settings.data : '';

			if ( url.indexOf( 'woocommerce_show_composited_product' ) !== -1
				|| data.indexOf( 'woocommerce_show_composited_product' ) !== -1 ) {
				setTimeout( woocs_redraw_composite_prices, 150 );
			}
		} );

	})( jQuery );
	</script>
	<?php
}, 99 );

This is a temporary measure for your site. We will change the plugin itself so that the preloader is not attached to prices that are generated during an AJAX request, and so that the refresh also picks up content inserted after page load. Once that release is out you can remove the snippet.

One thing you can do right now, without any code

In the FOX settings, turn off the preloader option. The spinner will disappear everywhere and prices will still be refreshed. If the visual indicator is not important to you, this alone solves the complaint today.

What would help us

Please try a few combinations and tell us what you see, it will take a few minutes and it will tell us how deep the fix needs to go.

First, please check the storage type in the FOX settings. Try Transient, and then try FOX Session, and in each case test the component again. Transient is the cleanest one for us to reason about, because whatever the server returns is exactly what you get, with no session state in between.

Second, in each of those cases try it once with the cache option enabled and once with it disabled. With the cache option off, the preloader is never attached at all and prices are rendered directly by the server. That combination may work perfectly for you, but be aware it is the option that protects your visitors from seeing another visitor's currency on a cached page, so please treat that only as a test rather than a permanent setting.

Third, and this is the most important one for us: after you select an option in a component, please confirm that the price shown next to it is in the currency you actually selected. In the markup we looked at, one case showed USD. If you had CAD selected at that moment, then there is a second issue underneath the spinner and we need to know about it. If you had USD selected, then everything is behaving correctly and only the spinner is stuck.

Please let us know the results and we will take it from there.

Hi Alex,

Thanks for the excellent assessment. I tried the case you mentioned. I first set session storage to transient then checked spinner behavior with and without cache. I saw the following:

  • with cache: (my normal config; we use the cache that's part of wp optimize plugin)) purple spinner sticks after selection of an option
  • without cache: no purple spinner

Then with Fox session currency storage I saw:

  • with cache: purple spinner
  • without cache: no purple spinner

Overall observed the following:

  • there is a grey spinner with a white dot in all cases (from composite products, I presume). That suggests that you could just eliminate using the purple spinner, at least with composite products
  • I did not see any case during this test where the wrong currency was set in any of the 4 cases above. But I think I have observed certain odd cases where the switcher hangs during a switch (both CAD and USD highlighted) but ultimately fails.
  • In the carry options (which are optional add-ons) the currency code is not displayed (ie CAD or USD) whereas for the knife handle component does have it (man this is complex!)
  • The price total at the bottom of any product page also does not show the currency code
  • I did observe during the test that the little maps on the switcher widget stop being centered. I later saw that clearing the cache for all pages immediately caused the maps to go off center. The browser back button seemed to fix it.
  • for now I have disabled the prices preloader to stop the purple spinner.
  • the snippet code you sent did not seem to work as far as getting rid of the pruple spinner

John

Hello John

Thanks for running those tests, they told us a lot. Your results confirm the diagnosis: the spinner depends only on the cache related options and not on the storage type, and the currency was correct in every combination you tried. So there is nothing else hiding under the spinner.

One caveat before you settle on the current setup. The"I am using cache plugin" mode and its preloader exist for a specific job. When your pages are served from a cache the HTML is frozen: it was generated once, for one visitor, in one currency, and every later visitor receives that same frozen copy. FOX therefore hides those frozen prices behind the spinner and immediately asks the server for the correct ones over AJAX, then swaps them in. With the preloader switched off that protection is not in place, and once your caching is working at full strength the behaviour becomes unpredictable, up to a visitor being shown a price in somebody else's currency.

So we would like you to turn the cache option and the preloader back on, and add the following script to your site, either in the functions.php of your child theme or through a code snippet plugin. It watches only the Composite Products area and clears a spinner that has been left hanging there, without interfering with the normal price refresh anywhere else on the page.

add_action( 'wp_footer', function () {

	if ( ! function_exists( 'is_product' ) || ! is_product() ) {
		return;
	}
	?>
	<script>
	(function ( $ ) {

		// Watch only inside Composite Products containers, so that this never
		// races or duplicates FOX's own on-ready price redraw pass.
		var SCOPE     = '.composite_form';
		// FOX starts its own pass at ~300ms after ready and clears the class itself.
		// Anything still spinning after this delay was injected later by Composite
		// and will never be reached by that pass.
		var STALE_MS  = 2000;
		var CHECK_MS  = 400;

		// Element -> timestamp when it was first seen still spinning.
		var seen = new WeakMap();

		function release_stuck_preloaders() {

			var now = Date.now();

			$( SCOPE ).find( '.woocs_price_code.woocs_preloader_ajax' ).each( function () {

				var el = this;

				if ( ! seen.has( el ) ) {
					seen.set( el, now );
					return;
				}

				if ( now - seen.get( el ) < STALE_MS ) {
					return;
				}

				// The markup came from a live AJAX request, so the price inside is
				// already rendered in the visitor's currency - it is only hidden by
				// the preloader class. Revealing it is enough, no refetch needed.
				$( el ).removeClass( 'woocs_preloader_ajax' );
				seen.delete( el );
			} );
		}

		setInterval( release_stuck_preloaders, CHECK_MS );

	})( jQuery );
	</script>
	<?php
}, 99 );

 

After adding it, clear your caching layer and test the Carry Type component again.

If that still does not solve it, the next step is a copy of the site. A staging clone lets us reproduce your exact setup and fix this properly for the cached mode. We would work there with functions.php and this script so that the refresh happens correctly in that mode, and nothing we do can touch your shop. Please post the access in the private area of the ticket once it is ready.

If a clone is genuinely not possible we can work on the live site instead, but only after you have taken a full backup first. As this is a live shop taking orders, we would strongly prefer the clone.

On access: you do not need to send us FTP just to try the script above, since enabling the option and pasting the snippet can both be done from wp-admin. FTP would only be needed for the deeper work on the clone.

https://share.pluginus.net/image/i20230222134241.png
https://share.pluginus.net/image/i20230222134615.png

Hi Alex,

I re-enabled the price preloader setting and added the snippet. It works as expected: the purple spinner is turned off and price displayed after 2 seconds. And other products seem to behave fine.

Just so you know, that 2 second wait is pretty long-feeling when other composite product selections that are not optional happen basically instantaneously. I observe that the gray circle spinner goes away after about a second or less while the Fox purple spinner lingers for the full 2 seconds. I assume you will aim to turn off the purple spinner ASAP rather than waiting a safe time (2000ms) in the final code. Do you have any idea why the composite product options that are not optional (eg handle colour; you must pick one, not zero, of the choices) are so fast while the truly optional components introduce a greater time delay?

Hello John

Glad it works.

The two seconds are not Composite Products, they are mine. I put that wait into the script so it could not collide with FOX's own price refresh. You can shorten it: in the snippet find the line

var STALE_MS = 2000;

and change the number, 800 is a good starting point. Save, clear your cache, test again. If you ever see a price flash briefly in the wrong currency on first load, raise it back up a little. Nothing else in the script needs touching.

As for your question. A required component has a default option, so its price is already in the page when the page loads. FOX runs its refresh once just after load, catches that price and clears the spinner. The work is done before you touch anything, which is why it feels instant.

An optional component starts with nothing selected, so there is no price in the page yet. Your first pick fetches it from the server, and it arrives with the preloader class on it like any other price. By then FOX's refresh has already finished and does not run again, so that one keeps spinning. The component is not slower, it is simply missed.

Hi Alex,

Some quick points:

  • I updated to v1.5.1 and noticed that the composite product pricing stopped responding to the currency selected, even thought the main product price changed between CAD and USD. The component costs stayed at the store currency (CAD). The prices displayed for the carry options were always shown in CAD before and after one was selected. So I rolled back to 1.4.9 and it works as expected.
  • your comment above that"The two seconds are not Composite Products, they are mine." Yes I saw that in the snippet. But I was making a point that the composite products also show a spinner (a gray circle with white ball inside) that activates after a component selection is made. It is not covering the price display as yours does, but it looks like it runs about 800msec before it disappears. I was just suggesting that maybe it's finishing could trigger the end of your spinner rather than having a timer. Or maybe comp products code leaves the price field blank until it's ready to display something and th your spinner may not be needed? Also, at least in my setup, the carry options already have USD or CAD prices when I go to choose one, so maybe they are already available without a lookup on the server? I'm totally speculating here. Just thought I'd mention those things. Your help much appreciated!

Hello John

Quick question before I go further. I can see you are back on 1.4.9.

On the FOX Options tab, could you tell me two settings as they are right now:

  1. Currency storage — Transient or FOX Session?
  2. Is"I am using cache plugin on my site" enabled?

That combination decides which code path runs, so it will point me straight at the cause.

Heh Alex,

I have storage set to Transient

I have the cache setting on, as well as the prices preload setting below it

Good luck!

Hi John

I would like to sort this out properly rather than leave you sitting on 1.4.9, because that also means you will not be able to take future updates cleanly.

Two options, whichever suits you better.

Option one, a staging copy. Clone the site, put FTP or SFTP access plus a wp-admin login in the private area of this ticket, and I will work there without touching your shop at all.

Option two, if a clone is not practical for you. Give me FTP access directly, limited to my own plugin folder, or to the plugins folder if that is easier to set up. Please take a full backup of the site first, since this is a live shop.

In either case please leave the settings exactly as they are now, Transient storage with the cache option enabled. That combination is the one I need to test against, so please do not change it before I get in.

Please post the access only in the private section of this ticket, then write a short note here so I know it is there.

p.s. use for wp-admin & ftp ONLY secret area of this ticket

Hi Alex,

I am extremely busy running our business. I don't have time to set up the clone site or properly control linux directory permissions etc. Additionally, I feel very uncomfortable giving out credentials, so consider access to our server off-bounds.

I did test with a different theme and it made no difference, so I think all you should need is the composite products plugin (I sent you the zip) woocommerce, WP Optimize (with cache turned on) and your plugin to test this behavior (obviously a 2 or 3  of products one of which is a composite with an optional component). I know that woo has other bundle type plugins beside composite products and they probably all should be tested for compatibility with Fox. Maybe those developer will allow you free licences for your testing?

I am fine holding off upgrading FOX beyond 1.4.9 as long as needed. No pressure from me. And I am willing to continue answering questions or trying stuff, within reason.

 

Hello John

Thank you for all the testing and for the detailed feedback throughout this ticket, it was genuinely useful and it helped us understand what is going on.

I fully respect your position on server access, and we will not ask for it again.

I have created an internal task for this, but I cannot give you a date for it yet. It is not a quick fix and it needs proper testing on our side, so the time of the update is undefined for now.

Staying on 1.4.9 is fine in the meantime. I will let you know here once there is a version you can safely update to.

Thanks again for your cooperation!

 

Hi Alex,

Of all the areas of WordPress, the store functions must be amongst the most complex (and probably hacky) functions, since they are touched by everything. So I appreciate that a currency switcher is deceptively tricky. I really appreciate how you care about what you are doing. It's not that common anymore. I'll stick with 1.4.9 for the foreseeable future. Let me know if I can help or test anything.

Take care,

John

Hello John

Thank you for your words ❤️

I have now created a staging site to help with debugging. Access info in private area of ticket.

Hello John

I just installed latest but not yet published version of the plugin on the staging site and looks like it works:

Please do tests. It is the same issue as it described here: https://pluginus.net/support/topic/cache-setting-not-working/?part=2

 

12