作者 主題: 19、RWD響應式網頁設計- flow 增加步驟提示  (閱讀 529 次)

0 會員 與 1 訪客 正在閱讀本文。

離線 andy

  • 管理員
  • 正式會員
  • *****
  • 積分 +1/-0
  • 性別: 男
    • 原來如此
19、RWD響應式網頁設計- flow 增加步驟提示
« 於: 七月 22, 2019, 04:37:05 下午 »
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 的動態標籤,目的是依照不同的步驟分配給進度條不同的值,因此可以使進度調顯示不同長度...



LINE ID:ecshop_weshop
Email:andy@we-shop.net
聯絡我:https://we-shop.net/contactus.php