Hi @touseefk2181136 ,
The dynamic page creation is very much possible but keep in mind the dispatcher configs if you want the dynamic pages to be cached.
I will list down two approaches which you can use to fulfill the requirement. You can either use vanilla Js or you can use Sling Resource resolution approach.
1. Vanilla Js
- Create a store component in AEM that represents each store on the page. This component should include fields for the store name, description, and a button or link to view more details.
<!-- Store Component (/apps/myproject/components/store/store.html) -->
<div class="store">
<h2 class="store-name">${properties.storeName}</h2>
<p class="store-description">${properties.storeDescription}</p>
<a href="#" class="view-details">View Details</a>
</div>
- Attach a client-side JavaScript event handler to the "View Details" link in the store component. This event handler will trigger the dynamic page creation and redirection process
// Store Component JavaScript (/apps/myproject/components/store/clientlibs/store.js)
$(document).ready(function() {
$('.view-details').on('click', function(e) {
e.preventDefault(); // Prevent default link behavior
var storeName = $(this).closest('.store').find('.store-name').text();
// Check if the page already exists for the selected store
$.ajax({
url: '/content/myproject/stores/' + encodeURIComponent(storeName) + '.html',
type: 'HEAD',
success: function() {
// Page already exists, redirect to it
window.location.href = '/content/myproject/stores/' + encodeURIComponent(storeName) + '.html';
},
error: function() {
// Page doesn't exist, create it dynamically
createStorePage(storeName);
}
});
});
});
// Function to create store page dynamically
function createStorePage(storeName) {
// Sample Java code for dynamic page creation
Resource parentPage = resourceResolver.getResource("/content/myproject/stores");
PageManager pageManager = resourceResolver.adaptTo(PageManager.class);
// Create a new page for the store
Page storePage = pageManager.create(parentPage, storeName, "/apps/myproject/templates/store-detail.html", storeName);
// Redirect to the newly created store detail page
window.location.href = '/content/myproject/stores/' + encodeURIComponent(storeName) + '.html';
}
- Create a template in AEM for the store detail pages. This template will define the structure and layout of the store detail pages.
<!-- Store Detail Template (/apps/myproject/templates/store-detail.html) -->
<sly data-sly-use.page="com.adobe.cq.wcm.core.components.models.Page">
<h1>${page.properties.storeName}</h1>
<p>${page.properties.storeDescription}</p>
<!-- Additional components or placeholders for displaying store information -->
</sly>
- When a user clicks on a store in the store component, dynamically create a new page for the selected store using AEM's page creation API or workflow capabilities. This can be done server-side in response to the click event.
// Sample Java code for dynamic page creation
Resource parentPage = resourceResolver.getResource("/content/myproject/stores");
PageManager pageManager = resourceResolver.adaptTo(PageManager.class);
// Create a new page for the store
Page storePage = pageManager.create(parentPage, storeName, "/apps/myproject/templates/store-detail.html", storeName);
- After dynamically creating the store detail page, redirect the user to the newly created page using AEM's redirection capabilities or client-side JavaScript
- On the store detail page (/content/myproject/stores/store-name.html), fetch and display store-specific information using AEM's component logic or server-side scripts.
<!-- Store Detail Page (/content/myproject/stores/store-name.html) -->
<sly data-sly-use.page="com.adobe.cq.wcm.core.components.models.Page">
<h1>${page.properties.storeName}</h1>
<p>${page.properties.storeDescription}</p>
<!-- Additional components or placeholders for displaying store information -->
</sly>
2. Sling Resource Resolution
- In AEM, navigate to the Vanity URL configuration (e.g., /etc/map) and create a new mapping for the store detail page template or component.
- Define a Vanity URL pattern that will be used to access store detail pages. For example, /stores/{storeName}.
- Implement a request filter or servlet in AEM to intercept requests to the Vanity URL pattern for store detail pages.
- Extract the store name or identifier from the request URL parameters or path (e.g., using SlingHttpServletRequest). Check if a store detail page already exists for the extracted store name.
- If a store detail page doesn't exist for the extracted store name, use AEM's page creation API or workflow capabilities to dynamically create the page.
- Set up the created page to use the store detail page template or component.
- After dynamically creating the store detail page, redirect the user to the Vanity URL for the newly created page.
- This ensures that subsequent requests to the Vanity URL are directed to the dynamically created store detail page.
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.resource.ResourceResolver;
import org.apache.sling.api.servlets.HttpConstants;
import org.apache.sling.api.servlets.ServletResolverConstants;
import org.apache.sling.api.servlets.Servlet;
import org.osgi.service.component.annotations.Component;
import org.osgi.framework.Constants;
import org.osgi.service.component.annotations.Reference;
import org.apache.sling.servlets.annotations.ServletResourceTypes;
import org.apache.sling.servlets.annotations.SlingServletResourceTypes;
@Component(service = Servlet.class,
property = {
Constants.SERVICE_DESCRIPTION + "=Dynamic Store Page Creation Servlet",
ServletResolverConstants.SLING_SERVLET_PATHS + "=/bin/createStorePage"
})
@SlingServletResourceTypes(resourceTypes = "sling/servlet/default", methods = HttpConstants.METHOD_GET)
public class CreateStorePageServlet extends SlingAllMethodsServlet {
@Reference
private ResourceResolver resourceResolver;
@Override
protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) {
String storeName = request.getParameter("storeName");
if (storeName != null) {
// Check if page already exists for the store name
if (!pageExistsForStore(storeName)) {
// Page doesn't exist, dynamically create it
createPageForStore(storeName);
}
}
}
private boolean pageExistsForStore(String storeName) {
// Logic to check if page exists for the given store name
// Implement your own logic to check if a page exists
}
private void createPageForStore(String storeName) {
// Logic to dynamically create the store detail page
// Use AEM's page creation API or workflow capabilities
Resource parentPage = resourceResolver.getResource("/content/myproject/stores");
PageManager pageManager = resourceResolver.adaptTo(PageManager.class);
Page storePage = pageManager.create(parentPage, storeName, "/apps/myproject/templates/store-detail.html", storeName);
}
}
I hope it helps
Thanks,
Madhur
