Introducción:
El módulo Prestashop Custom CSS & JS permite al administrador de la tienda Prestashop cambiar la interfaz de usuario de cualquier página del sitio web de Prestashop. El complemento Prestashop le ofrece al administrador hacer lo mismo para dispositivos móviles o computadoras de escritorio, o para ambos.
Pasos para la instalación del complemento Prestashop Custom JS y CSS :
Para instalar este complemento personalizado de CSS y JS Prestashop, siga los siguientes pasos:
1. Agregue una carpeta adicional debajo de la carpeta de módulos de su sistema.
2. Después de agregar esta carpeta de complementos, el sistema listará la página del módulo complementario de Prestashop en la categoría de características de la oficina principal como se indica a continuación:
3. Haga clic en instalar para instalar el complemento JS y CSS de Prestashop Custom.
Interfaz de administrador
Las siguientes características se proporcionarán a la administración en este módulo CSS Prestashop personalizado:
1. Configuración general
2. Configuración avanzada
Configuración general del módulo JS Prestashop personalizado:
Después de hacer clic en configurar el enlace del complemento personalizado JS y CSS en la página de listado del módulo, el sistema abrirá las pestañas de configuración general de manera predeterminada, como se muestra en la siguiente pantalla:
Los campos enumerados se llenarán con algunos valores predeterminados
DETALLES DE LA PESTAÑA DE AJUSTES GENERALES:
1. Habilitar / Deshabilitar: Inicialmente, este campo del módulo CSS Prestashop personalizado estará desactivado. El administrador puede habilitar / deshabilitar la funcionalidad de complemento activando / desactivando esta función.
2. CSS personalizado: el contenido de CSS que debe mostrarse en cada página del sitio web debe ingresarse en el área de texto del complemento personalizado de CSS y JS Prestashop que se proporciona con el campo denominado CSS personalizado.
3. JS personalizado: El contenido de JS que debe mostrarse en cada página del sitio web debe ingresarse en el área de texto del módulo JS Prestashop personalizado que se proporciona con el campo denominado Custom JS.
Configuración avanzada del plugin personalizado de CSS y JS Prestashop:
Después de hacer clic en la pestaña de configuración avanzada del complemento personalizado de CSS y JS Prestashop, aparece la siguiente pantalla.
TABLA DE CONFIGURACIÓN DE AVANCE DETALLES:
- Agregar nueva entrada: Inicialmente, no habrá ninguna entrada en la tabla de pestañas avanzadas del módulo Prestashop Custom JS, así que haga clic en el botón de entrada nuevo para agregar los detalles del archivo CSS y JS con el nombre de la página y el tipo de dispositivo.
- Tabla: cuando se completa la entrada, la fila se agrega a la tabla del módulo CSS personalizado de Prestashop con los detalles de la entrada, como el botón activar o desactivar el tipo de dispositivo de nombre de página, y el botón editar y eliminar.
- Botón Habilitar o Deshabilitar: cuando la entrada se realiza en el módulo CSS Prestashop personalizado, el usuario puede habilitar el archivo agregado haciendo clic en el botón habilitar una vez que cambia al botón deshabilitar después de que el usuario haga clic en el botón habilitar ahora el usuario puede deshabilite la entrada haciendo clic en el botón de deshabilitar que aparece en la tabla y sucede lo contrario.
- Editar: en la columna de acción de la tabla, hay un botón de edición al hacer clic en él aparece una ventana emergente que es igual a la que aparece después de que haga clic en el botón agregar nueva entrada. Pero la diferencia es que ahora los campos del módulo JS Prestashop personalizado se llenan con todos los detalles que el usuario introdujo anteriormente en esa fila. Ahora el usuario puede editar las entradas del complemento personalizado de CSS y JS Prestashop que se realizaron en los archivos o puede cambiar el tipo de dispositivo o puede agregar la entrada al nombre de la página.
- Eliminar: en la columna de acción de la tabla, hay un botón de eliminar al hacer clic en este botón del módulo Prestashop Custom JS, podemos eliminar la entrada que se hizo en esa fila.
- Cuadro de interfaz: este es el cuadro que aparecerá después de hacer clic en el botón Agregar nuevo si tenemos que agregar una nueva entrada a la tabla de configuraciones avanzadas. También aparecerá si haremos clic en el botón de edición después de que la entrada esté lista, pero la diferencia es que ahora los campos en el cuadro de configuración serán campos con los detalles de esa fila en particular a la que pertenece el botón de edición. Los campos en el cuadro emergente son:
A. Seleccione la página desplegable: El primer campo del campo ‘Agregar nuevo’ es un menú desplegable que tiene todos los nombres de las páginas que están disponibles actualmente en Prestashop. Puede seleccionar la página en la que se realizará la entrada.
B. Elija el tipo de dispositivo: este campo de CSS personalizado de Prestashop contiene tres botones de opción Móvil, Escritorio y ambos. Puede seleccionar el tipo de dispositivo para el cual va a agregar css y js.
C. Configuración de CSS: en este área de texto del complemento Prestashop de Knowband, debe agregar el código css que debe agregarse en la página que seleccionó anteriormente.
D. configuración de JS: En este área de texto del módulo CSS Prestashop personalizado, debe agregar el código js que debe agregarse en la página que seleccionó anteriormente.
INTERFAZ DESPUÉS DE HACER CLIC EN AGREGAR NUEVA ENTRADA
DESPUÉS DE AGREGAR LA ENTRADA
INTERFAZ DESPUÉS DE HABLAR EN EL BOTÓN EDITAR
Módulo frontal
Después de habilitar el plugin JS de Prestashop Custom por Knowband, el usuario del front-end verá el CSS y JS que se agregan globalmente al sitio web y el usuario también verá el CSS y JS que se agrega a esa página en particular solo en la configuración avanzada lengüeta.
El CUSTOM CSS y JS en el front-end aparece de la siguiente manera:
Recomendaciones
Actualice la página de inicio de su tienda cada vez que habilite / deshabilite el complemento. Si el complemento no funciona después de la instalación, compruebe los permisos en la carpeta de módulos. La carpeta debe ser escribible. Por favor, haga que la carpeta permita a 755.
Esperamos haber cubierto todas las inquietudes relacionadas con la instalación y la guía de productos de este complemento de Prestashop . También debe consultar nuestro blog en Dar múltiples razones a sus clientes para completar su proceso de pago en línea: aquí
Mire el Video Tutorial aquí:
Enlace de módulo: https://www.knowband.com/prestashop-custom-css-and-js
Manual de usuario: https://www.knowband.com/blog/user-manual/prestashop-custom-js-and-css /
Demostración de administrador: https://ps.knowband.com/demo1/16/admin1/index.php?controller=AdminLogin&token=aea1bb3fb1bab860c86c4db00ce5949e&redirect=AdminModules&demo_lang=en
Demo frontal: https://ps.knowband.com/demo1/16/ es /