Custom Module Prestashop

Job ID: 38537874

Budget: €250 – €750 EUR

I need a custom prestashop module for my website thermopoudre.fr.
I'm powder coating color reseller in France.
I want a module where people can upload their work with my powder on my website.
It will permits to me to have more pictures from color and also for "applicators" (people who use my powders) to show their work and have a professional profil page.

Look at this for exemple :
https://www.prismaticpowders.com/find-applicator
https://www.prismaticpowders.com/find-applicator?q=83150
https://www.prismaticpowders.com/applicators/467927/first-industries-sa

Send me a message only if you check these links

### Requirements Document for the PrestaShop Module "Customer Photo Gallery"

**Module Name**: Customer Photo Gallery

**Target PrestaShop Version**: 1.7.8.6

**Objective**: Allow customers to upload photos of their projects using your powder coatings and provide a platform for showcasing applicators with reviews and detailed profiles.

---

### Module Features

#### 1. Customer Photo Gallery

- **Photo Upload**
- Form for customers to upload photos.
- Each photo must have a title.
- Photos can be associated with one or more powder colors used.
- Automatic integration of available colors on the site to facilitate customer selection.
- Preview images before uploading.

- **Photo Validation**
- Photos must be validated by the admin before publication.
- Interface in the back-office to validate photos.

- **Photo Display**
- Uploaded photos must be displayed in the product photos of the selected product(s) during upload.

- **Notification**
- Email notification to the applicator when their photo is validated.

- **Comments**
- Allow users to comment on photos.
- Allow applicators to respond to comments.

#### 2. Applicator Profile Page

- **Profile Information**
- Customers can provide: company name, address, Instagram, contact information, city, postal code, department, region.
- Customers can add their company logo.

- **Photo Display**
- Display the latest photos posted by the applicator with associated colors.
- Display all images posted by the applicator.

- **Rating and Review System**
- Customers can leave reviews on applicators with a rating.
- Reviews must be validated by the admin before publication.
- Reviews appear on the applicator's profile.

#### 3. Applicator Page

- **Map of France**
- Display a map of France with applicators who have filled out their profiles.
- Filter by region, department, and applicator name.

- **Photo Display**
- Display the latest photos posted by all applicators (last 10 photos).

#### 4. Optimizations and Best Practices

- **SEO and Load Time**
- Use meta tags and structured data to improve page SEO.
- Optimize uploaded images (compression, automatic resizing) to reduce load time.

- **Responsive Design**
- Ensure all module pages and features are accessible and functional on mobile.
- Use CSS frameworks like Bootstrap to ensure good adaptability.

#### 5. Notifications and Alerts

- **Real-Time Notifications**
- Use push notifications (via WebSockets or Pusher) to inform applicators of the validation of their photos and reviews in real-time.

- **Email Reminders**
- Send automatic reminders to encourage applicators to complete their profiles or respond to comments.

#### 6. Security

- **File Upload Verification**
- Scan images to detect potential malware or corrupted files.

- **Form Validation**
- Use robust validation mechanisms to prevent SQL injections or other types of attacks.

#### 7. Performance

- **Page and Query Caching**
- Use caching systems to improve module performance.

- **Image Optimization**
- Compress images during upload to minimize their size and speed up page load time.

#### 8. Accessibility

- **Screen Reader Compatibility**
- Ensure pages are accessible to users with visual impairments.

- **Use of ARIA Tags**
- Improve the accessibility of interactive elements with ARIA tags.

#### 9. Customization and Flexibility

- **Back-Office Customization Options**
- Allow the admin to customize certain aspects of the module via the back-office, such as notification messages or filtering options.

- **Multilingual Support**
- Ensure the module is easily translatable to support multiple languages if necessary.

#### 10. Reports and Statistics

- **Back-Office Dashboard**
- Add a dashboard to display statistics on uploaded photos, reviews, comments, etc.

- **Detailed Reports**
- Allow generating reports on applicator activity, received reviews, etc.

#### 11. Integration with the Warehouse Theme

- **Warehouse Theme Compatibility**
- Ensure all module pages and features seamlessly integrate with the Warehouse theme on the site thermopoudre.fr.
- Use Warehouse theme styles and components to maintain visual consistency and a smooth user experience.

---

### Technical and Front-End Options

1. **Image Preview Before Upload**
- Use JavaScript to display a real-time preview of uploaded images.

2. **Automatic Image Compression and Resizing**
- Use a library like `ImageMagick` or `GD` to compress and resize images during upload.

3. **Real-Time Notifications**
- Use push notifications (via WebSockets or Pusher) to inform applicators of the validation of their photos and reviews in real-time.

4. **Client-Side and Server-Side Validation**
- Add client-side (JavaScript) validations for a smooth user experience and server-side (PHP) validations for security.

5. **Use of Modern Frameworks**
- Use CSS frameworks like Bootstrap or Tailwind to ensure a responsive and modern design.
- Use JavaScript libraries like jQuery or Vue.js to enhance interactivity and reactivity.

6. **Cross-Browser Compatibility**
- Ensure the module works perfectly on all modern browsers (Chrome, Firefox, Safari, Edge).

7. **Enhanced UI/UX for the Upload Form**
- Use modern components (like drag-and-drop zones) for the upload form.
- Display real-time validation messages (e.g., "Title is required", "File must be an image").

8. **Photo Gallery Display**
- Use a responsive and interactive image gallery (e.g., Lightbox, Masonry, or a carousel).
- Add zoom and fullscreen viewing functionalities.

9. **Photo Filtering and Sorting**
- Add filtering and sorting options for customer photos (by color, date, popularity, etc.).

10. **Customizable Design**
- Add options in the back-office to allow admins to customize the gallery appearance (color choices, element layout, etc.).

11. **Threaded Comments and Replies**
- Display comments and replies in a threaded format for better readability and organization.

12. **Star Ratings and Reviews**
- Use interactive star rating components for reviews.
- Display detailed reviews with sorting options (most recent, highest rated, etc.).

13. **Interactive Map of Applicators**
- Use interactive maps (Google Maps, Leaflet) to display applicators.
- Add custom markers with detailed pop-ups.

14. **Dashboard and Reports**
- Create a dashboard in the back-office to display statistics on photos, reviews, and comments.
- Allow generating detailed reports for better analysis.

---

### Idea of Module File Structure

- **Main File**
- `customergallery.php`: Contains the main module class.

- **SQL Files**
- `sql/install.php`: Instructions to create tables during installation.
- `sql/uninstall.php`: Instructions to drop tables during uninstallation.

- **Front-End Controllers**
- `controllers/front/UploadPhotoController.php`: Manages photo uploads.
- `controllers/front/CommentController.php`: Manages photo comments.

- **Admin Controllers**
- `controllers/admin/AdminCustomerGalleryController.php`: Manages photo and review validation.

- **Templates**
- `views/templates/front/upload_form.tpl`: Photo upload form.
- `views/templates/front/comment_form.tpl`: Comment form.
- `views/templates/front/applicator_profile.tpl`: Applicator profile form.

- **CSS and JS**
- `views/css/customergallery.css`: CSS file for the module.
- `views/js/customergallery.js`: JavaScript file for the module.

- **Emails**
- `mails/fr/photo_validated.html`: Email template for photo validation.

- **Classes**
- `classes/CustomerPhoto.php`: Class for customer photos.
- `classes/PhotoComment.php`: Class for photo comments.

- **Configuration File**
- `config.xml`: Module configuration.

---

### Development and Testing

1. **Develop each feature following PrestaShop best practices.**
2. **Test each feature on a PrestaShop 1.7.8.6 installation.**
3. **Conduct security tests to ensure the module is secure.**
4. **Optimize module performance.**
5. **Ensure mobile compatibility and accessibility.**
6. **Ensure all module features and pages seamlessly integrate into the Warehouse theme on thermopoudre.fr.**
Related categories: Website Design eCommerce Prestashop HTML