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:

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 ( ) 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:

(

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 ( )
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 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)

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.