目前位置: 首頁 > ECSHOP響應式模版設計 > 18、RWD響應式網頁設計- flow 結帳頁面

18、RWD響應式網頁設計- flow 結帳頁面 超大 稍大 正常

發表於: 2016-12-23 最後更新: 現在時間:2022-12-08 05:05:04
ECSHOP 的結帳頁面(flow.dwt)包含購物清單、登入與註冊、收貨地址、結算中心 、訂單完成等步驟,所以頁面冗長是一定的,還是一樣的作法,將每個步驟抽出來成單一的LBI,修改的時候只需針對個別的LBI即可,就算出錯也能清楚看出錯誤的位置:
  <body>
    <!-- #BeginLibraryItem "/library/page_header.lbi" --><!-- #EndLibraryItem -->
    <div class="row">
      <div class="col-md-12">
        <!-- #BeginLibraryItem "/library/ur_here.lbi" --><!-- #EndLibraryItem --><!-- 目前位置 -->
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <!-- #BeginLibraryItem "/library/flow_step.lbi" --><!-- #EndLibraryItem --><!-- 步驟提示 -->
      </div>
    </div>
    <!-- {if $step eq "cart"} --><!-- 購物車內容 -->
    <div class="row">
      <div class="col-md-12">
        <!-- #BeginLibraryItem "/library/flow_cart.lbi" --><!-- #EndLibraryItem -->
      </div>
    </div>
    <!-- {/if} -->
    <!-- {if $step eq "consignee"} --><!-- 收貨地址 -->
    <div class="row">
      <div class="col-md-12">
        <!-- #BeginLibraryItem "/library/flow_consignee.lbi" --><!-- #EndLibraryItem -->
      </div>
    </div>
    <!-- {/if} -->
    <!-- {if $step eq "checkout"} --><!-- 訂單確認 -->
    <div class="row">
      <div class="col-md-12">
        <!-- #BeginLibraryItem "/library/flow_checkout.lbi" --><!-- #EndLibraryItem -->
      </div>
    </div>
    <!-- {/if} -->
    <!-- {if $step eq "done"} --><!-- 訂單送出成功 -->
    <div class="row">
      <div class="col-md-12">
        <!-- #BeginLibraryItem "/library/flow_done.lbi" --><!-- #EndLibraryItem -->
      </div>
    </div>
    <!-- {/if} -->
    <!-- {if $step eq "login"} --><!-- 會員登入、註冊 -->
    <div class="row">
      <div class="col-md-12">
        <!-- #BeginLibraryItem "/library/flow_login.lbi" --><!-- #EndLibraryItem -->
      </div>
    </div>
    <!-- {/if} -->
    
    <!-- #BeginLibraryItem "/library/help.lbi" --><!-- #EndLibraryItem -->
    <!-- #BeginLibraryItem "/library/page_footer.lbi" --><!-- #EndLibraryItem -->
    <script type="text/javascript">
    var process_request = "{$lang.process_request}";
    {foreach from=$lang.passport_js item=item key=key}
    var {$key} = "{$item}";
    {/foreach}
    var username_exist = "{$lang.username_exist}";
    </script>
  </body>
上圖還沒有經過修飾,在修飾之前請先檢查原始碼是否有錯,如果有錯誤請先修正再繼續,千萬不要以為不影響運作而忽略他,才不會影響網站的SEO...
對於本站文章有任何問題或建議歡迎寫信給我
本站提供ECSHOP技術支援, 是網路開店最佳選擇 ,最後更新時間: 現在時間:2022-12-08 05:05:04