作者 主題: 18、RWD響應式網頁設計- flow 結帳頁面  (閱讀 691 次)

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

離線 andy

  • 管理員
  • 正式會員
  • *****
  • 積分 +1/-0
  • 性別: 男
    • 原來如此
18、RWD響應式網頁設計- flow 結帳頁面
« 於: 七月 22, 2019, 04:25:40 下午 »
        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...
LINE ID:ecshop_weshop
Email:andy@we-shop.net
聯絡我:https://we-shop.net/contactus.php