FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

Make the article aside MPU part of the templates(#16295) · devhttps/frontend@bbef23f · GitHub

/ frontend Public
forked from guardian/frontend

Commit bbef23f

Browse files
katebee
authored
Make the article aside MPU part of the templates(guardian#16295)
* Add aside fragment, and update the article templates to use the aside MPU fragment * Add support for additional MPU dimensions, add Scala tests for MPU placeholders * Remove article-aside related sizes from the create-ad module and tests * Change the JS tests for the article-aside to account for DOM mutation supplanting injection * Make articleAsideAdverts run before prepareGoogletag
1 parent eb5ce89 commit bbef23f

16 files changed

Lines changed: 120 additions & 121 deletions

‎article/app/views/fragments/articleAsideSlot.scala.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@(
2+
shouldShowAds: Boolean,
3+
articleAsideOptionalSizes: Seq[String],
4+
isSticky: Boolean = true
5+
6+
)
7+
@import conf.switches.Switches.CommercialSwitch
8+
9+
@if(CommercialSwitch.isSwitchedOn && shouldShowAds) {
10+
<div class="ad-slot-container">
11+
@fragments.commercial.adSlot(
12+
"right",
13+
Seq("mpu-banner-ad"),
14+
Map("mobile" -> (Seq("1,1", "2,2", "300,250", "300,600", "fluid") ++ articleAsideOptionalSizes)),
15+
optClassNames = if (isSticky) Some("js-sticky-mpu") else None
16+
){ }
17+
</div>
18+
}

‎article/app/views/fragments/articleBody.scala.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
@import common.LinkTo
44
@import views.BodyCleaner
5-
@import views.support.Commercial.isPaidContent
5+
@import views.support.Commercial.{isPaidContent, articleAsideOptionalSizes, shouldShowAds}
66
@import views.support.RenderClasses
77
@import views.support.TrailCssClasses.toneClass
88
@import conf.switches.Switches.NewHeader
@@ -105,9 +105,11 @@
105105
</div>
106106

107107
<div class="content__secondary-column js-secondary-column" aria-hidden="true">
108-
<div class="ad-slot-container js-ad-slot-container"></div>
108+
109+
@fragments.articleAsideSlot(shouldShowAds(model), articleAsideOptionalSizes)
110+
109111
@if(!isPaidContent){
110-
<div class="js-components-container"></div>
112+
<div class="js-components-container"></div>
111113
}
112114
</div>
113115
</div>

‎article/app/views/fragments/articleBodyExplore.scala.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import common.LinkTo
22
@import controllers.ArticlePage
33
@import views.BodyCleaner
4-
@import views.support.Commercial.isPaidContent
4+
@import views.support.Commercial.{isPaidContent, articleAsideOptionalSizes, shouldShowAds}
55
@import views.support.RenderClasses
66

77
@(model: ArticlePage, amp: Boolean = false)(implicit request: RequestHeader, context: _root_.model.ApplicationContext)
@@ -51,7 +51,9 @@ <h1 class="explore-series-video-headline">
5151
<div class="after-article js-after-article"></div>
5252
</div>
5353
<div class="content__secondary-column js-secondary-column" aria-hidden="true">
54-
<div class="ad-slot-container js-ad-slot-container"></div>
54+
55+
@fragments.articleAsideSlot(shouldShowAds(model), articleAsideOptionalSizes, Some("js-sticky-mpu"))
56+
5557
</div>
5658
</div>
5759
</div>

‎article/app/views/fragments/articleBodyImmersive.scala.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
@import common.LinkTo
44
@import views.BodyCleaner
5-
@import views.support.Commercial.isPaidContent
5+
@import views.support.Commercial.{isPaidContent, articleAsideOptionalSizes, shouldShowAds}
66
@import views.support.TrailCssClasses.toneClass
77

88
@defining(model.article) { article =>
@@ -47,7 +47,9 @@
4747
</div>
4848

4949
<div class="content__secondary-column js-secondary-column" aria-hidden="true">
50-
<div class="ad-slot-container js-ad-slot-container"></div>
50+
51+
@fragments.articleAsideSlot(shouldShowAds(model), articleAsideOptionalSizes, false)
52+
5153
</div>
5254
</div>
5355
</div>

‎article/test/ArticleFeatureTest.scala‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -224,6 +224,45 @@ import collection.JavaConversions._
224224
}
225225
}
226226

227+
scenario("Article aside MPU", ArticleComponents) {
228+
229+
Given("I am on an article entitled '10 of the best things to do in Tallinn'")
230+
And("I am on the 'UK' edition")
231+
goTo("/travel/2017/mar/20/10-best-things-to-do-tallinn-estonia-museums-cafe-art-beer") { browser =>
232+
import browser._
233+
234+
$(".ad-slot--right").length should be(1)
235+
val adSlotRight = $(".ad-slot--right")
236+
237+
Then("The article-aside MPU should have the correct sizes")
238+
adSlotRight.getId() should be("dfp-ad--right")
239+
adSlotRight.getAttribute("data-mobile") should be("1,1|2,2|300,250|300,600|fluid")
240+
}
241+
242+
Given("I am on an article entitled '10 of the best things to do in Tallinn'")
243+
And("I am on the 'US' edition")
244+
US("/travel/2017/mar/20/10-best-things-to-do-tallinn-estonia-museums-cafe-art-beer") { browser =>
245+
import browser._
246+
247+
val adSlotRight = $(".ad-slot--right")
248+
249+
Then("The article-aside MPU should have the correct sizes")
250+
adSlotRight.getId() should be("dfp-ad--right")
251+
adSlotRight.getAttribute("data-mobile") should be("1,1|2,2|300,250|300,600|fluid|300,1050")
252+
}
253+
254+
Given("I am on an immersive article, entitled 'Health insurance woes helped elect Trump, but his cure may be more painful'")
255+
goTo("/us-news/2017/mar/21/pennsylvania-healthcare-donald-trump-supporters") { browser =>
256+
import browser._
257+
258+
val adSlotRight = $(".ad-slot--right")
259+
260+
Then("The article-aside MPU should not be sticky")
261+
adSlotRight.getId() should be("dfp-ad--right")
262+
adSlotRight.getAttribute("class") should not include("js-sticky-mpu")
263+
}
264+
}
265+
227266
scenario("In body pictures", ArticleComponents) {
228267

229268
Given("I am on an article entitled 'A food revolution in Charleston, US'")

‎common/app/views/support/Commercial.scala‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@ object Commercial {
2020
case _ => true
2121
}
2222

23+
def articleAsideOptionalSizes(implicit request: RequestHeader) = Edition(request).id match {
24+
case "US" => Seq("300,1050")
25+
case _ => Seq.empty
26+
}
27+
2328
def glabsLink (request: RequestHeader): String = {
2429
val glabsUrlSuffix = Edition(request).id match {
2530
case "AU" => "-australia"

‎data/database/62f245c60f4de7373785df55ef169929695c2ccd90f86e43fd0995202624a669‎

512 KB
Binary file not shown.

‎data/database/d175f113624e4a4ce34bcb3f4a9f4bcff9c95f748013e6083399377cdad04f66‎

64 KB
Binary file not shown.

‎data/database/f5a77559aac918c944a0274c7f164a80a807a79e85997d2bd3790cc21dfacf39‎

64 KB
Binary file not shown.

‎static/src/javascripts-legacy/bootstraps/commercial.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,8 @@ define([
5858
['cm-thirdPartyTags', thirdPartyTags.init],
5959
['cm-prepare-sonobi-tag', prepareSonobiTag.init, true],
6060
['cm-prepare-switch-tag', prepareSwitchTag.init, true],
61-
['cm-prepare-googletag', prepareGoogletag.init, true],
6261
['cm-articleAsideAdverts', articleAsideAdverts.init, true],
62+
['cm-prepare-googletag', prepareGoogletag.init, true],
6363
['cm-articleBodyAdverts', articleBodyAdverts.init, true],
6464
['cm-liveblogAdverts', liveblogAdverts.init, true],
6565
['cm-closeDisabledSlots', closeDisabledSlots.init],

0 commit comments

Comments
 (0)
Back | FazBrowse Home | New Git URL