Merge pull request #69 from jwade1327/native-ad-slot

Create and add 'Sponsored' Native ad slot to AM-LFTE
parameter1 · May 14, 2024 · a6ee6a3 · a6ee6a3
2 parents 8ce792f + 45f9b89
commit a6ee6a3
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 1 deletion.
diff --git a/packages/common/components/blocks/ad/promotion-native.marko b/packages/common/components/blocks/ad/promotion-native.marko
@@ -2,12 +2,16 @@ import { get, getAsObject } from "@parameter1/base-cms-object-path";
 
 $ const creativeId = get(input, "creativeId");
 $ const tenant = get(input, "tenant");
+$ const newsletter = getAsObject(input, "newsletter");
 $ const content = getAsObject(input, "content");
+$ const advertiser = getAsObject(input, "advertiser");
 $ content.labels = ["Sponsored"];
 
 <common-content-list-item-block
+  newsletter=newsletter
   content=content
   with-image=false
+  advertiser=advertiser
   mindful-creative-id=creativeId
   mindful-tenant=tenant
 />
diff --git a/packages/common/components/blocks/ad/wrapper.marko b/packages/common/components/blocks/ad/wrapper.marko
@@ -33,6 +33,7 @@ $ const PromotionComponent = promotionComponents[defaultValue(input.promotionCom
         newsletter=newsletter
         section-name=sectionName
         content=convertAdToContent(data, { sectionName })
+        advertiser=data.advertiser
         tenant=tenant
         creative-id=get(data, "creative.mindfulCreativeId")
       />

diff --git a/packages/common/components/blocks/content/list-item.marko b/packages/common/components/blocks/content/list-item.marko
@@ -2,7 +2,7 @@ import { get, getAsArray, getAsObject } from "@parameter1/base-cms-object-path";
 import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
 import buildLinkUrl from '@science-medicine-group/package-common/utils/build-link-url';
 
-$ const { content, ctaLinkStyle } = input;
+$ const { content, ctaLinkStyle, advertiser } = input;
 $ const creativeId = get(input, "mindfulCreativeId");
 $ const tenant = get(input, "mindfulTenant");
 $ const url = buildLinkUrl(content.siteContext.url);
@@ -77,6 +77,16 @@ $ const ctaLinkAttrs = { style: ctaLinkStyles, ...linkAttrs };
         $ const tag = (content.company) ? `Sponsored Content by ${get(content, "company.name")}` : "Sponsored Content";
         <tr>
           <td align="left" valign="top" style=sponsoredTagStyle>${tag}</td>
+          <td align="right" width="200">
+            <marko-newsletter-imgix
+              src=advertiser.image.src
+              alt=advertiser.image.alt
+              options={ w: 360, auto: "format,compress" }
+              attrs={ border: 0, width: 180 }
+            >
+              <@link href=advertiser.website target="_blank" attrs=imgLinkAttrs />
+            </marko-newsletter-imgix>
+          </td>
         </tr>
       </if>
       <else-if(withSection)>

diff --git a/tenants/all/config/native-x.js b/tenants/all/config/native-x.js
@@ -34,6 +34,7 @@ module.exports = {
     'am-lfte': {
       'slot-1': '647e1c415150cb0001181028',
       'case-sponsor': '647e1c36989f4f0001733285',
+      sponsored: '664387f3ce30e70001d9e8ac',
     },
     'am-community-insider': {
       community: '64ff4d1896af9a00016a8b4f',

diff --git a/tenants/all/templates/am-lfte.marko b/tenants/all/templates/am-lfte.marko
@@ -174,6 +174,14 @@ $ const resolvedToNodesConverter = ({ resolved }) => (resolved.map((node) => ({
           limit=5
         />
 
+        <!-- Sponsored Native block -->
+        <common-ad-wrapper-block
+          date=date
+          newsletter=newsletter
+          promotion-component="native-block"
+          placement-id=get(nativeX, `placements.${newsletter.alias}.sponsored`)
+        />
+
       </@body>
       <@footer>
         <common-new-footer-block newsletter=newsletter />