[MGNLDEMO-32] Output Channels for pages and a component Created: 18/May/15  Updated: 13/Oct/16

Status: Accepted
Project: Magnolia Demo Projects
Component/s: None
Affects Version/s: None
Fix Version/s: None

Type: Story Priority: Major
Reporter: Christopher Zimmermann Assignee: Unassigned
Resolution: Unresolved Votes: 1
Labels: sales
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Issue Links:
Relates
documentation
to be documented by DOCU-599 Provide examples for "Channel" Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Date of First Response:
Epic Link: Travel Demo
Story Points: 8

 Description   

Demo must demonstrate Channels feature with Device Detection: The ability to show different content based on channel. And the ability to detect device features.
The device example of channels is particularly relevant since our page editor/preview offers chance to preview for different device types.

PAGE

To the Demo project pages:
Add the eqivalent to the OutputChannels tab of pages in STK.
It has the effect that a page can be excluded on specific channels - in this case devices.

COMPONENT

Create a new component in the demo "channelPanel". Its dialog has the same fields as the OutputChannels tab of pages in STK. It contains an area which has all components of MTE available. So it can be used to control the channels of any other component.

USAGE ON DEMO

Use case for the demo is to have a Flash component that we only include on desktop. Of course flash makes sense because it does not run on mobile devices. But it should also simply demonstrate that you might have something HEAVY in a certain document that you dont want to bog down mobile devices with.

FLASH CHART
For this I recommend (Open to other suggestions though!!!) the Creative Commons licensed flashxml.net chart - which is free because it contains a watermark to the company website. Download from here: http://www.flashxml.net/charts.html
Embed it simply in HTML component because we dont want to demonstrate configuring a component here. It should work to put all of its resources in /src/main/resources/travel-demo/resources/libs/flashxml

Use the channelPanel component at the bottom of the about/company page. And configure it to not be shown on mobile. Inside it place an HTML component. In the HTML include a header: "Sales Figures", and then the charts SWF file as an object. (Based on the html in the included "index.html" sample file.)

Add a page "figures" under "/about" in the last position - and configure it to not be shown on mobile in the page properties.
To the page add a jumbotron and an HTML component with the charts SWF file.
The JumboTron includes title "Sales figures" and the text: "Our recent sales are looking great across all regions - but do tend to fluctuate wildly year to year."

NAVIGATION

Ensure that the navigation does not show a page excluded due to the channel. (not sure if something must be done here - but at least check.)



 Comments   
Comment by Miguel Abreu [ 29/Sep/15 ]

The usage on demo that you have written makes sense. However I want to add another use case, since flash seems to be and old and archaic topic:

Let´s say we have an ad that is displayed on all devices. Suddenly, we have a huge pick of visitors, that is heavily affecting the ad server, so they ad is taking long time to load, and the ones being more affected are the smartphones users, we know this because we see the bounce rate on the Google Analytics for the mobiles is increasing exponentially, while in the desktop the bounce rate is barely increasing.

Marketing team decides to remove the ad from the smartphones, so marketing team with a click can say that the ad should not be displayed at smartphones. The key point here is "marketing team with clicks"... by using bootstrap or similar you need to touch code, which needs an IT guy and possibly a production intervention, rather than some clicks until the change is published.

By having this, the marketing team makes the mobile website load quicker in few minutes.

Comment by Philipp Bärfuss [ 08/Oct/15 ]

In a workshop we detected the following good use case which could make more sense:

We could use an email newsletter channel. In this ues-case the delivered html might actually really need to be different compared to the responsive design approach for smartphones.

Comment by Teresa Miyar [ 26/Apr/16 ]

My two cents:

PAGE: Does not make sense to exclude a whole page and it does not work either, as you can exclude a page and if you have a teaser for that page it will still be displayed

COMPONENT: I don't see the use of the channelpanel, as you could decide that some component will be displayed for all channels in one page, but not on another.

FLASH CHART: Maybe can make sense for poc but not for demo, too complex

For the travel demo, It could be enough that the home page carrousel is excluded for the mobile devices and on mobile devices add some teasers that will be excluded from the desktop version. Other could be you put a video on the contact page and exclude it from mobile. I think contact page will be most visited after the home as it has a form.

Generated at Mon Feb 12 05:15:36 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.