La structure des fichiers du nouveau thème Classic | Prestashop 1.7

La version stable de Prestashop 1.7 est sortie ce lundi et comme vous pourrez le constater, la structure des fichiers dans le dossier thème a totalement été remaniée. Maintenant, on retrouve un seul fichier CSS et JS pour tout le site. Les TPL sont classés dans différents dossiers: commandes, clients, catalogues….

Voici la nouvelle structure:

A) assets

| css
——> theme.css

| img
——> logo.png

| js
——> custom.js
——> theme.js

 

    Ce dossier comprend l’ensemble des fichiers CSS, Javacript et les images de votre thème

—————————

B) config

| theme.yml

    Ce dossier donne les informations sur le nom, la version et l’auteur du thème. Mais aussi les colonnes disponibles, les hooks et modules disponibles, la taille des images, les css, js utilisés….

—————————

C) modules

| blockreassurance
| contactform
| ps_banner
| ps_categorytree
| ps_contactinfo
| ps_currencyselector
| ps_customeraccountlinks
| ps_customersignin
| ps_emailsubscription
| ps_facetedsearch
| ps_featuredproducts
| ps_imageslider
| ps_languageselector
| ps_linklist
| ps_mainmenu
| ps_searchbar
| ps_sharebuttons
| ps_shoppingcart
| ps_socialfollow

    Ce dossier regroupe les modules de votre thème

—————————

D) preview.png

    Le fichier preview.png correspondant à  la vignette utilisée dans l’onglet thème du back-office de Prestashop pour illustrer le thème

—————————

E) templates

| _partials +
——> breadcrumb.tpl
——> footer.tpl
——> form-errors.tpl
——> form-fields.tpl
——> head.tpl
——> header.tpl
——> javascript.tpl
——> notifications.tpl
——> pagination.tpl
——> stylesheets.tpl

| catalog
——>_partials +
– active_filters.tpl
– facets.tpl
– miniatures +
           – brand.tpl
           – category.tpl
           – pack-product.tpl
           – product.tpl
– product-activation.tpl
– product-add-to-cart.tpl
– product-cover-thumbnails.tpl
– product-customization.tpl
– product-details.tpl
– product-discounts.tpl
– product-images-modal.tpl
– product-prices.tpl
– product-variants.tpl
– products-bottom.tpl
– products-top.tpl
– products.tpl
– quickview.tpl
– sort-orders.tpl
– variant-links.tpl
——> brands.tpl
——> listing +
– best-sales.tpl
– category.tpl
– manufacturer.tpl
– new-products.tpl
– prices-drop.tpl
– product-list.tpl
– search.tpl
– supplier.tpl
——> manufacturers.tpl
——> product.tpl
——> suppliers.tpl

| checkout
——> _partials +
– address-form.tpl
– address-selector-block.tpl
– cart-detailed-actions.tpl
– cart-detailed-product-line.tpl
– cart-detailed-totals.tpl
– cart-detailed.tpl
– cart-summary-items-subtotal.tpl
– cart-summary-product-line.tpl
– cart-summary-totals.tpl
– cart-summary.tpl
– cart-voucher.tpl
– customer-form.tpl
– footer.tpl
– header.tpl
– login-form.tpl
– order-confirmation-table.tpl
– order-final-summary-table.tpl
– order-final-summary.tpl
– steps +
     – addresses.tpl
     – checkout-step.tpl
     – payment.tpl
     – personal-information.tpl
     – shipping.tpl
——> cart-empty.tpl
——> cart.tpl
——> checkout-process.tpl
——> checkout.tpl
——> order-confirmation.tpl

| cms
——> _partials +
– sitemap-tree-branch.tpl
——> category.tpl
——> page.tpl
——> sitemap.tpl
——> stores.tpl

| contact.tpl

| customer
——> _partials +
– address-form.tpl
– block-address.tpl
– customer-form.tpl
– login-form.tpl
– my-account-links.tpl
– order-detail-no-return.tpl
– order-detail-return.tpl
– order-messages.tpl
——> address.tpl
——> addresses.tpl
——> authentication.tpl
——> discount.tpl
——> guest-login.tpl
——> guest-tracking.tpl
——> history.tpl
——> identity.tpl
——> my-account.tpl
——> order-detail.tpl
——> order-follow.tpl
——> order-return.tpl
——> order-slip.tpl
——> page.tpl
——> password-email.tpl
——> password-infos.tpl
——> password-new.tpl
——> registration.tpl

| errors
——> 404.tpl
——> forbidden.tpl
——> maintenance.tpl
——> not-found.tpl
——> restricted-country.tpl
——> static +
– 500.html
– 503.html

| index.tpl

| layouts
——> layout-both-columns.tpl
——> layout-content-only.tpl
——> layout-error.tpl
——> layout-full-width.tpl
——> layout-left-column.tpl
——> layout-right-column.tpl

| page.tpl

    Ce dossier fait référence à l’ensemble des fichiers tpl qui permet de faire fonctionner votre thème

—————————

E) _dev

| css
——> components +
– block-reassurance.scss
– cart.scss
– categories.scss
– checkout.scss
– contact.scss
– custom-text.scss
– customer.scss
– customization-modal.scss
– drop-down.scss
– errors.scss
– featuredproducts.scss
– footer.scss
– imageslider.scss
– mainmenu.scss
– products.scss
– quickview.scss
– search-widget.scss
– stores.scss
——>partials +
–  _commons.scss
–  _fonts.scss
–  _mixins.scss
–  _variables.scss
——>theme.scss

| img

| js
——> cart.js
——> checkout.js
——> components +
– block-cart.js
– drop-down.js
– form.js
– product-miniature.js
– product-select.js
– top-menu.js
——>customer.js
——>lib +
– bootstrap-filestyle.min.js
– jquery.scrollbox.min.js
——>listing.js
——>product.js
——>responsive.js
——>theme.js

    Ce dossier regroupe les fichiers sources de votre thème: scss, img, js.

Articles similaires

Supprimer le cadre blanc autour de vos images | Astuce Prestashop 1.6
views 5270
Lorsqu’on upload une image dans Prestashop, ce dernier la redimensionne selon les différents formats spécifiés dans « préférences/images ». Mais si vous regardez bien le front-office de  votre boutique, vous pouvez remarquer que Prestashop ajoute par défaut un cadre blanc autour de votre image. Cette astuce Prestashop est valable pour la version 1.6 Voici la solution pour remédier à ce pr...
Connaître les modules de la page d’accueil | Astuce Prestashop 1.6
views 17575
Vous avez installé votre boutique Prestashop 1.6 et désirez modifier votre page d'accueil ? Ce petit tuto va vous aider à le faire en indiquant le nom du module que vous devez utiliser pour modifier votre slider, votre menu.... Ils sont facilement accessibles depuis votre back-office PrestaShop en cliquant sur l’onglet « Modules et services ». Si vous désirez aussi modifier le fichier tpl ou cs...
Taille des Images du thème par défaut de Prestashop 1.6
views 7012
Ce tutoriel va vous permettre de connaitre la taille des images du thème par défaut de Prestashop La plupart des images que vous téléchargez dans le back-office doivent être enregistrées au format .jpg ou .png. Attention pour activer le format png il faut aller dans Préférences > Images et dans la partie "Options de génération d'images", cochez dans format d'image : Utiliser le PNG uniquemen...
Comment augmenter la taille de la description courte dans Prestashop
views 4190
Lors de la création de la fiche produit sur Prestashop, vous serez peut-être être bloqué par la limitation du nombre de caractères de la description courte (maximum 400 caractères) Bonne nouvelle, pas besoin d'aller dans le code, une simple manipulation à faire dans le back-office de Prestashop Comment modifie t-on le nombre de caractère ?  A) Connectez-vous dans le back-office de Pre...
Liste des variables smarty : Prestashop 1.7
views 13448
Je vais énumérer dans ce tutoriel, les variables utlisées dans Prestashop 1.7, Pour les découvrir, vous avez deux methodes. Pour les deux méthodes, il faut ouvrir le fichier header.tpl qui se situe dans themes/nomdevotretheme/templates/_partials/header.tpl. En haut de page, vous insérez soit 1) {debug}, lorsque vous allez allez sur votre site vous allez avoir une fenêtre qui va s'ouvrir avec...

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *