Aggiunta di CSS e JS a <head> utilizzando un modulo layout.xml per blocco


9

Sinossi

Vorrei aggiungere un blocco alla mia vista di prodotto raggruppata e alla mia semplice vista di prodotto. Questo blocco avrà alcune descrizioni utili per gli stati al passaggio del mouse, sto usando una piccola libreria con un plugin jquery e un foglio di stile CSS.

Vorrei includere queste due risorse nel magento solo su queste pagine.

Appunti

  • Sto eseguendo un tema personalizzato;
  • La memorizzazione nella cache è disabilitata ; e
  • I miei file sono all'interno della /jsdirectory;

Finora…

Tuttavia sapevo che un modo era quello di utilizzare il layout.xmlmio modulo, all'inizio questo non funzionava, quindi pensavo che forse avevo bisogno di una configurazione aggiuntiva all'interno di me config.xmlper dire a Magento dei miei requisiti di layout - anche questo non funzionava.

Con non ha funzionato quello che voglio dire è, i miei beni non sono stati caricati.

Di seguito trovi la fonte allegata.


app / code / local / Venditore / categoria / etc / layout.xml

<?xml version="1.0"?>
<layout>
    <default>
        <reference name="head">
            <action method="addJs">
                <script>vendor/qtip/jquery.qtip.min.js</script>
            </action>
            <action method="addCss">
                <stylesheet>vendor/qtip/jquery.qtip.min.css</stylesheet>
            </action>
        </reference>
    </default>
</layout>

app / code / local / Venditore / categoria / etc / config.xml

<?xml version="1.0"?>
<config>

    ...

    <frontend>
        <layout>
            <updates>
                <vendor_rating>
                    <file>layout.xml</file>
                </vendor_rating>
            </updates>
        </layout>
    </frontend>

    ...

</config>

Risposte:


17

Innanzitutto, il file di layout deve essere inserito app/design/frontend/{interface}/{theme}/layout/.
Secondo. Se si desidera aggiungere i file css e js solo nelle pagine dei prodotti raggruppate e semplici, non utilizzare l' <default>handle di layout.
Rendi il tuo layout simile al seguente:

<?xml version="1.0"?>
<layout>
    <my_handle><!-- declare a custom handle so you won't duplicate the code -->
        <reference name="head">
            <action method="addJs">
                <script>vendor/qtip/jquery.qtip.min.js</script>
            </action>
            <action method="addCss">
                <stylesheet>vendor/qtip/jquery.qtip.min.css</stylesheet>
            </action>
        </reference>
    </my_handle>
    <PRODUCT_TYPE_simple><!-- layout handle for simple products -->
        <update handle="my_handle" /> <!-- include the handle you declared above -->
    </PRODUCT_TYPE_simple>
    <PRODUCT_TYPE_grouped><!-- layout handle for grouped products -->
        <update handle="my_handle" /> <!-- include the handle you declared above -->
    </PRODUCT_TYPE_grouped>
</layout>

Grazie mille, questo ha molto senso. Presumo dal momento che il mio config.xmldefinisce il nome del file XML di layout che posso chiamare questo come volevo?
ash

@Takingsides. Sì. Il nome può essere quello che vuoi.
Marius

4

Dato che questo non è stato ancora sottolineato abbastanza chiaramente:

Elenchi

I file XML di layout per un modulo personalizzato devono essere indipendenti dal tema e quindi inseriti

app/design/frontend/base/default/layout

Puoi sovrascrivere uno di questi file XML nel tuo tema personalizzato, ma nella maggior parte dei casi è meglio disporre di un file di layout specifico per temi aggiuntivi che aggiunga modifiche. Maggiori informazioni: qual è il modo / approccio corretti per modificare un modello Magento?

Nomi dei file

Si noti che tali file vengono talvolta definiti "file layout.xml", ma in layout.xmlrealtà non è un nome di file che di solito si trova in qualsiasi codice Magento. Il tuo codice funziona se metti il ​​tuo layout.xmlfile nella giusta posizione (vedi sopra), ma la convenzione è usare il nome del modulo in minuscolo:

rating.xml

o meglio

vendor_rating.xml

Ricorda che i file XML di layout di tutti i moduli si trovano in un'unica directory, quindi il nome deve essere univoco!


1

Il tuo layout.xml dovrebbe andare dentro

app / design / frontend / [IL TUO PACCHETTO PERSONALIZZATO] / [IL TUO TEMA PERSONALIZZATO] / layout /


0

Come indicato sopra per il tuo caso particolare, non dovresti usarlo all'interno dei <default>tag ma, ad esempio, puoi aggiungere file css che risiedono nella tua directory root magento / js in questo modo nel tuo app/design/frontend/vendor/theme/layout/local.xmlesempio:

<?xml version="1.0"?>

<layout version="0.1.0">
    <default>
        <reference name="head">
             <action method="addItem">
                <type>js_css</type>
                <stylesheet>css/styles.css</stylesheet>
                <params>media="all"</params>
            </action>
        </reference>
    </default>
</layout>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.