Presentation on theme: "METRO Cash & Carry CMS 18.104.22.168 / ACWS 11.3.000 / 2011-09-08 Member of MCC Advanced Customer Website (ACWS) Training for CMS Authors Erik Porsche Jens Affolter."— Presentation transcript:
METRO Cash & Carry CMS / ACWS / Member of MCC Advanced Customer Website (ACWS) Training for CMS Authors Erik Porsche Jens Affolter
METRO Cash & Carry Member of Page 2 Agenda (1) 1 2 Product philosophy of the pirobase CMS ® 3 Login, personal desktop and navigation 4 Pages and page tree 5 Smart Editor 6 Content objects and elements Views
METRO Cash & Carry Member of Page 3 Agenda (2) 8 9 Data sources 10 7 Slots Special pages (Textual IDs) Time-based publishing 11 SEO Tasks 12 Additional information
METRO Cash & Carry Member of Page 4 Product philosophy of the pirobase CMS ®
METRO Cash & Carry Member of Page 5 Product philosophy of the pirobase CMS ® Content is -modular in structure (building blocks), -independent of the layout, and it is -stored in hierarchic page trees. Access rights control the read and write access to content. The same content can be re-used on other pages (= referenced)
METRO Cash & Carry Member of Page 6 Login, personal desktop and navigation
METRO Cash & Carry Member of Browsers In general, for viewing web pages created with the CMS, all modern browsers including mobile devices could be used. For authoring and administration purpose, the supported browsers are: (Source: pirobase CMS® release notes) The browsers must also accept cookies to work.
METRO Cash & Carry Member of Page 8 Login All users responsible for the ACWS (like authors and administrators) use the same web-based toolbox: pirobase CMS ® webadmin It can be accessed by a general URL: In case of the ACWS, use this URL to access the production server: ( The URL should work for all countries if your local workstation is within METRO Group network. )
METRO Cash & Carry Member of Page 9 User interface and navigation Depending on your role you might see different personal desktops: Authors (left)…… and Community Administrators (right)
METRO Cash & Carry Member of Page 10 User interface and navigation – Browsers and Tooltips For many elements and icons so-called Tooltips are provided to explain the respective function. To activate them, place the mouse cursor on the icon for one second; a short explanatory text will pop up.
METRO Cash & Carry Member of Page 11 User interface and navigation – Personal desktop "Personal data": Personal user data such as first, last and user names but also role and group membership. You can also select Your preferred languages here. "Bookmarks": List of shortcuts for a fast and simple access to selected CMS content pages in the page trees. "Locked content": Overview of all language versions and pages that are in the process of being edited by the user and therefore locked for all other users. Could be used to unlock the pages your user currently is editing. "Scheduled transactions": Overview of all content for which the user has defined a scheduled transaction (publish / delete at some point in the future).
METRO Cash & Carry Member of Page 12 User interface and navigation – Personal desktop ("Publishing workflows": currently not used in the ACWS) "System tasks": Long transactions started by the user that run in the background (e.g. copying of large sub-trees or inheriting authorizations in large sub-trees). notification to the user after completion of the system task. "Temporary settings": For longer processes, (e.g. system tasks) definition of how long a transaction may take at the longest before it is automatically aborted by the CMS. Default setting is 30 minutes. More information about this topic is available …in the manual “CMS Basics" …chapter "Personal desktop" More information…
METRO Cash & Carry Member of Page 13 Pages and page tree
METRO Cash & Carry Member of Page 14 Pages and page tree Content pages are stored in page tree. Pages contain one ore more language versions. Therefore, they work like a folder. Pages could be hidden from viewing (see light folder icon before page). Access to pages (view or edit) is restricted by access rights. A green pencil icon means, an author has write access to a page and its content
METRO Cash & Carry Member of Page 15 Pages and page tree – Action options on pages The Action menu on the right side shows what you can do. After selecting a page, all options are displayed that are available for all language versions of the selected page independently of the language. Options may be hidden if they cannot be applied at the moment OR if the user has not the access rights to use them.
METRO Cash & Carry Member of Page 16 Pages and page tree – Action options on language versions After selecting a language version, all options available for the selected language version are displayed. Again, options not applicable are hidden, e.g. if the selected language version is currently edited by some other author, even if you basically have the access rights to edit it, you do not get the "edit" button. Use Help function for the modular content principle
METRO Cash & Carry Member of Page 17 Pages and page tree – Modular Content Principle Use Help function for the modular content principle
METRO Cash & Carry Member of Page 18 Smart Editor
METRO Cash & Carry Member of Page 19 Smart Editor – User interface 1.Menu and tool icons (with tooltips) 2.Page name 3.Page structure overview 4.Content editing area (objects and elements) 5.Attributes (for selected item)
METRO Cash & Carry Member of Page 20 Content objects and elements
METRO Cash & Carry Member of Page 21 Content objects and elements The available content objects (= page content templates) are: Rowmain content object, contains one or more horizontally arranged boxes Columnused in maginal column to arrange boxes vertical GoogleMapWithMarkersGoogle map with free definable markers for shops, fuel prices etc. Image Gallerygallery with shadowbox zoom effect Sliderbrowse images and link (homepage use only!) ListNumbered List, Download List… Expandable ListList with expandable content Headlinedifferent types (styles) of headlines Form GeneratorFor services, Helpdesk, etc…
METRO Cash & Carry Member of Page 22 Content objects and elements The available content objects (= page content templates) are: Page RatingEverybody could once rate a page Send a pageEverybody could send pages via mail adress Social Media IntegrationIntegration tabes from Facebook, Twitter, etc… StageDynamical table with pics at the home page
METRO Cash & Carry Member of Page 23 Content objects - Row Is used to create the content in most cases. Consist of one or more "Box" elements, which again consist of content elements. Depending on the selected View for a page, one or more boxes could be used. (see “Views” section of all layout possibilities).
METRO Cash & Carry Member of Page 24 Content objects - Column Is used only in margin column on right side Contains one ore more "Box" elements, which are rendered on top of each other (in a horizontal line). Boxes in a Column may consist of all other content elements. Admins may use HTML element within a “Box” to insert flash banners (see Belgium website) or facebook Like-Box (see social media feature examples).
METRO Cash & Carry Member of Page 25 Content objects - GoogleMapWithMarkers Is used to create Google Maps with optional markers (GoogleMapMarkerHTML) and needs these attributes to be set: latitude of map center, Google style coordinates longitude of map center, Google style coordinates altitudezoom level, from 0 (whole world) to 19 (building) heightGoogle map area height in pixel widthGoogle map area width in pixel The sub-element GoogleMapMarkerHTML needs: latitude marker position longitude marker position (HTML) Contentwill be shown in bubble above marker
METRO Cash & Carry Member of Content objects - GoogleMapWithMarkers Hint: If You want to find out the latitude and longitude coordinates, use Google Maps Go to Google Maps and enter target address Go to New! Tab and activate LatLng Tooltip and Marker You could then SHIFT Left-Mouse-click for the Tooltip Right-Mouse to drop a marker
METRO Cash & Carry Member of Page 27 Content objects - Image Gallery Is used to create image galleries which could be browsed. If you click an image, it will be shown in a shadowbox. Several attributes could be assigned to the shadowbox. All parts have to be stored in a data source.
METRO Cash & Carry Member of Content objects - Image Gallery 1) You put all the images (in original size) in a folder in your datasource (e.g. webadmin -> [Content] [Data Sources] "Czech Republic" "Data" "Images" "horeca") 2) You create a page with the "Image Gallery" object, which has a "Lightbox" element in it. 3) You copy& paste the PATH to the images in the datasource in the text-field of the Lightbox (e.g. in this example "/mcc_cz/data/images/horeca" 4) You set the attributes of the "Lightbox" element, e.g. filename yes/no, height & width of the thumbnail images. The Image Gallery then creates a preview automatically with thumbnails of the images. When you click an image, a lightbox opens up in the original size of the image. Example: please see
METRO Cash & Carry Member of Page 29 Content objects – Slider Is used to create a slider-like browser element. Has paging, if more than five elements are displayed. The interconnection between all parts and the links are described in one CSV file. All parts (CSV and images) have to be stored in a data source. Images should be in an own subfolder in the data source.
METRO Cash & Carry Member of Content objects – Slider The Slider CSV is structured as follows: Pos. 1: Tab name (= Slider main nav) Pos. 2: Category name (= slider 2nd nav) Pos. 3: thumbnail image Pos. 4: large image Pos. 5: target URL for the link Hint: If you want to have an image show up in a category "all", it means you have to make sure all images have to be twice in the CSV, one time with category "all" and one time with their real category.
METRO Cash & Carry Member of Page 31 Content objects – List Is used to create a list element in a various number of levels. 1 bullet list: Unnumbered bullet lists are available in two hierarchy levels. Text length is not limited (unless stated otherwise in the module description). 2 numbered list: Numbered lists are available in two hierarchy levels. Text length is not limited (unless stated otherwise in the module description). 3 link list: Each link in a link list must have an iconic arrow. Link length should not exceed 1 line. Expandable List
METRO Cash & Carry Member of Page 32 Content objects – Expandable List Is used to create a Expandable list element in just two levels. This module is used to display large amount of text in a clear layout. It avoids extraordinary long pages by using expandable elements. Most common usage is on the FAQ page where many of these modules are used. The module can be used on full width pages.
METRO Cash & Carry Member of Page 33 Content objects – Header Is used to create a header element in a row or column. 4 different styles are available. You can use what header you like in a different cue
METRO Cash & Carry Member of Page 34 Content objects – Form (Form Generator) ACWS gives you the opportunity to create your own forms using content elements. As you are used to edit pages with the Smart Editor you can simply prepare pages with forms as you need them. The forms generate an which is then send to one or more recipients. The Form Generator is therefore a flexibel solution to create several kinds of contact forms. You could create several forms within the same page tree (= same website), but there could be only one form per page. That means, different contact forms for e.g. different assortments or customer groups AND an overall generic contact form at a centralized place in the webiste are possible.
METRO Cash & Carry Member of Page rating Rating has to be assigned as an Community Admin to a countries page tree. Authors could then individually select Page rating as a page attribute within the page tree. Page rating will be shown on the bottom right corner of the content area. It has been implemented as a „star“ rating. Currently, it is a level from 1 to 5 „stars“. An average of all votes will be calculated. You could decide if rating will be available for anonymous or for logged-in users.
METRO Cash & Carry Member of Page 36 Views
METRO Cash & Carry Member of Page 37 Views Views are used to assign layout structures to a page. A View is set in the page tree view with option "Attributes".
METRO Cash & Carry Member of Page 38 Views The views used in ACWS for page layouts are: mcc-cw-home for country homepage only mcc-cw-content for 3-column content pages with navigation and marginal column mcc-cw-contentnomarginal for 4-column content pages with navigation only mcc-cw-contentnonavnomarginal for 5-column content pages Additional special views are: mcc-cw-askquestion special survey form mcc-cw-ordervoucher special ordering form …
METRO Cash & Carry Member of Page 39 Views - mcc-cw-home Use-case: Used for the entry page (= homepage) of a page tree only. Might have a different logo and logo height in page header. (see page attributes) Might have call-to-action boxes in page header. (uses slot “header”). 1 box = 5 columns width 2 boxes = 2.5 columns width 5 boxes = 1 column width
METRO Cash & Carry Member of Page 40 Views - mcc-cw-content Use-case: Used for standard content pages with sub-navigation on the left side and a margin column on the right side. 1 box = 3 columns width 2 boxes = 1.5 columns width 3 boxes = 1 column width
METRO Cash & Carry Member of Page 41 Views - mcc-cw-contentnomarginal Use-case: Used for wide content pages with sub-navigation on the left side. 1 box = 4 columns width 2 boxes = 2 columns width 4 boxes = 1 column width
METRO Cash & Carry Member of Page 42 Views - mcc-cw-contentnonavnomarginal Use-case: Used for extra wide content pages, e.g. with large table structures or large promotional images or flash content. 1 box = 4 columns width 2 boxes = 2 columns width 4 boxes = 1 column width
METRO Cash & Carry Member of Page 43 Slots
METRO Cash & Carry Member of Page 44 Slots Slots are used to define where a) content is to be rendered (e.g. object “Column” in slot “Marginal”) b) information is used (e.g. object “Meta Tag” in slot “headerTag”) Slots could be applied on a CMS object level (e.g. “Row”, “Column”, “Title”…). The default value is the slot “content” (if NO slot is assigned to an object).
METRO Cash & Carry Member of Page 45 Slots Which slots are available is dependant on the view selected for a page. These slots exist: headeron object "Row", rendered on top of header logo (e.g. for call-to-action boxes) marginon object "Column" only, rendered in right margin column bottomon object "Row“ (e.g. for the “branch logos“) Footer_logoobject “Row”, contains only one “Box” with one logo “Image”
METRO Cash & Carry Member of Page 46 Special pages (Textual IDs)
METRO Cash & Carry Member of Page 47 Special pages (Textual IDs) Some pages play a special role in the system. Therefore, they are marked using a system-wide unique access key, the “Textual ID”: (e.g. the homepage with master.textual_id.root = _ACW_HOME_ ) Depending on the country, a shortcut has to be added to the Textual ID (e.g. homepage for Belgium would have _ACW_HOME_BE_ ) Some special pages should not be visible in the normal navigation. Therefore, it is a good idea to hide them from view (page "Attribute" "hidden" activated). It is also a good idea to place all the special pages in a special area (e.g. a subtree with a hidden parent page).
METRO Cash & Carry Member of Special pages (Textual IDs) – naming conventions Textual IDs must be unique to work, so a template for the naming is: _ _ _ _ _ E.g for the newsletter registration form in Belgium in dutch language, it should look like this: BE_Makro_NL_newsletter_registration
METRO Cash & Carry Member of Page 49 Special pages (Textual IDs) – special slots in layout In some cases, a Textual ID is used to assign a page content that will be re-used on many pages automatically. Therefore, create a special page in the special pages area, assign one of the Textual IDs below and publish: default.content.MARGINAL= _ACW_DEFAULT_MARGINAL_RO_ default.content.SEO= _ACW_DEFAULT_SEO_RO_ default.content.BOTTOM= _ACW_DEFAULT_BOTTOM_RO_ The content of the special page will then be shown at one of the positions shown in the screenshot.
METRO Cash & Carry Member of Page 50 Special pages (Textual IDs) – header and footer navigation Textual IDs are also used to link the small print to a content page. Create this pages and assign it one of the following Textual IDs: -Header additional navigation (small print) _ACW_NEWSLETTER_ _ACW_HELP_ -Footer additional navigation (small print) _ACW_PRIVACY_ _ACW_LEGAL_ _ACW_TERMS_OF_USE_ _ACW_COPYRIGHT_
METRO Cash & Carry Member of Page 51 Data sources
METRO Cash & Carry Member of Data sources – What it is In ACWS project, all binary files are stored in a Data Source. Their names and access rights are managed by the Community Admins of the countries. They can be filled with content by the authors, by external agencies or from other systems. Content from data sources could be : -images (data source as “image pool”) -documents from the Office suite -PDF files -ZIP archives -Flash or other multimedia files -…
METRO Cash & Carry Member of Data sources – How it is used Documents from internal and external data sources could be mixed on the same page. A document from a data source could be used on several different pages. Therefore it could be centrally replaced. Data sources should have a hierarchic „folder“ structure according to a countries needs!
METRO Cash & Carry Member of Data sources – How it is used Files in data sources can be linked to from within the Smart Editor.
METRO Cash & Carry Member of Page 55 Data sources – Mass file upload (using WEBDAV) To get access to a data source using WEBDAV, follow these steps: 1.Start Windows Explorer (from Start menu or [Win]+ [E] ) 2.Enter access URL in address line, e.g. 3.Choose community and data source 4.Navigate to desired folder 5.Click on “Explorer” menu item to start Windows Explorer 6.Login with your CMS user and password 7.Copy & paste or drag & drop files and folders into target WEBDAV folder
METRO Cash & Carry Member of Header additional navigation How to remove links from the header navigation: Property Editor „mcc_customerweb_layout“ „common“ KEY: common.head.flags DEFAULT VALUE: loginLink,newsletterLink,helpLink,sitemapLink,languageBox,searchBox by removing a link, e.g. „loginLink“, the option is no longer shown in layout
METRO Cash & Carry Member of Page 57 Time-based publishing
METRO Cash & Carry Member of Time-based publishing There are several options to do a time-based publishing: From the „publish draft version“ menu when going to publish a page From the attributes of a page „Restrict availabilty“ From the attributes for each ROW object individually
METRO Cash & Carry Member of Time-based publishing – Publish draft version menu Open „advanced Options“ Check „Publish At“ Select a date and a time ATTENTION! The time used is always the SERVER TIME, meaning Central European Time (CEST)
METRO Cash & Carry Member of Time-based publishing – Restrict availability of a page Edit „Attributes“ of a page Go to tab „Availability“ Choose „Restrict availability“ Set requiered date and time for visibility (from – to) ATTENTION! The time used is the SERVER TIME, meaning Central European Time (CEST)
METRO Cash & Carry Member of Time-based publishing – Publish draft version menu Open page in Smart Editor Select „ROW“ object with mouse Select „Attributes“ Select „Common“ tab Check „Hide“ checkbox Set date and time for „Visible from“ and „Visible to“ ATTENTION! The time used is always the SERVER TIME, meaning Central European Time (CEST)
METRO Cash & Carry Member of Page 62 SEO Tasks
METRO Cash & Carry Member of Page 63 Content objects - Meta Tags Is used for search engine optimization (SEO) of a page. Creates the meta tags "keyword" and "description" in HTML source code. Can be used on the same page together with other content objects like “Row”. A slot “headerTags” must be assigned to the “Meta Tags” object
METRO Cash & Carry Member of Page 64 Content objects – Title Is used for search engine optimization (SEO) of page. Creates an alternative title tag in HTML source code. Will also show up on the browser window title bar.
METRO Cash & Carry Member of Page 65 Additional information
METRO Cash & Carry Member of Additional information - documentation All ACWS documentation can be found on the eBusiness suite/MCC collaboration: SitePages/Homepage.aspx (e.g. Styleguide) The CMS features are documented in a Wiki: Wiki/Index_CMS.aspx (e.g. product manuals and ACWS features) The most up-to-date version of this presentation can be found at: eBusiness/MCC_ACWS_Training_CMS.ppt The UX documentation could be found at:
METRO Cash & Carry Member of Additional information – Support A) During project phase / before go live(via ): Author Community Admin METRO SYSTEMS BPE ( DEV ) Supportmail: METRO SYSTEMS DE - ACWS DEPLOYMENT B) After going live (via HPSM ticket): Author 1st lvl support in country 2nd lvl support 3rd lvl: DEFECT = DEV (IM person?)(MSYS) REQ = BA (CMS) (Community Admin?) INQ = BPE