Grid List - Cookie

[burt 5,013]

Grid List is remembered via Cookie.

This means loading in this file; 
https://github.com/gburton/Responsive-osCommerce/blob/master/ext/jquery/cookie.js

It's not a big file, but it can be got rid of as so;

Change these two lines:
https://github.com/gburton/Responsive-osCommerce/blob/master/includes/modules/header_tags/ht_grid_list_view.php#L46-L47

To:

          $grid_list_js = <<<EOD
<script>$(function() { var cc = localStorage['list_grid']; if (cc == 'list') { $('#products .item').removeClass('grid-group-item').addClass('list-group-item'); } else { $('#products .item').removeClass('list-group-item').addClass('grid-group-item'); } $(document).ready(function() { $('#list').click(function(event){ event.preventDefault(); $('#products .item').addClass('list-group-item').removeClass('grid-group-item'); localStorage['list_grid'] = 'list'; }); $('#grid').click(function(event){ event.preventDefault(); $('#products .item').removeClass('list-group-item').addClass('grid-group-item'); localStorage['list_grid'] = 'grid'; });});});</script>
EOD;
          $oscTemplate->addBlock($grid_list_js . PHP_EOL, $this->group);

Save file and upload.

You should see no change at all in functionality.  HOwever your site is now loading faster as it does not have to load the cookie.js file.

Thoughts and Feedback appreciated.  And code changes.  Etc and so on.  Pitch in.

[discxpress 50]

Hmmmm. I do see an improvement in the overall load time of category pages. I notice a boost in loading of product pages, especially in the server response time or time till first byte. Which can be critical during peak times.

For a site as large as mine, it's a huge plus.  

What about areas of the site where cookies are required in order to function? And the EU cookie law?

 

[♥beerbee 32]

Didn't work for me in one of my firefoxes - until I enabled DOM Storage again in about:config, had this one disabled years ago to avoid flash cookies.

Best regards

Christoph

[♥mattjt83 133]

@burt

Because everyone doesn't use localstorage you might want to check if it's enabled first and use the old code as a backup if it's not.

if (window.localStorage) {
    // use localStorage script
}else{
	//fallback to cookies here
}

 

[♥mattjt83 133]

Also found this https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage which could be used as a cookie patch for users who can't/don't use localStorage in their browser.

if (!window.localStorage) {
  Object.defineProperty(window, "localStorage", new (function () {
    var aKeys = [], oStorage = {};
    Object.defineProperty(oStorage, "getItem", {
      value: function (sKey) { return sKey ? this[sKey] : null; },
      writable: false,
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "key", {
      value: function (nKeyId) { return aKeys[nKeyId]; },
      writable: false,
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "setItem", {
      value: function (sKey, sValue) {
        if(!sKey) { return; }
        document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
      },
      writable: false,
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "length", {
      get: function () { return aKeys.length; },
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "removeItem", {
      value: function (sKey) {
        if(!sKey) { return; }
        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
      },
      writable: false,
      configurable: false,
      enumerable: false
    });    
    Object.defineProperty(oStorage, "clear", {
      value: function () {
        if(!aKeys.length) { return; }
        for (var sKey in aKeys) {
          document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
        }
      },
      writable: false,
      configurable: false,
      enumerable: false
    });
    this.get = function () {
      var iThisIndx;
      for (var sKey in oStorage) {
        iThisIndx = aKeys.indexOf(sKey);
        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
        else { aKeys.splice(iThisIndx, 1); }
        delete oStorage[sKey];
      }
      for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
      for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) {
        aCouple = aCouples[nIdx].split(/\s*=\s*/);
        if (aCouple.length > 1) {
          oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
          aKeys.push(iKey);
        }
      }
      return oStorage;
    };
    this.configurable = false;
    this.enumerable = true;
  })());
}

 

[burt 5,013]

I didn't even consider those weird people who browse with stuff turned off.   Says this weirdo who browses almost all sites with .js off 

If anyone wants to put the jigsaw puzzle together to get it working I'd be very happy...

[♥mattjt83 133]

Maybe this? I haven't tested it but it should work I think

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2014 osCommerce

  Released under the GNU General Public License
*/

  class ht_grid_list_view {
    var $code = 'ht_grid_list_view';
    var $group = 'footer_scripts';
    var $title;
    var $description;
    var $sort_order;
    var $enabled = false;

    function __construct() {
      $this->title = MODULE_HEADER_TAGS_GRID_LIST_VIEW_TITLE;
      $this->description = MODULE_HEADER_TAGS_GRID_LIST_VIEW_DESCRIPTION;

      if ( defined('MODULE_HEADER_TAGS_GRID_LIST_VIEW_STATUS') ) {
        $this->sort_order = MODULE_HEADER_TAGS_GRID_LIST_VIEW_SORT_ORDER;
        $this->enabled = (MODULE_HEADER_TAGS_GRID_LIST_VIEW_STATUS == 'True');
      }
    }

    function execute() {
      global $PHP_SELF, $oscTemplate;

      if (tep_not_null(MODULE_HEADER_TAGS_GRID_LIST_VIEW_PAGES)) {
        $pages_array = array();

        foreach (explode(';', MODULE_HEADER_TAGS_GRID_LIST_VIEW_PAGES) as $page) {
          $page = trim($page);

          if (!empty($page)) {
            $pages_array[] = $page;
          }
        }

        if (in_array(basename($PHP_SELF), $pages_array)) {          
          
$grid_list_js = <<<EOD
<script>
$(function() { 
    
    if (window.localStorage) {
    
    let cc = localStorage['list_grid']; 
    
    if (cc == 'list') { 
        $('#products .item').removeClass('grid-group-item').addClass('list-group-item'); 
    } else { 
        $('#products .item').removeClass('list-group-item').addClass('grid-group-item'); 
    } 
        
    $('#list').click(function(event){ 
        event.preventDefault(); 
        $('#products .item').addClass('list-group-item').removeClass('grid-group-item'); 
        localStorage['list_grid'] = 'list'; 
    }); 
        
    $('#grid').click(function(event){ 
        event.preventDefault(); 
        $('#products .item').removeClass('list-group-item').addClass('grid-group-item'); 
        localStorage['list_grid'] = 'grid'; 
    });
    
    }else{
        
        //cookie fallback
        $('head').append('<script src="ext/jquery/cookie.js"><\/script>');
        
        try {
            
        let cc = $.cookie('list_grid');
        
        if (cc == 'list') {
            $('#products .item').removeClass('grid-group-item').addClass('list-group-item');
        }else{
            $('#products .item').removeClass('list-group-item').addClass('grid-group-item');
        }
        
        $('#list').click(function(event){
            event.preventDefault();
            $('#products .item').addClass('list-group-item').removeClass('grid-group-item');
            $.cookie('list_grid', 'list');
        });
        
        $('#grid').click(function(event){
            event.preventDefault();
            $('#products .item').removeClass('list-group-item').addClass('grid-group-item');
            $.cookie('list_grid', 'grid');
        });
        
        }catch(error){
            console.log(error);
        }
    }
    
});
</script>
EOD;
          $oscTemplate->addBlock($grid_list_js . PHP_EOL, $this->group);
          
        }
      }
    }

    function isEnabled() {
      return $this->enabled;
    }

    function check() {
      return defined('MODULE_HEADER_TAGS_GRID_LIST_VIEW_STATUS');
    }

    function install() {
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Enable Grid List javascript', 'MODULE_HEADER_TAGS_GRID_LIST_VIEW_STATUS', 'True', 'Do you want to enable the Grid/List Javascript module?', '6', '1', 'tep_cfg_select_option(array(\'True\', \'False\'), ', now())");
	    tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, use_function, set_function, date_added) values ('Pages', 'MODULE_HEADER_TAGS_GRID_LIST_VIEW_PAGES', '" . implode(';', $this->get_default_pages()) . "', 'The pages to add the Grid List JS Scripts to.', '6', '4', 'ht_grid_list_view_show_pages', 'ht_grid_list_view_edit_pages(', now())");
	    tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Sort Order', 'MODULE_HEADER_TAGS_GRID_LIST_VIEW_SORT_ORDER', '0', 'Sort order of display. Lowest is displayed first.', '6', '5', now())");
    }

    function remove() {
      tep_db_query("delete from " . TABLE_CONFIGURATION . " where configuration_key in ('" . implode("', '", $this->keys()) . "')");
    }

    function keys() {
      return array('MODULE_HEADER_TAGS_GRID_LIST_VIEW_STATUS', 'MODULE_HEADER_TAGS_GRID_LIST_VIEW_PAGES', 'MODULE_HEADER_TAGS_GRID_LIST_VIEW_SORT_ORDER');
    }

    function get_default_pages() {
      return array('advanced_search_result.php',
                   'index.php',
                   'products_new.php',
                   'specials.php');
    }
  }

  function ht_grid_list_view_show_pages($text) {
    return nl2br(implode("\n", explode(';', $text)));
  }

  function ht_grid_list_view_edit_pages($values, $key) {
    global $PHP_SELF;

    $file_extension = substr($PHP_SELF, strrpos($PHP_SELF, '.'));
    $files_array = array();
	  if ($dir = @dir(DIR_FS_CATALOG)) {
	    while ($file = $dir->read()) {
	      if (!is_dir(DIR_FS_CATALOG . $file)) {
	        if (substr($file, strrpos($file, '.')) == $file_extension) {
            $files_array[] = $file;
          }
        }
      }
      sort($files_array);
      $dir->close();
    }

    $values_array = explode(';', $values);

    $output = '';
    foreach ($files_array as $file) {
      $output .= tep_draw_checkbox_field('ht_grid_list_view_file[]', $file, in_array($file, $values_array)) . '&nbsp;' . tep_output_string($file) . '<br />';
    }

    if (!empty($output)) {
      $output = '<br />' . substr($output, 0, -6);
    }

    $output .= tep_draw_hidden_field('configuration[' . $key . ']', '', 'id="htrn_files"');

    $output .= '<script>
                function htrn_update_cfg_value() {
                  var htrn_selected_files = \'\';

                  if ($(\'input[name="ht_grid_list_view_file[]"]\').length > 0) {
                    $(\'input[name="ht_grid_list_view_file[]"]:checked\').each(function() {
                      htrn_selected_files += $(this).attr(\'value\') + \';\';
                    });

                    if (htrn_selected_files.length > 0) {
                      htrn_selected_files = htrn_selected_files.substring(0, htrn_selected_files.length - 1);
                    }
                  }

                  $(\'#htrn_files\').val(htrn_selected_files);
                }

                $(function() {
                  htrn_update_cfg_value();

                  if ($(\'input[name="ht_grid_list_view_file[]"]\').length > 0) {
                    $(\'input[name="ht_grid_list_view_file[]"]\').change(function() {
                      htrn_update_cfg_value();
                    });
                  }
                });
                </script>';

    return $output;
  }
  

 

[burt 5,013]

Great thanks Matt you're a star @mattjt83

If you @beerbee could revert your Firefox setting, and then test Matts code, that would be super helpful.

[♥beerbee 32]

Hi reverted, cleaned cache and cookies works,  also tried in private FF window works, thanks a lot!

Best regards

Christoph

[♥mattjt83 133]

1 hour ago, beerbee said:

Hi reverted, cleaned cache and cookies works,  also tried in private FF window works, thanks a lot!

Best regards

Christoph

Just so I'm clear, you tried my code or just reverted to the old code?

[♥beerbee 32]

Yes tried your code.

Best regards

Christoph

[♥mattjt83 133]

OK cool. Glad it's working for you