PrestaShop is a robust open-source e-commerce platform designed for flexibility and customization. It allows developers to modify and enhance its core functionality using hooks, which are predefined entry points in the system. These hooks enable seamless integration of custom features, ensuring that updates and maintenance of the core system remain hassle-free.
This blog provides a comprehensive guide to adding, saving, and displaying custom fields for both product and customer forms in PrestaShop.
By the end of this blog, you will have a thorough understanding of how to create custom form fields in Prestashop, store their data in the database, and display this information in the Admin panel.
Step 1: Adding Custom Fields to Product and Customer Forms-
The first step in customizing PrestaShop involves injecting new fields into the forms for products and customers.
Adding Custom Fields to the Product Form
For this, we will use the displayAdminProductsExtra hook to append the custom field to the product form. This hook is triggered whenever a product is edited in the admin panel.
Hook Overview: This hook allows you to add any extra fields or information to the product creation/edit page.
Explanation of Code:
The example provided demonstrates how to fetch existing data for a custom field from the database and display it in the form. The product ID is retrieved dynamically from the $params, ensuring that the data displayed corresponds to the product being edited.
Add Custom Fields on the Customer Registration Form
Custom Registration Fields – Prestashop Addons
Adding Custom Fields to the Customer Form
Similarly, the displayAdminCustomersForm hook provides an entry point for injecting fields into the customer form.
Hook Overview: This hook is triggered when rendering the customer creation/edit form.
By assigning Smarty variables, the template for the custom field is seamlessly integrated into the admin interface.
Step 2: Creating the Database Fields-
Why Modify the Database?
PrestaShop adheres to a relational database model. By adding custom columns to the ps_product and ps_customer tables, you ensure that your custom data remains associated with its respective product or customer.
SQL Queries:
The provided SQL scripts demonstrate how to add columns to the ps_product and ps_customer tables. These queries are executed once to prepare the database for storing the custom field values.
SQL Query for Product:
SQL Query for Customer:
Best Practices:
- Ensure creating a backup of the database before implementing or proceeding with displayAdminProductsExtra any schema changes.
- Use column names that clearly describe their purpose to avoid confusion.
Step 3: Designing the Custom Form Templates-
Templates play a vital role in ensuring that custom fields blend seamlessly into the PrestaShop admin UI. Using Smarty, PrestaShop’s templating engine, you can design user-friendly and responsive forms.
Product Form Template (custom_product_form.tpl):
Customer Form Template (custom_customer_form.tpl):
Enhancements:
- Add validation: Use JavaScript to validate user input before submission.
- Styling: Enhance the form with CSS classes for a consistent look and feel.
Step 4: Saving the Custom Field Values-
Once the form fields are submitted, the values need to be saved to the database. PrestaShop hooks like actionProductSave and actionCustomerSaveAfter allow developers to execute custom logic during the save operation.
Saving Product Field Values
The actionProductSave hook ensures that the custom field data is saved when a product is saved/updated:
Saving Customer Field Values
The actionCustomerSaveAfter hook is used to save the custom customer field data:
Step 5: Displaying Custom Field Values-
Displaying custom fields involves retrieving the stored values and rendering them appropriately in the admin interface.
Displaying Product Custom Field Values
Use the same displayAdminProductsExtra hook to show the custom field value alongside other product details. The retrieved data can be displayed in either a read-only or editable format, depending on the use case.
Displaying Customer Custom Field Values
Similarly, the displayAdminCustomersForm hook retrieves and displays the custom field value on the customer form.
Additional Tips for Developers
1. Testing and Debugging:
- Use PrestaShop’s debug mode to identify issues.
- Test your custom fields with various inputs to ensure compatibility.
2. Scalability:
- If you want to use multiple custom fields, consider creating a separate table to store them dynamically.
- Use indexed columns for faster queries.
3. Security:
- Always validate and sanitize user inputs using pSQL().
- Restrict access to these fields based on user roles, if required.
4. Future Compatibility:
- Use hooks exclusively to avoid modifying core files.
- Regularly update your code to remain compatible with newer PrestaShop versions.
Conclusion
Adding custom fields to products in PrestaShop is a simple yet powerful way to extend the platform’s functionality. By following this guide, you can ensure that your customizations remain modular, maintainable, and compatible with future PrestaShop updates.
Feel free to adapt these techniques to other areas of your PrestaShop store, and share your results in the comments below!
