wicked multipage

  Çoğu web sitesinde karşılaştığımız bir yapı var:  Yaptıgımız bir işlemi adım adım ekranları takip ederek tamamlamak.

  Bir ürünü sipariş vermek için adım adım bilgileri girdiğimiz ekranlar için  örnek programımıza başlayalım.

Bu işlemi rails tarafına  wicked gemi ile aktarmaya çalışalım.

gem_file
  gem 'wicked'

terminal:
$ rails g controller order_steps

controller altında order_steps_controller.rb dosyası oluştu. içeriğini güncelleyelim


class OrderStepsController < ApplicationController

  include Wicked::Wizard
  steps :contact, :product,:payment,:cargo,:agree

  def show
    @order = Order.new
    case step
        when :contact
          @class_contact="suan"
          @class_product="devam"
          @class_payment="devam"
          @class_cargo="devam"
          @class_agree="devam"
        when :product
          @class_contact="son"
          @class_product="suan"
          @class_payment="devam"
          @class_cargo="devam"
          @class_agree="devam"
        when :payment
          @class_contact="son"
          @class_product="son"
          @class_payment="suan"
          @class_cargo="devam"
          @class_agree="devam"
        when :cargo 
          @class_contact="son"
          @class_product="son"
          @class_payment="son"
          @class_cargo="suan"
          @class_agree="devam"
        when :agree
           @class_contact="son"
          @class_product="son"
          @class_payment="son"
          @class_cargo="son"
          @class_agree="suan"    
        end
        
    render_wizard
  end

  def update
       render_wizard @order
  end

end


style.css

#devam{
  color: #4527a0;
  }
#suan{
  color: red;
}
#son{
  color:  #4caf50;
}
.progress_color{
   background-color:  #9c27b0 !important;
}


   view altındada order_step klasörü oluştu fakat içi bos. Burada adım adım gideceğimiz  html dosyalarımız oluşturalım. Yaptıgımız örnek 5 adım 5 ekran olmalı.

fakat bunun öncesinde navigation dosyası oluşturup. sayfaların içerisinden render edelim.

view/order_step/_navigation.html.slim

 javascript:
  $( document ).ready(function() {

    var suan_nerde=$('div#step').attr('value');

    if (suan_nerde=="contact")
     {
       $('ul.pager li').first().hide();
       $('ul.pager li a').last().show();
       $('div#custom-bar').css({width:'20%'})
     }
     else if (suan_nerde=="product")
     {
       $('ul.pager li').first().show();
       $('ul.pager li a').last().show();
       $('div#custom-bar').css({width:'40%'})
     }
     else if (suan_nerde=="payment")
     {
       $('ul.pager li').first().show();
       $('ul.pager li a').last().show();
       $('div#custom-bar').css({width:'60%'})
     }
     else if (suan_nerde=="cargo")
     {
       $('ul.pager li').first().show();
       $('ul.pager li a').last().show();
       $('div#custom-bar').css({width:'80%'})
     }
     else if(suan_nerde=="agree")
     {
       $('ul.pager li').first().show();
       $('ul.pager li a').last().hide();
       $('div#custom-bar').css({width:'100%'})
     }
    });

.panel-heading
  .btn-group.btn-group-justified value= step id= "step" role ="group"
      =link_to wizard_steps[0],  wizard_path(wizard_steps[0]), :id => @class_contact, :class => "btn btn-default", :role => "button"
      =link_to wizard_steps[1],  wizard_path(wizard_steps[1]), :id => @class_product, :class => "btn btn-default", :role => "button"
      =link_to wizard_steps[2],  wizard_path(wizard_steps[2]), :id => @class_payment, :class => "btn btn-default", :role => "button"
      =link_to wizard_steps[3],  wizard_path(wizard_steps[3]), :id => @class_cargo, :class => "btn btn-default", :role => "button"
      =link_to wizard_steps[4],  wizard_path(wizard_steps[4]), :id => @class_agree, :class => "btn btn-default", :role => "button"
  hr
    .row
      .col-md-9 style="margin-top:4px;"
        #bar.progress.progress-striped.active
          #custom-bar.progress-bar.progress_color aria-valuenow="100" role="progressbar"  style=("width: 20%")
      .col-md-3
        nav
          ul.pager style="margin:0"
            .col-xs-6
              li= link_to "geri", previous_wizard_path
            .col-xs-6
              li= link_to "ileri", next_wizard_path



view/order_step

agree.html.erb
cargo.html.erb
contact.html.erb
payment.html.erb
product.html.erb

bunların her birinin içeriği ;

view/order_ste/agree.html.erb

<div class="container">
  <div  class="row">
      <div class="col-md-9">
          <div class="panel-default">
           <%= render "/order_steps/navigation"%>
            </div>
      </div>
      </div>
       <div  class="row">
   <div class="col-md-12">
        <h1>agreeee</h1>
     #bu alan sayfalarda görülmesi gereken elementler gelmeli. şimdilik hangi sayfada olduğumuzu görmek açısından açıklama girildi.       
  </div>
  </div>

</div>
</div>


Çalıştırıp bakalım: