Category: notas
slideshow en la home
Viendo esta tienda, he decidido hacerme mi propio slideshow.
En el foro americano he encontrado este hilo donde el trabajo ya estaba casi todo hecho, solo he cambiado la disposición de las divs, colocandolas encima una de otras gracias a la propiedad css z-index, y he añadido una pequeña función para que el slideshow se pare cuando el ratón pasa encima.
Gracias a script.aculo.us (que viene ya instalado con Magento) es realmente muy facil conseguir unos efectos muy chulos.
Entonces, para tener un slideshow en la home, primero vamos a crear un bloque estático: CMS->Bloques Estáticos->Agregar un nuevo bloque. Le damos un nombre y un identificador, lo habilitamos y en el campo Contenido de la pestaña Información general añadimos un poco de JavaScript:
<script type="text/javascript">start_slideshow(1, 3, 3000);
function start_slideshow(start_frame, end_frame, delay) {
id = setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay);
}
function switch_slides(frame, start_frame, end_frame, delay) {
return (function() {
Effect.Fade('slide' + frame, { duration: 1.0 });
if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; }
Effect.Appear('slide' + frame, { duration: 1.0 });
if (delay == 1000) { delay = 3000; }
id = setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay);
})
}
function stop_slideshow() {
clearTimeout(id);
}
</script>
y el contenido html con las divs y sus imagenes linkeadas:
<div id="introhomepage" style="height: 230px; position: relative;" onmouseover="stop_slideshow()" onmouseout="start_slideshow(1, 3, 1000)">
<div id="slide1" class="slide" style="position: absolute; top: 0pt; left: 0pt; display: block; z-index: 3; opacity: 1;"><a href='http://www.yourdomain.com/path/to/webpage1.html'><img border='0' src='{{skin url='path/to/image.jpg'}}' /></a></div>
<div id="slide2" class="slide" style="position: absolute; top: 0pt; left: 0pt; display: none; z-index: 2; opacity: 0;"><a href='http://www.yourdomain.com/path/to/webpage2.html'><img border='0' src='{{skin url='path/to/image.jpg'}}' /></a></div>
<div id="slide3" class="slide"style="position: absolute; top: 0pt; left: 0pt; display: none; z-index: 1; opacity: 0;"><a href='http://www.yourdomain.com/path/to/webpage3.html'><img border='0' src='{{skin url='path/to/image.jpg'}}' /></a></div>
</div>
Ahora solo queda incluir este bloque donde queramos, en este caso la homepage, vamos a editarla: CMS->Gestionar las páginas->HomePage y en el campo Contenido de la pestaña Información general añadimos:
{{block type="cms/block" block_id="el_identificador" template="cms/content.phtml"}} Esta claro que hay que adaptar los enlaces y las rutas a las imagenes (estas imagenes tienen que estar en /skin/frontend/default/tutema/images/).
envio gratis por algunos productos
A raiz de este post me ha recordado que tengo que preparar algo así para mi tienda: algunos productos se pueden enviar sin gastos, a través de correos de España, sin certificado. Esta opción tiene que estar disponible unicamente si todos los productos presentes en la cesta disponen de esta opción.
La idea global es crear un atributo Envío gratis para los articulos y despues crear una regla de precios del carrito que ofrezca la opción de envío gratuito si todos los articulos comprados pueden enviarse con esta modalidad.
- Vamos a Catálogo->Atributos->Gestionar los atributos y le damos a Agregar un nuevo atributo y rellenamos la información:
Pestaña Propiedades:Propiedades del atributo
- Código del atributo: envio_gratis_correo
- Alcance: Global
- Tipo de entrada del catálogo...: Desplegable
- Valor único: No
- Valores requeridos: Sí
- Validación de entrada...: Ninguno
- Aplicar a: Todos los tipos de productos
- Usar para crear un productos configurable: Sí
plugin: WYSIWYG en el admin
Fontis acaba de publicar una extension para tener FCKeditor o TinyMCE en los campos de textos del admin.
Para instalarla, el código es:esta estable.
Para configurarla, vamos a Sistema->Configuración->(Avanzado)Admin y en la ultima pestaña, hay 2 desplegables para elegir cual de los 2 editores preferimos y en cuales textareas lo queremos.
Un plugin muy interesante para el TinyMCE es el Ajax File and Image Manager de www.phpletter.com que permite subir imagenes directamente desde nuestro ordenador. Descargamos la ultima versión (1.0 RC 4, de momento), la descomprimos y copiamos el directorio ajaxfilemanager (con su contenido) en /js/fontis/tiny_mce/plugins. Abrimos el archivo /js/fontis/tiny_mce/plugins/ajaxfilemanager/inc/config.base.php y editamos la ruta del directorio donde vamos a guardar las imagenes que se subiran a traves de este plugin. Por defecto viene:../../uploaded/.
Para Magento, para que las imagenes se guarden en el directorio media, cambiamos las lineas 43-44 de a
En este mismo fichero hay que modificar tambien, en la linea 112, reemplazar default por tinymce3.
Ahora tenemos que incluir este plugin en la declaracion del tinyMCE. Abrimos el archivo app/design/adminhtml/default/default/template/fontis/wysiwyg/wysiwyg.phtml y añadimos en la función tinyMCE.init la linea file_browser_callback : "ajaxfilemanager" y despues esta función. Al final, el fichero queda así:
completar la instalación
Acabo de reinstalar (ya no se cuantas instalaciones he hecho
) magento y me ha dado algunos problemas.
Aqui viene lo que he hecho para proximas veces:
- Ver todo en el Magento Connect:
La primera vez que vas al connect no te aparece nada. Para remediar a esto, basta con pegar:magento-core/Mage_All_Latest
en la caja de llaves de instalacion de extensiones (Paste extension key to install:) y le das a Install. - Instalar el español:
Todavia en el Connect, primero necesitamos cambiar el estado de las extensiones que aceptamos a Beta, ya que de momento la extension española esta en Beta. Vamos en la pestaña Settings y seleccionamos Beta en el desplegable.
Volvemos a la pestaña extensions y pegamos:magento-community/Locale_Mage_community_es_ES
- Crear su propio tema:
Para evitar que desaparezcan los cambios de diseño que hacemos a cada actualización de Magento, vamos a trabajar con nuestro propio tema. Dentro de /app/design/frontend/default/ creamos un directorio que llamamos mi_tema, por ejemplo y pegamos el contenido de /app/design/frontend/default/default/ dentro. Hacemos lo mismo en el directorio skin/frontend/default/.
Ya podemos activar nuestro tema, en Sistema->Configuración->(General)Diseño la pestaña Temas en el campo Por defecto ponemos mi_tema (o como sea que hayamos llamado el directorio).
- Habilitar el SEO:
Me parece que no he checkeado el box para habilitar el Search Engine Optimization, o sea la reescritura de URL's, cuando debia.
Para solucionarlo:- en el admin, Sistema->Configuración->(General)Web, en la pestaña Optimización para motores de búsqueda seleccionamos Sí del desplegable Usar reescrituras del servidor web.
- en Sistema->Cache Management, le damos a Recargar a Catalog Rewrites (en la parte de abajo).