Mostrar mensaje personalizado en página de checkout según estado seleccionado

  • Autor Autor scheval
  • Fecha de inicio Fecha de inicio
scheval

scheval

Eta
Verificación en dos pasos activada
Verificado por Whatsapp
Hola, alguien que pueda darme una mano para saber qué estoy haciendo mal :S.

Intento mostrar un mensaje al usuario cuando esté en la página de checkout y seleccione, por ejemplo, "Alabama" como estado en el select box.

Acá mi código:

Insertar CODE, HTML o PHP:
function provinceCheck(province) {
    if(province == 'Alabama'){          
       Checkout.$("#province-message").show(0);
    } else {
       Checkout.$("#province-message").hide(0);
    }
}
if(typeof Checkout === 'object'){
    if(typeof Checkout.$ === 'function'){
        notificationMsg = '<p id="province-message" style="background-color:#eee; padding:10px; margin:10px 0; display:none;">Mensaje a mostrar.</p>';
       
        //Province Selectbox Selectbox
        $provinceSelectboxId = Checkout.$("#checkout_shipping_address_province");
       
        // Insert Default Message on Page Load above the shipping methode section
        Checkout.$(notificationMsg).insertAfter('.section--shipping-address');
       
        // Check Province on Page Load
        provinceName = $provinceSelectboxId.val();
       
        // Call Province Check function on Page Load
        provinceCheck(provinceName)

        // Call Province Check function on selectobox change
        $provinceSelectboxId.on("change", function(){
            provinceName = $provinceSelectboxId.val();
            provinceCheck(provinceName)
        });
       
       
    } // if ends

} // if ends

Página de prueba: https://byaman.myshopify.com
 
Hola, alguien que pueda darme una mano para saber qué estoy haciendo mal :S.

Intento mostrar un mensaje al usuario cuando esté en la página de checkout y seleccione, por ejemplo, "Alabama" como estado en el select box.

Acá mi código:

Insertar CODE, HTML o PHP:
function provinceCheck(province) {
    if(province == 'Alabama'){         
       Checkout.$("#province-message").show(0);
    } else {
       Checkout.$("#province-message").hide(0);
    }
}
if(typeof Checkout === 'object'){
    if(typeof Checkout.$ === 'function'){
        notificationMsg = '<p id="province-message" style="background-color:#eee; padding:10px; margin:10px 0; display:none;">Mensaje a mostrar.</p>';
      
        //Province Selectbox Selectbox
        $provinceSelectboxId = Checkout.$("#checkout_shipping_address_province");
      
        // Insert Default Message on Page Load above the shipping methode section
        Checkout.$(notificationMsg).insertAfter('.section--shipping-address');
      
        // Check Province on Page Load
        provinceName = $provinceSelectboxId.val();
      
        // Call Province Check function on Page Load
        provinceCheck(provinceName)

        // Call Province Check function on selectobox change
        $provinceSelectboxId.on("change", function(){
            provinceName = $provinceSelectboxId.val();
            provinceCheck(provinceName)
        });
      
      
    } // if ends

} // if ends

Página de prueba: https://byaman.myshopify.com
No tengo mucha idea de JS, pero puede ser que no estés seleccionando bién de donde debe leer los datos?

Si no tienes mucha prisa podría intentar echarle un ojo.

Un saludo!
 
Hola no entiendo tu pregunta muy bien, pero puedes intentar lo siguiente. Si dentramos en tu sitio web: https://byaman.myshopify.com/8532140/checkouts/3a607b383376c342f8dbff91b04969ce y vemos como carga el select pues carga de la siguiente forma:
Insertar CODE, HTML o PHP:
<select id="...">
<option data-alternate-values="["Alabama"]" value="AL">Alabama</option>
.
.
.
</select>
Entonces según tu código veo que obtienes el valor seleccionado del select usando la función val() => por lo cual capturas AL, y eso al pasar a tu función de provincecheck pues no al no cumplirse con la condicional oculta el mensaje. quisas deberias de probar la funcion text que te capturará Alabama.
o tambien probar con javascript nativo.
var combo = document.getElementById("elid");
var selected = combo.options[combo.selectedIndex].text;
 

Temas similares

Atrás
Arriba