Ajax 信息提示框(模板可自定义)
ajax有部分事件需要加入提示弹窗,提升前端友好体验
magbox提示,模板位置:includes/templates/yourtemplate/html/modules/msgbox/*.tpl
模板文件 | 事件名称 | 事件类型 | 说明 |
---|---|---|---|
msgCart.tpl | addCart | success caution error | ajax 购物车相关提示 |
msgCompare.tpl | addCompare delCompare clearCompare | success | 产品比较相关提示 |
msgLogin.tpl | $loginStatus==false | 提醒登录提示 | |
msgReviews.tpl | writeReviews reviewRating reviewText | success caution error | 评论相关提示 |
msgWishlist.tpl | addWishlist delWishlist clearWishlist | success | 添加产品收藏相关提示 |
信息提示框模板编写示例
模板是自由的,根据您的前端风格自由布局!
当触发ajax提示,所编写的提示内容会加载是系统内置的
<!--方式一 自定义,根据前端风格自由设计-->
{openzc:if $msgCart['action']=="addCart"}
<!--添加购物车成功提示-->
{openzc:if $msgCart['type']=="success"}
<div class="alert alert-success alert-dismissible mg-b-0 fade show" role="alert">
<p>Product successfully added to your shopping cart!</p><hr>
<p>
{openzc:prolist type="addcart" pid="current"}
Success: You have added <a class="text-reset font-weight-bold" href="[field:products_link/]">[field:products_name/]</a> to your Cart</a>!
{/openzc:prolist}
</p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
{/openzc:if}
<!--添加购物车失败提示-->
{openzc:if $msgCart['type']=="error"}
<div class="alert alert-danger alert-dismissible mg-b-0 fade show" role="alert">
<p>{openzc:echo}$msgCart['text'];{/openzc:echo}</p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
{/openzc:if}
<!--添加购物车警告提示-->
{openzc:if $msgCart['type']=="caution"}
<div class="alert alert-warning alert-dismissible mg-b-0 fade show" role="alert">
<p>{openzc:echo}$msgCart['text'];{/openzc:echo}</p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
{/openzc:if}
{/openzc:if}
<!--方式二 {openzc:msg} 使用系统默认标签调用提示信息-->
{openzc:msg name="addCart"/}
<!--方式一 自定义,根据前端风格自由设计-->
<!--添加产品到对比列表成功提示!-->
{openzc:if $msgCompare['action']=="addCompare"}
{openzc:if $msgCompare['type']=="success"}
<div class="alert alert-success alert-dismissible mg-b-0 fade show" role="alert">
<p>Product successfully added to your compare the list!</p><hr>
<p>
{openzc:prolist type="compare" pid="current"}
Success: You have added <a class="text-reset font-weight-bold" href="[field:products_link/]">[field:products_name/]</a> to your Cart</a>!
{/openzc:prolist}
</p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
{/openzc:if}
{/openzc:if}
<!--移除对比列表中的产品成功提示!-->
{openzc:if $msgCompare['action']=="delCompare"}
{openzc:if $msgCompare['type']=="success"}
<div class="alert alert-success alert-dismissible mg-b-0 fade show" role="alert">
<p>Product successfully deleted !</p><hr>
<p>
{openzc:prolist type="compare" pid="current"}
Success: You have deleted <a class="text-reset font-weight-bold" href="[field:products_link/]">[field:products_name/]</a></a>!
{/openzc:prolist}
</p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
{/openzc:if}
{/openzc:if}
<!--清空对比列表中的产品成功提示!-->
{openzc:if $msgCompare['action']=="clearCompare"}
{openzc:if $msgCompare['type']=="success"}
<div class="alert alert-success alert-dismissible mg-b-0 fade show" role="alert">
<p>Compare the product list to empty a success!</p><hr>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
{/openzc:if}
{/openzc:if}
<!--方式二 {openzc:msg} 使用系统默认标签调用提示信息-->
{openzc:msg name="addCompare"/}
<!--判断未登录提示,展现内容自定义-->
{openzc:if $loginStatus==false}
<div class="alert alert-warning alert-dismissible mg-b-0 fade show" role="alert">
<p>You have not login,<strong>please click <a href="{openzc:link name='FILENAME_LOGIN'/}" >log in</a>.</strong></p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
{/openzc:if}
<!--方式一 自定义,根据前端风格自由设计-->
{openzc:if $msgReviews['action']=="writeReviews"}
<!--提交评论验证提示:成功-->
{openzc:if $msgReviews['type']=="success"}
<div class="alert alert-success alert-dismissible mg-b-0 fade show" role="alert">
<p>Submit comments success!</p><hr>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
{/openzc:if}
<!--提交评论验证提示:同一产品频繁提交或者同一访客频繁提交的警告-->
{openzc:if $msgReviews['type']=="caution"}
<div class="alert alert-warning alert-dismissible mg-b-0 fade show" role="alert">
<p>Please don't frequent submit comments, have a rest!</p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
{/openzc:if}
{/openzc:if}
{openzc:if $msgReviews['action']=="reviewRating"}
<!--提交评论验证提示:评分选项错误警告-->
{openzc:if $msgReviews['type']=="error"}
<div class="alert alert-warning alert-dismissible mg-b-0 fade show" role="alert">
<p>Please rate for our products!</p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
{/openzc:if}
{/openzc:if}
{openzc:if $msgReviews['action']=="reviewText"}
<!--提交评论验证提示:评论字数不足错误警告-->
{openzc:if $msgReviews['type']=="error"}
<div class="alert alert-warning alert-dismissible mg-b-0 fade show" role="alert">
<p>I'm sorry, but you didn't have enough content words!</p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
{/openzc:if}
{/openzc:if}
<!--方式二 {openzc:msg} 使用系统默认标签调用提示信息-->
{openzc:msg name="writeReviews"/}
<!--方式一 自定义,根据前端风格自由设计-->
<!--添加产品到收藏列表成功提示!-->
{openzc:if $msgWishlist['action']=="addWishlist"}
{openzc:if $msgWishlist['type']=="success"}
<div class="alert alert-success alert-dismissible mg-b-0 fade show" role="alert">
<p>Product successfully added to your Wishlist the list!</p><hr>
<p>
{openzc:prolist type="wishlist" pid="current"}
Success: You have added <a class="text-reset font-weight-bold" href="[field:products_link/]">[field:products_name/]</a> to your Cart</a>!
{/openzc:prolist}
</p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
{/openzc:if}
{/openzc:if}
<!--移除收藏列表中的产品成功提示!-->
{openzc:if $msgWishlist['action']=="delWishlist"}
{openzc:if $msgWishlist['type']=="success"}
<div class="alert alert-success alert-dismissible mg-b-0 fade show" role="alert">
<p>Product successfully deleted !</p><hr>
<p>
{openzc:prolist type="wishlist" pid="current"}
Success: You have deleted <a class="text-reset font-weight-bold" href="[field:products_link/]">[field:products_name/]</a></a>!
{/openzc:prolist}
</p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
{/openzc:if}
{/openzc:if}
<!--清空收藏列表中的产品成功提示!-->
{openzc:if $msgWishlist['action']=="clearWishlist"}
{openzc:if $msgWishlist['type']=="success"}
<div class="alert alert-success alert-dismissible mg-b-0 fade show" role="alert">
<p>Wishlist the product list to empty a success!</p><hr>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
{/openzc:if}
{/openzc:if}
<!--方式二 {openzc:msg} 使用系统默认标签调用提示信息-->
{openzc:msg name="addWishlist"/}