Opencart模板导航栏和商品优化

2020年8月购买了一个Bluehost服务器，用Opencart搭建了一个电商网站（CDCLOTH.com），当时浅浅的研究了一下Opencart这个开源程序部署好后，有哪些地方需要优化，当时将所做的部分优化记录在了有道云笔记上，今天整理发布到个人博客，分享给有需要的朋友。

1. 类目栏背景色和字体颜色调整

刚搭建完成的网站前端页面一级类目栏背景色是蓝色，字体是黑色，由于网站是售卖服装类，蓝色背景色显得不搭，所以需要调整为黑色。所以我们需要在前端找到这个section code所在位置和引用的css字段名称，然后需要去后台源码中找到对应code位置和引用的css字段，并理解code需要如何优化才能呈现想要的效果。

http://xxxx.com/catalog/view/theme/default/stylesheet/stylesheet.css

对应源文件位置：catalog> view> theme> default> stylesheet> stylesheet.css

#menu { background-color: #229ac8; background-image: linear-gradient(to bottom, #23a1d1, #1f90bb); background-repeat: repeat-x; border-color: #1f90bb #1f90bb #145e7a; min-height: 40px; } 更改为： #menu { background-color: #363636; background-image: linear-gradient(to bottom, #444444, #222222); background-repeat: repeat-x; border-color: #222222 #222222 #000000; min-height: 40px; }

二级类目同上存在类似问题需要调整，需要优化二级类目展开后背景色及Show All Category的字体颜色。

.dropdown-menu li > a:hover { text-decoration: none; color: #ffffff; background-color: #229ac8; background-image: linear-gradient(to bottom, #23a1d1, #1f90bb); background-repeat: repeat-x; } 更改为： .dropdown-menu li > a:hover { text-decoration: none; color: #ffffff; background-color: #363636; background-image: linear-gradient(to bottom, #444444, #222222); background-repeat: repeat-x; }

#menu .see-all:hover, #menu .see-all:focus {

text-decoration: none;

color: #ffffff;

background-color: #229ac8;

background-repeat: repeat-x;

}

更改为：

#menu .see-all:hover, #menu .see-all:focus {

text-decoration: none;

color: #ffffff;

background-color: #363636;

background-repeat: repeat-x;

}

#menu .btn-navbar {

font-size: 15px;

font-stretch: expanded;

color: #FFF;

padding: 2px 18px;

float: right;

background-color: #229ac8;

background-repeat: repeat-x;

border-color: #1f90bb #1f90bb #145e7a;

}

更改为：

#menu .btn-navbar {

font-size: 15px;

font-stretch: expanded;

color: #FFF;

padding: 2px 18px;

float: right;

background-color: #363636;

background-repeat: repeat-x;

border-color: #222222 #222222 #000000;

}

2. 首页商品列表标题与价格字体颜色调整

首页列表商品标题字体颜色优化，这里有一个鼠标聚焦与释放的颜色动态变化的效果。

http://xxxx.com/catalog/view/javascript/bootstrap/css/bootstrap.min.css

对应源文件位置：catalog> view> javascript> bootstrap> css> bootstrap.min.css

a:focus,a:hover{color:#23527c;text-decoration:underline}

更改为：

a:focus,a:hover{color:#222222;text-decoration:underline}

a{color:#337ab7;text-decoration:none}

更改为：

a{color:#111111;text-decoration:none}

首页列表商品价格字体颜色优化，

对应源文件位置：catalog> view> theme> default> stylesheet> stylesheet.css

促销价price从灰黑色#444调整为红色#ff0000

.product-thumb .price {

color: #444;

}

更改为：

.product-thumb .price {

color: #ff0000;

}

原价price-old从浅灰色#999调整为灰黑色#363636

.product-thumb .price-old { color: #999; text-decoration: line-through; margin-left: 10px; } 更改为： .product-thumb .price-old { color: #363636; text-decoration: line-through; margin-left: 10px; }

3. 商品列表页商品简短描述区域调整

服装类商品如果在编辑上架商品时商品描述没有什么特色个性化的内容，那就是简单套用模板写的相似度很高的商品描述，这样的商品描述在商品列表页重复呈现给用户，体验非常不好，所以需要将这部分section整体移除。

/catalog/view/theme/default/template/product/ 下 category.tpl 文件

将这段code移除后效果并没有达成，内容虽移除了，但是空白呈现整个section，还需要继续从code中找到需要优化的地方。

/catalog/view/theme/default/stylesheet/ 下 stylesheet.css 文件

最终达成了想要的列表页商品呈现效果。

4. 商品详情页内容呈现调整

搭建好的网站商品详情页呈现效果非常不理想，左侧图片区域宽度太大，但是高度又很低，导致图片被挤压仅占比很小的区域，右侧商品标题及描述区域宽度太窄，内容呈现样式被分割成多行，所以我们需要优化左右两侧内容的宽度及高度比例。个人习惯从前端code中找到优化code的地方进行优化，实际这里可以在后台给到功能区域调整，所以有两个方法可以达成想要的效果。

方法1:

/catalog/view/theme/default/template/product/ 下 product.tpl 文件