Merge branch 'release/4.0.0'

Block/Instagram.php

@@ -36,11 +36,12 @@ public function __construct(
     public function getConfig()
     {
         return [
-            'token'      => $this->_getInstagramToken(),
-            'userid'     => $this->_getInstagramUserId(),
-            'channel'    => $this->_getInstagramChannel(),
-            'num_photos' => $this->_getInstagramNumberPhotos(),
-            'show_like'  => $this->_getShowLikeNumber()
+            'token'       => $this->_getInstagramToken(),
+            'userid'      => $this->_getInstagramUserId(),
+            'channel'     => $this->_getInstagramChannel(),
+            'num_photos'  => $this->_getInstagramNumberPhotos(),
+            'show_like'   => $this->_getShowLikeNumber(),
+            'frequency'   => $this->_getApiCallFrequency()
         ];
     }
 
@@ -84,6 +85,16 @@ protected function _getInstagramNumberPhotos()
         return (string) $this->configHelper->getConfigParam(InstagramConfig::INSTAGRAM_NUMBER_PHOTOS);
     }
 
+    /**
+     * Number of Instagram photos.
+     *
+     * @return string Cast int config value to string
+     */
+    protected function _getApiCallFrequency()
+    {
+        return (string) $this->configHelper->getConfigParam(InstagramConfig::INSTAGRAM_API_CALL_FREQUENCY);
+    }
+
     /**
      * Display like
      *

Helper/Config.php

@@ -8,12 +8,13 @@
 class Config extends AbstractHelper
 {
 
-    const BASE_CONFIG_XML_PREFIX     = 'instagram/settings/%s';
-    const INSTAGRAM_TOKEN            = 'instagram_token';
-    const INSTAGRAM_USERID           = 'instagram_user_id';
-    const INSTAGRAM_CHANNEL          = 'instagram_channel';
-    const INSTAGRAM_NUMBER_PHOTOS    = 'number_photos';
-    const INSTAGRAM_SHOW_LIKE_NUMBER = 'show_like_number';
+    const BASE_CONFIG_XML_PREFIX       = 'instagram/settings/%s';
+    const INSTAGRAM_TOKEN              = 'instagram_token';
+    const INSTAGRAM_USERID             = 'instagram_user_id';
+    const INSTAGRAM_CHANNEL            = 'instagram_channel';
+    const INSTAGRAM_NUMBER_PHOTOS      = 'number_photos';
+    const INSTAGRAM_SHOW_LIKE_NUMBER   = 'show_like_number';
+    const INSTAGRAM_API_CALL_FREQUENCY = 'frequency';
 
     /**
      * @param Context $context

README.md

@@ -34,6 +34,7 @@ To retrieve the data of your channel follow the official instagram doc: https://
 Changelog
 ----------
 
+* 4.0.0 - API call optimization / Added configuration to do less call
 * 3.0.0 - Update dependency for magento 2.1
 * 2.2.1 - Fix like display configuration bug
 * 2.2.0 - Added like numbers on image hover width admin config

etc/adminhtml/system.xml

@@ -34,6 +34,10 @@
                     <label>Show like number on hover</label>
                     <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                 </field>
+                <field id="frequency" translate="label" type="text" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Instagram API call Frequency</label>
+                    <validate>validate-digits</validate>
+                </field>
             </group>
         </section>
     </system>

view/frontend/web/js/InstagramWidget.js

@@ -1,67 +1,137 @@
 define([
-    "jquery"
+    "jquery",
+    'jquery/ui',
+    'jquery/jquery.cookie'
+
 ], function($){
+
     $.widget('InstagramWidget.js', {
 
         _create: function() {
-            this.getChannel();
-        },
 
-        _request: function (api , success) {
             var config = this.options;
 
-            return $.ajax({
-                url: api,
+            this._setChannel(config.channel);
+            this._getStreamData(config);
+        },
+
+        /**
+         * Render photo stream
+         *
+         * @param data
+         * @private
+         */
+
+        _render: function (data) {
+
+            var html = '';
+            $.each(data.data, function () {
+
+                var img = this.images.low_resolution.url,
+                    url = this.link;
+
+                html += '<li>' +
+                    '<a TARGET="_blank" href="' +  url +'">' +
+                    '<img src=" '+ img +'"/>'+
+                    '</a>'+
+                    '</li>';
+            });
+
+            return html;
+        },
+
+        /**
+         * @param config
+         * @private
+         */
+
+        _getStreamData: function (config) {
+
+            var cookie = $.cookie('instagram_stream');
+            if (cookie == null) {
+                this._apiCall(config);
+            } else {
+                this._setStream(cookie);
+            }
+
+        },
+
+        /**
+         * API call
+         *
+         * @param config
+         * @private
+         */
+
+        _apiCall: function(config) {
+
+            var route = '/media/recent',
+                url   = 'https://api.instagram.com/v1/users/' + config.userid + route,
+                that  = this;
+
+            $.ajax({
+                url: url,
                 dataType: 'jsonp',
                 type: 'GET',
                 data: {
                     access_token: config.token,
                     count: config.num_photos
                 },
-                success: success,
+                success: function(data){
+                    var html = that._render(data);
+                    that._setStream(html);
+                    that._setCookie(html, config.frequency);
+                },
                 error: function(data){
                     console.error('Error: '+ data);
                 }
             });
         },
 
-        getChannel: function() {
 
-            $('#bb-insta-title').append(this.options.channel);
-            this.getChannelStream();
+        /**
+         * Set cookie
+         *
+         * @param data
+         * @param time
+         * @private
+         */
 
-        },
-
-        getChannelStream: function () {
-            var url = 'https://api.instagram.com/v1/users/',
-                request = url + this.options.userid + '/media/recent',
-                stream = $('#bb-insta-stream'),
-                that = this;
-
-            this._request( request, function(data) {
-                for(x in data.data){
-                    var items = [];
-                    photo = data.data[x];
-                    items.push('<li data-like="'+ photo.likes.count +'" class="photo-'+ x +'">',
-                        '<a TARGET="_blank"',
-                        'href="' +  photo.link +'">',
-                        '<img src=" '+ photo.images.low_resolution.url  +'"/>',
-                        '</a>',
-                        '</li>');
-
-                    stream .append(items.join(''));
-                }
-                if ( that.options.show_like == 1 ) {
-                    that.showLikeOnHover( stream );
-                }
+        _setCookie: function (data, time) {
+            $.cookie('instagram_stream', data, {
+                expires: parseFloat(time)
             });
         },
 
-        showLikeOnHover: function ( stream ) {
+        /**
+         * TODO: Restore this function
+         */
+
+        _showLikeOnHover: function ( stream ) {
             $.each(stream.find('li'), function () {
                 $(this).addClass('like-hover')
                     .append('<div class="mask"><span>' + $(this).attr("data-like") + '</span></div>');
             });
+        },
+
+        /**
+         * @param stream
+         * @private
+         */
+
+        _setStream: function (stream) {
+            $('#bb-insta-stream').append(stream);
+
+        },
+
+
+        /**
+         * @param channel
+         * @private
+         */
+
+        _setChannel: function(channel) {
+            $('#bb-insta-title').append(channel);
         }
 
     });