40% OFF EVERYTHING
Our 10th BIRTHDAY SALE
Buy Now

Custom fields checkbox, add class to item

This topic contains 7 replies, has 3 voices, and was last updated by  Artur Kowalczyk 5 years, 9 months ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
  • Author
    Posts
  • July 13, 2018 at 5:38 am #438211

    Artur Kowalczyk
    Expired Member
    Post count: 11

    Hi,
    is it possible to add css class to each item of multi select custom field (display as checkbox)?

    <div class=”geodir_more_info geodir_test”>
    <span class=”geodir-i-select” style=””>group title</span>

      <li class=”item1-class”>item1
      <li class=”item2-class”>item2
      <li class=”item3-class”>item3

    </div>

    I need to add icon to every item on this list.

    July 13, 2018 at 10:03 am #438233

    Alex Rollin
    Moderator
    Post count: 27815

    This is not currently possible without a customization.

    July 20, 2018 at 9:46 am #439167

    Artur Kowalczyk
    Expired Member
    Post count: 11

    I have one more problem with custom fields – html structure.
    When is chosen two or more options the ul is generated. But when is only one, there is no html container for that option.
    It’s makes styling very difficult. Can You unify it? Or where can I change it?

    July 20, 2018 at 2:16 pm #439193

    Alex Rollin
    Moderator
    Post count: 27815

    Hello,

    I have flagged this for the developers who will let you know if there is a workaround.

    July 21, 2018 at 11:26 am #439251

    Kiran
    Moderator
    Post count: 7069

    Hello Artur,

    Try following code snippet:

    

    /*
 * Add class to multiselect items
 */
function _gd_custom_multiselect_item_class($html,$location,$cf,$p=''){
    // check we have the post value
    if(is_int($p)){$post = geodir_get_post_info($p);}
    else{ global $post;}

    if(!is_array($cf) && $cf!=''){
        $cf = geodir_get_field_infoby('htmlvar_name', $cf, $post->post_type);
        if(!$cf){return NULL;}
    }

    $html_var = $cf['htmlvar_name'];

    // Check if there is a location specific filter.
    if(has_filter("geodir_custom_field_output_multiselect_loc_{$location}")){
        /**
         * Filter the multiselect html by location.
         *
         * @param string $html The html to filter.
         * @param array $cf The custom field array.
         * @since 1.6.6
         */
        $html = apply_filters("geodir_custom_field_output_multiselect_loc_{$location}",$html,$cf);
    }

    // Check if there is a custom field specific filter.
    if(has_filter("geodir_custom_field_output_multiselect_var_{$html_var}")){
        /**
         * Filter the multiselect html by individual custom field.
         *
         * @param string $html The html to filter.
         * @param string $location The location to output the html.
         * @param array $cf The custom field array.
         * @since 1.6.6
         */
        $html = apply_filters("geodir_custom_field_output_multiselect_var_{$html_var}",$html,$location,$cf);
    }

    // Check if there is a custom field key specific filter.
    if(has_filter("geodir_custom_field_output_multiselect_key_{$cf['field_type_key']}")){
        /**
         * Filter the multiselect html by field type key.
         *
         * @param string $html The html to filter.
         * @param string $location The location to output the html.
         * @param array $cf The custom field array.
         * @since 1.6.6
         */
        $html = apply_filters("geodir_custom_field_output_multiselect_key_{$cf['field_type_key']}",$html,$location,$cf);
    }

    // If not html then we run the standard output.
    if(empty($html)){
        if (!empty($post->{$cf['htmlvar_name']})):
            if (is_array($post->{$cf['htmlvar_name']})) {
                $post->{$cf['htmlvar_name']} = implode(', ', $post->{$cf['htmlvar_name']});
            }

            $field_icon = geodir_field_icon_proccess($cf);
            if (strpos($field_icon, 'http') !== false) {
                $field_icon_af = '';
            } elseif ($field_icon == '') {
                $field_icon_af = '';
            } else {
                $field_icon_af = $field_icon;
                $field_icon = '';
            }

            $field_values = explode(',', trim($post->{$cf['htmlvar_name']}, ","));

            if(is_array($field_values)){
                $field_values = array_map('trim', $field_values);
            }

            $option_values = array();
            if (!empty($cf['option_values'])) {
                $cf_option_values = geodir_string_values_to_options(stripslashes_deep($cf['option_values']), true);

                if (!empty($cf_option_values)) {
                    foreach ($cf_option_values as $cf_option_value) {
                        if (isset($cf_option_value['value']) && in_array($cf_option_value['value'], $field_values)) {
                            $option_values[] = $cf_option_value['label'];
                        }
                    }
                }
            }

            $html = '<div class="geodir_more_info ' . $cf['css_class'] . ' ' . $cf['htmlvar_name'] . '" style="clear:both;"><span class="geodir-i-select" style="' . $field_icon . '">' . $field_icon_af;
            $html .= (trim($cf['site_title'])) ? __($cf['site_title'], 'geodirectory') . ': ' : '';
            $html .= '</span>';

            if (count($option_values) > 1) {
                $html .= '<ul>';

                foreach ($option_values as $val) {
                    $html .= '<li class="_gd_multi-' . sanitize_html_class( sanitize_title_with_dashes( $val ) ) . '">' . $val . '</li>';
                }

                $html .= '</ul>';
            } else {
                $html .= __($post->{$cf['htmlvar_name']}, 'geodirectory');
            }

            $html .= '</div>';
        endif;

    }

    return $html;
}
add_filter('geodir_custom_field_output_multiselect','_gd_custom_multiselect_item_class',9,3);
    

    This will convert option title in css class.
    
Ex: “Gas Central Heating” to “_gd_multi-gas-central-heating”.
    

    Kiran
    

		
	
    


    

			
				

    

	
    

		July 23, 2018 at 5:54 am

		
		#439366

		
		
		
	
    


    


    

	
    

		
		
    Artur Kowalczyk
    Expired Member
    
		
		
     Post count: 11
    
	
    

	
    

		
		
    Alex, Kiran – thx a lot. it works fine.
    

    can You make the html structure the same (ul>li) for both cases?
    
when there in only one option and two or more in custom field.
    

    e.g. I’ve got checkbox custom field for hotel – location
    
and options:
    
– in the mountains
    
– by the lake
    
– by the sea
    

    hotel 1 – in the mountains, by the lake (in html is generated ul for options)
    
hotel 2  – by the sea (no ul for option)
    

    in both cases I need to have the same html.
    

		
	
    


    

			
				

    

	
    

		July 23, 2018 at 6:37 am

		
		#439368

		
		
		
	
    


    


    

	
    

		
		
    Kiran
    Moderator
    
		
		
     Post count: 7069
    
	
    

	
    

		
		
    Try this
    

    

    /*
 * Add class to multiselect items
 */
function _gd_custom_multiselect_item_class($html,$location,$cf,$p=''){
    // check we have the post value
    if(is_int($p)){$post = geodir_get_post_info($p);}
    else{ global $post;}

    if(!is_array($cf) && $cf!=''){
        $cf = geodir_get_field_infoby('htmlvar_name', $cf, $post->post_type);
        if(!$cf){return NULL;}
    }

    $html_var = $cf['htmlvar_name'];

    // Check if there is a location specific filter.
    if(has_filter("geodir_custom_field_output_multiselect_loc_{$location}")){
        /**
         * Filter the multiselect html by location.
         *
         * @param string $html The html to filter.
         * @param array $cf The custom field array.
         * @since 1.6.6
         */
        $html = apply_filters("geodir_custom_field_output_multiselect_loc_{$location}",$html,$cf);
    }

    // Check if there is a custom field specific filter.
    if(has_filter("geodir_custom_field_output_multiselect_var_{$html_var}")){
        /**
         * Filter the multiselect html by individual custom field.
         *
         * @param string $html The html to filter.
         * @param string $location The location to output the html.
         * @param array $cf The custom field array.
         * @since 1.6.6
         */
        $html = apply_filters("geodir_custom_field_output_multiselect_var_{$html_var}",$html,$location,$cf);
    }

    // Check if there is a custom field key specific filter.
    if(has_filter("geodir_custom_field_output_multiselect_key_{$cf['field_type_key']}")){
        /**
         * Filter the multiselect html by field type key.
         *
         * @param string $html The html to filter.
         * @param string $location The location to output the html.
         * @param array $cf The custom field array.
         * @since 1.6.6
         */
        $html = apply_filters("geodir_custom_field_output_multiselect_key_{$cf['field_type_key']}",$html,$location,$cf);
    }

    // If not html then we run the standard output.
    if(empty($html)){
        if (!empty($post->{$cf['htmlvar_name']})):
            if (is_array($post->{$cf['htmlvar_name']})) {
                $post->{$cf['htmlvar_name']} = implode(', ', $post->{$cf['htmlvar_name']});
            }

            $field_icon = geodir_field_icon_proccess($cf);
            if (strpos($field_icon, 'http') !== false) {
                $field_icon_af = '';
            } elseif ($field_icon == '') {
                $field_icon_af = '';
            } else {
                $field_icon_af = $field_icon;
                $field_icon = '';
            }

            $field_values = explode(',', trim($post->{$cf['htmlvar_name']}, ","));

            if(is_array($field_values)){
                $field_values = array_map('trim', $field_values);
            }

            $option_values = array();
            if (!empty($cf['option_values'])) {
                $cf_option_values = geodir_string_values_to_options(stripslashes_deep($cf['option_values']), true);

                if (!empty($cf_option_values)) {
                    foreach ($cf_option_values as $cf_option_value) {
                        if (isset($cf_option_value['value']) && in_array($cf_option_value['value'], $field_values)) {
                            $option_values[] = $cf_option_value['label'];
                        }
                    }
                }
            }

            $html = '<div class="geodir_more_info ' . $cf['css_class'] . ' ' . $cf['htmlvar_name'] . '" style="clear:both;"><span class="geodir-i-select" style="' . $field_icon . '">' . $field_icon_af;
            $html .= (trim($cf['site_title'])) ? __($cf['site_title'], 'geodirectory') . ': ' : '';
            $html .= '</span>';

            if (count($option_values) > 1) {
                $html .= '<ul>';

                foreach ($option_values as $val) {
                    $html .= '<li class="_gd_multi-' . sanitize_html_class( sanitize_title_with_dashes( $val ) ) . '">' . $val . '</li>';
                }

                $html .= '</ul>';
            } else {
                $val = __($post->{$cf['htmlvar_name']}, 'geodirectory');
				$html .= '<ul><li class="_gd_multi-' . sanitize_html_class( sanitize_title_with_dashes( $val ) ) . '">' . $val . '</li></ul>';
            }

            $html .= '</div>';
        endif;

    }

    return $html;
}
add_filter('geodir_custom_field_output_multiselect','_gd_custom_multiselect_item_class',9,3);
    

    Kiran
    

		
	
    


    

			
				

    

	
    

		July 23, 2018 at 7:57 am

		
		#439374

		
		
		
	
    


    


    

	
    

		
		
    Artur Kowalczyk
    Expired Member
    
		
		
     Post count: 11
    
	
    

	
    

		
		
    again – thx a lot
    

		
	
    


    

			
		
	
    • 

	
  • 

		
    Author
    

		
    

			
				Posts
			
		
    

	
    • 





			



	


		Viewing 8 posts - 1 through 8 (of 8 total)
	


	


		
	





		
				

			

				

					
We have moved to a support ticketing system and our forums are now closed.

					Open Support Ticket