1

I am creating a theme in Magento 2. So far I've figured out how to create a custom page layout for my homepage and how to style it with css. I'm moving on into adding JavaScript and more custom CSS, but I can't figure out how to do this for a specific page.

Every article and document I've come across mentions adding a script or link to the head using the defaults_head_blocks.xml or default.xml, which is great for something I need globally, but how would I add a script to the head of only one Page Layout?

For clarity and people new to this like me, this is my theme structure:

<theme_dir>/
  - Magento_Theme/
      - layout/
          - default_head_blocks.xml (as far as I can tell no use in my situation)
          - default.xml (nor this)

      - page_layout/
          - homepage.xml (my target page layout)

    layouts.xml (defines my Homepage layout)

Theres more to my theme, but these are the relevant files.

Is there specific naming convention or xml attribute (within default.xml) I can use if I want to configure homepage.xml? How would I configure my homepage.xml page layout?

EDIT My question is about targeting a specific page layout, this is not a question about coding homepages specifically, it's just an example using my current situation. For example, if I make a custom 'About' page, how do I figure out what xml file to override? (keywords 'figure out')

  • Your custom About Page is a CMS page? – Khoa TruongDinh Nov 5 '16 at 0:45
  • Edit: actually I think yes, it is a CMS page, as in I edit the content in the CMS. The page layout "About Page" would then be selected in the admin area. – jamil Nov 7 '16 at 19:18
  • 1
    For the CMS, we can update the XML layout: CONTENT > Pages > choose a cms page > Design or Custom Design Update (2.1.x). – Khoa TruongDinh Nov 9 '16 at 9:32
  • Thanks again for sticking to this @KhoaTruongDinh! Once again you aren't wrong, but I'm still missing how I would do this with a static file. Such a method maybe doesn't exist for page layouts or I'm approaching this wrong. My thinking is I'd rather keep styling dependent on theme files rather than DB entries. – jamil Nov 9 '16 at 17:24
  • Did you ever find a solution for this? – simonthesorcerer Oct 13 '17 at 15:12
1

First of all, we need to read: putting content in a custom homepage and Magento 2 Include js on the product page

So, we can add a custom js on home page only:

app/design/frontend/Vendor/Theme/Magento_Cms/layout/cms_index_index.xml

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="js/mycustom.js"/>
         <!--<script src="Vendor_Module::js/extension.js"/>-->
    </head>
</page>

Or we can call a custom js in phtml:

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
       <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\Template"
               name="custom.js" as="custom.js" template="Vendor_Module::custom/js.phtml"/>
       </referenceContainer>
    </body>
</page>

In your custom js:

require([
        'jquery'
    ], function ($) {
        console.log("Hello Homepage");
    });
  • Thanks for taking the time to answer my question. You were correct about adding Magento_Cms/layout/cms_index_index.xml, however this appears to effect the homepage of my website regardless of the layout. I used homepage as an example, but if I made a new layout for the About page, this answer will not have helped me. Please see my edit. – jamil Nov 4 '16 at 16:31
0

I don't have a solid answer to this question but I understand to some extend that the layout files relate to Controllers and have similar name structures. This question has some hints about how that all works but in some ways only confused me more :(

At this point I do not believe there are specific layout files per each cms page you create, just cms pages in general. My solution has been to use JS to check the current page.

$body = jQuery("body");
if ( $body.hasClass("cms-home") ) { 
    // homepage JS
}

For CSS I've been doing something similar:

body.cms-home {
    /* homepage CSS */
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.