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" />

View Code

列表和搜索分页样式

#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