In a Magento Mobile app, we can define some static pages that will be visible under the More info screen in our mobile application. For example the About us page, Contact page, and so on.
To do this properly, we will first define the static page content inside the Magento Admin area, and then we will assign that content (static page) as part of our Magento mobile app.
Static content could be text/html with images and links, because inside a mobile application, it is loaded and displayed as formatted HTML inside the WebView component.
How to do it…
1. Log in to your Magento Admin area, and navigate to CMS | Pages in the main menu. We can see the list of previously defined pages that can be displayed on our Magento website.
On the Manage Pages screen, we have a grid with columns where we can see the columns, named Title, URL Key, Layout, Store View, Status, and so on.
This is shown in the following screenshot:
2. Click on the Add New Page button in the top-right corner, in order to create new pages for our mobile application. The New Page screen is shown as follows:
3. Locate the Page Title field and enter the title for a new page, for example, My New Page:
4. In the URL Key field, enter a string value that represents the title of our new page, but make sure it is in lowercase letters and one word or more words are connected with the underscore character (for example: my_new_page), as it will became a part of the URL that leads to this page.
5. Next, choose the Store View value we defined for our mobile application from the list.
6. Set the Status field to Enabled in order to make the page visible in our mobile application.
7. Click on the Save and Continue Edit button to save the current changes. The Content tab is now opened, as shown in the following screenshot:
8. Under the Content Heading field, enter the title of the page as you want it to appear in the Magento mobile app.
9. Below the Content Heading field, a web based HTML editor is shown. Here we need to enter the main page content. We are free to use the available HTML formatting and styles inside the editor to stylize our page content as we want. After we are done with the page content, click on the Save and Continue Edit button again to save the changes.
10. Locate the Design tab on the left-hand side of the screen and click on it to see the layout options. Since we are preparing a page for mobile devices, it is best to choose the 1 column layout value under the Page Layout row. Layout Update XML is something that we don’t regularly need for our page and it is way beyond the scope of this book, so leave it empty.
11. Locate and expand the row with the label, Custom Design, and from the Custom Theme list, choose iphone since this is the theme we had set for our mobile application. Also set Custom Layout to 1 column, because it is the best value for displaying on mobile devices:
12. Once you click on Save Page, the Manage Pages screen is shown and we can use the Preview link, on the right-hand side of each page listing to quickly preview our page in a web browser. This is shown in the following screenshot:
We don’t need to insert any metadata for our mobile page, if it is going to be visible in our mobile application only, because metadata is used for web pages SEO (Search Engines Optimization), and our page is going to be integrated inside the mobile application, where search engines are not relevant.
13. Navigate to Mobile | Manage Apps in the main menu and click on our application that is listed under the Manage Apps screen, to open it for editing.
14. Next, navigate to the Content tab option on the left-hand side of the screen and there the Pages row is shown.
15. Click on the Add Page button to add a CMS page to our mobile application and under the Label field, enter a label for your newly created page.
16. Under the Get Content from CMS Page list, choose the page we just created and click on the Save button. The selected page has just become a part of our mobile application.
How it works
Except the Product Catalog pages, Magento offers an option to add Content Management System (CMS) pages that are basically the static HTML pages, but on these pages we can add some information about the website/store (contact, about us, and so on). Also we have an easy way to define the basic layout of these pages on the site (1 column, 2 columns, 3 columns, …) and most of this we can do through the CMS | Pages screen accessible from the main menu.
Our mobile page can use any of the CMS pages defined in Magento, but because of the limited screen resolutions on mobile devices, it is always best to define them to use our mobile (iPhone) theme, which is to be displayed in a user-friendly way inside our mobile app. We can have as many pages as we need inside our mobile application by adding them to our app, by clicking on the button, Add Page, in our application’s content editing screen.
SimiCart is a solution that helps Magento Merchants build mobile shopping apps.
- Magento merchants: Our solution is specially designed for Magento platform so you can get all the best features of Magento to apps. If you use a solution for every platform you’remissing many good things.
- Mobile shopping apps: You will have apps that are coded separately and specifically for iPhone and android. Your customers can search and download your shopping apps from Google Play and Apple stores. And again, such tailored apps will bring the best user experience!
Some post you may consider:
Lesson 7: Styling your Magento mobile app
Lesson 6: Creating and configuring a basic Magento mobile app
Lesson 8: Adding static content in Magento mobile app