Audio player fails when choosing variant

  • Posts: 46
  • Thank you received: 0
  • Hikashop Business
5 years 5 months ago #299425

-- url of the page with the problem -- : www.edsmusic.nl/bestel-jingles-online/pr...117-robovoice-jingle
-- HikaShop version -- : 3.3.0
-- Joomla version -- : 3.8.13
-- PHP version -- : 7.2.9
-- Browser(s) name and version -- : Chrome

Hi,

On this forum I've read something about this issue, but is was not clear for me. In my online shop I offer custum made jingles for radio and other shows. For every kind of jingles there are some variants. In the standard version of the product (see www.edsmusic.nl/bestel-jingles-online/pr...117-robovoice-jingle ) the customer can play an example. But as soon the customer selects a variant, the audio can not be played anymore. In the past with flash players I did not have these issues, but now with HTML5 players I have these issues.
I hope that someone can tell me where I have to modify what and in what way. I can understand HTML and PHP just a little bit, but I am not a software engineer ;-).

Kind Regards,
Remko

Please Log in or Create an account to join the conversation.

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
5 years 5 months ago #299426

Hi,

The issue is that your audio player initialize the audio elements on the page just after the page has been initialized thanks to the code:

jQuery(window).ready(function(){
		jQuery('audio').mediaelementplayer();
	});
in the file www.edsmusic.nl/plugins/content/sudesign...nt-and-player.min.js
However, when you select a different variant and HikaShop copies the HTML of the description of the variant to the main description area, the audio player is not initialized for these copied HTML elements, only the original ones.

So to fix the problem, you need to add some javascript code to the product page to call again jQuery('audio').mediaelementplayer(); after the variant HTML has been refreshed.
HikaShop has a trigger for that: hkContentChanged, so you can write such javascript code:
if(window.Oby && window.Oby.registerAjax) window.Oby.registerAjax(['hkContentChanged'], function(params){
	jQuery('audio').mediaelementplayer();
});
Ideally, the plugin developer might want to add that bit of code in his plugin javascript so that it would work for anyone else wanting to use that plugin with HikaShop with variants.

Please Log in or Create an account to join the conversation.

  • Posts: 46
  • Thank you received: 0
  • Hikashop Business
5 years 5 months ago #299486

Hi,

Thanks for your quick reply. Good to read that there should be a solution for this issue.
It was not clear for me where I have to to copy and paste the code. So I tried different things, but I'm afraid not the right thing ;)
I copied the code:

if(window.Oby && window.Oby.registerAjax) window.Oby.registerAjax(['hkContentChanged'], function(params){
	jQuery('audio').mediaelementplayer();
});
...and pasted in the mediaelement-and-player.min.js (I tried at the begin, at the end, between the <?php tags and outside these tags). I also tried to paste it in the product show at views and between {source} tags (of the sourcerer plugin) of the product page and one of the variants.... But no success....

Can you please tell me where to paste that code? Is it correct that there are two && in the code?

With kind regards,
Remko

Last edit: 5 years 5 months ago by Remko.

Please Log in or Create an account to join the conversation.

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
5 years 5 months ago #299490

Hi,

In the js file of the plugin you're using at the end should be fine. Note however that once you do that, you need to clear the cache of your browser, or you won't see the change.
And yes, && is correct. It means "AND" in most programming languages, including javascript.

Please Log in or Create an account to join the conversation.

  • Posts: 46
  • Thank you received: 0
  • Hikashop Business
5 years 5 months ago #299535

Hi,

I just copied and pasted the code in the script at www.edsmusic.nl/plugins/content/sudesign...nt-and-player.min.js . After that I cleared the cache of my Chrome internetbrowser. Unfortunately the issue still exist....
Can you see what I did wrong?

Please Log in or Create an account to join the conversation.

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
5 years 5 months ago #299538

Hi,

You did nothing wrong.
I had a look on your website and it seems that the issue is that a player cannot be reinitialized on a HTML player that was already initialized with the player you're using.
So instead of jQuery('audio').mediaelementplayer(); some other code would have to be written, but I don't know which one as I'm not familiar with the player used by your plugin.
The best would be to check with the developer of the plugin what they propose.

Please Log in or Create an account to join the conversation.

  • Posts: 46
  • Thank you received: 0
  • Hikashop Business
5 years 4 months ago #300223

Hi Nicolas,
Before I check with the developer of the audio player plugin, I like to check with you if you know other plugins (no flash) for playing mp3 files. I yes, I like to know which player you recommend.
If no, is it possible to integrate an audio player in HikaShop. Or do you have other suggestions to play audiofiles on product pages?

With Kinde Regards,
Remko

Please Log in or Create an account to join the conversation.

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
5 years 4 months ago #300227

Hi,

I know there are several of them working with HikaShop. Now this one is also working with HikaShop.
But I don't know at all which one would be working with the way the characteristic system in HikaShop refreshes the HTML.
Besides testing them one by one ( you can find most of them here extensions.joomla.org/tags/audio-players-gallery/ ), it will be hard to say.

The following user(s) said Thank You: Remko

Please Log in or Create an account to join the conversation.

Time to create page: 0.069 seconds
Powered by Kunena Forum