最新文章

頁: « 1 2 3 4 5 6 7 8 9 10 »
41
ECSHOP 響應式設計的製作 / 26、ECSHOP製作無限級響應式導航與垂直選單
« 最新文章 由 andy 七月 22, 2019, 11:16:21 下午 »
由於ECSHOP與 jquery 的衝突,有些人可能對修改程式有些困,因此分享一下不依賴jquery的無限級響應式導航與垂直選單Script,這個腳本是純js製作的,無論水平或垂直選單,都支援無限級響應式,在中大螢幕下滑鼠經過自動展開選單,手機則變成點擊展開並搭配滑動效果,在BootStrap中要製作無限級選單不容易,但使用 ddlevelsmenu 這個js腳本就可以輕易實現,不一定要用jquery或BootStrap才能完成,因為很多效果css3已經具備了...

使用方式很簡單,首先 下載ddlevelsmenu 或先看 效果展示 ,下載的壓縮包中包涵demo.htm、demo2.htm、changelog.txt、ddlevelsfiles(資料夾),將 ddlevelsfiles(資料夾)上傳至網站或模板目錄,然後在網頁頭部加入:
代碼: [選擇]
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-mobile.css" />
<script type="text/javascript" src="ddlevelsfiles/ddlevelsmenu.js"></script>






接著在頁面中加入你的選單程式碼,可參考 demo.htm、demo2.htm:
代碼: [選擇]
<div id="ddtopmenubar" class="mattblackmenu">
    <ul><!-- 第一層 -->
        <li><a href="">首頁</a></li>
        <!-- 有多層選單必須加上  rel="ddsubmenu?" 必須與子選單 id 對應 -->
        <li><a href="/article_cat-12-ecshop+%E4%BD%BF%E7%94%A8%E6%95%99%E5%AD%B8.html" rel="ddsubmenu1">ECSHOP設定教學</a></li>
        <li><a href="#" rel="ddsubmenu2">模板插件</a></li>
        <li><a href="/article_cat-37.html">響應式模板DIY</a></li>
        <li><a href="#" rel="ddsubmenu3">支援服務</a></li>
    </ul>
</div>
<!-- 手機用圖示 -->
<a class="animateddrawer" id="ddtopmenubar-mobiletoggle" href="#">
    <span></span>
</a>
<script type="text/javascript">
    ddlevelsmenu.setup("ddtopmenubar", "topbar");//水平選單
    //ddlevelsmenu.setup("mainmenuid", "sidebar");//垂直選單(請參考 demo2.htm)
</script>
<!-- 第一個子選單 -->
<ul id="ddsubmenu1" class="ddsubmenustyle">
    <li><a href="#">子選單 1a</a></li><!-- 第二層 -->
    <li><a href="#">子選單 2a</a></li>
    <li><a href="#">子選單 資料夾 3a</a>
          <ul><!-- 第三層 -->
              <li><a href="#">第三層子選單 3.1a</a></li>
              <li><a href="#">第三層子選單 3.2a</a></li>
              <li><a href="#">第三層子選單 3.3a</a></li>
              <li><a href="#">第三層子選單 3.4a</a></li>
          </ul>
    </li>
    <li><a href="#">子選單 4a</a></li>
    <li><a href="#">子選單 資料夾 5a</a>
        <ul><!-- 第三層 -->
              <li><a href="#">第三層子選單 5.1a</a></li>
              <li><a href="#">子選單 資料夾 5.2a</a>
                    <ul><!-- 第四層 -->
                        <li><a href="#">第三層子選單 5.2.1a</a></li>
                        <li><a href="#">第三層子選單 5.2.2a</a></li>
                        <li><a href="#">第三層子選單 5.2.3a</a></li>
                        <li><a href="#">第三層子選單 5.2.4a</a></li>
                    </ul>
              </li>
        </ul>
    </li>
    <li><a href="#">子選單 6a</a></li>
</ul>
<!-- 第二個子選單 -->
<ul id="ddsubmenu2" class="ddsubmenustyle">
    <li><a href="#">子選單 1b</a></li><!-- 第二層 -->
    <li><a href="#">子選單 2b</a></li>
    <li><a href="#">子選單 資料夾 3b</a>
          <ul><!-- 第三層 -->
              <li><a href="#">第三層子選單 3.1b</a></li>
              <li><a href="#">第三層子選單 3.2b</a></li>
              <li><a href="#">第三層子選單 3.3b</a></li>
              <li><a href="#">第三層子選單 3.4b</a></li>
          </ul>
    </li>
    <li><a href="#">子選單 4b</a></li>
    <li><a href="#">子選單 資料夾 5b</a>
        <ul><!-- 第三層 -->
              <li><a href="#">第三層子選單 5.1b</a></li>
              <li><a href="#">子選單 資料夾 5.2b</a>
                    <ul><!-- 第四層 -->
                        <li><a href="#">第三層子選單 5.2.1b</a></li>
                        <li><a href="#">第三層子選單 5.2.2b</a></li>
                        <li><a href="#">第三層子選單 5.2.3b</a></li>
                    </ul>
              </li>
        </ul>
    </li>
    <li><a href="#">子選單 6b</a></li>
</ul>
<!-- 第三個子選單 -->
<ul id="ddsubmenu3" class="ddsubmenustyle">
    <li><a href="/vip.php">贊助VIP</a></li>
    <li><a href="https://www.we-shop.net/host.php" target="_blank">虛擬主機</a></li>
    <li><a href="/message.php">留言板</a></li>
    <li><a href="/contactus.php">聯絡我們</a></li>
    <li><a href="/bbs/">[url=https://www.we-shop.net/bbs/">討論區</a></li>
</ul>
如果你是 VIP 請至 VIP室 查看如何套用至ECSHOP模板中...
42
ECSHOP 響應式設計的製作 / 25、ECSHOP + Bootstrap3 製作多圖滾動首頁主廣告
« 最新文章 由 andy 七月 22, 2019, 11:15:18 下午 »
使用依賴 jquery 的 owl.carousel 插件為網站的首頁主廣告,特點是可以多圖展示並輪播,使用不同寬度的圖片或視頻也不會變形,因為圖片不需太大,可加快手機載入速度,你也可以調用網站的促銷商品...
index.dwt :
代碼: [選擇]
<link href="{$tpl}css/owl.carousel.min.css" rel="stylesheet" type="text/css" media="all" />
<link href="{$tpl}css/owl.theme.default.min.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="{$tpl}js/owl.carousel.min.js"></script>
    <div class="owl-carousel">
      <!--{foreach from=get_flash_xml() item=playerdb name=get_flash_xml}-->
      <div class="item">
      <a href="{$playerdb.url}" title="{$playerdb.text}">[img]https://we-shop.net{$playerdb.src}" /></a>
    </div>
      <!--{/foreach}-->
    </div>
<style type="text/css">
    .owl-dots {
        text-align: right;
    }
</style>
<script type="text/javascript">
    $(".owl-carousel").owlCarousel({
        items: 3, // 一次顯示幾個項目
        loop: true, // 是否無限循環
        margin: 10, // 與右邊圖片的距離
        nav: false, // 導航文字
        autoplay: true, // 自動輪播
        autoplayTimeout: 1000, // 切換時間
        autoplayHoverPause: true, // 滑鼠經過時暫停
        dots: true,     //顯示圓點導航按鈕
        smartSpeed: 800, //換圖速度
    });
    </script>



43
ECSHOP 響應式設計的製作 / 24、ECSHOP + Bootstrap3 製作響應式導航欄
« 最新文章 由 andy 七月 22, 2019, 11:14:17 下午 »
許多人在修改響應式模板時,經常在不同尺寸間的布局無法適當地排版,特別是由資料庫取出的資料,因此建議如果你的網站已經穩定,可以將某部份資料改成靜態方式,例如底下的導航欄:
html:
代碼: [選擇]
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a href="" class="navbar-brand">
            <img src="https://we-shop.net/images/logo.png" alt="原來如此-ECSHOP開店支援"></a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
        </div>
        <div class="shopping-cart hidden-xs pull-right dropdown">
            <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <span class="glyphicon glyphicon-shopping-cart"></span>產品
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <li><a href="/goods-102.html" title="ECSHOP響應式[/url]模板 PRO"><img src="https://we-shop.net/images/201607/thumb_img/102_thumb_G_1468809319361.jpg" alt="ECSHOP響應式模板 PRO" />ECSHOP響應式模板 PRO</a></li>
                   
                <li><a href="/goods-94.html" title="超商取貨二合一"><img src="https://we-shop.net/images/201601/thumb_img/94_thumb_G_1453157300111.jpg" alt="超商取貨二合一" />超商取貨二合一</a></li>
                <li><a href="/goods-91.html"  title="ECSHOP後台守門員"><img src="https://we-shop.net/images/201304/thumb_img/91_thumb_G_1366266446153.jpg" alt="ECSHOP後台守門員" />ECSHOP後台守門員</a></li>
                <li><a href="/goods-93.html" title="ECSHOP 商品相冊批量上傳插件"><img src="https://we-shop.net/images/201305/thumb_img/93_thumb_G_1369644360086.jpg" alt="ECSHOP 商品相冊批量上傳插件" />ECSHOP 商品相冊批量上傳插件</a></li>
                <!-- 使用ECSHOP動態載入 -->
                <!--{foreach from=$categories item=cat}-->
                 <!-- <li><a href="{$cat.url}">{$cat.name|escape:html}</a></li> -->
                <!--{/foreach}-->
            </ul>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href=""><span class="glyphicon glyphicon-home"></span>首頁</a></li>
                <li><a href=""><span class="glyphicon glyphicon-th-list"></span>資訊</a></li>
                <li><a href=""><span class="glyphicon glyphicon-fire"></span>案例</a></li>
                <li><a href=""><span class="glyphicon glyphicon-info-sign"></span>關於</a></li>
                <li><a href=""><span class="glyphicon glyphicon-phone-alt"></span>客服</a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="container visible-xs">
    <div class="cat">
        <a href="/goods-102.html" title="ECSHOP響應式模板 PRO">
            <div class="col-xs-4 cat-box">
                <img src="https://we-shop.net/images/201607/thumb_img/102_thumb_G_1468809319361.jpg" alt="ECSHOP響應式模板 PRO" />
                <div class="goods_name">
                    ECSHOP響應式模板 PRO
                </div>
            </div>
        </a>
        <a href="/goods-94.html" title="超商取貨二合一">
            <div class="col-xs-4 cat-box">
                <img src="https://we-shop.net/images/201601/thumb_img/94_thumb_G_1453157300111.jpg" alt="超商取貨二合一" />
                <div class="goods_name">
                    超商取貨二合一
                </div>
            </div>
        </a>
        <a href="/goods-91.html"  title="ECSHOP後台守門員">
            <div class="col-xs-4 cat-box">
                <img src="https://we-shop.net/images/201304/thumb_img/91_thumb_G_1366266446153.jpg" alt="ECSHOP後台守門員" />
                <div class="goods_name">
                    ECSHOP後台守門員
                </div>
            </div>
        </a>
        <a href="/goods-93.html" title="ECSHOP 商品相冊批量上傳插件">
            <div class="col-xs-4 cat-box">
                <img src="https://we-shop.net/images/201305/thumb_img/93_thumb_G_1369644360086.jpg" alt="ECSHOP 商品相冊批量上傳插件" />
                <div class="goods_name">
                    ECSHOP 商品相冊批量上傳插件
                </div>
            </div>
        </a>
    </div>
</div>

css:
代碼: [選擇]
a:hover {
    text-decoration: none;
}
nav .container .navbar-header .navbar-toggle {
    margin-right: 30px;
}
nav .container .navbar-header a.navbar-brand {
    padding:0;
}
nav .container .navbar-header a.navbar-brand img {
    max-height: 50px;
}
nav .container .collapse ul {
    margin-top: 0px;
}
nav .container li span.glyphicon {
    margin-right: 5px;
}
nav .container .shopping-cart
 {
    margin: 9px 0 0 30px;
}
.cat {
    margin-top: 60px;
    min-height: 30px;
    padding: 0 0 10px;
}
.cat-box {
    padding: 5px 0;
    text-align: center;
}
.cat-box img {
    width: 55px;
    height: 55px;
    border: 1px solid #aaa;
    border-radius: 50px;
    padding: 3px;
}
.dropdown-menu img {
    width: 30px;
    height: 30px;
    border: 1px solid #aaa;
    border-radius: 50px;
    padding: 2px;
    margin: 0 6px;
}
.navbar-fixed-top {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}


44
ECSHOP 響應式設計的製作 / 23、RWD響應式網頁設計- Ecshop DONE 完成訂
« 最新文章 由 andy 七月 22, 2019, 11:13:10 下午 »
比起其他頁面,結算中心的完成頁面算是簡單了,主要還是在於如何呈現,相信大家都有一份自己的藍圖,程式碼包涵了實體與虛擬商品的結算,如果你沒有虛擬商品的交易,當然這部份可以省略:
代碼: [選擇]
<!-- 訂單送出成功 -->
<div class="">
    <table class="table">
        <tr>
            <th class="text-center" style="font-size: 1.3em">{$lang.remember_order_number}: <strong class="text-danger">{$order.order_sn}</strong>
            </th>
        </tr>
        <tr>
            <td class="pad">
                <!--{if $order.shipping_name}-->
                <div><i class="fa fa-truck"></i> {$lang.select_shipping}: <strong class="text-success">{$order.shipping_name}</strong></div>
                <!--{/if}-->
                <div><i class="fa fa-credit-card"></i> {$lang.select_payment}: <strong class="text-warning">{$order.pay_name}</strong></div>
                <div><i class="fa fa-calculator"></i> {$lang.order_amount}: <strong class="text-danger">{$total.amount_formated}</strong></div>
                <div class="text-info"><i class="fa fa-exclamation-circle"></i> {$order.pay_desc}</div>
            </td>
        </tr>
        <!-- {if $pay_online} -->
        <!-- 如果是線上付款則顯示付款按鈕 -->
        <tr>
            <td class="text-center">
                {$pay_online}
            </td>
        </tr>
        <!-- {/if} -->
    </table>
    <!--{if $virtual_card} 虛擬商品-->
    <div class="virtual">
        <!--{foreach from=$virtual_card item=vgoods}-->
        <h3 class="text-danger">{$vgoods.goods_name}</h3>
        <!--{foreach from=$vgoods.info item=card}-->
        <ul>
            <!--{if $card.card_sn}-->
            <li style="margin-right:50px;float:left;">
                <strong>{$lang.card_sn}:</strong>
                <span class="text-danger;">{$card.card_sn}</span>
            </li>
            <!--{/if}-->
            <!--{if $card.card_password}-->
            <li style="margin-right:50px;float:left;">
                <strong>{$lang.card_password}:</strong>
                <span class="text-danger;">{$card.card_password}</span>
            </li>
            <!--{/if}-->
            <!--{if $card.end_date}-->
            <li class="pull-left">
                <strong>{$lang.end_date}:</strong>
                {$card.end_date}
            </li>
            <!--{/if}-->
        </ul>
        <!--{/foreach}-->
        <!--{/foreach}-->
    </div>
    <!--{/if}-->
    <p class="text-center"><i class="fa fa-mouse-pointer"></i> {$order_submit_back}</p>
</div>



    </div>
45
ECSHOP 響應式設計的製作 / 22、RWD響應式網頁設計- Ecshop 結算中心
« 最新文章 由 andy 七月 22, 2019, 11:12:13 下午 »
結算中心包涵商品列表、收貨人訊息、商品包裝、祝福賀卡、寄件方式、付款方式、 附言、餘額、紅包、缺貨處理、費用總計 多個區塊,為了避免頁面過於冗長,我將相同性質的功能以TAB形式表現,你也可以將用不到的區塊隱藏或乾脆刪除,讓整個頁面更簡潔:
代碼: [選擇]
<!-- 開始訂單確認界面 -->
<style type="text/css">
.modify {color: yellow;}
input[type=radio] {margin-right: 10px;}
.flow_name {position: relative;cursor: pointer;}
.flow_desc {width: 100%;position: absolute;max-height: 200px;overflow: auto;border: 1px solid #aaa;padding: 5px;border-radius: 6px;background: #FFF;box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.2);z-index: 999;}
</style>
<script type="text/javascript">
var flow_no_payment = "{$lang.flow_no_payment}";
var flow_no_shipping = "{$lang.flow_no_shipping}";
</script>
<form action="flow.php" method="post" name="theForm" id="theForm" onsubmit="return checkOrderForm(this)">
 
  <div class="col-md-6">
    {include file='library/flow_checkout_list.lbi'}
  </div>
  <div class="col-md-6">
    {include file='library/flow_checkout_option.lbi'}
  </div>
  <div class="clearfix"></div>
  <div class="col-md-6">
    {include file='library/flow_checkout_sip.lbi'}
  </div>
  <div class="col-md-6">
    {include file='library/flow_checkout_pay.lbi'}
  </div>
  <div class="clearfix"></div>
  <div class="col-md-6">
    {include file='library/flow_checkout_orther.lbi'}
  </div>
  <div class="col-md-6">
    <table class="table table-striped table-hover">
      <tr>
        <th>
          <i class="fa fa-calculator"></i> {$lang.fee_total}
        </th>
      </tr>
      <tr>
        <td>
          <div id="ECS_ORDERTOTAL" class="text-center">
            {include file='library/order_total.lbi'}
          </div>
        </td>
      </tr>
      <tr>
        <td class="text-center">
          <a href="javascript:void();" onclick="document.theForm.submit();" class="btn btn-danger btn-lg" /><i class="fa fa-calculator"></i>  完成訂單</a>
          <input type="hidden" name="step" value="done" />
        </td>
      </tr>
    </table>
  </div>
</form>

代碼: [選擇]
<!-- flow_checkout_list.lbi -->
<div class="">
  <ul id="gtabs" class="nav nav-tabs" role="tablist">
    <!-- 購買列表-->
    <li role="presentation" class="active">
      <a href="#goods_list" id="goods_list-tab" role="tab" data-toggle="tab" aria-controls="goods_list" aria-expanded="false" title="購買列表" class="pull-left">
        <i class="fa fa-list"></i> {$lang.goods_list}
        <!-- {if $allow_edit_cart} 是否允許修改購物車 -->
        <span data-url="flow.php" class="btn_modify">
          &nbsp;&nbsp;&nbsp;<i class="fa fa-pencil-square-o"></i> 更改
       
        <!-- {/if} -->
      </a>
    </li>
   
    <!-- 收件地址 -->
    <li role="presentation" class="">
      <a href="#consignee_info" id="consignee_info-tab" role="tab" data-toggle="tab" aria-controls="consignee_info" aria-expanded="false" title="收件地址" class="pull-left">
        <i class="fa fa-list-alt"></i> {$lang.consignee_info}
        <span class="btn_modify" data-url="flow.php?step=consignee">
          &nbsp;&nbsp;&nbsp;<i class="fa fa-pencil-square-o"></i> 更改</span>
       
      </a>
    </li>
  </ul>
</div>
<div id="tabContent" class="tab-content">
  <div role="tabpanel" class="tab-pane fade active in" id="goods_list" aria-labelledby="goods_list-tab">
    <table class="table">
      <!-- {foreach from=$goods_list item=goods} -->
      <tr>
        <td>
          <!-- {if $goods.goods_id gt 0 &amp;&amp; $goods.extension_code eq 'package_buy'} -->
          <a href="javascript:void(0)" onclick="setSuitShow({$goods.goods_id})">
            {$goods.goods_name}
            <span>
              ({$lang.remark_package})
           
          </a>
          <div id="suit_{$goods.goods_id}" style="display:none">
            <!-- {foreach from=$goods.package_goods_list item=package_goods_list} -->
            <a href="goods.php?id={$package_goods_list.goods_id}" target="_blank">
              {$package_goods_list.goods_name}
            </a><br />
            <!-- {/foreach} -->
          </div>
          <!-- { else } -->
          <a href="goods.php?id={$goods.goods_id}" target="_blank" class="">
            {$goods.goods_name}
          </a>
          <div>
            <!-- {if $goods.parent_id > 0} -->
            <span>({$lang.accessories})
            <!-- {elseif $goods.is_gift} -->
            <span>({$lang.largess})
            <!-- {/if} -->
            <!-- {/if} -->
            <!-- {if $goods.is_shipping} -->
            (<span>
              {$lang.free_goods}
            )
            <!-- {/if} -->
            <div class="text-success">
              {$goods.goods_attr}
              <span class="text-info">
                <strong>{$goods.formated_goods_price}</strong> X <strong>{$goods.goods_number}</strong> =
              </span>
              <span class="text-danger">
                {$goods.formated_subtotal}
              </span>
            </div>
          </div>
        </td>
      </tr>
      <!-- {/foreach} -->
      <!-- {if !$gb_deposit} 團購且有保證金時不顯示 -->
      <tr>
        <td>
          <!-- {if $discount gt 0} -->
          {$your_discount}<br />
          <!-- {/if} -->
          {$shopping_money}
          <!-- {if $show_marketprice} -->
          ,{$market_price_desc}<!--{/if}-->
        </td>
      </tr>
      <!-- {/if} -->
    </table>
  </div>
  <!-- 收件地址 -->
  <div role="tabpanel" class="tab-pane fade" id="consignee_info" aria-labelledby="consignee_info-tab">
    <li><i class="fa fa-dot-circle-o text-warning"></i> {$lang.consignee_name}:{$consignee.consignee|escape}</li>
    <li><i class="fa fa-dot-circle-o text-warning"></i> {$lang.email_address}:{$consignee.email|escape}</li>
    <!-- {if $total.real_goods_count gt 0} -->
    <li><i class="fa fa-dot-circle-o text-warning"></i> {$lang.detailed_address}:{$consignee.address|escape} </li>
    <li><i class="fa fa-dot-circle-o text-warning"></i> {$lang.postalcode}:{$consignee.zipcode|escape}</li>
    <!-- {/if} -->
    <li><i class="fa fa-dot-circle-o text-warning"></i> {$lang.phone}:{$consignee.tel} </li>
    <li><i class="fa fa-dot-circle-o text-warning"></i> {$lang.backup_phone}:{$consignee.mobile|escape}</li>
    <!-- {if $total.real_goods_count gt 0} -->
    <!-- {if $consignee.sign_building} -->
    <li><i class="fa fa-dot-circle-o text-warning"></i> {$lang.sign_building}:{$consignee.sign_building|escape} </li>
    <!-- {/if} -->
    <!-- {if $consignee.best_time} -->
    <li><i class="fa fa-dot-circle-o text-warning"></i> {$lang.deliver_goods_time}:{$consignee.best_time|escape}</li>
    <!-- {/if} -->
    <!-- {/if} -->
  </div>
</div>

<!-- flow_checkout_option.lbi -->
<div class="">
  <ul id="option_tabs" class="nav nav-tabs" role="tablist">
    <!-- {if $pack_list} 包裝-->
    <li role="presentation" class="active">
      <a href="#pack_list" id="pack_list-tab" role="tab" data-toggle="tab" aria-controls="pack_list" aria-expanded="false" title="購買列表" class="pull-left">
        <i class="fa fa-suitcase"></i> {$lang.goods_package}
      </a>
    </li>
    <!-- {/if} -->
    <!-- {if $card_list} 是否有禮卡 -->
    <li role="presentation" class="">
      <a href="#card_list" id="card_list-tab" role="tab" data-toggle="tab" aria-controls="card_list" aria-expanded="false" title="禮卡" class="pull-left">
        <i class="fa fa-file-word-o"></i> {$lang.goods_card}
      </a>
    </li>
    <!-- {/if} -->
  </ul>
</div>
<div id="option_tabs-Content" class="tab-content">
  <!-- {if $pack_list} -->
  <div role="tabpanel" class="tab-pane fade active in" id="pack_list" aria-labelledby="pack_list-tab">
    <table class="table table-striped table-hover">
      <tr>
        <td colspan="3">
          <input type="radio" name="pack" id="pack0" class="pull-left" value="0" {if $order.pack_id eq 0}checked="true"{/if} onclick="selectPack(this)" /><label for="pack0"><strong>{$lang.no_pack}</strong></label>
        </td>
      </tr>
      <!-- {foreach from=$pack_list item=pack} 循環包裝 -->
      <tr>
        <td width="110">
          <input type="radio" name="pack" id="pack{$pack.pack_id}" class="pull-left" value="{$pack.pack_id}" {if $order.pack_id eq $pack.pack_id}checked="true"{/if} onclick="selectPack(this)" />
          <label for="pack{$pack.pack_id}"><strong>{$pack.pack_name}</strong></label>
        </td>
        <td>
          <span class="text-info">費用:<strong>{$pack.format_pack_fee}</strong></span>
          <span class="text-danger">滿:<strong>{$pack.format_free_money}</strong>免費</span>
        </td>
        <td>
          <!-- {if $pack.pack_img} 是否有圖片 -->
          <a href="data/packimg/{$pack.pack_img}" target="_blank" title="{$lang.view}{$lang.img}"><i class="fa fa-eye"></i></a>
          <!-- {else} -->
          {$lang.no}
          <!-- {/if} -->
        </td>
      </tr>
      <!-- {/foreach} 循環包裝 -->
    </table>
  </div>
  <!-- {/if} 是否使用包裝 -->
  <!-- 禮卡 -->
  <div role="tabpanel" class="tab-pane fade" id="card_list" aria-labelledby="card_list-tab">
    <!-- {if $card_list} 是否有禮卡 -->
    <table class="table table-striped table-hover">
      <tr>
        <td colspan="3">
          <input type="radio" name="card" id="card0" class="pull-left" value="0" {if $order.card_id eq 0}checked="true"{/if} onclick="selectCard(this)" /><label for="card0"><strong>{$lang.no_card}</strong></label>
        </td>
      </tr>
      <!-- {foreach from=$card_list item=card} 循環禮卡 -->
      <tr>
        <td>
          <input type="radio" name="card" id="card{$card.card_id}" class="pull-left" value="{$card.card_id}" {if $order.card_id eq $card.card_id}checked="true"{/if} onclick="selectCard(this)"  />
          <label for="card{$card.card_id}"><strong>{$card.card_name}</strong></label>
        </td>
        <td>
          <span class="text-info">費用:{$card.format_card_fee}</span>
          <span class="text-danger">滿:<strong>{$card.format_free_money}</strong>免費</span>
        </td>
        <td>
          <!-- {if $card.card_img} 是否有圖片 -->
          <a href="data/cardimg/{$card.card_img}" target="_blank" title="{$lang.view}"><i class="fa fa-eye"></i></a>
          <!-- {else} -->
          {$lang.no}
          <!-- {/if} -->
        </td>
      </tr>
      <!-- {/foreach} 循環禮卡 -->
      <tr>
        <td width="110">
          {$lang.bless_note}:
        </td>
        <td colspan="2">
          <textarea name="card_message" cols="60" rows="3" class="form-control" placeholder="請輸入{$lang.bless_note}">{$order.card_message|escape}</textarea>
        </td>
      </tr>
    </table>
    <!-- {/if} 是否使用禮卡 -->
  </div>
</div>

<!-- flow_checkout_sip.lbi -->
<!--{if $total.real_goods_count neq 0} 寄件方式-->
<table class="table table-striped table-hover">
  <tr>
    <th>
      <i class="fa fa-truck"></i> {$lang.shipping_method}
    </th>
  </tr>
  <!-- {foreach from=$shipping_list item=shipping} 循環寄件方式 -->
  <tr>
    <td valign="top">
      <input name="shipping" type="radio" id="radio{$shipping.shipping_id}" value="{$shipping.shipping_id}" {if $order.shipping_id eq $shipping.shipping_id}checked="true"{/if} supportCod="{$shipping.support_cod}" insure="{$shipping.insure}" onclick="selectShipping(this)" class="pull-left" />
      <div class="flow_name" onmouseover="$('#shipping{$shipping.shipping_id}').show()" onmouseout="$('#shipping{$shipping.shipping_id}').hide()">
        <label for="radio{$shipping.shipping_id}"><strong>{$shipping.shipping_name}</strong></label>
        <div id="shipping{$shipping.shipping_id}" style="display: none;" class="flow_desc">{$shipping.shipping_desc}</div>
      </div>
      <span class="text-info">運費:<strong>{$shipping.format_shipping_fee}</strong></span>
      <span class="text-danger">滿:<strong>{$shipping.free_money}</strong>免運費</span>
    </td>
  </tr>
  <!-- {/foreach} 循環寄件方式 -->
</table>
<!--{else}-->
<input name = "shipping" type="radio" value = "-1" checked="checked"  style="display:none"/>
<!--{/if}-->

<!-- flow_checkout_pay.lbi -->
<!--{if $total.real_goods_count neq 0} 付款方式-->
<table class="table table-striped table-hover">

<tr>
  <th><i class="fa fa-credit-card"></i> {$lang.payment_method}</th>
</tr>
<!-- {foreach from=$payment_list item=payment} -->
<!-- 循環付款方式 -->
<tr>
  <td valign="top">
    <input type="radio" name="payment" id="pay{$payment.pay_id}" value="{$payment.pay_id}" {if $order.pay_id eq $payment.pay_id}checked{/if} isCod="{$payment.is_cod}" onclick="selectPayment(this)" {if $cod_disabled and $payment.is_cod eq "1"}disabled="true"{/if}  class="pull-left" />
    <div class="flow_name" onmouseover="$('#payment{$payment.pay_id}').show()" onmouseout="$('#payment{$payment.pay_id}').hide()">
        <label for="pay{$payment.pay_id}"><strong>{$payment.pay_name}</strong></label>
        <div id="payment{$payment.pay_id}" style="display: none;" class="flow_desc">{$payment.pay_desc}</div>
        <span class="text-danger">手續費:<strong>{$payment.format_pay_fee}</strong></span>
    </td>
  </tr>
  <!-- {/foreach} 循環付款方式 -->
  </table>
  <!--{else}-->
  <input name = "payment" type="radio" value = "-1" checked="checked"  style="display:none"/>
  <!--{/if}-->

<!-- flow_checkout_orther.lbi -->
<div class="">
  <ul id="option_tabs" class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
      <a href="#order_postscript" id="order_postscript-tab" role="tab" data-toggle="tab" aria-controls="order_postscript" aria-expanded="false" title="附言" class="pull-left">
        <i class="fa fa-commenting"></i> 附言
      </a>
    </li>

    <!-- {if $allow_use_surplus} 是否使用餘額 -->
    <li role="presentation" class="">
      <a href="#other_info" id="other_info-tab" role="tab" data-toggle="tab" aria-controls="other_info" aria-expanded="false" title="購買列表" class="pull-left">
        <i class="fa fa-exclamation-circle"></i> 餘額
      </a>
    </li>
    <!-- {/if} -->
    <!-- {if $allow_use_integral} 是否使用積點 -->
    <li role="presentation" class="">
      <a href="#allow_use_integral" id="allow_use_integral-tab" role="tab" data-toggle="tab" aria-controls="allow_use_integral" aria-expanded="false" title="禮卡" class="pull-left">
        <i class="fa fa-database"></i> 積點
      </a>
    </li>
    <!-- {/if} -->
    <!-- {if $allow_use_bonus} 是否使用紅包 -->
    <li role="presentation" class="">
      <a href="#allow_use_bonus" id="allow_use_bonus-tab" role="tab" data-toggle="tab" aria-controls="allow_use_bonus" aria-expanded="false" title="紅包" class="pull-left">
        <i class="fa fa-envelope-square text-danger"></i> 紅包
      </a>
    </li>
    <!-- {/if} -->
    <!-- {if $inv_content_list} 能否開發票 -->
    <li role="presentation" class="">
      <a href="#inv_content_list" id="inv_content_list-tab" role="tab" data-toggle="tab" aria-controls="inv_content_list" aria-expanded="false" title="發票" class="pull-left">
        <i class="fa fa-sticky-note"></i> 發票
      </a>
    </li>
    <!-- {/if} -->
   
    <!-- {if $how_oos_list} 是否使用缺貨處理 -->
    <li role="presentation" class="">
      <a href="#how_oos_list" id="how_oos_list-tab" role="tab" data-toggle="tab" aria-controls="how_oos_list" aria-expanded="false" title="{$lang.booking_process}" class="pull-left">
        <i class="fa fa-cubes"></i> {$lang.booking_process}
      </a>
    </li>
    <!-- {/if} 缺貨處理結束 -->
  </ul>
</div>
<div id="option_tabs-Content" class="tab-content">
  <!-- {if $allow_use_surplus} 是否使用餘額 -->
  <div role="tabpanel" class="tab-pane fade" id="allow_use_surplus" aria-labelledby="allow_use_surplus-tab">
    <table class="table table-striped table-hover">
      <tr>
        <td class="td_title">
          {$lang.use_surplus}:
        </td>
        <td>
          <input name="surplus" type="text" id="ECS_SURPLUS" class="form-control" placeholder="請輸入{$lang.use_surplus}" value="{$order.surplus|default:0}" onblur="changeSurplus(this.value)" {if $disable_surplus}disabled="disabled"{/if} />
        </td>
        <td>
          {$lang.your_surplus}{$your_surplus|default:0}<span id="ECS_SURPLUS_NOTICE">
        </td>
      </tr>
    </table>
  </div>
  <!-- {/if} 是否使用餘額 -->
  <!-- {if $allow_use_bonus} 是否使用紅包 -->
  <div role="tabpanel" class="tab-pane fade" id="allow_use_bonus" aria-labelledby="allow_use_bonus-tab">
    <table class="table table-striped table-hover">
      <tr>
        <td>
          <table width="100%">
            <tr>
              <td>
                {$lang.select_bonus}:
              </td>
              <td>
                <select name="bonus" onchange="changeBonus(this.value)" id="ECS_BONUS">
                  <option value="0" {if $order.bonus_id eq 0}selected{/if}>{$lang.please_select}:</option>
                  <!-- {foreach from=$bonus_list item=bonus} -->
                  <option value="{$bonus.bonus_id}" class="form-control" placeholder="請輸入{$lang.use_surplus}" {if $order.bonus_id eq $bonus.bonus_id}selected{/if}>{$bonus.type_name}[{$bonus.bonus_money_formated}]</option>
                  <!-- {/foreach} -->
                </select>
              </td>
            </tr>
            <tr>
              <td class="td_title">
                {$lang.input_bonus_no}:
              </td>
              <td>
                <input name="bonus_sn" type="text" class="form-control" placeholder="請輸入紅包序號" value="{$order.bonus_sn}"/>
              </td>
            </tr>
          </table>
        </td>
        <td>
          <input name="validate_bonus" type="button" value="{$lang.validate_bonus}" onclick="validateBonus(document.forms['theForm'].elements['bonus_sn'].value)" class="btn btn-danger" />
        </td>
      </tr>
    </table>
  </div>
  <!-- {/if} 是否使用紅包 -->
  <!-- {if $inv_content_list} 能否開發票 -->
  <div role="tabpanel" class="tab-pane fade" id="inv_content_list" aria-labelledby="inv_content_list-tab">
    <table class="table table-striped table-hover">
      <tr>
        <td>
          <input name="need_inv" type="checkbox" id="ECS_NEEDINV" onclick="changeNeedInv()" class="form-control" value="1" {if $order.need_inv}checked="true"{/if} />
        </td>
        <td>
          <!-- {if $inv_type_list} -->
          {$lang.invoice_type}:<select name="inv_type" id="ECS_INVTYPE" {if $order.need_inv neq 1}disabled="true"{/if} onchange="changeNeedInv()">
          {html_options options=$inv_type_list selected=$order.inv_type}</select>
          <!-- {/if} -->
          {$lang.invoice_title}:
          <input name="inv_payee" type="text" id="ECS_INVPAYEE" size="20" {if !$order.need_inv}disabled="true"{/if} value="{$order.inv_payee}" onblur="changeNeedInv()" />
          {$lang.invoice_content}:
          <select name="inv_content" id="ECS_INVCONTENT" {if $order.need_inv neq 1}disabled="true"{/if}  onchange="changeNeedInv()">
            {html_options values=$inv_content_list output=$inv_content_list selected=$order.inv_content}
          </select>
        </td>
      </tr>
    </table>
  </div>
  <!-- {/if} -->
 
  <div role="tabpanel" class="tab-pane fade active in" id="order_postscript" aria-labelledby="order_postscript-tab">
    <div>
      <textarea name="postscript" cols="80" rows="3" class="form-control" placeholder="請輸入{$lang.order_postscript}" id="postscript">{$order.postscript|escape}</textarea>
    </div>
  </div>
  <!-- {if $how_oos_list} 是否使用缺貨處理 -->
  <div role="tabpanel" class="tab-pane fade" id="how_oos_list" aria-labelledby="how_oos_list-tab">
    <div>
      <!-- {foreach from=$how_oos_list key=how_oos_id item=how_oos_name} -->
      <!-- {if $how_oos_id > 0} --><br><!-- {/if}  -->
      <label>
        <input name="how_oos" type="radio" value="{$how_oos_id}" {if $order.how_oos eq $how_oos_id}checked{/if} onclick="changeOOS(this)" />
      {$how_oos_name}</label>
      <!-- {/foreach} -->
    </div>
  </div>
  <!-- {/if} 缺貨處理結束 -->
</div>

<!-- order_total.lbi -->
{insert_scripts files='transport.js,utils.js'}
<div class="text-success">
  <!-- {if $smarty.session.user_id > 0 and ($config.use_integral or $config.use_bonus)} -->
  {$lang.complete_acquisition}
  <!-- {if $config.use_integral} 是否使用積點-->
  {$total.will_get_integral} {$points_name}
  <!-- {/if} -->
  <!-- {if $config.use_integral and $config.use_bonus} 是否同時使用積點折價券-->,{$lang.with_price}  <!-- {/if} -->
  <!-- {if $config.use_bonus} 是否使用折價券-->
  {$total.will_get_bonus}{$lang.de}{$lang.bonus}
  <!-- {/if} -->
</div>
<!-- {/if} -->
<div class="text-info">
  {$lang.goods_all_price}: {$total.goods_price_formated}
  <!-- {if $total.discount gt 0} 折扣 -->
  - {$lang.discount}:{$total.discount_formated}
  <!-- {/if} -->
  <!-- {if $total.tax gt 0} 稅 -->
  + {$lang.tax}:{$total.tax_formated}
  <!-- {/if} -->
  <!-- {if $total.shipping_fee > 0} 寄件費用 -->
  + {$lang.shipping_fee}:{$total.shipping_fee_formated}
  <!-- {/if} -->
  <!-- {if $total.shipping_insure > 0} 保值費用 -->
  + {$lang.insure_fee}:{$total.shipping_insure_formated}
  <!-- {/if} -->
  <!-- {if $total.pay_fee > 0} 付款費用 -->
  + {$lang.pay_fee}:{$total.pay_fee_formated}
  <!-- {/if} -->
  <!-- {if $total.pack_fee > 0} 包裝費用-->
  + {$lang.pack_fee}:{$total.pack_fee_formated}
  <!-- {/if} -->
  <!-- {if $total.card_fee > 0} 禮卡費用-->
  + {$lang.card_fee}:{$total.card_fee_formated}
  <!-- {/if} -->
</div>
<!-- {if $total.surplus > 0 or $total.integral > 0 or $total.bonus > 0} 使用餘額或積點或折價券 -->
<div class="text-warning">
  <!-- {if $total.surplus > 0} 使用餘額 -->
  - {$lang.use_surplus}:{$total.surplus_formated}
  <!-- {/if} -->
  <!-- {if $total.integral > 0} 使用積點 -->
  - {$lang.use_integral}:{$total.integral_formated}
  <!-- {/if} -->
  <!-- {if $total.bonus > 0} 使用折價券 -->
  - {$lang.use_bonus}:{$total.bonus_formated}
  <!-- {/if} -->
</div>
<!-- {/if} 使用餘額或積點或折價券 -->
<h3 class="">
<div class="text-danger">{$lang.total_fee}:<strong>{$total.amount_formated}</strong></div>
{if $is_group_buy}<span class="text-success">
{$lang.notice_gb_order_amount}</span>{/if}
<!--{if $total.exchange_integral }消耗積點--><br />
{$lang.notice_eg_integral}<span class="text-info">{$total.exchange_integral}</span>
<!--{/if}-->
</h3>
46
ECSHOP 響應式設計的製作 / 21、RWD響應式網頁設計- Ecshop 登入與收件地址
« 最新文章 由 andy 七月 22, 2019, 11:11:03 下午 »
當消費者確定進入結算中心時,可選登入、註冊或直接購買(視後台設定),若是會員登入且之前有購買紀錄,就會直接轉入結帳頁面,否則會與直接購買一樣轉入收件人填寫頁面,若是已登入會員則收件人資料將會自動寫入資料庫,供下次購買使用:
代碼: [選擇]
<div class="row">
  <div class="col-md-6">
    <h3 class="text-center"><i class="fa fa-sign-in"></i> 會員登入</h3>
    <!-- 開始會員登入註冊界面we-shop.net -->
    <form action="flow.php?step=login" method="post" name="loginForm" id="loginForm" onsubmit="return checkLoginForm(this)" class="form-inline">
      <table class="table">
        <tr>
          <th width="100" class="text-right">
            {$lang.username}
          </th>
          <td>
            <input name="username" type="text" class="form-control" placeholder="請輸入帳號" id="username" required />
          </td>
        </tr>
        <tr>
          <th class="text-right">
            {$lang.password}
          </th>
          <td><input name="password" type="password" class="form-control" placeholder="請輸入自訂密碼" id="password" required /></td>
        </tr>
        <!-- 判斷是否啟用驗證碼{if $enabled_login_captcha}we-shop.net -->
        <tr>
          <th class="text-right">
            {$lang.comment_captcha}
          </th>
          <td>
            <input type="text" size="8" name="captcha" class="form-control pull-left" style="width: 70px;margin-right: 5px;" />
            <img src="captcha.php?is_login=1&amp;{$rand}" alt="captcha" style="vertical-align: middle;cursor: pointer;margin-top: 6px;" onClick="this.src='captcha.php?is_login=1&amp;'+Math.random()" />
          </td>
        </tr>
        <!--{/if}-->
        <tr>
          <th class="text-right"> </th>
          <td colspan="2" class="text-center">
            <input type="checkbox" value="1" name="remember" id="remember" /><label for="remember">{$lang.remember}</label>
          </td>
        </tr>
        <tr>
          <td colspan="2" class="text-center">
            <a href="user.php?act=qpassword_name" class="btn btn-info">{$lang.get_password_by_question}</a>
            <a href="user.php?act=get_password" class="btn btn-info">{$lang.get_password_by_mail}</a>
          </td>
        </tr>
        <tr>
          <td colspan="2" class="text-center">
            <input type="submit" name="login" class="btn btn-info" value="{$lang.forthwith_login}" />
            <!-- {if $anonymous_buy eq 1} 是否允許未登入會員購物we-shop.net -->
            <input type="button" class="btn btn-info" value="{$lang.direct_shopping}" onclick="location.href='flow.php?step=consignee&amp;direct_shopping=1'" />
            <!-- {/if}we-shop.net -->
            <input name="act" type="hidden" value="signin" />
          </td>
        </tr>
      </table>
    </form>
  </div>
  <div class="col-md-6">
    <h3 class="text-center"><i class="fa fa-sign-in"></i> 註冊會員</h3>
    <form action="flow.php?step=login" method="post" name="formUser" id="registerForm" onsubmit="return checkSignupForm(this)" class="form-inline">
      <table class="table">
        <tr>
          <th width="100" class="text-right">
            {$lang.username}
          </th>
          <td>
            <input name="username" type="text" class="form-control" placeholder="請輸入帳號" id="username" required />
          </td>
        </tr>
        <tr>
          <th class="text-right">
            {$lang.email_address}
          </th>
          <td>
            <input name="email" type="text" class="form-control" placeholder="請輸入電子信蕭" id="email" required />
          </td>
        </tr>
        <tr>
          <th class="text-right">
            {$lang.password}
          </th>
          <td>
            <input name="password" type="password" class="form-control" placeholder="請輸入密碼" id="password" />
          </td>
        </tr>
        <tr>
          <th class="text-right">
            {$lang.confirm_password}
          </th>
          <td>
            <input name="confirm_password" type="password" class="form-control" placeholder="請再次輸入密碼" id="confirm_password" />
          </td>
        </tr>
        <!-- 判斷是否啟用驗證碼{if $enabled_register_captcha}we-shop.net -->
        <tr>
          <th class="text-right">
            {$lang.comment_captcha}
          </th>
          <td>
            <input type="text" size="8" class="form-control pull-left" style="width: 70px;margin-right: 5px;" placeholder="驗證碼" name="captcha" /><img src="captcha.php?{$rand}" alt="captcha" style="vertical-align: middle;cursor: pointer;margin-top: 6px;" onClick="this.src='captcha.php?'+Math.random()" />
          </td>
        </tr>
        <!--{/if}-->
        <tr>
          <td colspan="2" class="text-center">
            <input type="submit" class="btn btn-danger" name="Submit" value="{$lang.forthwith_register}" />
            <input name="act" type="hidden" value="signup" />
          </td>
        </tr>
      </table>
    </form>
    {if $need_rechoose_gift}
    <div class="text-center">{$lang.gift_remainder}</div>
    {/if}
    <!-- 結束會員登入註冊界面we-shop.net -->
  </div>
</div>

<!-- 開始收件人內容填寫界面we-shop.net -->
<div class="row">
    <div class="col-md-12">
        <h3 class="text-center"><i class="fa fa-sign-in"></i> {$lang.consignee_info}</h3>
        <!-- 如果有收件地址,循環顯示會員的收穫地址we-shop.net -->
        <!-- {foreach from=$consignee_list item=consignee key=sn}we-shop.net -->
        <form action="flow.php" method="post" name="theForm" id="theForm" onsubmit="return checkConsignee(this)" class="form">
            {include file='library/consignee.lbi'}
        </form>
        <!-- {/foreach}we-shop.net -->
    </div>
</div>

代碼: [選擇]
<style type="text/css">
/* 預設的css */
.th {background: transparent;color: #3b270f;padding: 6px 0;text-align: left;margin-bottom: 0;}
.th span{color: red;}
/* 當寬度小於750像素時 */
@media screen and (max-width: 750px){
.th {background: #3b270f;color: #f2f2f2;padding: 3px 0;text-align: center;margin-bottom: 5px;}
.th span{color: yellow;}
}
</style>
47
ECSHOP 響應式設計的製作 / 20、RWD響應式網頁設計- flow 購買清單列表
« 最新文章 由 andy 七月 22, 2019, 11:08:44 下午 »
ECSHOP的購買清單列表(flow.php?step=cart)包括購買清單、我的收藏、商品相關配件、優惠活動四個表格,不過我看過有些模板只用了購買清單而已,我的收藏、商品相關配件卻省略了,雖然這樣不影響網站運作,不過可能在不知覺中損失了許多訂單:
代碼: [選擇]
<div class="row">
  <div class="col-md-12 flow_cart">
    <!-- {if $goods_list} 購物車內容-->
        .....程式碼省略.....
    <!-- {else} -->
        .....程式碼省略.....
    <!-- {/if} -->
    <!-- {if $smarty.session.user_id gt 0} 已經登入-->
        <!-- {if $collection_goods} 收藏-->
            .....程式碼省略.....
        <!-- {/if} -->
    <!-- {/if} -->
    <!-- {if $fittings_list} 商品配件 -->
        .....程式碼省略.....
    <!-- {/if} -->
      <!-- {if $favourable_list} 優惠活動 -->
        .....程式碼省略.....
    <!-- {/if} -->
  </div>
</div>




在修改過程中如果遇到 javascript 中有類似紅色字的地方
代碼: [選擇]
Ajax.call('flow.php?step=add_to_cart', 'goods=' + goods.tojsONString(), fittings_to_flow_response, 'POST', 'jsON');
要改成
代碼: [選擇]
Ajax.call('flow.php?step=add_to_cart', 'goods=' + $.tojsON(goods), fittings_to_flow_response, 'POST', 'jsON');
48
ECSHOP 響應式設計的製作 / 19、RWD響應式網頁設計- flow 增加步驟提示
« 最新文章 由 andy 七月 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 的動態標籤,目的是依照不同的步驟分配給進度條不同的值,因此可以使進度調顯示不同長度...



49
ECSHOP 響應式設計的製作 / 18、RWD響應式網頁設計- flow 結帳頁面
« 最新文章 由 andy 七月 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...
50
ECSHOP 響應式設計的製作 / 17、RWD響應式網頁設計- goods 商品描述和其他
« 最新文章 由 andy 七月 22, 2019, 04:16:30 下午 »
商品詳情頁(goods.dwt)的下半部有商品描述、商品屬性、超值組合、商品標記 、購買記錄、商品評論、相同外觀樣式的商品、相關商品、瀏覽歷史,為了讓頁面不至於過長,因此使用TAB的方式,但是TAB在超小螢幕時,還是可能受寬度限制,因此配合下拉選單,使用 hidden-xs 可以讓元素在超小營幕時隱藏,visible-xs 則相反,效果如圖:
代碼: [選擇]
<div class="">
  <ul id="gtabs" class="nav nav-tabs" role="tablist">
    <!-- {if $goods.goods_desc} 描述-->
    <li role="presentation" class="active">
      <a href="#goods_desc" id="goods_desc-tab" role="tab" data-toggle="tab" aria-controls="goods_desc" aria-expanded="false" title="商品描述">
        <i class="fa fa-share-alt"></i>  描述
      </a>
    </li>
    <!-- {/if} -->
    <!-- {if $properties} 商品屬性-->
    ..................略.........................
    <!-- {/if} -->
    <!-- {if $package_list} 超值組合-->
    ..................略.........................
    <!-- {/if} -->
    ..................略.........................
    <!--購買記錄 {if $notes} -->
    ..................略.........................
    <!-- {/if} -->
    <!-- 商品評論 -->
    ..................略.........................
    <!-- {if $linked.goods} -->
    ..................略.........................
    <!-- {/if} -->
    <!--相關商品 {if $related_goods} -->
    ..................略.........................
    <!-- {/if} -->
    ..................略.........................
    <!-- 下拉選單 -->
    <li role="presentation" class="dropdown visible-xs">
      <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents" aria-expanded="false"><i class="fa fa-list-ul"></i>  更多...<span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
        <!-- {if $properties} 商品屬性-->
        <li>
          <a href="#properties" id="properties-tab" role="tab" data-toggle="tab" aria-controls="properties" aria-expanded="false" title="商品屬性">
            <i class="fa fa-asterisk"></i>  屬性
          </a>
        </li>
        <!-- {/if} -->
        <!-- {if $package_list} 超值組合-->
    ..................略.........................
        <!-- {/if} -->
    ..................略.........................
        <!--購買記錄 {if $notes} -->
    ..................略.........................
        <!-- {/if} -->
        <!-- 商品評論 -->
    ..................略.........................
        <!-- {if $linked.goods} -->
    ..................略.........................
        <!-- {/if} -->
        <!--相關商品 {if $related_goods} -->
    ..................略.........................
        <!-- {/if} -->
    ..................略.........................
      </ul>
    </li>
  </ul>
</div>
<div id="tabContent" class="tab-content">
  <div role="tabpanel" class="tab-pane fade" id="goods_desc" aria-labelledby="goods_desc-tab">
    {$goods.goods_desc}
  </div>
  <!-- 商品屬性 -->
  <div role="tabpanel" class="tab-pane fade" id="properties" aria-labelledby="properties-tab">
    {include file='library/properties.lbi'}
  </div>
  <!-- 超值組合 -->
  <div role="tabpanel" class="tab-pane fade" id="package" aria-labelledby="package-tab">
    {include file='library/package_goods.lbi'}
  </div>
  <!-- 商品標記 -->
  <div role="tabpanel" class="tab-pane fade active in" id="gtags" aria-labelledby="gtags-tab">
    {include file='library/goods_tags.lbi'}
  </div>
  <!--購買記錄 -->
  <div role="tabpanel" class="tab-pane fade" id="bought_note_guide" aria-labelledby="bought_note_guide-tab">
    {include file='library/bought_note_guide.lbi'}
  </div>
  <!-- 商品評論 -->
  <div role="tabpanel" class="tab-pane fade" id="comments" aria-labelledby="comments-tab">
    {include file='library/comments.lbi'}
  </div>
  <!--相同外觀樣式的商品 -->
  <div role="tabpanel" class="tab-pane fade" id="attrlinked" aria-labelledby="attrlinked-tab">
    {include file='library/attrlinked.lbi'}
  </div>
  <!--相關商品 -->
  <div role="tabpanel" class="tab-pane fade" id="related" aria-labelledby="related-tab">
    {include file='library/related.lbi'}
  </div>
  <!--瀏覽歷史 -->
  <div role="tabpanel" class="tab-pane fade" id="history" aria-labelledby="history-tab">
    {include file='library/history.lbi'}
  </div>
</div>



給 TAG 表單加上 class="form-inline" 可以讓包在 class="form-group" 裡的元素顯示在同一行(需要給元素指定寬度為 auto),如要自訂元素寬度請加 pull-left,如下列的  name="tag",class="btn btn-xxxxx" 可以為 button, input, a 等標籤產生按鈕外觀,btn-xs 為小型按鈕,btn-lg 為大型按鈕,不指定則預設為中型按鈕,所有設置了 class="form-control" 的 input、textarea 和 select 元素都將被預設寬度屬性為 width: 100%;
代碼: [選擇]
<style type="text/css">
  #ECS_TAGS .btn-xs {margin: 5px;}
</style>
<div id="" class="TabPage">
  <form name="tagForm" onsubmit="return submitTag(this)" class="form-inline">
    <div id="ECS_TAGS">
      {$lang.goods_tag}:
      <!-- 標記{foreach from=$tags item=tag}-->
      <a href="search.php?keywords={$tag.tag_words|escape:url}" class="btn btn-info btn-xs">{$tag.tag_words|escape:html} (<strong>{$tag.tag_count}</strong>)</a>&nbsp;&nbsp;
      <!-- 結束標記{/foreach} -->
    </div>
    <div class="form-group">
      <input type="text" name="tag" id="tag" class="form-control pull-left" placeholder="請輸入標籤名稱" style="width: 210px;margin-right: 6px;" />
      <button name="submit" type="submit" class="btn btn-danger">增加標籤</button>
      <input type="hidden" name="goods_id" value="{$goods.goods_id}" />
    </div>
  </form>
</div>
 


評論表單程式碼分為列表、分頁與表單三部份,其中列表與表單部份都使用表格方便排版,列表加上 table-striped 可以有隔行變色的效果。如果你希望表格具有響應式效果,只需將表包裹在 class="table-responsive" 的 DIV 裡就行了,如果你的php版本大於5.2,可能產生驗證碼不顯示或表單無法提交的問題,需要特別留意,如果問題無法解決,請到  VIP室發問:
代碼: [選擇]
<table class="table table-hover table-striped">
<tbody>
  <!--{foreach from=$comments item=comment}-->
  <tr>
    <td><i class="fa fa-user"></i>
      <!-- {if $comment.username} -->{$comment.username|escape:html}
      <!-- {else} -->
      {$lang.anonymous}
      <!-- {/if} -->
    </td>
    <td align="right">
      <img src="../images/stars{$comment.rank}.gif" width="64" height="12" alt="{$comment.comment_rank}" />
        <i class="fa fa-clock-o"></i>  {$comment.add_time}
    </td>
  </tr>
  <tr>
    <td colspan="2" >
      <i class="fa fa-commenting pull-left"></i>{$comment.content}
  <!--{if $comment.re_content} 回覆-->
      <div class="bs-callout bs-callout-danger">
        <h4>
          <i class="fa fa-clock-o"></i>  {$comment.re_add_time}
          <i class="fa fa-pencil-square"></i>  {$lang.admin_username} {$comment.re_username|escape:html} 回覆
        </h4>
        <p>{$comment.re_content}</p>
      </div>
  <!--{/if}-->
    </td>
  </tr>
  <!--{foreachelse}-->
  <tr>
    <td colspan="2" class="text-center">
      <h3 class="text-danger">
        {$lang.no_comments}
      </h3>
    </td>
  </tr>
  <!--{/foreach}-->
</tbody>
</table>
<!-- {if $comments} 分頁-->
<div id="pager">
  <i class="fa fa-pagelines"></i>  {$lang.pager_1}{$pager.record_count}{$lang.pager_2}{$lang.pager_3}{$pager.page_count}{$lang.pager_4}
  <span>
    <a href="{$pager.page_first}">{$lang.page_first}</a>
    <a href="{$pager.page_prev}">{$lang.page_prev}</a>
    <a href="{$pager.page_next}">{$lang.page_next}</a>
    <a href="{$pager.page_last}">{$lang.page_last}</a>
  </span>
</div>
<!-- {/if} -->
<!-- 評論表單 -->
<div class="commentsList">
<style type="text/css">
  #pager {line-height: 28px;text-align: right;background: #e3e3e3;border-radius: 5px;margin: 8px 0;}
  .comment_table th {min-width: 75px;max-width: 120px;text-align: left;}
  .comment_table .col-xs-6 {padding: 0;}
</style>
<form action="javascript:;" onsubmit="submitComment(this)" method="post" name="commentForm" id="commentForm" class="form">
  <table class="table comment_table">
    <tr class="text-left">
      <th><i class="fa fa-user"></i>  帳號:</th>
      <td><!--{if $smarty.session.user_name}-->{$smarty.session.user_name}<!--{else}-->{$lang.anonymous}<!--{/if}--></td>
    </tr>
    <tr>
      <th><i class="fa fa-envelope-o hidden-xs"></i>  {$lang.email}</th>
      <td><input name="email" type="text" id="email" class="form-control" placeholder="請輸入電子信箱" required="required" value="{$smarty.session.email|escape}" style="max-width: 500px;" /></td>
    </tr>
    <tr>
      <th><i class="fa fa-star hidden-xs"></i>  {$lang.comment_rank}</th>
      <td>
        <div class="col-xs-6 col-sm-2 col-md-2">
          <input name="comment_rank" type="radio" value="1" id="comment_rank1" /> <img src="../images/stars1.gif" />
        </div>
        <div class="col-xs-6 col-sm-2 col-md-2">
          <input name="comment_rank" type="radio" value="2" id="comment_rank2" /> <img src="../images/stars2.gif" />
        </div>
        <div class="col-xs-6 col-sm-2 col-md-2">
          <input name="comment_rank" type="radio" value="3" id="comment_rank3" /> <img src="../images/stars3.gif" />
        </div>
        <div class="col-xs-6 col-sm-2 col-md-2">
          <input name="comment_rank" type="radio" value="4" id="comment_rank4" /> <img src="../images/stars4.gif" />
        </div>
        <div class="col-xs-6 col-sm-2 col-md-2">
          <input name="comment_rank" type="radio" value="5" checked="checked" id="comment_rank5" /> <img src="../images/stars5.gif" />
         </div>
      </td>
    </tr>
    <!-- 判斷是否啟用驗證碼{if $enabled_captcha} -->
    <tr>
      <th valign="top"><i class="fa fa-keyboard-o hidden-xs"></i>  {$lang.comment_captcha}</th>
      <td style="line-height: 28px;">
        <input type="text" style="width: 80px;margin-right: 10px;" class="form-control pull-left text-center" placeholder="請輸入驗證碼" required="required" name="captcha" />
        <img src="captcha.php?{$rand}" alt="captcha" style="vertical-align: middle;cursor: pointer;" onClick="this.src='captcha.php?'+Math.random()" /> </td>
    </tr>
    <!--{/if}-->
    <tr>
      <th valign="top"><i class="fa fa-comments hidden-xs"></i>  {$lang.comment_content}</th>
      <td><textarea name="content" class="form-control" placeholder="請輸入{$lang.comment_content}" required="required" id="content" style="max-width: 500px;"></textarea></td>
    </tr>
    <tr>
      <td colspan="2" class="text-center">
        <input type="hidden" name="cmt_type" value="{$comment_type}" />
        <input type="hidden" name="id" value="{$id}" />
        <input type="submit" name="Submit" class="btn btn-danger" value="{$lang.submit_comment}" />
        <input type="reset" name="Submit2" class="btn btn-warning" value="{$lang.button_reset}" />
      </td>
    </tr>
  </table>
</form>
</div>



瀏覽歷史與商品分類頁共用,但因寬度不同因此需要用 {$pname} 與 css3 的媒體查詢『@media screen and (){...}』來判斷並指定寬度,商品名稱的字數控制在 includes/lib_insert.php 裡的 insert_history() 函數
代碼: [選擇]
function insert_history()
{
.....................sub_str($goods['short_name'], 14).........................
}
你可以修改(增減)其中的 14 來改變商品名稱的顯示長度
代碼: [選擇]
{insert_scripts files='transport.js'}
<style type="text/css">
    .history-block {margin-bottom: 15px;}
    {if $pname eq 'category'}
    .history-title {background: #3b270f;color:#fff;font-size: 1.3em;font-weight: bold;line-height: 32px;font-family:"微軟正黑體", Verdana, Arial,sans-serif;padding: 0 15px;border-radius: 6px 6px 0 0;}
    {else}
    .history-title {display: none;}
    {/if}
    .history-content {margin-bottom: 10px;}
    .history-content img {max-width: 50px;max-height: 50px;border: none;transition: All 0.5s ease-in-out;-webkit-transition: All 0.5s ease-in-out;-moz-transition: All 0.5s ease-in-out;-o-transition: All 0.5s ease-in-out;float:left;margin-right: 6px;}
    .history-content img:hover {opacity:0.5;}
    {if $pname eq 'category'}
    #history_list ul {margin: 8px 0 0 -40px;height: 70px;overflow: hidden;}
    {else}
    #history_list ul {height: 70px;overflow: hidden;margin: 8px auto 0 -40px;}
    @media screen and (min-width: 1200px){
        #history_list ul {float: left;width: 28%;}
    }
    @media screen and (max-width: 1200px){
        #history_list ul {float: left;width: 37.2%;}
    }
    @media screen and (max-width: 992px){
        #history_list ul {float: left;width: 39.1%;}
    }
    @media screen and (max-width: 768px){
        #history_list ul {float: left;width: 55%;}
    }
    @media screen and (max-width: 480px){
        #history_list ul {clear: both;width: 100%;}
    }
    {/if}
    #clear_history a {cursor: pointer;float:right;border:1px solid #aaa;background: #500;border-radius: 5px;color:#fff;}
</style>
<div class="" id='history_div'>
    <div class="history-title">{$lang.view_history}</div>
    <div class="history-content" id='history_list'>
        {insert name='history'}
    </div>
</div>




頁: « 1 2 3 4 5 6 7 8 9 10 »