[Resolved] Using images as checkboxes in my custom search, need use different image per box

[Author]

Posts

[JasonC5254]

Hi, i'm making a custom search form using toolset views.
one of the input is checkboxes, with image background. I Need to be able to set a different image for each checkbox.

My site is not online atm. Here is the CSS so far:

.caravans input[type=checkbox] {
display: block;
width: 320px;
height: 160px;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
-webkit-appearance: none;
outline: 0;
}
.caravans input[type=checkbox]:checked {
background-image: url('<u>hidden link;');
background-color: black;
}
.caravans input[type=checkbox]:not(:checked) {
background-image: url('<u>hidden link;');
}

Also, how do i use this search form, and use elementor to show and style the archive and loop (link the form with the results)

thanks a lot!

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - I would like to know where exactly you want to display checkboxes as image? using views filter?

Here is the Doc how you can use Elementor with Toolset:
=> https://toolset.com/documentation/user-guides/using-toolset-with-elementor-page-builder/

And how you can display view with Elementor:
=> https://toolset.com/documentation/user-guides/using-toolset-with-elementor-page-builder/build-custom-queries-to-list-posts-with-elementor-and-toolset/

[JasonC5254]

Hi, thanks for the answer.

I'm making a search form using search and pagination in toolset's views (am I at the wrong place?) which i will link to a posts widget made from elementor when it's done.

I'm joining a screenshot which explains my problem. I currently have an image replacing all checkboxes, i want it to be a different image for each box.

I want it to work this way (using ajax): select a checkbox will show types of caravans, then the user can narrow the search using other options (as seen in screenshot).

[JasonC5254]

Here is visually what i want to do: (screenshot)

[Minesh]

Basically, you can use CSS to change the styling of your checkboxes. All you have to do is create filters and style them using custom CSS but this needs knowledge of html + css + ajax etc..etc.. and its part of custom programming:
=> hidden link [ for checkboxes]
=> hidden link [ for radio button]

You should add custom CSS to your view:
=> https://toolset.com/documentation/user-guides/adding-custom-css-views/

We usually do not support integration or assistance for Custom programming or 3rd Party Code and plugins libraries. It seems -unfortunately- that for now you need custom programming work which is beyond the scope of our support.

If you need custom programming for your project I would suggest you consider contacting one of our certified partners from this link:
=> https://toolset.com/consultant/

[JasonC5254]

Hi, I solved my issue by using elementor loop shortcode into toolset's view (in case you want to help other people who might have the same problem)
If you pay me as a consultant i can show you how i did it :O kiding.

However, i'm having trouble styling my search form (totally made in toolset view) I used images as checkboxes, but then if some1 select more than one checkbox, i get no result (because the search says the post would need BOTH instead of one or the other)

So i tried to use radio buttons instead, which solve my search issue. but i end up with a styling issue as they overlap on each other, even though they all in their own bootstrap container, tried differents rows, margin padding, display, they just won't obey.

can you help me with this please? here is the issue in the image:

[JasonC5254]

If i were to use checkboxes, and user would check multiple boxes. How can i display both post relating to those 2 different checkboxes?

Right now, if user checks 2 boxes, it's like teh query is searching for a post with both values. I would like it to display post that as at least one of those values.

Like, VALUE OR VALUE instead of VALUE AND VALUE results.

I think this could solve my styling problem with the radio buttons. because it works ok with the checkboxes.

thank you

[Minesh]

Ok, Can you please share problem URL and access details so I can check how you configure your view settings.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Well - do I need to point the URL in my host files to the IP you shared?

In addition to that, when I try to access wp-admin, it does not offer me login page. Can you please tell me what I should use to access the wp-admin login page?

I have set the next reply to private which means only you and I have access to it.

[JasonC5254]

Hi, yes you need to point the url to the IP i gave you. else you will just try to login on another website which i do not own. (and it's on drupal, you might have a hard time login using wp-admin).

once you ovewrite the IP, try to login using: hidden link (if you put in www, you will get on the other website. we don't want that)

once you,re loged in, you will have access to super admin multisite. get to toolset stuff in caravanerimouski as you would on any other website.

the search page is /recherche-avancee. The single posts are in the "caravanes" tab.

tell me if you need anythign else. thanks a lot

[Minesh]

Well - I see on this page that images added as radio button: hidden link

Where I can find the checkboxes setup as images?

[JasonC5254]

As i said in the private message, In the views, you can see the Copy Custom Search.

There is a private View for each view. In pages, you can preview View: Copy Custom Search and View: Custom Search to see difference between checkboxes and radio buttons.

checkboxes are easier to style but i end with no result if user checks more than one checkboxe (because it sayd the post has to have all checkboxes value instead of 1 of them)

Then, radio buttons works fine for the search. but i have a really hard time styling them. (as they overlap each other)

thanks a lot

[Minesh]

Well - the thing is that to style such thing you need custom CSS and you may need help of CSS expert here as this is custom edit and as per our support policy, we do not support such custom edits as its beyond the scope of our support policy.

For such custom edits, please feel free to contact our certified partners:
=> https://toolset.com/contractors/

If you have checkboxes and you want to apply the OR clause, here is the ready solution I wrote where you need to adjust your code as per your field name and view ID etc..etc.
=> https://toolset.com/forums/topic/parametric-search-keeps-displaying-wrong-results/#post-357800

If you implement checkboxes and need help to filter with OR clause rather and I can help you to implement the above code if you not able to implement on your own.

[JasonC5254]

Alright,

checkboxes option it is!

can you set it up for me please? You can use the Copy Custom Search as the main search form. I'll be using that one.

thanks a lot!

[Minesh]

Well - I've added the following code to Toolset's "Custom Code" section:
=> hidden link

add_filter( 'wpv_filter_query', 'func_checkboxes_with_or_clause',10,3 );
function func_checkboxes_with_or_clause( $query_args ,$view_settings,$view_id ) {
 
if ($view_id == 4056 ) {
     
    foreach((array)$query_args['meta_query'] as $k=>$v):
            if(isset($v['key']) and $v['key']=='type'){
                             
                
                $values = explode(",",$v['value']);
                if(count($values) > 1){
                    unset($query_args['meta_query'][$k]);
                     
                    foreach($values as $x=>$y):
                        $query_args['meta_query'][$k][$x]['key'] = 'type';
                        $query_args['meta_query'][$k][$x]['type'] = 'CHAR';
                        $query_args['meta_query'][$k][$x]['compare'] = 'LIKE';
                        $query_args['meta_query'][$k][$x]['value'] = $y;
                    endforeach;
                    $query_args['meta_query'][$k]['relation'] = 'OR';
                     
                  }
            }
        endforeach;
         
}
 
return $query_args;
}

I've created the following test page where you can see checkboxes works with "OR" clause, Can you please confirm.
hidden link

More info:
=> https://toolset.com/documentation/programmer-reference/views-filters/#wpv_filter_query