Dodawanie kart promocyjnych do strony głównej

W aplikacji "Sklep" pojawiła się nowa funkcja dodawania do strony głównej kart promocyjnych, za pomocą których można w ekspresyjny sposób prezentować informacje o rabatach, ofertach specjalnych i nowych produktach.

Jeśli Twój motyw projektowy dla aplikacji "Sklep" nie zawiera kart promocyjnych, musisz dodać kod do wyświetlania kart promocyjnych do swoich szablonów projektowych.

Dodaj następujący kod do szablonu projektu 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}

I następujący kod do pliku CSS Twojego motywu (np. 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; }

Po dodaniu promocji karty powinny pojawić się na stronie głównej sklepu internetowego. Jeśli karty nie są wyświetlane poprawnie, co jest możliwe ze względu na specyfikę motywu projektu, skonfiguruj osobne reguły wyświetlania w pliku CSS: rozmiary kart, kolor czcionek itp.