Templates and Layouts in PrestaShop 1.6 vs 1.7

Templates and Layouts in PrestaShop 1.6 vs 1.7

Let’s compare the two versions of PrestaShop one more time and see the differences in their template structure, layouts, head, notifications, listing pages, AJAX page update and view update.

Templates

Template files (.tpl) is a way for Smarty to divide content, which is then displayed as a whole on a page. The template contains several dynamic elements, where our content is located. This makes it easier to design and update sites.

The template processor uses {…} to process instructions. The rest of the document is sent to the browser as it is.

You can use a template to generate HTML files, as well as XML files, text files, etc.

Any PrestaShop theme consists of such templates, responsible for their part of the output content.

PrestaShop 1.7

Template files are stored in the templates/ theme folder. For example, the default theme has its own template files in the following folder: /themes/classic/templates.

Internal folders have the following structure:

image13

  • _partials — the code located on each page of a site. (header, footer, notifications);
  • catalog — Product page, product/brand/supplier listing, search result, etc.;
  • checkout — Cart, delivery options, payment options, order confirmations, etc.;
  • cms — all static content: contact, sitemap, CMS pages, etc.;
  • customer — customer’s account and his data;
  • errors — all error templates: not found, server error, forbidden, etc.;
  • layouts — The theme layouts: 1, 2 or more columns, full width.

Each PrestaShop theme has the following basic templates:

  • index.tpl — home page
  • catalog/product.tpl — product page
  • catalog/listing/product-list.tpl — product list page
  • checkout/cart.tpl — cart
  • checkout/checkout.tpl — checkout

PrestaShop 1.6

In PrestaShop 1.6 all .tpl files are located in the root of the theme folder:

image12

image14

image7

Layouts

Layout is responsible for organizing the content (templates on a specific page). In other words, it’s responsible for the method of location of elements (templates) on the pages of the project.

In PrestaShop 1.7 the user is given the opportunity to change the layout of each page independently. Go to admin panel  Design  Theme & Logo.

image9

Then press the Choose layouts button:

image8

A sample of a layout file (/themes/classic/templates/layouts/layout-both-columns.tpl):

Head

Assets of various kinds are connected in the <HEAD> tag.

PrestaShop 1.7

The way the assets are connected has changed in PrestaShop 1.7:

  • _partials/stylesheets.tpl
  • _partials/javascript.tpl

This method of connection allows you to use asynchronous loading of js and inline css feature.

/themes/classic/templates/_partials/head.tpl

The {block name=’head_seo’} block contains the necessary information for SEO, which is easy to edit.

PrestaShop 1.6

There is no separate template containing the <head> tag In PrestaShop 1.6.

There is a common header.tpl that also contains the <body> part (/themes/default-bootstrap/header.tpl):

Notifications

Notifications appeared in PrestaShop 1.7. This means that a client can now receive notifications from PrestaShop (e.g., notification of errors and successes). The theme can also send messages when certain events occur.

Messages are sent from the controller and are not hardcoded in the template files. This means that all messages are also translated into your specific theme language.

Types of messages:

  • success — an action was performed and everything went well;
  • error — something went wrong;
  • warning — important information merchants should know about;
  • info — “just so you know”.

To display messages on the page you need, just place the block

into the necessary template (for CMS pages it will be /themes/classic/templates/cms/page.tpl).

In the Starter Theme the default message output block is located in /templates/checkout/checkout.tpl, /templates/customer/page.tpl and /templates/layouts/layout-both-columns.tpl.

Listing pages

In PrestaShop 1.7 Listing pages contain the following templates:

image5

They expand the catalog page without duplicating the code.

AJAX page update

The product list is updated every time the client filters products or uses the search string.

In view of the fact that PrestaShop 1.7 does not have a place for duplicating the code (No presentation code duplication), now the page is not completely rebuilt by javascript. Instead, the core generates the sub template part and returns it to the client. And javascript is only used to place the content of HTML placeholders.

Each ajax request generates the following templates:

  • catalog/_partials/products-top.tpl
  • catalog/_partials/products.tpl
  • catalog/_partials/products-bottom.tpl

Update the view

Thank you for your time, I really hope this article was helpful. If you still have any questions concerning the differences between the two PrestaShop versions, feel free to leave them in the comment section below.



Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *