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')

Improve this question
6
  • Your custom About Page is a CMS page?
    – Khoa TruongDinh
    Nov 5, 2016 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, 2016 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, 2016 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, 2016 at 17:24
  • Did you ever find a solution for this?
    – simonthesorcerer
    Oct 13, 2017 at 15:12

2 Answers 2

Reset to default
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");
    });
Improve this answer
1
  • 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, 2016 at 16:31
1

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 */
}
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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