Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Grid List - Cookie


Recommended Posts

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.

Link to comment
Share on other sites

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?

 

Link to comment
Share on other sites

@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
}

 

Matt

Link to comment
Share on other sites

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;
  })());
}

 

Matt

Link to comment
Share on other sites

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 :laugh:

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

Link to comment
Share on other sites

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;
  }
  

 

Matt

Link to comment
Share on other sites

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?

Matt

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...