[Resolved] Preserve query string on ajax search

[Author]

Posts

[Sammut]

We have a URL like this:

/disney-cruise-line-quote-form/disney-cruise-line-quote-form-step-2/?promocpde=swvcarib

that has a query string that must remain in the URL. However, when we perform an ajax search (no page refresh) the query string disappears. How can we preserve the query string?

[Christian Cox]

Okay that's a bit unusual, existing parameters should persist. Please go to Toolset > Settings > Frontend Settings and tell me whether either checkbox in Browser History Management is checked. Then take a screenshot of the View editor screen's Custom Search settings panel so I can see your search configurations. If the View is online somewhere, please provide a link.

[Sammut]

Yes, thank you, those are all checked off.

If you want to see this in action go to: hidden link

Select No --> Continue

On the next page is where we are filtering and we need the query string preserved for when we submit the form again to the next page.

Screenshot attached. Thank you!

[Christian Cox]

Okay I see what you mean. When a search form and its results are not shown on the same page, the existing URL parameters are not persisted. We offer a PHP API that will allow you to add a hidden field to the search filters. We can set the value of that hidden field to be the same as the current promocode URL parameter. When the page redirects, the hidden field will be added to the new URL parameters. Please add this code to your custom child theme or code snippets:

add_filter( 'wpv_filter_end_filter_form', 'prefix_add_hidden_field', 99, 4 );
function prefix_add_hidden_field( $out, $view_settings, $view_id, $is_required ) {
    $views = array( 16855 );
    if ( in_array( $view_id, $views) && $is_required ) {
      $promocode = isset($_GET['promocode']) ? $_GET['promocode'] : '';
      $out = '<input type="hidden" id="promocode" name="promocode" value="' . $promocode . '" />' . $out;
    }
    return $out;
}

[Sammut]

Thank you! It kind of worked. It appends the name of the variable, but not the value:

hidden link

[Christian Cox]

Check the URL parameter name, it's inconsistent across the 3 URLs. Not sure how your redirect to step two is being applied, but that URL parameter is 'promocpde', on step one and step three the URL param is 'promocode'. If you adjust it on step two to be promocode, the snippet should work.

[Sammut]

I did double check. The function does work when you first hit the page, but one search is clicked the hidden variable goes empty.

Viewing source I can also see the Toolset it attempting to preserve the query string but it leaves it blank. Could this be a bug?

Thanks!!

[Christian Cox]

Okay it looks like there was one piece of code I overlooked, and it's necessary if you're using the "only show available inputs" view option. Underneath the Search and Pagination panel, toggle open the JS editor and add this code to update the promocode input field value after the form is updated:

jQuery( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
    var url = new URL(window.location);
    var promocode = url.searchParams.get("promocode");
	jQuery('#promocode').val(promocode);
});

[Sammut]

Thanks for all of that. I did play with the jQuery part before to no avail and similarly, the url and form variables are not sticking. I can see that toolset is attempting to append them but no luck. 🙁

[Christian Cox]

Transposition error on my part, my input field had a different ID and I did not update it correctly before pasting. I updated the code above to fix that, can you try once more?

[Sammut]

Oh, I saw that and already adjusted it and the query string would not hold.

[Christian Cox]

It just worked for me up to step 3, I'm attaching a screenshot here. Are you saying it should persist through step 4 as well? Or is there a specific step-by-step process I should follow to reproduce the problem on step 3?