c884f96bf9
Fixes woocommerce/woocommerce-admin#4654 The feature calls for a mobile app ad banner to be displayed to users on mobile devices. Based on the discussion in woocommerce/woocommerce-admin#4654 this implements the following: 1. [an iOS Smart App Banner](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html). This banner is a meta tag that is generated in PHP. It will only display on iOS devices. One note about this: **This tag is not directly trackable like the implemented Android banner. If we would like to track its success then I believe [these instructions are relevant](https://stackoverflow.com/questions/12906502/is-it-possible-to-track-click-throughs-from-iphone-smart-banner/20422334woocommerce/woocommerce-admin#20422334)**. 2. A mobile app banner ad that **only displays on Android** and only displays at the `738px` breakpoint specified in the issue. To only display this banner ad on Android, we use basic checking of the user agent string. I weighed this up against other approaches and for this kind of niche use case a simple UA string check is (imho) still the best way to do this. 3. The banner ad makes use of user preferences to retain a per user setting that determines if that user has dismissed the Android banner. We don't/can't do anything like this for the iOS Smart App Banner (but in theory we shouldn't need to). |
||
|---|---|---|
| .. | ||
| activity-panel | ||
| test | ||
| README.md | ||
| index.js | ||
| style.scss | ||
README.md
Header
A basic component for the app header. The header outputs breadcrumbs via the sections prop (required) and access to the activity panel. It also sets the document title.
How to use:
import Header from 'header';
render: function() {
return (
<Header
sections={ [
[ '/analytics', __( 'Analytics', 'woocommerce-admin' ) ],
__( 'Report Title', 'woocommerce-admin' ),
] }
/>
);
}
Props
sections(required): Used to generate breadcrumbs. Accepts a single items or an array of items. To make an item a link, wrap it in an array with a relative link (example:[ '/analytics', __( 'Analytics', 'woocommerce-admin' ) ]).isEmbedded: Boolean describing if the header is embedded on an existing wp-admin page. False if rendered as part of a full react page.
Activity Panel
This component contains the Activity Panel. This is shown on every page and is rendered as part of the header.