Get Started

Book Store

Requirements:
Create a Simple Bookstore Site with the following requirements:

• Support for Languages: English and Spanish
• Books Structure: ISBN Code, Author (support for multiple Authors), Publisher Company, Price, Genre (translatable), Number of copies, Year, Author Url (optional)
• Each Book can show many internal small screenshots(250x220)
• The Image of each book must be 1200x600 (mandatory)
• Each book can be assigned to multiple categories
• Each book can support for multiple tags
• Each book support comments from anonymous visitor
• Section to show featured books

Implementation:

1. Create and Install Camaleon CMS Project
2. Start Server
3. Configurations
   1. Use Theme "Default Theme" (admin -> Appearances -> Themes)
      
      
   2. Create a new Content Group Called "Books" (admin -> settings -> content groups)
      
      1. Define required for featured image
      2. Define 1200x600 for featured image
      3. Define 120x100 for thumbnail size
      4. Enable Tags
      5. Enable Categories
      6. Enable Comments
      7. Enable Featured
      

   3. Create Custom fields for "Books" (admin -> settings -> custom fields -> Add Field Group)
      
      1. ISBN Code (Text Field, required)
      2. Authors (Text Field, required, multiple)
      3. Publisher (Text Field, required)
      4. Price (Number Field, required)
      5. Genre (Text Field Translatable, required)
      6. Copies (Number Field, required)
      7. Year (Number Field, required, default 1)
      8. Author Url (Url Field, optional)
      9. Screenshots (Image Field, required, 250x220, multiple)
      

   4. Configure your menus
      
      1. Add Books menu to see the list of Books (Admin -> Appearance -> Menus)
         
         
         1. Link to edit menus
         2. Select the content group to add to the menu (right bar)
         3. Button to add all selected items (Content Group "Our Case", Specific Item of the current content group, Specific Category/Tag) to the Menu (Right Bar) - (Auto Save)
         4. Result of the added menus (The title is editable only for external links)
            Note: You can reorder the menus by drag and drop.
      2. Visit your site and you will see the new menus (Visit Boooks)
         
         
   5. Register Books (admin -> Contents -> Books -> Add New)
      
      
      
      Visit the book page clicking on "View Page"
      
      
      
      
      
   6. Configure for anonymous comments in Admin -> Settings -> General Site -> Configuration "Permit anonymous comments?"
      
      
4. Theme Customization
   Note: The location of your active theme is app/apps/themes/camaleon_first/
   
   1. Customize the view of your book items used by: visit to books section, search results, category/tag items
      1. Create a file within your theme "/views/post_types/books/_post_list_item.html.erb"
      2. Customize the html template according to your needs (In this case I will add the price to the title)
         

         <div class="col-sm-6 col-md-4 post-list-item">
             <div class="thumbnail">
                 <%= raw post.the_link_thumb({}, {style: "width: 100%; display: block;"}) %>
                 <div class="caption">
                     <h4 id="thumbnail-label">
                         <a href="<%= post.the_url %>"><%= post.the_title %> - <%= number_to_currency(post.get_field('price').to_f) %></a>
                     </h4>
                     <small class="" style="display: block;"><%= post.the_created_at %></small>
                     <hr>
                     <p><%= raw post.the_excerpt %> <%= post.the_edit_link %></p>
                 </div>
             </div>
         </div>

      Visit your Books Menu to see results
      

      

   2. Customize the page for a Book
      Create a file "/views/post_types/books/single.html.erb"
      

      <div class="row">
          <article class="col-md-9" id="book-view">
              <div id="book-slider" class="carousel slide" data-ride="carousel" data-interval="false">
                  <!-- Indicators -->
                  <ol class="carousel-indicators">
                      <% @post.get_fields('screenshots').each_with_index do |pthoto, index| %>
                          <li data-target="#book-slider" data-slide-to="<%= index %>" class="<%= 'active' if index == 0 %>"></li>
                      <% end %>
                  </ol>
      
                  <!-- Wrapper for slides -->
                  <div class="carousel-inner" role="listbox">
                      <% @post.get_fields('screenshots').each_with_index do |pthoto, index| %>
                          <div class="item <%= 'active' if index == 0 %>">
                              <img src="<%= pthoto %>" class="center-block">
                          </div>
                      <% end %>
                  </div>
      
                  <!-- Controls -->
                  <a class="left carousel-control" href="#book-slider" role="button" data-slide="prev">
                      <span class="glyphicon glyphicon-chevron-left fa fa-chevron-left" aria-hidden="true"></span>
                      <span class="sr-only">Previous</span>
                  </a>
                  <a class="right carousel-control" href="#book-slider" role="button" data-slide="next">
                      <span class="glyphicon glyphicon-chevron-right fa fa-chevron-right " aria-hidden="true"></span>
                      <span class="sr-only">Next</span>
                  </a>
              </div>
      
              <div class="book-information">
                  <h1><%= @post.the_title %> (<%= @post.get_field('isbn-code') %>)</h1>
                  <h4><%= number_to_currency(@post.get_field('price').to_f) %></h4>
                  <hr/>
                  <div><strong>Authors: </strong> <%= @post.get_fields('authors').join(', ') %></div>
                  <div><strong>Publisher: </strong> <%= @post.get_field('publisher') %></div>
                  <div><strong>Genre: </strong> <%= @post.the_field('genre') %></div>
                  <div><strong>Copies: </strong> <%= @post.the_field('copies') %></div>
                  <% if @post.the_field('author-url').present? %>
                      <div><strong>Author URI: </strong> <%= @post.the_field('author-url') %></div>
                  <% end %>
                  <div class="book_content"><%= raw @post.the_content %></div> 
                  <%= render partial: 'partials/comments', locals: {post: @post} if @post.can_commented? %>
              </div>
          </article>
          <div class="col-md-3">
              <%= render partial: 'partials/sidebar', locals: {post: @post, skip_fields: true} %>
          </div>
      </div>

      Visit your book again
      
      
      
      Note: This affects only for pages within Content Group "Books"
      Note2: The value for post.the_field or post.get_field needs the key of the custom field.
      
      
      
      
      
   3. Customize your search to search only for books
      
      1. Create a file "views/partials/_search_form.html.erb"
         

         <%= form_tag(cama_search_path, :method => "get", :class => "form-search form-horizontal") do %>
             <div class="input-group">
                 <input type="hidden" name="post_type_slugs" value="books">
                 <input type="text" name="q" class="form-control" placeholder="<%= ct("search", default: 'Search here') %>...">
                 <div class="input-group-btn">
                     <button type="submit" class="btn btn-default"><i style="font-size: 14px;" class="glyphicon glyphicon-search"></i></button>
                 </div>
             </div>
         <% end %>

      2. You can include above form in anywhere of your theme by:
         

         <%= render 'partials/search_form' %>

      3. Search some books
         
         

   Note: Here you can see code of the Default Theme like: single.html.erb, partials/_post_list_item.html.erb, ...
   Note2: All views within default_theme can be overwritten by your theme (example above "views/partials/_search_form.html.erb").

5. Visit your site and enjoy

Source code here.