Magento 2 – How to Call CMS Page in Anchor Tag

cms-pagesmagento2

I am new in magento2. I saw many question but i can't understand flow.

can any one help me how to call cms page in anchor tag ?

I tried some code but it is not working.

<a href="<?php echo $this->getUrl('footer'); ?>">CMS PAGE LINK</a>

Thanks in advance 🙂

Best Answer

You can get url by page ID, Try this flow :-

$pageId = 1;
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();

$cms_page_url = $objectManager->create('Magento\Cms\Helper\Page')
->getPageUrl($pageId);

Add this code in phtml :-

<a href="<php echo $cms_page_url; ?>">CMS PAGE LINK</a>

Related Solutions

Magento 2 – Fix jQuery element.click Not Working

I don't know exactly what are you doing Try code example below may help. You should avoid use js in template if possible. Try to call it from single file

<script type="text/javascript">
//<![CDATA[
 require([
    'jquery',
    'Magento_Ui/js/modal/alert'
], function($, alert) {
   $('#id-of-element').on('click', function(event){
        alert({
           content: $(event.target).parent().val()
        })
      })
   }
 );
//]]>
</script>

Magento – Customize Footer in magento2

Short Answer

My solution is remove the footer_links and add a footer block in footer, then add any codes in the block to create a footer I want.

Detail

In /app/design/frontend/vendor/theme/Magento_Theme/layout/default.xml, add codes:

<referenceBlock name="footer_links" remove="true"/>
<referenceContainer name="footer">
    <block class="Magento\Cms\Block\Block" name="footer_block">
        <arguments>
            <argument name="block_id" xsi:type="string">footer_block</argument>
        </arguments>
    </block>
</referenceContainer>

In dashboard - content - blocks, add a new block which identifier is "footer_block", add the footer codes in it. Below is a code example, you could add any html or js in it.

<ul class="footer links">
    <h5>How Can We Help?</h5>
    <li class="nav item">
        <a href="#">Search Terms</a>
    </li>
    <li class="nav item">
        <a href="#" data-action="advanced-search">Advanced Search</a>
    </li>
    <li class="nav item">
        <a href="#">Contact Us</a>
    </li>
    <li class="nav item">
        <a href="#">Orders and Returns</a>
    </li>
</ul>
...
(other ul or image codes)

Save the block.

Edit the css file.

Refresh cache.