Skip to main content
 首页 » 编程设计

javascript之将 Jquery 项目移至 Magento 中

2026年10月07日5cmt

我最近在 Lynda.com 上完成了 Chris Converse 的类(class)，该类(class)详细介绍了如何创建 interactive map using 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>

另外添加这行代码:

<action method="addItem"><type>skin_js</type><name>js/interactive_map.js</name></action>
  • 将interactive_map.css中的信息复制到skin/frontend/default/mytheme/css/styles.css。将 map 和点的 css 图像链接更改为 mytheme/images
  • 转到 Skin/frontend/default/mytheme/js 并添加 my_interactivemap.js 文件
  • 将所有图片移至skin/frontend/default/mytheme/images
  • 创建 CMS 页面，然后在内容字段中粘贴 index.html 文件中的代码

  • 在 CMS 页面中，转到设计，然后在更新布局 XML 字段中添加:

      <reference name="head"> 
         <action method="addItem"> 
            <type>skin_js</type><name>js/interactive_map.js</name> 
         </action> 
       </reference>

    • 测试页面为here 。它的某些部分可以工作，例如单击点，它们会改变颜色，但表单不会过滤任何数据，并且不会显示任何图像或描述。它可能是 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 
});

    这是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; 
}

    和 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>

    请您参考如下方法:

    您的测试页上存在 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> )之后，看看它是否有效。


      文章来源：
      https://blog.windname.com/post/aejhed2b1.html
    阅读延展