13933871212
首页新闻

首页 > 首页新闻 >

石家庄网络推广优化
2020-10-17 作者:展为网络
石家庄网络推广优化,展为网络十周年,广受用户认可。html嵌入代码编辑器
您可以在此处获取以下代码以在自己的项目中使用:
 
<input type =“ hidden” name =“商品ID” value =“ YOURCOLLECTIONINFOHERE”> 
<input type =“ hidden” name =“商品名称” value =“ YOURCOLLECTIONINFOHERE”>
 
表单正在传递两个值,Zapier将需要两个值来完成这项工作。第一个是我们前面提到的商品ID。第二个是收集项目的名称。 
 
当我第一次开始构建此对象时,我以为我也将通过集合中的投票数。但是经过一番思考和测试,我发现这是一种有缺陷的方法。 
 
这种方法的问题在于,如果我访问该页面并且当前计数为10票并被加载到表单中,然后在剩下的一天中我离开浏览器,其他人将在我不在时增加投票。当我返回昨天加载页面的机器并进行投票时,我正在从产品中移除投票。
 
因此,此问题的答案是使用一些更高级的Zapier功能来完成这项工作。但是,在开始使用Zapier之前,我们需要命名表单,发布项目,然后一次在收集项之一中提交表单,以便Zapier拥有所需的数据。
 
现在您已经完成了工作,请转到Zapier进行此工作。
 
石家庄网络推广优化喜欢看本教程吗?
 
 
 
在网络上释放您的创造力
无需编写任何代码即可构建完全定制的,可用于生产的网站或超高保真原型。仅适用于Webflow。
 
免费上手
 
与Zapier连接
创建一个新的Zap并触发Webflow表单提交。 
 
在这里,您将选择自己的网站和提交到Zapier之前提交的表单。下一步是使它变得更高级,但这是使它起作用的魔力。使用Zapier工具的Webhooks。对于操作,请选择GET。
 
扎皮尔得到
您想要获得的是用户单击“投票”按钮时项目获得的投票数。为此,您可以使用Webflow Developers站点中的一些代码。具体来说,您将使用该调用获取单个item。
 
Webflow在文档的侧面提供了对API的示例调用,您可以复制地址以获得单个项目。 
 
Webflow开发人员
接下来,将此地址粘贴到Zapier中GET模板的URL框中。您将进行一些更改。您会遇到的第一组数字是收藏集的ID。将其替换为我们先前使用Postman时获取的集合ID。 
 
石家庄网络推广优化第二组数字是商品ID,您可以在步骤1中从表单提交触发器动态添加。
 
扎皮尔gif
您可以保留“自定义GET”屏幕的其余部分,直到您到达底部和标有“标题”的部分为止。在本节中,添加accept-version作为标题,其值应为1.0.0。要添加的第二个标头将是“授权”,其值应为“ Bearer”,后跟一个空格和您的API密钥。这是我的设置方法。 
 
Zapier中的api
测试此步骤,并继续前进。到目前为止,您已经获取了表单提交,并且使用GET获取了该项目当前拥有的票数。接下来,您需要在该数字上加1。为此,请使用Zapier Formatter工具。 
 
对于事件,选择“数字”。使用选择框中的添加操作。在第一个字段中,添加第二步中该项目从GET操作中当前获得的票数。然后添加另一个字段并输入数字1。
 
Zapier输入
现在,当您继续时,Zapier将使用我们的用户刚刚添加的投票添加当前投票数!晕!我的一年级数学老师会感到骄傲吗? 
 
好的,现在进入第四步也是最后一步。现在,您要使用Webflow中最重要的更新实时项目Zap。确保您在此处选择“更新实时项目”,而不仅仅是“更新项目”。
 
第一个将更新项目并发布。第二个选项只是更新项目,您必须登录并发布网站,以便人们可以看到更改。在这种情况下,这是行不通的。 
 
选择您正在使用的同一站点,以及集合。一旦有了,请填写表格。 
 
更新实时商品gif
确保已存档和草稿设置为“否”,然后单击“继续”并将测试发送到Webflow。 
 
测试通过后,打开Zap,您就可以开始了!您有一个内置于Webflow中的upvote系统。现在,跳回到Webflow并添加最后的修饰。 
 
人们投票时,您希望他们知道正在发生的事情。为此,请设置表单成功状态的样式,使其与按钮的大小相同。然后向其中添加一个加载GIF,以便在用户提交时被告知正在执行操作。
 
表格块设置
然后,在页面或网站的主体自定义代码部分中,您将再添加一个脚本:
 
<script> 
Webflow.push(function(){ 
 $(document).on('submit','form',function(){ 
   // 3000毫秒后刷新页面
   setTimeout(function(){location.reload(true); },2000);
 });
});
</ script>
 
重新发布该网站。现在当有人投票时:
 
他们看到表单提交
它们被显示为GIF,因此他们知道背景中正在发生某些事情
在Zapier,他们的投票正在增加
并在3秒后刷新页面,并显示他们的投票已添加 
您会在这里注意到有关此设置的一件事是,由于我们没有登录系统,因此用户可以对同一项目进行一遍又一遍的投票。我不想在此博客文章中过分详细,但是在我的实际版本中,我在用户主页上添加了自定义代码,以便当用户单击“投票”按钮时在本地存储中设置一个项目。一旦添加该项目,我就从他们隐藏了按钮。他们可以访问其他浏览器或设备或清除其缓存。但是,如果我想要一个防弹系统,则可能不会使用Webflow作为解决方案。 
 
 
您可以将其用于升级系统或其他用途。您可以重新创建在“中型”文章中看到的拍手功能,计算某人在社交媒体上分享您的文章的次数,或者创建自己的民意调查。
 
如果您想了解我的构建方式,可以在此处克隆该项目。
 
我迫不及待地想看看您如何理解这个概念,并做出令人惊奇的事情! 

返回

上一篇:石家庄建网站价格

下一篇:石家庄官网开发