Ajax-корзина и jquery

5 апреля 2011 г.

Все началось с того, что достало грузить ворох js скриптов для одной функции добавления в корзину товара.
Как известно, чтобы реализовать это средствами HostCMS нам нужны 4-ре файла:

Общий вес - 54кб (17.8кб gzip).

При распространенности использования jquery мы имеем еще плюс 70кб (24кб gzip).
Итого: 124кб скриптов + 5 запросов - что весьма плачевно сказывается на загрузке.

В целях оптимизации загрузки страницы и кол-ва запросов было решено переделать все на jquery.

Теория

Чтобы добавить товар в корзину нам надо знать Id и количество. Количество необязательный параметр - HostCMS подставит 1 шт если в запросе не передается количество, однако во избежание проблем в скрипте указано явно передавать кол-во равное 1 штуке.
Остается передать только Id. Id - это уникальный номер и не может повторяться - значит удобнее всего прописать id как есть в аттрибуты ссылки "купить".
Чтобы олегчить работу Jquery в плане выборки интересующих ссылок добавим к каждой ссылке "купить" class="buy".
Теперь, используя Jquery можно выбрать все такие ссылки и для каждой получить Id. Затем передать Ajax запрос типовой динамической странице - Интернет-магазин Корзина и обновить Краткую корзину на странице.

Практика

Нам понадобятся:
Типовая динамическая страница - Интернет-магазин корзина. (Отдельный вопрос к разработчикам, почему $_GET??)
Jquery (для удобства я использую CDN от яндекса, что дает и gzip/deflate и правильное кеширование клиентом)
Блок CSS - для отображения действия.
Сам скрипт в теле шаблона.
XSL-шаблон товара или каталога - там где нужна кнопка купить/в корзину.

HTML:

<div class="loading"><img src="/hostcmsfiles/images/ajax_loader.gif" alt=""/></div>

<script type="text/javascript" src="http://yandex.st/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

   var lcart = $('#little_cart');

   $("a.buy").click( function(e) {

      ShowLoadingScreen();

      e.preventDefault();
      var item = this.id;

      $.ajax({
         type: "POST",
         url: "/catalog/cart/",
         data: "ajax_add_item_id="+ item +"&count=1",
         success: function(msg){
           lcart.html(msg);

           HideLoadingScreen();
         }
       });

   });

var loader = $(".loading");

function ShowLoadingScreen()
{
   loader.toggle();
}

function HideLoadingScreen()
{
   loader.toggle();
}

</script>

CSS:

.loading { display: none; position: absolute; top: 50%; left: 50%;}

Тип. динамическая страница - Интернет-магазин Корзина:

/* AJAX добавление товара в корзину */
if (isset($_REQUEST['ajax_add_item_id']))
{
   $param = array();
   $param['shop_id'] = $shop_id;
   $param['item_id'] = to_int($_REQUEST['ajax_add_item_id']);
   $param['user_id'] = $site_users_id;

   if (isset($_REQUEST['count']))
   {
      $item_add_count = $_REQUEST['count'];
   }
   else
   {
      $item_add_count = 1;
   }

   $shop_order_items_quantity = $shop->ConvertPrice($item_add_count);

   // Число товаров передаем, если посетитель кладет в корзину больше 0 товара
   if ($shop_order_items_quantity > 0)
   {
      $param['count'] = $shop_order_items_quantity;
   }

   // Добавляем товар в корзину
   $shop->AddIntoCart($param);

   $shop->ShowCart($shop_id, $site_users_id, to_str($GLOBALS['LA']['xsl_little_cart']));
   exit();
}

XSL-шаблон товара:

<a id="{@id}" class="buy" href="{/shop/path}cart/?action=add&item_id={@id}" title=" {name}">купить →</a>

Таким образом, мы избавились от 4х запросов к серверу и 54кб лишнего мусора.
Стоит отметить, что решение легко допиливается для обновления 2х и более Кратких корзин на странице, что нельзя сделать используя стоковые скрипты.

PS Интересна ли тема оптимизации сайтов с использованием HostCMS? Или модернизация скриптов - оформление заказа в 2 клика.

5 апреля 2011 г.

Re: Ajax-корзина и jquery

Очень грамотное решение!
Скорость загрузки сайта очень важный момент.

А еще когда мы авторизованы в админской части чтобы двигались мышью блоки управления (админ панель) нужно в каждый макет подключать

который грузится всеми пользователями и нифига не нужен...
надо его тоже ликвидировать

Создание, продвижение и поддержка сайтов на HostCMS - Jenix.ru

6 апреля 2011 г.

Re: Ajax-корзина и jquery

vkharkov писал(а):

Итого: 124кб скриптов + 5 запросов — что весьма плачевно сказывается на загрузке.

Альтернативное решение вопроса с количеством загружаемых скриптов - http://www.hostcms.ru/forums/22/5570/
40 килобайт скриптов и всего 1 запрос.
Минификация, объединение и сжатие производятся только один раз для заданного набора файлов, готовыготовый скрипт

Заказов не беру. Консультирую редко.

6 апреля 2011 г.

Re: Ajax-корзина и jquery

Немного не в эту тему, но все же.
vkharkov писал(а):

Итого: 124кб скриптов + 5 запросов — что весьма плачевно сказывается на загрузке.

Заказов не беру. Консультирую редко.

6 апреля 2011 г.

Re: Ajax-корзина и jquery

CDN от яндекса не зря используется... У многих jquery уже закешировано, поэтому и 72кб (25кб gzip) грузить не придется вовсе.
Но ваше решение тоже интересно.

8 апреля 2011 г.

Re: Ajax-корзина и jquery

vkharkov писал(а):

Если не ошибаюсь эти файлы нужны еще для клиентского тулбара

изучаю hostcms 6

9 апреля 2011 г.

Re: Ajax-корзина и jquery

Вопрос в том насколько они нужны заказчику/владельцу сайта.
Мне, к примеру не нужны так же как и клиентам. TinyMCE я в принципе не поддерживаю, контент сайта верстается в ручную. С магазином и инфосистемами удобнее работать в системе (хотя тоже не совсем гладко).

9 апреля 2011 г.

Re: Ajax-корзина и jquery

jenix писал(а):

А еще когда мы авторизованы в админской части чтобы двигались мышью блоки управления (админ панель) нужно в каждый макет подключать

<script type="text/javascript" src="/hostcmsfiles/main.js"></script>

который грузится всеми пользователями и нифига не нужен…

А здесь вам поможет метод UserSessionValid() класса Admin. Если он возвращает истину, то значит у вас в соседней вкладке открыта админка, а значит вы админ, и вам может потребоваться перетаскивать блоки управления, а стало быть вам имеет смысл загружать main.js. А если метод возвращает ложь, то вы не авторизованы в ЦА и main.js вам не нужен.
Пример кода (размещается в макете)

$Admin = &singleton('Admin');
if($Admin->UserSessionValid())
echo '<script type="text/javascript" src="/hostcmsfiles/main.js"></script>';

И волки овцы, и сыты целы

Заказов не беру. Консультирую редко.

9 апреля 2011 г.

Re: Ajax-корзина и jquery

Я честно говоря вообще не могу понять. У меня никогда, ни в одном макете не было подключено main.js при этом окна таскаются нормально. Использую Firefox 3.5 Mac OS 10.5.

27 ноября 2011 г.

Re: Ajax-корзина и jquery

Подскажите, а для удаления товара из корзины без перезагрузки - нет решения?
Попробовал по аналогии, но не знаю как реализовать типовую динамическую страницу.

Авторизация