-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #294 from B77Mills/adjustContainerWidth
Adjust container width & adjust ad calls to account for right rail.
- Loading branch information
Showing
17 changed files
with
651 additions
and
260 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 40 additions & 0 deletions
40
packages/global/components/blocks/recommended-content.marko
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
372
packages/global/components/layouts/content/default.marko
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
46 changes: 46 additions & 0 deletions
46
packages/global/components/wrappers/components/section-feed-flow.marko
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
58
packages/global/components/wrappers/native-x-section-feed.marko
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
Oops, something went wrong.