Support

Account

Home Forums ACF PRO Dynamically creating field based on select value

Solving

Dynamically creating field based on select value

  • Hi,

    I am looking for a way to create following.

    The current situation:
    I have an option page with a repeater with a text subfield.
    Client enters text values in the repeater subfield which generate WooCommerce product tabs with the correct labels.
    These values are then dynamically filling a select field in the post/product edit screen, in this case a button group. All working fine.

    The desired situation:
    The content of the WooCommerce tabs need to be post/product specific.
    So, when selecting a button in the post/product edit screen, a wysiwyg field needs to appear where the client can enter it’s specific content for the product. A bonus would be a true/false button to toggle the WooCommerce tab on/off.

    I know how to create a field or field group in a php file but based on a selection from a select field remains a mystery.

    Thanks you in advanced!

  • Or, if there’s a more efficient method of achieving above requirements, let me know!

  • I’m not sure I completely understand what you want to do. Here is my version, let me know if this is right or wrong.

    You have a repeater field on an options page.

    The values in this repeater field are used to generate the choices of a radio button field on the product/post edit page.

    You want to have fields on the product/post page that change based on the value selected in the radio button field.

  • Yes, exactly.
    The field to be generated / displayed is a wysiwyg field. The values ​​in that field are then shown in the appropriate tab. The functionality should be the same as this plugin. I just prefer to do this in ACF of course 😉

  • This is the current code i have in functions.php;

    
    /* --
    ACF Option page
    -- */
    if (function_exists('acf_add_options_page')) {
    
        // Main
        acf_add_options_page(array(
            'page_title'     => 'Product tabs',
            'menu_title'    => 'Product tabs',
            'menu_slug'     => 'acf-product-tabs',
            'capability'    => 'edit_posts',
            'icon_url' => 'dashicons-table-row-after',
            'redirect'        => true,
            'position' => '20.0'
        ));
    }
    
    /* --
    WooCommerce Tabs
    -- */
    add_filter('woocommerce_product_tabs', 'woo_dynamic_tabs');
    function woo_dynamic_tabs($tabs)
    {
        if (have_rows('repeater_field_name', 'option')) :
    
            while (have_rows('repeater_field_name', 'option')) : the_row();
                $woo_tab_label = get_sub_field('repeater_sub_field');
    
                // Attributen tab
                $tabs['attrib_' . strtolower($woo_tab_label) . '_tab'] = array(
                    'title' => __($woo_tab_label, 'woocommerce'),
                    'priority' => 100,
                    'callback' => 'woo_tab_content'
    
                );
    
            // End loop.
            endwhile;
    
        // No value.
        else :
        // Do something...
        endif;
    
        // return
        return $tabs;
    }
    
    /* --
    Fill button group
    -- */
    add_filter('acf/load_field/key=field_xxxxxxxxxxx', function ($field) {
    
        // Add options to select field
        $field['choices'] = array();
    
        // Dynamic data
        $created_tabs = get_field('repeater_field_name', 'option');
    
        foreach ($created_tabs as $new_tab) {
            $field['choices'][$new_tab['repeater_sub_field']] = $new_tab['repeater_sub_field'];
        }
    
        return $field;
    });
    
    /* --
    WooCommerce Tabs content
    -- */
    function woo_tab_content($slug, $tab)
    {
        // Dynamic creation of wysiwig fields for single product
        // How?
    }
    
  • Sorry for the late reply, been really busy.

    What you need to do is to create the conditional fields in the same field group as the radio button field that will control them.

    Since you are using an acf/load_field filter on the radio button then when you edit this field group it should have choices for using in the conditional logic of these new fields.

    If the radio button does not have choices when you edit the field group then you’ll need to create acf/prepare_field filters for each of these fields and dynamically create the conditional logic.

  • I understand, thank you for your time.

    It sounds somewhat complicated, but probably isn’t 😉
    I will look into it.

  • It can be complicated. The best way to make it simpler is to create some fields that use conditional logic, use ACF to export them to PHP and then look at the conditional logic values in the field arrays. This value is an array with a nested array for each “OR” group and each of these nested arrays has additional nested arrays for each “AND” condition.

  • So i exported the field group with it’s conditional wysywig field based on the choice in the button group to php:

    
    if (function_exists('acf_add_local_field_group')) :
        acf_add_local_field_group(array(
            'key' => 'group_xxxxxxxxxx',
            'title' => 'The product tabs',
            'fields' => array(
                array(
                    'key' => 'field_of_the_product_tabs_xxxxx',
                    'label' => 'The tabs',
                    'name' => 'the_tabs',
                    'type' => 'button_group',
                    'instructions' => '',
                    'required' => 0,
                    'conditional_logic' => 0,
                    'wrapper' => array(
                        'width' => '',
                        'class' => '',
                        'id' => '',
                    ),
                    // These choices are generated by the repeater with a text subfield from the option page
                    'choices' => array(
                        'choice1' => 'choice1',
                        'choice2' => 'choice2',
                    ),
                    'allow_null' => 0,
                    'default_value' => '',
                    'layout' => 'horizontal',
                    'return_format' => 'value',
                ),
                // So this wysywig field needs to be created everytime a choice is added from the option page
                // Corresponding to the selected button group choice
                array(
                    'key' => 'field_xxxxxxxx',
                    'label' => 'product tab content',
                    'name' => 'pro_tab_content',
                    'type' => 'wysiwyg',
                    'instructions' => '',
                    'required' => 0,
                    // array van conditional logic ie.                
                    'conditional_logic' => array(
                        array(
                            array(
                                'field' => 'field_of_the_product_tabs_xxxxx',
                                'operator' => '==',
                                'value' => 'choice1', // the selected button group choice ie. choice1, choice2...
                            ),
                        ),
                    ),
                    'wrapper' => array(
                        'width' => '',
                        'class' => '',
                        'id' => '',
                    ),
                    'default_value' => '',
                    'tabs' => 'all',
                    'toolbar' => 'full',
                    'media_upload' => 1,
                    'delay' => 0,
                ),
            ),
            'location' => array(
                array(
                    array(
                        'param' => 'post_type',
                        'operator' => '==',
                        'value' => 'product',
                    ),
                ),
            ),
        ));
    
    endif;
    

    I think i’m missing some skills or knowledge because i can’t wrap my head around in how to create a wysiwyg field specific for it’s product tab.
    A ‘static’ field and displaying that in the tab content is easy, but then every tab has the same value 😉

    
    /* --
    WooCommerce Tabs content
    -- */
    function woo_tab_content($slug, $tab)
    {
       // the content in this function is display in the WooCommerce tabs
    
    }
    
  • It is actually a similar question like this one: https://support.advancedcustomfields.com/forums/topic/generate-fields-for-each-select-option/

    I’m now down to the point where i need some kind of code to do this:
    If the radio button does not have choices when you edit the field group then you’ll need to create acf/prepare_field filters for each of these fields and dynamically create the conditional logic.

    What’s hard to grasp for me:
    The wysiwyg field needs to be different for every button group selection, but what about the field key? This needs to be the same every time?
    I understand the php export with the arrays but not how to code the conditional logic with the wysiwyg field.

    i.e.
    1) I select ‘button one’ from the button group in the product edit page.
    2) A wysiwyg field is show where i enter some value
    3) I select ‘button two’ from the button group and enter some value
    4) Echo this in the tab content (with just the_field('field_name');?

  • You have a button group field. In this case I take back my previous statement. You only need one wysiwyg field that is shown if the radio field has any selection made.

    You don’t need to create any conditional logic based on the selection, Radio Button Has any value will work.

    In your template you then show the value in the wysiwyg field in the correct tab based on what the choice is.

    
    if ($value == 'choice1') {
      // do x
    } elseif ($value == 'choice2') {
      // do y
    }
    

    this will all depend on your other logic where you are showing these added tabs.

  • if ($value == 'choice1') {
      // do x
    } elseif ($value == 'choice2') {
      // do y
    }

    This won’t work because the button group values are created dynamically from the options page and therefore the values cannot be known beforehand. I’m started to think it’s not possible because there isn’t any example found anywhere. This question was also never answered properly with code.

  • To supply code would mean that I’d have to completely build what you are trying to build. I’m sure that what you are attempting to do can be done, but there are no examples that I know of where someone has attempted to do this. Figuring it out would take hours. The only thing that I can do is point you to possible ways that it can be done.

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

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.