Tengo un formulario de WooCommerce en las páginas de categoría que permite al usuario seleccionar la cantidad de productos que se mostrarán en la página. Los valores son 24, 48 y todos. Cuando se selecciona una de las opciones, se envía el formulario. El problema que tengo es que el valor GET está reemplazando los valores existentes en mi URL, mientras que necesito agregar el valor al final de la URL.
Por ejemplo, si mi URL es: www.example.com/?s=cars&post_type=product&type_aws=true y actualizo el formulario, la URL se convierte en: www.example.com/?show=48 mientras que necesito que se agregue a al final así: www.example.com/?s=cars&post_type=product&type_aws=true&show=48
Aquí está mi formulario HTML:
<form class="woocommerce-results-per-page" method="get"> <span>Show</span> <select class="autosubmit" name="show"> <option value="48">48</option> <option value="24">24</option> <option value="-1">All</option> </select> <input type="hidden" name="orderby" value="rating"> </form>Aquí está mi jQuery
$(function(){ $(document).ready(function() { $( '.autosubmit' ).each( function() { $( this ).on( 'change' , null , function() { $( this ).parents( 'form' ).submit(); }); } ); }); });Prueba esto:
$(document).ready(function () { let select = $('.autosubmit'); url = new URL(window.location.href); show = url.searchParams.get("show"); if (show !== null) { select.find(`option[value="${show}"]`).prop('selected',true) } select.each(function () { $(this).on('change', null, function () { let url = window.location.search; let params = url.substring(1, url.length).split('&'); let hidden_inputs = ''; let form = $(this).parents('form'); $.each(params, function (i, el) { let param = el.split('='); if (form.find(`select[name="${param[0]}"],input[name="${param[0]}"]`).length == 0) { hidden_inputs += `<input type="hidden" name="${param[0]}" value="${param[1]}">`; } }); form.prepend(hidden_inputs).submit(); }); }); });