6

I have prepared one module in which I have prepared two .phtml files and included css and js through module layout file. Now, I want to include those .phtml file in different blocks and pages.

I have tried to include .phtml in CMS page with below code:

{{block class="CompanyName\ModuleName\Block\BlockName" template="CompanyName_ModuleName::file.phtml"}}

But it only includes .phtml file not CSS.

Here is my module layout file:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd" layout="1column">
<head>
    <css src="CompanyName_ModuleName::css/abc.css"/>
    <css src="CompanyName_ModuleName::css/instapic-slider.css"/>
</head>
<body>
    <referenceContainer name="content">
        <block class="CompanyName\ModuleName\Block\BlockName" name="ModuleName_bytag" template="picsbytag.phtml" />
        <block class="CompanyName\ModuleName\Block\BlockName" name="ModuleName_byname" template="picsbyname.phtml" />
    </referenceContainer>
</body>
</page>

How I can achieve this to include css with .phtml file.

Any help will be appreciated.

Improve this question
3
  • @ManthanDave I have updated my question. Please check it.
    – Gaurav Agrawal
    Dec 24, 2016 at 7:14
  • Yes, I have run that command. And I using magento 2's way to call js using require-js-config.js
    – Gaurav Agrawal
    Dec 24, 2016 at 7:21
  • Please check the correct answer posted below by me
    – Gaurav Agrawal
    Dec 29, 2016 at 10:59

3 Answers 3

Reset to default
5

Put your js file in your custom module Vendor_Module/view/frontend/web/js/yourjsfile

Create requirejs-config.js file in your custom_module/view/frontend. add below code in it .

var config = {
    "map": {
        "*": {
            "instapic": "Vendor_Module/js/instapic-slider"
        }
    }
};

Now call the js file in your .phtml template file by writing below code :

write this at the end of the .phtml file

<script type="text/javascript">

    require(['jquery', 'instapic'],function($){
        (function() {

        })(jQuery);
    });
</script>

Also your layout file code should be like this :

<?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" layout="1column">
    <head>
        <css src="CompanyName_Modulename/css/abc.css"/>
        <css src="CompanyName_Modulename/css/instapic-slider.css"/>
    </head>
    <body>
        <referenceContainer name="content">
            <block class="CompanyName\ModuleName\Block\BlockName" name="ModuleName_bytag" template="picsbytag.phtml" />
            <block class="CompanyName\ModuleName\Block\BlockName" name="ModuleName_byname" template="picsbyname.phtml" />
        </referenceContainer>
    </body>
    </page>

After that remove your pub/static and var/generation folder and run setup:di:compile and setup:static-content:deploy command

Improve this answer
3
  • I have done all this steps before. It doesn't include CSS in other pages.
    – Gaurav Agrawal
    Dec 24, 2016 at 8:48
  • @GauravAgrawal ok, can you convert your css to less css like instapic-slider.css to instapic-slider.less do you have less file of your css ?
    – Manthan Dave
    Dec 24, 2016 at 10:55
  • I have face same issue while implementing owl carousel slider to magento 2 and lastly i have converted css to less and put it less css in css folder and call all the css in _module.less file and its works fine . i have call slider on homepage as well.
    – Manthan Dave
    Dec 24, 2016 at 11:01
0

In the CMS Page editor, go to the 'Design' tab and enter your XML in the 'Layout Update XML' field, without the page element:

<head>
    <css src="CompanyName_ModuleName::css/abc.css"/>
    <css src="CompanyName_ModuleName::css/instapic-slider.css"/>
    <script src="CompanyName_ModuleName::js/instapic-slider.js"/>
</head>
    <referenceContainer name="content">
        <block class="CompanyName\ModuleName\Block\BlockName" name="ModuleName_bytag" template="picsbytag.phtml" />
        <block class="CompanyName\ModuleName\Block\BlockName" name="ModuleName_byname" template="picsbyname.phtml" />
    </referenceContainer>

Then save the page and clear the cache.

Improve this answer
1
  • I don't think so this will be a good solution. Because I want to include this block in multiple pages even in theme's block and pages. In that time this will not help me to include css & js everytime.
    – Gaurav Agrawal
    Dec 24, 2016 at 7:28
0

Finally, after searching & trying so much I got the correct answer through which you can correctly include your CSS with your block.

Create a separate default.xml file inside your module layout folder if it does not exist. Then add your code to include CSS in default.xml file.

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.