Форум пользователей Impera CMS
Impera CMS - отличный движок для лёгкого создания интернет магазина.
Обладает невероятным количеством функций, необходимых в онлайн торговле.

Подгрузка подробной информации о товаре методом AJAX

Следить
Главная
16:31
08 окт
#
?
Сергей написал:

Здравствуйте. Хочу реализовать подгрузку подробного описания товара в блоки с кратким описанием при нажатии на ссылку подробнее, но чтобы при выключенном javascript происодил нормальный переход к товару (для индексации). Подскажите как такое можно реализовать используя минимум кода, или используя уже подключенные методы (например, подгрузка корзины). Спасибо.

12:07
10 окт
#
Разработчик написал:

До этого момента в Impera CMS не развивалось направление аяксовых (динамических) подгрузок частей контента.

Можно было бы решить ваш вопрос "костыльным" методом - самостоятельно имитируем аяксовый вызов страницы товара, сообщая в URL-ке некий параметр, например type=descr, далее в шаблоне проверяем этот параметр и в зависимости от состояния параметра отдаем контент с той или иной степенью полноты: вся страница товара, или только описание, или еще что-то.

Но это сложновато и требует серьезного вмешательства как минимум в два файла шаблона (index.tpl и product.tpl), поэтому я решил создать нормальный модуль Ajax Getter - сейчас его версия 1.0 предоставляет минимум возможностей (подгружает лишь полное описание, или краткое, или SEO текст из указанного товара). Дальше модуль будет развиваться согласно идеям от пользователей, чтобы не городить в модуль кучу бесполезных возможностей.

Вообще говоря, с помощью такого модуля можно будет в дальнейшем получать необходимую информацию из движка своего магазина или магазина своего партнера, притом вне зависимости от используемой CMS-ки или шаблона на том сайте, куда мы захотели бы подгружать информацию из магазина.

Покажу это на абстрактном примере с живым демо ниже, как две разные CMS-ки взаимодействуют между собой. Предположим у нас есть своя площадка (ну например данная страница форума). Это одна воображаемая CMS-ка. Предположим также у нас есть партнерский магазин (пусть им выступит демо сайт Impera CMS - http://demo.imperacms.ru/). Это другая воображаемая CMS-ка.

Теперь мы хотим, чтобы по клику некоторых ссылок, которые для наглядности я размещу ниже в секции живого демо, происходила подгрузка полных описаний товаров с партнерского магазина в некий контейнер, который я тоже размещу ниже.


Вот html-код того контейнера, что станет принимать в себя подгруженные описания товаров, скажем пусть у контейнера будет идентификатор getterResult:

    <div id="getterResult">
        сюда будет подгружаться контент
    </div>



Вот html-код трех ссылок (здесь скрипт я использовал только ради удобства чтения кода, чтобы код ссылок уместился в рамки желтого контейнера, предназначеного для демонстрации исходных кодов, то есть я выдумал переменную myPartnerUrl и присвоил ей адрес модуля, размещенного на сайте партнерского магазина):

    <script type="text/javascript">
        var myPartnerUrl = 'http://demo.imperacms.ru/design/common/Getter/';
    </script>

    <div class="scheduling-full">
        <a href="#" onclick="return GetterProduct(52, 'body', '#getterResult', myPartnerUrl);">
           товар 52
        </a>

        |

        <a href="#" onclick="return GetterProduct(150, 'body', '#getterResult', myPartnerUrl);">
           товар 150
        </a>

        |

        <a href="#" onclick="return GetterProduct(174, 'body', '#getterResult', myPartnerUrl);">
           товар 174
        </a>
    </div>


Я специально не стал называть товары в ссылках, а именую их по идентификаторам товаров, чтобы подчеркнуть особенности работы модуля (он оперирует идентификаторами товаров). Версия 1.0 модуля в состоянии извлекать из товаров такие сведения (поля записи о товаре):

  • description - краткое описание товара,
  • body - полное описание товара,
  • seo_description - SEO текст товара.

Зарезервированы и другие имена полей, но пока они не используются. Полный список зарезервированных имен полей можно посмотреть в файле product.php модуля.


Вот как я подключаю страницу форума к модулю партнерского магазина:

    <script src="http://demo.imperacms.ru/design/common/Getter/script.js"></script>



Живой пример в действии Попробуйте нажимать на ссылки ниже.


сюда будет подгружаться контент

07:37
11 окт
#
?
Сергей написал:

Спасибо за ответ. Еще бы хотел узнать: 1. Как и где формируется переменная {$content|default:""}?

За формирование контента центральной части страниц на клиентской стороне сайта отвечают перечисленные ниже PHP-файлы, которые размещены в папке http://сайт/objects (движком уже поддерживается размещение файлов модулей в подпапках указанной папки, но пока еще со старых версий множество модулей так и лежат навалом в этой общей папке, от версии к версии я понемногу раскладываю их по папкам, чтобы все было красиво).

Когда посетитель переходит на конкретную страницу, веб сервер сайта с помощью mod_rewrite и правил, записанных в корневом файле .htaccess, распарсивает URL (адрес) этой страницы и отдает результат движку (конкретнее, стартует корневой файл index.php с набором распарсенных параметров). Движок в свою очередь подгружает класс-обертку клиентской страницы, и уже та обертка на основе полученного имени модуля, привязанного к такому адресу страницы, временно передает управление одному из перечисленных ниже PHP-файлов (модулей).

Модуль с помощью своих методов или методов, доступных благодаря все еще видимому ему классу-обертке, извлекает необходимую информацию из базы данных, формирует соответствующие случаю переменные и запускает отрисовку привязанного к этому модулю TPL-файла, который ищется среди файлов текущего шаблона клиентской стороны сайта (то есть среди файлов в папке http://сайт/design/текущий_шаблон/html).

Результат отрисовки не отправляется сразу же в браузер пользователя, а захватывается движком, так как это была отрисована лишь центральная часть страницы, и пока не анализировалось, нужно ли дорисовывать к этому контенту внешнее оформление страницы. Так вот как только вызванный модуль прекращает свою работу, вот здесь движок и сбрасывает отрисованный контент в упомянутую вами переменную {$content|default:''}.

Далее движок анализирует необходимость дорисовки внешнего оформления страницы к только что отрисованному контенту центральной части. Анализ состоит из двух частей.

Первая часть анализа - в собственном общедоступном свойстве модуль->single модуля присвоенным значением TRUE может быть указано, что этот модуль как бы является независимой страницей и генерирует контент сам, без каких-либо сторонних дорисовок. Например модули RSS и Pricelist рисуют контент в собственном не-HTML-формате.

Вторая часть анализа - во входных параметрах запроса страницы может присутствовать параметр quickcontent=1, который указывает просьбу отправить в браузер только сгенерированную центральную часть, то есть не дорисовывать ничего больше. Например когда корзина рисуется всплывающей поверх текущей страницы.

Если движок обнаружил какой-то из этих двух признаков, он сразу же отправляет отрисованный только что контент центральной части в браузер. В остальных случаях движок запускает отрисовку TPL-файла index.tpl из текущего шаблона клиентской стороны сайта, и вот этот полный результат отрисовки отправляет в браузер.

  • Account.php   -   личный кабинет покупателя
  • Articles.php   -   список статей и страница отдельной статьи
  • CallMe.php   -   страница запроса "Позвоните мне"
  • Cart.php   -   страница корзины
  • Compare.php   -   страница сравнения товаров
  • Configurator.php   -   страницы "Конфигуратор" и "Заказ по таблице"
  • Feedback.php   -   страница обратной связи
  • Files.php   -   список медиа файлов (документов) и страница отдельного медиа файла
  • FulminantOrder.php   -   обработка процесса "Мгновенный заказ товара"
  • Login.php   -   страница авторизации
  • News.php   -   список новостей и страница отдельной новости
  • NotifyMe.php   -   страница подключения к уведомлениям типа "Уведомить о поступлении товара"
  • Order.php   -   страница оформленного заказа
  • Pricelist.php   -   генерация прайс-листов и файла yandex.xml
  • Registration.php   -   страница регистрации
  • Robots.php   -   генерация файла robots.txt
  • RSS.php   -   генерация rss-ленты и информеров для внешних сайтов
  • Search.php   -   страница результатов поиска
  • Selector.php   -   список товаров и страница отдельного товара и страница каталога (главная)
  • Sitemap.php   -   страница карты сайта и генерация файла sitemap.xml
  • StaticPage.php   -   специальная (статическая) страница
  • Stocks.php   -   список складов и страница отдельного склада


2. Что нужно сделать чтобы получать только сформированный {$content|default:""} по принципу всплывающей корзины? Какие файлы php нужно смотреть/ редактировать?

При ajax-вызове желаемой страницы нужно в адрес страницы добавить параметр quickcontent=1 (или параметр ajax=1, который наравне со старым параметром будет поддерживаться только начиная с новых версий, то есть более 130418), тем самым указав движку, что хотите получить только контент центральной части.

Например:
    <script>
        jQuery('целевой-объект').load('products/некий-url?quickcontent=1');
    </script>
или например то же самое с параметром ajax:
    <script>
        jQuery('целевой-объект').load('products/некий-url?ajax=1');
    </script>

К сожалению, в версиях движка 130418, а также всех ранних, есть баг - параметр quickcontent игнорируется для большинства страниц, так что приходится в файл index.tpl шаблона вносить небольшую правку.

Например (троеточиями обозначено прежнее содержимое файла index.tpl):
{* если это динамическая подгрузка и мы в старой версии движка *}
{if $quick_content|default:false || $smarty.request.quickcontent|default:false}
                                 || $smarty.request.ajax|default:false}

    {* отдаем только контент центральной части страницы *}
    {$content|default:''}

{* иначе рисуем всю страницу как обычно *}
{else}
    ...
    ...
{/if}

В новых версиях эту правку делать уже не придется, движок будет отрабатывать входные параметры ajax и quickcontent правильно для любой страницы.
10:12
11 окт
#
?
Marc написал:

Ох..еть понравилось. +100 балов.
Это ж все что хошь показывать можно.
А как категории подгружать?

17:35
11 окт
#
?
Сергей написал:

Отлично, спасибо. А как самому создать рабочий параметр ajax, чтобы не использовать условие {if $quick_content|default:false || $smarty.request.quickcontent|default:false}{/if} ? Хочу созать функцию вызова СТРАНИЦЫ подробного описания товара по принципу Quick_Add_To_Cart, так чтобы при ajax вызове формировался созданный мной шаблон продуката- product_ajax.tpl. Как посылать генерировать product_ajax.tpl без применения условных конструкций в product.tpl?

Благодарю за ваши ответы

12:27
12 окт
#
Разработчик написал:

1 Ниже показана универсальная JS-скриптовая функция QuickPage для подгрузки страниц во всплывающее окно.

    // ========================================================================
    /**                                                                        
    *  Динамическая подгрузка страницы во всплывающее окно (целевой объект)    
    *                                                                          
    *  @access  public                                                         
    *  @param   string  target  DOM-указатель на целевой (принимающий) объект  
    *  @param   string  url     веб адрес подгружаемой страницы                
    *  @param   string  msg     текст сообщения на время подгрузки страницы    
    *  @return  boolean         TRUE если цели нет и нужен переход по ссылке   
    */                                                                         
    // ========================================================================

    function QuickPage ( target, url, msg ) {

        // величина сдвига всплывающего окна
        var offset_x = 0,
            offset_y = -200;

        // ищем на странице целевой объект (первый, если несколько)
        target = jQuery(target);
        target = target.length ? target[0] : null;
        if (typeof(target) != 'object' || target == null) return true;

        // выводим в целевой объект сообщение,
        // проявляем объект на экране,
        // загружаем новый контент
        jQuery(target).html(msg)
                      .show()
                      .load(url + '?ajax=1');

        // двигаем объект к центру страницы
        var w = jQuery(window).width();
            var x = (w - jQuery(target).width()) / 2;
            x += offset_x;
            if (x < 0) x = 0;
        var h = jQuery(window).height();
            var y = (h - jQuery(target).height()) / 2;
            y += jQuery(document).scrollTop();
            y += offset_y;
            if (у < 0) у = 0;
        jQuery(target).animate({ left: x, top: y }, 0);

        // возвращаем НЕ ПЕРЕХОДИТЬ ПО ССЫЛКЕ
        return false;
    }


2 Кроме того, что на макет страницы (в файл index.tpl шаблона) добавляем эту функцию, также добавляем на страницу скрытый div-контейнер (например разместим его сразу за открывающим тегом body), который и будет всплывающим окном, а также в нужные ссылки на странице добавляем вызов функции QuickPage.

<html>
    <head>
        ...
        ...

        <!-- здесь например подключаем тело функции QuickPage -->
    </head>

    <body>

        <!-- всплывающее окно с подгружаемой страницей -->
        <noindex>
            <div id="quickPage"></div>
        </noindex>

        ...
        ...

        <!-- по клику ссылки подгружаем страницу в окно -->
        <a href="http://site/products/url1" onclick="return QuickPage('#quickPage',
                                                                      this.href,
                                                                      'Загружается...')">
            Подробнее о товаре 1
        </a>

        ...
        ...

        <!-- по клику ссылки подгружаем страницу в окно -->
        <a href="http://site/products/url2" onclick="return QuickPage('#quickPage',
                                                                      this.href,
                                                                      'Загружается...')">
            Подробнее о товаре 2
        </a>

        ...
        ...
    </body>
</html>


3 Еще в CSS-файл шаблона добавляем необходимые стили для всплывающего окна. Например - белый фон, тонкая серая рамка по краям, внутренние отступы от края равны 15 пикселям, ширина окна равна 600 пикселей, высота не менее 400 пикселей, окно изначально невидимое, позиционируется абсолютно.

#quiсkPage {
    background: #fff;
    border: #ccc 1px solid;
    display: none;
    margin: 0;
    padding: 15px;
    position: absolute;
    width: 600px;
    min-height: 400px;
}


Примечательно, что выше в ссылках вместо строки 'Загружается...' можем писать любой необходимый нам html-фрагмент сообщения, даже так '<img src="http://site/design/текущая-тема/images/progress.gif" />', чтобы на время подгрузки страницы во всплывшем окне крутился индикатор прогресса.

4 Далее, для правильной работы динамической подгрузки страниц в движке версии 130418 и ниже, в файл index.tpl шаблона все равно необходимо внести правку, рассматривавшуюся через два поста выше. То есть файл index.tpl должен быть таким:

{* если это динамическая подгрузка и мы в старой версии движка *}
{if $quick_content|default:false || $smarty.request.quickcontent|default:false}
                                 || $smarty.request.ajax|default:false}

    {* отдаем только контент центральной части страницы *}
    {$content|default:''}

{* иначе рисуем всю страницу как обычно *}
{else}
    ...
    ...
{/if}


5 И последняя правка, если исходить из вашей задачи о генерации файла шаблона с нестандартным именем, касается самого файла product.tpl, так как движком пока не поддерживается динамическая смена tpl-файла по указанию с клиентской стороны. То есть нет возможности обратиться к какой-нибудь странице сайта и определенным параметром в запросе страницы попросить генерировать ее другим шаблоном. Поэтому файл product.tpl нужно исправить следующим образом:

{* если это динамическая подгрузка *}
{if $smarty.request.ajax|default:false}

    {* генерируем центральную часть нестандартным шаблоном *}
    {include file = 'product_ajax.tpl'}

{* иначе генерируем как обычно *}
{else}
    ...
    ...
{/if}


6 Осталось создать в шаблоне файл product_ajax.tpl и закодировать в нем тот внешний вид контента, который хотите получать при динамической подгрузке.

Еще одна рекомендация касается закрытия от индексации всех адресов, которые относятся к ajax-вызовам, чтобы в поисковике не получалась каша из ссылок на полные и "полу"-страницы. Для чего в файле robots.txt пишем запрет индексации любой страницы, содержащей в адресе параметр ajax или quickcontent.

User-agent: *
...
...
Disallow: /*ajax=
Disallow: /*quickcontent=
...
...
15:25
12 окт
#
?
Степан написал:

Хорошо описываете. Всё так подробно. Это радует.
Я добавил бы callback в аяксовую подгрузку, чтобы всплывшее окно закрывать при ошибках подгрузки.
Попробуйте дать неправильный url, окно тупо висит и никак его не убрать.

jQuery(target).html(msg)
              .show()
              .load(url + '?ajax=1', function (response, status, xhr) {
                                         if (status == 'error') {
                                             jQuery(target).hide();
                                             alert('Не удалось загрузить страницу!');
                                         }
                                     });

Теперь окно исчезает и пользователю показывается алерт.

18:51
13 окт
#
Разработчик написал:

Еще один пример, основанный на модуле Ajax Getter версии 1.1 - в этой версии модуля расширен перечень информации, которую можно получать о товарах и добавлена возможность получать дерево категорий или отдельную его ветку в виде UL-LI списка. Спасибо пользователям движка за идеи, в какую сторону расширять модуль.

Итак, в левую колонку по клику соответствующей кнопки можем подгрузить дерево категорий, в первую (верхнюю) правую колонку подгружаются субкатегории тех веточек, которые кликаем слева. Нижняя правая колонка демонстрирует расширенные возможности получения информации о товаре.


Живой пример в действии Попробуйте нажимать на ссылки ниже.


дерево категорий:
сюда будет подгружаться контент

ветка субкатегорий:
сюда будет подгружаться контент

| товар 150 | товар 174 | очистить

о товаре:
сюда будет подгружаться контент


22:43
13 окт
#
?
Хабрик написал:

Пипец наворотов в движке.
А можно этот модуль как то применить в админпанели?

12:49
11 сен
#
?
ImperaDevils написал:

Еще одно решение по ajax-подгрузке информации.
Пример простого Ajax модуля для Impera CMS

ajax logo

Написание ответа

Перед публикацией рекомендуется использовать Предпросмотр, чтобы увидеть конечный вид сообщения.


Обратите внимание! Для противодействия спаму новые посты форума проявляются с задержкой от нескольких минут, пока не пройдут модерацию.


Хостинг для сайта

Хостинг для интернет магазина

Svai.net

Украина
г. Черкассы
5+ Заказать

TutHost.ua

Украина
г. Киев
Заказать

Mirohost.net

Украина
г. Киев
? Заказать

HyperHosting.com.ua

Украина
г. Винница
i подробнее Заказать

Agava.ru

Россия
г. Москва
Заказать

Ukraine.com.ua

Украина
г. Киев
5 Заказать
Импераготовасотрудничатьс провайдерами Важно Учтите Этот список перечисляет лишь некоторых хостинг-провайдеров, у которых существуют специальные тарифные планы для интернет магазинов, а сам список не означает, что другие провайдеры чем-то хуже.

Существующие в списке оценки по 5-бальной шкале не должны учитываться при выборе, так как носят субъективный характер и касаются соотношения цена-качество-скорость только для самых дорогих тарифных планов.

Демо Главная Хронология Соглашение Материалы Контакты