Can someone guide me how to implement this below one? | Community
Skip to main content
J
Jyo234678
Level 2
December 2, 2024
Solved

Can someone guide me how to implement this below one?

  • December 2, 2024
  • 1 reply
  • 571 views
  • Configuration for share widget is managed centrally by locale (one config per locale)
  • Authors can configure up to 6 share options from a predefined list: Email, Facebook, Twitter, LinkedIn, Copy Link, PDF.
  • For each share option, authors can configure:
    • Icon
    • Title/Link Text
    • Share URL (for social media options)
  • Author can configure the modal title for tablet an mobile views (defaults to: Share this story) 
    • Tablet and Mobile
      • Clicking the share icon opens a modal popup with a 60% opacity black background overlay.
        • The modal displays:
          • Configurable title using tags
          • Customer Story Thumbnail (populated from page properties)
          • Customer Story Card Title (populated from page properties)
          • Configured share options with icons and labels
          • Exit/close icon

    Share Actions

    • Email: Opens the user's default email client with a pre-populated email containing:
      • Subject: Title of the customer story page
      • Body: The page URL
    • Social Media (Facebook, Twitter, LinkedIn): Opens the respective social media platform in a new tab, pre-populated with:
      • Thumbnail (from page properties)
      • Link to the customer story page
    • Copy Link: Copies the page URL to the user's clipboard and displays a "Copied" tooltip for 3 seconds or until the user moves the mouse away.
        • Enable a tooltip that limits sharing options and provides best practices
        • No custom sharing options will be supported
        • The popup should also display a functional exit icon
    • PDF: Opens a new tab displaying a preview of the PDF version of the customer story with options to download or print.

TIA

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Tethich

I am not aware of any implementation done by someone else, that you can just pick and expect to magically work for you. Even if sharing feature is one of the most common one, your use case has its particularites and makes it unique for your context.

 

But the AEM part of it should be rather simple. It only involves creating simple dialogs and adding simple fields. It is the most basic thing in AEM. Maybe the other non-AEM related part, the UI model rendering may be just a little tricky, but that depends on whatever frontend solution you have in your project (React or Angular or Vue or Alpine or something else).

 

Maybe you can get some inspiration ir even super type the Social Media Sharing core component, but I would say it is a long shot:

https://experienceleague.adobe.com/en/docs/experience-manager-learn/sites/developing/social-media-sharing-technical-video-use

1 reply

Tethich
Community Advisor
TethichCommunity Advisor
Community Advisor
December 2, 2024

Hi @jyo234678 

For central configuration:

 

  1. Assuming when you said "per locale" that you have multi-language site, with different pages per language. Because of this and also because you want to manage the stuff from a central place, I am thinking to keep the configurations for share widget in a language page properties and make them be inheritable for all child pages.
  2. Share options can be achieved using multifield. Each item having:
    - a selection field with those options Email, Facebook, Twitter, LinkedIn, Copy Link, PDF.
    - an image field for the icon
    - field for title/link text
    - link for URL
    Up to 6 share option can be achieved using a custom validation for controlling max number of multifiled can be done using custom clientlib. This is how it can be done: https://aemhints.com/2020/10/24/limit-multifield-aem65/
  3. A separate field for modal title. Maybe you want two fields, one for tablet title and other for mobile title.
  4. Maybe you want also a number field to set the modal opacity.


For the modal:

 

  1. I assume you can have an AEM component for it, powered by a Sling model. The Sling model will read current story component on which user clicked, so that you can know which story thumbnail, card title, tags to fetch. The modal model will also fetch the properties from the local page properties. All the fetched data you then be exposed to the modal's component HTL so that your UI technology can render the content and execute the desired behavior. I think at this point you will have all info available in modal to have it do what you need.
  2. So the modal will rely on some of the data to display the data, and the rest of the data to implement the functionality (open social media platform in new tab when needed, copy URL in clipboard, display a PDF, open mail client and so on). I assume you will have some kind of JS based solution for the UI, where all this functionality might be implemented.

 

I hope this solution is something you were looking for.

    J
    Jyo234678Author
    Level 2
    December 3, 2024

    Can I find some similar implementation for this  if you can share? 

    Tethich
    Community Advisor
    TethichCommunity AdvisorAccepted solution
    Community Advisor
    December 3, 2024

    I am not aware of any implementation done by someone else, that you can just pick and expect to magically work for you. Even if sharing feature is one of the most common one, your use case has its particularites and makes it unique for your context.

     

    But the AEM part of it should be rather simple. It only involves creating simple dialogs and adding simple fields. It is the most basic thing in AEM. Maybe the other non-AEM related part, the UI model rendering may be just a little tricky, but that depends on whatever frontend solution you have in your project (React or Angular or Vue or Alpine or something else).

     

    Maybe you can get some inspiration ir even super type the Social Media Sharing core component, but I would say it is a long shot:

    https://experienceleague.adobe.com/en/docs/experience-manager-learn/sites/developing/social-media-sharing-technical-video-use

      Terms & ConditionsAccessibility statement

      Loading footer...