Sort Services Alphabetically

Hi @csn123,

That’s a good question. To sort these <details> elements in the [cmplz-cookies] shortcode in alphabetical order, you could apply some JavaScript.

I have a PHP filter that will achieve this exact result. You can copy the code listed below and paste it in a new .php file. Then upload that PHP file to the folder /wp-content/mu-plugins/ for it to take effect (please see this article for detailed instructions on installing MU Plugins).

A live example can be seen here: https://arrr-see.instawp.xyz/cookie-policy-eu/

<?php
function cmplz_sort_cookie_list_alphabetically() {
	ob_start(); ?>
    <script>
if ( document.querySelector('.cmplz-document.cookie-statement') ){
// Get a reference to the container element that holds the <details> elements
const container = document.getElementById("cmplz-cookies-overview");

// Get an array of all the <details> elements
const details = container.querySelectorAll("details");

// Sort the <details> elements according to their text content
const sortedDetails = [...details].sort((a, b) => {
  const textA = a.textContent.toUpperCase();
  const textB = b.textContent.toUpperCase();
  if (textA < textB) return -1;
  if (textA > textB) return 1;
  return 0;
});

// Remove the <details> elements from the container
details.forEach(d => container.removeChild(d));

// Add the sorted <details> elements back to the container
sortedDetails.forEach(d => container.appendChild(d));    
}
</script>
	<?php
	$script = ob_get_clean();
	$script = str_replace(array('<script>', '</script>'), '', $script);
	wp_add_inline_script( 'cmplz-cookiebanner', $script);
}
add_action( 'wp_enqueue_scripts', 'cmplz_sort_cookie_list_alphabetically', PHP_INT_MAX );

Kind regards,
Jarno

I was hoping these was a shortcode parameter hidden inside that would allow sorting server-side, but beggars cannot be choosers and this JS script works perfectly.