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

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

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

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

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

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

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


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

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

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

    <script type="text/javascript">
        var myPartnerUrl = 'http://demo.imperacms.com/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.com/design/common/Getter/script.js"></script>

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

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

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

    <script>
        jQuery('целевой-объект').load('products/некий-url?quickcontent=1');
    </script>

    <script>
        jQuery('целевой-объект').load('products/некий-url?ajax=1');
    </script>

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

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

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

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

Отлично, спасибо. А как самому создать рабочий параметр 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?

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

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=
...
...

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

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

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

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

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


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

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

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