Forum Replies Created
-
agxer
- in reply to: Custom Page Builder
- October 26, 2020 at 11:07 am
ok, after some reading i think what i need to do is make it as a repeater field to display as an accordion in my page builder, but i still cant get it to show in my template:
json:
[ { "key": "group_553b8b2752aba", "title": "Page Builder", "fields": [ { "key": "field_553b8b4fc8c3b", "label": "Page Sections", "name": "acf_page_builder", "type": "flexible_content", "instructions": "", "required": 1, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "button_label": "Add Section", "min": "", "max": "", "layouts": [ { "key": "561538dcw4334t", "name": "accordion_row", "label": "Accordion Row", "display": "row", "sub_fields": [ { "key": "field_5f95ee9195280", "label": "Accordion", "name": "accordion", "type": "repeater", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "collapsed": "", "min": 0, "max": 0, "layout": "table", "button_label": "", "sub_fields": [ { "key": "field_5f95eebb95281", "label": "Accordion Title", "name": "accordion_title", "type": "text", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "default_value": "", "placeholder": "", "prepend": "", "append": "", "maxlength": "" }, { "key": "field_5f95eece95282", "label": "Accordion Content", "name": "accordion_content", "type": "wysiwyg", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "default_value": "", "tabs": "all", "toolbar": "full", "media_upload": 1, "delay": 0 } ] } ], "min": "", "max": "" }, ] } ], "location": [ [ { "param": "post_type", "operator": "==", "value": "post" } ], [ { "param": "page_template", "operator": "==", "value": "page-templates\/full-width.php" } ] ], "menu_order": 0, "position": "normal", "style": "default", "label_placement": "top", "instruction_placement": "label", "hide_on_screen": [ "the_content" ], "active": 1, "description": "" } ]PHP:
<?php Class ACF_Page_Builder { /** * Check if Advanced Custom Fields is Active * @var (Boolean) */ private $acf_active; /** * Check if Simple Contact Forms is Active * @var (Boolean) */ private $scf_active; /** * The final HTML to return with the section data inluded * @var String */ private $html; /** * Formats that can be used in the acfs_add_support and acfs_remove_support functions * @var Array */ public $supported_formats; /** * Variable to declare whether we should use Bootstrap or not * @var Boolean */ private $use_bs; /** * Constructor of the class. Sets some default values */ function __construct() { include_once( ABSPATH . 'wp-admin/includes/plugin.php' ); $this->acf_active = is_plugin_active( 'advanced-custom-fields/acf.php' ) || is_plugin_active( 'advanced-custom-fields-pro/acf.php' ); $this->scf_active = is_plugin_active( 'simple-contact-forms/simple-contact-forms.php' ); $this->supported_formats = array('post_type', 'page_template'); $this->use_bs = function_exists('get_field') ? get_field('acfpb_use_bootstrap') : false; } /** * Enqueue the styles and scripts for the public */ public function enqueuePublic() { wp_enqueue_style( 'acfpb-public', plugin_dir_url( __FILE__ ) . '../public/css/acfpb_styles.css', false, NULL, 'all' ); } /** * Enqueue the styles and scripts for the admin */ public function enqueueAdmin() { } /** * Retrieves all the section HTML * @param String $name The slug used for the sections. Is 'sections' by default * @return String The final HTML */ public function getSectionsHTML( $name, $post_id ) { if( !$this->acf_active ) return ''; if( have_rows( $name, $post_id ) ): $s = 1; $this->html = '<div id="acfpb_sections">'; while ( have_rows( $name, $post_id ) ) : the_row(); $layout = get_row_layout(); if( method_exists(get_class(), 'getSection_' . $layout ) ) : $id = 'section_' . $s; $class = 'acfpb_section section-' . $layout; $style = get_sub_field('bg') ? 'background-color:' . get_sub_field('bg') : ''; $contained = (boolean) get_sub_field('contained', false); if( !$this->use_bs && $contained ) $contained = false; $wrapper = get_sub_field('wrapper_class'); $this->html .= '<div id="' . $id . '" class="' . $class . '" style="' . $style . '"><div class="sectionwrap">'; if( $contained ) $this->html .= '<div class="container">'; if( $contained ) $this->html .= '<div class="row">'; if( $wrapper !== '' ) $this->html .= '<div class="' . $wrapper . '">'; $this->html .= $this->{'getSection_' . $layout}(); if( $wrapper !== '' ) $this->html .= '</div>'; // Wrapper finish if( $this->use_bs ) $this->html .= '<div class="clearfix"></div>'; if( $contained ) $this->html .= '</div>'; // Row finish if( $contained ) $this->html .= '</div>'; // Container finish $this->html .= '</div></div>'; // Section finish $s++; endif; endwhile; $this->html .= '</div>'; // Main Wrapper finish return $this->html; else : return ''; endif; } /** * Admin function to add the fields to wordpress. Also figures out where to show them based on the acfs_add_support and acfs_remove_support functions */ public function addFieldsToWP() { if( !$this->acf_active ) return false; if( function_exists('acf_add_local_field_group') ) { // Get the exported field data $json = file_get_contents( plugin_dir_path(__FILE__) . '../admin/acf-fields.json' ); $json_to_php = json_decode( $json, true ); $acf_fields_array = $json_to_php[0]['fields']; // Check if SCF is included or leave it out of the list of fields if not if( !$this->scf_active ) { foreach ($acf_fields_array[1]['layouts'] as $key => $data) { if( $data['name'] === 'simple_contact_forms' ) { unset( $acf_fields_array[1]['layouts'][$key] ); break; } } } // Create the rest of the field group $meta = array( 'key' => 'group_553b8b2752aba_pb10192283', 'title' => 'Page Builder', 'fields' => $acf_fields_array, 'menu_order' => 10, 'position' => 'normal', 'style' => 'default', 'label_placement' => 'top', 'instruction_placement' => 'label', 'hide_on_screen' => array (), 'location' => array(), 'active' => 1, 'description' => '', ); // Filter to get the locations $location = apply_filters( 'acfpb_set_locations', array() ); $l = 0; foreach ($this->supported_formats as $format) { if( !isset($location[$format]) || empty($location[$format]) ) continue; $meta['location'][$l] = array(); foreach ($location[$format] as $place) { $meta['location'][$l][] = array( 'param' => $format, 'operator' => '==', 'value' => $place, ); $l++; } } acf_add_local_field_group($meta); } } /** * Get the Accordion section. * @return String Final string of this section */ private function getSection_accordion_row() { if( have_rows('accordion') ): $i = 1; // Set the increment variable echo '<div id="accordion">'; // loop through the rows of data for the tab header while ( have_rows('accordion') ) : the_row(); $header = get_sub_field('accordion_title'); $content = get_sub_field('accordion_content'); ?> <div class="card"> <div class="card-header" id="heading-<?php echo $i;?>"> <h5 class="mb-0"> <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-<?php echo $i;?>" aria-expanded="true" aria-controls="collapse-<?php echo $i;?>"> <?php echo $header; ?> </button> </h5> </div> <div id="collapse-<?php echo $i;?>" class="collapse" aria-labelledby="heading-<?php echo $i;?>" data-parent="#accordion"> <div class="card-body"> <?php echo $content; ?> </div> </div> </div> <?php $i++; // Increment the increment variable endwhile; //End the loop echo '</div>'; else : // no rows found echo 'Come back tomorrow'; endif; } } -
agxer
- in reply to: Custom Page Builder
- October 26, 2020 at 9:05 am
ok, so i have managed to get an accordion to display in my page editor, but not sure if this will close the accordion properly? and how to display this in my page builder php properly?
json for accordion:
{ "key": "561538dcw4334t", "name": "accordion_row", "label": "Accordion Row", "display": "block", "sub_fields": [ { "key": "field_5f90caa048f59", "label": "accordion-open", "name": "", "type": "accordion", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "open": 0, "multi_expand": 0, "endpoint": 0 }, { "key": "field_5f95e677d32d0", "label": "Accordion Title", "name": "accordion_title", "type": "text", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "default_value": "", "placeholder": "", "prepend": "", "append": "", "maxlength": "" }, { "key": "field_5f95e686d32d1", "label": "Accordion Content", "name": "accordion_content", "type": "wysiwyg", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "default_value": "", "tabs": "all", "toolbar": "full", "media_upload": 1, "delay": 0 }, { "key": "field_5f90cab348f5a", "label": "accordion-end", "name": "", "type": "accordion", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "open": 0, "multi_expand": 0, "endpoint": 1 } ], "min": "", "max": "" },PHP in page builder plugin to display the accordion:
private function getSection_accordion() { $blocks = get_sub_field('accordion_row'); $html = ''; if( count($blocks) > 0 ) : foreach($blocks as $block) { $html .= '<div class"accordion-title">'; $html .= $block['accordion-title']; $html .= '</div>'; $html .= '<div class"accordion-content">'; $html .= $block['accordion_content']; $html .= '</div>'; }; endif; return $html; }
Viewing 2 posts - 1 through 2 (of 2 total)
Welcome
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Forums
Helping Others
Helping others is a great way to earn karma, gain badges and help ACF development!