如何在Wix Velo中实现优化的年龄验证弹出窗口
建议操作步骤
首先,我们创建一个Lightbox来作为我们的年龄验证弹出窗口:
打开Wix编辑器,转到添加 > 互动 > Lightbox。
设计您的弹出窗口:
将Lightbox命名为age21alert。
添加两个按钮:一个标有“是的,我超过21岁”,ID为openButton,另一个标有“不是,我未满21岁”,ID为closeButton。
包含询问用户是否超过21岁的文本。
确保设计包括一个深色覆盖层,以遮挡弹出窗口后面的网页内容。
通过点击开发模式并选择启用开发模式来启用Velo。然后,您将代码分为两部分添加:一部分在Lightbox中,另一部分在MasterPage中。
在编辑器中导航到您的Lightbox,并插入以下Velo脚本来处理用户交互:
import wixWindow from 'wix-window'; import { session } from 'wix-storage'; $w.onReady(function () { $w('#openButton').onClick(() => { session.setItem("isOver21", "true"); wixWindow.lightbox.close(); }); $w('#closeButton').onClick(() => { wixLocation.to("https://www.google.com/search?q=wixcn.net"); // 重定向未满年龄的用户 }); });
解释:
会话存储storage:使用wix-storage模块中的session来记住用户的年龄验证状态。
按钮动作closeButton/openButton:定义每个按钮的动作:确认年龄或重定向。
重定向:使用wixLocation.to("https://www.google.com/search?q=wixcn.net")将未成年用户导航到外部网站。
根据所需页面,将处理会话检查并确定是否应显示Lightbox:
import wixWindow from 'wix-window'; import { session } from 'wix-storage'; $w.onReady(function () { if (session.getItem("isOver21") !== "true") { wixWindow.openLightbox('age21alert'); } });
会话检查:使用wix-storage模块中的session在任何页面加载之前检查用户的年龄验证状态。如果没有验证,则显示Lightbox。
合规和道德:确保您的年龄验证实施符合当地法律和行业标准。在没有用户明确同意或适当通知的情况下重定向用户可能不是最佳做法。
用户体验:确保流程流畅,并清楚地传达为什么用户被重定向或为什么拒绝访问。
Thank you so much ~haha~
首页 | Wix Editor教程 | Wix Studio教程 | 开发教程
服务内容 | 服务案例 | 服务流程
全部文章 |交流问答 | 关于我们 | 联系我们
隐私条款 | Cookies政策 | 用户协议 | 退款政策
Email: support@wixcn.net
WeChat: wixhelper
LINE: luopu01
公众号: wix建站助手
Copyright © 2020- 2024 WIXCN - wix建站助手.
建议操作步骤
步骤1:设置Lightbox
首先,我们创建一个Lightbox来作为我们的年龄验证弹出窗口:
打开Wix编辑器,转到添加 > 互动 > Lightbox。
设计您的弹出窗口:
将Lightbox命名为age21alert。
添加两个按钮:一个标有“是的,我超过21岁”,ID为openButton,另一个标有“不是,我未满21岁”,ID为closeButton。
包含询问用户是否超过21岁的文本。
确保设计包括一个深色覆盖层,以遮挡弹出窗口后面的网页内容。
步骤2:使用Velo编写代码
通过点击开发模式并选择启用开发模式来启用Velo。然后,您将代码分为两部分添加:一部分在Lightbox中,另一部分在MasterPage中。
Lightbox代码
在编辑器中导航到您的Lightbox,并插入以下Velo脚本来处理用户交互:
import wixWindow from 'wix-window'; import { session } from 'wix-storage'; $w.onReady(function () { $w('#openButton').onClick(() => { session.setItem("isOver21", "true"); wixWindow.lightbox.close(); }); $w('#closeButton').onClick(() => { wixLocation.to("https://www.google.com/search?q=wixcn.net"); // 重定向未满年龄的用户 }); });
解释:
会话存储storage:使用wix-storage模块中的session来记住用户的年龄验证状态。
按钮动作closeButton/openButton:定义每个按钮的动作:确认年龄或重定向。
重定向:使用wixLocation.to("https://www.google.com/search?q=wixcn.net")将未成年用户导航到外部网站。
页面代码
根据所需页面,将处理会话检查并确定是否应显示Lightbox:
import wixWindow from 'wix-window'; import { session } from 'wix-storage'; $w.onReady(function () { if (session.getItem("isOver21") !== "true") { wixWindow.openLightbox('age21alert'); } });
解释:
会话检查:使用wix-storage模块中的session在任何页面加载之前检查用户的年龄验证状态。如果没有验证,则显示Lightbox。
附加考虑因素
合规和道德:确保您的年龄验证实施符合当地法律和行业标准。在没有用户明确同意或适当通知的情况下重定向用户可能不是最佳做法。
用户体验:确保流程流畅,并清楚地传达为什么用户被重定向或为什么拒绝访问。
Thank you so much ~haha~