Las instrucciones para descargar e instalarlo se encuentran aquí. Una vez descargados todos los archivos, se debe incluir el css y js para poder utilizarlos (recordar incluir también jquery):

<script src="ruta/a/jquery.flexbox.min.js" type="text/javascript">

<link type="text/css" rel="stylesheet" href="ruta/a/jquery.flexbox.css" mce_href="path/to/jquery.flexbox.css" />

Veamos un ejemplo:

Tenemos que crear un DIV, el cual va a ser convertido en el cuadro de texto con autocompletar:

<div id="fb"></div>

Luego, insertamos el código JavaScript:

$(document).ready(function () {
$('#fb').flexbox('resultados.php', {
watermark: 'Seleccione una elemento',
noResultsText: 'No hay resultados',
method : 'POST',
paging: {
pageSize: 15
}

});
});

El script resultados.php debe retornar un string JSON, con el siguiente formato:

{"results":[
{"id":1,"name":"Hormiga"},
{"id":2,"name":"Oso"},
{...} // los demás resultados aquí
]}

El “id” es un entero o un string identificando al elemento y es el valor que es enviado cuando el formulario el enviado.
El “name”  es un entero o un string que es mostrado para cada elemento.

En el siguiente post mostraremos algunas otras opciones que brinda este plugin.

A decir verdad, Magento es muy interesante, así que tras instalarlo ya comenzé a trabajar en la nueva versión de una tienda online, para un cliente. Sin lugar a dudas es muy superior a todas las demás opciones (al menos las que yo conozco) por lo que sin pensarlo mucho tiempo, opté por usarlo para una tienda virtual que estaba comenzando a desarrollar.

El primer problema con el que me encontré, al instalarlo en mi servidor local (localhost) fue que no me permitía ingresar al admin. En un principio pensé que estaba ingresando mal la contraseña (en el proceso de instalación te permite elegir el usuario y contraseña para el primer administrador del sitio). Pero luego me di cuenta que cuando tipeaba mal el usuario o la contraseña me daba un mensaje de error, mientras que cuando la tipeaba bien, simplemente volvía a la pantalla de login sin mostrarme ningún error.

Tras googlear un rato, encontré la solución (tomando información de distintos lugares) por lo que pensé que podría ser útil publicar aquí un resumen.

El problema parece darse en algunos navegadores (Firefox es el que uso yo) y se da porque no reconoce el dominio “localhost” como un dominio seguro. Una opción es cambiar la ruta de nuestro sitio, y en lugar de usar http://localhost/mitienda/admin usar http://127.0.0.1/mitienda/admin (127.0.0.1 es la IP para localhost). Eso puede cambiarse sencillamente desde el panel de administración, pero para ello, obviamente, tenemos que poder ingresar antes. Para cambiarlo sin ingresar al panel de administración tenemos que ejecutar una query en la base de datos MySQL, usando por ejemplo phpmyadmin.

La consulta que debemos ejecutar es la siguiente:
UPDATE core_config_data SET value="http://127.0.0.1/mitienda" WHERE path IN ('web/unsecure/base_url','web/secure/base_url') ;
(hay que cambiar “mitienda” por el nombre de la carpeta donde estemos guardando la instalación de Magento en el servidor local).

Luego probamos de entrar al admin por “http://127.0.0.1/mitienda/admin”. Eso debería funcionar, y tiene como ventaja que si copiamos la instalación a otro servidor, solamente ejecutando de nuevo esta consulta cambiando el value por el valor correcto vamos a poder usar la tienda tal como la teníamos en localhost.

Esa es sin dudas la mejor opción, ya que no tenemos que cambiar nada de código, pero acá les dejo otra forma, por si la anterior no funcionó…

Esta opción implica retocar el código de uno de los archivos del core de Magento, por lo que no es ideal y puede sobreescribrse en algún momento (por ej., al actualizar Magento). El archivo que tenemos que modificar es el siguiente:

mitienda/app/code/core/Mage/Core/Model/Session/Abstract/Varien.php

y en ese archivo tenemos que modificar las siguientes líneas:

// set session cookie params
session_set_cookie_params(
$this->getCookie()->getLifetime(),
$this->getCookie()->getPath(),
$this->getCookie()->getDomain(),
$this->getCookie()->isSecure(),
$this->getCookie()->getHttponly()
);

y dejarlas así:

// set session cookie params
session_set_cookie_params(
$this->getCookie()->getLifetime(),
$this->getCookie()->getPath()//,
//$this->getCookie()->getDomain(),
//$this->getCookie()->isSecure(),
//$this->getCookie()->getHttponly()
);


Guardamos ese archivo y probamos nuevamente. Ahora si debería funcionar, pero tenemos que recordar que este cambio que hicimos, una vez que nuestra tienda es “mudada” a un servidor en internet bajo un dominio real (y por tanto, seguro para todos los navegadores) debemos deshacerlo y volver el archivo a su estado original.

1. Si un post está categorizado bajo la categoría “Galerías”, entonces se mostrará una galería de imágenes con todas las imágenes asociadas al post

2. En single.php de Wordpress, utilizamos la función publicada en el sitio que comenté anteriormente para crear un lista de thumbnails de las imágenes

3. Con la ayuda de Galleriffic, instanciamos la galería de fotos.

En subsiguientes artículos explicaremos con más detalle el código necesario para cada uno de los pasos.

Hasta la próxima!

• namespaces (al fin!)
• funciones lamda y clausuras
• archivos Phar, para poder crear un único archivo (ala JAR en Java) con todo lo necesario para correr la aplicación
• driver nativo para MySql

Ahora tenemos que empezar a pedir a las empresas de hosting que actualicen las versiones!

Inicializamos el plugin:

$().ready(function(){
$("#tags").autocomplete('buscar_tags.php',
{ multiple: true,
autoFill: true,
selectFirst: true,
formatItem: formatItem,
formatResult: formatResult } );
});

function formatItem(row) {
return row[0] + ” (” + row[1] + “)”;
}

function formatResult(row) {
return row[0];
}

En donde:  multiple = true permite ingresar más de un valor autocompletado,  autoFill: completa la palabara para poder seleccionarla presionando enter o tab,  selectFirst hace que la primera sugerencia sea seleccionada si no se presiona enter o tab o se selecciona algo utilizando el puntero, formatItem es una función que permite formatear como se muestra cada item mientras que formatResult es una función que permite formatear cómo se muestra una vez seleccionado un ítem.
Otras posibilidades son:

• max: limitar la cantidad máxima de ítems
• minChars: mínima cantidad de caracteres que debe escribir el usuario para que se active el autocompletar
• etc

Cuando implementemos el código de buscar_tags.php, obtendremos en el parmámetro q del querystring el valor ingresado por el usuario. Por ejemplo, si el usuario ingresa “foo” se generará un request de tipo:  buscar_tags.php?q=foo&limit=10, donde limit tendrá el valor de la opción “max”.  EL script buscar_tags.php deberá retoranar el resultado un ítem por renglón. Para el ejemplo de formatItem anterior podría ser:

foreach($resultados as $resultado) {
echo $resultado[0], "|", $resultado[1], "\n";
}


1. CakePHP. Carga de archivos
Utilizando los consejos publicados en este post, implementaremos la lógica PHP para subir archivos al servidor. El siguiente método toma el nombre del directorio en el servidor al cual se quieren subir los archivos, el array de archivos del formulario y un identificador opcional en caso que se desee crear un subdirectorio en donde guardar el archivo.

/**
* uploads files to the server
* @params:
*		$folder 	= the folder to upload the files e.g. 'img/files'
*		$formdata 	= the array containing the form files
*		$itemId 	= id of the item (optional) will create a new sub folder
* @return:
*		will return an array with the success of each file upload
*/
function uploadFiles($folder, $formdata, $itemId = null) {
// setup dir names absolute and relative
$folder_url = WWW_ROOT.$folder;
$rel_url = $folder;

// create the folder if it does not exist
if(!is_dir($folder_url)) {
mkdir($folder_url);
}

// if itemId is set create an item folder
if($itemId) {
// set new absolute folder
$folder_url = WWW_ROOT.$folder.'/'.$itemId;
// set new relative folder
$rel_url = $folder.'/'.$itemId;
// create directory
if(!is_dir($folder_url)) {
mkdir($folder_url);
}
}

// list of permitted file types, this is only images but documents can be added
$permitted = array('image/gif','image/jpeg','image/pjpeg','image/png');

// loop through and deal with the files
foreach($formdata as $file) {
// replace spaces with underscores
$filename = str_replace(' ', '_', $file['name']);
// assume filetype is false
$typeOK = false;
// check filetype is ok
foreach($permitted as $type) {
if($type == $file['type']) {
$typeOK = true;
break;
}
}

// if file type ok upload the file
if($typeOK) {
// switch based on error code
switch($file['error']) {
case 0:
// check filename already exists
if(!file_exists($folder_url.'/'.$filename)) {
// create full filename
$full_url = $folder_url.'/'.$filename;
$url = $rel_url.'/'.$filename;
// upload the file
$success = move_uploaded_file($file['tmp_name'], $url);
} else {
// create unique filename and upload file
ini_set('date.timezone', 'Europe/London');
$now = date('Y-m-d-His');
$full_url = $folder_url.'/'.$now.$filename;
$url = $rel_url.'/'.$now.$filename;
$success = move_uploaded_file($file['tmp_name'], $url);
}
// if upload was successful
if($success) {
// save the url of the file
$result['urls'][] = $url;
} else {
$result['errors'][] = "Error uploaded $filename. Please try again.";
}
break;
case 3:
// an error occured
$result['errors'][] = "Error uploading $filename. Please try again.";
break;
default:
// an error occured
$result['errors'][] = "System error uploading $filename. Contact webmaster.";
break;
}
} elseif($file['error'] == 4) {
// no file was selected for upload
$result['nofiles'][] = "No file Selected";
} else {
// unacceptable file type
$result['errors'][] = "$filename cannot be uploaded. Acceptable file types: gif, jpg, png.";
}
}
return $result;
}

Dado que lo voy a usar en varios controllers, lo agregué al AppController. Un ejemplo de cómo usarlo sería el siguiente:

En la vista: <?php echo $form->file(‘File.image’); ?>
En el controller:


$fileOK = $this->uploadFiles('files', $this->data['File']);
// si el archivo fue subido correctamente
if(array_key_exists('urls', $fileOK)) {
// guardar la url en la informacion del from
$this->data['Post']['image_url'] = $fileOK['urls'][0];
}


2. jQuery

Para el frontend, usamos el plugin AjaxUpload de jQuery, disponible aquí. Les recomiendo que vean los ejemplos disponibles desde esa misma página. Una vez descargado, (requerden que también necesitan jQuery), lo guardamos en la carpeta app/webroot/js. Para poder utilizarlo, no olviden incluirlo en la vista: <?php $this->addScript($javascript->link(‘ajaxupload’)); ?>

Un ejemplo de código javascript para inicializar AjaxUpload es el siguiente:

$(document).ready(function(){
 new AjaxUpload('#att_file', {
  action: 'controller/action',
  name: 'data[Attachment][path]',
  autoSubmit: true,
  onComplete : function(file, response){
    alert('Carga Filanizada');
  },
  onChange: function(){
  }
 });
});//document ready

Debemos setear el action para que apuente al controllador y acción correspondiente.

AjaxUpload permite utilizar cualquier elemento como botón para abrir el cuadro de dialogo de seleccionar archivos. Por ejemplo, podríamos usar un div:

<div id='att_file'>Cargar Archivos</div>

AjaxUpload utiliza un iframe oculto para cargar el archivo, por lo que no es una técnica AJAX propiamente dicha, aunque logra una experiencia de uso similar.

Podríamos utlizar los eventos onChange y onComplete para mostrar un mensaje de Loading. Si es necesario adjuntar más datos para ser enviados por el formulario, se puede utilizar la propiedad data.

Con esto tenemos todos los elementos necesarios para tener carga de archivos AJAX utilizando CakePHP.

Imágen extraida del sitio web de prettyCheckboxes

En este post vamos a enfocarnos en los radio buttons y checkboxes, o “botones de opcion” y “casillas de verificación”… como nos guste llamarles.

He probado con varios plugins de jQuery, e incluso personalizarlos bastante, pero considero que prettyCheckboxes es uno de los más sencillos de utilizar. Para incluirlo en tu diseño solo tienes que:

1.- Importar jQuery (por supuesto) y el archivo prettyCheckboxes.js que podrás descargar de este sitio (allí encontraras ejemplos y una explicación mas detallada)

2.- Inicializar prettyCheckboxes (para todos los checkbox y radio buttons de la página):

    $(document).ready(function(){
        $('input[type=checkbox],input[type=radio]').prettyCheckboxes();
    });

O inicializarlo solo para algunos elementos de tus formularios:

    $(document).ready(function(){
        $('input.myCheckbox').prettyCheckboxes();
    });

Y eso es todo, ahora solo falta personalizar las imágenes (que descargas de la página de prettyCheckboxes para que se vean según tu diseño.

jQuery también dispone de una muy buena grilla, llamada FlexiGrid. Brinda todo lo que esperamos: resize de columnas, ordernar cada columna, puede cargar los datos por ajax usando XML o JSON, paginado, buscador, etc. Admás tiene un diseño muy atractivo y es muy liviana, que es uno de sus objetivos principales y lo que lo diferencia de Ext Grid.