Примеры: Аксессуары

Внимание! Мы рекомендуем вам прочитать разделы Архитектура, Класс ElementItem, Класс ElementCollection для полного понимания архитектуры проекта.

Пример 1: аксессуары на странице продукта

1.1 Задача

Создайте простую страницу продукта и визуализируйте блок с 5 случайными аксессуарами.

Блок с аксессуарами может выглядеть как любой блок со списком товаров. Блок может быть простым (например: слайдер с 5 случайными аксессуарами). Блок может быть сложным (содержать поиск, фильтрацию, сортировку, разбиение на страницы).

1.2 Как это сделать?

Аксессуары доступны с плагином Accessories for Shopaholic.

1.3 Исходный код

Простой пример страницы товара.

File: pages/product-page.htm

                            
                            
    title = "Product page"
    url = "/product/:slug"
    layout = "main"
    is_hidden = 0
    
    [ProductPage]
    slug = "{{ :slug }}"
    slug_required = 1
    smart_url_check = 1
    skip_error = 0
    ==
    {# Get product item #}
    {% set obProduct = ProductPage.get() %}
    
    <div data-id="{{ obProduct.id }}" itemscope itemtype="http://schema.org/Product">
        <h1 itemprop="name">{{ obProduct.name }}</h1>
    </div>
    
    {# Get accessories + apply filder by "active" field #}
    {% set obProductList = obProduct.accessory.active() %}
    {% set arProductList = obProductList.random(5) %}
    {% if arProductList is not empty %}
        <div>
            <span>Accessories</span>
            {# Render product list #}
            <ul>
                {% for obProduct in arProductList %}
                    <li>{% partial 'product/product-card/product-card' obProduct=obProduct %}</li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}

                Скопироватьготово
                        

Файл: partials/product/product-card/product-card.htm

                            
                        
    {# @var obProduct \Lovata\Shopaholic\Classes\Item\ProductItem #}
<a href="{{ obProduct.getPageUrl('product-page') }}">
    <div itemscope itemtype="http://schema.org/Product">
        {% if obProduct.preview_image is not empty %}
            <img
                src="{{ obProduct.preview_image.path }}"
                itemprop="image"
                alt="{{ obProduct.preview_image.description }}"
                title="{{ obProduct.preview_image.title }}"
            >
        {% endif %}
        <h3 itemprop="name">{{ obProduct.name }}
        {% if obProduct.preview_text is not empty %}
            <div itemprop="description">
                {{ obProduct.preview_text }}
            </div>
        {% endif %}
    </div>
</a>

                Скопироватьготово