Octopus系列之模板快速开发手册

公共代码

html_header_1

<title>${sitename}-${seotitle}</title>
<meta http-equiv="Content-Type" content="text/html; charset=${charset}" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="keywords" content="${metakeywords}" />
<meta name="description" content="${metadescription}" />
<meta name="author" content="The Octopus; Team and others" />
<meta name="generator" content="shopping cart program by Octopus;, http://www.octopus-cart.com eCommerce" />
#if($pagename=="cart"||$pagename=="account"||$pagename=="checkout")
<meta name="robots" content="NOINDEX, NOFOLLOW" />
#else
<meta name="robots" content="INDEX,FOLLOW" />
#end
${basecode}
<link rel="canonical" href="${siteurl}" />
<link rel="shortcut icon" href="${themeurl}favicon.ico" />

扩展magento

<!-- META FOR IOS & HANDHELD -->
<!--<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=yes" />
<meta name="HandheldFriendly" content="true" />
<meta name="apple-touch-fullscreen" content="YES" />
<meta name="robots" content="INDEX,FOLLOW" />

列表和搜索分页样式

#if($pagename=="list"||$pagename=="search")
<link href="${themeurl}css/common/pagination.css" rel="stylesheet" />
#end

公共的样式库

<!--BEGIN：Public JS-->
<script src="${themeurl}script/lang.js"></script>
<script src="${themeurl}script/jquery/jquery-1.7.1.min.js"></script>
<script src="${themeurl}script/lib/lib.js"></script>
<script src="${themeurl}script/lib/oc.js"></script>
<!--END：Public JS-->

form插件

<script src="${themeurl}script/plugins/jquery.form.min.js"></script>

表单验证插件

<script src="${themeurl}script/plugins/jquery.validate.min.js"></script>
<script src="${themeurl}script/plugins/messages.js"></script>

放大镜插件

<link href="${themeurl}css/zoom.css" rel="stylesheet" type="text/css" />
<script src="${themeurl}script/plugins/cloud-zoom.js" type="text/javascript"></script>

tips插件

<link href="${themeurl}script/poshytip/tip-yellow/tip-yellow.css" rel="stylesheet" />
<script src="${themeurl}script/poshytip/jquery.poshytip.min.js"></script>

对话框插件

<script src="${themeurl}script/zDialog/zDialog.js"></script>
<script src="${themeurl}script/zDialog/zDrag.js"></script>

详细页面和checkout 自定义js文件【页面独有】

<script src="${themeurl}script/lib/detail.js"></script><script src="${themeurl}script/lib/block.js"></script>

注意载入顺序

公共CSS--自定义CSS--公共js--自定义js

详细页面自定义样式

详细页面自定义js【必须写在页面中】

    <script type="text/javascript">
        var attr = [${product.AttrIsRequired}];
        var attrcount=${product.AttrRequiredCount};
        var attr_s=[];
        var count = 0;
    </script>

首页

列表页

详情页

购物车

Chekout