javascript - Comment puis-je ajouter un fichier CSS à un WIDGET PERSONNALISÉ dans Magento ?

Donc, j'ai un widget personnalisé pour Magento (comme un diaporama pour les produits).

Et je veux ajouter du CSS/Javascript personnalisé à mon widget.

Je ne veux pas afficher (charger) le fichier CSS/JS à chaque fois.

Je veux charger JS/CSS UNIQUEMENT lorsque la PAGE inclut le Widget personnalisé.

Merci.

Réponse #1

Cela dépend si vous avez ajouté votre widget en tant qu'instance de widget (CMS -> Widgets) ou si vous l'avez inclus dans la zone de contenu d'une page, d'un bloc statique ou d'un courriel comme ceci : {{widget type="blabla/carousel"}}.

Si vous l'avez inclus en tant qu'instance de widget, vous pouvez ajouter vos ressources comme ceci :

protected function _prepareLayout() {
    if ($head = $this->getLayout()->getBlock('head')) { 
        $head->addCss('myfile.css');
    }
    return parent::_prepareLayout();
}

..dans votre bloc qui implémente Mage_Widget_Block_Interface.

(voir http://www.magentocommerce.com/boards/viewthread/212110/)

Autant que je sache, il est impossible d'ajouter des ressources lorsque vous incluez le widget en ligne en tant que directive de modèle. Cela s'explique simplement par le fait que la balise head du HTML a déjà généré son HTML : les directives de modèle (comme {{widget}} ou {{var}}) sont détectées lors de l'étape _toHtml du bloc. Appeler n'importe quelle méthode sur un bloc qui a déjà été rendu n'aura aucun effet.

Voir aussi l'appel $processor->filter dans la méthode _toHtml dans Mage_Cms_Block_Page

protected function _toHtml()
{
    /* @var $helper Mage_Cms_Helper_Data */
    $helper = Mage::helper('cms');
    $processor = $helper->getPageTemplateProcessor();
    $html = $processor->filter($this->getPage()->getContent());
    $html = $this->getMessagesBlock()->toHtml() . $html;
    return $html;
}

Réponse #2

Je sais que cette question est assez ancienne, mais au cas où quelqu’un chercherait un moyen d’ajouter du CSS ou du JavaScript uniquement lorsque le module Magento est inclus (sans nécessiter qu’il s’agisse d’une « instance de module » comme dans la réponse donnée par Erfan), je recommanderais d’utiliser un petit script Ajax dans votre fichier de modèle phtml. Si votre package de design n’utilise pas jQuery, votre code pourrait être différent.

jQuery(document).ready(function(){
jQuery.when(
    jQuery.ajax({
        type: "GET",
        url: "<?php echo $this->getSkinUrl('css/myWidget.css');?>",
        success: function(data){
            jQuery("head").append("<style>" + data + "</style>");
        },
        dataType: "html",
        cache: false,
    }),
    jQuery.ajax({
        type: "GET",
        url: "<?php echo $this->getSkinUrl('js/myWidget.js');?>",
        dataType: "script",
        cache: false,
    })

).then(function(){
        myWidget.setupFunction();
    });   
});