STEP-3 Backend Configurations Settings

In this step we going to create Module backend configurations

For our implementation, we need several backend configurations

Enabled
Button Type (Rounded, Square)
Button Size
Display on Yes/No
- Homepage
- Category Page
- Product Page
Facebook
- Enable
- Enable Counter
Facebook Messenger
- Enable
- Messenger app ID
Telegram
- Enable
Whatsapp
- Enable
LinkedIn
- Enable
Email
- Enable
- Subject Suffix

Let’s create them.

Create adminhtml folder in <MODULE ROOT>/etc and system folder in it
create system.xml in <MODULE ROOT>/etc/adminhtml

ScandiPWA/SocialShareGraphQl/etc/adminhtml/system.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
   <system>
       <tab id="scandipwa" translate="label" sortOrder="100">
           <label>Scandipwa</label>
       </tab>
       <include path="ScandiPWA_SocialShareGraphQl::system/social_share.xml"/>
   </system>
</config>

3. Create social_share.xml in <MODULE ROOT>/etc/adminhtml/system

ScandiPWA/SocialShareGraphQl/etc/adminhtml/system/social_share.xml

<?xml version="1.0"?>
<include xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_include.xsd">
   <section id="socialshare" translate="label" type="text" sortOrder="1000" showInDefault="1" showInWebsite="0" showInStore="0">
       <label>Social Share</label>
       <tab>scandipwa</tab>
       <resource>ScandiPWA_SocialShareGraphQl::social_share</resource>
<!--        General-->
       <group id="general" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
           <label>General Settings</label>
           <field id="enable" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
               <label>Enable</label>
               <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
           </field>

           <field id="rounded" translate="label" type="select" sortOrder="2" showInDefault="1" showInWebsite="0" showInStore="0">
               <label>Rounded Icons</label>
               <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
           </field>

           <field id="size" translate="label" type="text" sortOrder="3" showInDefault="1" showInWebsite="0" showInStore="0">
               <label>Icon Size</label>
               <comment>in pixel's</comment>
           </field>

           <field id="home_page" translate="label" type="select" sortOrder="4" showInDefault="1" showInWebsite="0" showInStore="0">
               <label>Display On HomePage</label>
               <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
           </field>

           <field id="category_page" translate="label" type="select" sortOrder="5" showInDefault="1" showInWebsite="0" showInStore="0">
               <label>Display On Product Page</label>
               <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
           </field>

           <field id="product_page" translate="label" type="select" sortOrder="6" showInDefault="1" showInWebsite="0" showInStore="0">
               <label>Display On Category Page</label>
               <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
           </field>
       </group>
<!--        FaceBook-->
       <group id="facebook" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
           <label>Facebook</label>
           <field id="enable" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
               <label>Enable Facebook</label>
               <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
           </field>

           <field id="enable_counter" translate="label" type="select" sortOrder="2" showInDefault="1" showInWebsite="0" showInStore="0">
               <label>Enable Facebook Counter</label>
               <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
           </field>
       </group>
<!--        Facebook Messenger-->
       <group id="facebook_messenger" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
           <label>Facebook Messenger</label>
           <field id="enable" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
               <label>Enable Facebook Messenger</label>
               <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
           </field>

           <field id="app_id" translate="text" type="text" sortOrder="2" showInDefault="1" showInWebsite="0" showInStore="0">
               <label>Facebook Messenger App ID</label>
           </field>
       </group>
<!--        Telegram-->
       <group id="telegram" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
           <label>Telegram</label>
           <field id="enable" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
               <label>Enable Telegram</label>
               <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
           </field>
       </group>
<!--        WhatsApp-->
       <group id="whatsapp" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
           <label>WhatsApp</label>
           <field id="enable" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
               <label>Enable WhatsApp</label>
               <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
           </field>
       </group>
<!--        LinkedIn-->
       <group id="linkedin" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
           <label>LinkedIn</label>
           <field id="enable" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
               <label>Enable LinkedIn</label>
               <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
           </field>
       </group>
<!--        Email-->
       <group id="email" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
           <label>Email</label>
           <field id="enable" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
               <label>Enable Email</label>
               <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
           </field>
           <field id="suffix" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
               <label>Email Subject Suffix</label>
           </field>
       </group>
   </section>
</include>

4. Create config.xml in <MODULE ROOT>/etc/

ScandiPWA/SocialShareGraphQl/etc/config.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
   <default>
       <socialshare>
           <general>
               <enable>0</enable>
               <rounded>1</rounded>
               <size>35</size>
               <home_page>0</home_page>
               <category_page>0</category_page>
               <product_page>1</product_page>
           </general>
           <facebook>
               <enable>0</enable>
               <enable_counter>0</enable_counter>
           </facebook>
           <facebook_messenger>
               <enable>0</enable>
           </facebook_messenger>
           <telegram>
               <enable>0</enable>
           </telegram>
           <whatsapp>
               <enable>0</enable>
           </whatsapp>
           <linkedin>
               <enable>0</enable>
           </linkedin>
           <email>
               <enable>0</enable>
               <suffix>ScandiPWA</suffix>
           </email>
       </socialshare>
   </default>
</config>

5. run cache:flush

6. Navigate to Magento backend dashboard STORE -> Settings -> Configuration, expand SCANDIPWA you should see Social Share Option

PreviousSTEP-1 and 2 Creating Magento 2 Module NextSTEP-4 Simple GraphQl and Resolver

Last updated 2 years ago