WP Customize Control Hide and Show Controls With a Radio Button in loop, wp.cust

This is my customizer code

I want to conditionally show and hide Customizer controls via javascript and PHP. With multipurpose. There are some issues: if I use this code with single setting it works properly, but not in a loop. I want to use it multiple times.

$home_product_count =  get_theme_mod('my_queary_home_product_count','4'); 

for($p = 1; $p <= $home_product_count; $p++){

    $wp_customize->add_setting('home_product_images'.$p, array(
        'transport'         => 'refresh',
        'sanitize_callback' => 'absint',
        'default'           =>  get_template_directory_uri().'/images/banner'.$p.'.jpg',
        //'height'         => 50,
    ));

    $wp_customize->add_control( new WP_Customize_Cropped_Image_Control( $wp_customize, 'home_product_images'.$p, array(
        'label'             => 'Card Image #'.$p,
        'section'           => 'my_queary_home_product',
        'settings'          => 'home_product_images'.$p,   
        'width'             => 400,
        'height'            => 300,
        'flex_width'        => false,
        'flex_height'       => false,
        )));
    
    $wp_customize->add_setting( 'my_queary_home_products_artical_tittle'.$p, array(
    'default'                   =>  'Product name'.$p,
    'sanitize_callback'         =>  'esc_textarea',
    'transport'                 =>  'refresh',
    'capability'                =>  'manage_options'
        )
    );
    
    // $wp_customize->add_setting( 'my_queary_home_products_artical_link_target'.$p, array(
    //     'default'                   =>  '0',
    //     'sanitize_callback'         =>  'my_queary_sanitize_checkbox',
    //     'transport'                 =>  'refresh',
    //     //'capability'                =>  'manage_options'
    //         )
    // );
    // $wp_customize->add_control( 'my_queary_home_products_artical_link_target'.$p, array(
    //     'label'                     =>  'Open link in a new tab',
    //     'section'                   =>  'my_queary_home_product',
    //     'settings'                  =>  'my_queary_home_products_artical_link_target'.$p,
    //     'type'                      =>  'checkbox',
    //     )
    // );

    $wp_customize->add_setting( 'demo_radio_control'.$p, array(
        'default'        => 'a',
    ) );

    $wp_customize->add_control( 'demo_radio_control'.$p, array(
    'label'      => 'radio_control',
    'section'    => 'my_queary_home_product',
    'settings'   => 'demo_radio_control'.$p,
    'type'       => 'radio',
    'choices'    => array(
        'a' => 'Choice A',
        'b' => 'Choice B',
            ),
        )
    );

     $wp_customize->add_setting( 'my_queary_home_products_artical_slug'.$p, array(
        'default'                   =>  'link path'.$p,
        'transport'                 =>  'refresh',
        )
    );
    $wp_customize->add_control( 'my_queary_home_products_artical_slug'.$p, array(
        'label'                     =>  'Product Link path'.$p,
        'section'                   =>  'my_queary_home_product',
        'settings'                  =>  'my_queary_home_products_artical_slug'.$p,
        'type'                      =>  'text',
        //'active_callback' => 'choice_a_callback',
        )
    );

    //  = File Upload               =
    //  =============================
    $wp_customize->add_setting('home_products_artical_pdf_link'.$p, array(
        'default'           => '#!'.$p,
        'capability'        => 'edit_theme_options',
       // 'sanitize_callback' => 'absint',
    ));
    $wp_customize->add_control( new WP_Customize_Upload_Control($wp_customize, 'home_products_artical_pdf_link'.$p, array(
        'label'    => __('Atach Pdf - '.$p, 'themename'),
        'section'  => 'my_queary_home_product',
        'settings' => 'home_products_artical_pdf_link'.$p,
        //'active_callback' => 'choice_b_callback',
        // 'active_callback' => function( $control ) {
        //     $control->get_setting('demo_radio_control'.$p )->value() == 'b';
        // },
    )));

    

    $wp_customize->add_setting( 'my_queary_home_products_artical_link_text'.$p, array(
    'default'                   =>  'Read More',
    'sanitize_callback'         =>  'esc_textarea',
    'transport'                 =>  'refresh',
    'capability'                =>  'manage_options'
        )
    );
    $wp_customize->add_control( 'my_queary_home_products_artical_link_text'.$p, array(
        'label'                     =>  'Products card Link'.$p.' Text',
        'section'                   =>  'my_queary_home_product',
        'settings'                  =>  'my_queary_home_products_artical_link_text'.$p,
        'type'                      =>  'text',
        )
    );    
}    

this is my jquery code

var mysetting = wp.customize, infoi = 1;

mysetting.bind('ready', function () {
      // Some code
      //var mysetting = wp.customize;
      var product_count = mysetting.control('my_queary_home_product_count').setting.get();
      // console.log(product_count);
      mysetting.control('home_products_artical_pdf_link' + infoi).container.slideUp('fast');
      mysetting('demo_radio_control' + infoi, function (setting) {
      //console.log(setting);
      var articalControl = function () {
            if (setting.get() === 'a') {
                  mysetting.control('my_queary_home_products_artical_slug' + infoi).container.slideDown('fast');
                  mysetting.control('home_products_artical_pdf_link' + infoi).container.slideUp('fast');
            } else {
                  mysetting.control('my_queary_home_products_artical_slug' + infoi).container.slideUp('fast');
                  mysetting.control('home_products_artical_pdf_link' + infoi).container.slideDown('fast');
            }
      };
      articalControl();
      setting.bind(articalControl);
      });
});

I want to do this type in a dynamic in loop. How to solve it?

• This topic was modified 5 years, 11 months ago by Jan Dembowski. Reason: Fixed broken formatting