adobe / aem-core-email-components Goto Github PK
View Code? Open in Web Editor NEWLicense: Apache License 2.0
License: Apache License 2.0
The segmentation component does not load with styles in editor.html. It is probably because the component does not load with its corresponding clientlib
core.wcm.components.tabs.v1
The conditions added by the Segmentation Item component look correct in the UI but when running the actual delivery, Adobe Campaign Classic throws a compilation error.
The condition entered on Segmentation Item component
targetData.firstName == "Priyank"
But when ACC receives the HTML, the condition looks like this (see below), which causes compilation error on the Campaign side.
if (targetData.firstName == "Priyank")
When I compare the conditions in the existing campaigns, the condition looks like -
if (targetData.firstName == "Priyank")
A maven project similar to the wcm-core-components needs to be created for our AEM artifacts.
Let's start with the following settings (for development):
<parent>
<groupId>com.adobe.cq</groupId>
<artifactId>core.wcm.components.parent</artifactId>
<version>2.17.15-SNAPSHOT</version>
<relativePath>parent/pom.xml</relativePath>
</parent>
<artifactId>core.email.components.reactor</artifactId>
<packaging>pom</packaging>
<version>2.17.15-SNAPSHOT</version>
<name>Adobe Experience Manager Core Email Components Reactor</name>
Estimation: S (6 days)
The current version Email Page component has a metadata property that allows us to specify "Allowed Templates". I know that the WCM Page component also has a field that allows you to specify the /conf folder to associate the allowed Editable templates.
Is there a plan to add that option to the Email Page component? or should we continue to use "Allowed Templates" fields to associates editable templates.
Allows embedding a Content Fragment in structured or text format.
Requirements:
Estimation: M (10 Days)
Acceptance criteria:
Example for ACC markup:
<% if ( recipient.age > 35 ) { %>Insert content here<% } %>
Make sure the functionalities and features from the old page component will also work with the new page component:
Show status on top of the page (see /libs/mcm/campaign/components/status/status.jsp).
Check /libs/mcm/campaign/components/campaign_newsletterpage (especially head.html and body.html) for code regarding segments and the context hub.
Add status bar on top of the page.
Remove html tags that are not needed for mails.
Same as the core text component.
Estimation: S (6 Days)
It looks like the container component does not load the corresponding clientlib when we add the component in the Editable template/page.
I was able to get around it by manually adding the clientlib in the Page Policy for Editable template, but I feel it would be best if the clientlib gets loaded automatically when the page loads without needing template author to add it manually.
RTE with capability to use the Campaign personalization fields
Within the RTE, authors can pick Campaign variables, which will include a corresponding placeholder at the location of the cursor. This should be made available for the RTE of components, like the text component, but also for the RTE available for editing Content Fragments. Campaign will then replace these placeholders with the value of that variable when sending out the emails.
Check existing implementation of the RTE Plugin and match to our requirements
Check if changes in ACC are reflecting in AEM
Check how to best integrate it into RTE and especially CF RTE, so we can use the existing RTE Plugin with the email core components
I have a CSS file that looks something like this
p{
color: red;
}
.cmp-text--regular p{
font-size: 20px;
color: darkgrey;
}
The expected behavior for the CSS inliner would be to create style attribute
<div class="cmp-text--regular">
<p style="font-size:20px; color: darkgrey;">This should be dark grey</p>
</div>
<div class="cmp-text--regular">
<p style="font-size:20px; color: red;">This should be dark grey</p>
</div>
Notice that the font color is red instead of darkgrey.
The following properties need to be added to
/libs/settings/translation/rules/translation_rules.xml
subject
preheader
plaintext
CaConfig removal, and options addition to page properties
Each email page is a page with the resource type of page provided within this repository of components. Customers could however create extensions of this page component which would potentially have a different resource type.
Based on the Core Page component v3
Provide the following edit dialog options:
jcr:title
)jcr:description
, text area)Provides the following "Email Header" component that is included by the page template as a mandatory but editable component:
jcr:title
defined on the pagejcr:description
defined on the pageProvides the following page policy (aka design dialog) options:
Requirements:
<span style="display: none; …">${page.preheader}</span>
Estimation: M (10 days)
Removing the arrow icons from the component menu as well as Layout mode to remove redundancies since you have since incorporated this as part of the Container component dialog for column layout.
The current content structure under /content/campaign contains a lot of items which don't add value to our implementation, as they are legacy components. So we should clean up this structure:
Provides a simplified responsive grid behavior that is made out of 6 columns.
Provides the following edit dialog options:
Provides the following page policy (aka design dialog) options:
Requirements:
The grid would not allow being nested and would have the following breakpoints:
This typically is achieved with the following markup for an example one-third two-third ratio:
<!-- In the page head: -->
<style>
@media screen and (max-width: 640px) {
.layout {
width: 100% !important;
}
}
@media screen and (max-width: 480px) {
.layout-column {
display: block !important;
width: 100% !important;
}
}
</style>
<!-- In the page body: -->
<center>
<table class="layout" width="640" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td width="33.33%" class="layout-column">
One Third
</td>
<td width="66.67%" class="layout-column">
Two Third
</td>
</tr>
</table>
</center>
Estimation: S (6 Days)
Same as the core title component.
Edit dialog options:
Estimation: S (6 Days)
Simple image element.
Provides the following edit dialog options:
role="presentation"
to the img
element)<a href>
)style="width: 100%;"
)Provides the same page policy (aka design dialog) options as the core image component, minus the smart and lazy loading options with responsive resizing.
Requirements:
Open questions:
Estimation: L (15 days)
Always call the style inliner servlet when the page is displayed in "wcmmode=disabled", so that the page is transferred to ACC without external styles and JS.
We need a way to reliably externalize all URLs which are renderd in a resulting email page. The functionality provided by AEM will not work for us due to various reasons:
Therefore the following should be implemented:
We are seeing multiple javascript errors in the console when we open a page in editor.html
Here are the various messages.
Uncaught ReferenceError: jQuery is not defined
at coralui3.a57ddee782c0237838911717d38b6c48.js:143:102
at coralui3.a57ddee782c0237838911717d38b6c48.js:143:111
core.c6bcb965f66f03e351688258c27f4a73.js:174 Uncaught ReferenceError: Granite is not defined
at core.c6bcb965f66f03e351688258c27f4a73.js:174:14
Uncaught TypeError: document.registerElement is not a function
at l (components.ef4335747a9bb3c7855fb5dfb98405fc.js:1:59063)
at Object.<anonymous> (components.ef4335747a9bb3c7855fb5dfb98405fc.js:8:12303)
at t (components.ef4335747a9bb3c7855fb5dfb98405fc.js:1:101)
at Object.<anonymous> (components.ef4335747a9bb3c7855fb5dfb98405fc.js:8:8277)
at t (components.ef4335747a9bb3c7855fb5dfb98405fc.js:1:101)
at Object.<anonymous> (components.ef4335747a9bb3c7855fb5dfb98405fc.js:1:115636)
at t (components.ef4335747a9bb3c7855fb5dfb98405fc.js:1:101)
at Object.<anonymous> (components.ef4335747a9bb3c7855fb5dfb98405fc.js:1:115528)
at t (components.ef4335747a9bb3c7855fb5dfb98405fc.js:1:101)
at components.ef4335747a9bb3c7855fb5dfb98405fc.js:1:451
foundation.dbab132ac3fac1cd5ba16a6f69e26fa9.js:40 Uncaught TypeError: $ is not a function
at foundation.dbab132ac3fac1cd5ba16a6f69e26fa9.js:40:5
at foundation.dbab132ac3fac1cd5ba16a6f69e26fa9.js:114:3
clientlibs.6bfe24e774d5f8b27d81ade05ca8766d.js:345 Uncaught ReferenceError: CQ is not defined
at clientlibs.6bfe24e774d5f8b27d81ade05ca8766d.js:345:4
shared.d39a59051372bc8334750c33de87aac3.js:408 Uncaught TypeError: Cannot read properties of undefined (reading 'removeParameters')
at new <anonymous> (shared.d39a59051372bc8334750c33de87aac3.js:408:40)
at shared.d39a59051372bc8334750c33de87aac3.js:59:18
A combination of title, text, image and call-to-action.
Requirements:
Estimation: M (10 Days)
Since the Email Page component is proxied from the Web Page component, it uses the "Layout Container" component from Web Core components as the "Root" container.
Are we planning to update this so that instead of using Web component, the Email Page will use the email container component as the "Root" container?
Pushes the content rendered by the email page component to ACC
The email pages allow to "Approve for Adobe Campaign" the content (could be a workflow), which will then make the page available in Campaign. Further action must then be taken in Campaign to actually send that content out to recipients.
Check existing workflow, if it needs to be extended
Check the existing workflow
Check source code of existing workflow
Extend, if neccessary
Make sure the page with all images is published with this workflow
Set up the Selenium basics so we can use it for testing all components
Estimation: S (6 Days)
Estimation: S (6 days)
Open questions:
Takes the HTML output of the page and inlines all CSS in as HTML attributes:
style
attribute.
font-family: 'Timmana', "Gill Sans", sans-serif;
-ms-interpolation-mode: bicubic;
display: inline-block; display: block;
Margin: 0px;
style
element in the HTML as-is in order to:
.ExternalClass
class name.a:hover
or p::before
.<!--[if mso]><style>.hide-mso { display: none; }</style><![endif]-->
Estimation: M (10 days)
In AEM, authors can create a free-formed hierarchic structure of folders and email pages under /content/campaign to prepare the content of the various emails.
The nested structure could be composed only of email page components, meaning that the email component would also be used to create nodes that only intend to serve as a folder. That way, if there are inherited properties, they can be set on the parent email component that serves as folder.
Steps to reproduce:
Expected Behavior:
The unlocked container component shows the Image and Text component with a button to allow us to set up a policy for these components individually.
Actual Behavior:
The unlocked container component just shows a responsive grid component. Therefore we are unable to setup policies for the individual child components.
In general, the HTML markup for the components is not email-friendly (as of release 0.4.0). Since they are derived from Web Core components, there is a heavy usage of
Setup two AEM 6.5 instances - one for author, one for publish.
Add all nested media query rules inside other selectors to the style tag.
A call-to-action link.
Edit dialog options:
Estimation: S (6 Days)
Make use of the classes to inline css style:
Rewrite the output to move every CSS ruleset to the targeted elements as an HTML style attribute.
Properly handle quotes, like: font-family: 'Timmana', "Gill Sans", sans-serif;
Accept also browser-specific rules, like: -ms-interpolation-mode: bicubic;
Preserve duplicate properties, like: display: inline-block; display: block;
Preserve capitalization as-is, like: Margin: 0px;
Keep the original style element in the HTML as-is in order to:
Preserve media queries, web fonts, and animations by not removing from the style element any “@” declaration.
Preserve unmatched CSS rules, like the Outlook .ExternalClass class name.
Preserve CSS pseudo-selectors, like a:hover or p::before.
Leave client-specific comments untouched, like:
Adjust code to make it use both external CSS files and style elements
Create a style element with all not matching definitions and write it to the html
If there are competitive definitions, make sure to only use the definition with a higher priority (specificity).
How we can manage overlapping selectors (e.g. border and border-bottom)? TEST AND RE-ASSEST.
Check the PoC
Fetch rendered HTML and CSS
Extend CSS Styles Inliner to meet all requirements
Make sure that all not matching CSS selectors are inserted in the <style> block in the HTML head at the end of processing
Write unit tests
Add context-aware configuration to select the CSS style merging mode to be used
Write technical documentation -> https://github.com/adobe/aem-core-email-components/wiki/Integrate-CSS-Styles-Inliner-code-from-EL-project:-Technical-documentation
Estimation: XS (3 days)
Allows embedding an Experience Fragment in the email.
Requirements:
Estimation: M (10 Days)
Currently, there is no way for us to provide a default option when using the Segmentation component.
In the Targeting Mode, there is an option to specify the default rendition of a component.
The AEM - Campaign integration must allow the following authoring flow:
Not able to edit Text (or any component) to container component.
Steps to reproduce.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.