Enable/Disable footer link using system configuration in custom module PWA

Question

I have created a custom extension in Magento 2 and their frontend functionality shows in the react js (PWA vania UI).

So I have created a module to enable/disable functionality in the Magento system configuration. and I have added this custom extension page link to the PWA footer.

However, I need this functionality when my module is disabled from the system configuration so that the time footer link does not show in the PWA.

Does anyone have any idea about it so please give me the answer.

Thanks.

Answer 1

Please follow the below steps as per my module.

Now I will add some of my code for the created module graphql.

/var/www/html/myproject/app/code/vendor/module/etc/graphql/di.xml

<?xml version="1.0" ?>
 <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\StoreGraphQl\Model\Resolver\Store\StoreConfigDataProvider">
 <arguments>
 <argument name="extendedConfigData">
 <item name="faq_general_statusfaq" xsi:type="string">faq/general/statusfaq</item>
 <item name="faq_general_statusfaqfooter" xsi:type="string">faq/general/statusfaqfooter</item>
 </argument>
 </arguments>
</type>

/var/www/html/myproject/app/code/vendor/module/etc/schema.graphqls

add below code

type StoreConfig {
faq_general_statusfaq : Int
faq_general_statusfaqfooter : Int
}
Execute URL: http://127.0.0.1/m235/graphql
Where Base URL: http://127.0.0.1/m235/ and End Point: graphql

Request Body :

{
storeConfig {
 faq_general_statusfaq
 faq_general_statusfaqfooter
 }
}

Step 1: Create the component you want. my component name is Faqlink.

So please create your component. my component path is below

/var/www/html/pwamagento/@mage2/faq/src/components/Faqlink/faq.gql.js

add the below code as per your requirement.

import { gql } from '@apollo/client';
export const GET_STORE_CONFIG_DATA = gql`
query GetStoreConfigForFaq {
 # eslint-disable-next-line @graphql-eslint/require-id-when-available
 storeConfig {
 store_code
 faq_general_statusfaq
 faq_general_statusfaqfooter
 }
 }
 `;
 export default {
 getStoreConfigQuery: GET_STORE_CONFIG_DATA
 };

/var/www/html/pwamagento/@mage2/faq/src/components/Faqlink/index.js

export { default } from './faqlink';

/var/www/html/pwamagento/@mage2/faq/src/components/Faqlink/faqlink.js

 import React from 'react';
 import { useQuery } from '@apollo/client';
 import { GET_STORE_CONFIG_DATA } from './faq.gql';
 import { fullPageLoadingIndicator } from "@magento/venia- 
 ui/lib/components/LoadingIndicator";
 import ErrorView from "@magento/venia-ui/lib/components/ErrorView";
 export const FaqLink = () => {
 const { loading: loadingConfig, error: errorConfig, data: dataConfig } 
 = useQuery(GET_STORE_CONFIG_DATA, {
 fetchPolicy: 'cache-and-network',
 nextFetchPolicy: 'cache-first'
 });
if (loadingConfig) return fullPageLoadingIndicator;
if (errorConfig) return <ErrorView message={errorConfig?.message} />;
const storeConfig = dataConfig.storeConfig;
const footerfaqlinkstatus = storeConfig.faq_general_statusfaqfooter;
 
 return footerfaqlinkstatus == '1' ? (
 <li className="footer-linkItem-vqn first_text-colorDefault 
 first_font-semibold"><a data-cy='Footer-link' href='/faq'>Faq</a></li>
 ) : null;
 }; 

After that override footer.js show please check the below link on how to override the footer.

https://developer.adobe.com/commerce/pwa-studio/tutorials/basic-modifications/modify-footer/

after overriding the footer then your footer.js file changes below code.

import { DEFAULT_LINKS, LOREM_IPSUM } from "@magento/venia- 
 ui/lib/components/Footer/sampleData";
to 
import { DEFAULT_LINKS, LOREM_IPSUM } from './sampleData';

Then copy a file from /var/www/html/yourproject/node_modules/@magento/venia-ui/lib/components/Footer/sampleData.js

paste this file to your component. my component file is checked below.

/var/www/html/proect/@mage2/faq/src/components/faq/sampleData.js and this file add the below code.

import { ContactLink } from '@magento/venia- 
 ui/lib/components/ContactPage';
import { FaqLink } from "../Faqlink/faqlink";
const accountLinks = new Map()
.set('Account', null)
.set('Sign In', null)
.set('Register', null)
.set('Order Status', null)
.set('Returns', null);
const aboutLinks = new Map()
.set('About Us', '/about-us')
.set('Our Story', null)
.set('Email Signup', null)
.set('Give Back123', null);
const helpLinks = new Map()
.set('Help', null)
.set('Customer Service', '/customer-service')
.set('Contact Us', {
 path: '/contact-us',
 Component: ContactLink
})
.set('Faq', {
 path: '/faq',
 Component: FaqLink
})
.set('Order Status', null)
.set('Returns', null);
 export const DEFAULT_LINKS = new Map()
 .set('account', accountLinks)
 .set('about', aboutLinks)
 .set('help', helpLinks);
 export const LOREM_IPSUM =
 'Lorem ipsum dolor sit amet, consectetur adipsicing elit, sed do.';

after applying commands.

yarn run watch