商品详情页 goods.dwt

2018-11-05 18:29 更新
abcdefghijklmn

A.购物车

1,设置方法

  • 程序自动读取购物车的商品数量


2,代码相关

cart.lbi 中

{insert_scripts files='transport.js'}
<div class="cart" id="ECS_CARTINFO">
 {insert name='cart_info'}
</div>
<div class="blank5"></div>

3,相关css

style.css 中

/*购物车*/
   .cart{background:url(images/catBg.gif) no-repeat left top; padding:15px 10px 15px 50px;
   color:#006bcd; height:50px;  _padding:12px 10px 15px 50px;
   }
   .cart a{color:#006bcd; text-decoration:none;}
   .cart a:hover{color:#006bcd; text-decoration:underline;}


B.商品分类树

1,设置方法

  • 可以在后台

  • 商店管理-商品分类
  • 里修改


  • 详细教程:http://www.ecmoban.com/article-1688.html

2,代码相关

category_tree.lbi 中

<div class="box">
 <div class="box_1">
  <div id="category_tree">
    <!--{foreach from=$categories item=cat}-->
     <dl>
     <dt><a href="{$cat.url}">{$cat.name|escape:html}</a></dt>
     <!--{foreach from=$cat.cat_id item=child}-->
     <dd><a href="{$child.url}">{$child.name|escape:html}</a></dd>
       <!--{foreach from=$child.cat_id item=childer}-->
       <dd>  <a href="{$childer.url}">{$childer.name|escape:html}</a></dd>
       <!--{/foreach}-->
     <!--{/foreach}-->
       
       </dl>
    <!--{/foreach}--> 
  </div>
 </div>
</div>
<div class="blank5"></div>

3,相关css

style.css 中

/*商品分类*/
   #category_tree{border:4px solid #f1faff; background-color:#fff;}
   #category_tree dl{margin:6px;}
   #category_tree dt{background:url(images/lineBg.gif) repeat-x left bottom;
   color:#3f3f3f;  padding:2px 0 3px 12px;
   }
   #category_tree dt a{background:url(images/bg.gif) no-repeat 0 -69px;
   color:#3f3f3f; padding-left:15px; text-decoration:none;
   }
   #category_tree dd{padding:3px 0 3px 10px;}
   #category_tree dd a{color:#404040; text-decoration:none;}
   #category_tree dd a:hover{color:#ff6600; text-decoration:none;}


C.相关商品

1,设置方法

    后台商品列表-商品编辑-关联商品,设置与该商品关联的商品

2,代码相关

goods_related.lbi 中

<!-- {if $related_goods} -->
<div class="box">
     <div class="box_1">
      <h3><span>{$lang.releate_goods}</span></h3>
      <div class="boxCenterList clearfix">
      <!--{foreach from=$related_goods item=releated_goods_data}-->
        <ul class="clearfix">
          <li class="goodsimg"><a href="{$releated_goods_data.url}"><img src="{$releated_goods_data.goods_thumb}" alt="{$releated_goods_data.goods_name}" class="B_blue" /></a></li>
          <li>
        <a href="{$releated_goods_data.url}" title="{$releated_goods_data.goods_name}">{$releated_goods_data.short_name}</a><br />
        <!-- {if $releated_goods_data.promote_price neq 0} -->
        {$lang.promote_price}<font class="f1">{$releated_goods_data.formated_promote_price}</font>
        <!-- {else} -->
        {$lang.shop_price}<font class="f1">{$releated_goods_data.shop_price}</font>
        <!-- {/if} -->
          </li>
        </ul>
        <!--{/foreach}-->
      </div>
     </div>
    </div>
<div class="blank5"></div>
<!-- {/if} -->

3,相关css

style.css 中

.boxCenterList{padding:8px;}
  
   /*相关商品*/
   .boxCenterList ul{height:1%; margin-bottom:5px;}
   .boxCenterList li{float:left; width:120px;}
   .boxCenterList li.goodsimg{width:48px; margin-right:10px;}
   .boxCenterList li.goodsimg img{width:48px; height:48px; display:block;}


D.相关配件

1,设置方法

    后台商品列表-商品编辑-配件,设置该商品的配件

2,代码相关

goods_fittings.lbi 中

<!-- {if $fittings} -->
<div class="box">
 <div class="box_1">
  <h3><span>{$lang.accessories_releate}</span></h3>
  <div class="boxCenterList clearfix">
    <!--{foreach from=$fittings item=goods}-->
    <ul class="clearfix">
      <li class="goodsimg">
      <a href="{$goods.url}" target="_blank"><img src="{$goods.goods_thumb}" alt="{$goods.name|escape:html}" class="B_blue" /></a>
      </li>
      <li>
      <a href="{$goods.url}" target="_blank" title="{$goods.goods_name|escape:html}">{$goods.short_name|escape:html}</a><br />
      {$lang.fittings_price}<font class="f1">{$goods.fittings_price}</font><br />
      </li>
    </ul>
    <!--{/foreach}-->
  </div>
 </div>
</div>
<div class="blank5"></div>
<!-- {/if} -->

3,相关css

style.css 中

.boxCenterList{padding:8px;}
  
   /*相关商品*/
   .boxCenterList ul{height:1%; margin-bottom:5px;}
   .boxCenterList li{float:left; width:120px;}
   .boxCenterList li.goodsimg{width:48px; margin-right:10px;}
   .boxCenterList li.goodsimg img{width:48px; height:48px; display:block;}


E.属性关联商品

1,设置方法

2,代码相关

goods_attrlinked.lbi 中

<!-- 开始循环属性关联的商品 {foreach from=$attribute_linked item=linked}-->
<!-- {if $linked.goods} -->
<div class="box">
 <div class="box_1">
  <h3><span title="{$linked.title}">{$linked.title|truncate:11:"...":true}</span></h3>
  <div class="boxCenterList clearfix">
  <!-- {foreach from=$linked.goods item=linked_goods_data} -->
  <ul class="clearfix">
      <li class="goodsimg">
      <a href="{$linked_goods_data.url}" target="_blank"><img src="{$linked_goods_data.goods_thumb}" alt="{$linked_goods_data.name|escape:html}" class="B_blue" /></a>
      </li>
      <li>
      <a href="{$linked_goods_data.url}" target="_blank" title="{$goods.linked_goods_data_name|escape:html}">{$linked_goods_data.short_name|escape:html}</a><br />
      {$lang.shop_price}<font class="f1">{$linked_goods_data.shop_price}</font><br />
      </li>
    </ul>
  <!-- {/foreach} -->
  </div>
 </div>
</div>
<div class="blank5"></div>
<!-- {/if} -->
<!-- 结束属性关联的商品 {/foreach}-->

3,相关css

style.css 中

.boxCenterList{padding:8px;}
  
   /*相关商品*/
   .boxCenterList ul{height:1%; margin-bottom:5px;}
   .boxCenterList li{float:left; width:120px;}
   .boxCenterList li.goodsimg{width:48px; margin-right:10px;}
   .boxCenterList li.goodsimg img{width:48px; height:48px; display:block;}


F.浏览历史记录

1,设置方法

  • 自动调用已经浏览的过的商品

2,代码相关

history.lbi 中

<div class="box" id='history_div'>
 <div class="box_1">
  <h3><span>{$lang.view_history}</span></h3>
  <div class="boxCenterList clearfix" id='history_list'>
    {insert name='history'}
  </div>
 </div>
</div>
<div class="blank5"></div>
<script type="text/javascript">
if (document.getElementById('history_list').innerHTML.replace(/\s/g,'').length<1)
{
    document.getElementById('history_div').style.display='none';
}
else
{
    document.getElementById('history_div').style.display='block';
}
function clear_history()
{
Ajax.call('user.php', 'act=clear_history',clear_history_Response, 'GET', 'TEXT',1,1);
}
function clear_history_Response(res)
{
document.getElementById('history_list').innerHTML = '{$lang.no_history}';
}
</script>includes/lib_insert.php 中(这个比较特殊,需要在程序里修改)$str.='<ul class="clearfix"><li class="goodsimg"><a href="'.$goods['url'].'" target="_blank"><img src="'.$goods['goods_thumb'].'" alt="'.$goods['goods_name'].'" class="B_blue" /></a></li><li><a href="'.$goods['url'].'" target="_blank" title="'.$goods['goods_name'].'">'.$goods['short_name'].'</a><br />'.$GLOBALS['_LANG']['shop_price'].'<font class="f1">'.$goods['shop_price'].'</font><br /></li></ul>';
        }
        $str .= '<ul id="clear_history"><a onclick="clear_history()">' . $GLOBALS['_LANG']['clear_history'] . '</a></ul>';

3,相关css

style.css 中

/*相关商品*/
.boxCenterList ul{height:1%; margin-bottom:5px;}
.boxCenterList li{float:left; width:120px;}
.boxCenterList li.goodsimg{width:48px; margin-right:10px;}
.boxCenterList li.goodsimg img{width:48px; height:48px; display:block;}
/*浏览历史,收藏*/
#history li{width:100%;}
#clear_history a{background:none; padding:0px; color:#3f3f3f; text-decoration:none;float:right;cursor:pointer;}


G.商品图片与商品相册

1,设置方法

  • 可以在后台

  • 商店管理-商品列表
  • 里添加商品图片


  • 上传商品图片
  • 商品相册则可以在后台

  • 商品编辑-商品相册
  • 里添加商品图片


  • 商品相册

2,代码相关

goods.dwt 中

<div class="imgInfo">
     <!-- {if $pictures}-->
     <a href="javascript:;" onclick="window.open('gallery.php?id={$goods.goods_id}'); return false;">
      <img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}"/>
     </a>
         <!-- {else} -->
         <img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}"/>
         <!-- {/if}-->
     <div class="blank5"></div>
     <!--相册 START-->
      <!-- #BeginLibraryItem "/library/goods_gallery.lbi" --><!-- #EndLibraryItem -->
     <!--相册 END-->
         <div class="blank5"></div>

     </div>goods_gellery.lbi 中<!-- {if $pictures}-->
 <div class="clearfix">
      <span onmouseover="moveLeft()" onmousedown="clickLeft()" onmouseup="moveLeft()" onmouseout="scrollStop()"></span>
      <div class="gallery">
        <div id="demo">
          <div id="demo1" style="float:left">
            <ul>
             <!-- {foreach from=$pictures item=picture}-->
            <li><a href="gallery.php?id={$id}&img={$picture.img_id}" target="_blank"><img src="{if $picture.thumb_url}{$picture.thumb_url}{else}{$picture.img_url}{/if}" alt="{$goods.goods_name}" class="B_blue" /></a>
            </li>
            <!--{/foreach}-->
            </ul>
          </div>
          <div id="demo2" style="display:inline; overflow:visible;"></div>
        </div>
      </div>
      <span onmouseover="moveRight()" onmousedown="clickRight()" onmouseup="moveRight()" onmouseout="scrollStop()" class="spanR"></span>
      <script>
      function $gg(id){  
        return (document.getElementById) ? document.getElementById(id): document.all[id]
      }
      
      var boxwidth=53;//跟图片的实际尺寸相符
      
      var box=$gg("demo");
      var obox=$gg("demo1");
      var dulbox=$gg("demo2");
      obox.style.width=obox.getElementsByTagName("li").length*boxwidth+'px';
      dulbox.style.width=obox.getElementsByTagName("li").length*boxwidth+'px';
      box.style.width=obox.getElementsByTagName("li").length*boxwidth*3+'px';
      var canroll = false;
      if (obox.getElementsByTagName("li").length >= 4) {
        canroll = true;
        dulbox.innerHTML=obox.innerHTML;
      }
      var step=5;temp=1;speed=50;
      var awidth=obox.offsetWidth;
      var mData=0;
      var isStop = 1;
      var dir = 1;
      
      function s(){
        if (!canroll) return;
        if (dir) {
      if((awidth+mData)>=0)
      {
      mData=mData-step;
      }
      else
      {
      mData=-step;
      }
      } else {
        if(mData>=0)
        {
        mData=-awidth;
        }
        else
        {
        mData+=step;
        }
      }
      
      obox.style.marginLeft=mData+"px";
      
      if (isStop) return;
      
      setTimeout(s,speed)
      }
      
      
      function moveLeft() {
          var wasStop = isStop;
          dir = 1;
          speed = 50;
          isStop=0;
          if (wasStop) {
            setTimeout(s,speed);
          }
      }
      
      function moveRight() {
          var wasStop = isStop;
          dir = 0;
          speed = 50;
          isStop=0;
          if (wasStop) {
            setTimeout(s,speed);
          }
      }
      
      function scrollStop() {
        isStop=1;
      }
      
      function clickLeft() {
          var wasStop = isStop;
          dir = 1;
          speed = 25;
          isStop=0;
          if (wasStop) {
            setTimeout(s,speed);
          }
      }
      
      function clickRight() {
          var wasStop = isStop;
          dir = 0;
          speed = 25;
          isStop=0;
          if (wasStop) {
            setTimeout(s,speed);
          }
      }
      </script> 
     </div>
  <!-- {/if}-->

3,相关css

style.css 中

#goodsInfo{background:#f2f2f2; padding:8px; _height:1%;}
#goodsInfo .imgInfo{width:230px; float:left; margin-right:10px; overflow:hidden;}
#goodsInfo .imgInfo .thumb{width:230px; height:230px; display:block;}/*商品详情图片*/
#goodsInfo span{width:4px; height:48px; background:url(images/bg.gif) no-repeat 0 -527px; float:left;}
#goodsInfo span.spanR{width:4px; height:48px; background:url(images/bg.gif) no-repeat -5px -527px; float:right;}
#goodsInfo .gallery{width:204px; float:left; margin-left:10px; _margin-left:5px; overflow:hidden;}
#goodsInfo .gallery ul{width:auto;}
#goodsInfo .gallery li{float:left; width:48px; margin:0 2px;}
#goodsInfo .gallery li img{width:46px; height:46px; display:block;}


H.商品详细信息

1,设置方法

2,代码相关

goods.dwt 中

<div class="textInfo">
     <form action="javascript:addToCart({$goods.goods_id})" method="post" name="ECS_FORMBUY" id="ECS_FORMBUY" >
     <div class="clearfix">
      <p class="f_l">{$goods.goods_style_name}</p>
      <p class="f_r">
      {if $prev_good}
      <a href="{$prev_good.url}"><img alt="prev" src="./images/up.gif" /></a>
      {/if}
      {if $next_good}
      <a href="{$next_good.url}"><img alt="next" src="./images/down.gif" /></a>
      {/if}
      </p>
      </div>
      <ul>
       <!-- {if $promotion} -->
      <li class="padd">
      <!-- {foreach from=$promotion item=item key=key} 优惠活动-->
      {$lang.activity}
      <!-- {if $item.type eq "snatch"} -->
      <a href="snatch.php" title="{$lang.snatch}" style="font-weight:100; color:#006bcd; text-decoration:none;">[{$lang.snatch}]</a>
      <!-- {elseif $item.type eq "group_buy"} -->
      <a href="group_buy.php" title="{$lang.group_buy}" style="font-weight:100; color:#006bcd; text-decoration:none;">[{$lang.group_buy}]</a>
      <!-- {elseif $item.type eq "auction"} -->
      <a href="auction.php" title="{$lang.auction}" style="font-weight:100; color:#006bcd; text-decoration:none;">[{$lang.auction}]</a>
      <!-- {elseif $item.type eq "favourable"} -->
      <a href="activity.php" title="{$lang.favourable}" style="font-weight:100; color:#006bcd; text-decoration:none;">[{$lang.favourable}]</a>
      <!-- {/if} -->
      <a href="{$item.url}" title="{$lang.$item.type} {$item.act_name}{$item.time}" style="font-weight:100; color:#006bcd;">{$item.act_name}</a><br />
      <!-- {/foreach} -->
      </li>
      <!-- {/if} -->
      <li class="clearfix">
       <dd>
       <!-- {if $cfg.show_goodssn} 显示商品货号-->
       <strong>{$lang.goods_sn}</strong>{$goods.goods_sn}
       <!-- {/if} -->
       </dd>
       <dd class="ddR">
       <!-- {if $goods.goods_number neq "" and $cfg.show_goodsnumber} 商品库存-->
        <!-- {if $goods.goods_number eq 0} -->
          <strong>{$lang.goods_number}</strong>
          <font color='red'>{$lang.stock_up}</font>
        <!-- {else} -->
          <strong>{$lang.goods_number}</strong>
          {$goods.goods_number} {$goods.measure_unit}
        <!-- {/if} -->
      <!-- {/if} -->
       </dd>
      </li>
      <li class="clearfix">
       <dd>
       <!-- {if $goods.goods_brand neq "" and $cfg.show_brand} 显示商品品牌-->
       <strong>{$lang.goods_brand}</strong><a href="{$goods.goods_brand_url}" >{$goods.goods_brand}</a>
       <!--{/if}-->
       </dd>
       <dd class="ddR">
       <!-- {if $cfg.show_goodsweight} 商品重量-->
       <strong>{$lang.goods_weight}</strong>{$goods.goods_weight}
       <!-- {/if} -->
       </dd>
      </li>
      <li class="clearfix">
       <dd>
       <!-- {if $cfg.show_addtime} 上架时间-->
      <strong>{$lang.add_time}</strong>{$goods.add_time}
      <!-- {/if} -->
       </dd>
       <dd class="ddR">
       <!--点击数-->
       <strong>{$lang.goods_click_count}:</strong>{$goods.click_count}
       </dd>
      </li>
      <li class="clearfix">
       <dd class="ddL">
       <!-- {if $cfg.show_marketprice} 市场价格-->
       <strong>{$lang.market_price}</strong><font class="market">{$goods.market_price}</font><br />
       <!-- {/if} -->
       <!--本店售价-->
       <strong>{$lang.shop_price}</strong><font class="shop" id="ECS_SHOPPRICE">{$goods.shop_price_formated}</font><br />
       <!-- {foreach from=$rank_prices item=rank_price key=key} 会员等级对应的价格-->
       <strong>{$rank_price.rank_name}:</strong><font class="shop" id="ECS_RANKPRICE_{$key}">{$rank_price.price}</font><br />
       <!--{/foreach}-->
       </dd>
       <dd style="width:48%; padding-left:7px;">
       <strong>{$lang.goods_rank}</strong>
      <img src="images/stars{$goods.comment_rank}.gif" alt="comment rank {$goods.comment_rank}" />
       </dd>
      </li>

      <!--{if $volume_price_list } -->
      <li class="padd">
       <font class="f1">{$lang.volume_price}:</font><br />
       <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#aad6ff">
        <tr>
          <td align="center" bgcolor="#FFFFFF"><strong>{$lang.number_to}</strong></td>
          <td align="center" bgcolor="#FFFFFF"><strong>{$lang.preferences_price}</strong></td>
        </tr>
        <!-- {foreach from=$volume_price_list item=price_list key=price_key} -->
        <tr>
        <td align="center" bgcolor="#FFFFFF" class="shop">{$price_list.number}</td>
        <td align="center" bgcolor="#FFFFFF" class="shop">{$price_list.format_price}</td>
        </tr>
        <!-- {/foreach} -->
       </table>
      </li>
      <!--{/if}-->

      <!--{if $goods.is_promote and $goods.gmt_end_time } 促销-->
      {insert_scripts files='lefttime.js'}
      <li class="padd loop" style="margin-bottom:5px; border-bottom:1px dashed #ccc;">
      <strong>{$lang.promote_price}</strong><font class="shop">{$goods.promote_price}</font><br />
      <strong>{$lang.residual_time}</strong>
      <font class="f4" id="leftTime">{$lang.please_waiting}</font><br />
      </li>
      <!--{/if}-->
      <li class="clearfix">
       <dd>
       <strong>{$lang.amount}:</strong><font id="ECS_GOODS_AMOUNT" class="shop"></font>
       </dd>
       <dd class="ddR">
       <!-- {if $goods.give_integral > 0} 购买此商品赠送积分-->
        <strong>{$lang.goods_give_integral}</strong><font class="f4">{$goods.give_integral} {$points_name}</font>
        <!-- {/if} -->
       </dd>
      </li>
      <!-- {if $goods.bonus_money} 红包-->
      <li class="padd loop" style="margin-bottom:5px; border-bottom:1px dashed #ccc;">
      <strong>{$lang.goods_bonus}</strong><font class="shop">{$goods.bonus_money}</font><br />
      </li>
      <!-- {/if} -->
      <li class="clearfix">
       <dd>
       <strong>{$lang.number}:</strong>
        <input name="number" type="text" id="number" value="1" size="4" onblur="changePrice()" style="border:1px solid #ccc; "/>
       </dd>
       <dd class="ddR">
       <!-- {if $cfg.use_integral} 购买此商品可使用积分-->
       <strong>{$lang.goods_integral}</strong><font class="f4">{$goods.integral} {$points_name}</font>
       <!-- {/if} -->
       </dd>
      </li>
      <!-- {if $goods.is_shipping} 为免运费商品则显示-->
      <li style="height:30px;padding-top:4px;">
      {$lang.goods_free_shipping}<br />
      </li>
      <!-- {/if} -->
      <!-- {* 开始循环所有可选属性 *} -->
      <!-- {foreach from=$specification item=spec key=spec_key} -->
      <li class="padd loop">
      <strong>{$spec.name}:</strong><br />
        <!-- {* 判断属性是复选还是单选 *} -->
                    <!-- {if $spec.attr_type eq 1} -->
                      <!-- {if $cfg.goodsattr_style eq 1} -->
                        <!-- {foreach from=$spec.values item=value key=key} -->
                        <label for="spec_value_{$value.id}">
                        <input type="radio" name="spec_{$spec_key}" value="{$value.id}" id="spec_value_{$value.id}" {if $key eq 0}checked{/if} onclick="changePrice()" />
                        {$value.label} [{if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if} {$value.format_price|abs}] </label><br />
                        <!-- {/foreach} -->
                        <input type="hidden" name="spec_list" value="{$key}" />
                        <!-- {else} -->
                        <select name="spec_{$spec_key}" onchange="changePrice()">
                          <!-- {foreach from=$spec.values item=value key=key} -->
                          <option label="{$value.label}" value="{$value.id}">{$value.label} {if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if}{if $value.price neq 0}{$value.format_price}{/if}</option>
                          <!-- {/foreach} -->
                        </select>
                        <input type="hidden" name="spec_list" value="{$key}" />
                      <!-- {/if} -->
                    <!-- {else} -->
                      <!-- {foreach from=$spec.values item=value key=key} -->
                      <label for="spec_value_{$value.id}">
                      <input type="checkbox" name="spec_{$spec_key}" value="{$value.id}" id="spec_value_{$value.id}" onclick="changePrice()" />
                      {$value.label} [{if $value.price gt 0}{$lang.plus}{elseif $value.price lt 0}{$lang.minus}{/if} {$value.format_price|abs}] </label><br />
                      <!-- {/foreach} -->
                      <input type="hidden" name="spec_list" value="{$key}" />
                    <!-- {/if} -->
      </li>
      <!-- {/foreach} -->
      <!-- {* 结束循环可选属性 *} -->
      <li class="padd">
      <a href="javascript:addToCart({$goods.goods_id})"><img src="images/bnt_cat.gif" /></a>
      <a href="javascript:collect({$goods.goods_id})"><img src="images/bnt_colles.gif" /></a>
      <!-- {if $affiliate.on} -->
      <a href="user.php?act=affiliate&goodsid={$goods.goods_id}"><img src='images/bnt_recommend.gif'></a>
      <!-- {/if} -->
      </li>
      </ul>
      </form>
     </div>

3,相关css

style.css 中

/*文字信息*/
   #goodsInfo .textInfo{background:#fff; width:473px; float:left; padding:10px;}
   #goodsInfo .textInfo p{font-size:14px; font-weight:bold; padding:0 5px 5px 8px;}
   #goodsInfo .textInfo ul{border-top:1px solid #ccc;}
   #goodsInfo .textInfo li{background:url(images/lineBg.gif) repeat-x left bottom; padding:0px 8px; _height:1%;}
   #goodsInfo .textInfo li.padd{padding:7px 0px 7px 8px;}
   #goodsInfo .textInfo li dd{width:50%; float:left; padding:7px 0px;}
   #goodsInfo .textInfo li dd.ddR{border-left:1px solid #eeecec; width:48%; padding-left:8px;}
     #goodsInfo .textInfo li dd.ddL{border-right:1px solid #eeecec;}
   #goodsInfo .textInfo a{color:#006bce; text-decoration:underline;}
   #goodsInfo .textInfo .loop{background:#f7f7f7; margin-top:8px;}


I.商品详细描述

1,设置方法

  • 直接调用商品描述里的内容

2,代码相关

goods.dwt 中

{$goods.goods_desc}

3,相关css

style.css 中没有特定css,都是共用css(但会受boxCenterList RelaArticle这两个属性影响,因为他的上面 两行"<div id="com_v" class="boxCenterList RelaArticle"></div>" )

J.商品属性

1,设置方法

2,代码相关

goods.dwt 中

<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#dddddd">
        <!-- {foreach from=$properties item=property_group key=key} -->
        <tr>
          <th colspan="2" bgcolor="#FFFFFF">{$key|escape}</th>
        </tr>
        <!-- {foreach from=$property_group item=property} -->
        <tr>
          <td bgcolor="#FFFFFF" align="left" width="30%" class="f1">[{$property.name|escape:html}]</td>
          <td bgcolor="#FFFFFF" align="left" width="70%">{$property.value}</td>
        </tr>
        <!-- {/foreach}-->
        <!-- {/foreach}-->
</table>

3,相关css

style.css 中没有特定css,都是共用css

K.商品标签

1,设置方法

2,代码相关

goods_tags.lbi 中

<div class="box">
     <div class="box_1">
      <h3><span class="text">{$lang.goods_tag}</span></h3>
      <div class="boxCenterList clearfix ie6">
       <form name="tagForm" action="javascript:;" onSubmit="return submitTag(this)" id="tagForm">
        <p id="ECS_TAGS" style="margin-bottom:5px;">
          <!-- 标记{foreach from=$tags item=tag}-->
          <a href="search.php?keywords={$tag.tag_words|escape:url}" style="color:#006ace; text-decoration:none; margin-right:5px;">{$tag.tag_words|escape:html}[{$tag.tag_count}]</a>
          <!-- 结束标记{/foreach} -->
        </p>
        <p>
          <input type="text" name="tag" id="tag" class="inputBg" size="35" />
          <input type="submit" value="添 加" class="bnt_blue" style="border:none;" />
          <input type="hidden" name="goods_id" value="{$goods.goods_id}"  />
        </p>
                <script type="text/javascript">
                //<![CDATA[
                {literal}
                /**
                 * 用户添加标记的处理函数
                 */
                function submitTag(frm)
                {
                  try
                  {
                    var tag = frm.elements['tag'].value;
                    var idx = frm.elements['goods_id'].value;

                    if (tag.length > 0 && parseInt(idx) > 0)
                    {
                      Ajax.call('user.php?act=add_tag', "id=" + idx + "&tag=" + tag, submitTagResponse, "POST", "JSON");
                    }
                  }
                  catch (e) { alert(e); }

                  return false;
                }

                function submitTagResponse(result)
                {
                  var div = document.getElementById('ECS_TAGS');

                  if (result.error > 0)
                  {
                    alert(result.message);
                  }
                  else
                  {
                    try
                    {
                      div.innerHTML = '';
                      var tags = result.content;

                      for (i = 0; i < tags.length; i++)
                      {
                        div.innerHTML += '<a href="search.php?keywords='+tags[i].word+'" style="color:#006ace; text-decoration:none; margin-right:5px;">' +tags[i].word + '[' + tags[i].count + ']<\/a>   ';
                      }
                    }
                    catch (e) { alert(e); }
                  }
                }
                {/literal}
                //]]>
                </script>
              </form>
      </div>
     </div>
    </div>
    <div class="blank5"></div>

3,相关css

style.css 中没有特定css,都是共用css

L.购买过此商品的人还买过

1,设置方法

  • 程序自带功能,自动调用与该商品一起被购买的其他商品。该模块产品的数量可以在商店设置里定义。

2,代码相关

bought_goods.lbi 中

<!-- {if $bought_goods} -->
     <div class="box">
     <div class="box_1">
      <h3><span class="text">{$lang.shopping_and_other}</span></h3>
      <div class="boxCenterList clearfix ie6">
       <!--{foreach from=$bought_goods item=bought_goods_data}-->
        <div class="goodsItem">
         <a href="{$bought_goods_data.url}"><img src="{$bought_goods_data.goods_thumb}" alt="{$bought_goods_data.goods_name}"  class="goodsimg" /></a><br />
         <p><a href="{$bought_goods_data.url}" title="{$bought_goods_data.goods_name}">{$bought_goods_data.short_name}</a></p> 
         <!-- {if $bought_goods_data.promote_price neq 0} -->
        <font class="shop_s">{$bought_goods_data.formated_promote_price}</font>
        <!-- {else} -->
        <font class="shop_s">{$bought_goods_data.shop_price}</font>
        <!-- {/if} -->
        </div>
        <!-- {/foreach} -->
      </div>
     </div>
    </div>
    <div class="blank5"></div>
    <!-- {/if} -->

3,相关css

style.css 中

/*单个商品*/
.goodsItem{width:110px; float:left; position:relative; overflow:hidden; margin:0px 14px 15px 14px;}
.goodsItem .goodsimg{width:100px; height:100px; border:4px solid #eef8ff; margin-bottom:4px;}
.goodsItem img{width:52px; height:17px;}
.goodsItem p{text-align:left; color:#3f3f3f;}
.goodsItem p a{color:#3f3f3f; text-decoration:none;}
.goodsItem p a:hover{color:#ff6600; text-decoration:none;}
.goodsItem span{width:40px; height:40px; position:absolute;left:0px; top:0px;}
.goodsItem span.best{background:url(images/bg.gif) no-repeat 0px -304px;}
.goodsItem span.news{background:url(images/bg.gif) no-repeat -75px -304px;}
.goodsItem span.hot{background:url(images/bg.gif) no-repeat -161px -304px;}


M.购买记录

1,设置方法

  • 程序自带功能,自动调用商品购买的历史记录

2,代码相关

bought_note_guide.lbi 中

{insert_scripts files='transport.js,utils.js'}
<div id="ECS_BOUGHT">{* ECSHOP 提醒您:动态载入bought_notes.lbi,显示当前商品的购买记录 *}{insert name='bought_notes' id=$id}</div>bought_notes.lbi中<!--购买记录 START-->
     <div class="box">
     <div class="box_1">
      <h3><span class="text">{$lang.bought_notes}</span>({$lang.later_bought_amounts}<font class="f1">{$pager.record_count}</font>)</h3>
      <div class="boxCenterList">
       <!-- {if $notes} -->
       <table width="100%" cellpadding="4">
       <tr style="background:url(images/lineBg.gif) repeat-x left bottom;text-align:center; color:#006bd0; font-weight:bold;"><td width="25%" align="left" style="padding-left:20px">{$lang.username}</td><td width="10%">{$lang.number}</td><td width="45%">{$lang.bought_time}</td><td width="20%">{$lang.order_status}</td></tr>
       <!-- {foreach from=$notes item=note} -->
       <tr align="center"><td align="left" style="padding-left:20px"><!-- {if $note.user_name} -->{$note.user_name|escape:html}<!-- {else} -->{$lang.anonymous}<!-- {/if} --></td><td>{$note.goods_number}</td><td>{$note.add_time}</td><td><!--{if $note.order_status}-->{$lang.turnover}<!--{else}-->{$lang.is_cancel}<!--{/if}--></td></tr>
       <!-- {/foreach} -->
       </table>
        <!--{else}-->
        {$lang.no_notes}
        <!--{/if}-->
       <!--翻页 start-->
       <div id="buy_pagebar" class="f_r" style="margin-top:10px">
        <form name="selectPageForm" action="{$smarty.server.PHP_SELF}" method="get">
        <!-- {if $pager.styleid eq 0 } -->
        <div id="buy_pager">
          {$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>
            <!--{foreach from=$pager.search key=key item=item}-->
            <input type="hidden" name="{$key}" value="{$item}" />
            <!--{/foreach}-->
        </div>
        <!--{else}-->

        <!--翻页 start-->
         <div id="buy_pager" class="pagebar">
          <span class="f_l f6" style="margin-right:10px;">{$lang.total} <b>{$pager.record_count}</b> {$lang.user_comment_num}</span>
          <!-- {if $pager.page_first} --><a href="{$pager.page_first}">1 ...</a><!-- {/if} -->
          <!-- {if $pager.page_prev} --><a class="prev" href="{$pager.page_prev}">{$lang.page_prev}</a><!-- {/if} -->
          <!--{foreach from=$pager.page_number key=key item=item}-->
                <!-- {if $pager.page eq $key} -->
                <span class="page_now">{$key}</span>
                <!-- {else} -->
                <a href="{$item}">[{$key}]</a>
                <!-- {/if} -->
            <!--{/foreach}-->

          <!-- {if $pager.page_next} --><a class="next" href="{$pager.page_next}">{$lang.page_next}</a><!-- {/if} -->
          <!-- {if $pager.page_last} --><a class="last" href="{$pager.page_last}">...{$pager.page_count}</a><!-- {/if} -->
          <!-- {if $pager.page_kbd} -->
            <!--{foreach from=$pager.search key=key item=item}-->
            <input type="hidden" name="{$key}" value="{$item}" />
            <!--{/foreach}-->
            <kbd style="float:left; margin-left:8px; position:relative; bottom:3px;"><input type="text" name="page" onkeydown="if(event.keyCode==13)selectPage(this)" size="3" class="B_blue" /></kbd>
            <!-- {/if} -->
        </div>
        <!--翻页 END-->

        <!-- {/if} -->
        </form>
        <script type="Text/Javascript" language="JavaScript">
        <!--
        {literal}
        function selectPage(sel)
        {
          sel.form.submit();
        }
        {/literal}
        //-->
        </script>
      </div>
      <!--翻页 END-->
      <div class="blank5"></div>
      </div>
     </div>
    </div>
    <div class="blank5"></div>
  <!--购买记录 END-->

3,相关css

style.css 中没有特定css,都是共用css

N.用户评论

1,设置方法

  • 程序自带功能,发布评论的模块,同时也可以调用评论的内容

2,代码相关

comments.lbi 中

{insert_scripts files='transport.js,utils.js'}
<div id="ECS_COMMENT"> {* ECSHOP 提醒您:动态载入comments_list.lbi,显示评论列表和评论表单 *}{insert name='comments' type=$type id=$id}</div>主要代码在外部调用 comments_list.lbi 中<!--用户评论 START-->
     <div class="box">
     <div class="box_1">
      <h3><span class="text">{$lang.user_comment}</span>({$lang.total}<font class="f1">{$pager.record_count}</font>{$lang.user_comment_num})</h3>
      <div class="boxCenterList clearfix" style="height:1%;">
       <ul class="comments">
       <!-- {if $comments} -->
       <!-- {foreach from=$comments item=comment} -->
        <li class="word">
        <font class="f2"><!-- {if $comment.username} -->{$comment.username|escape:html}<!-- {else} -->{$lang.anonymous}<!-- {/if} --></font> <font class="f3">( {$comment.add_time} )</font><br />
        <img src="../images/stars{$comment.rank}.gif" alt="{$comment.comment_rank}" />
        <p>{$comment.content}</p>
<!-- {if $comment.re_content} -->
        <p><font class="f1">{$lang.admin_username}</font>{$comment.re_content}</p>
<!-- {/if} -->
        </li>
        <!-- {/foreach} -->
        <!--{else}-->
        <li>{$lang.no_comments}</li>
        <!--{/if}-->
       </ul>
       <!--翻页 start-->
       <div id="pagebar" class="f_r">
        <form name="selectPageForm" action="{$smarty.server.PHP_SELF}" method="get">
        <!-- {if $pager.styleid eq 0 } -->
        <div id="pager">
          {$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>
            <!--{foreach from=$pager.search key=key item=item}-->
            <input type="hidden" name="{$key}" value="{$item}" />
            <!--{/foreach}-->
        </div>
        <!--{else}-->

        <!--翻页 start-->
         <div id="pager" class="pagebar">
          <span class="f_l f6" style="margin-right:10px;">{$lang.total} <b>{$pager.record_count}</b> {$lang.user_comment_num}</span>
          <!-- {if $pager.page_first} --><a href="{$pager.page_first}">1 ...</a><!-- {/if} -->
          <!-- {if $pager.page_prev} --><a class="prev" href="{$pager.page_prev}">{$lang.page_prev}</a><!-- {/if} -->
          <!--{foreach from=$pager.page_number key=key item=item}-->
                <!-- {if $pager.page eq $key} -->
                <span class="page_now">{$key}</span>
                <!-- {else} -->
                <a href="{$item}">[{$key}]</a>
                <!-- {/if} -->
            <!--{/foreach}-->

          <!-- {if $pager.page_next} --><a class="next" href="{$pager.page_next}">{$lang.page_next}</a><!-- {/if} -->
          <!-- {if $pager.page_last} --><a class="last" href="{$pager.page_last}">...{$pager.page_count}</a><!-- {/if} -->
          <!-- {if $pager.page_kbd} -->
            <!--{foreach from=$pager.search key=key item=item}-->
            <input type="hidden" name="{$key}" value="{$item}" />
            <!--{/foreach}-->
            <kbd style="float:left; margin-left:8px; position:relative; bottom:3px;"><input type="text" name="page" onkeydown="if(event.keyCode==13)selectPage(this)" size="3" class="B_blue" /></kbd>
            <!-- {/if} -->
        </div>
        <!--翻页 END-->

        <!-- {/if} -->
        </form>
        <script type="Text/Javascript" language="JavaScript">
        <!--
        {literal}
        function selectPage(sel)
        {
          sel.form.submit();
        }
        {/literal}
        //-->
        </script>
      </div>
      <!--翻页 END-->
      <div class="blank5"></div>
      <!--评论表单 start-->
      <div class="commentsList">
      <form action="javascript:;" onsubmit="submitComment(this)" method="post" name="commentForm" id="commentForm">
       <table width="710" border="0" cellspacing="5" cellpadding="0">
        <tr>
          <td width="64" align="right">{$lang.username}:</td>
          <td width="631"{if !$enabled_captcha}{/if}><!--{if $smarty.session.user_name}-->{$smarty.session.user_name}<!--{else}-->{$lang.anonymous}<!--{/if}--></td>
        </tr>
        <tr>
          <td align="right">E-mail:</td>
          <td>
          <input type="text" name="email" id="email"  maxlength="100" value="{$smarty.session.email|escape}" class="inputBorder"/>
          </td>
        </tr>
        <tr>
          <td align="right">{$lang.comment_rank}:</td>
          <td>
          <input name="comment_rank" type="radio" value="1" id="comment_rank1" /> <img src="../images/stars1.gif" />
          <input name="comment_rank" type="radio" value="2" id="comment_rank2" /> <img src="../images/stars2.gif" />
          <input name="comment_rank" type="radio" value="3" id="comment_rank3" /> <img src="../images/stars3.gif" />
          <input name="comment_rank" type="radio" value="4" id="comment_rank4" /> <img src="../images/stars4.gif" />
          <input name="comment_rank" type="radio" value="5" checked="checked" id="comment_rank5" /> <img src="../images/stars5.gif" />
          </td>
        </tr>
        <tr>
          <td align="right" valign="top">{$lang.comment_content}:</td>
          <td>
          <textare a name="content" class="inputBorder" style="height:50px; width:620px;"></textare a >
          <input type="hidden" name="cmt_type" value="{$comment_type}" />
          <input type="hidden" name="id" value="{$id}" />
          </td>
        </tr>
        <tr>
          <td colspan="2">
          <!-- 判断是否启用验证码{if $enabled_captcha} -->
          <div style="padding-left:15px; text-align:left; float:left;">
          {$lang.comment_captcha}:<input type="text" name="captcha"  class="inputBorder" style="width:50px; margin-left:5px;"/>
          <img src="captcha.php?{$rand}" alt="captcha" onClick="this.src='captcha.php?'+Math.random()" class="captcha">
          </div>
          <!-- {/if} -->
          <input name="" type="submit"  value="" class="f_r" style="border:none; background:url(../images/commentsBnt.gif); width:75px; height:21px; margin-right:8px;">
          </td>
        </tr>
      </table>
      </form>
      </div>
      <!--评论表单 end-->
      </div>
     </div>
    </div>
    <div class="blank5"></div>
  <!--用户评论 END-->
<script type="text/javascript">
//<![CDATA[
{foreach from=$lang.cmt_lang item=item key=key}
var {$key} = "{$item}";
{/foreach}
{literal}
/**
 * 提交评论信息
*/
function submitComment(frm)
{
  var cmt = new Object;

  //cmt.username        = frm.elements['username'].value;
  cmt.email           = frm.elements['email'].value;
  cmt.content         = frm.elements['content'].value;
  cmt.type            = frm.elements['cmt_type'].value;
  cmt.id              = frm.elements['id'].value;
  cmt.enabled_captcha = frm.elements['enabled_captcha'] ? frm.elements['enabled_captcha'].value : '0';
  cmt.captcha         = frm.elements['captcha'] ? frm.elements['captcha'].value : '';
  cmt.rank            = 0;

  for (i = 0; i < frm.elements['comment_rank'].length; i++)
  {
    if (frm.elements['comment_rank'][i].checked)
    {
       cmt.rank = frm.elements['comment_rank'][i].value;
     }
  }

//  if (cmt.username.length == 0)
//  {
//     alert(cmt_empty_username);
//     return false;
//  }

  if (cmt.email.length > 0)
  {
     if (!(Utils.isEmail(cmt.email)))
     {
        alert(cmt_error_email);
        return false;
      }
   }
   else
   {
        alert(cmt_empty_email);
        return false;
   }

   if (cmt.content.length == 0)
   {
      alert(cmt_empty_content);
      return false;
   }

   if (cmt.enabled_captcha > 0 && cmt.captcha.length == 0 )
   {
      alert(captcha_not_null);
      return false;
   }

   Ajax.call('comment.php', 'cmt=' + cmt.toJSONString(), commentResponse, 'POST', 'JSON');
   return false;
}

/**
 * 处理提交评论的反馈信息
*/
  function commentResponse(result)
  {
    if (result.message)
    {
      alert(result.message);
    }

    if (result.error == 0)
    {
      var layer = document.getElementById('ECS_COMMENT');

      if (layer)
      {
        layer.innerHTML = result.content;
      }
    }
  }
{/literal}
//]]>
</script>

3,相关css

style.css 中

/*用户评论*/
   .ie6{padding-left:25px; _padding-left:15px; height:1%;}/*购买此商品的人还购买的商品*/
   .comments li{background:url(images/lineBg.gif) repeat-x left bottom; padding:3px 8px; width:97%; _height:1%; text-align:left; position:relative;
   margin-bottom:8px;
   }
   .comments li img{position:absolute; right:0px; top:3px;}
   .comments li p{margin:3px auto; text-align:left;}
   .commentsList{border:1px solid #ccc; background:#f7f7f7; padding:10px;}
   .commentsList .inputBorder{border:1px solid #ccc; background:#fff;}
     .captcha{margin-left:0px; position:relative; top:-1px; *margin-left:8px; *position:relative; top:3px; cursor:pointer;}



以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号