current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top
up vote 4 down vote favorite

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.

share|improve this question
    
@ManthanDave I have updated my question. Please check it. – Gaurav Agrawal Dec 24 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 at 7:21
up vote 4 down vote

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

share|improve this answer
    
I have done all this steps before. It doesn't include CSS in other pages. – Gaurav Agrawal Dec 24 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 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 at 11:01
up vote 0 down vote

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.

share|improve this answer
    
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 at 7:28

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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