Adding inline translation to injected HTML

Question

I'm only 2 weeks old to Magento but I believe I'm getting my head around it well. I have a task to enable language translations on the store front, which works well using inline translation but that only works for elements that Magento has created upon page generation.

This gets tricky for me because once the page is generated, an AJAX call is made which returns HTML and inserts that in to the page. The inline translation doesn't allow me to translate that from the store front, understandably.

My idea at the moment is to hack the inline translator code to allow me to edit injected HTML but I'm struggling to find the code in Magento that creates the red dotted line around elements. Could somebody give me a pointer to where this is please.

Alternatively, I'm open for suggestions for doing this.

We have a custom product importer that some ex-developer has created. This works by reading an XML file that a client supplies us and some voodoo happens and the products appear in the store. One idea we have here is to put the translation data in to that importer.

I should add that the injected HTML is stored in files on the file system.

Ste,

Answer 1

To recognize elements on the page from the translator that weren't on the page when Dom Ready fired you call reinitElements. The core class Mage_Core_Model_Translate_Inline doesn't cast the inline translator to a window object, however, so you'll need to rewrite this class and modify it to do so:

Replace:

<script type="text/javascript">
    new TranslateInline('translate-inline-trig', '<?php echo $ajaxUrl ?>', '<?php
        echo Mage::getDesign()->getArea() ?>');
</script>

With:

<script type="text/javascript">
    window.translateInline = new TranslateInline('translate-inline-trig', '<?php echo $ajaxUrl ?>', '<?php
        echo Mage::getDesign()->getArea() ?>');
    $('body').observe('ajax:complete', window.translateInline.reinitElements);
</script>

Rather than 'hack' the inline translator to recognize elements it already does it but we're telling prototype to listen for finished ajax calls and then call reinit when that has finished.

Warning:

I don't know what the potential frontend performance implications will be for an ajax-heavy frontend site.

Answer 2

Fixed with

$(function(){
        $('.catalog-product-view').observe(
                'ajax:complete', 
                window.translateInline.reinitElements
        );
});