Pop Up window in AEM

[LeviHa2]

I would like to know if its possible to have a Pop window in AEM. For instance you have a page that that a buy button, once a user clicks the buy button, the pop-up window should be opened to see a list of countries flag to choose from.

Is this Possible? if yes how do i go about it.

TIA.

[Kamal_Kishor · Accepted solution]

@LeviHa2 : If I understand it correctly, this would have to be a custom front-end change using JavaScript, html and CSS. Your js and css changes would be created in clientlibs and should be loaded on the page where you intend to have the link and pop-up.
Something like this - https://www.geeksforgeeks.org/how-to-create-popup-box-using-html-and-css/

thanks.

[LeviHa2]

Thanks alot Kamal, exactly what i was looking for. 

[sherinregi]

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-u...

[HrishikeshKa]

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!