跳至主要内容

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-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
background-repeat: repeat-x;
}
更改为：
#menu .see-all:hover, #menu .see-all:focus {
text-decoration: none;
color: #ffffff;
background-color: #363636;
background-image: linear-gradient(to bottom, #444444, #222222);
background-repeat: repeat-x;
}
#menu .btn-navbar {
font-size: 15px;
font-stretch: expanded;
color: #FFF;
padding: 2px 18px;
float: right;
background-color: #229ac8;
background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
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-image: linear-gradient(to bottom, #444444, #222222);
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 文件
    方法2:
    5. 自定义类目导航栏内容呈现
    由于后台menu只能选择创建的category，如果我想把about和contact内容也放类目导航栏，需要在源码中找到添加自定义code的地方。
    对应源文件位置：catalog> view> theme> default> template> common > menu.twig
    找到上面menu的位置，然后将自定义的内容code添加在适合的位置。
    6. 自定义footer内容呈现
    通常开源电商系统或在线提供Sass建站服务，搭建的网站页脚都是{{ powered }}自动调取内容，百分百都是链接到服务商网站，所以我们需要优化页脚内容，避免链向与我们业务无关的网站。
    <p>{{ powered }}</p> 
    更改为： 
    <p>© 2020 <a href="https://www.cdcloth.com/">CDCLOTH</a>, Powered By <a href="https://www.wfqcj.com/">WFQCJ</a> </p>
    标签：

    评论

    发表评论

    此博客中的热门博文

    高质量外链 - YouTube.com

    2024年3月14日，重新整理一下YouTube这篇文章，把这篇作为高质量外链系列文章也算是一个不错的开头，YouTube网站权重可以说是最高的了，MOZ给到的PA和DA全是100，能积累这么高的权重，这和YouTube是重量级的社媒平台不无关系，我所在的跨境电商行业不用说了，只要有网站基本上都会创建一个YouTube频道，并在电商网站上挂上对应的几乎是全站页面覆盖的YouTube频道链接，且大部分都会是Dofollow属性链接，只有懂得SEO的且懂得Code的可能会调整成Nofollow属性链接，但很多提供搭建企业站或电商站服务的Sass平台是无法修改Code的，所以这些一定是Dofollow属性链接。那衍生到各行各业只要有创建YouTube频道需求的，都会在主站上挂对应的YouTube频道链接，且几乎和电商网站类似全站页面覆盖，自然而然YouTube的外链来源和数量极为丰富。 YouTube.com 网站权重 PA: 100，DA: 100，Spam Score: 3% 大家都会使用的YouTube来源的外链的建设如下： 1. 使用YouTube频道页面通过设置中添加基本信息来建设外链，早期的YouTube频道增加的链接是Dofollow属性链接，目前更新了版面且链接变为了Nofollow属性链接。 基本信息设置入口如下： 新创建的频道能继承的权重就很高，PA 57，DA: 100，Spam Score: 3%，就算是Nofollow属性链接也值得做，只要给这个频道做一些高质量外链，权重增长会非常迅速。 2. 使用YouTube的发布Video内容通过description来建设外链，不过这里的链接也是Dofollow属性链接，同频道首页一样能继承的权重就很高，PA 57，DA: 100，Spam Score: 3%，同样只要给这个视频链接做一些高质量外链，权重增长会非常迅速。 接下来展示的内容可以说没有多人会使用，此类外链通过MOZ插件大家可以看出是高质量的外链，而且可以无限制生成不一样的YouTube唯一的链接（可以仔细对比图片确认），且是Dofollow属性链接。
    发表评论
    阅读全文

    【转载】张朝阳给躺平族解毒

    张朝阳昨晚做了一个跨年演讲迎接2024年，主题是“时间”，才猛的想起马云和张朝阳都是1964年生，把互联网带进中国的第一代到了法定退休的年纪。但张朝阳说他的字典里没有退休，早上七点到公司，有时候是五点，晚上七点走。他在直播间里讲物理，把王石和俞敏洪这些人拉来聊人生。 我就在一个科技群里吐槽，1/4个世纪之前，张朝阳从麻省理工回来，拿了尼葛洛庞帝的钱，在天安门前裹着头巾玩滑板，那张照片登上大大小小的头版，是数字时代被打开的标志，两年后搜狐纳斯达克上市。那时谁能料到1/4个世纪之后，老张成了物理网红，无数直播间里的芸芸众生。 有个老炮马上反对说，再过1/4个世纪，眼下最热的科技新贵基本都会走下神坛，他们都得找到自己的物理学和直播间，张朝阳只不过先出发了1/4个世纪，先经历周期。 另一个老炮接过去说，普通人张朝阳才是大多数人可以共情的，神坛上的偶像只是接受空洞的崇拜。物理网红张朝阳才是他自己，天之骄子只是被历史选中的演员。 2006年我写《生于80年代》，当时看到20岁出头的几个80后，戴志康、李想这些人野心勃勃，有些跟年纪不相衬的老练，初中就玩电脑，有更多数字时代的本能，他们可能突破70和60后对互联网的统治。 文章一炮而红，很多人被这个故事打动了。但现实打脸，最早要到十年之后的2016年，抖音和拼多多才前后脚上线，SheIn才一百来号人，80后才冒出接管权力的苗头。 今天黄峥、张一鸣、许仰天三个80后把全球电商市场搅到天翻地覆，拼多多和字节凭全球化把阿里和腾讯盖过，离2006年那个预言已经过去十八年，一代人。 2006年还是PC互联网盛世，70和60后早就提前占领要道，一夫当关万夫莫开。这时冒出来的80后不管战斗力多强，都不可能凭空开天辟地。那个80后的救世主，一年以后发布iPhone的乔布斯本尊，是一个50后，而且是长在唯一科技强权美国的操作系统上。那个时代的中国80后注定活在70和60后的影子里。 直到十年后移动互联网盛世，那些在这十年历练过人生又没有PC互联网包袱的80后，才能抓住机会。换句话说，2006年就冒头的80后就坏在出道太早。那一年黄峥、张一鸣和许仰天要么还在学校，要么刚开始打工。 形势比人强。 如果没有几亿农民工抛妻弃子，背井离乡去城里打工，攒下中国的制造业根基，如果没有支付宝，没有智能手机然后有了微信，如果没有大基建和四通一达，如果不巧生在刚果，那...
    发表评论
    阅读全文

    出口跨境电商的结缘与梦想

    90后的我即将步入30岁了，从2011年11月初份实习开始接触了英文SEO，当初的实习公司主要生意是国外游戏虚拟币交易平台，当时WOW(World of Warcraf)非常火，我所在的创嘉科技几乎包揽了所有搜索量比较大关键词的Google首页排名，其中zyy.com非常强势长期包揽很多搜索量级比较大的关键词Google第一的排名，可惜这个网站已经无法访问了；另外一个主推的游戏是RS(Runescape)，其中4rsgold.com非常强势长期包揽很多搜索量级比较大的关键词Google第一的排名，截止今天（2019年12月18日）RS Gold,Runescape Gold等关键词在Google依然排名第一（ RS Gold Google排名点击查阅 ， Runescape Gold Google排名点击查阅 ）。 2012年3月中旬离开离开了丽水，来到了杭州这座美丽的城市，虽然仅在丽水待了4个月多，但是不论在工作上，还是生活上，都是身心愉悦的状态。在工作上由于刚毕业，很想学一技之长，每天都在专研SEO，几乎每天晚上都会在公司待到12点左右才回公司宿舍，至今仍很感谢那段时光的努力，但是似乎再也找不到当初的那种努力的状态了，希望未来还能找得回来。在生活上，部门同事非常友好，会经常一起做公司大巴去市里面逛街，或者大家一起爬白云山，然后回来的路边吃烧烤，不过每次都是部门经理（ 凡哥 ）请客，所以我对凡哥的印象是没有官架子，和部门所有同事都是朋友，而且是愿意做出自我牺牲让大家快乐。我的这个 wfqcj.com 的域名也是2012年2月27日在丽水时购买，至今已经走过了8年，从最初的在淘宝购买空间服务用WordPress搭建个人博客，中间也写了一些文章，但是都没有做到有始有终，还有觉得以前写的那些都是太浅层次了，并没有什么价值，所以也就没有备份，或者找回，自我的意识里有一种要放弃过去，后来也就没有再购买空间服务啥的，而是直接将域名绑定到了Blogger，但是一直未有想写点什么的念头，可能是年龄的原因，想留下点什么记录，所以取了一个“ 出口跨境电商的结缘与梦想 ”主题，希望能带着梦想重新出发，排除一切阻碍向着梦想实现自我，成就自我。 2012年3月中旬，我来到了杭州，当时住在一个大学室友那里，第二天我找了附近的一个网吧，开始疯狂的投简历，然后记录这些公司的地址，...
    发表评论
    阅读全文