Magento : 탭 클릭 이벤트

Question

누군가가 백엔드에서 자바 스크립트가있는 마젠타 탭의 클릭을 수신하는 방법을 알고 있습니다. 누군가가 편집 고객 페이지의 탭을 클릭 할 때마다 뭔가를하고 싶다고 말합니다. adminhtml/tabs.js의 내용은 다음과 같습니다.

tabMouseClick : function(event) { 
    var tab = Event.findElement(event, 'a'); 

    // go directly to specified url or switch tab 
    if ((tab.href.indexOf('#') != tab.href.length-1) 
     && !(Element.hasClassName(tab, 'ajax')) 
    ) { 
     location.href = tab.href; 
    } 
    else { 
     this.showTabContent(tab); 
    } 
    Event.stop(event); 
}, 

아무 쓸모가 없습니까? 또한 표준 프로토 타입 js 옵저버를 사용하여 시도했습니다.

Event.observe("product_info_tabs", "click", function() 
{ alert(1); 
}); 

아무 것도하지 않았습니다. 해결책은 업그레이드와 어쩌면 장래의 마젠타 버전에 많은 문제를 추가 할 것이기 때문에 코어를 수정해서는 안됩니다.

Answer 1

백엔드의 자홍색 탭 (varienTabs)에서 클릭을 수신하려면 기존 사용자 정의 관찰자 만 추가하면됩니다. 이 될 것입니다 귀하의 예제 (백엔드에서 "편집 고객 페이지") 사용 :

var myTabs = $$("#customer_info_tabs li a.tab-item-link"); 
for (var i = 0; i < myTabs.length; i++) { 
    Event.observe(myTabs[i], "click", function (event) { 
     var tab = Event.findElement(event, "a"); 
     // insert your custom code here 
     alert(tab.id); 
     Event.stop(event); 
    }); 
} 

핵심 파일 (속보 업그레이드 가능성)을 변경하지 않고 사용자 정의 관찰자를 구현하려면, 적절한 관리 컨트롤러 액션을 재정의 할 수 있습니다.

예를 들어, Mage_Adminhtml_CustomerController::editAction() 오버라이드 (override) :

<!-- app/code/local/My/Adminhtml/etc/config.xml --> 
<config> 
    <modules> 
     <My_Adminhtml> 
      <version>0.1.0</version> 
     </My_Adminhtml> 
    </modules> 
    <admin> 
     <routers> 
      <adminhtml> 
       <args> 
        <modules> 
         <My_Adminhtml before="Mage_Adminhtml">My_Adminhtml</My_Adminhtml> 
        </modules> 
       </args> 
      </adminhtml> 
     </routers> 
    </admin> 
</config> 

다음, 사용자 정의 관리 컨트롤러 정의 :

// app/code/local/My/Adminhtml/controllers/CustomerController.php 
require 'Mage/Adminhtml/controllers/CustomerController.php'; 
class My_Adminhtml_CustomerController extends Mage_Adminhtml_CustomerController 
{ 
    public editAction() 
    { 
     // copy of Mage_Adminhtml_CustomerController::editAction() code here 
    } 
} 

마지막으로, 오버라이드 (override) 행동에, 사용자 정의 관찰자 스크립트를 포함하는 추가 텍스트 블록을 생성하고 그 블록을 레이아웃에 추가하십시오. editAction의 말에 예를 들어 같은 것을 삽입 :

: 
    $this->loadLayout(); 
    $oBlock = $this->getLayout()->createBlock('core/text')->setText(' 
     <script type="text/javascript"> 
      var myTabs = $$("#customer_info_tabs li a.tab-item-link"); 
      for (var i = 0; i < myTabs.length; i++) { 
       Event.observe(myTabs[i], "click", function (event) { 
        var tab = Event.findElement(event, "a"); 
        alert(tab.id); 
        Event.stop(event); 
       }); 
      } 
     </script> 
    '); 
    $this->getLayout()->getBlock('left')->append($oBlock); 
    $this->renderLayout(); 
    : 

Answer 2

올드 대답을하지만, 내가 여기 이후 : TEH 탭이 표시 될 때 젠토 내부는 이벤트를 발생. 그 이벤트에 연결하기 만하면됩니다.

varienGlobalEvents.attachEventHandler('showTab', function(arg){ 
      console.log(arg.tab); 
     });  

또한 컨트롤러를 통해 삽입 할 필요가 없습니다. yoru 자신의 사용자 정의 레이아웃 지시문을 추가하고 이에 따라 js를로드하십시오.