目前位置: 首頁 > ECSHOP響應式模版設計 > 19、RWD響應式網頁設計- flow 增加步驟提示

ECSHOP 的步驟是用來判斷應該顯示哪段HTML，你可以增加提示以便告訴消費者結帳有哪些步驟以及目前的步驟，lativ 原本模板都是使用圖片，但是在響應式模板裡應該儘可能的不使用圖片，以便加快網頁的顯示，因此除了將重複的程式碼集中外，並使用 BootStrap 的進度調，前後的差別如圖：

  <div class="flow_step text-center">
    <!-- {if $step eq "cart"} -->
    {assign var=progress value=25}
    <!-- {elseif $step eq "consignee" or $step eq 'login'} -->
    {assign var=progress value=50}
    <!-- {elseif $step eq "checkout"} -->
    {assign var=progress value=75}
    <!-- {elseif $step eq "done"} -->
    {assign var=progress value=100}
    <!-- {/if} -->
    <div class="col-md-4 hidden-xs hidden-sm">
      <div class="tip1"><em>Shopping Cart</em></div>
      <div class="tip2 text-right">我的購物車</div>
    </div>
    <div class="col-md-8">
      <div class="col-md-12 progress hidden-xs">
        <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="{$progress}" aria-valuemin="0" aria-valuemax="100" style="width: {$progress}%">
          <span class="sr-only">完成 {$progress}% </span>
        </div>
      </div>
    <div class="step_icon first">
      <li class="cart{if $step eq 'cart'} active{/if}">
        <i class="fa fa-shopping-cart"></i>
      </li>
      <div class="step_text text-center">購買清單</div>
    </div>
    <div class="step_icon">
    <li class="consignee{if $step eq 'consignee' or $step eq 'login'} active{/if}">
      <i class="fa fa-user"></i>
    </li>
      <div class="step_text text-center">{if $step eq "consignee"}收件人資料{else}會員登入{/if}</div>
    </div>
    <div class="step_icon">
    <li class="checkout{if $step eq 'checkout'} active{/if}">
      <i class="fa fa-truck"></i>
    </li>
      <div class="step_text text-center">結帳中心</div>
    </div>
    <div class="step_icon">
    <li class="done{if $step eq 'done'} active{/if}">
      <i class="fa fa-check-square-o"></i>
    </li>
      <div class="step_text text-center">完成訂單</div>
    </div>
  </div>
</div>

{assign var=progress value=25} 是 Smarty 的動態標籤，目的是依照不同的步驟分配給進度條不同的值，因此可以使進度調顯示不同長度...

相關文章