Support

Account

Home Forums Front-end Issues HowTo: build tables with acf and merged cells (colspan)

Helping

HowTo: build tables with acf and merged cells (colspan)

  • disclaimer:
    i was searching google for a solution. i found nothing! i had to write the following code by myself only. to save you time, i show you now how to do it.

    mission:
    build a table in the frontend.
    special task:
    merge cells whose field values are equal. for better understanding see the attached screenshot.

    data input:
    i have a custom post type where i attached several fields of type select and checkboxes. field labels values are inserted like this:
    167 : 167 dpi
    212 : 212 dpi
    216 : 216 dpi
    252 : 252 dpi
    300 : 300 dpi
    323 : 323 dpi
    339 : 339 ppi

    now add some posts with values.

    data output:
    build a regular table and fetch your posts like this (my CPT is “product”):

    <?php
    $products = new WP_Query( array ( 
    	'post_type' => 'product',
    	'posts_per_page' => -1
    ));	
    if($products->have_posts()) :
    $posts = $products->get_posts(); 
    ?>
    <table>
    	<tr>
    		<th>Label1</th>
    		<?php make_cells("field1"); ?>
    	</tr>
    	<tr>
    		<th>Label2</th>
    		<?php make_cells("field2"); ?>
    	</tr>
    </table>
    <?php endif; ?>

    note my custom function “make_cells” where i just pass the field name. paste the function in your theme functions.php :

    function get_field_label($field_key, $post_id=null, $options=null){
       global $post;
       $field = get_field_object($field_key, $post_id=null,$options);
       $value = get_field($field_key,$post_id);
       return $field['choices'][ $value ];
    }
    function make_cells($field){
    	global $post, $posts;
    	$i = 1; // variable counter, may reset during foreach
    	$b = 1; // global counter, never resets
    	$end = count($posts);
    	echo "<td";
    	foreach($posts as $key => $post) {
    		$value = get_field($field);
    		$nextvalue = "";
    		if(isset($posts[$key+1]))
    			$nextvalue = get_field($field,$posts[$key+1]->ID);
    		if($nextvalue != $value){ 
    			echo " colspan='".$i."'>".get_field_label($field); 
    			$i=0; 
    			if($b != $end) echo "</td><td";
    		}
    		if($b == $end) echo "</td>";
    		$i++;
    		$b++;
    	}
    }

    this function will produce a code like this:

    <td colspan='5'>6 Zoll (15 cm)</td>
    <td colspan='2'>7 Zoll (17 cm)</td>
    <td colspan='1'>8,9 Zoll (22,6 cm)</td>

    instead of this:

    <td>6 Zoll (15 cm)</td>
    <td>6 Zoll (15 cm)</td>
    <td>6 Zoll (15 cm)</td>
    <td>6 Zoll (15 cm)</td>
    <td>6 Zoll (15 cm)</td>
    <td>7 Zoll (17 cm)</td>
    <td>7 Zoll (17 cm)</td>
    <td>8,9 Zoll (22,6 cm)</td>

    the first function “get_field_label” helps you to retrieve a field value label. because the_field() and get_field() will just give you the value of a checkbox or select field!
    you can see a working example of the code where i compare amazon kindle/fire tablets.

  • updated (better) version with prepend and append elements and support for regular text input fields and without extra function:

    function make_cells($field){
    	global $post, $posts;
    	$i = 1; // variable counter, may reset during foreach
    	$b = 1; // global counter, never resets
    	$end = count($posts);
    	echo "<td";
    	foreach($posts as $key => $post) {
    		$value = get_field($field);
    		$valueobj = get_field_object($field);
    		$nextvalue = "";
    		if(isset($posts[$key+1]))
    			$nextvalue = get_field($field,$posts[$key+1]->ID);
    		if($nextvalue != $value){ 
    			echo " colspan='".$i."'>";
    			if(isset($valueobj["prepend"])) echo $valueobj["prepend"]." ";
    			if(isset($valueobj["choices"])){
    				if(is_array($value)){
    					$newarray = [];
    					foreach($value as $val){
    						$newarray[] = $valueobj["choices"][$val];
    					}
    					echo implode(", ",$newarray);
    				}else{
    					echo $valueobj["choices"][$value];
    				}
    			}else{
    				echo $value;
    			}	
    			if(isset($valueobj["append"])) echo " ".$valueobj["append"];
    			$i=0; 
    			if($b != $end) echo "</td><td";
    		} 
    		if($b == $end) echo "</td>";
    		$i++;
    		$b++;
    	}
    }
Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘HowTo: build tables with acf and merged cells (colspan)’ is closed to new replies.