产品在已有二级分类的情况下,能在一级栏目下单独放一个产品主图吗?
可以实现。你可以在后台给该一级分类新增一个名为“主图”的二级分类,把用于展示的产品主图上传到这个“主图”二级分类里,然后在前端通过自定义 JS 把“主图”这个二级分类名称隐藏起来。这样前端页面只会看到一级分类下有图片展示,但不会显示“主图”这个二级分类的名字,达到“一级栏目下单独放主图”的效果。
具体的操作步骤:
进入后台后,先打开分类管理页面。
操作路径:内容—产品介绍—分类管理

在“分类管理”页面中,找到你要放主图的那个一级分类,在该一级分类的操作区域中点击“添加二级分类”,并把二级分类名称填写为“主图”,然后点击弹窗底部的“确认”完成创建。
回到产品列表页面,进入产品发布/管理入口。
操作路径:内容—产品介绍—产品页
在“产品页”列表页面右上角点击“新建”,在新建产品时把“分类”选择为刚刚创建的二级分类“主图”,并在产品内容里上传你要作为主图展示的图片,然后保存发布。

进入网页编辑器,把用于隐藏“主图”分类名称的 JS 写到页面的自定义代码里。
操作路径:网页编辑器—找到对于模块—编写代码

在网页编辑器画布右上角点击“编写代码”入口后,在左侧找到“模块JS”,点击“点击此处编辑JS”,在弹窗“输入自定义JS代码”里粘贴下面这段代码,然后点击弹窗底部的“保存”。
相关代码如下,仅供参考:
(function () {
const ROOT_ID = "这里填写对应模块的ID";
function hideMainImageCategory() {
const root = document.getElementById(ROOT_ID);
if (!root) return;
// 只处理二级分类
const links = root.querySelectorAll(".child-classified-list a.child-classified-name");
links.forEach(a => {
const text = (a.textContent || "").replace(/\s+/g, " ").trim(); // 清理空白/换行
if (text === "主图") {
const li = a.closest("li");
if (li) li.style.display = "none";
}
});
}
// 首次执行(页面初始)
hideMainImageCategory();
// 1) 监听展开/收起:点一级分类箭头/标题后,稍后再执行一次(给渲染留时间)
document.addEventListener("click", function (e) {
const root = document.getElementById(ROOT_ID);
if (!root) return;
// 点击发生在本组件内,且可能触发展开/收起
if (root.contains(e.target)) {
setTimeout(hideMainImageCategory, 0);
setTimeout(hideMainImageCategory, 50);
setTimeout(hideMainImageCategory, 200);
}
}, true);
// 2) PJAX 局部刷新结束后再隐藏
const root = document.getElementById(ROOT_ID);
if (root) root.addEventListener("pjax:end", hideMainImageCategory);
// 3) DOM 变化(异步插入/展开后插入)自动隐藏
const mo = new MutationObserver(() => {
hideMainImageCategory();
});
mo.observe(document.documentElement, { childList: true, subtree: true });
})();完成保存后,点击页面右上角的“保存”,再点击“发布”,让前端生效。
发布完成后回到前端页面刷新查看效果,你会看到一级分类下的图片能够正常展示,但二级分类里名为“主图”的分类名称不会再显示,从而实现“一级栏目下单独放主图”的展示方式。







请先 登录后发表评论 ~