2023 seems to change & to #038; in inline JS code

99w
(@ninetyninew)

1 year ago
When using the twentytwentythree theme and WooCommerce if I insert some code like this (just a quick example):
```
  <script>
    $( document ).ready(function() {
      url = '';
      url += '?test=1'
      url += '&something=1' // Ampersand here becomes #038; on some hosts
      $( '#select option' ).val( url );
    });
    $( document ).on( 'change', '#select', function( e ) {
            window.location = $( this ).val();
        });
  </script>

  <select id="select">
    <option value="">Test</option>
    <option value="">Test</option>
  </select>
```
Via the woocommerce_after_add_to_cart_quantity hook, it changes the ampersands in the URL we are building to add to an option value from & to #038; resulting in not being able to use the $_GET via PHP correctly, if I switch to another theme those URLs aren’t changed, why is twentytwentythree doing this different? What is causing this?

Viewing 4 replies - 1 through 4 (of 4 total)

Thread Starter 99w
(@ninetyninew)

1 year ago

I believe this is related: https://core.trac.wordpress.org/ticket/45387#comment:11

Moderator jordesign
(@jordesign)

1 year ago

Hi @ninetyninew,

In order to have a better idea of when/how this is happening it would help to know a little more information.

if I insert some code like this (just a quick example):

Could you tell me a little more how you’re adding this code to the hook? Is this via a plugin, or through edits to the theme itself?

Thread Starter 99w
(@ninetyninew)

1 year ago

For this example we created a plugin and added that code within it. In the good old days we would have added something like this in functions.php, but this no longer exists in this theme.

On further investigation it appears the issue I am seeing is happening on all block based themes. The code seems to work fine on classic themes.

For client site builds we try to stay away from block themes – instead using our own purpose built classic theme, but it would be useful to know why this is occurring for future reference.
Nick Diego
(@ndiego)

1 year ago
Hi @ninetyninew,

I just tested this in Twenty Twenty-Three (TT3), and I am not able to replicate this issue. Here are my testing steps.
1. I added a functions.php file to TT3.
2. I added the code snippet below to the file.
3. I checked that the & remained on the frontend.
```
function tt3_woo_add_to_cart_filters() {
    ?>
        <script>
            jQuery(function($) {
                $( document ).ready(function() {
                    url = '';
                    url += '?test=1'
                    url += '&something=1'
                    $( '#select option' ).val( url );
                });
                $( document ).on( 'change', '#select', function( e ) {
                    console.log( $( this ).val() );
                });
            });
        </script>

        <select id="select">
            <option value="">Test 1</option>
            <option value="">Test 2</option>
        </select>
    <?php
}
add_action( 'woocommerce_after_add_to_cart_quantity', 'tt3_woo_add_to_cart_filters' );
```
Testing environment:
- WordPress 6.2
- Gutenberg 15.5
- Local site using LocalWP
Results:

Is there any additional information you could share to help try and replicate this issue? If you have a working demo plugin that you could share, that would also be helpful.

Thanks!