Woocommerce, Prestashop o Magento, que plataforma usar?

Una tienda online puede resolverse de unas 100 (o unas 1000) maneras diferentes.

Voy a dividir las opciones principales en 3 grupos:

La mas simple, pero no necesariamente la mas barata es utilizar una de las tiendas online pre-instaladas:

Por ejemplo: wix o 1and1

Pros:

• La puedes tener montada mañana, con una inversión inicial cercana a cero.

Contras:

• Aunque prometan ser gratuitas no lo son. Son gratis un tiempo… o cobran comisión, pero «pre-hecho» y gratis 100% no hay nada.
• No son escalables ni te ponen fácil la migración a otro sistema porque el negocio de ellos es «retenerte». Difícilmente podrás empezar usando esto «y si va bien» ya harás una tienda «mas adelante»… porque mas adelante no podrás ni aprovechar el posicionamiento que tu tienda haya conseguido.
• Cualquier desarrollo a «a medida» esta descartado, porque lo que te dan es lo que hay… «y punto».
• Los métodos de cobro son los que ellos aceptan (todos cobran comisión) y no hay mas.

Personalizar las pestañas de la página de producto de Woocommerce

Muchas veces no necesitamos todas las opciones que nos ofrece Woocommerce en el backend de nuestra página de producto, y puede ser que además necesitemos otras que no están. Editando el archivo functions.php de nuestro tema podemos conseguirlo. En este post aprenderemos a:

• Crear custom fields para cualquier pestaña
• Crear pestañas personalizadas (custom tabs)
• Esconder las pestañas que no nos interesan.

Empecemos pues!

Añadir un custom field

1. Creamos la función que generará nuestros custom fields:

Generadores de CSS

Aquí dejo una pequeña recopilación de generadores de CSS, para tenerlos más a mano en el uso diario.

CSS3 Generator (border radius, sombra de caja, sombra de texto, rgba, font face, columnas múltiples, box resize, box sizing, outline, transición, transformación, flexbox, degradado): http://css3generator.com/

Escala de grises: http://labs.voronianski.com/css3-grayscale/

Degradados: http://www.colorzilla.com/gradient-editor/

Border Radius: http://border-radius.com/

Formas:
https://coveloping.com/tools/css-shapes-generator
http://www.samuelrossille.com/css-shape/#1142AAy21z-17z-17z11z0

Solucionar problemas con Internet Explorer antigüo

Muchas veces tenemos problemas para visualizar correctamente nuestra página web en Explorer, o en sus versiones antiguas. Aquí tenemos unos cuantos recursos que nos ayudarán a corregir los problemas de visualización que hayamos detectado:

Si no lee etiquetas HTML5:

<!– [if lt IE 9]> <script type=»text/javascript»> document.createElement(«nav»); document.createElement(«header»); document.createElement(«main»); document.createElement(«footer»); document.createElement(«section»); document.createElement(«article»); document.createElement(«aside»); </script> <![endif]–>

Hacer un multisite en WordPress

Después de pelearnos mucho con plugins de traducción (qtranslate, ztranslate…) hemos llegado a la conclusión que si queremos tener nuestra web en varios idiomas, la mejor opción es hacer un multisite. Esto nos permitirá tener un WordPress paralelo independiente para cada idioma. Para hacerlo:

1. Desactivar todos los plugins

2. Abrir wp-config.php y añadir

define( ‘WP_ALLOW_MULTISITE’, true );

justo antes de /* That's all, stop editing! Happy blogging. */.

3. Ir a Herramientas > Configuración de red y crear la red.

CSS para Internet Explorer

Muchas veces nuestra página web se ve perfecta hasta que PAM! la abres en Explorer y te quieres morir. Para arreglar esas cosas que sólo se «desmontan» en nuestro querido IE podemos fácilmente asignar a nuestra página un css que únicamente se aplique en el caso de que el explorador sea Internet Explorer de X versión (los Explorer más nuevos cada vex se comportan mejor, pero no se puede descartar, por ejemplo, una versión 9).
Por ejemplo, yo quiero afectar a la versión 9 de IE y anteriores:

Emular una web en varios dispositivos

Para comprobar como se verá una web (local o no) en varios dispositivos, el navegador Google Chrome dispone de una herramienta muy útil.

Tenemos que ir a Menú > Más herrramientas > Herramientas para desarrolladores (o Ctrl + Mayús + I).

Para activar el emulador utilizamos el botón con forma de dispositivo ( ). Aparecerá un espacio de trabajo con varias opciones. La más importante es el desplegable «Device», donde escogeremos qué dispositivo queremos simular. Importante: hay que recordar actualizar la página para que se adapte al dispositivo que hemos escogido, muchas veces no lo hace de forma automática. Hay otras opciones útiles, como rotar el dispositivo, poner una medida customizada…

Redireccionar localhost a una URL en Windows

Sin gestor:

Ir a la configuración del Apache.

Buscar la línea #LoadModule vhost_alias_module modules/mod_vhost_alias.so y descomentarla (quitar la almohadilla).

Ir a C:\Windows\System32\drivers\etc y abrir el archivo hosts.

Escribir la IP de localhost (127.0.0.1) si nuestra IP es dinámica o nuestra IP si es estática.

Con gestor (en este caso Ampps):

Ir a la configuración del Apache.

Buscar la línea #LoadModule vhost_alias_module modules/mod_vhost_alias.so y descomentarla (quitar la almohadilla).

Ir al Panel de Control de Ampps (icono de la casita o http://localhost/ampps/) y introducir los datos que queramos. Por ejemplo, para direccionar la carpeta «kult» (a la cual se accede desde http://localhost/kult/ o http://170.0.0.1/kult/) a http://www.kultbarcelona.com/, su futuro dominio, introduciríamos:

Crear una plantilla para una página que lista una categoría en Magento

Cuando creamos un link a una categoría para mostrar una serie de artículos, estos se muestran con la estructura por defecto de nuestro tema. Si queremos personalizar cómo se ve una categoría en concreto, podemos hacerlo creando una plantilla que asociaremos a esta categoría. Para ello seguiremos el siguiente proceso:

• 1. Crear un bloque CMS con las siguientes características:
  Nombre: Plantilla
  Identificador: plantilla
  Contenido: {{block type="catalog/navigation" name="catalog.categories" template="catalog/navigation/plantilla.phtml"}}
• 2. Crear app\design\frontend\default\mitema\template\catalog\navigation\plantilla.phtml con el contenido que queramos.
• 3. En Magento ir a Catálogo > Administrar Categorías > Categoría > Display Settings >
  Display Mode: Sólo bloque estático
  CMS Block: Plantilla

Ver las rutas de los archivos (o cómo personalizar un Magento y no morir en el intento)

A veces customizar un Magento es desesperante, por lo caótico de su estructura: quieres cambiar de sitio un elemento, modificar un texto, etc, y te encuentras perdido en ramificaciones, subcarpetas, archivos que llaman otros archivos… Para simplificar un poco este proceso Magento nos ayuda diciéndonos qué elementos conforman la estructura de la página que estamos viendo.

Para ello tendremos que ir al panel de administrador, en el menú superior ir a Sistema, y en el panel lateral Avanzado > Desarrollador.
En la pestaña Depurar encontraremos las opciones «Motor de perfiles»,  «Pistas del path de plantilla» y «Agregar nombres de bloques a la ayuda».