Sending Personalised RSS to EMAIL campaigns using Mailchimp - merge

I've got a custom RSS feed set up for each user so that the user's email_address can be used as a parameter. e.g., www.website.com/feed/personal?user_email=test#email.com
If I code this URL in my MailChimp campaign using the |FEEDBLOCK:URL| MERGE tag, I'm able to retrieve posts and create an RSS newsletter for the recipient.
However, when I try to make the URL dynamic by combining it with the |EMAIL| merge tag MailChimp is unable to retrieve the posts.
|FEEDBLOCK:www.website.com/feed/personal?user_email=|EMAIL||
Instead, when I get the test email I just see the FEEDBLOCK tag in the email body (along with the EMAIL tag) as shown below.
|FEEDBLOCK:www.website.com/feed/personal?user_email=user#email.com|
I've read on another StackOverflow chain that Mandrill (and I assume MailChimp as well) cannot process nested tags. So I'm wondering whether there is another way for me to harvest the value of the |EMAIL| tag and assign it to a variable before the |FEEDBLOCK:URL| tag gets processed so that I can reference the variable rather than the EMAIL merge tag in the FEEDBLOCK:URL tag instead?
e.g.,
<%>emailAddress = *|EMAIL|*</%>
*|FEEDBLOCK:http://www.website.com/feed/personal?user_email=<%emailAddress%>|*
In short, I'm trying to figure out how to assign a Mailchimp merge tag value into a variable and then use that variable as part of another merge tag, in lieu of nesting merge tags, which apparently cannot be done.
(p.s., In case its confusing, I just want to clarify that for some reason asterisks are not showing up in the above text but I do have all the merge tags enclosed within asterisks)

I've been trying to do this exact same thing. You can do this in ExactTarget quite simply as detailed here.
Basically, once you have your custom RSS feed URL done, you create something called a content syndication link. For you, it would look like this:
%%httpget "www.website.com/feed/personal?user_email=[Email Address]"%%
Please note the square brackets around the term "Email Address". The brackets tell the system to replace the brackets and the content inside with whatever that term happens to reference (in this case their email address). You could swap it out for their first name, last name, wp user id...whatever you happen to have stored within your subscriber(s)' data.
Inside the content of your email, you will need to reference this link in order to dynamically generate your content, which will be unique for each user. Here's that:
%%[Var #xml, #titles, #title, #descs, #desc, #links, #link, #cnt
Set #xml = ContentAreaByName("my contents\RSSParse\RSSParse") /* This line specifies the content area from which the RSS content will be pulled for the email message. */
Set #titles = BuildRowsetFromXML(#xml,"//item/title",1)
Set #descs = BuildRowsetFromXML(#xml,"//item/description",1)
Set #links = BuildRowsetFromXML(#xml,"//item/link",1)
If RowCount(#titles) > 5 THEN
SET #rows = 5
ELSE
SET #rows = RowCount(#titles)
ENDIF
IF #rows >= 1 THEN
for #cnt = 1 to #rows do
Set #title = Field(Row(#titles,#cnt),"Value")
Set #desc = Field(Row(#descs,#cnt), "Value")
Set #link = Field(Row(#links,#cnt), "Value") ]%%
<div style="border: 1px solid #444; background-color: #F7F7F7; margin: 0.76em 0; padding: 0.76em;">
<h1 style="font: bold normal 1.0em Arial, Helvetica, sans-serif;">%%=v(#title)=%%</h1>
<span style="font: normal normal 0.76em Arial, Helvetica, sans-serif; color: #444;">%%=v(#desc)=%%</span>
</div>
%%[
NEXT #cnt
ENDIF
]%%
To clarify, the following code found above limits the amount of posts to pull to 5:
If RowCount(#titles) > 5 THEN
SET #rows = 5
ELSE
SET #rows = RowCount(#titles)
ENDIF
And the following, again found above, is where the content for the email is output and thereby available to allow you some customization of the look and feel:
<div style="border: 1px solid #444; background-color: #F7F7F7; margin: 0.76em 0; padding: 0.76em;">
<h1 style="font: bold normal 1.0em Arial, Helvetica, sans-serif;">%%=v(#title)=%%</h1>
<span style="font: normal normal 0.76em Arial, Helvetica, sans-serif; color: #444;">%%=v(#desc)=%%</span>
</div>

Related

How to bind string properties from object in repeat.for

I have a list of arrays in a table displayed using repeat.for. I need to display tr row in blue color when "receiving.supplier === Scrap Separated" and blue color row when the result is "receiving.supplier === Scrap Sorted". Is there any way I can do it with if.bind but for String that I got in network tab. Here is my network and code.
I think this is purely a CSS question. You can have CSS rules based on [data-supplier] and assign a different background color based on the value of the supplier property.
The example CSS rules can be as follows.
tr[data-supplier="Scrap Separated"] {
background-color: blue;
}
tr[data-supplier="Scrap Sorted"] {
background-color: green;
}
And then bind the data-supplier property in the markup.
<tr data-supplier="${recieving.supplier}">
...
</tr>
Note that you cannot possibly nest div directly under tbody as that will be evicted by browser being non-conformed element as per the expected schema.

How to Form Tables Correctly When HTML Template Components are Separated?

When building tables in Lit, sometimes I need to generate different parts of a table in different parts of the code. But when I put everything together, the table does not look the same as if it were declared all in one place.
See this playground for an example of the same table that's assembled two different ways. Is there any way I can make the "two halves" table look the same as the first, while still creating the elements in separate html`` blocks?
I tried creating a table in two different ways (see playground), I expected it to be the same resulting table in both instances. What actually happened is that they looked different, and I want to know why/how to correct this.
Lit does not do string concatenation and each html tag function results in a cached Template element which can be efficiently rendered. This means that each of your html tags get implicitly closed by the browser's HTML parser.
E.g.: html`<table>...` is parsed by the browser into: html`<table>...</table>`. From lit.dev documentation on "Well-formed HTML": https://lit.dev/docs/templates/expressions/#well-formed-html
Lit templates must be well-formed HTML. The templates are parsed by the browser's built-in HTML parser before any values are interpolated. Follow these rules for well-formed templates:
Templates should not contain unclosed elements—they will be closed by the HTML parser.
Therefore instead of the following structure:
// Does not work correctly - do not copy this. For demonstration purposes.
const start = html`<table>`;
const content = html`content`;
const end = html`</table>`;
const result = [start, content, end];
return html`${result}`;
// This would render as: <table></table>content<table></table>
Consider the following structure instead where each html tag function is well formed HTML:
const tableFrame = (content) => html`<table>${content}</table>`;
const content = html`content`;
// Pass the content template result into the table frame.
return tableFrame(content);
The following is your code from the playground example restructured in this way:
<script type="module">
import {LitElement, html, css} from "https://cdn.jsdelivr.net/gh/lit/dist#2/core/lit-core.min.js";
class TableExample extends LitElement {
static styles = css`table, th, td { border: 1px solid black; }`;
generateTables() {
const tables = [];
const tableRow1 = html`
<tr>
<td rowspan=2>0</td>
<td>1</td>
</tr>`;
const tableRow2 = html`
</tr>
<td>2</td>
</tr>`;
const table1 = html`
<table>
<tr>
<td rowspan=2>0</td>
<td>1</td>
</tr>
</tr>
<td>2</td>
</tr>
</table>
`;
const tableFrame = (content) => html`<table>${content}</table>`;
// Full table
tables.push(table1);
tables.push(html`<br />`);
// Use tableFrame with custom content.
tables.push(tableFrame(html`<tr><td>Custom Content</td></tr>`));
tables.push(html`<br />`);
// Use tableFrame with the two rows defined earlier.
tables.push(tableFrame([tableRow1, tableRow2]));
return tables;
}
render() {
return this.generateTables();
}
}
customElements.define('table-example', TableExample)
</script>
<table-example></table-example>
As an additional reference the documentation on Templates: https://lit.dev/docs/templates/expressions/#templates

Is it possible to Style Angular-Strap TypeAhead

I am using AngularStrap, (TypeAhead), trying to make the substring in the matched items to stand out, like either make them bold (like jquery autocomplete) or change the background of the characters ta different color
California
Technical
I thought this should be possible by changing css (if I know they have a selector for the matched substring) Or use of template/$templatecache
no luck so far
EDIT: In this plnkr I can see the drop down menu items have user input highlighted/bolded but cannot see why and how it happens:
<input type="text" class="span3" ng-model="typeaheadValue" bs-typeahead="typeahead">
plnkr -> http://plnkr.co/edit/Yjff9DiLnGqi2x1E5D2q?p=preview
The typeahead dropdown menu items can be styled through .dropdown-menu a. Matched text is regexed' to <strong>match></strong> i.e style those through .dropdown-menu a strong. Example :
/* style the dropdown items */
.dropdown-menu a {
font-family : 'courier new';
font-size: 110%;
}
/* styling matched text */
.dropdown-menu a strong {
color: white;
background-color: red;
}
forked plnkr -> http://plnkr.co/edit/LpdRiH9DxeRiAib3MOnn?p=preview

Access HTML attribute value in SASS

Is it possible to access an HTML attribute value in SASS?
I have a line of code that says
<ul id="my_id" data-count="3">
where the 3 is the result of some jQuery stuff. I need the 3 to calculate some CSS. How can I save it as a SASS variable?
Alternatively, is there a way of counting the number of child elements of a certain parent element? Say I have this code:
<ul id="my_id" data-count="3">
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ul>
(As you might have guessed, the value of data-count matches the number of list items.) Can SASS count the list items and save that number as a variable?
Any ideas would be greatly appreciated.
Sass is just a CSS generator. It doesn't really interact with your HTML, so you can't use HTML attributes as Sass variables.
However, CSS can select based on attributes. So it will be more long-winded than you might like, but you can do something like
ul[data-count="3"]:after
content: "There were three items in that list!"
And I think if you're willing to limit yourself only to a subset of very recent browsers†, you can use the CSS calc() function along with attr() to use the attribute in CSS-based calculations. But that's pretty bleeding edge.
† To be perfectly honest, I have no idea which versions of which browsers have fully implemented this. I'm pretty sure Firefox has it, though I've not used it, and I have no idea about other browsers. It is certainly not well-supported, at any rate.
It seems like you are trying to get the number of items inside your unordered list in CSS (maybe to change their size according to the number of siblings?).
Indeed, you cannot use a data-attribute as a Sass variable. However there is a pure CSS way to apply conditional styles given the number of items in the parent. Plus, it is very easily written in Sass.
Let's say your maximum number of items in your list is 10 and you want to compute the size of li tags based on the number of li tags there is in your list.
#for $i from 1 through 10 {
li:first-child:nth-last-child(#{$i}),
li:first-child:nth-last-child(#{$i}) ~ li {
width: (100%/$i);
}
}
This will output the following CSS:
li:first-child:nth-last-child(1),
li:first-child:nth-last-child(1) ~ li {
width: 100%;
}
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
width: 50%;
}
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
width: 33.33333%;
}
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
width: 25%;
}
li:first-child:nth-last-child(5),
li:first-child:nth-last-child(5) ~ li {
width: 20%;
}
li:first-child:nth-last-child(6),
li:first-child:nth-last-child(6) ~ li {
width: 16.66667%;
}
li:first-child:nth-last-child(7),
li:first-child:nth-last-child(7) ~ li {
width: 14.28571%;
}
li:first-child:nth-last-child(8),
li:first-child:nth-last-child(8) ~ li {
width: 12.5%;
}
li:first-child:nth-last-child(9),
li:first-child:nth-last-child(9) ~ li {
width: 11.11111%;
}
li:first-child:nth-last-child(10),
li:first-child:nth-last-child(10) ~ li {
width: 10%;
}
Basically, this gives the li tags a width of:
100.0% when there is only one li tag
50.00% when there are 2 li tags
33.33% when there are 3 li tags
25.00% when there are 4 li tags
20.00% when there are 5 li tags
16.66% when there are 6 li tags
14.28% when there are 7 li tags
12.50% when there are 8 li tags
11.11% when there are 9 li tags
10.00% when there are 10 li tags
For a live example, please refer to this demo I did using the same trick. I hope it helps.
If you want to access an HTML attribute from CSS, you can use attr()
Check the doc

How to: Fixed Table Header with ONE table (no jQuery)

I know, there are at least 3 dozen questions like this on stackoverflow and still, I could not make this happen:
A simple table where thead is sticked/fixed at the top, and the tbody is scrolled.
I tried so much in the past days and now I ended up here crying for help.
A solution should work in IE8+ and newest FF, Chrome & Safari.
The difference to other "possible duplicates like this one is that I don't want to use two nested tables or jQuery (plain javascript is fine though).
Demo of what I want:
http://www.imaputz.com/cssStuff/bigFourVersion.html.
Problem is it doesn't work in IE, and I would be fine to use some JS.
Ok i got it:
You need to wrap the table in two DIVs:
<div class="outerDIV">
<div class="innerDIV">
<table></table>
</div>
</div>
The CSS for the DIVs is this:
.outerDIV {
position: relative;
padding-top: 20px; //height of your thead
}
.innerDIV {
overflow-y: auto;
height: 200px; //the actual scrolling container
}
The reason is, that you basically make the inner DIV scrollable, and pull the THEAD out of it by sticking it to the outer DIV.
Now stick the thead to the outerDIV by giving it
table thead {
display: block;
position: absolute;
top: 0;
left: 0;
}
The tbody needs to have display: block as well.
Now you'll notice that the scrolling works, but the widths are completely messep up. That's were Javascript comes in.
You can choose on your own how you want to assign it. I for myself gave the TH's in the table fixed widths and built a simple script which takes the width and assigns them to the first TD-row in the tbody.
Something like this should work:
function scrollingTableSetThWidth(tableId)
{
var table = document.getElementById(tableId);
ths = table.getElementsByTagName('th');
tds = table.getElementsByTagName('td');
if(ths.length > 0) {
for(i=0; i < ths.length; i++) {
tds[i].style.width = getCurrentComputedStyle(ths[i], 'width');
}
}
}
function getCurrentComputedStyle(element, attribute)
{
var attributeValue;
if (window.getComputedStyle)
{ // class A browsers
var styledeclaration = document.defaultView.getComputedStyle(element, null);
attributeValue = styledeclaration.getPropertyValue(attribute);
} else if (element.currentStyle) { // IE
attributeValue = element.currentStyle[vclToCamelCases(attribute)];
}
return attributeValue;
}
With jQuery of course this would be a lot easier but for now i was not allowed to use a third party library for this project.
Maybe we should change a method to archieve this goal.Such as:
<div><ul><li>1</li><li>2</li></ul></div> //make it fixed
<table>
<thead>
<tr><th>1</th><th>2</th></tr>
</thead>
<tfoot></tfoot>
<tbody></tbody>
</table>
Of course, this is not good to sematic.But it is the simplest way without js or jq.
Don't you think so?