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.

  • @ManthanDave I have updated my question. Please check it. – Gaurav Agrawal Dec 24 '16 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 '16 at 7:21
  • Please check the correct answer posted below by me – Gaurav Agrawal Dec 29 '16 at 10:59
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

  • I have done all this steps before. It doesn't include CSS in other pages. – Gaurav Agrawal Dec 24 '16 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 '16 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 '16 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.

  • 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 '16 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.

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.