Portada subir pdf

Subir archivos PDF desde el editor Wysiwyg en Magento

Algo que en ocasiones en una tienda online podemos necesitar incluir manuales de nuestros productos en formato pdf. La manera más comoda y natural seria desde la configuración de el producto utilizando el editor wysiwyg disponible.

El problema es que Magento por defecto no permite subir archivos pdf desde este editor, solamente nos permitira subir archivos de imagen.

Buscando por Internet se pueden encontrar varias soluciones gratuitas y de pago, la más sencilla es editar el archivo app/code/core/Mage/Cms/etc/config.xml directamente y agregar <pdf>1</pdf>.

<allowed>
    <jpg>1</jpg>
    <jpeg>1</jpeg>
    <png>1</png>
    <gif>1</gif>
    <pdf>1</pdf>
</allowed>

Con esta modificación podremos utilizar el botón de insertar imagen que aparece en el editor de texto como muestra la siguiente imagen:

Insertar imagen 1

Para usar el botón de insertar imagen en el editor WYSIWYG insertamos <pdf>1</pdf> como muestra el siguiente código dentro del mismo archivo.

<image_allowed> 
    <jpg>1</jpg> 
    <jpeg>1</jpeg> 
    <png>1</png> 
    <gif>1</gif> 
    <pdf>1</pdf>
</image_allowed>

Insertar imagen 2

Esta solución no es muy recomendable ya que estamos modificando el núcleo de Magento y si en alguna ocasión actualizamos la versión perderemos estos cambios.

La forma más correcta en a través de una extención o de un módulo creado de forma personalizada. Pues bien, en mi caso despues de probar y probar varias solucionen, consigui dar con una «no recuerdo donde» pero funciono perfectamente, al menos en la versión 1.9.x de Magento.

Crear un módulo para subir archivos pdf en Magento

Simplemente copiando los siguientes códigos en las rutas correspondientes, debería funcionar sin problema.

Declaramos nuestro módulo creando y editando el archivo app/etc/modules/Mgt_WysiwygPdfAllow.xml con el siguiente código.

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <modules>
        <Mgt_WysiwygPdfAllow>
            <active>true</active>
            <codePool>local</codePool>
        </Mgt_WysiwygPdfAllow>
    </modules>
</config>

El archivo de configuración de nuestro módulo: app/code/local/Mgt/WysiwygPdfAllow/etc/config.xml

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <modules>
        <Mgt_WysiwygPdfAllow>
             <version>1.0.0</version>
        </Mgt_WysiwygPdfAllow>
    </modules>

    <global>
        <blocks>
            <mgt_wysiwygpdfallow>
                <class>Mgt_WysiwygPdfAllow_Block</class>
            </mgt_wysiwygpdfallow>
        </blocks>
        <models>
            <mgt_wysiwygpdfallow>
                <class>Mgt_WysiwygPdfAllow_Model</class>
            </mgt_wysiwygpdfallow>
            <core>
                <rewrite>
                      <file_validator_image>Mgt_WysiwygPdfAllow_Model_Rewrite_Core_File_Validator_Image</file_validator_image>
                </rewrite>
            </core>
            <cms>
                <rewrite>
                    <wysiwyg_images_storage>Mgt_WysiwygPdfAllow_Model_Rewrite_Cms_Wysiwyg_Images_Storage</wysiwyg_images_storage>
                </rewrite>
            </cms>
        </models>
    </global>

    <adminhtml>
        <!-- Adds pdf to the array of allowed extensions -->
        <cms>
            <browser>
                <extensions>
                    <allowed>
                        <pdf>1</pdf>
                    </allowed>
                    <image_allowed>
                        <pdf>1</pdf>
                    </image_allowed>
                </extensions>
            </browser>
        </cms>
    </adminhtml>

    <default>
        <mgt_wysiwygpdfallow>
            <general>
                <enabled><![CDATA[1]]></enabled>
            </general>
        </mgt_wysiwygpdfallow>
    </default>
</config>

A continuación validamos el tipo de archivo para que no ocurra un error cuando intentamos cargar nuestro pdf desde el editor WYSIWYG.
/app/code/local/Mgt/WysiwygPdfAllow/Model/Rewrite/Core/File/Validator/Image.php

<?php
class Mgt_WysiwygPdfAllow_Model_Rewrite_Core_File_Validator_Image extends Mage_Core_Model_File_Validator_Image
{
    /**
     * Validation callback for checking is file is image
     *
     * @param  string $filePath Path to temporary uploaded file
     * @return null
     * @throws Mage_Core_Exception
     */
    public function validate($filePath)
    {
        $isEnabled = true;

        if ($isEnabled && mime_content_type($filePath) == 'application/pdf') {
            return null;
        } else {
            return parent::validate($filePath);
        }
    }
}

Por último la imagen en miniatura que aparecera en el editor de Magento cuando seleccionamos los archivos multimedia.
/app/code/local/Mgt/WysiwygPdfAllow/Model/Rewrite/Cms/Wysiwyg/Images/Storage.php

<?php
class Mgt_WysiwygPdfAllow_Model_Rewrite_Cms_Wysiwyg_Images_Storage extends Mage_Cms_Model_Wysiwyg_Images_Storage
{
    /**
     * Create thumbnail for image and save it to thumbnails directory
     *
     * @param string $source Image path to be resized
     * @param bool $keepRation Keep aspect ratio or not
     * @return bool|string Resized filepath or false if errors were occurred
     */
    public function resizeFile($source, $keepRation = true)
    {
        $isEnabled = true;

        $mimeType = mime_content_type($source);
        if ($isEnabled && $mimeType == 'application/pdf') {
            return false;
        } else {
            return parent::resizeFile($source, $keepRation);
        }
    }
 }

Esto es todo lo necesario para que nuestro módulo sea funcional, pero falta un detalle. Personalizar el enlace utilizando la hoja de estilos css de nuestra plantilla para que aparezca como un botón, por ejemplo.

.col-main a[href$=".pdf"] {
    display: block;
    padding: 10px 15px;
    background-color: #5882FA;
    color_#fff;
}

Utilizar el editor WYSIWYG para subir e insertar archivos PDF

Después de todo este lio de código por fin podemos subir nuestros manuales pdf desde la configuración del producto.

El procedimiento es muy sencillo:

  1. Entramos en Panel de control > Catálogo > lConfigurar los productos y seleccionamos un producto.
  2. En la pestaña General clic en el botón Editor WYSIWYG bien en la Descripción o en la descripción corta. Esto depende de donde queramos que aparezca el pdf.
    Botón WYSIWYG
  3. Creamos el texto para el enlace a nuestro pdf y generamos el enlace seleccionando el texto y pulsando el botón de “insertar link” como se puede ver en la imagen siguiente:
    Insertar link
  4. En la siguiente ventana buscamos el archivo y lo subimos. En este caso he creado una carpeta llamada PDF donde subiré todos los archivos de este tipo.
    Subir archivo pdf
  5. Seleccionamos el archivo y lo insertamos en la descripción del producto.
    Añadir archivo pdf
  6. Finalmente ya tenemos link hacia el archivo pdf, clic en el botón update y acontinuación en el botón submit de el editor WYSIWYG.
    Insertar pdf en descripción Magento
  7. Solo nos falta guardar el producto y listo ya tenemos nuestro manual en la descripción del producto.
    Guardar producto Magento

Llegados a este punto nos damos cuenta de que podriamos haber ahorrado todo este jaleo simplemente subiendo el archivo a traves de FTP y creando a mano el enlace con el siguiente código:
<p><a href="{{media url="wysiwyg/PDF/mi_archivo.pdf"}}">Mi pdf </a></p>
tal como muestra la imagen anterior. Y es cierto, funcionaria perfectamente, pero es mucho más incomo y además, el acceso a FTP podria provocar que la persona encargada de actualizar el producto borre, mueva o sobreescriba por error algún fichero, tumbando nuestra tienda en un abrir y cerrar de ojos.

Nuestro enlace en la ficha de producto.

Manual pdf en producto Magento

 

2 comentarios en “Subir archivos PDF desde el editor Wysiwyg en Magento

  • Gracias, es buena opción, me podrías ayudar? Un cliente me dejo una web en Magento, tiene un boton para la ficha técnica, das click y te abre un manual, pero no encuentro en ningún lado ni los archivos ni de donde manda a traer desde el boton al PDF.

    • Hola Eduardo.
      Es muy difícil responder a tu pregunta sin verlo, por lo que comentas parece una personalización o módulo instalado para tener esa funcionalidad.
      Es posible que con las herramientas para desarrolladores que vienen integradas en Google Chrome, puedas obtener alguna pista sobre el directorio donde se alojan esos pdfs.

Comentarios y opiniones

Puede que tarde en responder, se paciente.

*
*