Prestashop Custom JS e CSS Module – Manual do Usuário

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:

Instalação

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:

Configurações gerais

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.

Configurações avançadas

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

POP UP BOX APÓS CLICAR EM ADICIONAR NOVA ENTRADA

APÓS ADICIONAR A ENTRADA

APÓS ADICIONAR A ENTRADA

INTERFACE APÓS CLICAR NO BOTÃO DE EDIÇÃO

POP UP BOX 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:

Módulo Front End

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

Joe Parker

We boast of the best in the industry plugins for eCommerce systems and has years of experience working with eCommerce websites. We provide best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify. We also provide custom module development and customization services for the website and modules.

Leave a Reply

Your email address will not be published. Required fields are marked *