Magento Catalog - GetACoder
Magento Catalog - GetACoder
Magento Catalog - GetACoder
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
<strong>Magento</strong> <strong>Catalog</strong><br />
The objective of this job is to set up a store catalog infrastructure (a store without a basket /<br />
payment management for the time being) using <strong>Magento</strong>. Work can be divided into two main tasks:<br />
• setting catalog functionality (templates, menus,...) ;<br />
• implementing design based on the supplied .psd (Photoshop) files which need to be<br />
translated to proper template/css.<br />
Note: Although there is not going to be a basket/payment right now, it needs to be easily<br />
implemented later.<br />
General<br />
• All work should be implemented on our testing (not public) site.<br />
• Used environment is Windows 2003 IIS 6 / PHP 5.26 / MYSQL 5.2.<br />
• Basic <strong>Magento</strong> 1.2.1 is already installed.<br />
• Should work on Firefox 2.0+, IE 6+, Opera 9.<br />
• All work should be properly documented.<br />
• Appearance of items on all pages is controlled by a css.<br />
<strong>Catalog</strong> hierarchy<br />
Products are sorted in the following hierarchy:<br />
• <strong>Catalog</strong> sections (Level 1),<br />
• Section Categories (Level 2),<br />
• Subcategories (Level 3),<br />
• Products (Level 4).<br />
Top horizontal menu<br />
Top horizontal menu is a two level menu. The top row contains items that redirect to other<br />
subdomain (for example Home redirects to the 'main' site – www.sitename.com; <strong>Magento</strong> catalog is<br />
in fact on a separate subdomain - catalog.sitename.com). Subdomain infrastructure/content is not<br />
part of this job.<br />
Last entry in the top row is <strong>Catalog</strong> (see Picture 1a), and it’s automatically selected (highlighted)<br />
when this <strong>Magento</strong> site is shown.<br />
When <strong>Catalog</strong> is selected, the bottom row of the menu is also displayed. It contains level 1 entries<br />
(sections). Each section item has a two-level dropdown menu with categories > subcategories (see<br />
Picture 3a).<br />
Both row menu items can have the following states:<br />
• normal state;<br />
• normal mouse over;<br />
• active (currently opened);<br />
• active mouse over;
State appearance should be controlled by a css style. In totall 8 css selectors would be deployed (4<br />
normal/active states x 2 rows /top-bottom/).<br />
Left vertical menu<br />
Left menu appears only on levels 2 - 4. Level 1 has no vertical menu.<br />
If a section is selected (from the bottom row in the top horizontal menu), it shows all categories<br />
(level 1 items) belonging to the selected section. Categories in the left menu are CLOSED (but marked<br />
with a + icon for categories containing subcategories). See Picture 2.<br />
If a category is selected (from the left vertical menu or top dropdown menu), left menu shows<br />
subcategories only for the clicked (expanded) category (i.e. it actually displays only subcategories<br />
belonging to a selected category). See Picture 3.<br />
If a subcategory is selected (from the left vertical menu or top dropdown menu), left menu shows<br />
products only for the clicked (expanded) subcategory (i.e. it actually displays only products belonging<br />
to a selected subcategory). See Picture 5.<br />
Each menu level can have the following states:<br />
• normal state;<br />
• normal mouse over;<br />
• active (currently opened);<br />
• active mouse over;<br />
Expandable menu items (categories/subcategories) should have a plus ("expand") and minus<br />
("collapse") sign, implemented as a gif.<br />
Manu should feature an option Expand All/Collapse All.<br />
State appearance should be controlled by a css style. In totall 12 css selectors would be deployed (4<br />
normal/active states x 3 levels /category-subcategory-product/).<br />
Please read description for each level for more details.<br />
Pathway<br />
Pathway (breadcrumb) is always displayed at the top of the main content (just below the second row<br />
of the top menu).<br />
Search box<br />
Search box is always displayed in the top header area. The position can be right to the main menu or<br />
above it, so we need to be able to change the placement easily.<br />
Right column<br />
In the right column, a promotional or info data is displayed (images, text, active links, ... ).
<strong>Catalog</strong> selected<br />
Level 1: <strong>Catalog</strong> is selected (which is always when catalog pages are visible) from the top horizontal<br />
menu, menu's bottom row shows sections (level 1 items).<br />
Page shows pictures and teasers for all available sections. Section pictures with teasers can be<br />
displayed in 3 (Picture 1a) or 4 (Picture 1b) per row, which must be easily configurable.<br />
Left menu is not visible for this level. In fact, some active promotions (promotional images) can be<br />
displayed in the left column.<br />
Home Contact Sitemap<br />
| MenuItem1 | MenuItem2 | MenuItem3 | MenuItem4 | MenuItem4 | <strong>Catalog</strong> |<br />
SECTION 1 SECTION 2 SECTION 3 SECTION 4<br />
go<br />
Pathway: <strong>Catalog</strong> ><br />
Promotional image<br />
Promotion<br />
Click here for more info<br />
Promotion<br />
Click here for more info<br />
Section 1<br />
Image<br />
Section 2<br />
Image<br />
Section 3<br />
Image<br />
And Teaser Text<br />
And teaser test ................................<br />
.............................................................<br />
.....................................................<br />
And teaser test ................................<br />
............................................................<br />
......................................................<br />
And teaser test ................................<br />
............................................................<br />
......................................................<br />
Section 4<br />
Image<br />
And Teaser Text<br />
And teaser test ................................<br />
............................................................<br />
......................................................<br />
footer info<br />
additional links and<br />
footer info<br />
footer info<br />
additional links and<br />
footer info<br />
picture 1 a . PAGE - SECTIONS (level 1)<br />
Version displaying 3 sections in a row.
Home Contact Sitemap<br />
| MenuItem1 | MenuItem2 | MenuItem3 | MenuItem4 | MenuItem4 | <strong>Catalog</strong> |<br />
SECTION 1 SECTION 2 SECTION 3 SECTION 4<br />
go<br />
Pathway: <strong>Catalog</strong> ><br />
Promo/Add<br />
Promotional image<br />
Info/Link<br />
Promotion<br />
Click here for more info<br />
Promotion<br />
Click here for more info<br />
Section 1<br />
Image<br />
Section 2<br />
Image<br />
Section 3<br />
Image<br />
Section 4<br />
Image<br />
Teaser test<br />
..............................................<br />
..............................................<br />
..............................................<br />
..............................................<br />
..............................................<br />
Teaser test<br />
.............................................<br />
.............................................<br />
.............................................<br />
.............................................<br />
.............................................<br />
Teaser test<br />
.............................................<br />
.............................................<br />
.............................................<br />
.............................................<br />
.............................................<br />
Teaser test<br />
.............................................<br />
.............................................<br />
.............................................<br />
.............................................<br />
.............................................<br />
footer info<br />
additional links and<br />
footer info<br />
footer info<br />
additional links and<br />
footer info<br />
Version displaying 4 sections in a row.<br />
picture 1 b . PAGE - SECTIONS (level 1)
Section selected<br />
Level 2: one of sections is clicked/selected from a <strong>Catalog</strong>’s bottom row.<br />
Page shows ALL products for this ENTIRE section (i.e. all products from all categories/subcategories<br />
belonging to the selected section). The displayed number of thumbs per row and rows per page must<br />
be easily configurable. Customer can control how to view the items via a page navigator. See picture<br />
below. (reference site http://www.magentoapparel.com/shoes?mode=grid&order=name&dir=asc&limit=9#)<br />
A promotional image with active links is displayed above the product thumbs - Picture 2a. This<br />
'promo image' can be turned on/off. When turned off, thumbnails with page navigation are moved<br />
to the top of the content window Picture 2b.<br />
Home Contact Sitemap<br />
go<br />
Pathway: <strong>Catalog</strong> > Section 1 > Category 1 ><br />
LEFT MENU<br />
CATEGORIES<br />
CATEGORY 1<br />
CATEGORY 2<br />
CATEGORY 3<br />
CATEGORY 4<br />
Section promo image<br />
Promo/Add<br />
Info/Link<br />
Items 1 to 12 of 15 total Page: 1 2 3 Show 12 per page<br />
Product 4<br />
Image<br />
Product 5<br />
Image<br />
Product 6<br />
Image<br />
Product 7<br />
Image<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00 SPECIAL<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00 SPECIAL<br />
Category > Subcategory<br />
Product 4<br />
Image<br />
Product 5<br />
Image<br />
Product 6<br />
Image<br />
Product 7<br />
Image<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00 SPECIAL<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
footer info<br />
additional links and<br />
footer info<br />
footer info<br />
additional links and<br />
footer info<br />
picture 2 a. PAGE - CATEGORIES (level 2)<br />
Categories are displayed in the left menu, but in the main window thumbnails of products are displa yed (in random or assigned order)
Home Contact Sitemap<br />
go<br />
Pathway: <strong>Catalog</strong> > Section 1 > Category 1 ><br />
Category 1<br />
Category 2<br />
Category 3<br />
Category 4<br />
Subcategory A<br />
Subcategory B<br />
Subcategory C<br />
Subcategory D<br />
LEFT MENU<br />
CATEGORIES<br />
CATEGORY 1<br />
CATEGORY 2<br />
CATEGORY 3<br />
CATEGORY 4<br />
Product 1<br />
Image<br />
Product 2<br />
Image<br />
Product 3<br />
Image<br />
Product 4<br />
Image<br />
Promo/Add<br />
Info/Link<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Product 4<br />
Image<br />
Product 5<br />
Image<br />
Product 6<br />
Image<br />
Product 7<br />
Image<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00 SPECIAL<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00 SPECIAL<br />
Category > Subcategory<br />
Product 4<br />
Image<br />
Product 5<br />
Image<br />
Product 6<br />
Image<br />
Product 7<br />
Image<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00 SPECIAL<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
footer info<br />
additional links and<br />
footer info<br />
footer info<br />
additional links and<br />
footer info<br />
picture 2b . PAGE - CATEGORIES (level 2)<br />
Categories are displayed in the left menu, but in the main window thumbnails of products are displa yed (in random or assigned order)<br />
The 'module' for promo image must have its own configurable design template and it can be<br />
different for every category (so the look and style can vary from category to category). See example<br />
reference sites:<br />
http://www.dsw.com/dsw_shoes/catalog/landing_index.jsp?catName=WOMEN<br />
http://www.dsw.com/dsw_shoes/luxury/landing_index.jsp?catName=LUXURY<br />
http://www.dsw.com/dsw_shoes/catalog/landing_index.jsp?catName=STYLE<br />
http://www.dellamoda.com/eyewear-collections.html<br />
Displayed is page navigation - moving through pages by number or 'NEXT/PREV' or Show All (above<br />
and below the thumbs). See picture below.<br />
When ShowAll is selected, ALL product thumbs of the selected section are loaded within the same<br />
page.<br />
Displayed items for each product:<br />
• picture;<br />
• title;
• price + extra info ('SALE') if available;<br />
• category > subcategory (as hyperlink).<br />
Category selected<br />
Level 3: One of categories is clicked/selected in the left vertical menu or from top menu’s dropdown<br />
submenu.<br />
Page shows promo image and ALL products for this category (i.e. all products from all subcategories<br />
belonging to the selected category - displayed in assigned order). See Picture 3a. If there is no promo<br />
image available (or if turned off), thumbs of products with page navigation are displayed only. See<br />
Picture 3b. The displayed number of thumbs per row and rows per page must be easily configurable.<br />
Home Contact Sitemap<br />
go<br />
View/Shop By<br />
Mens<br />
Womens<br />
LEFT MENU<br />
CATEGORIES<br />
CATEGORY 1<br />
Subcategory A<br />
Subcategory B<br />
Subcategory C<br />
Subcategory D<br />
CATEGORY 2<br />
CATEGORY 3<br />
CATEGORY 4<br />
Pathway: <strong>Catalog</strong> > Section 1 > Category 1 ><br />
Category 1<br />
Category 2<br />
Category 3<br />
Category 4<br />
Category promo image<br />
Subcategory A<br />
Subcategory B<br />
Subcategory C<br />
Subcategory D<br />
Promo/Add<br />
Info/Link<br />
Product 4<br />
Image<br />
Product 5<br />
Image<br />
Product 6<br />
Image<br />
Product 7<br />
Image<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00 SPECIAL<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00 SPECIAL<br />
Category > Subcategory<br />
Product 4<br />
Image<br />
Product 5<br />
Image<br />
Product 6<br />
Image<br />
Product 7<br />
Image<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00 SPECIAL<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
footer info<br />
additional links and<br />
footer info<br />
footer info<br />
additional links and<br />
footer info<br />
picture 3 a. PAGE - CATEGORY>SUBCATEGORY (level 3)<br />
Selected category in the left menu with expanded subcategories
Home Contact Sitemap<br />
go<br />
Pathway: <strong>Catalog</strong> > Section 1 > Category 1 ><br />
View/Shop By<br />
Mens<br />
Womens<br />
LEFT MENU<br />
CATEGORIES<br />
CATEGORY 1<br />
Subcategory A<br />
Subcategory B<br />
Subcategory C<br />
Subcategory D<br />
CATEGORY 2<br />
CATEGORY 3<br />
CATEGORY 4<br />
Product 1<br />
Image<br />
Product 2<br />
Image<br />
Product 3<br />
Image<br />
Product 4<br />
Image<br />
Promo/Add<br />
Info/Link<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Product 4<br />
Image<br />
Product 5<br />
Image<br />
Product 6<br />
Image<br />
Product 7<br />
Image<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00 SPECIAL<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00 SPECIAL<br />
Category > Subcategory<br />
Product 4<br />
Image<br />
Product 5<br />
Image<br />
Product 6<br />
Image<br />
Product 7<br />
Image<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00 SPECIAL<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
footer info<br />
additional links and<br />
footer info<br />
footer info<br />
additional links and<br />
footer info<br />
picture 3b . PAGE - CATEGORY>SUBCATEGORY (level 3)<br />
Selected category in the left menu with expanded subcategories
Subategory selected<br />
Level 4: one of subcategories is clicked/selected from the left vertical menu or top menu’s dropdown<br />
submenu.<br />
Page shows ALL products for this subcategory (i.e. all products belonging to the selected subcategory<br />
- see Picture 4). The displayed number of thumbs per row and rows per page must be easily<br />
configurable.<br />
Displayed is page navigation above and below thumbnails - moving through pages by number or<br />
'NEXT/PREV' or Show All. See picture below.<br />
When ShowAll is selected, ALL product thumbs of the selected section are loaded within the same<br />
page.<br />
Displayed items for each product:<br />
• picture;<br />
• title;<br />
• price + extra info ('SALE') if available;<br />
• category > subcategory (as hyperlink).
Home Contact Sitemap<br />
go<br />
View/Shop By<br />
Mens<br />
Womens<br />
Pathway: <strong>Catalog</strong> > Category 1 > Subcategory C ><br />
LEFT MENU<br />
CATEGORIES<br />
CATEGORY 1<br />
Subcategory A<br />
Subcategory B<br />
Subcategory C<br />
Product 1<br />
Product 2<br />
Product 3<br />
Product 4<br />
Product 5<br />
Product 6<br />
Product 7<br />
Product 8<br />
Subcategory D<br />
CATEGORY 2<br />
CATEGORY 3<br />
CATEGORY 4<br />
Product 1<br />
Image<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Product 2<br />
Image<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Product 3<br />
Image<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Product 4<br />
Image<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Promo/Add<br />
Info/Link<br />
Product 4<br />
Image<br />
Product 5<br />
Image<br />
Product 6<br />
Image<br />
Product 7<br />
Image<br />
Product Title<br />
Some additional info<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00 SPECIAL<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00 SPECIAL<br />
Category > Subcategory<br />
Product 4<br />
Image<br />
Product 5<br />
Image<br />
Product 6<br />
Image<br />
Product 7<br />
Image<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00 SPECIAL<br />
Category > Subcategory<br />
Product Title<br />
Some additional info<br />
Price $ 00.00<br />
Category > Subcategory<br />
footer info<br />
additional links and<br />
footer info<br />
footer info<br />
additional links and<br />
footer info<br />
picture 4. PAGE - SUBCATEGORY > PRODUCTS (level 4)
The two modules ('Related products' and 'Recently Viewed’ items) are displayed at the same position<br />
in a tab-like manner (reference http://www.magento-apparel.com/ink-eater-krylon-bombeardestroyed-tee.html).<br />
Which tab/module is displayed at the first or second tab, must be easily<br />
configurable.<br />
Product lightbox<br />
Level 5A - click on the main image of the product displays a larger view of the product as a light-box<br />
(see picture 6). By default, the clicked image is shown in full size with option of viewing additional<br />
views in full size as well (by clicking on the thumbs beside the main picture in a light-box).
Change language