Советы по изменению темы дизайна при переходе с Shop-Script 5 на Shop-Script 6
В Shop-Script 6 появилась новая возможность добавления промокарточек на главную страницу, с помощью которых можно выразительно представить информацию о скидках, спецпредложениях, новых товарах.
Так как функциональность промокарточек появилась только в Shop-Script 6, пользователям тем дизайна Shop-Script 5 необходимо добавить код отображения карточек в шаблоны дизайна.
Добавьте следующий код в шаблон дизайна home.html:
{if $promocards = $wa->shop->promos()} <!-- PROMOS --> <section class="promos"> <ul> {foreach $promocards as $promo} <li id="s-promo-{$promo.id}"> <a href="{$promo.link|escape}" style="background-image: url('{$promo.image}');"> <div class="background-color-layer"></div> {if !empty($promo.title)}<h5 style="color: {$promo.color};">{$promo.title|escape}</h5>{/if} {if !empty($promo.body)}<p style="color: {$promo.color};">{$promo.body|escape}</p>{/if} </a> </li> {/foreach} </ul> </section> {/if}
И следующий код в CSS-файл вашей темы (например, default.shop.css):
.promos { margin: 5px -25px; } .promos ul { padding: 0; margin: 0; } .promos ul li { padding: 0; margin: 0; list-style: none; display: inline-block; width: 25%; float: left; } .promos ul li a { display: block; padding: 40px 20px; height: 80px; overflow: hidden; background-size: cover; background-position: center center; color: #000; background-color: rgba(0,0,0,0.05); border: 5px solid #fff; text-align: center; position: relative; } .promos ul li a .background-color-layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; opacity: 0.1; background-color: #000; } .promos ul li a h5 { font-size: 1.3em; text-shadow: 0 1px 2px #000; position: relative; z-index: 2; } .promos ul li a p { font-size: 0.9em; text-shadow: 0 1px 1px #000; position: relative; z-index: 2; } .promos ul li a:hover .background-color-layer { opacity: 0.5; transition: 0.3s; }
После добавления промокарточки должны появиться на главной странице вашего интернет-магазина. Если карточки отображаются неправильно, что возможно в связи с особенностями вашей темы дизайна, то настройте отдельные правила отображения в CSS-файле: размеры карточек, цвет шрифтов и т. п. Если у вас возникли сложности с добавлением блока, пожалуйста, обратитесь к разработчику вашей темы дизайна либо обновите тему дизайна до последней оригинальной версии.
