Shortcode Causing Product Search To Break

Question

We have added a live product search shortcode on the top of our website for mobile devices only.

On desktops we have left the live product search in a side bar.

We have a function that only calls and places the shortcode for mobile devices.

Previously when you done a live product search on desktop devices and hit enter, 20 products would be returned and made visible in a grid view on the screen.

Since adding the shortcode for mobile devices, this has broken this feature for desktop devices. The products still appear in a drop down menu, but previously you could hit enter and they would be moved into a nice grid view display in the centre of the screen.

To achieve this before, to enable the products to appear in the centre of the screen, the following line of code was added:

if (get_option( 'wpsc_default_category' ) == 'list' && isset($wp_query- 
>query_vars['search_terms']))
$output = false;
}

Section of code with the above code having been added at the bottom:

function wpsc_display_categories() {
global $wp_query;
$output = false;
if ( !is_numeric( get_option( 'wpsc_default_category' ) ) && ! get_query_var( 'product_tag' ) ) {

    if ( isset( $wp_query->query_vars['products'] ) )
        $category_id = $wp_query->query_vars['products'];
    else if ( isset( $_GET['products'] ) )
        $category_id = $_GET['products'];

    // if we have no categories, and no search, show the group list
    if ( is_numeric( get_option( 'wpsc_default_category' ) ) || (isset( $product_id ) && is_numeric( $product_id )) )
        $output = true;
    if ( (get_option( 'wpsc_default_category' ) == 'all+list'))
        $output = true;

    if (get_option( 'wpsc_default_category' ) == 'list' && (!isset($wp_query->query_vars['wpsc_product_category']) || !isset($wp_query->query_vars['product_tag']) && get_option('wpsc_display_categories')))
        $output = true;

    if (get_option( 'wpsc_default_category' ) == 'list' && isset($wp_query->query_vars['search_terms']))
        $output = false;
}

if ( isset( $category_id ) && $category_id > 0 )
    $output = false;
if ( get_option( 'wpsc_display_categories' ))
    $output = true;

return $output;
}

Not sure why adding the shortcode has broken the products returning in the centre of the screen, from the first line of code shown at the top here?

It's strange as the function we have that adds the shortcode for mobiles, checks that it's a mobile device and only applies the shortcode for mobile devices.

Any thoughts, or ideas on how we can solve this one?

Current filter in functions.php which checks for the mobile devices, and applies the shortcode if a mobile device is detected:

add_action( 'generate_inside_navigation','tu_add_to_mobile_bar' );
function tu_add_to_mobile_bar() { 

if (wp_is_mobile()) {
?>
<div class="search">
<?php echo do_shortcode( '[our shortcode in here] ' ); ?>
</div>
<?php
}}

Answer 1

Here's the gist of what I was talking about.

Step #1 - Register a variable with the global query

This isn't technically 100% necessary, but it is generally considered a best practice. You could alternatively just inspect the raw $_GET or $_POST globals.

add_filter(
    'query_vars',
    function( $vars ) {
        $vars[] = 'is_mobile_search';
        return $vars;
    }
);

Step #2 - Pass the variable

I'm assuming your shortcode actually renders a form, and that you can conditionally change it somehow, maybe [our_shortcode mobile="true"] .

<form>
    <input type="hidden" name="is_mobile_search" value="true" />
</form>

Step #3 - Use the variable

The contents of this function are your normal stuff, you are just checking is_mobile_search for the literal (but arbitrary) string value of true .

function wpsc_display_categories() {
    $is_mobile_search = get_query_var('is_mobile_search') === "true";
}