Introdução:
Prestashop personalizado CSS e JS módulo é um módulo simples que permite estilizar as páginas individualmente. O módulo permite que os proprietários do site adicionem mais recursos ao CSS e JS do site. Você não precisa de nenhum acesso FTP para editar os arquivos de código existentes. O addon ajuda você a adicionar o código CSS e JS no painel de administração. O módulo ajuda a eliminar a dependência do desenvolvedor para fazer pequenas alterações personalizadas e você pode simplesmente fazer isso sozinho usando o painel de backend do módulo. o Módulo Prestashop Custom CSS e JS permite que o administrador da loja Prestashop altere a interface do usuário de qualquer página do site da Prestashop. O plugin Prestashop oferece ao administrador para fazer o mesmo para dispositivos móveis, desktops ou ambos.
Passos para a instalação de Prestashop Custom JS e CSS Adicionar:
Para instalar esse complemento de plug-in CSS e JS Prestashop personalizados, siga as etapas a seguir: 1. Adicione a pasta addon na pasta modules do seu sistema. 2. Depois de adicionar esta pasta addon, o sistema irá listar o addon Prestashop na página do módulo na categoria de recursos front office, conforme abaixo:
3. Clique em instalar para instalar o plugin Prestashop Custom JS And CSS.
Interface de administração
Os seguintes recursos serão fornecidos à administração neste módulo CSS Prestashop personalizado: 1. Configurações Gerais 2. Configurações avançadas
Configurações gerais do módulo JS Prestashop personalizado:
Depois de clicar no link de configuração do Custom JS e CSS addon na página de listagem de módulos, o sistema irá abrir as guias de configurações gerais por padrão, como mostrado na tela abaixo:
Os campos listados serão preenchidos com alguns valores padrão
DETALHES DA ABA DAS CONFIGURAÇÕES GERAIS:
1. Habilitar desabilitar: Inicialmente, este campo do módulo personalizado CSS Prestashop será OFF. O administrador pode ativar / desativar a funcionalidade addon, ativando / desativando.
2. CSS customizado: O conteúdo CSS que precisa ser exibido em todas as páginas do site deve ser inserido na área de texto do CSS personalizado e do plugin JS Prestashop fornecido com o campo CSS personalizado.
3. Custom JS: O conteúdo JS que precisa ser exibido em todas as páginas do site deve ser inserido na área de texto do módulo JS Prestashop personalizado, fornecido com o campo Custom JS.
Configurações avançadas do plugin personalizado CSS e JS Prestashop:
Depois de clicar na guia de configurações avançadas do plug-in personalizado CSS e JS Prestashop, a tela abaixo será exibida.
DETALHES DA ABA DE CONFIGURAÇÕES DE AVANÇO:
- Adicionar nova entrada: Inicialmente, não haverá entrada na tabela de guias de avanço do módulo Prestashop Custom JS, portanto, clique no botão de nova entrada para adicionar os detalhes do arquivo CSS e JS com o nome da página e o tipo de dispositivo nele.
- Tabela: Quando a entrada é feita, a linha é adicionada à tabela do módulo CSS personalizado do Prestashop com detalhes da entrada, como o botão de ativação ou desativação do tipo de dispositivo do nome da página e o botão editar e excluir.
- Ativar ou Desativar botão: Quando a entrada é feita no módulo CSS Prestashop personalizado, o usuário pode habilitar o arquivo adicionado clicando no botão de ativação uma vez que muda para o botão desativar depois que o usuário clica no botão de habilitar agora o usuário pode desabilitar a entrada clicando em no botão desativar que está aparecendo na tabela e o oposto acontece.
- Editar: Na coluna de ação da tabela, há um botão de edição ao clicar nele aparece um pop-up que é o mesmo que aparece depois que clicamos no botão Adicionar nova entrada. Mas, a diferença é que agora os campos do módulo JS Prestashop personalizado são preenchidos com todos os detalhes que foram inseridos anteriormente pelo usuário nessa linha. Agora, o usuário pode editar as entradas do CSS personalizado e do plug-in JS Prestashop que foram executadas nos arquivos ou podem alterar o tipo de dispositivo ou adicionar a entrada ao nome da página.
- Excluir: Na coluna de ação da tabela, há um botão delete ao clicar neste botão do módulo Prestashop Custom JS, podemos deletar a entrada que foi feita naquela linha.
- Caixa de interface: Esta é a caixa que aparecerá depois de clicar no botão Adicionar novo, se tivermos que adicionar uma nova entrada à tabela de configurações avançadas. Ele também aparecerá se clicarmos no botão de edição depois que a entrada estiver concluída, mas a diferença é que agora os campos na caixa pop up serão campos com os detalhes daquela linha específica à qual o botão de edição pertence. Campos na caixa Pop up são:
A. Selecione a página suspensa: O primeiro campo do campo 'Adicionar novo' é um menu suspenso que contém todos os nomes das páginas atualmente disponíveis no Prestashop. Você pode selecionar a página na qual a entrada deve ser feita.
B. Escolha o tipo de dispositivo: Este campo de CSS personalizado Prestashop contém três botões de rádio Mobile, Desktop e ambos. Você pode selecionar o tipo de dispositivo para o qual você irá adicionar o css e o js.
C. configuração CSS: Nesta área de texto do plugin Prestashop por Knowband, você tem que adicionar o código css que deve ser adicionado na página que você selecionou anteriormente.
D. configuração JS: Nesta área de texto do módulo CSS Prestashop personalizado, você deve adicionar o código js que deve ser adicionado na página que você selecionou anteriormente.
INTERFACE APÓS CLICAR EM ADICIONAR A NOVA ENTRADA
APÓS ADICIONAR A ENTRADA
INTERFACE APÓS CLICAR NO BOTÃO DE EDIÇÃO
Módulo Front End
Depois de ativar o plug-in Prestashop Custom JS da Knowband, o usuário front-end verá o CSS e JS que são adicionados globalmente ao site e o usuário também verá o CSS e JS que é adicionado a essa página específica somente nas configurações avançadas aba.
O CUSTOM CSS e JS no front-end aparecem da seguinte forma:
Recomendações
Atualize a página inicial de sua loja toda vez que você ativar / desativar o plugin. Se o plugin não estiver funcionando após a instalação, verifique as permissões na pasta modules. A pasta deve ser gravável. Por favor, faça a permissão da pasta para 755.
Esperamos ter coberto todas as preocupações relacionadas à instalação e ao guia de produtos deste Addon Prestashop. Você também deve verificar nosso blog sobre Como fornecer vários motivos aos seus clientes para concluir o processo de pagamento on-line – Aqui
Assista ao Video Tutorial aqui:
Link do Módulo: https://www.knowband.com/prestashop-custom-css-and-js
Manual do usuário: https://www.knowband.com/blog/user-manual/prestashop-custom-js-and-css/
Demonstração de administrador: https://ps.knowband.com/demo1/16/admin1/index.php?controller=AdminLogin&token=aea1bb3fb1bab860c86c4db00ce5949e&redirect=AdminModules&demo_lang=en
Demonstração Frontal: https://ps.knowband.com/demo1/16/en/
Compre este addon agora >> Knowband – CSS personalizado e JS – Complementos PrestaShop