Upgrade to 2.4 causes checkbox sorting issues

Anonymous

#203312

I have 8 boxes that show different colors. A user can click on a color and a search will occur retrieving only those samples matching the selected color.

I upgraded Search & Filter Pro to the latest version and now the colored boxes are not being shown. However, a user can hover over area and the boxes are still defined. I have pasted the code below as they appeared pre-update and post-update.

In a nutshell, the elements that have changed look like the following…

<li class="cat-item"><label class="beige"><input class="postform cat-item" type="checkbox" name="_sfm_vcatlogcolor[]" value="Beige"> Beige</label></li>

Post Update

<li class="sf-level-0" data-sf-count="-1" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox" value="Beige" name="_sfm_vcatlogcolor[]" id="sf-input-3ab438bc3953ee708a49ac787d06d782"><label class="sf-label-checkbox" for="sf-input-3ab438bc3953ee708a49ac787d06d782">Beige</label></li>

Full element code with all color options…

<li class="sf-field-post-meta-vcatlogcolor col-md-3 col-sm-4 col-xs-6 filter_block2" data-sf-field-name="_sfm_vcatlogcolor" data-sf-field-type="post_meta" data-sf-field-input-type="checkbox" data-sf-meta-type="choice"><h4>By Color</h4><ul data-operator="or"><li class="cat-item"><label class="whiteyellow"><input class="postform cat-item" type="checkbox" name="_sfm_vcatlogcolor[]" value="WhiteYellow"> WhiteYellow</label></li><li class="cat-item"><label class="beige"><input class="postform cat-item" type="checkbox" name="_sfm_vcatlogcolor[]" value="Beige"> Beige</label></li><li class="cat-item"><label class="brown selectedbycolor"><input class="postform cat-item" type="checkbox" name="_sfm_vcatlogcolor[]" value="Brown"> Brown</label></li><li class="cat-item"><label class="orange"><input class="postform cat-item" type="checkbox" name="_sfm_vcatlogcolor[]" value="Orange"> Orange</label></li><li class="cat-item"><label class="red selectedbycolor"><input class="postform cat-item" type="checkbox" name="_sfm_vcatlogcolor[]" value="Red"> Red</label></li><li class="cat-item"><label class="pink"><input class="postform cat-item" type="checkbox" name="_sfm_vcatlogcolor[]" value="Pink"> Pink</label></li><li class="cat-item"><label class="grey"><input class="postform cat-item" type="checkbox" name="_sfm_vcatlogcolor[]" value="Grey"> Grey</label></li><li class="cat-item"><label class="black"><input class="postform cat-item" type="checkbox" name="_sfm_vcatlogcolor[]" value="Black"> Black</label></li></ul></li>

After the upgrade, we now have the following…

<li class="sf-field-post-meta-vcatlogcolor col-md-3 col-sm-4 col-xs-6 filter_block2" data-sf-field-name="_sfm_vcatlogcolor" data-sf-field-type="post_meta" data-sf-field-input-type="checkbox" data-sf-meta-type="choice"><h4>By Color</h4>		<ul data-operator="or" class="">
			
			<li class="sf-level-0" data-sf-count="-1" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox" value="WhiteYellow" name="_sfm_vcatlogcolor[]" id="sf-input-863208788bc1893ac72cfd42706b252c"><label class="sf-label-checkbox" for="sf-input-863208788bc1893ac72cfd42706b252c">WhiteYellow</label></li><li class="sf-level-0" data-sf-count="-1" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox" value="Beige" name="_sfm_vcatlogcolor[]" id="sf-input-3ab438bc3953ee708a49ac787d06d782"><label class="sf-label-checkbox" for="sf-input-3ab438bc3953ee708a49ac787d06d782">Beige</label></li><li class="sf-level-0" data-sf-count="-1" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox" value="Brown" name="_sfm_vcatlogcolor[]" id="sf-input-85f2069301e8dcecd54e6c50a1dd1c87"><label class="sf-label-checkbox" for="sf-input-85f2069301e8dcecd54e6c50a1dd1c87">Brown</label></li><li class="sf-level-0" data-sf-count="-1" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox" value="Orange" name="_sfm_vcatlogcolor[]" id="sf-input-a447ca2c14ed85c26b28e5a1c172ecc5"><label class="sf-label-checkbox" for="sf-input-a447ca2c14ed85c26b28e5a1c172ecc5">Orange</label></li><li class="sf-level-0" data-sf-count="-1" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox" value="Red" name="_sfm_vcatlogcolor[]" id="sf-input-954aedda0e4d989e78e701f6bd3db543"><label class="sf-label-checkbox" for="sf-input-954aedda0e4d989e78e701f6bd3db543">Red</label></li><li class="sf-level-0" data-sf-count="-1" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox" value="Pink" name="_sfm_vcatlogcolor[]" id="sf-input-6f968eafe7b220ab3e30d14b25f38196"><label class="sf-label-checkbox" for="sf-input-6f968eafe7b220ab3e30d14b25f38196">Pink</label></li><li class="sf-level-0" data-sf-count="-1" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox" value="Grey" name="_sfm_vcatlogcolor[]" id="sf-input-f194339e210f620d78bfbf4c278c7bb2"><label class="sf-label-checkbox" for="sf-input-f194339e210f620d78bfbf4c278c7bb2">Grey</label></li><li class="sf-level-0" data-sf-count="-1" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox" value="Black" name="_sfm_vcatlogcolor[]" id="sf-input-eedb945f74319a2cdb3886a505b6c979"><label class="sf-label-checkbox" for="sf-input-eedb945f74319a2cdb3886a505b6c979">Black</label></li>		</ul>
		</li>

Trevor

#203339

Are you able to send me a live link/URL to your search page so I can take a look?

You have just upgraded to 2.4.6, from which version?

Anonymous

#203355

We upgraded from 1.2.

Web URL: http://mbveneer.com/

Then go to Browse -> Veneer Catalog

You will see the heading “By Color” which if you hover below, you can see the box outlines but no colors. Also, if you look at By Name, you can see the radio boxes, but before the upgrade they were simply letters that you clicked on. No radio control was seen.

Web Archive shows what it looked like before upgrade.
https://web.archive.org/web/20180822082227/http://mbveneer.com/browse/veneer-catalog/

Trevor

#203361

Looking at that archived page, it was 1.4.3, but that version is very, very old and the codebase of the current version is very much changed.

It looks like you need to change the CSS being used. An example of how an Alphabetised field would now be done, assuming that you have a custom field with the one letter in it. Have a look at these two threads (the private posts are not relevant):

https://support.searchandfilter.com/forums/topic/a-to-z-filter/

https://support.searchandfilter.com/forums/topic/a-to-z-filter-2/

I will send another post after this one to deal with the color swatch issue.

Trevor

#203363

This post gives you the idea about the color swatches:

https://support.searchandfilter.com/forums/topic/colors-in-search-form/#post-190323

Anonymous

#203395

Thank you Trevor. Those links helped for both issues.

Trevor

#203397

Can I close this thread now?

Anonymous

#203399

You may.

[Author]

Posts