Módulo super gancho

O exemplo mostra dois blocos, destacados em cores diferentes, verde e laranja. Cada bloco, além do conteúdo interno (Preço: 20 rublos e o Módulo Super Hook), é enquadrado pelas chamadas tags. A primeira tag é um bloco de abertura, a segunda com um travessão é um bloco de fechamento, no nosso caso é

e , que por sua vez possuem seu próprio identificador (id) e classe (classe). Eles se destinam ao design visual (estilo) da página de um site usando tecnologia CSS, onde são chamados de seletor de id e seletor de classe.

Para distingui-los em CSS, eles são indicados por meio de símbolos. Para id é um hash # e para class é um ponto. Por exemplo, em nosso exemplo, id=’cena’ seria denotado como

E class=’nazvanie_tovara’ será denotado como

Nome_produto.

Esses seletores também são usados ​​em JavaScript e jQuery para vincular o script a um bloco específico.

Além disso, CSS usa seletores de tipo. Estas são partes da tag. No nosso caso, este é um seletor de tipo div e um seletor de tipo span.

Definindo um seletor usando o navegador Mozilla FireFox

A maneira mais fácil de definir um seletor é usando o Mozilla. Eu vou te mostrar como isso é feito. Abra a página com o produto e desta vez mova o , que agora está abaixo do botão do carrinho, acima da etiqueta de preço do produto. Ou seja, precisamos definir o seletor de bloco com o preço do produto como bloco pai e o seletor de módulo como bloco filho. Abrir um painel adicional no FireFox é igual ao Chrome, a combinação de teclas é Ctrl+Shift+I. Em seguida, no menu de campos adicionais à esquerda, encontre a seta (selecionar elemento da página) e clique nela. Agora, passando o cursor sobre a página do site, vemos a seleção dos blocos. Passamos o cursor sobre o bloco com a etiqueta de preço e, ao selecionar este bloco, clicamos nele. Agora no campo adicional, destaque o início do bloco html

Clique nisso clique com o botão direito mouse e na janela que aparece, selecione o item “copiar seletor único”.

Fazemos o mesmo com o módulo Informações adicionais

no campo de configurações do módulo Seletor de módulo ou código HTML, insira o filho selector.block_wnd

Selecione a posição em relação ao bloco “Dentro do bloco abaixo” e salve o resultado.

Foi agora

Instruções do vídeo: https://www.youtube.com/watch?v=xTSXTj0QM5E

Definindo seletores usando o navegador Google Chrome

No módulo Super Hook, precisamos especificar o seletor de bloco (bloco pai) ao qual queremos vincular o bloco do módulo (bloco filho). Esses seletores são muito fáceis de definir usando Navegador Google Cromo(Google Chrome). Para fazer isso, você precisa abrir a ferramenta do desenvolvedor no navegador usando a combinação de teclas Ctrl+Shift+I ou simplesmente passar o cursor do mouse sobre a página do site e pressionar o botão direito do mouse. E no menu suspenso selecione Exibir código do elemento. Uma janela adicional será aberta exibindo Código HTML e uma pequena janela à direita com código CSS. A janela possui um menu com lupa celular e o nome das guias começando com Elementos.

Na parte inferior do campo selecionado vemos uma nota de rodapé com os seletores que precisamos para configurar o módulo. A imagem mostra um seletor de tipo div, seletor de id

#short_description_content

A seguir estão os seletores de classe separados por um ponto, mas não estamos interessados ​​neles. Estamos interessados ​​apenas no seletor de id principal. Será necessário como um ponteiro para o bloco pai. Nas configurações do módulo, no campo Seletor de bloco, escreva este identificador de bloco

#short_description_content

Agora vamos anexar o módulo de logotipos de pagamento a este bloco, que agora está localizado abaixo do botão adicionar ao carrinho. Para fazer isso, precisamos definir um seletor de bloco de logotipo.

E vou mostrar o segundo método de determinação. Mude o menu de ferramentas do desenvolvedor para Elements na janela inferior. E mova o cursor do mouse sobre o módulo do logotipo de pagamento. Clique com o botão direito. Na lista suspensa, selecione a guia inferior Exibir código do elemento. Na janela do desenvolvedor no código HTML, mova o cursor do mouse até que o bloco do módulo do logotipo fique destacado em azul e você verá a tag div de abertura com id=’product_payment_logos’. Este é o identificador filho. Vamos escrevê-lo nas configurações do módulo no campo “Seletor de módulo ou código HTML” como um seletor

#product_payment_logos

Vamos selecionar uma posição relativa ao bloco nas configurações com o valor “Sob o bloco” e salvar o resultado.

Acesse a página do site e veja o resultado

Instruções do vídeo: https://www.youtube.com/watch?v=c5UafCGsr-U

Desta forma podemos mover o bloco do módulo, e não apenas o módulo, para qualquer lugar da página do site. A transferência é limitada apenas à própria página. A transferência para outra página não é possível.

Recursos adicionais do módulo

Como você pode ver na página de configurações existem vários outros campos que não preenchemos. Descreverei para que servem usando um exemplo. Além de mover blocos, o módulo permite complementar a página com seu próprio conteúdo utilizando tecnologias HTML, JS e CSS. Por exemplo, vamos primeiro adicionar um widget de grupo VKontakte à barra lateral do site.

Então, vamos definir um seletor pai. Como exemplo, ofereço o módulo de categorias na barra lateral.

Copie o código HTML

< div id = "vk_groups" > < / div >

e cole-o no campo “Seletor de módulo ou bloco HTML”

Meu blog já acumulou muitas informações sobre o mecanismo PrestaShop cada vez mais popular. Segundo o site oficial, a distribuição já foi baixada por um milhão e meio de usuários. Na Internet russa, o interesse por este CMS também está crescendo, mesmo se considerarmos este blog - 60% das transições estão de alguma forma relacionadas ao PrestaShop.
Portanto, juntei todos os posts que escrevi, finalizei algo e ficou completo Instruções PrestaShop.

Janeiro de 2015: Instruções atualizadas para PrestaShop 1.6

Dependendo do nível do usuário, você pode trabalhar com um dos três arquivos PDF:

“Noções básicas de trabalho com PrestaShop para um gerente de loja”- indicado para usuários que trabalham com uma loja já configurada. Suas tarefas incluem apenas manter um banco de dados de produtos atualizado, para que todas as operações sejam descritas na linguagem mais compreensível.

“PrestaShop - instruções para usuários”- se você mesmo estiver lançando uma loja online, esta instrução será adequada para você. Descreve as operações básicas de instalação do Prestashop, configuração dos principais componentes, trabalho com módulos e modelos de loja. Depois de ler as instruções, você poderá trabalhar de forma mais proveitosa com o Presta, modificar o modelo, instalar e editar módulos.

“PrestaShop - instruções para desenvolvedores” – a ênfase principal está na parte do software: como desenvolver seu próprio módulo, quais classes são responsáveis ​​​​e muito mais. As instruções serão úteis para desenvolvedores de componentes e usuários que decidirem expandir a funcionalidade básica do presta.

Lançamentos anteriores.

Junho de 2012: No momento, as instruções do Prestashop têm 26 páginas, mas pretendo adicionar novas à medida que novos posts aparecerem. No guia, tentei considerar questões mais complexas do que a trivial adição de um produto ou categoria. Por exemplo, as instruções cobrem a movimentação de módulos de um gancho para outro, a modificação do modelo padrão, etc. O manual não é adequado para desenvolvedores avançados, pois trata de questões mais superficiais do que a classe ou o sistema controlador.

Setembro de 2012: A instrução principal não é alterada, mas adicionada Instruções adicionais para iniciantes ou gerentes de loja. Existe uma categoria de pessoas que não sabem necessariamente o que é hospedagem ou como mover um carrinho para outra coluna, por exemplo, são os gerentes de loja. Eles têm que trabalhar com categorias, adicionar produtos e fazer coisas semelhantes. É para eles que foram escritas as instruções “Noções básicas de trabalho com PrestaShop para um gerente de loja” que atualmente contém 4 capítulos e 13 páginas; Estou pensando em aumentar o volume com o tempo.

agosto de 2013: Adicionadas instruções para desenvolvedores do PrestaShop 1.5. Ele examina as classes base com mais detalhes, descreve o procedimento para criar um módulo e trabalhar com o modelo. Adicionadas instruções para atualizar o PrestaShop para 1.5

Outubro 2013: Todas as instruções do Prestashop estão divididas em duas pastas, dependendo da versão do motor. A pasta “prestashop 1_4″ contém instruções publicadas em 2012, todas as novas instruções estão localizadas na pasta “prestashop 1_5″.

Setembro de 2014: Adicionadas instruções para PrestaShop 1.6.

PrestaShop é uma plataforma de comércio eletrônico popular e altamente especializada. O motor em si é gratuito e muito fácil de usar, mas todos os temas e complementos são pagos, por isso não é a escolha mais popular. No entanto, PrestaShop:

• uma comunidade desenvolvida onde você pode encontrar respostas para suas perguntas;
• um grande número de excelentes temas e addons para atender qualquer necessidade de uma loja online;
• Há suporte para o qual você também pode fazer perguntas.

Como instalar o PrestaShop

O primeiro passo é, claro, instalar o próprio CMS na sua hospedagem. Você não terá dificuldades com isso se assistir ao vídeo em que explicamos:

• quais são os mínimos requisitos de sistema instalar este motor;
• como instalar o PrestaShop usando cPanel;
• quais configurações precisam ser feitas após a instalação.

Configurando o PrestaShop: administração

Depois de instalar o mecanismo com sucesso, você precisa entender suas configurações e administração. COM grande quantia Você não encontrará nenhuma configuração, pois todas as principais já funcionam por padrão. Esta é uma grande vantagem do PrestaShop sobre outros CMSs, como WordPress ou Joomla!, que requerem a instalação de add-ons especiais para e-commerce. No entanto, algumas configurações ainda precisam ser feitas. Então, o que você aprenderá com o vídeo:

• como alterar o idioma da interface;
• quais são os principais botões do painel de controle;
• como personalizar a exibição do menu;
• quais categorias estão no menu.

Configurando o PrestaShop: manutenção, administradores, modo de edição ao vivo

Vejamos as configurações mais importantes para administrar uma loja online no PrestaShop. Depois de assistir ao nosso vídeo tutorial, você aprenderá:

• ativar o modo de manutenção;
• adicionar novos usuários com direitos para trabalhar no painel de administração;
• editar o design do site;
• trabalhar com demódados.

Módulos PrestaShop: como alterar, editar, adicionar e excluir

Os módulos são um componente importante de um CMS. Quase todas as configurações de aparência do site serão feitas por meio de módulos. Vamos ver como trabalhar com eles:

• onde fica o bloco com módulos localizado na área administrativa;
• como adicionar, remover, editar ou alterar módulos.

Como adicionar novos produtos ao catálogo PrestaShop

PrestaShop oferece amplas oportunidades para trabalhar com produtos, além de adicioná-los e editá-los. No vídeo veremos:

• como agregar combinações e características de produtos;
• trabalhar com arquivos: customização e anexos;
• como adicionar um produto passo a passo e configurar sua exibição;
• como inserir preços de mercadorias;
• como trabalhar com áreas de SEO;
• como fazer upload de novos arquivos.

Como trabalhar com categorias de produtos no PrestaShop

Vejamos as categorias de produtos e suas configurações com mais detalhes. Por meio de categorias, os produtos são agrupados de acordo com determinadas características, o que simplifica o trabalho com a loja online tanto para seu proprietário quanto para usuários. Preparamos um vídeo para você sobre as seguintes questões:

• o que são subcategorias e como configurar sua exibição;
• como adicionar novas categorias;
• como configurar aparência categorias para o usuário;
• como preencher todos os campos obrigatórios ao adicionar uma categoria;
• Como adicionar um produto a uma categoria existente.

Neste post analisaremos detalhadamente um CMS especializado para criação de uma loja online PrestaShop. Este motor é muito popular em sua terra natal - na França, mas ainda não é muito popular na Rússia. Apenas 5% das lojas na Rússia são lançadas neste mecanismo, contra 37% no OpenCart. Por que, apesar de sua rica funcionalidade, gratuita e de alto nível, o script não pode se tornar um líder, discutiremos neste post.

Esta é a aparência da vitrine: http://demo.prestashop.com/en/?view=front

Vitrine da loja online PrestaShop

Esta é a aparência do painel de administração: http://demo.prestashop.com/en/?view=back

Parte administrativa da loja online no PrestaShop

Está perfeitamente adaptado para lançar uma loja online na Rússia. A distribuição baixada do site oficial sempre tem suporte 100% para o idioma russo. Isso significa que o trabalho será confortável desde os primeiros passos: todas as interfaces da janela de instalação e do painel de administração são totalmente em russo! Uma demonstração da loja em russo pode ser visualizada em nosso site de teste http://prestashop-testshop.ru/, que implantamos na hospedagem Beget em 1 clique, graças ao instalador automático de hospedagem.

Todos os serviços mais populares para lojas online, como agregadores de pagamentos e serviços de chat online, possuem um plugin oficial para PrestaShop. Você pode baixar facilmente, por exemplo, o módulo Yandex.Checkout gratuitamente na página oficial do agregador.

Sobre PrestaShop e desenvolvedores

Nas origens do Prestashop estiveram duas pessoas, Igor Schlumberger e Bruno Levesque. Eles agora são cofundadores e a empresa pertence a investidores privados.

Como conta Bruno Levesque em uma de suas entrevistas, inicialmente o escritório deles ficava em uma sala bem pequena. Então, em 2007, em Paris, eles eram uma pequena equipe que estava se desenvolvendo na área de comércio online.

Durante o primeiro mês de trabalho no motor PrestaShop, ele foi baixado mais de 1000 vezes. Este fato serviu como um poderoso impulso para um maior desenvolvimento. Hoje a equipe PrestaShop conta com 70 funcionários, e Bruno Levesque se autodenomina milionário.

Bruno Levesque

Tendo surgido em 2007, o PrestaShop está ganhando popularidade e em 2011 tornou-se o melhor mecanismo de comércio eletrônico gratuito. Escrevemos sobre isso no artigo: .

Equipe PrestaShop

A alegria da equipe ao atingir 100 mil downloads

Aliás, Bruno Levesque, sendo o principal desenvolvedor e programador, verifica pessoalmente todo o novo código do seu programa e todos os plugins oficiais.

A PrestaShop recentemente mudou de design brilhante e ácido com um logotipo em forma de mão na bolsa para um design mais formal com um animal de estimação exclusivo: um pinguim.

Novo logotipo

Hoje, a empresa tem grandes planos relacionados à entrada no mercado russo.

Para quem o PrestaShop é melhor?

“Se você precisa de um CMS estrangeiro gratuito e pronto para usar para uma loja online com tradução 100% oficial, então PrestaShop é o que você precisa!”

Este mecanismo é fácil de baixar, instalar e começar a usar. Como já dissemos, tudo está em russo. Além disso, existe um assistente integrado que o ajudará a começar: faça todas as configurações necessárias e preencha o catálogo de produtos. Isso significa que este é o motor ideal para iniciantes!

PrestaShop também sempre possui modelos de alta qualidade que vêm na caixa por padrão. Eles atualizam constantemente seu modelo pronto para uso, de acordo com a moda. Isso significa que se você não tem dinheiro para comprar um modelo para sua loja, você pode começar a usar o modelo gratuito e de alta qualidade que vem incluído.

Principais prós e contras do PrestaShop

“Não existem motores ideais. A eterna busca pelo equilíbrio entre simplicidade e funcionalidade faz com que você sempre possa destacar os prós e os contras do motor!”

Vejamos os prós e contras geralmente aceitos do PrestaShop CMS para entender o que espera por você quando começar a trabalhar nele.

Prós do PrestaShop

1. Capacidades de SEO. Presta tem tudo pensado para SEO já no pacote básico. Bem, você precisará procurar plug-ins de terceiros. CNCs são gerados automaticamente, redirecionamentos 301, preenchimento de meta tags de descrição e palavras-chave para a página do produto.
2. Catálogo de produtos avançado. Inicialmente, o PrestaShop é voltado para lojas de médio porte. Portanto, a funcionalidade para trabalhar com o catálogo de produtos é bastante ampla desde o início. Você poderá vender produtos com muitos extras. características que seus clientes podem encontrar facilmente usando um filtro avançado para opções adicionais. propriedades e depois compare.
3. Funcionalidade muito rica para reter clientes. Você pode manter um banco de dados de clientes, enviar boletins informativos por e-mail sobre promoções ou aniversários. Você poderá trabalhar com clientes por meio das redes sociais. redes.

Contras do PrestaShop

1. Não é popular o suficiente na Rússia. Acontece que ele é pouco conhecido na Rússia. Ao contrário do OpenCart, por exemplo, ele tem muito menos desenvolvedores e muito menos fóruns onde você pode fazer perguntas.
2. Cria uma carga no servidor. Se você tiver muitos produtos, a carga no servidor aumentará significativamente. É por isso que a hospedagem gratuita não é adequada para você.
3. Não é possível definir outro texto além da descrição do anúncio do produto. Isso leva à duplicação de conteúdo, o que pode ser ruim para a otimização.

Primeiros passos com PrestaShop

Durante o processo de instalação, você só precisa clicar em Avançar algumas vezes e a configuração é feita de maneira conveniente usando o assistente de configuração integrado.

A primeira janela do assistente de configuração

Começar, assim como trabalhar no próprio PrestraShop, é muito simples, porque... Os desenvolvedores fizeram da facilidade de uso a base de seu produto. Na opinião deles, o PrestaShop deveria ser fácil de manter e operar porque... Destina-se principalmente a pequenas lojas online. Isso significa que o PrestaShop é mais adequado para startups do que qualquer outra pessoa: com ele você pode facilmente abrir uma nova loja online.

Como vão as coisas com o PrestaShop na Rússia?

Como já escrevemos no post anterior, a participação do PrestaShop na Rússia é de 5%. Muitos serviços russos para lojas online, como Yandex.Checkout, lançam um plugin para fácil integração com PrestaShop. Você pode ler mais sobre integração no artigo.

Existe uma comunidade PrestaDev russa, existem várias empresas especializadas que desenvolvem no PrestaShop e produzem plugins.

Funcionalidade PrestaShop

Já pronto para uso, o PrestaShop possui funcionalidades muito ricas. É improvável que você domine todo o poder do PrestaShop imediatamente. Ao baixar e instalar este script gratuitamente, você obtém uma loja online de classe mundial:

• várias categorias e propriedades de mercadorias
• filtro conveniente de produtos por propriedades
• todos os tipos de ferramentas de marketing
• Você pode baixar o plugin Yandex.Checkout no site Yandex
• vários relatórios estatísticos sobre produtos e clientes
• todos os tipos de configurações de SEO

Existe uma loja no site oficial onde você pode comprar um dos milhares de plugins caso esteja faltando alguma funcionalidade específica.

Comparação do PrestaShop com outros motores gratuitos

Todos os motores de lojas online têm seus pontos fortes. Vamos comparar o PrestaShop com outros populares motores gratuitos e vamos ver se ele perde para eles ou, pelo contrário, ganha:

• PrestaShop não é um CMS completo no sentido convencional. Este é um mecanismo de loja online altamente especializado. Nesse aspecto, perde visivelmente para, por exemplo, WooCommerce ou VirtueMart, que, sendo plug-ins para CMSs completos, possuem amplos recursos de CMSs clássicos.
• O mecanismo de modelo Smarty é usado como ferramenta de construção de modelo. Embora para muitos isso seja uma vantagem.
• Comunidade insuficiente de língua russa. O suporte ao idioma russo no fórum oficial não é muito bom. Nesse quesito é muito inferior, por exemplo, ao OpenCart, para o qual é fácil encontrar um fórum com um monte de respostas para um monte de perguntas sobre o motor.
• O site oficial não foi traduzido para o russo. A este respeito, todos os motores estrangeiros são semelhantes. Mas algumas partes de. sites já foram traduzidos (demonstração, loja de plugins).
• É ainda mais complexo do que, por exemplo, seu pior inimigo, o OpenCart. Embora seja mais fácil do que, por exemplo, Magento.

Conclusões. Vale a pena usar o PrestaShop?

Em nossa opinião, definitivamente vale a pena se você precisar imediatamente de um mecanismo poderoso e especializado, feito sob medida para e-commerce. O roteiro está em constante movimento e desenvolvimento, o que significa que sua loja estará sempre na moda e não ficará sem suporte.

No post você poderá conhecer as lojas online deste motor.