Using cookies to conditionally show elements

How To
1

I’m currently running a website for a small business that is opening up new locations.
I need to show different contact info for each different location. The contact info is present on multiple pages, so I think the best solution would be to use a cookie (to persist the location). The element is the same across all pages, all the data is non-null (e.g. phone number, email address, contact name) strings.

My initial idea was to have a location select dropdown that would set cookies, and then I would show elements based on the data set (using Bricks Conditions). However, I ran into problems; it seems “Browser Storage: Add” doesn’t work and no cookie gets added (tested using nav link and button elements).

Then, I tried making a .php formula that gets called by an echo dynamic data to call a “setcookie()” function. That gets called twice per button on page load, and also doesn’t actually set a cookie.

To finally top it off, I realized a few minutes ago that Browser Storage is actually not one of the usable conditions in the Conditions page, so my original plan of having a ton of duplicated elements with slightly different info that gets conditionally shown can’t happen.

Showing data conditionally, based on a cookie seems like something people would regularly use, so I’m curious if anyone has experience or knows how to do this. I’m wondering if this is something that would require me to ssh into my hosting provider in order to touch the code directly.

2

I am attempting to solve this exact problem right now. If you came up with a solution, I would love to know what it was.

3

After some experimentation here I’ve got a version of this working.

Here’s the code. I love this as it uses the native Bricks conditions, you can simply select in the builder and it works great.

First, set the cookie you want via whatever method you want. I used Claude to generate cookie storage code from a WS Form, works perfectly.

Then use this code to add the store locations as conditions in Bricks.

// Add custom condition group for store selection
add_filter( 'bricks/conditions/groups', 'add_store_condition_group' );
function add_store_condition_group( $groups ) {
    $groups[] = [
        'name'  => 'store_selector',
        'label' => esc_html__( 'Store Selector', 'bricks' ),
    ];
    return $groups;
}

// Add store condition options
add_filter( 'bricks/conditions/options', 'add_store_condition_options' );
function add_store_condition_options( $options ) {
    $options[] = [
        'key'   => 'selected_store',
        'label' => esc_html__( 'Selected Store', 'bricks' ),
        'group' => 'store_selector',
        'compare' => [
            'type'    => 'select',
            'options' => [
                '==' => esc_html__( 'is', 'bricks' ),
                '!=' => esc_html__( 'is not', 'bricks' ),
            ],
            'placeholder' => esc_html__( 'is', 'bricks' ),
        ],
        'value' => [
            'type'    => 'select',
            'options' => [
                'Store1'  => 'Store1',
                'Store2' => 'Store2',
                'Store3'   => 'Store3,
            ],
            'placeholder' => esc_html__( 'Select store', 'bricks' ),
        ],
    ];
    
    // Add "no store selected" option
    $options[] = [
        'key'   => 'no_store_selected',
        'label' => esc_html__( 'No Store Selected', 'bricks' ),
        'group' => 'store_selector',
    ];
    
    return $options;
}

// Execute the condition logic
add_filter( 'bricks/conditions/result', 'run_store_condition', 10, 3 );
function run_store_condition( $result, $condition_key, $condition ) {
    // Handle "selected_store" condition
    if ( $condition_key === 'selected_store' ) {
        $compare    = isset( $condition['compare'] ) ? $condition['compare'] : '==';
        $user_value = isset( $condition['value'] ) ? $condition['value'] : '';
        $cookie_value = isset( $_COOKIE['selected_store'] ) ? $_COOKIE['selected_store'] : '';
        
        $condition_met = false;
        
        switch( $compare ) {
            case '==':
                $condition_met = $cookie_value === $user_value;
                break;
            case '!=':
                $condition_met = $cookie_value !== $user_value;
                break;
        }
        
        return $condition_met;
    }
    
    // Handle "no_store_selected" condition
    if ( $condition_key === 'no_store_selected' ) {
        return !isset( $_COOKIE['selected_store'] ) || empty( $_COOKIE['selected_store'] );
    }
    
    return $result;
}
4

that worked really cool and I think that cookie or local storage should be native conditions!