更多 HTML5 響應式模板免費下載 
目前位置: 首頁 > ECSHOP響應式模版設計 > 19、RWD響應式網頁設計- flow 增加步驟提示

19、RWD響應式網頁設計- flow 增加步驟提示 超大 稍大 微大

發表於: 2016-12-25 最後更新: 現在時間:2022-05-25 21:46:36
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 的動態標籤,目的是依照不同的步驟分配給進度條不同的值,因此可以使進度調顯示不同長度...




對於本站文章有任何問題或建議歡迎到 : 討論區寫信給我
本站提供ECSHOP技術支援, 是網路開店最佳選擇 ,最後更新時間: 現在時間:2022-05-25 21:46:36