Skip to content

Commit

Permalink
Merge pull request #294 from B77Mills/adjustContainerWidth
Browse files Browse the repository at this point in the history
Adjust container width & adjust ad calls to account for right rail.
  • Loading branch information
B77Mills authored Dec 12, 2023
2 parents 78e5a0d + bae4dce commit 895b577
Show file tree
Hide file tree
Showing 17 changed files with 651 additions and 260 deletions.
3 changes: 3 additions & 0 deletions packages/global/components/blocks/marko.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
"@title": "string",
"@alias": "string"
},
"<global-recommended-content-block>": {
"template": "./recommended-content.marko"
},
"<global-section-cards-block>": {
"template": "./section-cards.marko",
"<query-params>": {},
Expand Down
40 changes: 40 additions & 0 deletions packages/global/components/blocks/recommended-content.marko
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { get, getAsArray } from "@parameter1/base-cms-object-path";
import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
import shuffle from "../../utils/shuffle-array";

$ const { site, } = out.global;
$ const idxConfig = site.getAsObject("identityX");
$ const recommendedQuestionId = get(idxConfig, "options.recommendedQuestionId");
$ const title = defaultValue(input.title, "Suggested");

<marko-web-identity-x-context|{ user, hasUser }|>
$ const customTitle = (hasUser) ? `${title} for ${user.givenName}` : `${title} for You`;
<if(hasUser)>
$ const userAnswer = user.customSelectFieldAnswers.find(({id, answers}) => answers.length && id === recommendedQuestionId);
$ const answers = getAsArray(userAnswer, "answers");
<if(answers.length)>
$ const answer = shuffle(answers)[0];
$ const queryParams = {
limit: 4,
...input.queryParams,
...get(idxConfig, `options.answerToQueryParamsMap.${recommendedQuestionId}.${answer.id}.queryParams`),
};
<theme-latest-content-list-block title=customTitle query-params=queryParams class="recommended-content">
<@native-x indexes=[0] name="default" aliases=input.aliases ...input.nativeX />
<@node with-section=true with-dates=false ...input.node />
</theme-latest-content-list-block>
</if>
<else>
<theme-latest-content-list-block title=customTitle query-params=input.queryParams class="recommended-content">
<@native-x indexes=[0] name="default" aliases=input.aliases ...input.nativeX />
<@node with-section=true with-dates=false ...input.node />
</theme-latest-content-list-block>
</else>
</if>
<else>
<theme-latest-content-list-block title=customTitle query-params=input.queryParams class="recommended-content">
<@native-x indexes=[0] name="default" aliases=input.aliases ...input.nativeX />
<@node with-section=true with-dates=false ...input.node />
</theme-latest-content-list-block>
</else>
</marko-web-identity-x-context>
372 changes: 187 additions & 185 deletions packages/global/components/layouts/content/default.marko

Large diffs are not rendered by default.

111 changes: 42 additions & 69 deletions packages/global/components/layouts/website-section/feed.marko
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
import { getAsArray } from "@parameter1/base-cms-object-path";

$ const { id, alias, name, pageNode } = input;
$ const withNativeX = defaultValue(input.withNativeX, true);
$ const sections = getAsArray(input, "sections");

$ const { pagination: p, req, site } = out.global;
$ const perPage = 18;
$ const { pagination: p, site } = out.global;
$ const newsletterConfig = site.getAsObject('newsletter.signupBannerLarge');
$ const perPage = 12;

<global-website-section-default-layout
id=id
Expand Down Expand Up @@ -59,71 +62,41 @@ $ const perPage = 18;
/>
</if>

<theme-section-feed-block alias=alias display-image=input.displayImage>
<@query-params limit=3 skip=p.skip({ perPage }) />
</theme-section-feed-block>
</@section>

<@section|{ aliases }|>
<theme-gam-define-display-ad
name="rotation"
position="section_page"
aliases=aliases
modifiers=["inter-block"]
/>
</@section>

<@section>
<theme-section-feed-block alias=alias display-image=input.displayImage>
<@query-params limit=2 skip=p.skip({ perPage, skip: 3 }) />
</theme-section-feed-block>
</@section>

<@section>
<theme-newsletter-signup-banner-large-block />
</@section>

<@section>
<theme-section-feed-block alias=alias display-image=input.displayImage>
<@query-params limit=3 skip=p.skip({ perPage, skip: 5 }) />
</theme-section-feed-block>
</@section>

<@section|{ aliases }|>
<theme-gam-define-display-ad
name="rotation"
position="section_page"
aliases=aliases
modifiers=["inter-block"]
/>
</@section>

<@section>
<theme-section-feed-block alias=alias display-image=input.displayImage>
<@query-params limit=5 skip=p.skip({ perPage, skip: 8 }) />
</theme-section-feed-block>
</@section>

<@section|{ aliases }|>
<theme-gam-define-display-ad
name="rotation"
position="section_page"
aliases=aliases
modifiers=["inter-block"]
/>
</@section>

<@section>
<theme-section-feed-block alias=alias display-image=input.displayImage>
<@query-params limit=5 skip=p.skip({ perPage, skip: 13 }) />
</theme-section-feed-block>
<theme-section-feed-block|{ totalCount }| alias=alias count-only=true>
<theme-pagination-controls
per-page=perPage
total-count=totalCount
path=alias
/>
</theme-section-feed-block>
<global-section-feed-wrapper
aliases=aliases
alias=alias
flow=input.feedFlow
with-ads=input.withAds
query-params=input.queryParams
above-the-fold=true
ad-name=input.adName
>
<@node ...input.node />
<if(withNativeX)>
<@native-x index=[1] name="default" aliases=aliases sectionName="Sponsored" />
</if>
<@rail>
<!-- Remobe sticky top if you add user stuff back. -->
<div class="mb-block sticky-top">
<theme-gam-define-display-ad
name="rail"
position="section_page"
aliases=input.aliases
modifiers=["rotation", "section_page"]
/>
</div>
<!-- <marko-web-identity-x-context|{ hasUser }|>
<if(!hasUser)>
<div class="sticky-top mt-2">
<global-identity-x-newsletter-form-inline with-image=false type="inlineContent" />
</div>
</if>
</marko-web-identity-x-context> -->
</@rail>
<@rail>
<theme-client-side-most-popular-list-block class="sticky-top" />
</@rail>
</global-section-feed-wrapper>
</@section>

<for|s| of=sections>
Expand All @@ -140,8 +113,8 @@ $ const perPage = 18;
<theme-gam-define-display-ad
name="rotation"
position="section_page"
aliases=aliases
modifiers=["inter-block"]
aliases=input.aliases
modifiers=["rotation", "inter-block", "section_page"]
/>
</@section>
</global-website-section-default-layout>
3 changes: 2 additions & 1 deletion packages/global/components/marko.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
{
"taglib-imports": [
"./blocks/marko.json",
"./layouts/marko.json"
"./layouts/marko.json",
"./wrappers/marko.json"
],
"<global-sponsored-label-logo>": {
"template": "./sponsored-label-logo.marko"
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";

$ const { nativeX: nxConfig } = out.global;

$ const { nodes, nativeX } = input;

$ const lazyload = defaultValue(input.lazyload, true);
$ const adName = defaultValue(input.adName, "rotation");
$ const withNativeXSection = defaultValue(input.withNativeXSection, true);

<if(nodes && nodes.length)>
<if(nativeX && nativeX.index)>
$ const nodesBefore = nodes.slice(0, nativeX.index);
$ const nodesAfter = nodes.slice(nativeX.index);
<theme-section-feed-flow ...input.flow nodes=nodesBefore header=input.header modifiers=input.modifiers>
<@node-list inner-justified=false ...input.nodeList />
<@node with-dates=false with-section ...input.node />
</theme-section-feed-flow>
<marko-web-native-x-retrieve|{ wasFound, hasCampaign, campaign, linkAttrs, containerAttrs }| ...nxConfig.getPlacement({ name: nativeX.name, aliases: nativeX.aliases }) section-name=nativeX.sectionName>
<if(wasFound && hasCampaign)>
<theme-section-feed-flow ...input.flow nodes=[campaign] modifiers=input.modifiers>
<@node-list inner-justified=false ...input.nodeList />
<@node with-dates=false with-section=true ...input.node container-attrs=containerAttrs link-attrs=linkAttrs />
</theme-section-feed-flow>
</if>
</marko-web-native-x-retrieve>
<theme-section-feed-flow ...input.flow nodes=nodesAfter modifiers=input.modifiers>
<@node-list inner-justified=false ...input.nodeList />
<@node with-dates=false with-section ...input.node />
</theme-section-feed-flow>
</if>
<else>
<theme-section-feed-flow ...input.flow nodes=nodes header=input.header modifiers=input.modifiers>
<@node-list inner-justified=false ...input.nodeList />
<@node with-dates=false with-section ...input.node />
</theme-section-feed-flow>
</else>
<if(input.withAds)>
<theme-gam-define-display-ad
name="rotation-300"
position="content_page"
aliases=input.aliases
modifiers=["rotation", "inline-section-feed", "content_page"]
/>
</if>
</if>
26 changes: 26 additions & 0 deletions packages/global/components/wrappers/marko.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{
"taglib-imports": [],
"<global-section-feed-wrapper>": {
"template": "./section-feed.marko",
"<flow>": {},
"@rails <rail>[]": {},
"@after": {},
"@with-pagination": "boolean",
"@modifiers": "array",
"@with-ads": "boolean",
"@ad-name": "string",
"@alias": "string",
"@header": "string",
"@aliases": "array",
"@query-name": "string",
"@query-params": "object",
"@native-x": "object",
"@node": "object",
"@node-list": "object",
"@path": "string",
"@above-the-fold": "boolean"
},
"<global-native-x-section-feed-wrapper>": {
"template": "./native-x-section-feed.marko"
}
}
58 changes: 58 additions & 0 deletions packages/global/components/wrappers/native-x-section-feed.marko
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { defaultValue } from "@parameter1/base-cms-marko-web/utils";
import { getAsArray, getAsObject } from "@parameter1/base-cms-object-path";
import convertAdToNode from "@parameter1/base-cms-marko-web-native-x/utils/convert-ad-to-node";
import chunkArray from "../../utils/chunk-array";

$ const { nativeX: nxConfig, i18n } = out.global;
$ const { section, modifiers } = input;
$ const limit = defaultValue(input.limit, 6);
$ const placementName = defaultValue(input.placementName, "default");
$ const aliases = defaultValue(input.aliases, []);
$ const cols = input.cols != null ? input.cols : limit;
$ const viewMore = defaultValue(input.viewMore, false);
$ const nodeImageInput = getAsObject(input, "node.image");
$ const aboveTheFold = defaultValue(input.aboveTheFold, false);
$ const excludeContentIds = getAsArray(input.excludeContentIds);
$ const displayImage = defaultValue(input.displayImage, true);

$ const uri = nxConfig.getUri();
$ const placement = nxConfig.getPlacement({ name: placementName, aliases });

<marko-web-native-x-fetch-elements|{ ads }| uri=uri id=placement.id opts={ n: limit }>
$ const hasAd = ads && ads.length && ads[0] && ads[0].hasCampaign;
<if(hasAd)>
$ const nodes = ads.filter(
(ad) => ad.hasCampaign).map(
(ad) => convertAdToNode(ad, { sectionName: "Brand Insights" }).node).filter(
(node) => !excludeContentIds.includes(node.storyId)
);
$ const nodeGroups = chunkArray(nodes, 3);

<div class="row">
<div class="col-lg-8">
<for|nodeGroup, index| of=nodeGroups>
$ const header = index === 0 ? input.header : null;
$ const flowInput = (index === 0 && aboveTheFold) ? { displayImage, ...input.flow, lazyload: false } : { displayImage, ...input.flow};
<section-feed-flow
nodes=nodeGroup
header=header
modifiers=modifiers
node=input.node
node-list=input.nodeList
aliases=aliases
with-ads=false
flow=flowInput
/>
</for>
</div>
<div class="col-lg-4">
<if(input.rails && input.rails[0])>
<${input.rails[0].renderBody} />
</if>
<else>

</else>
</div>
</div>
</if>
</marko-web-native-x-fetch-elements>
Loading

0 comments on commit 895b577

Please sign in to comment.