Hi Zeljko,
ok. Ich hoffe ich bekomme alles zusammen:
\themes\Frontend<my_theme>\frontend\detail\index.tpl:</my_theme>
{extends file="parent:frontend/detail/index.tpl"}
{* remove article navigation slideouts on the side *}
{block name="frontend_detail_index_navigation"}
{/block}
{* add my article navigation to right side of breadcrumb *}
{block name="frontend_index_breadcrumb_suffix" append}
{include file="frontend/detail/my_navigation.tpl"}
{/block}
Im gleichen Verzeichnis:
themes\Frontend<my_theme>\frontend\detail\my_navigation.tpl:</my_theme>
{namespace name="frontend/detail/index"}
{* Previous product *}
{block name='frontend_detail_article_back'}
{s name='DetailNavPrevious'}{/s}
{/block}
{* Next product *}
{block name='frontend_detail_article_next'}
{s name='DetailNavNext'}{/s}
{/block}
Und die less Datei für die Produkt Details:
themes\Frontend<my_theme>\frontend_public\src\less_modules\detail.less</my_theme>
//Buttons
.my_navigation_buttons {
float: right;
background: transparent;
display: inline-block;
.unitize(margin-right,15);
//the display none is overwritten in the link if there is another product to the left or right
.navigation--link {
display: none;
}
.link--prev-button, .link--next-button {
background: transparent;
color: #fff;
display: inline-block;
padding: .625rem .625rem .625rem .625rem;
}
}
/////////////////////////////////////
// tablet
/////////////////////////////////////
@media screen and (min-width: @tabletViewportWidth) {
.my_navigation_buttons {
.unitize(margin-right, 5);
//the display none is overwritten in the link if there is another product to the left or right
.navigation--link {
display: none;
}
.link--prev-button, .link--next-button {
border-radius: 3px;
background-clip: padding-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 14px;
font-size: .875rem;
background-color: #fff;
background-image: -ms-linear-gradient(top, #fff, #f8f8fa);
background-image: linear-gradient(to bottom, #fff 0%, #f8f8fa 100%);
-webkit-font-smoothing: inherit;
display: inline-block;
position: relative;
font-weight: bold;
text-decoration: none;
text-align: left;
cursor: pointer;
border: 1px solid transparent;
color: #5f7285;
padding: 2px 12px 2px 12px;
padding: .125rem .75rem .125rem .75rem;
line-height: 34px;
line-height: 2.125rem;
background-color: #98c9e9;
background-image: -ms-linear-gradient(top, #98c9e9, #6aadda);
background-image: linear-gradient(to bottom, #98c9e9 0%, #6aadda 100%);
border: 0 none;
color: #fff;
display: inline-block;
}
.link--prev-button:hover, .link--next-button:hover {
background: #6aadda;
}
}
}
Und natürlich muss die details.less Datei noch in all.less eingetragen werden:
@import "_modules/detail";
Anmerkung: in der Mobile Darstellung sind meine Zurück/Vor Buttons nur weiss auf blauem Hintergrund. Ab der Tablet Darstellung werden es blaue Buttons auf weissem Grund.
Ich hoffe, ich habe nichts vergessen. Bei mir funktioniert’s, auch wenn es sicherlich elegantere Methoden gibt.
Viel Spass,
Jens