feat : instagram 后台

app/code/Joshine/InstagramFeed/Block/Adminhtml/System/Config/Account.php

+<?php
+
+namespace Joshine\InstagramFeed\Block\Adminhtml\System\Config;
+
+use Magento\Backend\Block\Template;
+use Magento\Config\Block\System\Config\Form\Field;
+use Magento\Framework\Data\Form\Element\AbstractElement;
+use Magento\Framework\View\Helper\SecureHtmlRenderer;
+
+use Magento\Backend\Block\Context;
+use Magento\Backend\Model\Auth\Session;
+use Magento\Config\Block\System\Config\Form\Fieldset;
+use Magento\Cron\Model\ResourceModel\Schedule\CollectionFactory;
+use Magento\Framework\App\DeploymentConfig\Reader;
+use Magento\Framework\App\Filesystem\DirectoryList;
+use Magento\Framework\App\ProductMetadataInterface;
+use Magento\Framework\App\ResourceConnection;
+use Magento\Framework\App\State;
+use Magento\Framework\View\Helper\Js;
+
+
+class Account extends Fieldset
+{
+    /**
+     * @var SecureHtmlRenderer
+     */
+    /**
+     * @var CollectionFactory
+     */
+    private $cronFactory;
+
+    /**
+     * @var DirectoryList
+     */
+    private $directoryList;
+
+    /**
+     * @var ResourceConnection
+     */
+    private $resourceConnection;
+
+    /**
+     * @var ProductMetadataInterface
+     */
+    private $productMetadata;
+
+    /**
+     * @var Reader
+     */
+    private $reader;
+
+
+    /**
+     * @var Field|null
+     */
+    protected $fieldRenderer;
+
+    public function __construct(
+        Context $context,
+        Session $authSession,
+        Js $jsHelper,
+        CollectionFactory $cronFactory,
+        DirectoryList $directoryList,
+        Reader $reader,
+        ResourceConnection $resourceConnection,
+        ProductMetadataInterface $productMetadata,
+        AccountField $accountField,
+        array $data = []
+    ) {
+        parent::__construct($context, $authSession, $jsHelper, $data);
+        $this->cronFactory = $cronFactory;
+        $this->directoryList = $directoryList;
+        $this->resourceConnection = $resourceConnection;
+        $this->productMetadata = $productMetadata;
+        $this->reader = $reader;
+    }
+
+    public function render(AbstractElement $element)
+    {
+        $html = $this->_getHeaderHtml($element);
+
+        $html .= $this->getHtml($element);
+
+        $html .= $this->_getFooterHtml($element);
+
+        return $html;
+    }
+
+    /**
+     * @return \Magento\Framework\View\Element\BlockInterface
+     */
+    private function getFieldRenderer()
+    {
+        if (empty($this->fieldRenderer)) {
+            $this->fieldRenderer = $this->_layout->createBlock(
+                Field::class
+            );
+        }
+
+        return $this->fieldRenderer;
+    }
+
+    private function getHtml($element)
+    {
+
+        $block = $this->_layout->createBlock(AccountField::class);
+
+        return $block->toHtml();
+    }
+
+    /**
+     * @param AbstractElement $fieldset
+     * @param string $fieldName
+     * @param string $label
+     * @param string $value
+     *
+     * @return string
+     */
+    protected function getFieldHtml($fieldset, $fieldName, $label = '', $value = '')
+    {
+        $field = $fieldset->addField($fieldName, 'label', [
+            'name'  => 'dummy',
+            'label' => $label,
+            'after_element_html' => $value,
+        ])->setRenderer($this->getFieldRenderer());
+
+        return $field->toHtml();
+    }
+}
\ No newline at end of file

app/code/Joshine/InstagramFeed/Block/Adminhtml/System/Config/AccountField.php

+<?php
+
+namespace Joshine\InstagramFeed\Block\Adminhtml\System\Config;
+
+use Joshine\InstagramFeed\Block\ApiAddress;
+use Magento\Framework\View\Element\Template;
+
+class AccountField extends Template
+{
+    protected $_template = 'Joshine_InstagramFeed::accountField.phtml';
+    /**
+     * @var ApiAddress
+     */
+    private $apiAddress;
+
+    public function __construct(
+        Template\Context $context,
+        ApiAddress $apiAddress,
+        array $data = []
+    ) {
+        $this->apiAddress = $apiAddress;
+        parent::__construct($context, $data);
+    }
+
+    public function getAuthUrl()
+    {
+       return  $this->apiAddress->authUrl();
+    }
+}
\ No newline at end of file

app/code/Joshine/InstagramFeed/Block/Adminhtml/System/Config/Head.php

+<?php
+namespace Joshine\InstagramFeed\Block\Adminhtml\System\Config;
+
+use Magento\Config\Block\System\Config\Form\Field;
+use Magento\Framework\Data\Form\Element\AbstractElement;
+
+class Head extends Field
+{
+
+    public function render(AbstractElement $element)
+    {
+        $html = '';
+        if ($element->getComment()) {
+            $html .= '<div style="margin: auto; width: 40%;padding: 10px;">'
+                . $element->getComment()
+                . '</div>';
+        }
+
+        return $html;
+    }
+
+    protected function _getElementHtml(AbstractElement $element)
+    {
+        return $this->_toHtml();
+    }
+}

app/code/Joshine/InstagramFeed/Block/ApiAddress.php

+<?php
+
+namespace Joshine\InstagramFeed\Block;
+
+use Magento\Backend\Block\Template;
+use Magento\Directory\Helper\Data as DirectoryHelper;
+use Magento\Framework\App\Config\ScopeConfigInterface;
+use Magento\Framework\Json\Helper\Data as JsonHelper;
+use Magento\Store\Model\ScopeInterface;
+
+class ApiAddress extends Template
+{
+    const INSTAGRAM_API_BASE_URL = 'https://api.instagram.com';
+    const INSTAGRAM_AUTH_URL = 'oauth/authorize';
+
+    const REDIRECT_URL = 'admin/joshine_instagram/oauth/redirect';
+
+    protected $_objectManager;
+
+    public function __construct(
+        Template\Context $context,
+        array $data = [],
+        \Magento\Framework\ObjectManagerInterface $objectManager
+    )
+    {
+        $this->_objectManager = $objectManager;
+        parent::__construct($context, $data);
+    }
+
+    public function getAppid()
+    {
+        return $this->_objectManager->get(ScopeConfigInterface::class)
+            ->getValue(
+                'joshine_instagram_feed/general/appid',
+                ScopeInterface::SCOPE_STORE
+            );
+    }
+
+    public function getAppSecret()
+    {
+        return $this->_objectManager->get(ScopeConfigInterface::class)
+            ->getValue(
+                'joshine_instagram_feed/general/app_secret',
+                ScopeInterface::SCOPE_STORE
+            );
+    }
+
+    public function redirectUri() :string
+    {
+        return $this->getBaseUrl().self::REDIRECT_URL;
+    }
+
+    public function authUrl() : string
+    {
+        return self::INSTAGRAM_API_BASE_URL.'/'
+            .self::INSTAGRAM_AUTH_URL.
+            "?client_id={$this->getAppid()}&redirect_uri={$this->redirectUri()}&scope=user_profile,user_media&response_type=code";
+    }
+
+
+
+}
\ No newline at end of file

app/code/Joshine/InstagramFeed/Controller/Adminhtml/Feed/Get.php

+<?php
+
+namespace Joshine\InstagramFeed\Controller\Adminhtml\Feed;
+
+use Magento\Backend\App\Action;
+
+class Get extends Action
+{
+    public function execute()
+    {
+        // TODO: Implement execute() method.
+    }
+}
\ No newline at end of file

app/code/Joshine/InstagramFeed/Controller/Adminhtml/OAuth/Redirect.php

+<?php
+
+namespace Joshine\InstagramFeed\Controller\Adminhtml\OAuth;
+use \Magento\Backend\App\Action;
+class Redirect extends Action
+{
+    protected $_publicActions = ['redirect'];
+    public function execute()
+    {
+        echo "1111";
+        // TODO: Implement execute() method.
+    }
+}
\ No newline at end of file

app/code/Joshine/InstagramFeed/Model/Config/Converter.php

+<?php
+
+namespace Joshine\InstagramFeed\Model\Config;
+
+use DOMNode;
+use LogicException;
+
+class Converter extends \Magento\Widget\Model\Config\Converter
+{
+
+    protected function _convertDepends($source)
+    {
+        $depends = [];
+        foreach ($source->childNodes as $childNode) {
+            if ($childNode->nodeName === '#text') {
+                continue;
+            }
+            if ($childNode->nodeName !== 'parameter') {
+                throw new LogicException(
+                    sprintf("Only 'parameter' node can be child of 'depends' node, %s found", $childNode->nodeName)
+                );
+            }
+            $parameterAttributes = $childNode->attributes;
+            $dependencyName = $parameterAttributes->getNamedItem('name')->nodeValue;
+            $dependencyValue = $parameterAttributes->getNamedItem('value')->nodeValue;
+
+            if (!isset($depends[$dependencyName])) {
+                $depends[$dependencyName] = [
+                    'value' => $dependencyValue,
+                ];
+
+                continue;
+            }
+            if (!isset($depends[$dependencyName]['values'])) {
+                $depends[$dependencyName]['values'] = [$depends[$dependencyName]['value']];
+                unset($depends[$dependencyName]['value']);
+            }
+
+            $depends[$dependencyName]['values'][] = $dependencyValue;
+        }
+
+        return $depends;
+    }
+}

app/code/Joshine/InstagramFeed/Model/Config/Source/Design.php

+<?php
+namespace Joshine\InstagramFeed\Model\Config\Source;
+
+use Magento\Framework\Option\ArrayInterface;
+
+class Design implements ArrayInterface
+{
+    const CONFIG = 0;
+    const CUSTOM = 1;
+
+    public function toOptionArray()
+    {
+        $options = [
+            [
+                'value' => self::CONFIG,
+                'label' => __('Use Config')
+            ],
+            [
+                'value' => self::CUSTOM,
+                'label' => __('Custom')
+            ]
+        ];
+
+        return $options;
+    }
+}

app/code/Joshine/InstagramFeed/Model/Config/Source/Layout.php

+<?php
+namespace Joshine\InstagramFeed\Model\Config\Source;
+
+use Magento\Framework\Option\ArrayInterface;
+class Layout implements ArrayInterface
+{
+    const SINGLE = 'single';
+    const MULTIPLE = 'multiple';
+    const OPTIMIZED = 'optimized';
+
+    /**
+     * to option array
+     *
+     * @return array
+     */
+    public function toOptionArray()
+    {
+        $options = [
+            [
+                'value' => self::SINGLE,
+                'label' => __('Single Row')
+            ],
+            [
+                'value' => self::MULTIPLE,
+                'label' => __('Multiple Rows')
+            ],
+            [
+                'value' => self::OPTIMIZED,
+                'label' => __('Optimized image')
+            ]
+        ];
+
+        return $options;
+    }
+}

app/code/Joshine/InstagramFeed/etc/adminhtml/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">
+    <preference for="Magento\Widget\Model\Config\Converter" type="Joshine\InstagramFeed\Model\Config\Converter"/>
+</config>
\ No newline at end of file

app/code/Joshine/InstagramFeed/etc/adminhtml/routes.xml

+<?xml version="1.0" ?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
+    <router id="admin">
+        <route id="joshine_instagram" frontName="joshine_instagram">
+            <module  name="Joshine_InstagramFeed"/>
+        </route>
+    </router>
+</config>
\ No newline at end of file

app/code/Joshine/InstagramFeed/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>
+        <section id="joshine_instagram_feed" translate="label" type="text" sortOrder="300" showInDefault="1" showInWebsite="1" showInStore="1">
+            <class>separator-top</class>
+            <label>Instagram Feed</label>
+            <tab>joshine</tab>
+            <resource>Joshine_InstagramFeed::configuration</resource>
+            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
+                <label>General</label>
+                <field id="head" translate="label" type="button" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <frontend_model>Joshine\InstagramFeed\Block\Adminhtml\System\Config\Head</frontend_model>
+                </field>
+                <field id="enabled" translate="label comment" type="select" sortOrder="15" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Enable</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+                <field id="appid" translate="label comment" type="text" sortOrder="45" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>AppId</label>
+                    <depends>
+                        <field id="enabled">1</field>
+                    </depends>
+                </field>
+                <field id="app_secret" translate="label comment" type="password" sortOrder="45" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>App Secret</label>
+                    <depends>
+                        <field id="enabled">1</field>
+                    </depends>
+                </field>
+            </group>
+            <group id="display" translate="label comment" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
+                <label>Display</label>
+                <field id="total_number" translate="label comment" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
+                    <label>Total number of photos</label>
+                    <validate>validate-no-empty validate-digits validate-digits-range digits-range-1-25</validate>
+                    <comment>The maximum number is 25.</comment>
+                </field>
+                <field id="layout" translate="label comment" type="select" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
+                    <label>Layout</label>
+                    <source_model>Joshine\InstagramFeed\Model\Config\Source\Layout</source_model>
+                    <comment>Select to arrange instagram images in one single row, two rows or in an organized layout</comment>
+                </field>
+                <field id="number_row" translate="label comment" type="text" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
+                    <label>Number of row</label>
+                    <comment>This value only applies to desktop and images will be automatically responsive depending on the device</comment>
+                    <validate>validate-zero-or-greater validate-digits</validate>
+                    <depends>
+                        <field id="layout">multiple</field>
+                    </depends>
+                </field>
+                <field id="show_caption" translate="label comment" type="select" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
+                    <label>Show Caption</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                    <comment>Select Yes to show caption when hover image.</comment>
+                </field>
+                <field id="show_popup" translate="label comment" type="select" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
+                    <label>Show pop-up</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                    <comment>Select Yes to show pop-up when click on image.</comment>
+                </field>
+            </group>
+
+            <group id="instagram" translate="label comment" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
+                <label>instagram</label>
+                <frontend_model>Joshine\InstagramFeed\Block\Adminhtml\System\Config\Account</frontend_model>
+            </group>
+        </section>
+    </system>
+</config>

app/code/Joshine/InstagramFeed/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>
+        <joshine>
+            <general>
+                <notice_enable>1</notice_enable>
+                <notice_type>announcement,new_update,marketing</notice_type>
+                <menu>0</menu>
+            </general>
+        </joshine>
+    </default>
+</config>
\ No newline at end of file

app/code/Joshine/InstagramFeed/etc/module.xml

+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
+    <module name="Joshine_InstagramFeed" setup_version="0.0.1">
+    </module>
+</config>

app/code/Joshine/InstagramFeed/registration.php

+<?php
+use Magento\Framework\Component\ComponentRegistrar;
+
+ComponentRegistrar::register(
+    ComponentRegistrar::MODULE,
+    'Joshine_InstagramFeed',
+    __DIR__
+);

app/code/Joshine/InstagramFeed/view/adminhtml/templates/accountField.phtml

+<?php
+/** @var \Joshine\InstagramFeed\Block\Adminhtml\System\Config\AccountField $block */
+?>
+
+<button>
+    <a href="<?= $block->getAuthUrl() ?>" target="_blank">
+        switch instagram account
+    </a
+</button>
+
+