3

我一直在 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 &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>
4

1 回答 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/

运行一次小提琴并显示表单，再次运行它，警报将指示已找到 cookie。

顺便一提...

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

这是 1.8 的 CDN：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
于 2012-12-14T22:11:16.757 回答