那些遇到过的问题

将Jquery项目移入Magento

ahi*_*enb 5 javascript jquery magento

最近，我在Chris Converse的Lynda.com上完成了一个课程，逐步介绍了如何使用Jquery创建交互式地图。完成后，我将剩下以下文件：

  • index.html
  • Interactive_map.css
  • Interactive_map.js
  • jquery-1.5.min

和图像

现在，我想接受这个项目并将其放入我的magento网站的CMS页面中。经过一些研究后，我收集了以下内容：

  1. 转到/ js并添加一个名为jquery的新文件夹，并将jquery-1.5.min放置在其中
  2. 打开此文件，并将以下代码行添加到末尾：var $j=jQuery.noConflict();
  3. 转到interactive_map.js，将所有$替换为$ j
  4. 转到我的app / design / frontend / default / mytheme / layout / page.xml下的page.xml文件

  5. 添加以下代码行：

     <action method="addJs"><script>jquery/jquery-1.5.noConflict.min.js</script></action>
    Run Code Online (Sandbox Code Playgroud)

另外添加以下代码行：

<action method="addItem"><type>skin_js</type><name>js/interactive_map.js</name></action>
Run Code Online (Sandbox Code Playgroud)
  1. 将Interactive_map.css中的信息复制到skin / frontend / default / mytheme / css / styles.css。将地图和点的CSS图像链接更改为mytheme / images
  2. 转到skin / frontend / default / mytheme / js并添加my_interactivemap.js文件
  3. 将所有图像移动到皮肤/前端/默认/ mytheme /图像
  4. 创建一个CMS页面，然后在content字段中粘贴index.html文件中的代码

  5. 在CMS页面中，进行设计，然后在Update Layout XML字段中添加：

      <reference name="head">
         <action method="addItem">
            <type>skin_js</type><name>js/interactive_map.js</name>
         </action>
       </reference>
    Run Code Online (Sandbox Code Playgroud)

测试页在这里。它的某些部分起作用，例如单击点，它们会更改颜色，但是表单不会过滤任何数据，并且不会显示任何图像或描述。可能是html内容，但我不确定。我现在几乎陷入困境，很乐意为安装该项目提供一些帮助。

如果可以的话请帮助，我真的很沮丧。

这是javascript：

// JavaScript Document

$j(document).ready(function() {
// begin Ready

    //...................................................
    // When the form changes
    $j('#mapForm').change(function() {

        var selectedContinent = $j('#mapForm option:selected').val();
        if (selectedContinent == 'ALL'){
            $j('a.dot').slideDown(1000);
        }else{
            $j('a.dot[continent = "'+selectedContinent+'"]').slideDown(1000);
            $j('a.dot[continent != "'+selectedContinent+'"]').slideUp(1000);
        }

    });

    //...................................................
    // When a dot is clicked
    $j('a.dot').click(function(){

        $j('a.dot').removeClass('selected');
        $j(this).addClass('selected');

        var city = '.city_detail#' + $j(this).attr('city');
        var htmlCode = $j(city).html();

        $j('.detail_container').fadeOut(500, function(){
            $j('.detail_container .city_detail').html(htmlCode);
            $j('.detail_container').fadeIn(500);
        });

    });

// end Ready
});
Run Code Online (Sandbox Code Playgroud)

这是CSS

/*Interactive map*/
.map_container {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000;
    background-image: url("../images/template/map.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
    float: right;
    height: 325px;
    width: 760px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 20px;
    position: relative;
}
.map_container a.dot {
    display: block;
    height: 20px;
    width: 20px;
    background-image: url("../images/template/dots.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
    cursor: pointer;
    position: absolute;
}
.map_container .form_continent {
    position: absolute;
    left: 30px;
    top: 265px;
}
.map_container .detail_container {
    position: absolute;
    height: 260px;
    width: 240px;
    left: 480px;
    top: 35px;
}
.map_container .city_detail {
    width: 230px;
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 12px;
    border-top-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-left-style: solid;
    border-top-color: #A9B5C8;
    border-left-color: #A9B5C8;
    position: absolute;
    top: 0px;
    color: #FFF;
    border-radius: 10px;
    -moz-border-radius: 10px
    -webkit-border-radius: 10px;
}
.map_container .clear_both {
    clear: both;
}
.map_container .city_photo {
    float: left;
    margin-top: 0px;
    margin-right: 15px;
    margin-bottom: 0px;
    margin-left: 0px;
    border: 1px solid #FFF;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    box-shadow: 0px 5px 3px #424274;
    -moz-box-shadow: 0px 5px 3px #424274;
    -webkit-box-shadow: 0px 5px 3px #424274;
}
.map_container .city_info {
    float: left;
    width: 130px;
    color: #FFF;
}
.map_container .city_info h2 {
    font-size: 18px;
    margin: 0px;
}
.map_container .city_info h3 {
    font-size: 12px;
    text-transform: uppercase;
    color: #2C3748;
    letter-spacing: 4px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 12px;
    margin-left: 0px;
}
.map_container .city_info p {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 12px;
    margin-left: 0px;
}
.city_detail_container {
    display: none;
}

.map_container a.dot:hover {
    background-position: 0px -20px;
}
.map_container a.dot.selected {
    background-position: 0px -40px;
}
Run Code Online (Sandbox Code Playgroud)

和HTML

    <div class="map_container"><a class="dot" style="left: 178px; top: 165px;"></a> <a class="dot" style="left: 240px; top: 73px;"></a> <a class="dot" style="left: 427px; top: 180px;"></a> <a class="dot" style="left: 412px; top: 94px;"></a> <a class="dot" style="left: 274px; top: 167px;"></a> <a class="dot" style="top: 99px; left: 113px;"></a> <a class="dot" style="top: 83px; left: 87px;"></a> <a class="dot" style="top: 173px; left: 387px;"></a> <a class="dot" style="top: 102px; left: 271px;"></a> <a class="dot" style="top: 134px; left: 153px;"></a> <a class="dot" style="top: 93px; left: 141px;"></a> <a class="dot" style="top: 115px; left: 375px;"></a> <a class="dot" style="top: 89px; left: 386px;"></a> <a class="dot" style="top: 195px; left: 153px;"></a> <a class="dot" style="top: 96px; left: 320px;"></a> <a class="dot" style="top: 113px; left: 343px;"></a> <a class="dot" style="top: 110px; left: 299px;"></a> <a class="dot" style="top: 84px; left: 257px;"></a> <a class="dot" style="top: 76px; left: 273px;"></a> <form id="mapForm" class="form_continent" method="post"> <select id="continent" name="continent"> <option value="AF">Africa</option> <option value="AS">ASia</option> <option value="AU">Australia</option> <option value="EU">Europe</option> <option value="NA">North America</option> <option value="ME">Middle East</option> <option value="SA">South America</option> <option value="ALL">Show all continents</option> </select> </form> <!--City details     --->
<div class="detail_container">
<div class="city_detail">
<div class="city_info" style="width: 200px;">
<h3>Choose a city...</h3>
<p>Description goes here...</p>
</div>
</div>
</div>
</div>
<div class="city_detail_container"><!-- City -->
<div id="sydney" class="city_detail"><img class="city_photo" src=".../images/cities/sydney.jpg" alt="sydney" width="75" height="75" />
<div class="city_info">
<h2>Sydney</h2>
<h3>Australia</h3>
<p>Pellentesque nibh felis, fddfdflitora torquent per conubia nostra, per inceptos hymenaeos commodo in interdum vitae leo.</p>
</div>
</div>
<!-- City -->
<div id="london" class="city_detail"><img class="city_photo" src="images/cities/london.jpg" alt="sydney" width="75" height="75" />
<div class="city_info">
<h2>London</h2>
<h3>Europe</h3>
<p>Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam. Praesent lacinia, eros quis aliquam porttitor, urna lacus volutpat urna, ut fermentum neque mi egestas dolor.</p>
</div>
</div>
<!-- City -->
<div id="riodejaneiro" class="city_detail"><img class="city_photo" src="images/cities/riodejaneiro.jpg" alt="rio de janerio" width="75" height="75" />
<div class="city_info">
<h2>Rio de Janerio</h2>
<h3>South America</h3>
<p>Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum.</p>
</div>
</div>
<!-- City -->
<div id="tokyo" class="city_detail"><img class="city_photo" src="images/cities/tokyo.jpg" alt="brazil" width="75" height="75" />
<div class="city_info">
<h2>Tokyo</h2>
<h3>Asia</h3>
<p>Donec porttitor ligula eu dolor. Maecenas vitae nulla nam consectetuer. Lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum.</p>
</div>
</div>
<!-- City -->
<div id="johannesburg" class="city_detail"><img class="city_photo" src="images/cities/johannesburg.jpg" alt="johannesburg" width="75" height="75" />
<div class="city_info">
<h2>Johannesburg</h2>
<h3>Africa</h3>
<p>Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper.</p>
</div>
</div>
<!-- City -->
<div id="johannesburg" class="city_detail"><img class="city_photo" src="images/cities/johannesburg.jpg" alt="johannesburg" width="75" height="75" />
<div class="city_info">
<h2>Johannesburg</h2>
<h3>Africa</h3>
<p>Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper.</p>
</div>
</div>
<!-- City -->
<div id="dallas" class="city_detail"><img class="city_photo" src="images/cities/dallas.jpg" alt="dallas" width="75" height="75" />
<div class="city_info">
<h2>Dallas</h2>
<h3>North America</h3>
<p>Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper.</p>
</div>
</div>
<!-- City -->
<div id="seattle" class="city_detail"><img class="city_photo" src="images/cities/seattle.jpg" alt="seattle" width="75" height="75" />
<div class="city_info">
<h2>Seattle</h2>
<h3>North America</h3>
<p>Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper.</p>
</div>
</div>
<!-- City -->
<div id="perth" class="city_detail"><img class="city_photo" src="images/cities/perth.jpg" alt="perth" width="75" height="75" />
<div class="city_info">
<h2>Perth</h2>
<h3>Australia</h3>
<p>Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper.</p>
</div>
</div>
<!-- City -->
<div id="tripoli" class="city_detail"><img class="city_photo" src="images/cities/tripoli.jpg" alt="tripoli" width="75" height="75" />
<div class="city_info">
<h2>Tripoli</h2>
<h3>Africa</h3>
<p>Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper.</p>
</div>
</div>
<!-- City -->
<div id="bogota" class="city_detail"><img class="city_photo" src="images/cities/bogota.jpg" alt="bogota" width="75" height="75" />
<div class="city_info">
<h2>Bogot&aacute;</h2>
<h3>South America</h3>
<p>Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper.</p>
</div>
</div>
<!-- City -->
<div id="newyorkcity" class="city_detail"><img class="city_photo" src="images/cities/newyorkcity.jpg" alt="newyorkcity" width="75" height="75" />
<div class="city_info">
<h2>New York City</h2>
<h3>North America</h3>
<p>Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper.</p>
</div>
</div>
<!-- City -->
<div id="phnompenh" class="city_detail"><img class="city_photo" src="images/cities/phnompenh.jpg" alt="phnompenh" width="75" height="75" />
<div class="city_info">
<h2>Phnom Penh</h2>
<h3>Asia</h3>
<p>Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper pharetra posuere.</p>
</div>
</div>
<!-- City -->
<div id="tianjin" class="city_detail"><img class="city_photo" src="images/cities/tianjin.jpg" alt="tianjin" width="75" height="75" />
<div class="city_info">
<h2>Tianjin</h2>
<h3>Asia</h3>
<p>Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper.</p>
</div>
</div>
<!-- City -->
<div id="puntaarenas" class="city_detail"><img class="city_photo" src="images/cities/puntaarenas.jpg" alt="puntaarenas" width="75" height="75" />
<div class="city_info">
<h2>Punta Arenas</h2>
<h3>South America</h3>
<p>Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper.</p>
</div>
</div>
<!-- City -->
<div id="buxoro" class="city_detail"><img class="city_photo" src="images/cities/buxoro.jpg" alt="buxoro" width="75" height="75" />
<div class="city_info">
<h2>Buxoro</h2>
<h3>Middle East</h3>
<p>Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper.</p>
</div>
</div>
<!-- City -->
<div id="anakapalle" class="city_detail"><img class="city_photo" src="images/cities/anakapalle.jpg" alt="anakapalle" width="75" height="75" />
<div class="city_info">
<h2>Anakapalle</h2>
<h3>Middle East</h3>
<p>Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper.</p>
</div>
</div>
<!-- City -->
<div id="albahr" class="city_detail"><img class="city_photo" src="images/cities/albahr.jpg" alt="albahr" width="75" height="75" />
<div class="city_info">
<h2>Al Bahr</h2>
<h3>Middle East</h3>
<p>Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper.</p>
</div>
</div>
<!-- City -->
<div id="rome" class="city_detail"><img class="city_photo" src="images/cities/rome.jpg" alt="rome" width="75" height="75" />
<div class="city_info">
<h2>Rome</h2>
<h3>Europe</h3>
<p>Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper.</p>
</div>
</div>
<!-- City -->
<div id="warszawa" class="city_detail"><img class="city_photo" src="images/cities/warszawa.jpg" alt="warszawa" width="75" height="75" />
<div class="city_info">
<h2>Warszawa</h2>
<h3>Europe</h3>
<p>Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper.</p>
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)

Nic*_*ink 0

您的测试页上存在 JavaScript 错误。

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">位于另一个<script>标签内。

尝试移至<script type="text/javascript" src="https://apis.google.com/js/plusone.js">结束标记 ( </script>) 之后，看看是否有效。

归档时间：

查看次数：

137 次

最近记录：

13 年，4 月 前
相关归档
为什么调用react setState方法不会立即改变状态？ 286
表单提交后如何进行Jquery回调？ 115
JQuery ajax调用默认超时值 65
如何判断div是否滚动到底部？ 62
JS库(具有拖放功能)与iOS和常规浏览器兼容 57
一元加减运算符的重要用途是什么？ 54
解构深层属性 44
Bootstrap模态隐藏不起作用 23
Magento的自定义活动 19
如何向magento中的多个用户发送电子邮件 4
难疑归档
如果我有jQuery背景,"在AngularJS中思考"？ 4518
如何删除子模块？ 3366
将现有的,未提交的工作移动到Git中的新分支 2982
如何从列表列表中制作一个平面列表？ 2950
如何制作一系列功能装饰器？ 2647
如何使div不大于其内容？ 1960
接口和抽象类之间有什么区别？ 1705
在Node.js中编写文件 1538
如何在Vim中移动到行尾？ 1140
使用PHP"注意:未定义的变量","注意:未定义的索引"和"通知:未定义的偏移量" 1119