【发布时间】：2012-12-11 22:53:08
【问题描述】：
我一直在使用 shopify 网站通过 fancybox 安装表单，同时使用 cookie 仅在第一次访问时显示。我在加载页面时遇到花式框出现问题，但是如果我取出花式框代码，表单会内联加载到页面上。这让我怀疑我在调用fancybox时做错了什么。另外，我认为 cookie 不能正常工作。我没有通过 Firebug 看到它们。
这是我的 index.liquid 底部的代码
<script type="text/javascript">
jQuery(document.ready(function() {
if ($.cookie('rrp8')) {
// it hasn't been 120 days yet
} else {
$.fancybox(
'<div id="home-pop"><p style="text-align: left;">Sign up here for updates on new classes, future dates & more</p><form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST"><input type="hidden" name="oid" value="00DU0000000J1yb" /><input type=hidden name="oid" value="00DU0000000J1yb"><input type=hidden name="retURL" value="http://cdn.shopify.com/s/files/1/0149/4308/files/pop-up-thanks.png?76"><input type=hidden name="LeadSource" value="Training Store"><div><table><tbody><tr><td><label for="first_name">First Name:</label><br><input id="first_name" type="text" name="first_name" size="26" maxlength="40" /> <br></td></tr><tr><td><label for="last_name">Last Name:</label><br><input id="last_name" type="text" name="first_name" size="26" maxlength="40" /> <br></td></tr><tr><td><label for="email">Email:</label><br><input id="sf_email" maxlength="80" name="email" size="26" type="text" /><br></td></tr><tr><td><label for="company">Company:</label><br><input id="company" maxlength="40" name="company" size="26" type="text" /><br></td></tr><tr><td><input type="submit" name="submit" value="Submit"></td></tr></tbody></table></div></form></div>',
{
'autoDimensions' : true,
'width' : 570,
'height' : 530,
'transitionIn' : 'fade',
'transitionOut' : 'fade'
}
);
}
});
// set cookie to expire in 120 days
$.cookie('rrp8', 'true', { expires: 120});
</script>
这是theme.liquid中的代码
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
{{ 'jquery.mousewheel-3.0.4.pack.js' | asset_url | script_tag }}
{{ 'jquery.fancybox-1.3.4.pack.js' | asset_url | script_tag }}
{{ 'jquery.cookie.js' | asset_url | script_tag }}
{{ 'jquery.fancybox-1.3.4.css' | asset_url | stylesheet_tag }}
我在 shopify 论坛上发布了此内容，但尚未收到回复。我希望有人可以提供帮助。
更新 当我将以下“简化”代码添加到纯 html 文件时，fancybox 可以工作。当我将它添加到 Shopify 时，什么也没有出现。我认为我的错误在shopify的某个地方，只是不知道在哪里。 $(函数(){ var myContent = '在此处注册以获取有关新课程、未来日期等的更新
名字：姓氏：
电子邮件：
公司：
';
$.fancybox(myContent,
{
'autoDimensions' : true,
'width' : 570,
'height' : 530,
'transitionIn' : 'fade',
'transitionOut' : 'fade'
}
);
});
</script>
</head>
<body>
</body>
</html>
【问题讨论】：
-
我应该注意，我已经尝试了上述 theme.liquid 中的链接以及没有液体格式的完整 URL。
-
你试过不带引号的
true吗？通常布尔值或整数值不带引号，否则您必须将 cookie 值验证为字符串if ($.cookie('rrp8') == "true")。 -
您还可以查看我一年前的答案，我使用变量而不是 stackoverflow.com/a/8305703/1055987
-
....顺便说一句，您的fancybox 代码似乎运行良好。检查jsfiddle.net/Wp6LT（我刚刚删除了shopify引用以避免跨域问题）
-
我刚刚尝试了不带引号的
true，实际上我在一年前的昨天尝试了您的答案，我尝试使用 jsfiddle 的代码进行更新 - 没有任何效果。