文章详情页 article.dwt

ABcde

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>


C.文章分类

1,设置方法

    自动读取后台所有文章的分类

2,代码相关

article_category_tree.lbi 中

<!-- {if $article_categories} -->
<div class="box">
 <div class="box_1">
  <h3><span>{$lang.article_cat}</span></h3>
  <div class="boxCenterList RelaArticle">
    <!--{foreach from=$article_categories item=cat}-->
    <a href="{$cat.url}">{$cat.name|escape:html}</a><br />
      <!--{foreach from=$cat.children item=child}-->
      <a href="{$child.url}" style="background-image:none;">{$child.name|escape:html}</a><br />
      <!--{/foreach}-->
    <!--{/foreach}-->
  </div>
 </div>
</div>
<div class="blank5"></div>
<!-- {/if} -->

3,相关css

style.css 中

.boxCenterList{padding:8px;}
      /*相关文章(其它带有小三角点的文字列表共用)*/
   .RelaArticle a,.alone{background:url(images/bg.gif) no-repeat 0px -170px; padding:0px 0px 0px 10px; color:#3f3f3f; text-decoration:none;}
   .RelaArticle a:hover{background:url(images/bg.gif) no-repeat 0px -170px; padding:0px 0px 0px 10px; color:#ff6600; text-decoration:none;}


D.文章内容

1,设置方法

  • 直接调用文章描述里的内容,另外要注意如果是在后台


2,代码相关

article.dwt 中

<div style="border:4px solid #fcf8f7; background-color:#fff; padding:20px 15px;">
         <div class="tc" style="padding:8px;">
         <font class="f5 f6">{$article.title|escape:html}</font><br /><font class="f3">{$article.author|escape:html} / {$article.add_time}</font>
         </div>
         <!-- {if $article.content } -->
          {$article.content}
         <!-- {/if} -->
         {if $article.open_type eq 2 or $article.open_type eq 1}<br />
         <div><a href="{$article.file_url}" target="_blank">{$lang.relative_file}</a></div>
          {/if}
         <div style="padding:8px; margin-top:15px; text-align:left; border-top:1px solid #ccc;">
         <!-- 上一篇文章 -->
          {if $next_article}
            {$lang.next_article}:<a href="{$next_article.url}" class="f6">{$next_article.title}</a><br />
          {/if}
          <!-- 下一篇文章 -->
          {if $prev_article}
            {$lang.prev_article}:<a href="{$prev_article.url}" class="f6">{$prev_article.title}</a>
          {/if}
         </div>
      </div>

3,相关css

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

E.用户评论

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

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部