Pop Up window in AEM

Hi @leviha2 

You can refer to the below popup implementation which is done in AEM 

https://medium.com/activate-aem/how-to-create-a-responsive-popup-modal-in-aem-440eb8df522b

Also since you an ecommerce use case you can also take a look at custom popups from quick view 

https://github.com/AdobeDocs/experience-manager-65.en/blob/main/help/assets/custom-pop-ups.md

https://experienceleague.adobe.com/en/docs/experience-manager-65/content/assets/dynamic/custom-pop-ups

Hi @leviha2 ,

Yes, it's possible to create a pop-up window in AEM for scenarios like the one you described. Here's a general outline of how you can implement this:

1. Create the Pop-Up Component:

   • First, create a new AEM component that represents the pop-up window. This component will typically consist of HTML, CSS, and JavaScript.
   • Design the HTML structure for your pop-up window. This could include the list of countries flags to choose from, as well as any other content or functionality you want to include.
   • Style the pop-up window using CSS to achieve the desired appearance and layout.

2. Trigger the Pop-Up from the Buy Button:

   • Add JavaScript functionality to your AEM page to trigger the pop-up window when the user clicks the buy button.
   • This can be achieved using JavaScript event listeners or frameworks like jQuery.
   • When the buy button is clicked, use JavaScript to show the pop-up window by toggling its visibility or adding a CSS class that makes it visible.

3. Handle User Interaction:

   • Implement the necessary functionality in your pop-up component to handle user interaction, such as selecting a country flag.
   • You can use JavaScript to capture user input and perform any necessary actions, such as updating the selected country or closing the pop-up window.

4. Integrate with Back-End Services (Optional):

   • If your pop-up window needs to interact with back-end services, such as fetching data about available countries, you'll need to integrate your AEM component with those services.
   • This can be done using AJAX requests or other methods to communicate with your server-side code or external APIs.

5. Test and Refine:

   • Test your pop-up window thoroughly to ensure it functions as expected in different browsers and devices.
   • Iterate on the design and functionality as needed based on user feedback and testing results.

By following these steps, you can create a pop-up window in AEM that appears when the user clicks the buy button and allows them to choose from a list of countries flags or perform other actions as needed.

Thanks!