{"id":19681,"date":"2015-02-11T00:00:00","date_gmt":"2015-02-11T00:00:00","guid":{"rendered":"https:\/\/www.knowband.com\/blog\/?p=1382"},"modified":"2022-08-13T12:01:14","modified_gmt":"2018-06-30T09:48:18","slug":"prestashop-custom-js-e-css-module-manual-do-usu%c3%a1rio","status":"publish","type":"post","link":"https:\/\/www.knowband.com\/blog\/pt-br\/manual-do-usuario\/prestashop-custom-js-e-css-module-manual-do-usu%c3%a1rio\/","title":{"rendered":"Prestashop Custom JS e CSS Module – Manual do Usu\u00e1rio"},"content":{"rendered":"

Introdu\u00e7\u00e3o:<\/h2>\n

Prestashop personalizado CSS e JS m\u00f3dulo \u00e9 um m\u00f3dulo simples que permite estilizar as p\u00e1ginas individualmente. O m\u00f3dulo permite que os propriet\u00e1rios do site adicionem mais recursos ao CSS e JS do site. Voc\u00ea n\u00e3o precisa de nenhum acesso FTP para editar os arquivos de c\u00f3digo existentes. O addon ajuda voc\u00ea a adicionar o c\u00f3digo CSS e JS no painel de administra\u00e7\u00e3o. O m\u00f3dulo ajuda a eliminar a depend\u00eancia do desenvolvedor para fazer pequenas altera\u00e7\u00f5es personalizadas e voc\u00ea pode simplesmente fazer isso sozinho usando o painel de backend do m\u00f3dulo. o M\u00f3dulo Prestashop Custom CSS e JS<\/a> permite que o administrador da loja Prestashop altere a interface do usu\u00e1rio de qualquer p\u00e1gina do site da Prestashop. O plugin Prestashop oferece ao administrador para fazer o mesmo para dispositivos m\u00f3veis, desktops ou ambos.<\/p>\n

Passos para a instala\u00e7\u00e3o de Prestashop Custom JS e CSS<\/a> Adicionar:<\/h2>\n

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\u00e1 listar o addon Prestashop na p\u00e1gina do m\u00f3dulo na categoria de recursos front office, conforme abaixo:<\/p>\n

\"Instala\u00e7\u00e3o\"<\/a><\/p>\n

3. Clique em instalar para instalar o plugin Prestashop Custom JS And CSS.<\/p>\n

Interface de administra\u00e7\u00e3o<\/h2>\n

Os seguintes recursos ser\u00e3o fornecidos \u00e0 administra\u00e7\u00e3o neste m\u00f3dulo CSS Prestashop personalizado: 1. Configura\u00e7\u00f5es Gerais 2. Configura\u00e7\u00f5es avan\u00e7adas<\/p>\n

Configura\u00e7\u00f5es gerais do m\u00f3dulo JS Prestashop personalizado:<\/h3>\n

Depois de clicar no link de configura\u00e7\u00e3o do Custom JS e CSS addon na p\u00e1gina de listagem de m\u00f3dulos, o sistema ir\u00e1 abrir as guias de configura\u00e7\u00f5es gerais por padr\u00e3o, como mostrado na tela abaixo:<\/p>\n

\"Configura\u00e7\u00f5es<\/a><\/p>\n

Os campos listados ser\u00e3o preenchidos com alguns valores padr\u00e3o<\/p>\n

DETALHES DA ABA DAS CONFIGURA\u00c7\u00d5ES GERAIS:<\/strong><\/p>\n

1. Habilitar desabilitar:<\/strong> Inicialmente, este campo do m\u00f3dulo personalizado CSS Prestashop ser\u00e1 OFF. O administrador pode ativar \/ desativar a funcionalidade addon, ativando \/ desativando.
\n2. CSS customizado:<\/strong> O conte\u00fado CSS que precisa ser exibido em todas as p\u00e1ginas do site deve ser inserido na \u00e1rea de texto do CSS personalizado e do plugin JS Prestashop fornecido com o campo CSS personalizado.
\n3. Custom JS:<\/strong> O conte\u00fado JS que precisa ser exibido em todas as p\u00e1ginas do site deve ser inserido na \u00e1rea de texto do m\u00f3dulo JS Prestashop personalizado, fornecido com o campo Custom JS.<\/p>\n

Configura\u00e7\u00f5es avan\u00e7adas do plugin personalizado CSS e JS Prestashop:<\/h3>\n

Depois de clicar na guia de configura\u00e7\u00f5es avan\u00e7adas do plug-in personalizado CSS e JS Prestashop, a tela abaixo ser\u00e1 exibida.<\/p>\n

\"Configura\u00e7\u00f5es<\/a><\/p>\n

DETALHES DA ABA DE CONFIGURA\u00c7\u00d5ES DE AVAN\u00c7O:<\/strong><\/p>\n

    \n
  • Adicionar nova entrada:<\/strong> Inicialmente, n\u00e3o haver\u00e1 entrada na tabela de guias de avan\u00e7o do m\u00f3dulo Prestashop Custom JS, portanto, clique no bot\u00e3o de nova entrada para adicionar os detalhes do arquivo CSS e JS com o nome da p\u00e1gina e o tipo de dispositivo nele.<\/li>\n
  • Tabela:<\/strong> Quando a entrada \u00e9 feita, a linha \u00e9 adicionada \u00e0 tabela do m\u00f3dulo CSS personalizado do Prestashop com detalhes da entrada, como o bot\u00e3o de ativa\u00e7\u00e3o ou desativa\u00e7\u00e3o do tipo de dispositivo do nome da p\u00e1gina e o bot\u00e3o editar e excluir.<\/li>\n
  • Ativar ou Desativar bot\u00e3o:<\/strong> Quando a entrada \u00e9 feita no m\u00f3dulo CSS Prestashop personalizado, o usu\u00e1rio pode habilitar o arquivo adicionado clicando no bot\u00e3o de ativa\u00e7\u00e3o uma vez que muda para o bot\u00e3o desativar depois que o usu\u00e1rio clica no bot\u00e3o de habilitar agora o usu\u00e1rio pode desabilitar a entrada clicando em no bot\u00e3o desativar que est\u00e1 aparecendo na tabela e o oposto acontece.<\/li>\n
  • Editar:<\/strong> Na coluna de a\u00e7\u00e3o da tabela, h\u00e1 um bot\u00e3o de edi\u00e7\u00e3o ao clicar nele aparece um pop-up que \u00e9 o mesmo que aparece depois que clicamos no bot\u00e3o Adicionar nova entrada. Mas, a diferen\u00e7a \u00e9 que agora os campos do m\u00f3dulo JS Prestashop personalizado s\u00e3o preenchidos com todos os detalhes que foram inseridos anteriormente pelo usu\u00e1rio nessa linha. Agora, o usu\u00e1rio 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\u00e1gina.<\/li>\n
  • Excluir:<\/strong> Na coluna de a\u00e7\u00e3o da tabela, h\u00e1 um bot\u00e3o delete ao clicar neste bot\u00e3o do m\u00f3dulo Prestashop Custom JS, podemos deletar a entrada que foi feita naquela linha.<\/li>\n
  • Caixa de interface:<\/strong> Esta \u00e9 a caixa que aparecer\u00e1 depois de clicar no bot\u00e3o Adicionar novo, se tivermos que adicionar uma nova entrada \u00e0 tabela de configura\u00e7\u00f5es avan\u00e7adas. Ele tamb\u00e9m aparecer\u00e1 se clicarmos no bot\u00e3o de edi\u00e7\u00e3o depois que a entrada estiver conclu\u00edda, mas a diferen\u00e7a \u00e9 que agora os campos na caixa pop up ser\u00e3o campos com os detalhes daquela linha espec\u00edfica \u00e0 qual o bot\u00e3o de edi\u00e7\u00e3o pertence. Campos na caixa Pop up s\u00e3o:<\/li>\n<\/ul>\n

    A. Selecione a p\u00e1gina suspensa:<\/strong> O primeiro campo do campo 'Adicionar novo' \u00e9 um menu suspenso que cont\u00e9m todos os nomes das p\u00e1ginas atualmente dispon\u00edveis no Prestashop. Voc\u00ea pode selecionar a p\u00e1gina na qual a entrada deve ser feita.
    \nB. Escolha o tipo de dispositivo:<\/strong> Este campo de CSS personalizado Prestashop cont\u00e9m tr\u00eas bot\u00f5es de r\u00e1dio Mobile, Desktop e ambos. Voc\u00ea pode selecionar o tipo de dispositivo para o qual voc\u00ea ir\u00e1 adicionar o css e o js.
    \nC. configura\u00e7\u00e3o CSS:<\/strong> Nesta \u00e1rea de texto do plugin Prestashop por Knowband, voc\u00ea tem que adicionar o c\u00f3digo css que deve ser adicionado na p\u00e1gina que voc\u00ea selecionou anteriormente.
    \nD. configura\u00e7\u00e3o JS:<\/strong> Nesta \u00e1rea de texto do m\u00f3dulo CSS Prestashop personalizado, voc\u00ea deve adicionar o c\u00f3digo js que deve ser adicionado na p\u00e1gina que voc\u00ea selecionou anteriormente.<\/p>\n

    INTERFACE AP\u00d3S CLICAR EM ADICIONAR A NOVA ENTRADA<\/strong><\/p>\n

    \"POP<\/a><\/p>\n

    AP\u00d3S ADICIONAR A ENTRADA<\/strong><\/p>\n

    \"AP\u00d3S<\/a><\/p>\n

    INTERFACE AP\u00d3S CLICAR NO BOT\u00c3O DE EDI\u00c7\u00c3O<\/strong><\/p>\n

    \"POP<\/a><\/p>\n

    M\u00f3dulo Front End<\/h2>\n

    Depois de ativar o plug-in Prestashop Custom JS da Knowband, o usu\u00e1rio front-end ver\u00e1 o CSS e JS que s\u00e3o adicionados globalmente ao site e o usu\u00e1rio tamb\u00e9m ver\u00e1 o CSS e JS que \u00e9 adicionado a essa p\u00e1gina espec\u00edfica somente nas configura\u00e7\u00f5es avan\u00e7adas aba.<\/p>\n

    O CUSTOM CSS e JS no front-end aparecem da seguinte forma:<\/p>\n

    \"M\u00f3dulo<\/a><\/p>\n

    Recomenda\u00e7\u00f5es<\/strong><\/p>\n

    Atualize a p\u00e1gina inicial de sua loja toda vez que voc\u00ea ativar \/ desativar o plugin. Se o plugin n\u00e3o estiver funcionando ap\u00f3s a instala\u00e7\u00e3o, verifique as permiss\u00f5es na pasta modules. A pasta deve ser grav\u00e1vel. Por favor, fa\u00e7a a permiss\u00e3o da pasta para 755.<\/p>\n

    Esperamos ter coberto todas as preocupa\u00e7\u00f5es relacionadas \u00e0 instala\u00e7\u00e3o e ao guia de produtos deste Addon Prestashop<\/a>. Voc\u00ea tamb\u00e9m deve verificar nosso blog sobre Como fornecer v\u00e1rios motivos aos seus clientes para concluir o processo de pagamento on-line – Aqui<\/strong><\/a><\/p>\n

    Assista ao Video Tutorial aqui:<\/strong><\/p>\n