Improve user experience #49

thiagogsr · 2017-03-09T23:34:22Z

Melhora a experiência do usuário com as melhoras:

Substituição do plugin de máscara por um que ainda é mantido e funciona muito bem tanto no desktop como no mobile
Alteração da máscara de telefone para funcionar com 10 e 11 dígitos nos formatos 0000-0000 e 00000-0000, ao invés de 0000-00000 como está atualmente
Alteração dos tipos dos campos para exibir o teclado correto no mobile

claudiosanches

Nossa velho, obrigadão pela ajuda, fazia um tempo que estava procurando algo para substituir esse script e ter uma experiencia melhor em mobile.
Fiz alguns comentários de coisas que precisam ser arrumadas para funcionar bem pra todo mundo.
Se não tiver tempo de alterar essas coisas vai estar tudo bem, posso arrumar depois de fazer merge e de boa.
Obrigado novamente.

claudiosanches · 2017-03-10T03:30:46Z

includes/class-wc-ecfb-front-end.php

@@ -72,11 +72,11 @@ public function load_order_data( $data ) {
 	public function enqueue_scripts() {
 		$suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';

-		wp_register_script( 'jquery-maskedinput', plugins_url( 'assets/js/jquery-maskedinput/jquery.maskedinput' . $suffix . '.js', plugin_dir_path( __FILE__ ) ), array( 'jquery' ), '1.4.1', true );


Talvez seria melhor manter registrando jquery-maskedinput mesmo chamando o script novo, já que não a implementação é a mesma, já que alguns outros plugins e projetos usam o script que vem deste plugin e trocar isso provavelmente iria gerar problema para umas pessoas.

O ruim é que vai carregar os dois scripts no DOM, deixando a página mais pesada. A interface dos dois plugins é a mesma: .mask. A diferença é que o maskedinput usa 9 para dígitos obrigatórios e o jquery.mask usa 9 para dígitos opcionais (no caso de máscaras numéricas), e isso vai dar conflito carregando os dois scripts.

O que sugere nesse caso?

No caso poderia carregar duas vezes o nomes script, porque poderia carregar o jQuery.mask, mesmo chamando ele de jquery-maskedinput. E a galera teria que atualizar para carregar apenas um.
Ou chamar logo apenas de jquery-maskedinput para o novo script. Também é uma opção, não bonita, mas que não vai gerar problemas.

Minha preocupação em relação a isso é que pode quebrar a máscara de quem configurou seguindo a documentação do maskedinput, como o caso que falei do dígito obrigatório/opcional.

Ex: https://github.com/claudiosanches/woocommerce-pagseguro/blob/master/assets/js/transparent-checkout.js#L89

Aqui vai parar de funcionar, pois a máscara deveria ser 000.000.000-00.

Então deixa quieto isso, melhor atualizar e notificar a galera sobre a isso xD

Depois que mergear esse eu abro um no pagseguro corrigindo a máscara lá :)

claudiosanches · 2017-03-10T03:32:31Z

includes/class-wc-ecfb-front-end.php

 					);

 					$new_fields['billing_rg'] = array(
 						'label'       => __( 'RG', 'woocommerce-extra-checkout-fields-for-brazil' ),
 						'placeholder' => _x( 'RG', 'placeholder', 'woocommerce-extra-checkout-fields-for-brazil' ),
 						'class'       => array( 'form-row-last', 'person-type-field' ),
-						'required'    => false
+						'required'    => false,
+						'type'        => 'tel'


RG é coisa de doido, tem uns que tem letras também, além de não existe formatação que funcione para todos os estados (por isso não tem máscara também).

Opa, nunca tinha visto com letra, haha, vou reverter essa parte 👍

claudiosanches · 2017-03-10T03:34:01Z

includes/class-wc-ecfb-front-end.php

@@ -236,6 +242,7 @@ public function checkout_billing_fields( $fields ) {
 		if ( isset( $fields['billing_postcode'] ) ) {
 			$new_fields['billing_postcode'] = $fields['billing_postcode'];
 			$new_fields['billing_postcode']['class'] = array( 'form-row-last', 'address-field' );
+			$new_fields['billing_postcode']['type'] = 'tel';


Se usar isso com o CEP vai deixar de funcionar corretamente para quem vende dentro e fora do Brasil, o plugin suporta uma opção para escolher os campos de CPF/CNPJ se não for venda no Brasil, e ai tem vários lugares que usam letras no postcode, exemplos: Canadá e Inglaterra.

Mas esse campo hoje tem máscara, permitindo apenas números, certo? Ou perdi algo nesse setup do plugin? PS: sou super noob em wordpress

Tem máscara, mas se eu me lembro bem, alguém me fez carregar a máscara apenas se o pais é o Brasil ou eu tenho que fazer isso ainda xD

Tem razão:

$( document.body ).on( 'change', '#billing_country', function() { if ( 'BR' === $( this ).val() ) { wc_ecfb_frontend.maskBilling(); } else { wc_ecfb_frontend.unmaskBilling(); } });

Vou fazer um commit para melhorar isso 👍

Dava para aproveitar o script ai e trocar o tipo de campo do CEP, de text para tel se for no Brasil, acho que não seria um problema em mobile.

Fiz isso, aproveitei e fiz o mesmo em todos que estavam fazendo masking/unMasking, deixando com tipo tel fixo apenas cpf/cnpj: ea7473e

thiagogsr · 2017-03-15T22:15:36Z

@claudiosanches tem previsão de quando isso virará release? Ta complicado usar no mobile :(

claudiosanches · 2017-03-15T22:23:48Z

@thiagogsr até este final de semana, estava tentando mexer com isso, mas com estava correndo com esse lance de mudar o WooCommerce 2.7 para 3.0.

claudiosanches · 2017-04-03T02:51:14Z

@thiagogsr valeu cara, muito obrigado.

thiagogsr added 9 commits March 9, 2017 19:42

Add jquery.mask

6add143

Replace mask plugin to jQuery Mask Plugin

23b3ecd

Remove jquery-maskedinput plugin

5df87b9

Fix phone mask

9362dab

Fix numeric masks

6ae2e72

Uglify frontend.js

d163ac2

Update jquery.mask to 1.14.10

af83b4b

Change the input types to the semantic type

5e48eb4

Bump version and update changelog

1c08204

claudiosanches reviewed Mar 10, 2017

View reviewed changes

thiagogsr added 4 commits March 10, 2017 00:43

Revert RG input type to text

7742c52

Swtich input types according to selected country

ea7473e

Update README

89b8646

Update frontend.min.js

de0e0a3

claudiosanches merged commit 4cd9aa2 into claudiosanches:master Apr 3, 2017

claudiosanches mentioned this pull request Apr 3, 2017

Verificar máscara em mobile #41

Closed

thiagogsr mentioned this pull request Apr 3, 2017

Melhorar experiência do usuário no mobile claudiosanches/woocommerce-pagseguro#48

Merged

thiagogsr deleted the improve-user-experience branch April 4, 2017 13:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve user experience #49

Improve user experience #49

thiagogsr commented Mar 9, 2017

claudiosanches left a comment

claudiosanches Mar 10, 2017

thiagogsr Mar 10, 2017

claudiosanches Mar 10, 2017

thiagogsr Mar 10, 2017

claudiosanches Mar 10, 2017

thiagogsr Mar 10, 2017

claudiosanches Mar 10, 2017

thiagogsr Mar 10, 2017

claudiosanches Mar 10, 2017

thiagogsr Mar 10, 2017

claudiosanches Mar 10, 2017

thiagogsr Mar 10, 2017

claudiosanches Mar 10, 2017

thiagogsr Mar 10, 2017 •

edited

thiagogsr commented Mar 15, 2017

claudiosanches commented Mar 15, 2017

claudiosanches commented Apr 3, 2017

Improve user experience #49

Improve user experience #49

Conversation

thiagogsr commented Mar 9, 2017

claudiosanches left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thiagogsr Mar 10, 2017 • edited

Choose a reason for hiding this comment

thiagogsr commented Mar 15, 2017

claudiosanches commented Mar 15, 2017

claudiosanches commented Apr 3, 2017

thiagogsr Mar 10, 2017 •

edited