Model Pop-ups for Tours, Destinations, and Accommodation Templates

[ashleyshaw]

Model Pop-ups for Tours, Destinations, and Accommodation Templates

Overview

We need to implement model pop-ups for displaying additional information on the Tours, Destinations, and Accommodation templates. Pop-ups can enhance the user experience by providing quick access to detailed information without navigating away from the current page. The existing Human Made Popup repository could be used to integrate pop-up functionality into the Tour Operator Plugin.

---

Task

1. Review the Human Made Popup Repository

   • Repository Review: Analyze the Human Made Popup repository to understand how it works, its dependencies, and whether it fits the plugin’s requirements.
   • Determine Compatibility: Verify if the popup functionality is compatible with the existing plugin structure and the Tour Operator Plugin's design system.

2. Integrate Pop-ups into the Plugin

   • Add Pop-up Functionality: Integrate the Human Made Popup library within the plugin to enable pop-ups for the Tours, Destinations, and Accommodation templates.
   • Dynamic Content for Pop-ups: Ensure that pop-ups can display dynamic content related to the template. This could include:
     • Tour Pop-ups: Display detailed itinerary or pricing information.
     • Destination Pop-ups: Provide additional descriptions or map views.
     • Accommodation Pop-ups: Show gallery images, room details, or facilities.
   • Mobile Responsiveness: Ensure the pop-ups are fully responsive and function well on mobile and tablet devices.

3. Pop-up

   • Trigger Mechanisms: Convert the humanmade button block, and include a selector for the template part to display. This should work with the class-modals.php to output whats needed.
   • Close Behavior: Implement user-friendly close behavior, such as clicking outside the pop-up or pressing an "X" button.

4. Customize Design

   • Match Design System: Ensure that the pop-up design aligns with the Tour Operator Plugin’s design system, including typography, colors, and button styles.
   • Customizable Layouts: Allow some level of customization (e.g., layout options) for users in the admin settings, such as the ability to choose different pop-up layouts based on their needs.

5. Pop up selector

   • Template Part Area: Register a template part area to house the Modals.
   • Default Template Part: We need to ship a default template part for each pop up we have in the plugin. So the user has something to copy from.

---

Sub-Tasks

• Popup Implementation for Tours:
  Add pop-up functionality to the Tours template to display additional information (e.g., detailed itinerary, pricing, or FAQs).

• Popup Implementation for Destinations:
  Integrate pop-ups into the Destinations template to display additional content, such as descriptions or embedded map views.

• Popup Implementation for Accommodation:
  Add pop-ups to the Accommodation template to show gallery images, room details, and amenities.

• Testing and Debugging:
  Thoroughly test the pop-up functionality across all templates to ensure it works seamlessly on desktop and mobile devices.

---

Additional Considerations

• Performance Impact:
  Ensure the pop-up integration does not negatively impact the plugin's performance, especially when handling large amounts of content in the pop-ups.

• Accessibility:
  Make sure pop-ups are accessible by using proper ARIA attributes and ensuring keyboard navigation and screen reader support.

---

Completion Criteria

• Pop-up functionality is successfully integrated into the Tours, Destinations, and Accommodation templates.
• The pop-ups display dynamic content specific to each template and are fully responsive.
• Design and styling match the Tour Operator Plugin’s existing design system, and the pop-ups are customizable via admin settings.
• Pop-ups are thoroughly tested for performance, accessibility, and responsiveness.

---

References

• Human Made Popup Repository