Bootstrap Price Table | Advanced Custom Fields | Flexible Content | Repeater | Comma Separated Features

readme.md

#Bootstrap Flexible Pricing Fields

Bootstrap Pricing Fields Using Advanced Custom Fields Flexible Content

Prerequisites:

1. Advanced Custom Fields

2. Flexible Content

3. Bootstrap

Things to note:

1. The comments should guide you in field creation.

2. If you are confused, try reading the documentation for both ACF and Bootstrap

3. I added a pricing class to the tables, so I could ovveride styles if neede.

4. The features field is a comma sepatrated list. PHP explode is used to parse out each item into a list item.

Thanks to George on Treehouse for the tutorial on PHP explode.

flex-bs-pricing.php

<?php
// check if the flexible content field has rows of data
if( have_rows('flexible_content') ):
	 
 	// loop through the rows of data
        while ( have_rows('flexible_content') ) : the_row();
			
 		//check current row layout
		if( get_row_layout() == 'pricing' ):

	        	// check if a nested repeater field has rows of data
	        	if( have_rows('pricing_table') ):
	 				
 				//counter
	        		$i = 0;

			 	// loop through the rows of data
				while ( have_rows('pricing_table') ) : the_row();

				    	//increase counter
				    	$i++;

  				    	//fields
  				    	//text field
  					$price_table_title = get_sub_field('pricing_table_title');
  					//text field
  					$pricing_table_price = get_sub_field('pricing_table_price');
  					//comma separated items - text area
  					$pricing_table_features = get_sub_field('pricing_table_features');
  					//text field
  					$pricing_table_button = get_sub_field('pricing_table_button');
  					//text field
  					$pricing_table_link = get_sub_field('pricing_table_link');
  					//select field - bootstrap colors
  					$pricing_table_color = get_sub_field('pricing_table_color');
					
  					//expand features comma separated list
  					$features = explode(",", $pricing_table_features);

  					echo '<div class="col-md-4">';
  						echo '<div class="panel pricing panel-'.$pricing_table_color.'">';
  						 	echo '<div class="panel-heading"><h3 class="text-center">'.$price_table_title.'</h3></div>';
  						     	echo '<div class="panel-body text-center">';
  								echo '<p class="lead" style="font-size:40px"><strong>'.$pricing_table_price.'</strong></p>';
  							echo '</div>';
	  		                   		echo '<ul class="list-group list-group-flush text-center">';
	  			                   		//wrap each feature in a list item
	  							foreach ($features as $feature => $featued_item) {
	  								echo '<li class="list-group-item">'. $featued_item. '</li>';
	  							}
	  						echo '</ul>';
  							echo '<div class="panel-footer text-center">';
  								echo '<a class="btn btn-lg  btn-'.$pricing_table_color.'" href="'.$pricing_table_link.'">'.$pricing_table_button.'</a>';
  							echo '</div>';
  						echo '</div>';
  					echo '</div>';

  					//clear every third table
  					if($i % 3 == 0){
  					       echo '<div class="clearfix"></div>';
  				    	}
  						 
  				endwhile;
   
  				//content after
  				echo '<div class="clearfix"></div>';
  	 				
  			endif;
  			//end if a nested repeater field has rows of data
   
  	        endif;
  	        //end check current row layout
  	 
	endwhile;
  	 
else :

// no layouts found

endif;
	 
?>

@SmashBrando great code, thanks!

Do you have this exported acf field group?