Сообщений в теме: 9

[Eclipse]

Здравствуйте, возможно ли добавить ещё один-два вида просмотра списка товаров? По 2 и по 4 в ряд? Сейчас есть по одному в строке и по 3. Прежде всего нужно по 4, заодно — по 2. Также хотелось бы поменять местами расположение кнопочек переключения вида (выделил салатовым на скриншоте): сперва новый вид по 4 в ряд (установить этот вид по умолчанию), затем — по 3, по 2, по 1.

Прикрепленные изображения

• 

[Ирина345]

Eclipse (21 Февраль 2015 - 13:48) писал:

Здравствуйте, возможно ли добавить ещё один-два вида просмотра списка товаров? По 2 и по 4 в ряд? Сейчас есть по одному в строке и по 3. Прежде всего нужно по 4, заодно — по 2. Также хотелось бы поменять местами расположение кнопочек переключения вида (выделил салатовым на скриншоте): сперва новый вид по 4 в ряд (установить этот вид по умолчанию), затем — по 3, по 2, по 1.

Здравствуйте, перед внесением изменений создайте бекап шаблона
найдите в шаблоне Товары код

<div class="sorter">
<p class="view-mode">
{% IF GOODS_VIEW_TYPE=2 %}
<a href="?goods_view_type=1" title="Отображать список товаров в виде списка" class="list"></a>
<a title="Список товаров категории &laquo;{% IF IS_FULL_CATALOG %}Каталог{% ELSE %}{CATEGORY_NAME}{% ENDIF %}&raquo; сейчас отображается в виде таблицы, по 3 товара на строку" class="table-act"></a>
{% ELSE %}
<a title="Список товаров категории &laquo;{% IF IS_FULL_CATALOG %}Каталог{% ELSE %}{CATEGORY_NAME}{% ENDIF %}&raquo; сейчас отображается в виде списка, где один товар занимает одну строку" class="list-act"></a>
<a href="?goods_view_type=2" title="Отображать список товаров в виде таблицы с 3-мя товарами на одну строку" class="table"></a>
{% ENDIF %}
</p>

замените на

<div class="sorter">
<p class="view-mode">
{% IF GOODS_VIEW_TYPE=2 %}
<a href="?goods_view_type=1" title="Отображать список товаров в виде списка" class="list"></a>

<a href="?goods_view_type=2" title="Список товаров категории &laquo;{% IF IS_FULL_CATALOG %}Каталог{% ELSE %}{CATEGORY_NAME}{% ENDIF %}&raquo; сейчас отображается в виде таблицы, по 3 товара на строку" class="table-act"></a>
<a href="?goods_view_type=3" title="Список товаров категории &laquo;{% IF IS_FULL_CATALOG %}Каталог{% ELSE %}{CATEGORY_NAME}{% ENDIF %}&raquo; сейчас отображается в виде таблицы, по 4 товара на строку" class="table-act"></a>
{% ELSEIF GOODS_VIEW_TYPE=3 %}
<a href="?goods_view_type=1" title="Список товаров категории &laquo;{% IF IS_FULL_CATALOG %}Каталог{% ELSE %}{CATEGORY_NAME}{% ENDIF %}&raquo; сейчас отображается в виде списка, где один товар занимает одну строку" class="list-act"></a>
<a href="?goods_view_type=2"title="Отображать список товаров в виде таблицы с 3-мя товарами на одну строку" class="table-act"></a>
<a href="?goods_view_type=3"title="Список товаров категории &laquo;{% IF IS_FULL_CATALOG %}Каталог{% ELSE %}{CATEGORY_NAME}{% ENDIF %}&raquo; сейчас отображается в виде таблицы, по 4 товара на строку" class="table"></a>

{% ELSE %}
<a href="?goods_view_type=1" title="Список товаров категории &laquo;{% IF IS_FULL_CATALOG %}Каталог{% ELSE %}{CATEGORY_NAME}{% ENDIF %}&raquo; сейчас отображается в виде списка, где один товар занимает одну строку" class="list-act"></a>
<a href="?goods_view_type=2" title="Отображать список товаров в виде таблицы с 3-мя товарами на одну строку" class="table"></a>
<a href="?goods_view_type=3" title="Список товаров категории &laquo;{% IF IS_FULL_CATALOG %}Каталог{% ELSE %}{CATEGORY_NAME}{% ENDIF %}&raquo; сейчас отображается в виде таблицы, по 4 товара на строку" class="table-act"></a>


{% ENDIF %}
</p>

далее найдите

</div>
<br class="clear" />
</div>
</li>
{% ENDFOR %}
</ol>
{% ELSE %}
<!-- Список товаров. Таблица -->

замените на

  

</div>
<br class="clear" />
</div>
</li>
{% ENDFOR %}
</ol>
{% ELSEIF GOODS_VIEW_TYPE=2 %}
<!-- Список товаров. Таблица -->

далее найдите

  

<!-- /Список товаров. Таблица -->
 {% ENDIF %} 

замените на

<!-- /Список товаров. Таблица -->
{% ELSE %} <div class="row span7 products-grid" style="*padding: 0px;">
<ul>
{% FOR goods %}
<li class="span3 item" style="width: 24%;height: 373px;">
<div class="product-box">
{% IF user_agent_ie7 %}
<a href="{goods.URL | url_amp}" title="{goods.NAME}">
<div class="product-image"><img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{goods.IMAGE_SMALL}{% ENDIF %}"> </div>
</a>
{% ELSEIF user_agent_ie8 %}
<a href="{goods.URL | url_amp}" title="{goods.NAME}">
<div class="product-image"><img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{goods.IMAGE_SMALL}{% ENDIF %}"> </div>
</a>
{% ELSE %}
<div class="span12">
<a href="{goods.URL | url_amp}" title="{goods.NAME}">
<div class="product-image" style="background: url('{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{goods.IMAGE_SMALL}{% ENDIF %}') no-repeat center center; background-size: contain;">
</div>
</a>
</div>
{% ENDIF %}
<div class="quick-shop">
<div class="bg-quick-shop">
<form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListItemCatalogueAddToCartButton product-form-{goods.MIN_PRICE_NOW_ID}">
<div>
<input type="hidden" name="hash" value="{HASH}" />
<input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" />
<input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" />
<a onclick="$('.product-form-{goods.MIN_PRICE_NOW_ID}').attr('rel', 'quick').submit();return false;" title="Быстро оформить заказ">&nbsp;</a>
</div>
</form>
</div>
</div>
<div class="span12">
<h2 class="product-name"><a href="{goods.URL | url_amp}" title="{goods.NAME}" class="underline">{goods.NAME}</a></h2>
</div>
<div class="span12 {% IF goods.MIN_PRICE_NOW>=goods.MIN_PRICE_OLD %}price-box-for-regular-price{% ELSE %}price-box{% ENDIF %}" >
<span class="regular-price">
<span class="price">{goods.MIN_PRICE_NOW | money_format}</span>
</span>
{% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %}
<span class="old-price" style="padding-left:5px;">
<span class="price">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</span>
</span>
{% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
<span class="old-price" style="padding-left:5px;">
<span class="price">{goods.MIN_PRICE_OLD | money_format}</span>
</span>
{% ENDIF %}
</div>
<div class="actions">
{% IF goods.GOODS_MOD_REST_VALUE>0 %}<button type="button" title="Добавить товар в корзину" class="btn btn-success2" onclick="$('.product-form-{goods.MIN_PRICE_NOW_ID}').submit();return false;">Добавить в корзину</button>{% ENDIF %}
<!--<button type="button" {% IF GOODS_MOD_REST_VALUE>0 %} id="m1" {% ELSE %} id="m2" {% ENDIF %} onclick='if($(this).text() == "&nbsp;&nbsp;Уведомить меня о поступлении") { document.location = "/feedback/?form[feedback_message]=Прошу вас уведомить меня о поступлении товара " + "&laquo;" + $.trim($("h1:first").text()) + "&raquo;." + "\n" + $.trim($(".goodsDataMainModificationArtNumber").text()) + "."; } else { $(".goodsDataForm").submit(); } return false;' title="{% IF GOODS_MOD_REST_VALUE>0 %}Положить в корзину{% ELSE %}Попросить оповестить при поступлении{% ENDIF %}" class="btn btn-success" ><i class="icon-ok icon-white"></i>&nbsp;&nbsp;{% IF GOODS_MOD_REST_VALUE>0 %}Положить в корзину{% ELSE %}Уведомить меня о поступлении{% ENDIF %}</button>-->
<ul class="add-to-links">
<li><a href="{goods.URL | url_amp}" class="underline link-wishlist" title="Перейти на страницу информации о {goods.NAME}">Подробней</a></li>
<!-- Если в тарифном плане подключен модуль сравнения товаров -->
{% IF TARIFF_FEATURE_GOODS_COMPARE %}
<!-- Если не выключен модуль сравнения товаров в настройках магазина -->
{% IFNOT SETTINGS_COMPARE_DISABLE %}
<li>
<span class="separator">|</span>
{% IF goods.IS_HAS_IN_COMPARE_LIST %}
<a title="Убрать товар из списка сравнения с другими товарами" href="{COMPARE_DELETE_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;return_to={CURRENT_URL | urlencode}" class="underline novisited link-compare">Убрать из сравнения</a>
{% ELSE %}
<a title="Добавить товар к списку сравнения с другими товарами" href="{COMPARE_ADD_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;from={goods.GOODS_FROM}&amp;return_to={CURRENT_URL | urlencode}" class="underline novisited link-compare">Сравнить</a>
{% ENDIF %}
</li>
{% ENDIF %}
{% ENDIF %}
</ul>
</div>
</div>
</li>
{% ENDFOR %}
</ul>
</div> {% ENDIF %}

[Eclipse]

Спасибо огромное!
1) А что со случаем где 2 товара в строку?
2) Как внизу тоже сделать третий переключатель? (см. скриншот)
3) Как изменить картинку третьего переключателя вида? Она совпадает со вторым сейчас

[Eclipse]

Ап..

[Eclipse]

Есть кто живой в данной ветке?
2 и 3 вопрос решены, остался только вопрос под пунктом 1)

[Eclipse]

Ау...

[Eclipse]

Уважаемая Ирина345 или другие модераторы! Давайте доделаем и закроем тему!

[Ирина345]

Eclipse (29 Март 2015 - 03:27) писал:

Уважаемая Ирина345 или другие модераторы! Давайте доделаем и закроем тему!

Вам произвели изменения и создали бекапы.

[Eclipse]

Мы вам очень благодарны, правда, но случай где по 2 товара в строку так и не затронут...

[Ирина345]

Eclipse (29 Март 2015 - 17:19) писал:

Мы вам очень благодарны, правда, но случай где по 2 товара в строку так и не затронут...

Здравствуйте, если вопрос ваш актуален, перед внесением изменений создайте бекап шаблона
найдите в шаблоне Товары код

{%IF GOODS_VIEW_TYPE=3 %}
 <ol class="span7 products-list"  style="*padding: 0px;">

замените на

   {% IF GOODS_VIEW_TYPE=4 %} 
			 <div  class="row span7 products-grid"  style="*padding: 0px;">
<ul>
 {% FOR goods %}
<li class="span44 item">
 <div class="product-box">
{% IF user_agent_ie7 %}
<a href="{goods.URL | url_amp}" title="{goods.NAME}">
 <div class="product-image"><img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{goods.IMAGE_SMALL}{% ENDIF %}"> </div>
 </a>
{% ELSEIF user_agent_ie8 %}
<a href="{goods.URL | url_amp}" title="{goods.NAME}">
 <div class="product-image"><img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{goods.IMAGE_SMALL}{% ENDIF %}"> </div>
 </a>
{% ELSE %}
<div class="span12">
<a href="{goods.URL | url_amp}" title="{goods.NAME}">
 <div class="product-image" style="background: url('{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{goods.IMAGE_SMALL}{% ENDIF %}') no-repeat center center; background-size: contain;">
 </div>
 </a>
</div>
{% ENDIF %}
<div class="quick-shop">
 <div class="bg-quick-shop">
<form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListItemCatalogueAddToCartButton product-form-{goods.MIN_PRICE_NOW_ID}">
 <div>
<input type="hidden" name="hash" value="{HASH}" />
<input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" />
<input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" />
<a onclick="$('.product-form-{goods.MIN_PRICE_NOW_ID}').attr('rel', 'quick').submit();return false;" title="Быстро оформить заказ">&nbsp;</a>
 </div>
</form>
 </div>
</div>
<div class="span12">
<h2 class="product-name"><a href="{goods.URL | url_amp}" title="{goods.NAME}" class="underline novisited">{goods.NAME}</a></h2>
</div>
<div class="span12 {% IF goods.MIN_PRICE_NOW>=goods.MIN_PRICE_OLD %}price-box-for-regular-price{% ELSE %}price-box{% ENDIF %}" >
 <span class="regular-price">
<span class="price">{goods.MIN_PRICE_NOW | money_format}</span>
 </span>
 {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %}
<span class="old-price" style="padding-left:5px;">
 <span class="price">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</span>
</span>
 {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
<span class="old-price" style="padding-left:5px;">
 <span class="price">{goods.MIN_PRICE_OLD | money_format}</span>
</span>
 {% ENDIF %}
</div>
<div class="actions">
{% IF goods.GOODS_MOD_REST_VALUE>0 %}<button type="button" title="Добавить товар в корзину" class="btn btn-success2" onclick="$('.product-form-{goods.MIN_PRICE_NOW_ID}').submit();return false;">Добавить в корзину</button>{% ENDIF %}
 <!--<button type="button" {% IF GOODS_MOD_REST_VALUE>0 %} id="m1" {% ELSE %} id="m2" {% ENDIF %} onclick='if($(this).text() == "&nbsp;&nbsp;Уведомить меня о поступлении") { document.location = "/feedback/?form[feedback_message]=Прошу вас уведомить меня о поступлении товара " + "&laquo;" + $.trim($("h1:first").text()) + "&raquo;." + "\n" + $.trim($(".goodsDataMainModificationArtNumber").text()) + "."; } else { $(".goodsDataForm").submit(); } return false;' title="{% IF GOODS_MOD_REST_VALUE>0 %}Положить в корзину{% ELSE %}Попросить оповестить при поступлении{% ENDIF %}" class="btn btn-success" ><i class="icon-ok icon-white"></i>&nbsp;&nbsp;{% IF GOODS_MOD_REST_VALUE>0 %}Положить в корзину{% ELSE %}Уведомить меня о поступлении{% ENDIF %}</button>-->
 <ul class="add-to-links">
<li><a href="{goods.URL | url_amp}" class="underline novisited link-wishlist" title="Перейти на страницу информации о {goods.NAME}">Подробней</a></li>
<!-- Если в тарифном плане подключен модуль сравнения товаров -->
{% IF TARIFF_FEATURE_GOODS_COMPARE %}
 <!-- Если не выключен модуль сравнения товаров в настройках магазина -->
 {% IFNOT SETTINGS_COMPARE_DISABLE %}
<li>
 <span class="separator">|</span>
 {% IF goods.IS_HAS_IN_COMPARE_LIST %}
<a title="Убрать товар из списка сравнения с другими товарами" href="{COMPARE_DELETE_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;return_to={CURRENT_URL | urlencode}" class="underline novisited link-compare">Убрать из сравнения</a>
 {% ELSE %}
<a title="Добавить товар к списку сравнения с другими товарами" href="{COMPARE_ADD_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;from={goods.GOODS_FROM}&amp;return_to={CURRENT_URL | urlencode}" class="underline novisited link-compare">Сравнить</a>
 {% ENDIF %}
</li>
 {% ENDIF %}
{% ENDIF %}
 </ul>
</div>
 </div>
</li>
 {% ENDFOR %}
</ul>
 </div>

{% ELSEIF GOODS_VIEW_TYPE=3 %}
 <ol class="span7 products-list"  style="*padding: 0px;">

далее в шаблоне Товары

	   {% IF GOODS_VIEW_TYPE=1 %}
					<a href="?goods_view_type=1" title="Отображать товары списком по одному в строке" class="list-act"></a>
					<a href="?goods_view_type=2" title="Отображать товары в виде таблицы по 3 товара в строке" class="table3 po-3-i-po-3"></a>
					<a href="?goods_view_type=3" title="Сейчас товары отображаются по 4 в строке" class="table4 po-3-i-po-4"></a>
				  {% ELSEIF GOODS_VIEW_TYPE=2 %}
					<a href="?goods_view_type=1" title="Отображать товары списком по одному в строке" class="list"></a>
					<a href="?goods_view_type=2" title="Сейчас товары отображаются по 3 в строке" class="table3-act po-3-i-po-3"></a>
					<a href="?goods_view_type=3" title="Отображать товары в виде таблицы по 4 товара в строке" class="table4 po-3-i-po-4"></a>
				  {% ELSEIF GOODS_VIEW_TYPE=3 %}
					<a href="?goods_view_type=1" title="Сейчас товары отображаются по одному в строке" class="list"></a>
					<a href="?goods_view_type=2" title="Отображать товары в виде таблицы по 3 товара в строке" class="table3 po-3-i-po-3"></a>
					<a href="?goods_view_type=3" title="Отображать товары в виде таблицы по 4 товара в строке" class="table4-act po-3-i-po-4"></a>		  
				  {% ENDIF %}

замените на

	  {% IF GOODS_VIEW_TYPE=1 %}
					<a href="?goods_view_type=1" title="Отображать товары списком по одному в строке" class="list-act"></a>
					<a href="?goods_view_type=2" title="Отображать товары в виде таблицы по 3 товара в строке" class="table3 po-3-i-po-3"></a>
					<a href="?goods_view_type=3" title="Сейчас товары отображаются по 4 в строке" class="table4 po-3-i-po-4"></a>
					 <a href="?goods_view_type=4" title="Сейчас товары отображаются по 2 в строке" class="table44 po-3-i-po-4"></a>
				   
				  {% ELSEIF GOODS_VIEW_TYPE=2 %}
					<a href="?goods_view_type=1" title="Отображать товары списком по одному в строке" class="list"></a>
					<a href="?goods_view_type=2" title="Сейчас товары отображаются по 3 в строке" class="table3-act po-3-i-po-3"></a>
					<a href="?goods_view_type=3" title="Отображать товары в виде таблицы по 4 товара в строке" class="table4 po-3-i-po-4"></a>
				  <a href="?goods_view_type=4" title="Сейчас товары отображаются по 2 в строке" class="table44 po-3-i-po-4"></a>
				   
				 {% ELSEIF GOODS_VIEW_TYPE=3 %}
					<a href="?goods_view_type=1" title="Сейчас товары отображаются по одному в строке" class="list"></a>
					<a href="?goods_view_type=2" title="Отображать товары в виде таблицы по 3 товара в строке" class="table3 po-3-i-po-3"></a>
					<a href="?goods_view_type=3" title="Отображать товары в виде таблицы по 4 товара в строке" class="table4-act po-3-i-po-4"></a>		  
				   <a href="?goods_view_type=4" title="Сейчас товары отображаются по 2 в строке" class="table44 po-3-i-po-4"></a>
				   
				  {% ELSEIF GOODS_VIEW_TYPE=4 %}
					<a href="?goods_view_type=1" title="Сейчас товары отображаются по одному в строке" class="list"></a>
					<a href="?goods_view_type=2" title="Отображать товары в виде таблицы по 3 товара в строке" class="table3 po-3-i-po-3"></a>
					<a href="?goods_view_type=3" title="Отображать товары в виде таблицы по 4 товара в строке" class="table4 po-3-i-po-4"></a>		  
				   <a href="?goods_view_type=4" title="Сейчас товары отображаются по 2 в строке" class="table44-act po-3-i-po-2"></a>
				   
				  {% ENDIF %}

далее добавьте в конец файла main.css

.sorter .view-mode a.po-3-i-po-2 { background:url("{ASSETS_IMAGES_PATH}ico_list_or_table_view_12.jpg") 0px 0px no-repeat;width:12px;height:12px;display:block;float:left;margin:2px 7px 1px 0;}
.sorter .view-mode a.table44 { background-position:0px 0px; }
.sorter .view-mode a.table44:hover { background-position:0px -12px; margin-top: 1px; }
.sorter .view-mode a.table44-act { background-position:0px -12px; margin-top: 1px; }
.span44.item {
  width: 45% !important;
}