TYP – Web site
A Drupal 7 based web site.
Main functions:
 Corporate web site
 Products catalog
Support Hebrew and English UI.
Work on all major browser.
Optimize for SEO.
Drupal Modules
Install Drupal 7.14 and install/enable the following modules.
 Views
 Ctool
 Panels
 Wysiwyg/CKEditor
Enable for document body, enable all buttons.
Make sure that the default Input Format is Full HTML
 References
 Admin menu
 Enable internationalization/'Content translation', if necessary install/enable the required
modules described here: http://drupal.org/project/i18n
 Display Suite
 Views Slideshow
Structure
1. Home page
2. About
3. Products
4. Contact
5. Support
6. What's new
Navigation using 2 vertical bars: one for products categories and one for site pages.
Footer with Site map and Terms
Theme
The first task is turning the psd version of the UI design into a drupal theme.
Note: any item in the field that is not planned to be change by the admin can be hard coded, e.g. header
and footer.
In the header there is a navigation menu (use drupal menus) with the following links: about, products,
support, whats new, contact.
Home page
The home page will be implemented using panels (http://drupal.org/project/panels ) that includes
slide show
Slide show of content implemented by drupal node with the following fields
1. big image
2. 5 small images
3. text overlay on the buttom of the big image
4. 1 url's fields – big image should link to the related url
The structure of the node display is illustrated here:
The slide show will be implemented with Drupal Views Slideshow:
(http://drupal.org/project/views_slideshow);
NOTE: the entire node content should be replaced with each slide.
news
Implemented as an inner panel in the home page panel, with an image and auto scrolling text using
html marquee code (http://www.quackit.com/html/codes/html_marquee_code.cfm )
The content of the scrolling text will be produced by a view of nodes of type News that are published
with the following fields:
1. Title
2. Date
3. Content
4. Order – a hidden field that is used by the Admin to set the order of the news display (ascending
order)
About
Panel with 3 parts
1. 2 Text area that can be edited by the Admin.
2. 1 Image
Products catalog
The site has 4 categories, each contains a group of products.
The product page shows category title, products list, and chosen product data as shown in the screen
design.
Note: there is no separate page for categories view – when clicking on a category it will open a product
page with a predefine product (might be a dummy product that actuality shows the category details)
All display of product in the site should be according to the UI, i.e. there is no difference between
product and category display.
implementation
I suggest using the following method for the implementation, taken from
http://dev.nodeone.se/en/learn-page-manager-part-5-views-content-panes-basics which is a series of
screen cast that explain Drupal page manager. One might need to watch the previous series in order to
follow this one.
But any other method that would give the expected result can be used.
Use the following modules:
 ctools
◦
Views content panes
◦
Page manager
 views
 panels
 references
◦
Node Reference
create 2 new content types - :
 Category
◦ Title
◦ Image for the title (i.e. the title would be display has an image instead of text since it has a
special font)
 Product
◦ Title
◦ Body
◦ Image (prod_img)
◦ Node reference → category
◦ Support text (optional).
closed for comments.
Note that product doesn't have a special field for price, product code, etc. since all the data will is
added in the body field with a rich text editor.
create view for 'product in category'
add FILTER CRITERIA for products
add field prod image
create a 'CONTEXTUAL FILTERS' for Content: Category,
set 'Specify validation criteria' to validator = content, Content types = Category
click the Argument input:Edit and set 'from context' and Required context = 'Content ID'
click add and choose 'content pane'
add field nid, rearrange so that nid is before title.
Click on title, uncheck 'Link this field to the original piece of content',
click REWRITE RESULTS check 'Output this field as a link' products/!1/[nid]
Save.
Don't limit the number of result, we want to show all products and let the user scroll through them with
a slider.
The current chosen product should have special Title color, use css/view theme (views-view-fields—
cateories.tpl.php) to add a special class to the current chosen product, with the following code:
<?php
if ($fields["nid"]->raw == arg(1)) {
$class = "chosen";
} else {
$class = "unchosen";
}
?>
<div class="<?php echo $class?>">
Create a new Page display
in structure - > pages → Add custom page
then edit, » Add a new variant , add title Product in category, variant type = panel,
click on Context,
Add path /products/%nid1/%nid2
Continue
Change both arguments to node ID, name them nid1, nid2 continue
choose 'columns 2', 'Two column stacked' , click continue until the last screen.
Add Content to the right part: click 'node' and choose
Field: Category (field_cat_img)
Add Content to the right part: click 'View panes' and choose
View: Products in Category, for nid1
Add Content to the left part: click 'node' and choose 'node body' nid2
click create variant. Click save
This process should make the path /products/%nid1/%nid2 display the list of products in category with %nid2 on
the left and the product data on the right.
So that the link of the products in the list are in this format as well.
Add the necessary CSS and themes
Add the necessary CSS and themes to make the product page loos like the UI design.
In order to achieve only inner table border use the following css:
table {
border-collapse: collapse;
}
table td, table th {
border: 1px solid black;
}
table tr:first-child th {
border-top: 0;
}
table tr:last-child td {
border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
border-right: 0;
}
in order to achieve right scroll bar one can use (although might be possible achieve with css direction)
http://jscrollpane.kelvinluck.com/
The 4 category links at the header should contain a hard coded link to a product
Contact page
Use Drupal webform to create the contact page according to the UI design.
Display a 'thank you' after submit with the text “<b>We receive your request!<b> <br> We will contact
you ASAP<br>Thanks. ”
The 'send' button has 3 states default/hover/click, each state is represent with a different image that
need to change according to the button state (use css/js).
Search
Use Default Drupal search, don't show the 'Advance' options.
Limit the search only for products.
The search result should show the product teaser and when clicking on the search result it should look
like the product/category display.
Support page
The support page is made of a panel very much like the product/category display, but with an extra
field to show the 'support' field content bellow the body field.
When clicking on the support link it should display a view on left (just like in product/category) but the
products listed in this view are only product that has the optional support field.
Whats new
Same like 'About' page.