STEP-3 Backend Configurations Settings

In this step we going to create Module backend configurations

​STEP-3​

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.

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

  2. 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