3

私はshopifyサイトで、fancyboxを介してフォームをインストールする作業を行っていますが、Cookieを使用して最初の訪問時にのみ表示します。ページの読み込み時にfancyboxを表示するのに問題がありますが、fancyboxコードを取り出すと、フォームがページにインラインで読み込まれます。これにより、fancyboxの呼び出しで何か問題が発生しているのではないかと疑われます。また、クッキーが正常に機能していないと思います。私は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を変更しましたが、正常に機能しているようです。

私がしたのは、jquerycookieプラグインを含めることだけでした。

おそらく、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/

フィドルを1回実行するとフォームが表示され、もう一度実行すると、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 に答える