refactor: 产品分类
This commit is contained in:
@@ -1,71 +1,69 @@
|
||||
{extend name="public/base" /}
|
||||
{block name="style"}
|
||||
<link rel="stylesheet" href="__CSS__/category.css" type="text/css" />
|
||||
{/block}
|
||||
{block name="main"}
|
||||
<div class="orico_Page_products">
|
||||
{notempty name="focus_image"}
|
||||
<div class="focus_image">
|
||||
{volist name="focus_image" id="fimg"}
|
||||
<a {notempty name="fimg.link"}href="{$fimg.link}"{/notempty}><img src="{$fimg.image}" alt="" /></a>
|
||||
{/volist}
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- 首页主题内容 -->
|
||||
<div class="pageMain">
|
||||
{notempty name="categorys_data"}
|
||||
{volist name="categorys_data" id="vo"}
|
||||
<div class="ori-pd-title">
|
||||
<span>{$vo.name}</span>
|
||||
{eq name="vo.level" value="2"}
|
||||
<a href="{:url('product/category', ['id' => $vo.id])}">查看更多</a>
|
||||
{/eq}
|
||||
</div>
|
||||
{notempty name="vo.products"}
|
||||
<div class="ori-pd-list">
|
||||
{volist name="vo.products" id="vp"}
|
||||
<a class="oripditem" href="{:url('product/detail', ['id' => $vp.id])}">
|
||||
<div>
|
||||
{volist name="vp.sku" id="vs" key="vs_idx"}
|
||||
<img src="{$vs.main_image}" id="sku_image_{$vs.id}" class="prdimg {eq name='vs_idx' value='1'}prdimg-show{/eq}" />
|
||||
{/volist}
|
||||
</div>
|
||||
<div class="prdName">{$vp.name}</div>
|
||||
<div class="prddec">{$vp.spu}</div>
|
||||
{notempty name="vp.colors"}
|
||||
<div class="prd-colors">
|
||||
{volist name="vp.colors" id="vc" key="vc_idx"}
|
||||
<div class="prdolorit {eq name='vc_idx' value='1'}on{/eq}" data-sku_id="{$vc.sku_id}">
|
||||
{assign name="color_type" value=":rgb_or_image($vc.attr_value)" /}
|
||||
{eq name="color_type" value="IMAGE"}
|
||||
<img src="{$vc.attr_value}" />
|
||||
{elseif condition="$color_type == 'RGB'" /}
|
||||
<span class="rgb_hex" {:style(['background-color'=>$vc.attr_value])}></span>
|
||||
{/eq}
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
{/notempty}
|
||||
</a>
|
||||
{/volist}
|
||||
</div>
|
||||
{/notempty}
|
||||
{/volist}
|
||||
{/notempty}
|
||||
</div>
|
||||
</div>
|
||||
{/block}
|
||||
{block name="script"}
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('.prd-colors .prdolorit').click(function(event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
var sku_id = $(this).data('sku_id');
|
||||
$('#sku_image_' + sku_id).addClass('prdimg-show').siblings().removeClass('prdimg-show');
|
||||
$(this).addClass('on').siblings().removeClass('on');
|
||||
});
|
||||
})
|
||||
</script>
|
||||
{extend name="public/base" /}
|
||||
{block name="style"}
|
||||
<link rel="stylesheet" href="__CSS__/product_category.css" type="text/css" />
|
||||
{/block}
|
||||
{block name="main"}
|
||||
<div class="orico_Page_category">
|
||||
<!-- banner轮播 -->
|
||||
{notempty name="focus_image"}
|
||||
<div class="opdBanner">
|
||||
{volist name="focus_image" id="fi"}
|
||||
<a {notempty name="fi.link" }href="{$fi.link}" {/notempty}>
|
||||
<img src="{$fi.image}" class="opdbannerImg" />
|
||||
</a>
|
||||
{/volist}
|
||||
</div>
|
||||
{/notempty}
|
||||
<!--分类/产品内容 -->
|
||||
<div class="pageMain">
|
||||
{volist name="list" id="vo"}
|
||||
<div class="cat">
|
||||
<div class="ori-pd-title">
|
||||
<div class="catname">{$vo.name}</div>
|
||||
<a class="catmore" href="{:url('product/subcategory', ['id' => $vo.id])}">
|
||||
<span class="tmore">{:lang('product_newpro.view_all')}</span>
|
||||
<img src="/static/index/images/more.png" class="catmoreImg" />
|
||||
</a>
|
||||
</div>
|
||||
{notempty name="vo.products"}
|
||||
<div class="ori-pd-list">
|
||||
{volist name="vo.products" id="pro"}
|
||||
<a class="oripditem" href="{:url('product/detail', ['id' => $pro.id])}">
|
||||
<div>
|
||||
<img src="{$pro.cover_image}" class="prdimg prdimg-show" />
|
||||
</div>
|
||||
<div class="prdName">{$pro.name}</div>
|
||||
<div class="prddec">{$pro.spu}</div>
|
||||
{eq name="pro.is_new" value="1"}
|
||||
<div class="newcp">New</div>
|
||||
{/eq}
|
||||
</a>
|
||||
{/volist}
|
||||
</div>
|
||||
{/notempty}
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
{/block}
|
||||
{block name="script"}
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
// 显示第一张图片
|
||||
$('.opdbannerImg').eq(0).show();
|
||||
let currentIndex = 0;
|
||||
const imgCount = $('.opdbannerImg').length;
|
||||
setInterval(() => {
|
||||
// 淡出当前图片
|
||||
$('.opdbannerImg').eq(currentIndex).fadeTo(10, 0, () => {
|
||||
// 隐藏当前图片
|
||||
$('.opdbannerImg').eq(currentIndex).hide();
|
||||
// 计算下一张图片的索引
|
||||
currentIndex = (currentIndex + 1) % imgCount;
|
||||
// 显示并淡入下一张图片
|
||||
$('.opdbannerImg').eq(currentIndex).show().fadeTo(10, 1);
|
||||
});
|
||||
}, 10000);
|
||||
});
|
||||
</script>
|
||||
{/block}
|
||||
@@ -1,59 +0,0 @@
|
||||
{extend name="public/base" /}
|
||||
{block name="style"}
|
||||
<link rel="stylesheet" href="__CSS__/product_category.css" type="text/css" />
|
||||
{block name="main"}
|
||||
<div class="orico_Page_category">
|
||||
<!--首页主题内容 -->
|
||||
<div class="pageMain">
|
||||
<div class="cat">
|
||||
<div class="ori-pd-title">
|
||||
<div class="catname">Power Strip</div>
|
||||
<a class="catmore">
|
||||
<span class="tmore">View all</span>
|
||||
<img src="/static/index/images/more.png" class="catmoreImg" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="ori-pd-list">
|
||||
<a class="oripditem">
|
||||
<div>
|
||||
<img src="/static/index/images/ORCIO-HSQ-02H-800-220.jpg" class="prdimg prdimg-show" />
|
||||
</div>
|
||||
<div class="prdName">ORICO 5 in 1 Travel Power Strip</div>
|
||||
<div class="prddec">ORICO-AP3-2A3U</div>
|
||||
<div class="newcp">New</div>
|
||||
</a>
|
||||
<a class="oripditem">
|
||||
<div>
|
||||
<img src="/static/index/images/ORCIO-HSQ-02H-800-220.jpg" class="prdimg prdimg-show" />
|
||||
</div>
|
||||
<div class="prdName">ORICO 5 in 1 Travel Power Strip</div>
|
||||
<div class="prddec">ORICO-AP3-2A3U</div>
|
||||
<div class="newcp">New</div>
|
||||
</a>
|
||||
<a class="oripditem">
|
||||
<div>
|
||||
<img src="/static/index/images/ORCIO-HSQ-02H-800-220.jpg" class="prdimg prdimg-show" />
|
||||
</div>
|
||||
<div class="prdName">ORICO 5 in 1 Travel Power Strip</div>
|
||||
<div class="prddec">ORICO-AP3-2A3U</div>
|
||||
</a>
|
||||
<a class="oripditem">
|
||||
<div>
|
||||
<img src="/static/index/images/ORCIO-HSQ-02H-800-220.jpg" class="prdimg prdimg-show" />
|
||||
</div>
|
||||
<div class="prdName">ORICO 5 in 1 Travel Power Strip</div>
|
||||
<div class="prddec">ORICO-AP3-2A3U</div>
|
||||
</a>
|
||||
<a class="oripditem">
|
||||
<div>
|
||||
<img src="/static/index/images/ORCIO-HSQ-02H-800-220.jpg" class="prdimg prdimg-show" />
|
||||
</div>
|
||||
<div class="prdName">ORICO 5 in 1 Travel Power Strip</div>
|
||||
<div class="prddec">ORICO-AP3-2A3U</div>
|
||||
<div class="newcp">New</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/block}
|
||||
@@ -1,34 +0,0 @@
|
||||
{extend name="public/base" /}
|
||||
{block name="style"}
|
||||
<link rel="stylesheet" href="__CSS__/product_subcategory.css" type="text/css" />
|
||||
{block name="main"}
|
||||
<div class="orico_Page_subcategory">
|
||||
<!--公共头部-->
|
||||
<iframe align="center" width="100%" height="60" src="head.html" frameborder="no" border="0" marginwidth="0"
|
||||
marginheight="0" scrolling="no"></iframe>
|
||||
<!-- 这个图片可能有可能没有-->
|
||||
<img src="/static/index/images/SSD-1920x900-CN.jpg" class="sbbanner">
|
||||
<!--首页主题内容 -->
|
||||
<div class="pageMain">
|
||||
<h1 class="ori-pd-title">Power Strip</h1>
|
||||
<div class="ori-pd-list">
|
||||
<a class="oripditem">
|
||||
<div>
|
||||
<img src="/static/index/images/prtest.jpg" class="prdimg prdimg-show" />
|
||||
<img src="/static/index/images/prtest1.jpg" class="prdimg" />
|
||||
</div>
|
||||
<div class="prdName">ORICO 5 in 1 Travel Power Strip</div>
|
||||
<div class="prddec">ORICO-AP3-2A3U</div>
|
||||
<div class="prd-colors">
|
||||
<div class="prdolorit on">
|
||||
<img src="/static/index/images/WH.jpg">
|
||||
</div>
|
||||
<div class="prdolorit">
|
||||
<img src="/static/index/images/BK.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/block}
|
||||
86
app/index/view/product/subcategory.html
Normal file
86
app/index/view/product/subcategory.html
Normal file
@@ -0,0 +1,86 @@
|
||||
{extend name="public/base" /}
|
||||
{block name="style"}
|
||||
<link rel="stylesheet" href="__CSS__/product_subcategory.css" type="text/css" />
|
||||
{/block}
|
||||
{block name="main"}
|
||||
<div class="orico_Page_subcategory">
|
||||
{notempty name="focus_image"}
|
||||
<div class="opdBanner">
|
||||
{volist name="focus_image" id="fi"}
|
||||
<a {notempty name="fi.link"}href="{$fi.link}"{/notempty}>
|
||||
<img src="{$fi.image}" alt="" class="opdbannerImg" />
|
||||
</a>
|
||||
{/volist}
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- 首页主题内容 -->
|
||||
<div class="pageMain">
|
||||
{notempty name="categorys_data"}
|
||||
{volist name="categorys_data" id="vo"}
|
||||
<div class="ori-pd-title">
|
||||
<span>{$vo.name}</span>
|
||||
</div>
|
||||
{notempty name="vo.products"}
|
||||
<div class="ori-pd-list">
|
||||
{volist name="vo.products" id="vp"}
|
||||
<a class="oripditem" href="{:url('product/detail', ['id' => $vp.id])}">
|
||||
<div>
|
||||
{volist name="vp.sku" id="vs" key="vs_idx"}
|
||||
<img src="{$vs.main_image}" id="sku_image_{$vs.id}" class="prdimg {eq name='vs_idx' value='1'}prdimg-show{/eq}" />
|
||||
{/volist}
|
||||
</div>
|
||||
<div class="prdName">{$vp.name}</div>
|
||||
<div class="prddec">{$vp.spu}</div>
|
||||
{notempty name="vp.colors"}
|
||||
<div class="prd-colors">
|
||||
{volist name="vp.colors" id="vc" key="vc_idx"}
|
||||
<div class="prdolorit {eq name='vc_idx' value='1'}on{/eq}" data-sku_id="{$vc.sku_id}">
|
||||
{assign name="color_type" value=":rgb_or_image($vc.attr_value)" /}
|
||||
{eq name="color_type" value="IMAGE"}
|
||||
<img src="{$vc.attr_value}" />
|
||||
{elseif condition="$color_type == 'RGB'" /}
|
||||
<span class="rgb_hex" {:style(['background-color'=>$vc.attr_value])}></span>
|
||||
{/eq}
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
{/notempty}
|
||||
</a>
|
||||
{/volist}
|
||||
</div>
|
||||
{/notempty}
|
||||
{/volist}
|
||||
{/notempty}
|
||||
</div>
|
||||
</div>
|
||||
{/block}
|
||||
{block name="script"}
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
// 显示第一张图片
|
||||
$('.opdbannerImg').eq(0).show();
|
||||
let currentIndex = 0;
|
||||
const imgCount = $('.opdbannerImg').length;
|
||||
setInterval(() => {
|
||||
// 淡出当前图片
|
||||
$('.opdbannerImg').eq(currentIndex).fadeTo(10, 0, () => {
|
||||
// 隐藏当前图片
|
||||
$('.opdbannerImg').eq(currentIndex).hide();
|
||||
// 计算下一张图片的索引
|
||||
currentIndex = (currentIndex + 1) % imgCount;
|
||||
// 显示并淡入下一张图片
|
||||
$('.opdbannerImg').eq(currentIndex).show().fadeTo(10, 1);
|
||||
});
|
||||
}, 10000);
|
||||
|
||||
$('.prd-colors .prdolorit').click(function(event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
var sku_id = $(this).data('sku_id');
|
||||
$('#sku_image_' + sku_id).addClass('prdimg-show').siblings().removeClass('prdimg-show');
|
||||
$(this).addClass('on').siblings().removeClass('on');
|
||||
});
|
||||
})
|
||||
</script>
|
||||
{/block}
|
||||
@@ -25,16 +25,15 @@
|
||||
</ul>
|
||||
<!-- 右边子菜单-->
|
||||
{volist name="header_categorys" id="vo" key="idx"}
|
||||
<div class="navItem_cyright" {eq name="idx" value="1" }style="display: block;"
|
||||
{else/}style="display: none;" {/eq}>
|
||||
<div class="navItem_cyright" {eq name="idx" value="1" }style="display: block;"{else/}style="display: none;"{/eq}>
|
||||
{volist name="vo.children" id="vc"}
|
||||
<dl class="nav_cyrightit">
|
||||
<dt>
|
||||
<a href="{:url('product/category', ['id' => $vc.id])}">{$vc.name}</a>
|
||||
<a href="{:url('product/subcategory', ['id' => $vc.id])}">{$vc.name}</a>
|
||||
</dt>
|
||||
{volist name="vc.children" id="vcc"}
|
||||
<dd>
|
||||
<a href="{:url('product/category', ['id' => $vcc.id])}">{$vcc.name}</a>
|
||||
<a href="{:url('product/subcategory', ['id' => $vcc.id])}">{$vcc.name}</a>
|
||||
</dd>
|
||||
{/volist}
|
||||
</dl>
|
||||
|
||||
Reference in New Issue
Block a user