Antwort #58 am: 10. Oktober 2016, 12:11:44
Zu Deiner Frage per mail
Würdest du mir bitte Verraten wie das geht mit den roten Sternen für Bestseller.
Habe kaum Zeit, daher Kurzfassung für die Komplettlösung bei mir (Sind ja mehrere unterschiedliche Sticker):
Im Prinzip nur der Anleitung folgen für ein zusätzliches Datenbankfeld "products_sticker" für Produkte (Wiki hilft). Achtung das ist einsprachig! Für mehrsprachig ist das die Tabelle products_descrition, nicht products.
Dann diese Smarty Funktion im Templateordner:
/templates/<Dein Template>/smarty/function.sticker.php
<?phpfunction smarty_function_sticker
($params, &$smarty) { // text sticker bottom left if (isset($params['products_sticker']) || isset($params['products_exhausted_reason'])) { if (strlen($params['products_exhausted_reason']) >0) { echo '<div class="burst-12"><div><span>'.PRODUCT_EXHAUSTED_LABEL
.'</span></div></div>'; return null; } if (strlen($params['products_sticker']) >0) { echo '<div class="burst-12"><div><span>'.$params['products_sticker'].'</span></div></div>'; return null; } } // image sticker top left if (isset($params['products_class_id'])) { switch ($params['products_class_id']) { case 2: case 3: case 6: echo '<span class="sticker-container top-left"><span class="sticker prod_class_'.$params['products_class_id'].'"> </span></span>'; break; default: return null; } } return null;}?> In den produktlisting html-Dateien sieht das so aus:
{if $product.PRODUCTS_IMAGE!=''}
<a href="{$product.PRODUCTS_LINK}" class="image">
{sticker products_exhausted_reason=$product.PRODUCTS_EXHAUSTED_REASON products_sticker=$product.PRODUCTS_STICKER}
<img src="{$product.PRODUCTS_IMAGE|replace:'info':'thumbnail'}" class="img-rounded" alt="{$product.PRODUCTS_NAME}"/>
{if $product.PRODUCTS_PRICE|isspecialprice}<span class="sticker-container top-right"><span class="sticker sale"><span class="fui-fire"></span></span></span>{/if}
{sticker products_class_id=$product.PRODUCTS_CLASS_ID}
</a>
{else}
Dann im CSS so was (Achtung, das ist less, kein pures CSS, daher die Variablen):
.prod_class_2 {
background-image: url('../images/icons/prod_class_2.gif');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.prod_class_3 {
background-image: url('../images/icons/prod_class_3.gif');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.prod_class_6 {
background-image: url('../images/icons/prod_class_6.png');
background-size: 100% 100%;
background-repeat: no-repeat;
border-radius: 0px !important;
}
.burst-12:hover {
opacity: 0;
}
.burst-12 {
background: @danger;
width: 70px;
height: 70px;
position: absolute;
text-align: center;
overflow: visible;
transition: opacity .4s;
bottom: @s;
left: @s;
-webkit-box-shadow: 0px 0px 28px 0px black;
-moz-box-shadow: 0px 0px 28px 0px black;
box-shadow: 0px 0px 28px 0px black;
}
.burst-12:before, .burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 70px;
width: 70px;
background: @danger;
opacity: inherit;
}
.burst-12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
opacity: inherit;
}
.burst-12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
opacity: inherit;
}
.burst-12 div {
display:block;
position:relative;
right:50%;
text-align:center;
height:70px;
width:70px;
z-index:1;
opacity: inherit;
}
.burst-12 div span {
display:inline-block;
margin-right: -100%;
z-index:3000;
white-space: nowrap;
line-height: 70px;
opacity: inherit;
color: white;
}
Weitere Formen mit CSS:
https://css-tricks.com/examples/ShapesOfCSS/Fragen an mich, bitte nur im Forum, nicht per mail! Außer Du willst mir einen Auftrag geben, für den hätte ich aber gerade keine Zeit.
