http://www.bubuku.com Developer Mon, 07 Nov 2011 08:00:25 +0000 http://backend.userland.com/rss092 en Un buen plugin para redireccionar las páginas dentro de wordpress es Page Links to [1], es el que suelo utilizar para que un link del menú principal vaya al primer link de su submenú. El único inconveniente que me he encontrado es al utilizarlo en sitios multi-idiomas, si necesitamos poner url absolutas por temas de SEO, debido a que  Page links to [2] solo permite insertar una url. Como solucionamos este problema si tenéis por ejemplo configurado wordpress para estas manera. Idioma castellano: http://www.tudominio.com/pag-destino.html Idioma inglés: http://www.tudominio.com/en/pag-destino.html   Pues dirigimos a la página donde queremos implementar la redirección y en Point to this URL de Page links to, pondremos: [html] http://www.tudominio.com/en/pag-destino.html [/html] Si realizamos solo esto, la redirección no funcionaría debido a que Page links to no lo interpreta correctamente. Tenemos que ir al archivo page-links-to.php  (v. 2.5) del plugin y en la línea 210 sustituir: [php] $link = esc_url( $links[$id] ); [/php] por [php] $link = __( $links[$id] ); [/php] Con este simple cambio tendríamos solucionado el problema, personalmente no me gusta modificar el código de los plugin debido a que si lo actualiza perdería esa modificación. Como estas cosas siempre se suelen olvidar normalmente utilizo el plugin dashboard post it [3] que crea en el escritorio de la admin de wordpress una caja donde poner anotaciones. Nota: Plugin utilizado para el sitio multi-idioma qTranslate [4] [1] http://wordpress.org/extend/plugins/page-links-to/ [2] http://wordpress.org/extend/plugins/page-links-to/ [3] http://wordpress.org/extend/plugins/dashboard-post-it/ [4] http://wordpress.org/extend/plugins/qtranslate/ http://www.bubuku.com/blog/redireccionar-paginas-en-una-web-multi-idioma-con-wordpress/ En el artículo anterior Multiplicar por N unidades, cada vez que añades un producto al carrito [1], vimos como modificar las cantidades a añadir al carrito en la vista del producto. En esta ocasión vamos a ver como modificar la cantidad que va al carrito al pulsar sobre el botón de añadir en el listado de productos. Nos vamos a product-list.tpl y donde se inicia el blucle para generar el listado de productos. [html] {foreach from=$products item=product name=products} [/html] Añadimos las siguientes líneas. [html] {foreach from=$product.features item=feature} {if $feature.name=='Multiplo'} {assign var=multiplo value=$feature.value} {else} {assign var=multiplo value=1} {/if} {/foreach} [/html] Multiplo indicara la cantidad a añadir en el carrito una vez que pulses en el botón de añadir, si no tienes muy claro que es múltiplo pásate por el artículo anterior [2]. Luego tenemos que localizar la línea que genera el botón de añadir. [html] {l s='Add to cart'} [3] [/html] Y le añadimos un atributo llamado cantidad con el valor de multiplo, para luego capturarlo, quedando de la siguiente forma. [html] {l s='Add to cart'} [4] [/html] Y ya en último lugar nos vamos al módulo que captura el click en el botón. Nos vamos al módulo blockcart, como ya os he comentado en otras ocasiones, dicho módulo lo tengo dentro del tema para no mezclar churros con meninas. Abrimos el fichero ajax-cart.js, en el veremos la función overrideButtonsInThePage y el evento que captura el click. [javascript] $('.ajax_add_to_cart_button').unbind('click').click(function(){ var idProduct = $(this).attr('rel').replace('ajax_id_product_', ''); ajaxCart.add(idProduct, null, false, this); return false; }); [/javascript] Añadimos la variable cantidad que captura el atributo cantidad y añadimos también la cantidad a la función ajaxCart.add para que envíe su valor. [javascript] $('.ajax_add_to_cart_button').unbind('click').click(function(){ var idProduct = $(this).attr('rel').replace('ajax_id_product_', ''); var cantidad = $(this).attr('cantidad'); ajaxCart.add(idProduct, null, false, this,cantidad); return false; }); [/javascript] Y con estos sencillos paso, ya podríamos enviar al carrito, las unidades de productos según necesidades del proyecto. Cualquier comentario es bien recibido... [1] http://www.bubuku.com/blog/multiplicar-por-n-unidades-cada-vez-que-anades-un-producto-al-carrito/ [2] http://www.bubuku.com/blog/multiplicar-por-n-unidades-cada-vez-que-anades-un-producto-al-carrito/ [3] http://www.bubuku.com{$base_dir}cart.php?add=&id_product={$product.id_product|intval}&token={$static_token} [4] http://www.bubuku.com{$base_dir}cart.php?add=&id_product={$product.id_product|intval}&token={$static_token} http://www.bubuku.com/blog/cambiar-numero-unidades-a-anadir-en-el-carrito-en-el-listado-de-productos/ En ocasiones necesitamos que algunos productos se compren por ejemplo de 5 en 5. Creo que la mejor solución y más sencilla es realizar los siguientes paso: Lo primero es irnos al Admin/Catálogo/Características y añadimos una nueva característica llamada por ejemplo Multiplo. Luego crearemos los valores que necesitemos a la característica creada, por ejemplo 5 Nos vamos las características del producto que vayamos a utilizar para este menester, asignamos el valor 5 a múltiplo y guardamos Ahora vamos a modificar product.tpl para mostrar un combo si la característica múltiplo tiene algún valor. Al inicio de product.tpl buscamos la característica Multiplo del producto y declaramos la variable multiplo con su valor. [php] {foreach from=$features item=feature} {if $feature.name=='Multiplo'} {assign var=multiplo value=$feature.value} {/if} {/foreach} [/php] Buscamos donde se encuentra el input de la cantidad (id=quantity_wanted) y sustituimos: [php] [/php] Por: [php] {if $multiplo!=''} {section name=foo start=$multiplo loop=100 step=$multiplo} {assign var=box_qty value=$smarty.section.foo.index} {$box_qty} {$smarty.section.foo.index} {/section} {else} {/if} [/php] Con estas líneas conseguimos que solo se muestre el combo con el multiplicador en los productos que tengan la característica definida para ese fin. Y mediante la función section [1] definimos el bucle. Ah!! y recordar que también puedes modificar el número de productos en los ficheros del tema shopping-cart.tpl y shopping-cart-product-line.tpl, en los enlaces con las clase cart_quantity_up y cart_quantity_down. Bueno creo que esta es la mejor opción, si alguien se anima o tiene otra, ya sabe que aquí tiene un espacio... [1] http://www.smarty.net/docsv2/es/language.function.section.tpl http://www.bubuku.com/blog/multiplicar-por-n-unidades-cada-vez-que-anades-un-producto-al-carrito/ En estos momentos, estoy metido de lleno (jj, soy más multitarea que win7) en un proyecto de piscinas con prestashop. En el proyecto nos surgio dos tipos diferente de contenidos, uno el de venta normal y otro con información y recambios. En el contenido de información no se vendería el producto pero si los recambios. La página donde que muestran los accesorios de un producto suele mostrar estos datos. [1]Y nos dimos cuentas que necesitabamos más datos, como por ejemplo poder modificar el número de unidades de un accesorio a añadir en  el carro, ppor defecto 1 unidad.  Con lo cual segui esta nueva vista. [2]Para poder añadir la funcionalidad de modificar las unidades a añadir al carro, tendremos que realizar los siguientes paso: Modificación product.tpl En el foreach que crea la lista de accesorios añadimos una variable llamada index que tendra el valor de la posición del bucle. [html]{foreach from=$accessories key=index item=accessory name=accessories_list}[/html] Luego añadiremos el input segun necesidades y ponemos como id el variable index creada anteriormente. [html][/html] Y para finalizar las modicicaciones en este fichero. Modificamos el estilo del enlace del botón de añadir ajax_add_to_cart_button por ajax_accessory_add_to_cart, este estilo nos servira para luego identificar la acción a tomar cuando pulsemos sobre el link, lo veremos más adelante. Lo he llamado de forma diferente para separar el funcionamiento de las vistas de contenidos normales e informativos, así no juntamos los churos con la meninas. Y añadiremos al link un atributo nuevo idAccesorio="{$index}", para luego asociar el link con el input. Modificación ajax-cart.js Fichero situado en /modules/blockcart, personalmente me gusta dejar todo lo que se pueda dentro del tema, por varias razones porque si actualizas la versión y tocas bloques que vienen por defecto en prestashop se sobreescribes y pierdes los cambios, y por tener todo lo del tema centralizado. Asi que copiamos dicho fichero y dentro del tema creamos las carpetas /modules/blockcart y pegamos dentro el fichero. Ahora lo que tenemos que hacer es capturar el click que hacemos en el link de añadir. Para ello utilizaremos el estilo que creamos anteriormente ajax_accessory_add_to_cart. Dentro de la función overrideButtonsInThePage añadimos lo siguiente: [javascript] $('.ajax_accessory_add_to_cart').unbind('click').click(function(){ var idAccesorio= $(this).attr('idAccesorio'); var cantidad=$('#cantidad-'+idAccesorio).val(); var idProduct = $(this).attr('rel').replace('ajax_id_product_', ''); ajaxCart.add(idProduct, null, false, this,cantidad); return false; }); [/javascript] La variable idAccesorio, tendrá el valor que tenga el atributo idAccesorio que pusimos en el link, con este valor sabremos que input tiene asociado y obtendremos su valor en la variable cantidad, la cual enviamos a la función add. Nota: Al dar a añadir, se muestra un recuadro que va del producto al carrito, para informar al usuario que el producto se a añadido, la zona del producto viene marcada por el estilo ajax_block_product, con este estilo podemos definir la zona a mover (div, p, li, table, etc...). Bueno espero que esto os ayude y disculpar si mis palabras son algo enrevesadas. Si algunos de los que me escuchan tienen otra forma de hacerlo, comentaríos, etc... sería un placer discutir sobre ello. [1] http://www.bubuku.com/wp-content/uploads/blog_accesorios-01.gif [2] http://www.bubuku.com/wp-content/uploads/blog_accesorios-02.gif http://www.bubuku.com/blog/como-modificar-la-cantidad-de-unidades-al-compar-accesorios-de-un-producto-en-prestashop/ Hola a todos, si utilizáis Swift Mailer para realizar los envío de newsletter puede que al montarlo en algunos servidores compartido os de un error 'open_basedir restriction in effect', como este: [html] Warning: is_writable() [function.is-writable]: open_basedir restriction in effect. File(/var/tmp) is not within the allowed path(s): (/usr/home/prueba.com/:/home/prueba.com/:/usr/home/phpMyAdmin-plan6/:/usr/home/webstats/) in /usr/home/prueba.com/web/com/Swift-4.0.6/preferences.php on line 15 Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at /usr/home/prueba.com/web/com/Swift-4.0.6/preferences.php:15) in /usr/home/prueba.com/web/com/session.class.php on line 7 [/html] La solución es la siguiente, os vais al fichero llamado 'preferences.php' y sustituís estas líneas: [php] if (function_exists('sys_get_temp_dir') && is_writable(sys_get_temp_dir())){ Swift_Preferences::getInstance() -> setTempDir(sys_get_temp_dir()) -> setCacheType('disk'); } [/php] por [php] if (function_exists('ini_get') && is_writable(ini_get('upload_tmp_dir'))){ Swift_Preferences::getInstance() -> setTempDir(ini_get('upload_tmp_dir')) -> setCacheType('disk'); } [/php] Con este simple cambio se soluciona el problema. http://www.bubuku.com/blog/tips/error-en-directorio-temporal-swift-mailer/ Vamos a realizar la implementación sobre el tema que trae Prestashop por defecto, situado en 'themes/prestashop' Nos vamos a 'http://www.shadowbox-js.com/' y nos descargamos los ficheros con la configuración según nuestras necesidades. Una vez bajado, dejamos los ficheros en el directorio 'js/jquery' donde hemos instalado la tienda. Abrimos el fichero 'header.tpl' y agregamos [javascript] <link href="{$content_dir}js/jquery/shadowbox-3.0.3/shadowbox.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="{$content_dir}js/jquery/shadowbox-3.0.3/shadowbox.js"></script> <script type="text/javascript">window.onload = Shadowbox.init;</script> [/javascript] Después del siguiente código en la línea (31) [javascript] <script type="text/javascript" src="{$content_dir}js/jquery/jquery.hotkeys-0.7.8-packed.js"></script> [/javascript] Abrimos el fichero "product.tpl" del tema y comentamos la línea (12): [javascript]var jqZoomEnabled = {if $jqZoomEnabled}true{else}false{/if};[/javascript] Reemplazamos la línea (102): [javascript]<img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" {if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox')}"{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" {/if} id="bigpic"/>[/javascript] Por: [javascript]<a href="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" rel="shadowbox[galerieproduit]"><img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" /></a>[/javascript] Reemplazamos la línea (ligne 116) : [javascript]<li id="thumbnail_{$image.id_image}"> <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" title="{$image.legend|htmlspecialchars}"> <img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" /> </a> </li>[/javascript] Por : [javascript]<li id="thumbnail_{$image.id_image}"> <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="shadowbox[galerieproduit]" title="{$image.legend|htmlspecialchars}"> <img id="thumb_{$image.id_image}" rel="shadowbox[nomdelagalerie]" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" /> </a> </li>[/javascript] Abrimos el fichero "product.php" , situado en el raíz de la tienda y comentamos la línea (79): [php]$css_files = array( __PS_BASE_URI__.'css/thickbox.css' => 'screen' );[/php] Comentamos también la linea (85): [php]__PS_BASE_URI__.'js/jquery/thickbox-modified.js',[/php] Comentamos la línea (93) [php]/* jqZoom */ $jqZoomEnabled = (Configuration::get('PS_DISPLAY_JQZOOM') == 1); if ($jqZoomEnabled) { $js_files[] = __PS_BASE_URI__.'js/jquery/jquery.jqzoom.js'; $css_files[__PS_BASE_URI__.'css/jqzoom.css'] = 'screen'; }[/php] http://www.bubuku.com/blog/implementar-shadowbox-en-prestashop/ Como sabéis, el tema del blog esta sin terminar y cuando saco algo de tiempo lo voy mejorando. En esta ocasión quería mostrar mis últimos tweens en el lateral derecho, normalmente uso plugin para mostrarlo, pero para evitar el uso indiscriminado de plugin busque otra alternativa. Mirando en la documentación de twitter ví que podíamos sacar información de twitter en los formatos JSON, XML y ATOM,  a través de su API [1] mediante una url y el identificador de usuario. Solo con estos dos datos recibiramos la información necesaría para mostrarla en páginas html, flash, etc... Como lo vamos a mostrar en wordpres y no quería complicame la vida, busque algo que tuviera pocas líneas de código en javascript y encontre esto: [html] [/html] Donde 'id_usu' es el identificador del usuario y 'count' el número de mensajes a mostrar. Está información se mostrara en una capa llamada 'twitter_update_list', aquí tenéis el ejemplo. [html] [/html] Ya con esta información, fui a la admin de wordpress, a widgets y arrastre uno llamado 'texto' hacia la zona 'sidebar', en dicho widget inserte el siguiente código: [html] Twitter Sigueme en Twitter [2] [/html] Ya tenia todo funcionando perfectamente, pero luego pensé que quizás sería más interesante mostrar la información un una de mis lista para que la información tuviera más movimiento. Y gracias a esta idea descubrí esta página Twitool-box [3] donde te indican la url que necesitas para sacar la información según sea el caso añadiendo pocos parámetros. Por ejemplo para mostrar los últimos 5 tweens de mí lista de desarrolladores, nos vamos a la página mencionada anteriormente, al formulario 'GET list statuses' e insertamos los datos. [4] Esta serí a la url resultante para recibir los datos en JSON: [html] http://api.twitter.com/1/bubuku/lists/desarrolladores/statuses.json?per_page=5[/html] Y este el código html que tendríamos que insertar en el widget de wordpress. [html] Twitter! Sigueme en Twitter! [5] [/html] Si alguien, utiliza otra formas o quieres comentar alguna parte., estaré encantado de conversar!! [1] http://dev.twitter.com/doc/get/statuses/user_timeline [2] http://twitter.com/bubuku [3] http://twitool-box.net/api-viewer/ [4] http://www.bubuku.com/wp-content/uploads/blog_api-twitter.gif [5] http://twitter.com/bubuku http://www.bubuku.com/blog/sacar-informacion-de-tu-cuenta-twitter-a-traves-de-su-api/ Últimamente nos han surgido varios casos en los cuales el cliente tiene un site coorporativo en HTML o flash y nos solicita un blog para posicionar mejor el site e informar a sus clientes, etc... Y necesita que la información insertada en wordpress se muestre en su site que se encuentra fuera de él. A continuación vamos a explicar como mostrar la información fuera de wordpress en lo siguientes casos: 1. Páginas estáticas todas en html. 2. Páginas en PHP. 3. Páginas en flash. Si nos encontramos en el primer caso cuando las páginas son en HTML, la única solución es utilizar ajax, para no perder las páginas indexadas en los buscadores y su posición. Yo en este caso utilizo jquey, insertamos este código javascript en las páginas que necesitemos mostrar la información que tenemos en wordpress. [javascript] // [/javascript] Lo que hacemos con este código, es llamar al finalizar la carga de la página HTML, al php que se encarga de sacar la información de wordpress mediante ajax. En este caso 'ultimas-noticias.php' que se encuentra en el directorio 'src'. En la línea 5 ponemos la condición para que si no recibimos la información solicitada, nos muestre el texto 'Servicio temporalmente inactivo.'. Esta condición es muy importante debido a que si ponemos el blog en mantenimiento por ejemplo, nos mostraría la página completa. Si todo va bien la información que recibimos del php se mostraría con un fadeIn de entrada en la capa con el id 'wp_noticias', que puede estar situada en un lateral por ejemplo. El paso siguiente sería crear el fichero php (ultimas-noticias.php), al que llamaríamos desde ajax. Si las páginas del site coorporativo son en PHP, solo tendríamos que hacer el include de este fichero donde queramos mostrar la información. [php] require( '../blog/wp-load.php' ); $aDatos=query_posts('showposts=5'); if (have_posts()){ while (have_posts()) : the_post(); echo 'post_title.'">'.$post->post_title.' [1]'; echo the_excerpt(); endwhile; } ?> [/php] En la 2 línea incluimos el php 'wp-load.php', situado en la raíz donde tenemos instalado en el blog para poder trabajar con wordpress y las siguiente líneas son como se sacaría la información de los últimos 5 post en wordpress. Recomendaciones para flash. En un principio flash no debería tener problema en leer la información generada por el fichero 'ultimas-noticias.php', al tener la misma estructura de nodos que un XML. Pero como veis es fácilmente modificar el php para generar la información en XML. Yo personalmente, inserto dentro del div que carga el swf dicha información así los buscadores leen la información y el usuario solo la ve en flash. Y desterramos un poquito la leyenda urbana de que las páginas realizadas en flash no se posiciona bien. Con esta técnica conseguimos que el site coorporativo este actualizado y en constante movimiento, mejorando el posicionamiento y que los buscadores estén más atentos. [1] http://www.bubuku.com'.get_permalink().' http://www.bubuku.com/blog/mostrar-articulos-fuera-de-wordpress/ Prestashop incluye la posibilidad de poder modicar el orden de aparición de los módulos en las páginas. Para ver su funcionamiento lo mejor es un ejemplo. Al finalizar la compra en el paso "Elige tu método de pago" nos encontramos dos módulos uno de PayPal y otro de Caja España. [1] Y segun nuestras necesidades el módulo de Caja España tiene que mostrarse antes que el modulo de PayPal, para realizar esta modificación tenemos que seguir lo ssiguientes pasos. Accedemos al Back Office de Prestashop y vamos a modules/positions, donde veremos los diferentes Hooks disponibles en las páginas. Buscamos el Hook que queremos modificar en este caso "Payment" y veremos la posición actual de los módulos. [2] Nos situamos sobre el triangulo de posición del modulo que deseamos mover, el cursor cambiara de forma y lo movemos a su posición final. [3] Y con estos sencillo paso ya hemos conseguido el cambio que necesitabamos. [4] [1] http://www.bubuku.com/wp-content/uploads/blog_presta-ordenModulo01.gif [2] http://www.bubuku.com/wp-content/uploads/blog_presta-ordenModulo02.gif [3] http://www.bubuku.com/wp-content/uploads/blog_presta-ordenModulo03.gif [4] http://www.bubuku.com/wp-content/uploads/blog_presta-ordenModulo04.gif http://www.bubuku.com/blog/cambiar-orden-de-visualizacion-de-los-modulos/ No es que sea muy importante este artículo, pero lo escribo para refrescar la memoria, y quien sabe quizás a alguien le ayude. Un plugin de jquery para realizar slide fácilmente es Cycle [1], os recomiendo que paséis por su página para ver las demos. Me he dado cuenta que el plugin tiene por defecto configurado el color de fondo de las transiciones como blanco, Si necesitas cambiarlo solo tienes que definir un background ala capa que contiene las imágenes. El contenedor básico, por ejemplo puede ser así: [html] [/html] añadimos el background con el color rojo por ejemplo y listo. [html] [/html] [1] http://jquery.malsup.com/cycle/ http://www.bubuku.com/blog/tips/dar-color-de-fondo-a-la-transicion-con-el-plugin-cycle-para-jquery/