Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Migration approach for custom storefronts

Avatar

Level 2

This might be too much to bite off; however, I'm evaluating the feasibility of quick migration from DPS classic to AEM Mobile with the initial goal being a simple lift-and-shift to the new platform.  This would provide quick migration now, while enabling expansion of AEM Mobile features in the future.

Creating an app and migrating content is quick - I end up with virtually the same layout as DPS classic storefront, being a collection of folio covers.  This is perfect.

shape-library.png

But where I could use some guidance is translation of custom storefronts.  We have many apps which feature custom storefronts, where we have leveraged entitlement banner carousels, promotional content based on entitlement, subscriptions, and cross-sells within our store by using the Library and Store SDK.

msl-library.png

It seems that AEM Mobile has two approaches for extensibility:

  • Custom content created as HTML articles in cards
  • Extending the AEM Mobile app using Cordova

As a mobile application developer, it's easier for me to wrap my head around extending the AEM Mobile platform through Cordova; however, it appears tutorials are geared towards customizing content.

Would you have any insight to offer?

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

Jason - instead of using the Cards and Layouts engine for the first page, you could create an HTML "Article" and then add that as the first item in the Top Level Collection. This means that you could design the article with a carousel etc. to more closely mimic your storefront.

Also note that in the latest release we added some additional optimizations for HTML as the top level collection item

What's new in Experience Manager Mobile

Any article that’s added to the top-level collection can no longer be removed from cache when the cache limit is reached. That way, users will always be able to view any article in the top-level collection even if they're offline. At this time, only iOS viewers support this feature, but it should be available soon in Android and Windows apps.

View solution in original post

4 Replies

Avatar

Correct answer by
Employee Advisor

Jason - instead of using the Cards and Layouts engine for the first page, you could create an HTML "Article" and then add that as the first item in the Top Level Collection. This means that you could design the article with a carousel etc. to more closely mimic your storefront.

Also note that in the latest release we added some additional optimizations for HTML as the top level collection item

What's new in Experience Manager Mobile

Any article that’s added to the top-level collection can no longer be removed from cache when the cache limit is reached. That way, users will always be able to view any article in the top-level collection even if they're offline. At this time, only iOS viewers support this feature, but it should be available soon in Android and Windows apps.

Avatar

Level 2

Thanks, Ivan - this sounds like exactly what I was looking for.

So, using the Content Map, I would make the Top Level Collection an HTML Article that contains my custom code for carousels?

Screen Shot 2016-05-23 at 4.47.39 PM.png

Not entirely sure I understand how a user would navigate to sub-collections.  Using this approach, a user would have a promotional screen; then, have to switch to a different top-level collection to view articles, right?

Thanks for this insight, this approach is very feasible.

Avatar

Employee

You would need to make the "home" article the first item in your top-level collection. In this example, I just added a new article above my previous home collection. That makes the article the home article.

home_article.png

In that home article, you could add links to sub-collections next to your promotional content. Use this format for the sub-collection links: navto://collection/<collectionName> (see Hyperlinks in AEM Mobile for other linking options).

Avatar

Employee Advisor

Partially correct. THe HTML article would be the first item in the top level collection. You could then use Cordova APIs to derive 'navto' navigation links to other articles and collections.

Sent from my iPhone