qt中如何模拟按钮点击_如何快速在 Shopify 中加入按钮

f9bf8c9e040d44a0d705092cacd7c486.png

假如你会 `CSS` , `HTML` , `JS` 三件套,那么修改 `Shopify` 代码将不会太难(毕竟一个模板中的代码量还是挺多的,除非深入研究了代码,不然改起来还是会比较麻烦的)。

但挺多玩家是不会这三件套的,修改代码来达到添加页面元素会比较困难。

但如果我们找到了一个不错的站点,然后想模仿的话,事情就会简单很多。

以该站点的 `BUY ON AMAZON` 按钮为例

### 3.1 检查页面元素

#### 3.1.1 对你想要模范的元素,右键,检查。或者按 `F12`

![image-20200920095306956](https://gitee.com/NilolaChen/photo/raw/master/img/20200920095308.png)

#### 3.1.2 使用小箭头快速锁定想要的元素:点击小箭头,然后把速表移动到想要的元素上,就能快速地看到元素的相关信息。点击元素后,右侧检查页面就能锁定这个元素

![image-20200920095353097](https://gitee.com/NilolaChen/photo/raw/master/img/20200920095354.png)

### 3.2 抄下它的代码

#### 3.2.1 HTML 代码

![image-20200920092421443](https://gitee.com/NilolaChen/photo/raw/master/img/20200920092422.png)

HTML 代码是不方便复制的,因为上面会加上很多其他的信息。我们用手打就好了

````

<a class="">

<b> BUY ON AMAZON </b>

</a>

````

#### 3.2.2 CSS 代码

看到这里有个 `background-color`,应该是背景颜色。

![image-20200920092532396](https://gitee.com/NilolaChen/photo/raw/master/img/20200920092534.png)

点击蓝色的复选框,可以发现,按钮黄色不见了。

![image-20200920092735832](https://gitee.com/NilolaChen/photo/raw/master/img/20200920092737.png)

那我们就把整个代码抄下来

```

<a class="my-amazon-button">

<b>BUY ON AMAZON</b>

</a>

.my-amazon-button {

background-image: url(none);

background-repeat: no-repeat;

border-style: solid;

margin-top: 3%;

margin-bottom: 0px;

padding-top: 14px;

padding-left: 39%;

padding-bottom: 14px;

padding-right: 39%;

border-top-width: 1px;

border-left-width: 1px;

border-bottom-width: 1px;

border-right-width: 1px;

border-color: #000;

border-style: solid;

border-radius: 2px;

min-height: 0px;

background-color: rgba(243, 203, 103, 1);

text-align: center;

text-decoration: none;

}

```

### 3.3 添加链接

添加链接这一步非常关键,也是最难的。但我们有一个取巧的方法。

#### 3.3.1 使用 `Metafields Guru` 应用

![image-20200920093551971](https://gitee.com/NilolaChen/photo/raw/master/img/20200920093553.png)

然后点击我们想要的对象。以为每个产品的链接都是不相同的,那我们应该以产品为维度去添加链接。于是点击 `Products & Variants`。

![image-20200920093842375](/Users/mac/Library/Application Support/typora-user-images/image-20200920093842375.png)

然后添加相应的字段

![image-20200920093942156](https://gitee.com/NilolaChen/photo/raw/master/img/20200920093944.png)

这里注意,要让输入框保持当前的状态,不要切换到富文本输入框。因为富文本输入框会为我们的字段添加东西进去。

#### 3.3.2 继续改造我们的代码

````

<a class="my-amazon-button" href="{{product.metafields.links.amazon_url}}">

<b>BUY ON AMAZON</b>

</a>

.my-amazon-button {

background-image: url(none);

background-repeat: no-repeat;

border-style: solid;

margin-top: 3%;

margin-bottom: 0px;

padding-top: 14px;

padding-left: 39%;

padding-bottom: 14px;

padding-right: 39%;

border-top-width: 1px;

border-left-width: 1px;

border-bottom-width: 1px;

border-right-width: 1px;

border-color: #000;

border-style: solid;

border-radius: 2px;

min-height: 0px;

background-color: rgba(243, 203, 103, 1);

text-align: center;

text-decoration: none;

}

````

我在 `a` 元素中添加了一个 `href` 的属性,这个属性就是我们跳转的 `url` 。然后按我的格式写进去,就可以了。

`product`:Shopify 暴露给我们的对象,全局都可以拿到。

`metafields` :应用为我们插入的对象

`links`:即我们在 `Namespace` 中的字段

`amazon_url`: 即 `key`

### 3.4 添加到代码中

#### 3.4.1 加入 HTML 代码

![image-20200920094749678](https://gitee.com/NilolaChen/photo/raw/master/img/20200920094751.png)

![image-20200920094840560](https://gitee.com/NilolaChen/photo/raw/master/img/20200920094842.png)

由于这里大家的代码都不一样,需要自己尝试一番。当然也是有技巧的

#### 3.4.2 加入 CSS 代码

![image-20200920095049810](https://gitee.com/NilolaChen/photo/raw/master/img/20200920095051.png)

这个位置,我们基本直接加在最末尾就可以了。

到这里,我们就大功告成了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/397242.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

浅谈关于java中的深浅拷贝

一.浅拷贝(shallow copy) 1.如何实现浅拷贝? Object类 是所有类的直接或间接父类,Object中存在clone方法,如下 protected native Object clone() throws CloneNotSupportedException; 如果想要使一个类的对象能够调用clone方法 ,则需要实现Cloneable接口, 并重写 clone方法: p…

iOS开发-Protocol协议及委托代理(Delegate)传值

前言&#xff1a;因为Object&#xff0d;C是不支持多继承的&#xff0c;所以很多时候都是用Protocol&#xff08;协议&#xff09;来代替。Protocol&#xff08;协议&#xff09;只能定义公用的一套接口&#xff0c;但不能提供具体的实现方法。也就是说&#xff0c;它只告诉你要…

git 查看分支编码_12个常用的Git命令,赶紧记一波!

今天齐姐简单讲下 Git 的实现原理&#xff0c;知其所以然才能知其然&#xff1b;并且梳理了日常最常用的 12 个命令&#xff0c;分为三大类分享给你。本文的结构如下&#xff1a;作者和开发原由Git 的数据模型常用命令资源推荐作者和开发原由Talk is cheap. Show me the code.这…

会做饭的机器人曰记_颜真卿《麻姑仙坛记》:苍劲古朴,体态沉雄,气象宏大...

《麻姑仙坛记》&#xff0c;全称《有唐抚州南城县麻姑山仙坛记》&#xff0c;或称《麻姑山仙坛记》。颜真卿撰并书于大历六年&#xff08;771&#xff09;四月。此碑有大、中、小三种刻本&#xff0c;且原石均佚&#xff0c;原拓佳本亦难得。大字本&#xff0c;字径约5厘米&…

Metro UI 菜单(Winform)

我有个项目需要要到菜单导航&#xff0c;就自己动作做了一个&#xff0c;感觉还可以&#xff0c;分享给大家。下载地址:http://files.cnblogs.com/files/dyj057/MetroUIMenu.zip 主要代码&#xff1a; private void SetElements(){if (Elements null) return;int eWidth Bord…

echarts 山东地图_用Python画中国地图,实现各省份数据可视化

第一步&#xff1a;安装pyechartspyecharts是一款将python与echarts结合的强大的数据可视化工具&#xff0c;本文使用了0.1.9.4版本pip install pyecharts0.1.9.4第二步&#xff1a;读取数据我的数据是在Excel表格里&#xff0c;如下图&#xff1a;Execel数据使用xlrd(没有就通…

mysql 中某个字段相同的数据拼接起来

2019独角兽企业重金招聘Python工程师标准>>> mysql> select name, GROUP_CONCAT( age SEPARATOR ‘#’) from student group by name; ——————————————————— | name | GROUP_CONCAT( age SEPARATOR ‘#’) | ———————————————…

微信红包系统架构的设计和优化分享

微信红包系统架构的设计和优化分享 编者按&#xff1a;经过2014年一年的酝酿&#xff0c;2015微信红包总量创下历史新高&#xff0c;峰值1400万次/秒&#xff0c;8.1亿次每分钟&#xff0c;微信红包收发达10.1亿次&#xff0c;系统整体运行平稳, 在这里我分享下微信红包背后的技…

FastDFS单机版安装教程

安装清单如下&#xff1a; 一、安装FastDFS 1. 安装libfastcommon 先解压安装包到目录 # unzip libfastcommon-1.0.36.zip 安装编译工具及环境&#xff08;后面Nginx也会用到这些依赖环境&#xff09; # yum -y install gcc gcc gcc-c openssl openssl-devel pcre pcre-deve #…

【原创】Chrome最新版(53-55)再次爆出BUG!

2019独角兽企业重金招聘Python工程师标准>>> 前言 今年十月份&#xff0c;我曾发布一篇文章《Chrome53 最新版惊现无厘头卡死 BUG&#xff01;》&#xff0c;不过那个BUG在最新的 Chrome 54 中已经修正。 而今天即将发布的Chrome弱智BUG&#xff1a; 仅 Chrome 53 -…

进程kswapd0与events/0消耗大量CPU的问题

http://www.nowamagic.net/librarys/veda/detail/2539 今天下午网站宕了两次机&#xff0c;发工单给阿里云&#xff0c;发现原因是服务器的CPU 100%了。 重启服务器后&#xff0c;使用 top 命令看看是哪些进程消耗那么大的 CPU 使用。盯了有好十几分钟&#xff0c;主要消耗 CPU…

跑三小时的monkey测试该怎么算_浅谈App测试(下)~带音频

文 | Vicky采编&#xff5c;Emily浅谈App测试(上)&#xff5e;带音频一、功能测试​二、性能测试(1)耗电量影响因素&#xff1a;定位、传感器、蓝牙&#xff0c;其中CPU、持续定位是两个平台造成耗电的主要因素。(2)流量也就是常说的耗流量&#xff0c;影响因素有重复请求&…

2016-2017-2 《Java程序设计》课程学生博客和代码托管链接

2016-2017-2 《Java程序设计》课程学生博客和代码托管链接 博客 1552 20155201 李卓雯20155202 张 旭20155203 杜可欣20155204 王 昊20155205 郝博雅20155206 赵 飞20155207 王雪纯20155208 徐子涵20155209 林虹宇20155210 潘滢昊20155211 解雪莹20155212 江振思20155213 陆忠民…

回顾一年的工作历程_【设备管理公司】召开20202021年度总结计划表彰暨工作述职会议...

点击上方蓝字关注我们2020年即将过去&#xff0c;为了总结2020年各项工作开展情况&#xff0c;同时做好2021年工作计划与部署&#xff0c;2020年12月30日-31日&#xff0c;设备管理公司组织召开了2020-2021年度总结计划表彰暨工作述职会议。公司领导、各部门经理、部门主管、车…

注册验证的时候一直出现的报错问题,终于解决了

今天再注册验证表单的时候一直报错&#xff0c;但是什么都没有改&#xff0c;就报错了&#xff0c;后面才知道原来是和我上次上传图片的时候&#xff0c;导入的2个js的顺序有关系的&#xff0c; 45行和41行互相换一下位置就好了 转载于:https://www.cnblogs.com/likeji/p/61433…

重排序

一、重排序。 1、为什么需要重排序&#xff1f; 现在的CPU一般采用流水线来执行指令。一个指令的执行被分成&#xff1a;取指、译码、访存、执行、写回、等若干个阶段。然后&#xff0c;多条指令可以同时存在于流水线中&#xff0c;同时被执行。 指令流水线并不是串行的&#x…

tableau三轴该怎么做_如何用tableau绘制城市地铁线路图?

在用tableau绘制地铁线路图之前&#xff0c;当然是要获取相关的数据啦我们以郑州目前已开通的地铁为例&#xff0c;分别是1、2、5号线经度、维度可在 网页上自行搜索哦&#xff08;以谷歌地图为准&#xff09;有了这些下面我们就要开始啦将Excel中你所需要的数据直接导入到tabl…

哲学到编程:思想的实例化

万古长江水&#xff0c;千年儒释道。历史的长流中&#xff0c;芸芸众生&#xff0c;参差不齐&#xff0c;但总是能够总结出一个“生旦净末丑”来。儒、释、道&#xff0c;五千年的中华文化&#xff0c;却总是围绕着这三种主流思想交相演绎。千年间&#xff0c;豪士俊杰&#xf…

python 字符串交集_Python序列--集合(set)

集合集合用于保存不重复元素。- 集合和列表非常相似- 不同点&#xff1a;1.集合中只能存储不可变对象2.集合中存储的对象是无序(不是按照元素的插入顺序保存)3.集合中不能出现重复的元素集合的所有元素都放在一对”{ }” 中&#xff0c;两个相邻的元素之间用”,”分隔。集合最好…

【Python开发】Python的GUI用法总结

引用模块&#xff08;tkinter&#xff09;&#xff1a; 1 from tkinter import * 主窗口设置&#xff1a; 1 # 主窗口 2 tk Tk() # 主窗口实例化 3 tk.title("文本处理工具") # 主窗口标题 4 tk.geometry("700x4001001…