Pasek Cenowy Na Produkcie?

[Peebuls]

Witam,

 

Mam pytanie - czy w Presta 1.6 da się w prosty sposób zrobić pasek z ceną na produkcie (coś w stylu tego gdy wyświetla się jako nowy) na wzór tego zastosowanego tutaj -  http://store.deadseedproductions.com/ ?

 

Pozdrawiam

[REGE]

Jest to kwestia zmiany fragmentu kodu w plikach szablonu sklepu (w zależności od posiadanego szablonu) i zastosowanie odpowiednich reguł CSS.

[Peebuls]

Dziękuję za odpowiedź. Posiadam standardowy szablon. Rozumiem, że nie jest to kwestia nadająca się do wyjaśnienia w poście?

[endriu107]

Podejrzyj jak to jest ostylowane dla nowy i w zasadzie przenieś style dla kontenera ceny. Oczywiście może się okazać ze sam kontener trzeba będzie przerobić ale to już wychodzi w trakcie.

 

Opisać w poscie sie da, ale żeby to zrobić trzeba to wykonać, żeby to wykonać trzeba mieć na to czas...

[REGE]

Dziękuję za odpowiedź. Posiadam standardowy szablon. Rozumiem, że nie jest to kwestia nadająca się do wyjaśnienia w poście?

W pełni zgodzę się z endriu107, czas ma tu kluczowe znaczenie. Postaram się jednak co nieco podpowiedzieć.

 

 

Proponuję zacząć od pliku product-list.tpl oraz css/product_list.css z katalogu szablonu. Znajdź w nim fragment kodu zaczynający się mniej więcej tak:

<div class="product-container" itemscope itemtype="http://schema.org/Product">

i pierwszy z nich porównaj z kodem źródłowym na podanej przez Ciebie przykładowej stronie. Dokładnie z tym fragmentem:

<div class="product">
    <a style="background-image:url(http://s0.limitedrun.com/images/1166178/v200_gribberiket-lp.jpg);" href="/products/566227-gribberiket-knefall-lp-t-shirt-bundle" class="image">
         
    </a>
    <a href="/products/566227-gribberiket-knefall-lp-t-shirt-bundle" class="pricebox">
        <span class="pricerange">€25.90</span>
    </a>
    <a href="/products/566227-gribberiket-knefall-lp-t-shirt-bundle" class="info">
        GRIBBERIKET "Knefall" LP + T-shirt bundle
    </a>
</div>

...a tu masz regułę CSS dla paska z ceną:

.product .pricebox {
    color: #333333;
    display: block;
    font-size: 14px;
    height: 120px;
    overflow: hidden;
    position: absolute;
    top: 10px;
    width: 120px;
    z-index: 5;
}

.product .pricebox .pricerange {
  background-color: #ebebeb;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
  color: #333333;
  display: block;
  font-size: 13px;
  font-weight: bold;
  left: -32px;
  padding: 2px 0 3px;
  position: relative;
  text-align: center;
  top: 30px;
  transform: rotate(-46deg);
  width: 150px;
}

Oczywiście to tylko ogólny zarys. Przede wszystkim trzeba dopasować kod kontenera produktu i nadać mu odpowiednie style.

 

 

EDIT: Dorzuciłem jeszcze brakujący styl dla .pricerange, bez niego cena nie będzie obrócona

Edited February 19, 2016 by REGE (see edit history)