史无前例大地震!!亚马逊血洗中国卖家?!
一段微不足道的小代码。
首先,部分付费模版应该都加了这部分功能,所以如果你是用的模版能显示折扣信息,直接在后台开启就好。
本文的例子,我使用的debut模版。
产品页面本来是这样婶的:产品标题+价格+购物车
更改之后:多了一句优惠信息!
具体步骤:
打开edit code,搜索product,找到product-template,liquid文件。
产品页面的文件都是放在这里,部分模版也有可能是其他名字,但是一定带有product.
打开代码,搜索product.title ,也就是搜索产品标题,当然你要搜产品价格也可以,毕竟我是放在产品价格下面的。
我们在产品价格下添加一下代码即可
代码:
<div class ="discount-message">
{% if product.compare_at_price_max> product.price %}
You save {{ product.compare_at_price_max| minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max| money_without_currency | times: 100 | remove: '.0'}}%
{% endif %}
{% if product.compare_at_price_max> product.price %}
({{ product.compare_at_price| minus: product.price | money }})
{% endif %}
</div>
实际上这两段代码是一样的,只是前者是折扣百分比,后者是直接打折的钱。
康康效果:
嗯~功能实现了,但是有点丑。没事,我们来给它优化一下!
打开Theme.scss.liquid ,部分模版是style.scss.liquid文件,不管啦,反正认准scss.liquid就好啦。这个文件是给你各个部分添加特效的。嗯,其实也就是字体大小,背景颜色之类的。
之前的代码中我定义了一个class叫 discount-message ,所以直接在这个class里加特效就好了。
在theme.scss.liquid末尾添加:
代码:
.discount-message {
color: red;
font-size: 18px;
font-weight:bold;
}
效果如下:
嗯~也很一般。
害!就这样啦,调一个自己符合网站风格的,你喜欢的。
你可以改变字体间距、背景颜色等等之类的。在这个文件里能找到其他部分的效果代码,直接模仿更改就好了。
发散:
其实在这里也能添加一句包邮信息,或者多少天收货的信息,还有类似的可以把这个折扣加在购物车上,虽然很多插件也可以实现,但是为了避免插件拖慢网站,我尽量都是用代码实现。大家有兴趣的可以自己研究交流。