标签列表

全站Ajax使用方法


整站ajax特点，可以任意指定区块进行ajax重加载，灵活应用多样性场景，无需担心前端各种复杂效果
在一些特殊情况下需要使用ajax达到更好的前端用户体验，在添加购物车、产品筛选、瀑布流产品列表等等
引入脚本文件：<script src="{openzc:field.assets/}js/openzc.js"></script>

Jquery参数说明

# 参数 说明
1 data-action 执行事件：(所有事件都默认有ajax重加载)
addCart：添加购物车
delCart：删除购物车产品
quantity：购物车产品数量输入框自动根据数值重计算
getHtml：默认通用ajax区块html重加载
getState：省份联动ajax加载
addWishlist：产品收藏
addCompare：产品对比
getSKU：产品属性SKU获取（价格等）
slidePrice：价格滑动条（产品价格筛选）
getPreview：产品预览（用于弹窗预览）
listFlow：产品列表流加载（方式：点击/滚动条）
getSearch：搜索预加载（方式：输入框键盘关键字触发）
2 data-id 产品id
3 data-reload div层(id或class):ajax名称 


DEMO1：(在include标签上使用)
参数说明:ajax='名称(自定义)'
<div id="divdemo">
{openzc:include filename="public/ajaxdemo.tpl" ajax="demo"/}
</div>
<a class="btn" data-action="getHtml" data-reload="#divdemo:demo">点击试试</a>
调用说明：点击按钮后，将局部模块“public/ajaxdemo.tpl”重新加载在同一个位置#divdemo下;

DEMO2：(使用ajax标签指定区块)
参数说明：filename='名称(自定义)'
<div id="demodiv2">
{openzc:ajax filename="demo2"}
	代码内容
{/openzc:ajax}
</div>
<a class="btn" data-action="getHtml" data-reload="#demodiv2:demo2">点击试试</a>
调用说明：点击按钮后，将“代码内容”重新加载在同一个位置#demodiv2下;

DEMO3：可指定多个ajax区块重加载
<a class="btn" data-action="getHtml" data-reload="#demodiv2:demo2,#divdemo:demo">
点击试试
</a>

DEMO4：其他标签使用ajax
<div class="products_list">
{openzc:list ajax="productList"} ...code... {/openzc:list}
</div>
<div class="cart_count">
{openzc:var name="cartCount" ajax="cartcount"/}
</div>

当页面开启静态缓存加速时，处于静态页面情况下其页面局部需要自动载入动态数据，例如：购物车数量/金额/列表 Compare、Wishlist数量以及会员登录情况


开启静态缓存加速时，实例代码

代码格式1: {openzc:ajax filename="ajax区块名称" autoload="加载DIV位置"}......{/openzc:ajax}
代码格式2: {openzc:标签 ajax="ajax区块名称" autoload="加载DIV位置"}......{/openzc:标签}

DEMO1:头部购物车，使用ajax标签
<div class="demo1">
{openzc:ajax filename="viewcart" autoload=".demo1"}
{openzc:if $cartCount>0}
    {openzc:cart}... ...{/openzc:cart}
{/openzc:if}
{/openzc:ajax}
</div>

DEMO2:头部购物车，使用include或cart标签
指定DIV的实例：
<div id="demo2">
{openzc:include filename="viewcart" ajax="viewcart" autoload="#demo2"/}
</div>

<div id="demo2s">
{openzc:cart ajax="viewcart" autoload="#demo2s"}
.... ....
{/openzc:cart}
</div>

不指定DIV的实例：参数autolad使用场景（在开启静态缓存的情况，需要页面自动加载此部分动态数据）

{openzc:include filename="viewcart" ajax="viewcart" autoload="true"/}
{openzc:cart ajax="viewcart" autoload="true"}
.... ....
{/openzc:cart}

总结静态页面，局部动态数据ajax加载：
在原ajax标签基础上加一个参数autoload="加载的DIV位置"，意思是当页面加载完成时，自动加载动态数据在指定DIV下


搜索框下拉预览效果的实现
data-action="getSearch" //获取搜索结果事件
data-reload="searchbox" //指定ajax位置重加载搜索结果
class="openzc-keyup" //获取输入框键盘事件触发



{openzc:ajax filename="searchbox"}
<ul>
	{openzc:if isset($_GET['keyword'])}
	{openzc:if $listCount>0}
		{openzc:list pagesize="4"}
			<li>[field:products_name/]</li>
		{/openzc:list}
	{else}
		搜索结果为空
	{/openzc:if}
	{/openzc:if}
</ul>
{/openzc:ajax}
<form class="form-inline position-relative" method="get">
    <input type="hidden" name="main_page" value="advanced_search_result">
    <input class="form-control theme1-border openzc-keyup" name="keyword" data-action="getSearch" data-reload="searchbox" type="search" placeholder="Enter your search key ...">
    <button class="btn search-btn theme-bg btn-rounded" type="submit"><i class="icon-magnifier"></i></button>
</form>