的jsfiddle

Question

我一直在shopify网站上工作，通过fancybox安装表单，而使用cookie仅在第一次访问时显示。我有问题让fancybox出现在页面的加载上，但是如果我拿出fancybox代码，表单会在页面上内联加载。这让我怀疑我在调用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 &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的某个地方，只是不知道在哪里。 $（函数（）{ var myContent ='在这里注册以获取有关新课程，未来日期和更新的更新更多

名字：

姓氏：

电子邮件：

公司：

'; < p>

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

    </script>
    </head>
    <body>
    </body>
    </html>

Answer 1

要回答让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/

运行小提琴一次，表单显示，再次运行它，一个提醒将指示找到了cookie。

顺便说一句......

您应该更新您正在使用的jQuery版本。我们现在在1.8，但是你的回归是1.4

这是1.8的CDN：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

Fancybox弹出窗口和cookie无法正常工作

1 个答案:

的jsfiddle

顺便说一句......