Справка

Работа с ajax

Справка

Рекомендуемый подход к работе

Для работы с динамически подгружаемыми/обновляемыми частями рекомендуется использовать следующий подход:

[if !ajax?]<div id="container">[/if]
Содержимое контейнера, которое будет обновляться
[if !ajax?]</div>[/if]

Как обновить содержимое такого контейнера?
Для этого достаточно выгрузить в #container результат вызова ajaxURL текущей части, доступной по [cpart.ajax]

Для этого можно использовать JQuery компонент Ajax-Post.

[component.ajax_post(url=cpart.ajax, box='container', box_type='replace')]

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

Пример контейнера, подгружающего статьи при прокрутке

[if !ajax?]
    [* Устанавливаем переменную Page, содержащую номер следующей страницы для загрузки *]
    <script>var page=1;</script>
    [* Если вызов не Ajax, то создаём контейнер *]
    <div id="slide-container">
[/if]

[* Перебираем статьи с учётом установленной переменной Page,
отвечающей за количество загруженных страниц *]
[tree cex.articles.find.start($page*10).limit(10)]
    <h2>[cur.title]</h2>
    <div>[cur.body]</div>
    <hr>
[/tree]

[if !ajax?]
    [* Закрываем контейнер *]
    </div>
    <script>
        [* Отслеживаем достижение конца страницы при прокрутке *]
        var is_loading=false;
        $(document).scroll(function(){
            if(is_loading) return false;
            if($(window).scrollTop()+$(window).height()>=$(document).height()){
                is_loading=true;
                [* Загружаем новую информацию в контейнер *]
                [component.ajax_post(url=cpart.ajax, box='slide-container',
                box_type='to_end', vars=('page'), done='
                    page++;
                    is_loading=false;
                ')]
                [*
                В параметре vars указываем, что хотим передать переменную Page.
                В box_type указываем, что хотим добавлять контент к уже существующему вниз.
                В done указываем JS скрипт, который будет отрабатывать при успешной загрузке.
                В нашем случае это увеличение следующей для загрузки страницы
                и разрешение на следующую подгрузку.
                *]
            }
        });
    </script>
[/if]

Пример блока корзины для магазина

[if !ajax?]
    [compile js u]
        [* создаём функцию добавления товара в корзину *]
        function add_to_cart(item,count=1){
            var action='add';
            [component.ajax_post(url=cpart.ajax, box='shop_cart', box_type='replace',
            vars=('item', 'count', 'action')).cascade]
        }
    [/compile]
    <div id="shop_cart">
[/if]

[if ajax? && post.action=='add']
    [* добавляем товар и его количество в Cookies пользователя *]
    [scook.cart_items[post.item]=post.count]
[/if]

[total=0]
[* перебираем товары, находящиеся в корзине пользователя *]
[tree scook.cart_items]
    [if first?]
        <ul>
    [/if]
    [* получаем товар из ключа массива *]
    [item=key.getrow]
    [count=value]
    <li>[$count] [$item.name] / $[$item.price]</li>
    [* суммируем цену *]
    [total+=$count*$item.price]
    [if last?]
        </ul>
        [* выводим сумму заказа *]
        <div>Всего: $[$total]</div>
    [/if]
[/tree]

[if !ajax?]
    </div>
    [if $total>0]
        [* кнопка перехода к оформлению заказа *]
        <div id="btn-buy" align="center">
            [* направляем пользователя на часть Order, отвечающую за оформление заказа *]
            <input type="button" value="Оформить заказ" OnClick="
                document.location.href='[uprefix][cm.part.order.url]'
            ">
        </div>
    [else]
        [return false]
    [/if]
[/if]

В дальнейшем, в товарах на кнопку купить устанавливаем созданную в корзине функцию:

где [cur] - ссылка на товар.
Также можно создать функцию удаления товара из корзины.

Читать далее про "Вложенные циклы"