Magento Forums
Help
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

How to add css and js for specified page layout

‎11-08-2022 08:49 AM
‎11-08-2022 08:49 AM

How to add css and js for specified page layout

Hi,

I have created a custom cms page layout and I need to add css and js only for this layout.

I tried below tutorial but I am getting fatal error when I click 'Insert widget' from admin->cms page editor->insert widget.

Screenshot_1.jpg

tutorial link : https://magento.stackexchange.com/questions/328115/magento-2-add-css-js-to-custom-layout-only-appli...

0 Kudos
4 REPLIES 4
‎11-09-2022 10:38 PM
‎11-09-2022 10:38 PM

Re: How to add css and js for specified page layout

@sainulabidnv 

You can add your CSS and JS file name here in the head.

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="VendoreName_CustomLayout::css/file.css" />
        <script src="VendoreName_CustomLayout::js/file.js" />
    </head>
</page>
Problem solved? Click Kudos and "Accept as Solution".
200+ Magento 2 Extensions for Enhanced Shopping Experience.
0 Kudos
‎11-10-2022 12:47 AM
‎11-10-2022 12:47 AM

Re: How to add css and js for specified page layout

@Sanjay JethvaI need to add the css and js only in custom CMS Page layout not globally. I think the above xml will add the css and js in globally which means all pages.

0 Kudos
‎12-18-2022 06:01 AM
‎12-18-2022 06:01 AM

Re: How to add css and js for specified page layout

In order to add CSS and JavaScript to a specified page layout, you can use the <style> and <script> tags in the HTML code of the page.

For example, a header could be styled using the following code:

<style>
h1 { font-size: 2em; font-weight: bold; }
</style>

You could also add a JavaScript file to the page by linking it in the <head> section like this:

<script src="scripts.js"></script>

You can also embed JavaScript directly in the HTML by using the <script> tag, like this:

<script>
alert("Hello, world!");
</script>

0 Kudos
‎12-18-2022 11:47 AM
‎12-18-2022 11:47 AM

Re: How to add css and js for specified page layout

@rmy9103gma48e5 wrote:

In order to add CSS and JavaScript to a specified page layout, you can use the <style> and <script> tags in the HTML code of the page.

For example, a header could be styled using the following code:

<style>
h1 { font-size: 2em; font-weight: bold; }
</style>

You could also add a JavaScript file to the Hidden Asset Investigations by linking it in the <head> section like this:

<script src="scripts.js"></script>

You can also embed JavaScript directly in the HTML by using the <script> tag, like this:

<script>
alert("Hello, world!");
</script>

I apply this on my website but result into break my website header. Can you please help me to resolve the issue.

0 Kudos