当前位置:首页 > 建站教程 > 为你的opencart网站添加Buy on Amazon按钮 | 多站点跳转购买按钮 |Opencart教程

为你的opencart网站添加Buy on Amazon按钮 | 多站点跳转购买按钮 |Opencart教程

2年前 (2024-01-09)建站教程630
在在opencart搭建独立站跳转到亚马逊购买按钮流程开始: 1.打开opencart后台–规划设计–模板编辑器–product  
在opencart添加Buy on Amazon跳转购买按钮
2.输入以下代码   <style type=”text/css”> .buy_button_thr { position: absolute; width: 185px; height: 42px; line-height: 42px;  display: inline-block;  margin-left: 10px; font-size: 14px; } .buy_button_thr a { text-align: center; cursor: pointer; color: #fff; display: block; text-decoration: none; } .buy_button_thr .buy_button_thr_a { border-radius: 50px; background: #f7ab00; } .buy_button_thr .buy_button_thr_a:hover { background-color: #7f7f7f; } .buy_button_thr .buy_button_thr_ul { list-style: none; margin: 0; padding: 18px; background-color: #efefef; position: absolute;width:100%;z-index:1; } .buy_button_thr .hide { display: none; } .buy_button_thr .buy_button_thr_ul li { display: block; padding: 4px 6px; font-weight: 400; line-height: 20px; margin-bottom: 4px; } .buy_button_thr .buy_button_thr_ul li a { font-size: 12px; text-align: left; cursor: pointer; color: #6d6d6d; display: block; line-height: 100%; } .buy_button_thr .buy_button_thr_ul li:hover a { color: #ec4a00; } .buy_button_thr .buy_button_thr_ul img { vertical-align: middle; max-width: 100%; } .buy_button_thr .buy_button_thr_ul li em { margin-left: 4px; } #tab-description { line-height: 18px; padding-top:0;} #tab-description > p { margin-bottom: 0; } </style> {% if HIDDEN_LINKS %} <div id=”HIDDEN_LINKS” style=”display:none;”>{{ HIDDEN_LINKS }}</div> {% endif %} <script type=”text/javascript”> $(function () { ({ jsonSelector: ‘#HIDDEN_LINKS’, insertAfterSecltor: ‘#button-cart’, countryIcon: { uk: { title: ‘United Kingdom’, src: ‘/image/catalog/countryImgs/i_uk.jpg’ }, de: { title: ‘Germany’, src: ‘/image/catalog/countryImgs/i_de.jpg’ }, us: { title: ‘United States’, src: ‘/image/catalog/countryImgs/i_us.jpg’ }, jp: { title: ‘Japan’, src: ‘/image/catalog/countryImgs/i_jp.jpg’ }, it: { title: ‘Italy’, src: ‘/image/catalog/countryImgs/i_it.jpg’ }, es: { title: ‘Spain’, src :’/image/catalog/countryImgs/i_sp.jpg’ }, fr: { title: ‘France’, src: ‘/image/catalog/countryImgs/i_fr.jpg’ }, ca: { title: ‘Canada’, src: ‘/image/catalog/countryImgs/i_ca.jpg’ } }, getLinks: function () { try{ var $el = $(this.jsonSelector), jsonStr = “”; if ($el.length > 0) { jsonStr = $el[0].tagName == “INPUT” ? $el.val() : $el.html(); } return jsonStr.length > 0 ? JSON.parse(jsonStr) : ”; }catch(e){ return ”; } }, createHtml: function (array) { var i, len = array.length,temp,liStr=”,iconCfg; for (i = 0; i < len; i++) { temp = array[i]; iconCfg = this.countryIcon[temp.img] || temp.img; liStr += ‘<li> <a target=”_blank” href=”‘+ temp.link + ‘”> < img data-width="194"> 在opencart添加Buy on Amazon跳转购买按钮
在opencart添加Buy on Amazon跳转购买按钮
4.然后在每个产品的生产地写上以下代码 [{“img”:”jp”,”link”:”https://www.zuimoban.com”}] 其中jp,跟link部分是可以更改的,如果有多个站点,就复制上一条句型就可以了,效果如下:  
在opencart添加Buy on Amazon跳转购买按钮
总结以下: 1.添加代码到后台 2.修改服务器字段的属性 3.为每个产品添加各个站点的链接 完美跳转到亚马逊上!

扫描二维码推送至手机访问。

欢迎转载或分享本篇文章。

本文链接:https://www.jcba123.com/article/399

标签: OpenCart
分享给朋友:

“为你的opencart网站添加Buy on Amazon按钮 | 多站点跳转购买按钮 |Opencart教程” 的相关文章

CSS 语法

CSS 语法

CSS 实例 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。 属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒...

如何为图像添加 CSS Reveal 动画

如何为图像添加 CSS Reveal 动画

我们可能会想“好吧,这是一个简单的任务!在你制作动画的图像上方添加一个额外的元素,它就完成了。” 没错,但我们不会使用任何额外的元素或伪元素。我们将只使用元素来工作<img>。而已! 这听起来可能是不可能的,因为仅使用图像元素,我们无法在其上方添加任何东西。确实,我们不会在...

WordPress 如何批量修改文章信息?

你是否遇到过如下几种状况: 博客更换域名,博客文章的内容也要跟着换 使用的图片地址更换了 写了很多文章,回过头来想切换作者 想删除某个可恶留言者的所有留言 想更改某个留言者所有留言的网站URL 想要禁用所有文章的pingback 想要禁用所有文章的评...

介绍使用WordPress时10个常用的MySQL查询

多数使用 WordPress 搭建的网站,其后台都是 MySQL 数据库,经常我们需要定制 WordPress 的功能,这里我们列表 10 个最有用的 WordPress 的数据库查询,你需要一个数据库的管理工具,例如 phpMyAdmin 或者 Navicat 等来执行这些 SQL 语句。...

8个好用的WordPress RSS Feed插件

8个好用的WordPress RSS Feed插件

什么是RSS Feed? RSS代表“Really Simple Syndication”,但它也可能意味着“丰富站点摘要”或“实时简单联合组织”。这是一种基于XML的内容格式,可向用户更新所有他们喜欢的网站上的最新新闻,文章,标题和内容。 由于已经存在了很长一段时间,因此许多人都认为RSS...

如何使Wordpress缩略图网格大小相同

WordPress缩略图网格大小相同的方法可以通过以下步骤实现: 确定缩略图尺寸:在WordPress中,缩略图尺寸由主题或插件决定。通常,可以在主题设置或自定义代码中找到缩略图尺寸设置选项。确定所需的缩略图尺寸,例如200x200像素。 调整图片尺寸:WordPress提供了一个名...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。