Рекомендации по созданию тем оформления

Материал из CartEnergy
Перейти к: навигация, поиск

При создании тем, за основу рекомендуется брать тему Aurora, т.к. она наиболее простая и содержит всю необходимую функциональность.

На этой странице приведены основные рекомендации (с примерами кода) по созданию и модификации тем оформления.

В целях сокращения объема и повышения читабельности сгенерированного кода, КОММЕНТАРИИ вставленные в примерах СЛЕДУЕТ УДАЛЯТЬ.

Содержание

Вывод пути (breadcrumbs)

<ul class="breadcrumbs">				
{% assign parent_item = nil %}
{% for item in action.path %}		
  <!-- Сохраняем название пункта -->
  {% capture 'item_title' %}{% if item.view != nil %}{{ item.view.title }}{% else %}{{ item.title | translate }}{% endif %}{% endcapture %}

  <!-- Если текущий элемент - последний, помечаем как выбранный -->
  {% if item == action.path.last %}
  <li class="selected">
    <span>{{ item_title }}</span>
  </li>		
  {% else %}
  <li>
    <!-- Выводим ссылку на элемент, с учетом контекста -->
    <a href="{{ item | uri: parent_item }}" title="{{ item_title | strip_html }}">{{ item_title }}</a>
    <span>/</span>							
  </li>		
  {% endif %}		

  <!-- Сохраняем текущий элемент, как предыдущий -->
  {% assign parent_item = item %}
{% endfor %}
</ul>

Вывод краткой информации о содержимом корзины

<!-- Кэшируем на 1 час с учетом локали, валюты и хэш кода корзины -->
{% cache on 1.hour locale:locale currency:currency cart:cart %}
<div class="widget cart">
{% unless cart == blank %}		
  <div class="cart-qty">{{ 'You have added' | translate }}<a href="{{ 'cart' | uri }}">{{ cart.qty }} {{ 'item(s)' | translate }}</a>.</div>
  <div class="cart-amount">{{ 'Cart amount' | translate }}<strong>{{ cart.amount.current | money }}</strong></div>
  <div class="cart-details"><a href="{{ 'cart' | uri }}">{{ 'View cart' | translate }}</a></div>
{% else %}
  {{ 'Cart is empty' | translate }}.
{% endunless %}
</div>
{% endcache %}

Вывод дерева категорий

Для ускореня обработки больших деревьев, будем выводить подкатегории, только для выбранных категорий. Также, для более эффективного кэширования, отметку уктивных категорий будем выполнять спомощью javascript обработчика.

1. Создаём сниппет (назовем его, например categories)

<!-- Если в качестве параметра не передаётся ничего (например сниппет используется в панели) -->
{% if categories == blank %}
  <!-- 
    Выбираем категорию, которая будет использоваться в качестве параметра кэширования.
    Если категория не имеет подкатегорий, для ключа выбираем предыдущую
  -->
  {% assign cache_category = action.category %}
  {% if cache_category.children == empty %}
    {% assign cache_category = action.category.parent %}
  {% endif %}

  <!-- Кэшируем на 1 час с учетом локали и выбранной категории -->
  {% cache on 1.hour locale:locale category:cache_category %}    
    <!-- Выбираем корневую категорию канала -->
    {% select first channel_root_category from channel.categories where "cat.parent" is nil %}

    <div class="widget categories">
      <!-- Рекурсивно вставляем данный виджет с параметром списка подкатегорий --> 
      {% unless cat.children == blank %}
        {% include 'categories' with channel_root_category.children %}
      {% endunless %}
    </div>    
  {% endcache %}
{% else %}
  <ul>
  {% for cat in categories %}
    <!-- Показываем только активные категории -->
    {% if cat.active? %}						
      <li class="category category-{{ cat.id }}">
        <div><a href="{{ cat | uri }}" title="{{ cat.view.title | strip_html }}">{{ cat.view.title }}</a></div>
	
        <!-- Если категория выбрана и содержит подкатегории, рекурсивно генерируем подкатегории -->	
        {% if action.path contains cat and cat.children != empty %}
          {% include 'categories' with cat.children parent_category: cat %}
        {% endif %}
      </li>
    {% endif %}
  {% endfor %}
</ul>
{% endif %}

2. В заголовке шаблона страницы, устанавливаем, javascript обработчик (в примере используется jquery), функцию рекомендуется вынести в js файл темы.

<script type="text/javascript">
  $(function(){
    // подсвечиваем выбранные категории
    highlightCategories(new Array({% for el in action.path %}{% if 'category' == el.model_name %}{{ el.id }}, {% endif%}{% endfor %}0));
  });

  function highlightCategories(ids) {
    // добавляем соответствующий класс к указанным категориям
    $(ids).each(function(idx, id){ $(".category-"+id).addClass('selected'); });
  }
</script>

Вывод виджета выбора валюты

Виджет предполагает существование действия switch_currency, соответствующего типа.

{% if channel.currencies.size > 1 %}
<div class="widget switch-currency">
  <strong>{{ 'Select currency' | translate }}</strong>
  <div>
    <form action="{{ 'switch_currency' | uri }}" method="GET">
      <select name="code" onchange="$(this).closest('form').submit();">
        {% for cur in channel.currencies %}
          <option value="{{ cur.code }}" {% if cur == currency %}selected="selected"{% endif %} >{{ cur.title }}</option>
        {% endfor %}
      </select>
    </form>
  </div>
</div>
{% endif %}

Вывод краткой информации о посетителе магазина

<!-- Кэшируем на 1 час с учетом локали и клиента -->
{% cache on 1.hour locale:locale customer:customer %}
<div class="widget customer">
  {% if customer == blank %}	  
    <div class="welcome">{{ "Welcome" | translate }}, <a href="{{ 'customer' | uri }}">{{ "Guest" | translate }}</a>.</div>
    <div class="details"><a href="{{ 'customer/login' | uri }}" >{{ "Login" | translate }}</a></div>
  {% else %}
    <div class="welcome">{{ "Welcome" | translate }}, <a href="{{ 'customer' | uri }}">{{ customer.name | h | capitalize }}</a>.</div>	
    <div class="orders"><a href="{{ 'customer/orders' | uri }}">{{ "Orders" | translate }}</a> ({{ customer.orders.size }})</div>
    <div class="settings"><a href="{{ 'customer/settings' | uri }}">{{ "Settings" | translate }}</a></div>
    <div class="details"><a href="{{ 'customer/login' | uri }}" class="logout">{{ "Logout" | translate }}</a></div>
  {% endif %}
</div>
{% endcache %}

Вывод списка последних новостей

<!-- Закэшировать на 1 день с учетом локали, ленты и времени обновления ленты -->
{% cache on 1.day locale:locale feed:feed feed_updated:feed.updated_at %}
<div class="widget feed">
  <strong>{{ feed.view.title }}</strong>
  
  <!-- Выбираем последние 5 статей в ленте -->
  {% select pages from channel.pages where feed in 'pages.feeds' and 'pages.active?' = true order:'created_at DESC' order: 'id' limit:5 %}		 
  <ul>
  {% for pg in pages %}
  <li>
    <a href="{{ pg | uri: feed }}" title="{{ pg.view.title | escape }}">{{ pg.view.title | truncate: 45 }}</a>
      <span class="date">{{ pg.created_at | date: dictionary['date_format'] }}</span>
    </li>
  {% endfor %}	
  </ul>
    
  <div class="details"><a href="{{ feed | uri }}" title="{{ 'All articles' | translate }}">{{ 'All articles' | translate }}</a></div>
</div>
{% endcache %}

Канонизация

Канонизация необходима для страниц, имеющих одно и тоже содержимое но несколько положений на сайте, например для товаров или новостей.

Более подробно, о канонизации:

{% if 'product' == ob.model_name or 'page' == ob.model_name %}
  {% assign object_canonical_uri = ob | uri %}
  {% if object_canonical_uri != request.path %}
    <!--
      Canonize 
      http://support.google.com/webmasters/bin/answer.py?hl=ru&answer=139066
      http://support.google.com/webmasters/bin/answer.py?hl=ru&answer=66359
    -->
    <link rel="canonical" href="{{ object_canonical_uri | uri: absolute: true }}" />
  {% endif %}
{% endif %}        				

Вывод меню

Создаём сниппет (назовем его, например _menu).

<ul class="widget menu">
  {% for item in _menu %}	
  <li class="{% if action.path.last == item.target %}selected{% endif %}">            
    <a href="{{ item | uri }}" title="{{ item.title | strip_html }}">{{ item.title }}</a>      
    <!-- Рекурсивно вставляем подменю -->
    {% unless item.children == empty %}
      {% include '_menu' with item.children %}
    {% endunless %}
  </li>
  {% endfor %}
</ul>

Вывод панели

Создаём сниппет (назовем его, например _panel)

{% unless _panel == nil %}
  {% for element in _panel.elements %}
    {% case element.model_name %}
    {% when 'menu' %}
      <!-- Вывод меню -->
      {% include '_menu' with element.children %}
    {% when 'snippet' %}
      <!-- Вызов сниппета -->
      {{ element.content }}
    {% when 'panel_content' %}			
      <!-- Вывод содержимого панели -->
      {{ panel_content }}
    {% endcase %}
  {% endfor%}		
{% else %}
  <!-- Если панель не существует, просто выводим содержимое панели -->
  {{ panel_content }}
{% endunless %}

Отображение нескольких товаров из определенной категории на главной странице

Например, Вам необходимо вывести на главной странице товары со специальными предложениями или(и) новинки. Добавьте в настройках темы новый сниппет, назовите его, например show_featured_products.

{% cache on 1.hour locale:locale currency:currency category:show_featured_products %}

{% select featured_products from channel.products where show_featured_products in featured_products.categories order:'id DESC' limit: 5 %}		 
<ul id="featured-products">
{% for product in featured_products %}
  <li>
    <a href="{{ product | uri }}" title="{{ product.view.title | strip_html | escape }}">

      <!-- Выводим фотографию товара -->
      <span class="product-thumbnail">
        <img src="{{ product.images.first.small_image_uri }}" alt="{{ product.view.title | strip_html | escape }}"/>
      </span>

      <!-- Выводим название товара -->
      <span class="product-title">{{ product.view.title }}</span>

      <!-- Выводим цену товара -->
      {% select available_variants from product.variants where available_variants.available? = true or available_variants.available_for_booking? = true %}
      {% unless available_variants == blank %}
        <em class="{% if product.min_price.special? %}on-sale{% endif %}">
          {% if product.price_range? %}от {% endif %}
          {{ product.min_price.current | money }}
        </em>
      {% if product.min_price.special? %}
        <s>{% if product.price_range? %}от {% endif %}{{ product.min_price.regular | money }}</s>
      {% endif %}
      {% endunless %}

    </a>
  </li>
{% endfor %}
</ul>

{% endcache %}

Обратите внимание, в запросе в начале сниппета limit:5 означает взять 5 товаров. Далее в настройках соответствующего главной странице шаблона разметки вставьте следующий код, перед переменной content_for_layout :

....
{% if 'index' == action.name %}
<h3>Специальные предложения</h3>
{% include 'show_featured_products' with ИДЕНТИФИКАТОР_КАТЕГОРИИ  %}
{% endif %}

{{ content_for_layout }}
...

Обратите внимание на то, что ИДЕНТИФИКАТОР_КАТЕГОРИИ необходимо заменить на цифровое значение поля "ID" в настройках той категории товаров, которую Вы хотите вывести.

Далее добавьте в настройках темы в разделе "Продвинутые настройки оформления (CSS)" следующие стили:

#featured-products:after {clear: both;}
#featured-products li {display: block; width: 20%; height: auto; float: left; padding: 0 10px 20px 10px;}
#featured-products a {display: block; text-align: center;padding: 10px;position: relative;background: white;border: 1px solid #EEE;}
#featured-products .product-thumbnail {position: relative;display: block;}
#featured-products .product-title {display: block; padding: 10px 0 5px 0;}
#featured-products em {display: inline-block;line-height: 1.2;font-weight: bold;}
#featured-products s {display: inline-block;opacity: 0.5;line-height: 1.2;}

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

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

...
<ul id="featured-products">
...

идентификатор "featured-products" следует заменить на другой, например "new-products" для новинок. И соответственно добавить новый набор CSS стилей для этого идентификатора #new-products ...