logo标签列表

Fancybox弹出窗口和cookies无法使用

jqueryfancyboxshopify
3
我一直在处理一个Shopify网站，通过fancybox安装表单，同时使用cookies仅在第一次访问时显示。但是我遇到了问题，即无法将fancybox显示在页面加载时，但是如果我删除fancybox代码，则表单会内联加载到页面上。这使我怀疑我在调用fancybox时做错了些什么。此外，我认为cookies无法正常工作。我在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 &amp; 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" />&nbsp;<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" />&nbsp;<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中，只是不知道具体位置。 $(function(){ var myContent = '在此注册，获取关于新班次、未来日期等更新信息









    $.fancybox(myContent,
                 {
                     'autoDimensions'    : true,
                     'width'             : 570,
                     'height'            : 530,
                     'transitionIn'      : 'fade',
                     'transitionOut'     : 'fade'
                  }
              );
    });

    </script>
    </head>
    <body>
    </body>
    </html>
我应该注意到，我已经尝试过主题文件theme.liquid中的链接，包括液态格式和完整URL。 - LindaS
你尝试过不加引号使用 true 吗？通常布尔值或整数值不需要引号，否则你必须将 cookie 值作为字符串进行验证 if ($.cookie('rrp8') == "true")。 - JFK
你也可以查看我一年前的答案，那里我使用了变量 https://dev59.com/MF3Va4cB1Zd3GeqPC7bt#8305703 - JFK
顺便说一句，你的fancybox代码似乎运行良好。请查看http://jsfiddle.net/Wp6LT/（我只是删除了Shopify的引用以避免跨域问题） - JFK
我刚刚尝试了不带引号的true，昨天实际上我尝试了你一年前的答案，并且我尝试使用来自jsfiddle的代码进行更新 - 没有任何作用。 - LindaS
我最终通过使用 http://jsfiddle.net/Wp6LT/ 让它工作了。有什么想法可以设置 cookie，以便用户每 120 天只看到一次？ - LindaS
1个回答
2
为了回答你关于cookie部分无法工作的问题， 我修改了你的jsfiddle代码，现在它似乎可以正常工作了。
我所做的就是确保包含了jquery cookie插件。
也许您的jquery.cookie JavaScript文件没有加载？您是否检查过firebug/chrome的检查器以确保所有资源都已加载？ 
<script src="http://cdn.jsdelivr.net/jquery.cookie/1.3/jquery.cookie.js"></script>
您可以像我上面所示的那样从CDN加载它，也可以从Github下载：https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js

JSFiddle

http://jsfiddle.net/DigitalBiscuits/Wp6LT/2/

运行这个fiddle一次，表单就会显示出来；再次运行，会弹出一个警告提示找到了cookie。

顺便说一下...

您应该更新您正在使用的jQuery版本。我们现在使用的是1.8版本，而您的版本还停留在1.4。

这里有一个1.8的CDN：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接