Designer integration guide

1 Choose a template

I chose a template with this files :

index.html
details.html
images/
js/
style.css

You can download this template here

2 Copy template files in my application

2.1 Convert HTML files to HAML

What is HAML?

Do this to convert your HTML files


$ html2haml index.html index.haml
$ html2haml details.html details.haml

2.2 Copy pictures files

All pictures files in a rails application are into the folder public/images You need to copy all pictures of the template into public/images/front_images


$ cp -r images/ my_application/public/images/front_images

2.3 Copy javascripts files

All javascripts files in a rails application are into the folder public/javascripts


$ cp -r js/ my_application/public/javascripts

2.4 Copy stylesheets file


$ cp style.css my_application/public/stylesheets/style.css

3 Customize the application

3.1 Customizing the layout

Rails has the concept of layouts, which are containers for views. When Rails renders a view to the browser, it does so by putting the view’s HTML into a layout’s HTML.

Create a file “application.html.haml” into the folder app/views/layouts


$ EDIT app/views/layouts/application.html.haml

This file contain all the common elements in your website like the header,menu,footer …

Add this into app/views/layouts/application.html.haml


%html{ 'xml:lang' => I18n.locale, :lang => I18n.locale, :xmlns => 'http://www.w3.org/1999/xhtml' }
  %head
    %meta{ :content => 'text/html; charset=utf-8', 'http-equiv' => 'Content-Type' }
	%title= yield(:title) || "Forgeos commerce"
	%meta{ :name => 'Description', :content => yield(:description) }
	%meta{ :name => 'keywords', :content => yield(:keywords) }
	= stylesheet_link_tag 'style'
	= javascript_include_tag 'js/boxOver'
	%meta
  %body

We need to add the header in the layout

Add this into app/views/layouts/application.html.haml into the block %body


#main_container
  #header
    .top_right
      .big_banner
        %a{ :href => "#" }
          %img{ :title => "", :src => "/images/front_images/banner728.jpg", :border => "0", :alt => "" }
    #logo
      %a{ :href => "index.html" }
        %img{ :title => "", :src => "/images/front_images/logo.png", :border => "0", :height => "85", :alt => "", :width => "182" }
  #main_content

Result :

We need to add the footer in the layout

Add this into app/views/layouts/application.html.haml after the block #main_content


.footer
  .left_footer
    %img{ :title => "", :src => "/images/front_images/footer_logo.png", :height => "42", :alt => "", :width => "89" }
  .center_footer
    Template name. All Rights Reserved 2008
    %br
    %a{ :href => "http://csscreme.com/freecsstemplates/", :title => "free css templates" }
      %img{ :src => "/images/front_images/csscreme.jpg", :border => "0", :alt => "free css templates" }
    %br
    %img{ :title => "", :src => "/images/front_images/payment.gif", :alt => "" }
  .right_footer
    %a{ :href => "index.html" }
      home
    %a{ :href => "details.html" }
      about

Result :

To create the menu add this into the block #main_content


#menu_tab
  %ul.menu
    -@sections.each do |section|
      %li= link_to section.title, section.url, :class => 'nav'
      %li.divider
=yield

Result :

That’s all for the layout. The final app/views/layouts/application.html.haml is this :


%html{ 'xml:lang' => I18n.locale, :lang => I18n.locale, :xmlns => 'http://www.w3.org/1999/xhtml' }
  %head
    %meta{ :content => 'text/html; charset=utf-8', 'http-equiv' => 'Content-Type' }
    %title= yield(:title) || "Forgeos commerce"
    %meta{ :name => 'Description', :content => yield(:description) }
    %meta{ :name => 'keywords', :content => yield(:keywords) }
    = stylesheet_link_tag 'style'
    = javascript_include_tag 'js/boxOver'
  %body
    #main_container
      #header
        .top_right
          .big_banner
            %a{ :href => "#" }
              %img{ :title => "", :src => "/images/front_images/banner728.jpg", :border => "0", :alt => "" }
        #logo
          %a{ :href => "index.html" }
            %img{ :title => "", :src => "/images/front_images/logo.png", :border => "0", :height => "85", :alt => "", :width => "182" }
      #main_content
        #menu_tab
          %ul.menu
            -@sections.each do |section|
              %li= link_to section.title, section.url, :class => 'nav'
              %li.divider
        =yield

      .footer
        .left_footer
          %img{ :title => "", :src => "/images/front_images/footer_logo.png", :height => "42", :alt => "", :width => "89" }
        .center_footer
          Template name. All Rights Reserved 2008
          %br
          %a{ :href => "http://csscreme.com/freecsstemplates/", :title => "free css templates" }
            %img{ :src => "/images/front_images/csscreme.jpg", :border => "0", :alt => "free css templates" }
          %br
          %img{ :title => "", :src => "/images/front_images/payment.gif", :alt => "" }
        .right_footer
          %a{ :href => "index.html" }
            home
          %a{ :href => "details.html" }
            about
          %a{ :href => "details.html" }
            sitemap
          %a{ :href => "details.html" }
            rss
          %a{ :href => "contact.html" }
            contact us

3.2 Customizing the catalog page

Create a folder catalog into app/views/


$ mkdir app/views/catalog

Create a file “index.html.haml” into the folder app/views/catalog


$ EDIT app/views/catalog/index.html.haml

Add this into app/views/catalog/index.html.haml to create the product category list


.crumb_navigation
  Navigation:
  %span.current
    Home
.left_content
  .title_box
    Categories
  %ul.left_menu
    - ProductCategory.all.each do |category|
      %li{:class => category.id%2 == 0 ? 'even' : 'odd'}= link_to category.name, "/catatog/#{category.name}"

Result :

Add this into app/views/catalog/index.html.haml to display the main product


.center_content
  .oferta
    =image_tag @products.first.pictures.first.public_filename(:normal), :border => 0, :class => 'oferta_img' if @products.first.pictures.count > 0
    .oferta_details
      .oferta_title=@products.first.name
      .oferta_text=@products.first.description
      =link_to 'details', product_path(1), :class => 'prod_buy'

Result :

Add this into app/views/catalog/index.html.haml to display the latest product


.center_title_bar
  Latest Products
-@products.each do |product|
  .prod_box
    .center_prod_box
      .product_title= link_to product.name, product_path(product.id)
      .product_img= link_to image_tag(product.pictures.first.public_filename(:thumb),:border => '0'), product_path(product.id) if product.pictures.count > 0
      .prod_price
        %span.price= "#{product.price} €"
    .prod_details_tab
      %a.prod_buy{ :href => "buy.html" }
        Add to Cart
      =link_to "Details", product_path(product.id), :class => 'prod_details'

Result :

That’s all for the catalog page. The final app/views/catalog/index.html.haml is this :


.crumb_navigation
  Navigation:
  %span.current
    Home
.left_content
  .title_box
    Categories
  %ul.left_menu
    - ProductCategory.all.each do |category|
      %li{:class => category.id%2 == 0 ? 'even' : 'odd'}= link_to category.name, "/catatog/#{category.name}"


.center_content
  .oferta
    =image_tag @products.first.pictures.first.public_filename(:normal), :border => 0, :class => 'oferta_img' if @products.first.pictures.count > 0
    .oferta_details
      .oferta_title=@products.first.name
      .oferta_text=@products.first.description
      =link_to 'details', product_path(1), :class => 'prod_buy'

  .center_title_bar
    Latest Products
  -@products.each do |product|
    .prod_box
      .center_prod_box
        .product_title= link_to product.name, product_path(product.id)
        .product_img= link_to image_tag(product.pictures.first.public_filename(:thumb),:border => '0'), product_path(product.id) if product.pictures.count > 0
        .prod_price
          %span.price= "#{product.price} €"
      .prod_details_tab
        %a.prod_buy{ :href => "buy.html" }
          Add to Cart
        =link_to "Details", product_path(product.id), :class => 'prod_details'

3.3 Customizing the product details page

Create a folder products into app/views/


$ mkdir app/views/catalog

Create a file “index.html.haml” into the folder app/views/catalog


$ EDIT app/views/catalog/index.html.haml

Add this into app/views/catalog/index.html.haml to create the product category list like in the catalog page


.crumb_navigation
  Navigation:
  %span.current
    Product
.left_content
  .title_box
    Categories
  %ul.left_menu
    - ProductCategory.all.each do |category|
      %li{:class => category.id%2 == 0 ? 'even' : 'odd'}= link_to category.name, "/catatog/#{category.name}"

Add this into app/views/catalog/index.html.haml to display the product details


.center_content
  .center_title_bar=@product.name
  .prod_box_big
    .center_prod_box_big
      .product_img_big
        =image_tag @product.pictures.first.public_filename(:normal), :border => "0" if @product.pictures.count > 0
        .thumbs
          -@product.pictures.each do |picture|
            =images_tag picture.public_filename(:thumb), :border => "0"
      .details_big_box
        .product_title_big=@product.name
        .specifications
          Available:
          %span.blue
            In stock
          %br
          Warranties:
          %span.blue
            24 months
          %br
          Transport:
          %span.blue
            delivery services company
          %br
          Include :
          %span.blue
            TVA
          %br
          Description :
          %span.blue=@product.description
          %br
        .prod_price_big
          %span.price="#{@product.price} €"
        %a.prod_buy{ :href => "#" }
          add to cart
        %a.prod_compare{ :href => "#" }
          compare

Result :

guides.forgeos.com