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


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




<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 的動態標籤,目的是依照不同的步驟分配給進度條不同的值,因此可以使進度調顯示不同長度...



