Làm thế nào để thêm Jquery trong Magento?

10

Trong dự án hiện tại của tôi trong trang về chúng tôi, tôi cần thêm các tab để chuyển giữa các phần khác nhau Tôi biết điều này có thể được thực hiện bằng các tab Jquery nhưng tôi không biết làm thế nào khi tích hợp với magento.

magento-1.9 magento-1 jquery

— don7
nguồn

2

Giả sử bạn đã tạo Trang CMS và tên của trang đó là About Ustên này sẽ được đưa vàoif ($headBlock->getModuleName() == 'Mage_Page' && $headBlock->getTitle() =='your_page_name'):

Bây giờ thêm mã này vào app/design/frontend/your_package/your_theme/template/page/html/head.phtml

<?php $headBlock = $this->getLayout()->getBlock('head');
    if ($headBlock->getModuleName() == 'Mage_Page' && $headBlock->getTitle() =='About Us'): 
    ?>
    <link rel="stylesheet"href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript">jQuery.noConflict();</script>
    <script type="text/javascript"> jQuery(function() { jQuery( "#tabs" ).tabs(); });</script>
    <?php endif; ?>

Sau đó mở phần nội dung của Trang CMS của bạn.

<div style="float: right; width: 200px;">&nbsp;
<p>{{block type="tag/popular" template="tag/popular.phtml"}}</p>
</div>
<div id="tabs" style="width: 680px;">
<ul>
<li><a href="#tabs-1">You text here.</a></li>
<li><a href="#tabs-2">You text here.</a></li>
<li><a href="#tabs-3">You text here.</a></li>
</ul>
<div id="tabs-1">
<p>You text here.</p>
</div>
<div id="tabs-2">
<p>You text here.</p>
</div>
<div id="tabs-3">
<p>You text here.</p>
<p>You text here.</p>
</div>
</div>

dán mã này và điều này sẽ tạo ra các tab jquery trong frontend của bạn. Hy vọng điều này sẽ giúp.

đây là một liên kết tham khảo nếu bạn có bất kỳ nghi ngờ.

— dh47
nguồn

cảm ơn bạn đã làm việc này

— don7 27/11/14

3

Thêm tập lệnh và thẻ tùy chỉnh vào tệp head.phtml là trái với thực tiễn tốt nhất của Magento. Các thẻ script mới phải được thêm thông qua bố cục xml và bạn có thể thêm các thẻ điều khiển cập nhật tùy chỉnh vào trang giới thiệu về chúng tôi để nhắm mục tiêu trang đó một cách cụ thể. Các thẻ script cũng nên được chia thành tập tin javacript của chính nó và được nhập thông qua layout xml.

— Tyler Craft

7

Tôi sẽ không đề nghị chỉnh sửa head.phtmlmẫu của bạn cho việc này. Hầu hết các lần bạn không cần một mẫu đầu tùy chỉnh trong chủ đề của riêng bạn bởi vì mẫu cốt lõi đã thực hiện công việc của nó.

Cá nhân tôi cũng không thích viết mã dựa trên các trường hợp ngoại lệ (nếu A thì làm điều này, nếu B thì làm điều này). Nếu bạn cần rất nhiều javascripts khác nhau trên nhiều trang khác nhau, thì trang của bạn head.phtmlsẽ chứa rất nhiều câu lệnh if.

Tôi sẽ đề nghị thêm jQuery thông qua bố cục XML. Với các trang CMS, bạn có khả năng thêm XML bố cục bổ sung trong quản trị viên khi chỉnh sửa trang. Ở đây bạn tìm thấy một ví dụ thiết lập một mẫu khác cho trang về chúng tôi. Theo cùng một cách bạn có thể thêm jQuery vào trang giới thiệu về chúng tôi. Thêm bố cục XML này:

<reference name="head">
    <action method="addItem">
        <type>skin_js</type>
        <script>js/jquery-1.x.x.js</script>
    </action>
    <block type="core/text" name="jquery.noconflict">
        <action method="setText">
            <text><![CDATA[<script type="text/javascript">var $j = jQuery.noConflict();</script>]]>
            </text>
        </action>
    </block>
</reference>

— 7ochem
nguồn

4

Hoặc chỉ cần sao chép đơn giản vào thư mục chủ đề của bạn, thích skin\frontend\[your theme]\default\js\và thêm phần này vào chủ đề của bạn page.xml:

<action method="addItem">
    <type>skin_js</type>
    <script>js/jquery-1.9.1.min.js</script>
</action>

— người dùng956584
nguồn

3

Được rồi, tôi đã tìm ra cách để làm cho nguyên mẫu, jQuery và bootstrap hoạt động mà không can thiệp lẫn nhau và không sử dụng jQuery.noConflict(). Thiết lập bố cục của tôi ( page.xml) đã được theo dõi (tước để dễ đọc hơn):

<block type="page/html_head" name="head" as="head">
    <action method="addJs"><script>prototype/prototype.js</script></action>
    <action method="addJs"><script>lib/ccard.js</script></action>
    <action method="addJs"><script>prototype/validation.js</script></action>
    <action method="addJs"><script>scriptaculous/builder.js</script></action>
    <action method="addJs"><script>scriptaculous/effects.js</script></action>
    <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
    <action method="addJs"><script>scriptaculous/controls.js</script></action>
    <action method="addJs"><script>scriptaculous/slider.js</script></action>
    <action method="addJs"><script>varien/js.js</script></action>
    <action method="addJs"><script>varien/form.js</script></action>
    <action method="addJs"><script>varien/menu.js</script></action>
    <action method="addJs"><script>mage/translate.js</script></action>
    <action method="addJs"><script>mage/cookies.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/jquery.min.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/bootstrap.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/responsive-tabs.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/clickable.js</script></action>
    <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/site.js</script></action>
</block>

Tôi đã nhận được lỗi như sau:

TypeError: Element.attachEvent không phải là một hàm

Element.attachEvent ("trên" + factEventName, responder);

TypeError: Element.dispatchEvent không phải là một hàm

phần tử.dispatchEvent (sự kiện);

Tôi không muốn thay đổi $ở mọi nơi. Vì vậy, tôi đã tạo ba tệp javascript như sau:

proto_to_temp.js có mã sau:

var $tempPrototypeDollar = $;

after_jquery.js có mã sau:

$ = jQuery;

after_all.js có mã sau:

$  = $tempPrototypeDollar;

Như bạn có thể đoán được, tập lệnh đầu tiên gán $biến hiện tại (thuộc sở hữu của nguyên mẫu) cho một biến tạm thời được gọi $tempPrototypeDollar. Kịch bản thứ hai chỉ đơn giản là gán jQuerycho $. Kịch bản thứ ba gán nội dung $tempPrototypeDollartrở lại $.

Tôi đã bao gồm ba tập lệnh này theo thứ tự sau:

<block type="page/html_head" name="head" as="head">
    <action method="addJs"><script>prototype/prototype.js</script></action>
    <action method="addJs"><script>lib/ccard.js</script></action>
    <action method="addJs"><script>prototype/validation.js</script></action>
    <action method="addJs"><script>scriptaculous/builder.js</script></action>
    <action method="addJs"><script>scriptaculous/effects.js</script></action>
    <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
    <action method="addJs"><script>scriptaculous/controls.js</script></action>
    <action method="addJs"><script>scriptaculous/slider.js</script></action>
    <action method="addJs"><script>varien/js.js</script></action>
    <action method="addJs"><script>varien/form.js</script></action>
    <action method="addJs"><script>varien/menu.js</script></action>
    <action method="addJs"><script>mage/translate.js</script></action>
    <action method="addJs"><script>mage/cookies.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/conflict/proto_to_temp.js</script></action><!-- First Script goes just before jQuery include-->
    <action method="addJs"><script>buzzthemes/buzz-intro/jquery.min.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/conflict/after_jquery.js</script></action><!-- Second Script goes just after jQuery include-->
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/bootstrap.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/responsive-tabs.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/clickable.js</script></action>
    <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/site.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/conflict/after_all.js</script></action><!-- Third Script goes after all jQuery related code has been included -->
</block>

Điều này đã giải quyết tất cả các vấn đề cho tôi và bây giờ jquery, bootstrap và nguyên mẫu, tất cả dường như hoạt động tốt.

— Gôgôn
nguồn

2

Bao gồm các mục sau trong đầu trang thiết kế

<script>
var $j = jQuery.noConflict();
</script>

Và sử dụng jQuery $jthay vì$(Eg:$j('.class').hide();)

PS: Bạn có thể sử dụng bất kỳ biến nào khác thay vì jtrong var$j

— Jithin U. Ahmed
nguồn