Estoy usando JavaScrip para mostrar/ocultar un determinado elemento si se marca una determinada casilla de verificación. En mi caso, si la casilla "Transporte de carga" no está marcada, me gustaría ocultar las opciones de pago del depósito.
Agregué deposit.js en mi tema secundario y lo puse en cola agregando el siguiente código en functions.php
function load_hide_deposit_script() { if( is_page(98) ) { //script location - child theme// wp_enqueue_script( 'js-file', get_stylesheet_directory_uri() . '/deposit.js'); } } add_action('wp_enqueue_scripts', 'load_hide_deposit_script');Revisé las herramientas de desarrollo y el script se cargó correctamente.
He usado dos enfoques:
function valueChanged() { if($('.input-checkbox.thwcfe-input-field').is(":checked")) $(".cart-wcdpp-fields.order-total").show(); else $(".cart-wcdpp-fields.order-total").hide(); }y
$(".cart-wcdpp-fields.order-total").hide(); $(".input-checkbox.thwcfe-input-field").click(function() { if($(this).is(":checked")) { $(".cart-wcdpp-fields.order-total").show(300); } else { $(".cart-wcdpp-fields.order-total").hide(200); } });Hasta ahora no he logrado el resultado deseado con estos códigos.
¿Cual podría ser el problema?
Enlace a la página de la tienda (sitio de prueba) - https://siakurjers.wpengine.com/shop/
Para verificar la funcionalidad, agregue un producto al carrito y visite la página de pago.
Como puede ver, en ¿Cómo mostrar/ocultar un elemento en los estados marcados/desmarcados de la casilla de verificación usando jQuery? el $(".ItemName"). y luego asigne el parámetro "ocultar".
Intente agregar un nombre al elemento Tr y luego pruébelo. Sería mejor si puede mostrar algún código con JSfiddle o directamente en la pregunta.
Estos dos componentes (opciones de casilla de verificación y depósito) se implementan mediante complementos de terceros.
No estoy seguro de por qué JS en la pregunta no funcionó.
Basado en Calcular la tarifa de los totales del carrito (subtotal + envío) sin agregarlo al valor total del pedido en Woocommerce , utilicé una función PHP con jQuery. Se insertó en el archivo functions.php.
// Show/hide deposit options function action_wp_footer() { // Only on checkout if ( is_checkout() && ! is_wc_endpoint_url() ) : ?> <script type="text/javascript"> jQuery( function($){ // Selector var my_input = 'input[name=forwarding]'; var my_deposit = '#my_id_field'; // Show or hide function show_or_hide() { if ( $( my_input ).is(':checked') ) { return $( my_deposit ).show(); } else { return $( my_deposit ).hide(); } } // Default $( document ).ajaxComplete(function() { show_or_hide(); }); // On change $( 'form.checkout' ).change(function() { show_or_hide(); }); }); </script> <?php endif; } add_action( 'wp_footer', 'action_wp_footer', 10, 0 );