🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
因为不同的产品,对应的amazon链接不同,所以这里需要借助第三方应用Metafields Guru,用于后台录入不同产品对应的amazon链接。 首先,为不同产品新建metafield,如图: ![](https://img.kancloud.cn/b5/d4/b5d4936411594f0de12fdad130297b17_1311x703.png) 接着,找到源文件: templates/product.liquid - sections/product-template.liquid 在想要的位置加上以下代码: ~~~ {% if section.settings.enable_buy_on_amazon %} <div class="buy-on-amazon"> {% if product.metafields.c_f['amazon_url'] != blank %} <button class="buy-on-amazon-button" onclick="window.open('{{ product.metafields.c_f['amazon_url'] }}','_blank')" type="button"> <span>BUY ON AMAZON</span> </button> {% endif %} </div> {% endif %} ~~~ 其中,c_f是命名空间,主要为了避免冲突;amazon_url为key,用于获取后台配置的值。 为了方便关闭该按钮,增加了开关enable_buy_on_amazon,在{% schema %}{% endschema %}加入以下代码,即可在自定义页面直接修改配置。代码如下: ~~~ {% schema %} { "name": "", "class": "", "settings": [ { "type": "header", "content": "buy on amazon" }, { "type": "checkbox", "id": "enable_buy_on_amazon", "label": "Show Buy On Amazon Button", "info": "namespace:c_f, key:amazon_url", "default": false }, } {% endschema %} ~~~ ***** 这里,单个产品是否显示buy on amazon按钮,是根据该产品是否设置了amazon_url来决定的。 如果部分产品有经常改变显示状态的需要,可以增加amazon_status字段来控制,避免后续需要重新开启的时候,又得去查找具体的amazon链接。