Book Image

Practical Module development for Prestashop 8

By : Louis AUTHIE
Book Image

Practical Module development for Prestashop 8

By: Louis AUTHIE

Overview of this book

After version 1.7, PrestaShop underwent a host of changes, including migration to a Symfony-based system from an outdated legacy code. This migration brought about significant changes for developers, from routine maintenance to module development. Practical Module Development for PrestaShop 8 is curated to help you explore the system architecture, including migrated and non-migrated controllers, with a concise data structure overview. You’ll understand how hooks enable module customization and optimize the CMS. Through the creation of seven modules, you’ll learn about the structure of modules, hook registration, the creation of front-office controllers, and Symfony back-office controllers. By using Doctrine entities, services, CQRS, grids, and forms, you’ll be guided through the creation of standard, payment and carrier modules. Additionally, you'll customize and override themes to achieve your desired e-commerce store look. By the end of this book, you’ll be well equipped to provide modern solutions with PrestaShop that meet client requirements.

Related Content you might be interested in

Current Title:

Small book image
Practical Module development for Prestashop 8
Louis AUTHIE
Apr, 2023 | 300 pages
No titles found
Table of Contents (23 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Download the color images
Conventions used
Get in touch
Share Your Thoughts
Download a free PDF copy of this book
1
Part 1 – Understanding How PrestaShop is Structured and How It Works
Part 1 – Understanding How PrestaShop is Structured and How It Works
Free Chapter
2
Chapter 1: Quick Overview of PrestaShop
Chapter 1: Quick Overview of PrestaShop
Technical requirements
The data model–how and where data is stored
The core classes – how the MVC works
Summary
3
Chapter 2: The Configuration and Initialization of PrestaShop
Chapter 2: The Configuration and Initialization of PrestaShop
Technical requirements
The legacy FO controller initialization
The legacy BO and Symfony admin controller initialization
The most important constants to set as a developer
The Dispatcher class
Summary
4
Chapter 3: The Front Office
Chapter 3: The Front Office
Technical requirements
Discovering how an FO controller works
Using the model
Using the views from the theme
Summary
5
Chapter 4: The Back Office
Chapter 4: The Back Office
Technical requirements
Discovering how a legacy-based BO controller works
The most useful tools for recurrent HTML generation: the Helper classes
Discovering how a migrated Symfony-based BO controller works
Using the CQRS design pattern
Generating table views by using Grid components
Summary
6
Chapter 5: The Hooks
Chapter 5: The Hooks
Technical requirements
Quick presentation of a hook
Discovering the hook ObjectModel child object
Presenting the two types of hook
Registering/unregistering a module to a hook and implementing a module’s behavior on a hook execution
Executing a hook
Summary
7
Chapter 6: The Themes
Chapter 6: The Themes
Technical requirements
Understanding what a theme is and its structure
The FO Smarty templates
The most used Smarty constants
The CSS/JS assets
Summary
8
Part 2 – How to Create Your Own Modules
Part 2 – How to Create Your Own Modules
9
Chapter 7: What Are Modules? Let’s Create a Hello World Module
Chapter 7: What Are Modules? Let’s Create a Hello World Module
Technical requirements
Defining a module
Creating our first hello world module
Installing our first module
Summary
10
Chapter 8: A Reinsurance Block Module
Chapter 8: A Reinsurance Block Module
Technical requirements
Defining our module design
Creating the module’s initial structure
Adding a Smarty template view
Adding CSS styles to our module
Testing our module
Summary
11
Chapter 9: A Customer Callback Request Module
Chapter 9: A Customer Callback Request Module
Technical requirements
Defining our module design
Creating the module’s initial structure
Managing the model the modern way
Creating a modern BO controller containing a grid to list all the requests
Adding the BO controller to the BO menu
Creating a configuration page for our module and adding a Symfony form
Summary
12
Chapter 10: Category Extension Module
Chapter 10: Category Extension Module
Technical requirements
Presenting the most useful hooks to extend a form and handle it
Defining our module design
Creating the module’s initial structure
Creating the entities
Extending the Category form in creation mode
Improving the Category form in edition mode
Handling the extended form submission
Handling Category deletion
Displaying saved content on the FO Category page
Testing our module
Summary
13
Chapter 11: A Simple Blogging Module
Chapter 11: A Simple Blogging Module
Technical requirements
Defining our module design
Designing the general architecture of this module
Creating entities and relationships, repositories, and database tables
Creating commands, queries, and data transfer objects
Creating BO controllers and routes
Adding forms for creating and editing entities
Creating Grids
Handling deletions
Creating the FO controllers and displaying the data
Summary
14
Chapter 12: A Cash Payment Module
Chapter 12: A Cash Payment Module
Technical requirements
Defining our module design
Creating our module structure
Creating the payment validation controller
Testing our module
Summary
15
Chapter 13: A Drive Delivery Module
Chapter 13: A Drive Delivery Module
Technical requirements
Defining our module design
Defining a PrestaShop Carrier module
Creating our module structure
Creating a WHRelayCart entity to save our chosen relay points
Creating a Carrier programmatically
Displaying the relay pickup points list during the checkout
Handling a relay pickup point choice via an Ajax FO controller
Displaying the pickup point on the order view BO controller
Creating a Widget to promote our module anywhere on the FO
Testing our module
Summary
16
Part 3 – Customizing Your Theme
Part 3 – Customizing Your Theme
17
Chapter 14: How to Create a Child Theme
Chapter 14: How to Create a Child Theme
Technical requirements
Discovering what a child theme is
Creating a child theme structure
Installing and testing our child theme example
Summary
18
Chapter 15: Overriding Some Templates
Chapter 15: Overriding Some Templates
Technical requirements
Overriding a module template from a (child) theme
Overriding a module CSS asset from a (child) theme
Overriding a module JavaScript asset from a (child) theme
Summary
19
Chapter 16: Assets Compiling with Webpack
Chapter 16: Assets Compiling with Webpack
Technical requirements
Understanding what Webpack does and its prerequisites
Discovering the structure of a Webpack config file
Building assets with Webpack
Summary
20
Index
Index
Why subscribe?
21
Other Books You May Enjoy
Other Books You May Enjoy
Packt is searching for authors like you
Share Your Thoughts
Download a free PDF copy of this book
Appendix – Module Upgrade, The Hooks Discovery Tool, and Multi-Store Functions
Getting the hook parameters quickly
Making a module multistore-compliant
Upgrading a module

Overriding a module JavaScript asset from a (child) theme

Still with the whrelaycarrier module, let’s trigger an alert displaying the Thanks for the choice! message on a pickup relay line click, on the modal box. The expected behavior would look like this:

Figure 15.5 – The alert box displayed on a pickup point line click after the ajax process

Figure 15.5 – The alert box displayed on a pickup point line click after the ajax process

As a reminder, the JavaScript code defining the modal box behavior can be found in the /modules/whrelaycarrier/views/js/checkout.js file.

By following the same method presented in the previous sections, for both templates and CSS file overrides, if we create a /themes/childclassicwh/modules/whrelaycarrier/views/js/checkout.js file, it will replace the original JavaScript file and will be executed instead.

So, let’s do it and copy and paste the original JavaScript content and replace the $('#whrelaycarrier_points>div>ul>li').click(function(){…}) selector event...

Previous Section
End of Section 5
Next Section