Edition switcher banner #11763
Edition switcher banner #11763
Conversation
|
Size Change: +14.1 kB (+1.62%) Total Size: 881 kB
ℹ️ View Unchanged
|
domlander
changed the title
github-actions
bot
removed
the
run_chromatic
| currentPillarTitle?: string; | ||
| }; | ||
|
|
||
| export const FrontSubNav = ({ |
There was a problem hiding this comment.
Moved into its own component so we can use the useEditionSwitcherBanner hook. The <Subnav /> was already in an island; this does move the straight lines into the island too.
domlander
force-pushed
the
doml/edition-switcher-banner-with-islands
branch
from
75ebced
to
244d0a7
Compare
dotcom-rendering/src/components/EditionSwitcherBanner.importable.tsx
Outdated
Show resolved
Hide resolved
|
Hello 👋! When you're ready to run Chromatic, please apply the You will need to reapply the label each time you want to run Chromatic. |
Very neat and smart! |
dotcom-rendering/src/components/EditionSwitcherBanner.importable.tsx
Outdated
Show resolved
Hide resolved
dotcom-rendering/src/components/EditionSwitcherBanner.importable.tsx
Outdated
Show resolved
Hide resolved
|
|
||
| const getBannerValueFromQueryParams = () => { | ||
| const queryParams = new URLSearchParams(window.location.search); | ||
| return queryParams.get('editionSwitcherBanner'); |
There was a problem hiding this comment.
Could making this param lowercase mean less chance for mistakes? It seems to be what we have favoured in the past in Frontend:
There was a problem hiding this comment.
I see lowercase, camelCase, underscores AND hyphens in that list!
With quite long words, I worry it won't be very readable in lowercase. Also, the only examples in that file with over 10 characters use either camelCase, underscores or hyphens.
There was a problem hiding this comment.
Sigh. I thought the commercial param names were fairly consistent but it's a shame there is a mix of conventions.
Happy to leave it to you though unless you fancy edition-switcher-banner
As an aside the received wisdom appears to be to use hyphens for word separators in URLs:
https://developers.google.com/search/docs/crawling-indexing/url-structure
https://blog.codinghorror.com/of-spaces-underscores-and-dashes/
There was a problem hiding this comment.
OK interesting. If we're inconsistent then I think going with what Google recommend is probably a good idea. I'll update to edition-switcher-banner.
domlander
force-pushed
the
doml/edition-switcher-banner-with-islands
branch
from
7fd84ba
to
fcb1a25
Compare
|
Seen on PROD (merged by @domlander 10 minutes and 32 seconds ago) Please check your changes! |
|
Just to note that I've experienced a bug with this banner this morning on Chrome on my Android phone? It seems to be unduly persistent on https://www.theguardian.com/uk - I'm London-based, and use the UK edition, but every time I dismiss the "You are viewing the UK homepage" banner and reload the network front, it reappears: screen-20240718-073607.mp4At one point in this video, I click on an article and then the Update: as of 7:50am, the banner is no longer showing on my phone, guess the problem has cleared itself? |
I think what you're seeing here is mostly expected behaviour. Clicking the X does not stop the banner from reappearing the next time you go to a network front that doesn't match your preferred edition. I'll explain what I think is going on at each stage of the video. Please mention if there is any point where I have misunderstood. 0:00 - 0:11 0:16 - 0:22 0:26 - 0:32 0:35 - 0:42 |
Ah, good point! So it was user error on my part- I thought my edition preference was set to For my particular form of confusion, a better message would be something like "You're viewing the UK homepage, but your default is set to the US homepage" - better for me, but definitely more verbose and might prompt different questions from other users like "How do I set my default?". |
Closes #11671
What does this change?
Displays a banner which allows users to switch to their preferred or default network front. It is only displayed when the user is viewing any other network front.
The banner is sticky to the top of the page as the user scrolls and can be dismissed by clicking the
Xbutton.A user can indicate a preference for an edition by using the dropdown in the top-right on desktop pages and selecting their preferred edition. This stores a cookie
GU_EDITIONthat remembers their edition preference. If the user hasn't indicated a preference for an edition, their default edition will be decided in Fastly by their geolocation, which is likely to be the edition that is most relevant to them.For example, a user that has selected the UK as their preferred edition and visits the US network front,
/us, will be shown this banner. Similarly, a user that does not have this cookie but lives in the UK will also be shown this banner when visiting/us, or/au,/europeor/international.The banner will show up every time the user goes to a network front different to their edition.
The subnav (with white background) and straight lines beneath it are not rendered when the banner is displayed. This is because the banner needs to be sticky over the main content and having the banner above the subnav isn't technically possible without updating the HTML of the page. This would undoubtedly affect other teams. For example, we don't want to risk interrupting the behaviour of the
top-above-navad slot.You can opt out of seeing the banner by visiting
https://www.theguardian.com/uk?editionSwitcherBanner=hide. This will set a cookie that will hide the banner. Note that there may be a flash of content as the banner is rendered server-side. To remove this cookie, visithttps://www.theguardian.com/uk?editionSwitcherBanner=unhide. I chose "unhide" rather than "show", as the latter may mislead users to think that it forces the banner to show, which it does not.Tracking:
data-component="edition-switcher-banner"data-link-name="edition-switcher-banner close-banner"data-link-name="edition-switcher-banner switch-edition"Why?
We want to give users the option to go back to their default front if they've ended up on a different network front by accident (or been sent there incorrectly by a search engine).
This banner provides a visual indication to a user that has arrived on a different network front to their own, that there may be a network front with content more relevant to them.
Screenshots
Screen recordings
Screen.Recording.2024-06-28.at.14.51.32.mov
Screen.Recording.2024-06-28.at.14.52.35.mov