0

I want to attach one custom CSS class to a footer block using javascript. How can we do that?

<ul class="footer-links col-lg-5 col-md-5 col-sm-12"> 
<li><a href="/about-us">About Us</a></li> 
<li><a href="/contact">Contact Us</a></li> 
<li><a href="#">Careers</a></li> 
<li><a href="/csmarketplace/account/login/">Sell</a></li> 
<li><a href="/terms-and-conditions">Terms & Conditions</a></li> 
</ul>
  • Do you want to add CSS class to a specific block or whole container? – Sumit Sep 16 '19 at 6:32
  • @Sumit. Specific block i.e my custom footer block – Nafisa Sep 16 '19 at 6:40
  • Please add your block code here you've put in XML file. – Sumit Sep 16 '19 at 6:48
  • <ul class="footer-links col-lg-5 col-md-5 col-sm-12"> <li><a href="/about-us">About Us</a></li> <li><a href="/contact">Contact Us</a></li> <li><a href="#">Careers</a></li> <li><a href="/csmarketplace/account/login/">Sell</a></li> <li><a href="/terms-and-conditions">Terms & Conditions</a></li> </ul> – Nafisa Sep 16 '19 at 7:22
  • Do you want to add CSS class on the ul element? – Sumit Sep 16 '19 at 7:23
1

As per your screenshot, you can add your custom class in the footer block by copying /vendor/magento/module-theme/view/frontend/templates/html/footer.phtml file in your theme with below content.

<div class="footer-container">
    <div class="footer">
        <?= $block->getChildHtml() ?>
        <p class="bugs"><?= /* @escapeNotVerified */ __('Help Us Keep Magento Healthy') ?> - <a
            href="http://www.magentocommerce.com/bug-tracking"
            target="_blank"><strong><?= /* @escapeNotVerified */ __('Report All Bugs') ?></strong></a>
        </p>
        <address><?= /* @escapeNotVerified */ $block->getCopyright() ?></address>
    </div>
</div>

EDIT:

In /magento/module-catalog-search/view/frontend/templates/result.phtml file in your theme add below content.

<?php
    $class = "";
    $searchProductCount = $block->getResultCount();
    if ($searchProductCount == 0) {
        $class = "custom_class";
    }
?>

<script>
    require([
       'jquery',
       'jquery/ui'
    ],function($){
       jQuery('.page-footer div.footer').addClass(<?= $class; ?>);
    });
</script>

Hope it helps!!!

  • My condition is if my serach for a particular product results nothing, i want to add class to the block. I am using /magento/module-catalog-search/view/frontend/templates/ result.phtml file. Is there any way to check in footer.phtml that when my search results with no products? – Nafisa Sep 16 '19 at 7:38
  • 1
    Thank you. I will try this – Nafisa Sep 16 '19 at 7:45
  • Getting this error Magento\CatalogSearch\Block\Result doesn't extends Magento\Framework\App\Helper\AbstractHelper – Nafisa Sep 16 '19 at 7:49
  • Again error prnt.sc/p6npam – Nafisa Sep 16 '19 at 7:58
  • 1
    I tried and your solution worked well. Thank you. Accepting this ans – Nafisa Sep 16 '19 at 11:34

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.