WordPress - Como anidar un select en una funcion

 
Vista:
Imágen de perfil de Orlando
Val: 27
Ha mantenido su posición en WordPress (en relación al último mes)
Gráfica de WordPress

Como anidar un select en una funcion

Publicado por Orlando (15 intervenciones) el 19/06/2018 04:04:07
Buen día grupo.

Tengo la siguiente función php en el archivo function.php.
Es un select, al seleccionar la primera opcion : En la mañana, quisiera que en el siguiente combo me traiga
automaticamente la opcion de : Me cepillo, desayuno y si selecciono la otra opcion En la tarde me traiga
automaticamente la opcion de : Tomo la siesta, almuerzo y si tomo la otra ocion de En la noche me traiga
la otra opcion de: Duermo, ceno. Es un combo anidado. Como pueden ver lo tengo en php con javascript pero no se hacerlo en el programa function.php, mas abajo muestro el codigo en php y javascrit.

Muchas gracias de antemano.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?php
/**
 * Añade el campo REGION a la página de checkout de WooCommerce
 */
add_action('woocommerce_before_order_notes', 'agrega_mi_campo_personalizado');
 
function agrega_mi_campo_personalizado( $checkout ) {
 
	echo '<h2>'.__('INDICA QUE HACES EN CADA MOMENTO DEL DIA').'</h2>';
	woocommerce_form_field( 'accion', array(
	    'type'          => 'select',
	    'class'         => array( 'wps-drop' ),
	    'label'         => __( 'Opcion a escoger' ),
	    'options'       => array(
	    	'blank'		=> __( 'Selecciona tu opcion', 'wps' ),
	        'morning'	=> __( 'En la mañana', 'wps' ),
	        'afternoon'	=> __( 'En la tarde', 'wps' ),
	        'evening' 	=> __( 'En la noche', 'wps' )
	    )
 ),	$checkout->get_value( 'accion' ));
}
 
/**
 * Actualiza la información del pedido con el nuevo campo
 */
add_action( 'woocommerce_checkout_update_order_meta', 'actualizar_info_pedido_con_nuevo_campo' );
 
function actualizar_info_pedido_con_nuevo_campo( $order_id ) {
    if ( ! empty( $_POST['accion'] ) ) {
        update_post_meta( $order_id, 'ACCION', sanitize_text_field( $_POST['accion'] ) );
    }
}
 
?>



Aqui corre excelente, pero no se correrlo no armarlo en function.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
echo
'
<meta charset="utf-8">
<script src="comuna.js"></script>
    <p>
        <select id="select1" onchange="cargarSelect2(this.value);">
            <option value="0">Selecciona tu opcion</option>
            <option value="1">En la mañana</option>
            <option value="2">En la tarde</option>
            <option value="3">En la noche</option>
        </select>
    </p>

    <p>
        <select id="select2" onchange="seleccinado_select2();" disabled>
            <option value="0">Elige</option>
        </select>
    </p>
';


Al dar clic en la primera, se depliega esta segunda en javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function cargarSelect2(valor)
{
    var arrayValores=new Array(
        new Array(1,1,"Me cepillo"),
        new Array(1,2,"desayuno"),
        new Array(2,1,"Tomo la siesta"),
        new Array(2,2,"almuerzo"),
        new Array(3,1,"Duermo"),
        new Array(3,2,"ceno")
    );
    if(valor==0)
    {
        // desactivamos el segundo select
        document.getElementById("select2").disabled=true;
    }else{
        // eliminamos todos los posibles valores que contenga el select2
        document.getElementById("select2").options.length=0;
 
        // añadimos los nuevos valores al select2
        document.getElementById("select2").options[0]=new Option("Elige una ", "0");
        for(i=0;i<arrayValores.length;i++)
        {
            // unicamente añadimos las opciones que pertenecen al id seleccionado
            // del primer select
            if(arrayValores[i][0]==valor)
            {
                document.getElementById("select2").options[document.getElementById("select2").options.length]=new Option(arrayValores[i][2], arrayValores[i][1]);
            }
        }
 
        // habilitamos el segundo select
        document.getElementById("select2").disabled=false;
    }
}
ejemplo99
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Alejandro

Crear combo anidado en function.php

Publicado por Alejandro (169 intervenciones) el 10/04/2024 20:42:01
Buen día, Orlando.

Para lograr el mismo comportamiento en el archivo function.php de WordPress, puedes utilizar el siguiente código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/**
 * Añade el campo REGION a la página de checkout de WooCommerce
 */
add_action('woocommerce_before_order_notes', 'agrega_mi_campo_personalizado');
 
function agrega_mi_campo_personalizado( $checkout ) {
    echo '<h2>'.__('INDICA QUE HACES EN CADA MOMENTO DEL DIA').'</h2>';
    woocommerce_form_field( 'accion', array(
        'type'          => 'select',
        'class'         => array( 'wps-drop' ),
        'label'         => __( 'Opcion a escoger' ),
        'options'       => array(
            'blank'     => __( 'Selecciona tu opcion', 'wps' ),
            'morning'   => __( 'En la mañana', 'wps' ),
            'afternoon' => __( 'En la tarde', 'wps' ),
            'evening'   => __( 'En la noche', 'wps' )
        ),
        'custom_attributes' => array(
            'onchange' => 'cargarSelect2(this.value);'
        )
    ), $checkout->get_value( 'accion' ));
}
 
/**
 * Actualiza la información del pedido con el nuevo campo
 */
add_action( 'woocommerce_checkout_update_order_meta', 'actualizar_info_pedido_con_nuevo_campo' );
 
function actualizar_info_pedido_con_nuevo_campo( $order_id ) {
    if ( ! empty( $_POST['accion'] ) ) {
        update_post_meta( $order_id, 'ACCION', sanitize_text_field( $_POST['accion'] ) );
    }
}

Este código añade el campo de selección en la página de check-out de WooCommerce y utiliza el atributo onchange para llamar a la función cargarSelect2 en JavaScript cuando se selecciona una opción en el primer select.

Luego, en tu archivo JavaScript comuna.js, puedes tener la función cargarSelect2 con el mismo contenido que mencionaste anteriormente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function cargarSelect2(valor) {
    var arrayValores = new Array(
        new Array(1, 1, "Me cepillo"),
        new Array(1, 2, "desayuno"),
        new Array(2, 1, "Tomo la siesta"),
        new Array(2, 2, "almuerzo"),
        new Array(3, 1, "Duermo"),
        new Array(3, 2, "ceno")
    );
    if (valor == 0) {
        // desactivamos el segundo select
        document.getElementById("select2").disabled = true;
    } else {
        // eliminamos todos los posibles valores que contenga el select2
        document.getElementById("select2").options.length = 0;
 
        // añadimos los nuevos valores al select2
        document.getElementById("select2").options[0] = new Option("Elige una ", "0");
        for (i = 0; i < arrayValores.length; i++) {
            // unicamente añadimos las opciones que pertenecen al id seleccionado
            // del primer select
            if (arrayValores[0] == valor) {
                document.getElementById("select2").options[document.getElementById("select2").options.length] = new Option(arrayValores[i][2], arrayValores[i][1]);
            }
        }
 
        // habilitamos el segundo select
        document.getElementById("select2").disabled = false;
    }
}

Recuerda que debes asegurarte de tener el archivo comuna.js en la misma ubicación que el archivo function.php o ajustar la ruta en el atributo src del [i]script
en el archivo function.php.

Espero que esto te ayude a lograr el mismo comportamiento en el archivo function.php de WordPress.

¡Buena suerte!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar