¿Cómo ver la página de gracias en WooCommerce?

Cuando se está creando un comercio electrónico, lo más probable es que se desee realizar un seguimiento a través de Analytics, insertar códigos de conversión de sistemas de publicidad como pueden ser Google Ads, Bing Ads, Facebook Ads... y verificar el correcto funcionamiento. O simplemente realizar la maquetación de la página de gracias para poderla personalizar a gusto comprobando el resultado.

 Pero claro... La página de gracias no es accesible fácilmente.

¿Cómo ver la thank you page o página de gracias en WooCommerce?


Asumiendo que tenemos una tienda online construida con Wordpress y WooCommerce, podemos acceder fácilmente a la página de gracias mediante el plugin: "Thank you page viewer for WooCommerce".

Esta extensión de Wordpress permite ver de manera muy sencilla la página de gracias de una compra haciendo click en un botón que aparecerá en la página de un pedido en la administración de WooCommerce. Solo requiere instalarla y funciona sola: Al hacer clic muestra la página de gracias de ese pedido.

Plugin para ver la página de gracias en WooCommerce

Este plugin me ha ahorrado bastantes pruebas de compra para ver un resultado final y espero que os sea de ayuda a todos aquellos que estáis implementando un sitio web y queréis llegar al final del proceso de compra directamente.


Javascript extends(). Cómo heredar las propiedades de un objeto en otro

Estaba tecleando en javascript y me he encontrado en la necesidad de implementar una funcionalidad de otros lenguajes que permite crear un objeto agregando funcionalidades a otro ya existente. En estos otros lenguajes (php, java...) se suele llamar extends, pero en javascript parece ser que no existe.

Para entender su uso, podemos tener un ejemplo básico de ello (ejemplo tonto, aviso) si creamos objetos que representen profesiones


function Informatico(idPersona,nombre,telf)
{
 this.id=idPersona;
 this.name=nombre;
 this.telefono=telf;
 this.lenguajes=new Array();
 this.alertName=function(){alert(this.name)}
 this.getLenguajes=function(){for(var lenguaje in this.lenguajes)alert(lenguaje)}
 this.presentacion=function(){alert("Soy informático y me llamo" + this.name)}
}


function Piloto(idPersona,nombre,telf)
{
 this.id=idPersona;
 this.name=nombre;
 this.telefono=telf;
 this.numVuelos=0;
 this.alertName=function(){alert(this.name)}
 this.getNumVuelos=function(){return this.numVuelos}
 this.presentacion=function(){alert("Soy piloto y me llamo" + this.name)}
}

En ambos casos tenemos información redundante que les define como persona y si tuviéramos más objetos representativos de profesión la cosa se complicaría más.

No me funciona un diseño responsive en móvil...

Me he encontrado un problema al probar un diseño responsive y es que, aunque en el PC se visualiza correctamente y se modifica al redimensionar la pantalla, en un dispositivo móvil no responde de igual manera.

La solución es bien sencilla. Se debe incluir la siguiente etiqueta meta en el de la página:

<meta name="viewport" content="width=device-width, initial-scale=1">

Esta etiqueta permite indicar las dimensiones de la página y la escala aplicada, pudiéndose usar las constante device-width y device-height que indican las específicas del dispositivo que visualiza la página. Así, en este caso establecerá el viewport con las dimensiones de la pantalla y hará efectivos los cambios de escala. Sin esta entrada se establecerá siempre el tamali como el tamaño por defecto del diseño a pantalla completa.

Un link para llamar a un número de teléfono


Cuando ya es prácticamente impensable hacer una página web sin pensar en dispositivos móviles, una de las características que puede agregar un valor añadido a la experiencia de usuario, y por tanto al entorno, es que cuando se ofrezca un número de teléfono se dé la posibilidad que al hacer clic encima se pueda proceder a marcarlo.


Y esto aparentemente tan sofisticado, para el desarrollador únicamente supone incluir el número de teléfono en un link como cualquier otro enlace, eso sí teniendo en cuenta que, al igual que cuando un enlace a web incluye el prefijo http: y un enlace a una dirección de correo incluye el prefijo mailto:, en este caso se deberá incluir el prefijo tel: precediendo al número.


Un ejemplo:

Diseño responsivo y diseño adaptativo: ¿Qué son y en qué se diferencian?

Cada día hay más gente conectada a Internet desde diferentes dispositivos que no son un PC sobremesa. Teléfonos móviles, smartphones, tablets, smart TV, son y serán métodos de navegación y operación cada día más habituales, y todos ellos tienen tamaños de pantalla y maneras de operar diferentes.




Sin embargo, muchas de las webs (o aplicaciones web) que existen no contemplan estos dispositivos como algo genérico. En el diseño de una pantalla se toma un tamaño estándar, que suele ser de una pantalla de sobremesa de entre 800 y 1200 píxeles, y se implementa tal cual, haciendo la navegación bastante tediosa desde cualquier otro dispositivo con distinta resolución de pantalla. Si la pantalla es menor a la contemplada en el diseño aparecen scrolls infinitos que dificultan la localización del contenido de interés. Si es mayor, el espacio desperdiciado es enorme y podría haber servido para distribuir el contenido de otra manera que ayudase más a la identificación de los puntos clave de la página.

Diseño web responsivo o responsive web design (RWD)


Una de las maneras de solucionar este problema de distribución de contenido es el diseño responsivo (responsive design) el cual adapta las estructuras de la página a las medidas de pantalla del dispositivo para optimizar al máximo el espacio y dar una mejor experiencia de usuario al visitante.


css3 y navegadores antiguos

Me preguntaron no hace mucho sobre cómo hacer que un fondo con degradado se viera en navegadores antiguos, aunque se implementara en css3. Es una buena pregunta.

Hasta ahora se usaba una imagen con el degradado y se establecía como background-image, pero css3 permite hacer esto mismo sin tener que descargar imágenes, por lo que se ahorra tráfico de datos y se gana en velocidad de carga de la web.

La primera idea es hacer:

body{background: linear-gradient(#eee 0, #fff 100%) no-repeat}

Esta línea es totalmente válida en css3 y la interpretarán los navegadores modernos (aunque sea con un prefijo), pero un navegador antiguo la omitirá ya que no la entiende.

Prefijos en css

Los fabricantes de navegadores constantemente están desarrollando e implementando funcionalidades que forman parte de los estándares web o que encuentran de utilidad y creen que formarán parte de estos estándares en un futuro.

En este segundo caso implementan la funcionalidad, pero estableciendo a la propiedad un prefijo para remarcar su carácter no "estándar oficial" (hasta puede estar en nivel "recomandación" del estándar) y por indicar que posibles futuras adaptaciones podrían cambiar (un poco) su conducta. 

Así podemos encontrar los prefijos:
  • -webkit-  Para los navegadores basados en webkit (Chrome, Konqueror, Safari, en breve Ópera y otros)
  • -o- Para Ópera hasta la fecha
  • -ms- Internet Explorer
  • -moz-  Navegadores basados en Gecko (Firefox y otros)

y su uso se realiza mediante la sintaxis: -prefijo-propiedad

Así podemos encontrar:

.micapa{
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}

En el uso de prefijos css, se debe tener en cuenta que:

- Se debería indicar la propiedad genérica sin prefijo para el caso en que que el navegador no esté entre los que tienen prefijo especificado, este tenga posibilidad de interpretar el estilo.

- Además, se recomienda que la última de las propiedades sea la que cumplirá el estándar y que interpretarán todos los navegadores ya que es mucho mejor siempre usar la opción definida como estándar que una versión propia del navegador que puede tener deficiencias o funcionalidades extras.

- El uso de estos prefijos no es estándar y provocará errores en los validadores de código css, cosa a tener en cuenta para disponer de un código limpio y por lo que debería haber un mantenimiento de las hojas de estilo, eliminando estas entradas una vez se hayan estandarizado e implementado en su versión no-específica.

Así que, como todo, tiene pros y contras que se deben valorar antes de realizar una implementación con este tipo de propiedades.