Super hook module

The example shows two blocks, highlighted in different colors green and orange. Each block, in addition to the content inside (Price: 20 rubles and the Super Hook Module), is framed by so-called tags. The first tag is an opening block, the second with a dash is a closing one, in our case this is

and , which in turn have their own identifier (id) and class (class). They are intended for visual design (styling) of a website page using CSS technology, where they are called an id selector and a class selector.

In order to distinguish them in CSS, they are denoted using symbols. For id it is a hash #, and for class it is a dot. For example, in our example, id=’cena’ would be denoted as

And class=’nazvanie_tovara’ will be denoted as

Name_product.

These selectors are also used in JavaScript and jQuery to bind the script to a specific block.

In addition, CSS uses type selectors. These are parts of the tag. In our case, this is a div type selector and a span type selector.

Defining a selector using the Mozilla FireFox browser

The easiest way to define a selector is using Mozilla. I'll show you how it's done. Open the page with the product and this time move , which is now under the button to the cart, above the price tag of the product. That is, we need to define the block selector with the product price as the parent block and the module selector as the child block. Opening an additional panel in FireFox is the same as in Chrome, the key combination is Ctrl+Shift+I. Then, in the additional field menu on the left, find the arrow (select page element) and click it. Now, moving the cursor over the site page, we see the selection of blocks. We move the cursor over the block with the price tag and, when selecting this block, click on it. Now in the additional field, highlight the beginning of the html block

Right-click on it and select “copy unique selector” in the window that appears.

We do the same with the Additional information module

in the module settings field Module selector or HTML code, enter the child selector.block_wnd

Select the position in relation to the block “Inside the block below” and save the result.

Was Now

Video instructions: https://www.youtube.com/watch?v=xTSXTj0QM5E

Defining selectors using the Google Chrome browser

In the Super Hook module, we need to specify the block selector (parent block) to which we want to bind the module block (child block). These selectors are very easy to define using the Google Chrome browser. To do this, you need to open the developer tool in the browser using the key combination Ctrl+Shift+I or simply hover the mouse cursor over the site page and press the right mouse button. And in the drop-down menu select View element code. An additional window will open displaying the html code and a small window on the right with the CSS code. The window has a menu with an image of a mobile phone magnifying glass and the name of the tabs starting with Elements.

At the bottom of the selected field we see a footnote with the selectors we need to configure the module. The picture shows a div type selector, id selector

#short_description_content

The following are class selectors separated by a dot, but we are not interested in them. We are only interested in the main id selector. It will be needed as a pointer to the parent block. In the module settings, in the Block selector field, write this block identifier

#short_description_content

Now let's attach the payment logos module to this block, which is now located under the add to cart button. To do this, we need to define a logo block selector.

And I will show the second method of determination. Switch the developer tools menu to Elements in the lower window. And move the mouse cursor over the payment logo module. Right click. In the drop-down list, select the bottom tab View element code. In the developer window in the HTML code, move the mouse cursor until the logo module block is highlighted in blue and you will see the opening div tag with id=’product_payment_logos’. This is the child identifier. Let’s write it in the module settings in the “Module selector or HTML code” field as a selector

#product_payment_logos

Let’s select a position relative to the block in the settings with the value “Under the block” and save the result.

Go to the site page and see the result

Video instructions: https://www.youtube.com/watch?v=c5UafCGsr-U

This way we can move the module block, and not only the module, to any place on the site page. Transfer is limited only to the page itself. Transfer to another page is not possible.

Additional module features

As you can see on the settings page there are several more fields that we did not fill out. I will describe what they are for using an example. In addition to moving blocks, the module allows you to supplement the page with your own content using HTML, JS and CSS technologies. For example, let’s add a VKontakte group widget to the sidebar of the site first.

So, let's define a parent selector. As an example, I offer the categories module in the sidebar.

Copy HTML code

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

and paste it into the “Module selector or HTML block” field

My blog site has already accumulated a lot of information on the increasingly popular PrestaShop engine. According to the official website, the distribution has already been downloaded by one and a half million users. On the Russian Internet, interest in this CMS is also growing, even if we consider this blog - 60% of transitions are somehow related to PrestaShop.
Therefore, I combined all the posts I wrote, finalized something and it turned out to be complete PrestaShop instructions.

January 2015: Updated instructions for PrestaShop 1.6

Depending on the user level, you can work with one of three PDF files:

“Basics of working with PrestaShop for a store manager” – suitable for users who work with an already configured store. Their tasks include only maintaining an up-to-date product database, so all operations are described in the most understandable language.

“PrestaShop - instructions for users” – if you are launching an online store yourself, then this instruction will suit you. It describes the basic operations for installing Prestashop, setting up the main components, working with modules and store templates. After reading the instructions, you will be able to work more fruitfully with Presta, modify the template, install and edit modules.

“PrestaShop - instructions for developers” – the main emphasis is on the software part: how to develop your own module, what classes are responsible for, and much more. The instructions will be useful to component developers and users who decide to expand the basic functionality of the presta.

Previous releases.

June 2012: At the moment, the instructions for Prestashop have 26 pages, but I plan to add new ones as new blog posts appear. In the guide, I tried to consider more complex issues than the trivial addition of a product or category. For example, the instructions cover moving modules from hook to hook, modifying the default template, etc. The manual is not suitable for advanced developers, as it deals with more superficial issues than the class or controller system.

September 2012: The basic instructions have not been changed, but additional instructions have been added for beginners or store managers. There is a category of people who do not necessarily know what hosting is or how to move a cart to another column, for example, these are store managers. They have to work with categories, add products and do similar things. It is for them that the instructions “Basics of working with PrestaShop for a store manager” were written; at the moment it contains 4 chapters and 13 pages. I'm thinking of increasing the volume over time.

August 2013: Added instructions for developers for PrestaShop 1.5. It examines the base classes in more detail, describes the procedure for creating a module and working with the template. Added instructions for updating PrestaShop to 1.5

October 2013: All instructions for Prestashop are divided into two folders, depending on the engine version. The “prestashop 1_4″ folder contains instructions published in 2012, all new instructions are located in the “prestashop 1_5″ folder.

September 2014: Added instructions for PrestaShop 1.6.

PrestaShop is a popular, highly specialized e-commerce platform. The engine itself is free and very easy to use, but all themes and add-ons are paid, so it is not the most popular choice. However, PrestaShop:

• a developed community where you can find answers to your questions;
• a large number of excellent themes and addons to meet any needs of an online store;
• There is support that you can also ask questions to.

How to install PrestaShop

The first step is, of course, installing the CMS itself on your hosting. You won’t have any difficulties with this if you watch the video in which we explain:

• what are the minimum system requirements to install this engine;
• how to install PrestaShop using cPanel;
• what settings need to be made after installation.

Setting up PrestaShop: administration

Having successfully installed the engine, you need to understand its settings and administration. You won't come across a lot of settings, since all the main ones already work by default. This is a big advantage of PrestaShop over other CMSs, such as WordPress or Joomla!, which require the installation of special add-ons for e-commerce. However, some configuration still needs to be done. So what will you learn from the video:

• how to change the interface language;
• what are the main control panel buttons;
• how to customize menu display;
• what categories are on the menu.

Setting up PrestaShop: maintenance, administrators, live editing mode

Let's look at the most important settings for running an online store on PrestaShop. After watching our video tutorial you will learn:

• enable maintenance mode;
• add new users with rights to work in the admin panel;
• edit website design;
• work with demodata.

PrestaShop modules: how to change, edit, add and delete

Modules are an important component of a CMS. Almost all settings for the appearance of the site will be made using modules. Let's see how to work with them:

• where is the block with modules located in the admin area;
• how to add, remove, edit or change modules.

How to add new products to the PrestaShop catalog

PrestaShop provides ample opportunities to work with products, in addition to adding and editing them. In the video we'll look at:

• how to add combinations and characteristics of products;
• working with files: customization and attachments;
• how to add a product step by step and configure its display;
• how to enter prices for goods;
• how to work with SEO fields;
• how to upload new files.

How to work with product categories in PrestaShop

Let's look at product categories and their settings in more detail. Using categories, products are grouped according to certain characteristics, which simplifies the work with the online store for both its owner and users. We have prepared a video for you on the following questions:

• what are subcategories and how to configure their display;
• how to add new categories;
• how to customize the appearance of categories for the user;
• how to fill in all the required fields when adding a category;
• How to add a product to an existing category.

In this post we will analyze in detail a specialized CMS for creating an online store PrestaShop. This engine is very popular in its homeland - in France, but is not yet very popular in Russia. Only 5% of stores in Russia are launched on this engine, versus 37% on OpenCart. Why, despite its rich functionality, free and high level, the script cannot become a leader, we will discuss in this post.

This is what the showcase looks like: http://demo.prestashop.com/en/?view=front

PrestaShop online store showcase

This is what the admin panel looks like: http://demo.prestashop.com/en/?view=back

Administrative part of the online store on PrestaShop

It is perfectly adapted for launching an online store in Russia. The distribution downloaded from the official website always has 100% support for the Russian language. This means that work will be comfortable from the very first steps: all interfaces of the installation window and admin panel are completely in Russian! A demo of the store in Russian can be viewed on our test site http://prestashop-testshop.ru/, which we deployed on Beget hosting in 1 click thanks to the hosting auto-installer.

All the most popular services for online stores, such as payment aggregators and on-line chat services, have an official plugin for PrestaShop. You can easily download, for example, the Yandex.Checkout module for free from the aggregator’s official page.

About PrestaShop and developers

At the origins of Prestashop were two people, Igor Schlumberger and Bruno Levesque. They are now co-founders and the company is owned by private investors.

As Bruno Levesque says in one of his interviews, initially their office was located in a very small room. Then in 2007 in Paris they were a small team that was developing in the field of online trading.

During the first month of work on the PrestaShop engine, it was downloaded more than 1000 times. This fact served as a powerful impetus for further development. Today the PrestaShop team has 70 employees, and Bruno Levesque calls himself a millionaire.

Bruno Levesque

Having appeared in 2007, PrestaShop is steadily gaining popularity and in 2011 it became the best free e-commerce engine. We wrote about this in the article: .

PrestaShop Team

The team's joy upon reaching 100,000 downloads

By the way, Bruno Levesque, being the main developer and programmer, personally checks all the new program code of his and all official plugins.

PrestaShop recently rebranded from the bright, acidic design with a hand-shaped logo on the bag to a more formal design with a signature pet: a penguin.

New logo

Today, the company has big plans related to entering the Russian market.

Who is PrestaShop best for?

“If you need a ready-to-use foreign free CMS for an online store with 100% official translation, then PrestaShop is what you need!”

This engine is easy to download, easy to install, and easy to get started with. As we have already said, everything in it is in Russian. In addition, there is a built-in assistant that will help you get started: make all the necessary settings and fill out the product catalog. This means that this is the ideal engine for beginners!

PrestaShop also always has high-quality templates that come in the box by default. They constantly update their template out of the box according to fashion. This means that if you don’t have the money to buy a template for your store, then you can get started using the free, high-quality template that comes included.

Main pros and cons of PrestaShop

“There are no ideal engines. The eternal search for a balance between simplicity and functionality leads to the fact that you can always highlight the pros and cons of the engine!”

Let's look at the generally accepted pros and cons of the PrestaShop CMS to understand what awaits you when you start working on it.

Pros of PrestaShop

1. SEO capabilities. Presta has everything thought out for SEO already in the basic package. Well, you will need to look for third-party plugins. CNCs are generated automatically, 301 redirects, filling in description and keywords meta tags for the product page.
2. Advanced product catalog. Initially, PrestaShop is aimed at medium-sized stores. Therefore, the functionality for working with the product catalog is quite wide right out of the box. You will be able to sell products with many extras. characteristics that your customers can easily find using an advanced filter for additional options. properties and then compare.
3. Very rich functionality for retaining customers. You can maintain a customer database, send them email newsletters about promotions or birthdays. You will be able to work with customers through social media. networks.

Cons of PrestaShop

1. Not popular enough in Russia. It just so happens that he is little known in Russia. Unlike OpenCart, for example, it has much fewer developers, and much fewer forums where you can ask a question.
2. Creates a load on the server. If you have a lot of products, the load on the server increases significantly. This is why free hosting is not suitable for you.
3. It is not possible to set text other than the description for the product announcement. This leads to duplicate content, which can be bad for optimization.

Getting started with PrestaShop

During the installation process, you only have to click Next a few times, and the setup is conveniently done using the built-in setup wizard.

The first window of the setup wizard

Getting started, as well as working in PrestraShop itself, is very simple, because... The developers have made ease of use the basis of their product. In their opinion, PrestaShop should be easy to maintain and operate because... It is aimed primarily at small online stores. This means that PrestaShop is more suitable for startups than anyone else: using it you can easily start a new online store.

How are things going with PrestaShop in Russia?

As we already wrote in the previous post, the share of PrestaShop in Russia accounts for 5%. Many Russian services for online stores, such as Yandex.Checkout, release a plugin for easy integration for PrestaShop. You can read more about integration in the article.

There is a Russian PrestaDev community, there are several specialized companies that develop on PrestaShop and produce plugins.

PrestaShop functionality

Already out of the box, PrestaShop has very rich functionality. You are unlikely to master all the power of PrestaShop right away. By downloading and installing this script for free, you get a world-class online store:

• various categories and properties of goods
• convenient product filter by properties
• all kinds of marketing tools
• You can download the Yandex.Checkout plugin on the Yandex website
• various statistical reports on products and customers
• all kinds of SEO settings

There is a store on the official website where you can buy one of thousands of plugins if you are missing some specific functionality.

Comparison of PrestaShop with other free engines

All online store engines have their strengths. Let's compare PrestaShop with other popular free engines and see if it loses to them or, on the contrary, wins:

• PrestaShop is not a full-featured CMS in the conventional sense. This is a highly specialized online store engine. In this regard, it noticeably loses to, for example, WooCommerce or VirtueMart, which, being plugins for full-fledged CMSs, boast extensive capabilities of classic CMSs.
• The Smarty template engine is used as a template building tool. Although for many this will be a plus.
• Insufficient Russian-speaking community. Russian-language support on the official forum is not very good. In this regard, it is much inferior to, for example, OpenCart, for which it is easy to find a forum with a bunch of answers to a bunch of questions about the engine.
• The official website has not been translated into Russian. In this regard, all foreign engines are similar. But some parts of. sites have already been translated (demo, plugin store).
• It is still more complex than, for example, its worst enemy OpenCart. Although it’s easier than, for example, Magento.

Conclusions. Is PrestaShop worth using?

In our opinion, it’s definitely worth it if you immediately need a powerful and specialized engine tailored for e-commerce. The script is in constant motion and development, which means your store will always be in trend and will not be left without support.

In the post you can familiarize yourself with online stores on this engine.