Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Audio shortcode in Variation Description only renders browser's default audio player #24417

Closed
melek opened this issue Aug 16, 2019 · 3 comments · Fixed by #25103
Closed

Audio shortcode in Variation Description only renders browser's default audio player #24417

melek opened this issue Aug 16, 2019 · 3 comments · Fixed by #25103
Assignees
Milestone

Comments

@melek
Copy link

@melek melek commented Aug 16, 2019

Describe the bug
When using an [audio] shortcode in a variation description, the shortcode is rendered on the front end with the browser's default player rather than the WordPress/mejs player.

To Reproduce
Steps to reproduce the behavior:

  1. Install WooCommerce
  2. Create a Variable Product
  3. Add a variation and an [audio] shortcode to the variation description
  4. See error

Screenshots
This screenshot shows how the Short Description will render the correct player, but the Variation Description does not:
image

Expected behavior
I expect the Variation Description to use the same mejs/WordPress player.

Isolating the problem (mark completed items with an [x]):

  • I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
  • This bug happens with a default WordPress theme active, or Storefront.
  • I can reproduce this bug consistently using the steps above.

WordPress Environment


### WordPress Environment ###

WordPress address (URL): http://enthusiastic-ant.w6.poopy.life
Site address (URL): http://enthusiastic-ant.w6.poopy.life
WC Version: 3.7.0
REST API Version: ✔ 1.0.2
Log Directory Writable: ✔
WP Version: ❌ 5.1.1 - There is a newer version of WordPress available (5.2.2)
WP Multisite: –
WP Memory Limit: 512 MB
WP Debug Mode: –
WP Cron: ✔
Language: en_US
External object cache: –

### Server Environment ###

Server Info: Apache/2.4.26 (Red Hat)
PHP Version: 7.1.20 - We recommend using PHP version 7.2 or above for greater performance and security. How to update your PHP version
PHP Post Max Size: 256 MB
PHP Time Limit: 600
PHP Max Input Vars: 3000
cURL Version: 7.60.0
OpenSSL/1.0.2k

SUHOSIN Installed: –
MySQL Version: 5.5.56-MariaDB
Max Upload Size: 256 MB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ❌ Your server does not have the SoapClient class enabled - some gateway plugins which use SOAP may not work as expected.
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

### Database ###

WC Database Version: 3.7.0
WC Database Prefix: wp_
MaxMind GeoIP Database: ✔
Total Database Size: 3.07MB
Database Data Size: 2.10MB
Database Index Size: 0.97MB
wp_woocommerce_sessions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_order_itemmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_comments: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_options: Data: 1.52MB + Index: 0.02MB + Engine InnoDB
wp_postmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_posts: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_term_relationships: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_term_taxonomy: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_usermeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_product_meta_lookup: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wp_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB

### Security ###

Secure connection (HTTPS): ❌
					Your store is not using HTTPS. Learn more about HTTPS and SSL Certificates.
Hide errors from visitors: ✔

### Active Plugins (2) ###

Sandbox: by Soflyy – 1.1.6
WooCommerce: by Automattic – 3.7.0

### Inactive Plugins (0) ###


### Settings ###

API Enabled: –
Force SSL: –
Currency: GBP (£)
Currency Position: left
Thousand Separator: ,
Decimal Separator: .
Number of Decimals: 2
Taxonomies: Product Types: external (external)
grouped (grouped)
simple (simple)
variable (variable)

Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
exclude-from-search (exclude-from-search)
featured (featured)
outofstock (outofstock)
rated-1 (rated-1)
rated-2 (rated-2)
rated-3 (rated-3)
rated-4 (rated-4)
rated-5 (rated-5)

Connected to WooCommerce.com: –

### WC Pages ###

Shop base: ❌ Page not set
Cart: ❌ Page not set
Checkout: ❌ Page not set
My account: ❌ Page not set
Terms and conditions: ❌ Page not set

### Theme ###

Name: Twenty Seventeen
Version: 1.5 – 2.2 is available
Author URL: https://wordpress.org/
Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme
WooCommerce Support: ✔

### Templates ###

Overrides: –

### Action Scheduler ###

Complete: 1
Oldest: 2019-08-16 18:14:10 +0000
Newest: 2019-08-16 18:14:10 +0000

Pending: 0
Oldest: –
Newest: –

Canceled: 0
Oldest: –
Newest: –

In-progress: 0
Oldest: –
Newest: –

Failed: 0
Oldest: –
Newest: –

@melek

This comment has been minimized.

Copy link
Author

@melek melek commented Aug 16, 2019

I've tried to look into the issue; I figure the issue is that since the content is loaded after page load, the mejs script doesn't go over the variation descriptions so the fallback html output is left unchanged.

My challenge is I'm not familiar enough with WooCommerce to know where to make the correct change. I looked at the fix for rendering shortcodes & html in variation descriptions (Pull 14048) without seeing an obvious place to start working.

I also found a stack overflow answer on rendering mejs elements in WordPress after page load, but not sure how to implement it in WooCommerce or if it is the best approach here (Link)

That's as far as I've been able to get on my own, unfortunately.

@WillBrubaker

This comment has been minimized.

Copy link
Contributor

@WillBrubaker WillBrubaker commented Aug 18, 2019

I figure the issue is that since the content is loaded after page load, the mejs script doesn't go over the variation descriptions so the fallback html output is left unchanged.

Right, so some custom JavaScript is probably going to need to be created - something that fires on the show_variation event and then runs something similar to what is run when the mediaelement js initializes

@melek

This comment has been minimized.

Copy link
Author

@melek melek commented Dec 3, 2019

Thanks so much!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

5 participants
You can’t perform that action at this time.