{"id":14812,"date":"2025-05-29T10:33:13","date_gmt":"2025-05-29T09:33:13","guid":{"rendered":"https:\/\/help.expertsender.com\/?post_type=ecdp&p=14812"},"modified":"2026-05-04T14:42:42","modified_gmt":"2026-05-04T13:42:42","slug":"jak-stworzyc-banner-z-rekomendacjami-w-edytorze-kodu","status":"publish","type":"ecdp","link":"https:\/\/help.expertsender.com\/pl\/ecdp\/jak-stworzyc-banner-z-rekomendacjami-w-edytorze-kodu\/","title":{"rendered":"Jak stworzy\u0107 banner z rekomendacjami w edytorze kodu"},"content":{"rendered":"\n

Edytor kodu pozwala tworzy\u0107 dynamiczne bannery z rekomendacjami produkt\u00f3w przy u\u017cyciu HTML, CSS, JavaScript i sk\u0142adni Razor. Mo\u017cesz ich u\u017cywa\u0107 do wy\u015bwietlania spersonalizowanych rekomendacji w kampaniach e-mail i na stronie internetowej.<\/p>\n\n\n\n

\n
\n
\n <\/svg> <\/div>\n
\n
\n Podgl\u0105d banner\u00f3w na \u017cywo \u2013 wymagania <\/div>\n
\n

<\/strong><\/p>\n

Podgl\u0105d w edytorze nie wy\u015bwietla rzeczywistych danych produkt\u00f3w \u2013 dane b\u0119d\u0105 widoczne jako wyra\u017cenia, np. @product.Name.<\/p>\n

Aby zobaczy\u0107 prawdziwe dane, skorzystaj z opcji Podgl\u0105d na \u017cywo<\/strong> lub przetestuj banner bezpo\u015brednio na swojej stronie.<\/p>\n

<\/strong><\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n

Wspierane technologie<\/h2>\n\n\n\n

Edytor kodu obs\u0142uguje<\/p>\n\n\n\n

    \n
  • HTML5 <\/strong>\u2013 do nadania struktury bannerowi.<\/li>\n\n\n\n
  • CSS3<\/strong> \u2013 do nadania indywidualnego wygl\u0105du i responsywno\u015bci.<\/li>\n\n\n\n
  • JavaScript <\/strong>\u2013 do obs\u0142ugi element\u00f3w interaktywnych i dynamicznych zachowa\u0144.<\/li>\n\n\n\n
  • Sk\u0142adnia Razor <\/strong>\u2013 do obs\u0142ugi logiki po stronie serwera i wi\u0105zania danych (data binding<\/em>) za pomoc\u0105 blok\u00f3w \u201e@{}\u201d.<\/li>\n<\/ul>\n\n\n\n
    <\/div>\n\n\n\n

    Pobieranie rekomendacji produktowych<\/h2>\n\n\n\n

    Aby pobra\u0107 rekomendacje produkt\u00f3w, u\u017cyj nast\u0119puj\u0105cego wyra\u017cenia:<\/p>\n\n\n\n

    <\/path><\/path><\/svg><\/span>
    @{<\/span><\/span>\n    <\/span>var<\/span> recommendations <\/span>=<\/span> Model<\/span>.<\/span>GetRecommendations<\/span>(<\/span>4<\/span>);<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    Metoda pobiera maksymalnie 4 polecane produkty. Liczb\u0119 t\u0119 mo\u017cesz dostosowa\u0107 do uk\u0142adu swojego bannera.<\/p>\n\n\n\n
    Metoda zwraca obiekt z dwiema w\u0142a\u015bciwo\u015bciami:<\/p>\n\n\n\n
      \n
    • recommendations.Products \u2013 lista rekomendowanych produkt\u00f3w.<\/li>\n\n\n\n
    • recommendations.Currency \u2013 waluta sklepu, u\u017cywana do wy\u015bwietlania cen.<\/li>\n<\/ul>\n\n\n\n
      <\/div>\n\n\n\n
      Dost\u0119pne zmienne produkt\u00f3w<\/h2>\n\n\n\n
      Poni\u017csza tabela zawiera wszystkie zmienne dost\u0119pne dla ka\u017cdego produktu z listy recommendations.Products:<\/p>\n\n\n\n
      Zmienna<\/strong><\/td>Typ<\/strong><\/td>Opis<\/strong><\/td>Przyk\u0142ad u\u017cycia<\/strong><\/td><\/tr><\/thead>
      Id<\/td>string<\/td>Unikalny identyfikator produktu.<\/td>product.Id<\/td><\/tr>
      Name<\/td>string<\/td>Nazwa produktu.<\/td>product.Name<\/td><\/tr>
      ImageUrl<\/td>string<\/td>Adres URL zdj\u0119cia produktu.<\/td>product.ImageUrl<\/td><\/tr>
      Url<\/td>string<\/td>Adres URL strony produktu.<\/td>product.Url<\/td><\/tr>
      Category<\/td>string<\/td>Kategoria produktu.<\/td>product.Category<\/td><\/tr>
      PriceString<\/td>string<\/td>Cena regularna w formacie tekstowym.<\/td>product.PriceString<\/td><\/tr>
      CurrentPriceString<\/td>string<\/td>Aktualna cena produktu w formacie tekstowym. Puste pole oznacza brak aktywnej promocji.<\/td>product.CurrentPriceString<\/td><\/tr>
      OmnibusPriceString<\/td>string<\/td>Najni\u017csza cena z ostatnich 30 dni (zgodnie z dyrektyw\u0105 Omnibus).<\/td>product.OmnibusPriceString<\/td><\/tr>
      AdditionalInfo<\/td>string<\/td>Opcjonalne informacje dodatkowe.<\/td>product.AdditionalInfo<\/td><\/tr>
      CustomProductAttributes<\/td>list<\/td>Cechy niestandardowe zdefiniowane dla produktu (np. marka, kolor).<\/td>Zobacz przyk\u0142ady poni\u017cej.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
      Waluta sklepu jest dost\u0119pna jako osobny obiekt:<\/p>\n\n\n\n
      W\u0142a\u015bciwo\u015b\u0107<\/strong><\/td>Typ<\/strong><\/td>Opis<\/strong><\/td>Przyk\u0142ad u\u017cycia<\/strong><\/td><\/tr><\/thead>
      recommendations.Currency.Sign<\/td>string<\/td>Symbol waluty (np. \u20ac, $, z\u0142).<\/td>@recommendations.Currency.Sign<\/td><\/tr>
      recommendations.Currency.ISO<\/td>string<\/td>Kod waluty ISO (np. EUR, USD, PLN).<\/td>@recommendations.Currency.ISO<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
      <\/div>\n\n\n\n
      Przyk\u0142ady u\u017cycia<\/h2>\n\n\n\n
      Sprawdzanie, czy produkt istnieje<\/strong><\/h3>\n\n\n\n
      <\/path><\/path><\/svg><\/span>
      @{<\/span><\/span>\n    <\/span>var<\/span> <\/span>recommendations<\/span> <\/span>=<\/span> Model<\/span>.<\/span>GetRecommendations<\/span>(<\/span>4<\/span>);<\/span><\/span>\n    <\/span>var<\/span> <\/span>product<\/span> <\/span>=<\/span> recommendations<\/span>.<\/span>Products<\/span>?.<\/span>FirstOrDefault<\/span>();<\/span><\/span>\n}<\/span><\/span>\n@if<\/span> <\/span>(<\/span>product <\/span>!=<\/span> <\/span>null)<\/span><\/span>\n{<\/span><\/span>\n    <\/span>@*<\/span> Wy\u015bwietl produkt tutaj <\/span>*@<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
      <\/div>\n\n\n\n
      Wy\u015bwietlanie aktualnej ceny produktu<\/h3>\n\n\n\n
      U\u017cyj CurrentPriceString jako aktualnej ceny produktu. Je\u015bli pole jest puste, wy\u015bwietl PriceString:<\/p>\n\n\n\n
      <\/path><\/path><\/svg><\/span>
      @(<\/span>string<\/span>.<\/span>IsNullOrWhiteSpace<\/span>(<\/span>product<\/span>.<\/span>CurrentPriceString<\/span>)<\/span><\/span>\n    <\/span>?<\/span> product<\/span>.<\/span>PriceString<\/span><\/span>\n    <\/span>:<\/span> product<\/span>.<\/span>CurrentPriceString<\/span>)<\/span><\/span>\n@<\/span>recommendations.Currency.Sign<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
      <\/div>\n\n\n\n
      Wy\u015bwietlanie ceny Omnibus<\/h3>\n\n\n\n
      Wy\u015bwietlanie ceny Omnibus jest wymagane przez Uni\u0119 Europejsk\u0105, gdy polecasz produkty o obni\u017conej cenie.<\/p>\n\n\n\n
      <\/path><\/path><\/svg><\/span>
      @if<\/span> <\/span>(!<\/span>string<\/span>.<\/span>IsNullOrWhiteSpace<\/span>(<\/span>product<\/span>.<\/span>OmnibusPriceString<\/span>))<\/span><\/span>\n{<\/span><\/span>\n    <\/span><<\/span>div<\/span>><\/span>Najni\u017csza cena z 30 dni: <\/span>@<\/span>product.OmnibusPriceString <\/span>@<\/span>recommendations.Currency.Sign<\/span><\/<\/span>div<\/span>><\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
      <\/div>\n\n\n\n
      Obliczanie i wy\u015bwietlanie obni\u017cki procentowej<\/strong><\/h3>\n\n\n\n
      <\/path><\/path><\/svg><\/span>
      @{<\/span><\/span>\n    <\/span>decimal<\/span> <\/span>regularPrice<\/span> <\/span>=<\/span> <\/span>0<\/span>;<\/span><\/span>\n    <\/span>decimal<\/span> <\/span>salePrice<\/span> <\/span>=<\/span> <\/span>0<\/span>;<\/span><\/span>\n    <\/span>decimal<\/span> <\/span>discountPercentage<\/span> <\/span>=<\/span> <\/span>0<\/span>;<\/span><\/span>\n    <\/span><\/span>\n    <\/span>if<\/span> <\/span>(decimal.<\/span>TryParse<\/span>(<\/span>products<\/span>[<\/span>0<\/span>]?.<\/span>PriceS<\/span>,<\/span> <\/span>out<\/span> regularPrice<\/span>)<\/span> <\/span>&&<\/span> <\/span><\/span>\n        <\/span>decimal.<\/span>TryParse<\/span>(<\/span>products<\/span>[<\/span>0<\/span>]?.<\/span>SalePriceS<\/span>,<\/span> <\/span>out<\/span> salePrice<\/span>)<\/span> <\/span>&&<\/span><\/span>\n        regularPrice <\/span>><\/span> <\/span>0<\/span> <\/span>&&<\/span> salePrice <\/span>><\/span> <\/span>0<\/span>)<\/span><\/span>\n    <\/span>{<\/span><\/span>\n        discountPercentage <\/span>=<\/span> Math<\/span>.<\/span>Round<\/span>(((<\/span>regularPrice <\/span>-<\/span> salePrice<\/span>)<\/span> <\/span>\/<\/span> regularPrice<\/span>)<\/span> <\/span>*<\/span> <\/span>100<\/span>,<\/span> <\/span>0<\/span>);<\/span><\/span>\n    <\/span>}<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n@if<\/span> <\/span>(<\/span>discountPercentage <\/span>><\/span> <\/span>0<\/span>)<\/span><\/span>\n{<\/span><\/span>\n    <\/span>-<\/span>@<\/span>discountPercentage%<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
      <\/div>\n\n\n\n
      Pe\u0142na logika wy\u015bwietlania cen<\/h3>\n\n\n\n
      Poni\u017cej znajdziesz przyk\u0142ad obs\u0142uguj\u0105cy wszystkie scenariusze cenowe:<\/p>\n\n\n\n
      <\/path><\/path><\/svg><\/span>
      @if<\/span> <\/span>(!<\/span>string<\/span>.<\/span>IsNullOrWhiteSpace<\/span>(<\/span>products<\/span>.<\/span>CurrentPriceString<\/span>))<\/span><\/span>\n{<\/span><\/span>\n    <\/span><<\/span>div<\/span>><\/span>@<\/span>products.CurrentPriceString <\/span>@<\/span>recommendations.Currency.Sign<\/span><\/<\/span>div<\/span>><\/span><\/span>\n    <\/span><<\/span>div<\/span>><<\/span>s<\/span>><\/span>@<\/span>products.PriceString <\/span>@<\/span>recommendations.Currency.Sign<\/span><\/<\/span>s<\/span>><\/<\/span>div<\/span>><\/span><\/span>\n<\/span>\n    <\/span>@if<\/span> <\/span>(!<\/span>string<\/span>.<\/span>IsNullOrWhiteSpace<\/span>(<\/span>products<\/span>.<\/span>OmnibusPriceString<\/span>))<\/span><\/span>\n    <\/span>{<\/span><\/span>\n        <\/span><<\/span>div<\/span>><\/span>Najni\u017csza cena z 30 dni: <\/span>@<\/span>products.OmnibusPriceString <\/span>@<\/span>recommendations.Currency.Sign<\/span><\/<\/span>div<\/span>><\/span><\/span>\n    <\/span>}<\/span><\/span>\n}<\/span><\/span>\nelse<\/span><\/span>\n{<\/span><\/span>\n    <\/span><<\/span>div<\/span>><\/span>@<\/span>products.PriceString <\/span>@<\/span>recommendations.Currency.Sign<\/span><\/<\/span>div<\/span>><\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
      <\/div>\n\n\n\n
      P\u0119tla przez wszystkie produkty<\/h3>\n\n\n\n
      <\/path><\/path><\/svg><\/span>
      @{<\/span><\/span>\n    <\/span>var<\/span> <\/span>recommendations<\/span> <\/span>=<\/span> Model<\/span>.<\/span>GetRecommendations<\/span>(<\/span>4<\/span>);<\/span><\/span>\n}<\/span><\/span>\n@foreach<\/span> <\/span>(<\/span>var<\/span> <\/span>product<\/span> <\/span>in<\/span> recommendations<\/span>.<\/span>Products<\/span>)<\/span><\/span>\n{<\/span><\/span>\n    <\/span>if<\/span> <\/span>(<\/span>product <\/span>!=<\/span> <\/span>null)<\/span><\/span>\n    <\/span>{<\/span><\/span>\n        <\/span><<\/span>div<\/span>><\/span>@<\/span>product.Id<\/span><\/<\/span>div<\/span>><\/span><\/span>\n        <\/span><<\/span>div<\/span>><\/span>@<\/span>product.Name<\/span><\/<\/span>div<\/span>><\/span><\/span>\n        <\/span><<\/span>img<\/span> <\/span>src<\/span>=<\/span>"<\/span>@product.ImageUrl<\/span>"<\/span> <\/span>alt<\/span>=<\/span>"<\/span>@product.Name<\/span>"<\/span> \/><\/span><\/span>\n        <\/span><<\/span>a<\/span> <\/span>href<\/span>=<\/span>"<\/span>@product.Url<\/span>"<\/span>><\/span>@<\/span>product.Url<\/span><\/<\/span>a<\/span>><\/span><\/span>\n        <\/span><<\/span>div<\/span>><\/span>@<\/span>product.PriceString <\/span>@<\/span>recommendations.Currency.Sign<\/span><\/<\/span>div<\/span>><\/span><\/span>\n        <\/span><<\/span>div<\/span>><\/span>@<\/span>product.CurrentPriceString <\/span>@<\/span>recommendations.Currency.Sign<\/span><\/<\/span>div<\/span>><\/span><\/span>\n        <\/span><<\/span>div<\/span>><\/span>@<\/span>product.OmnibusPriceString <\/span>@<\/span>recommendations.Currency.Sign<\/span><\/<\/span>div<\/span>><\/span><\/span>\n    <\/span>}<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
      Odczytanie niestandardowej cechy produktu<\/h3>\n\n\n\n
      <\/path><\/path><\/svg><\/span>
      @{<\/span><\/span>\n<\/span>\n\u00a0\u00a0\u00a0 <\/span>var<\/span> <\/span>brand<\/span> <\/span>=<\/span> product<\/span>?.<\/span>CustomProductAttributes<\/span><\/span>\n<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>?.<\/span>FirstOrDefault<\/span>(<\/span>x<\/span> <\/span>=><\/span> x<\/span>.<\/span>Name <\/span>==<\/span> <\/span>"<\/span>Marka<\/span>"<\/span>)?.<\/span>ValueString<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
      <\/div>\n\n\n\n
      Przyk\u0142adowa struktura banneru<\/h2>\n\n\n\n
      <\/path><\/path><\/svg><\/span>
      <<\/span>style<\/span>><\/span><\/span>\n    <\/span>.<\/span>banner-header<\/span> <\/span>{<\/span><\/span>\n        <\/span>text-align<\/span>:<\/span> center<\/span>;<\/span><\/span>\n        <\/span>padding<\/span>:<\/span> <\/span>20px<\/span>;<\/span><\/span>\n        <\/span>background<\/span>:<\/span> white<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n<\/span>\n    <\/span>.<\/span>banner-header<\/span> <\/span>h1<\/span> <\/span>{<\/span><\/span>\n        <\/span>color<\/span>:<\/span> <\/span>#<\/span>2c3e50<\/span>;<\/span><\/span>\n        <\/span>font-size<\/span>:<\/span> <\/span>24px<\/span>;<\/span><\/span>\n        <\/span>margin-bottom<\/span>:<\/span> <\/span>5px<\/span>;<\/span><\/span>\n        <\/span>font-weight<\/span>:<\/span> <\/span>600<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n<\/span>\n    <\/span>.<\/span>banner-header<\/span> <\/span>p<\/span> <\/span>{<\/span><\/span>\n        <\/span>color<\/span>:<\/span> <\/span>#<\/span>7f8c8d<\/span>;<\/span><\/span>\n        <\/span>font-size<\/span>:<\/span> <\/span>14px<\/span>;<\/span><\/span>\n        <\/span>margin<\/span>:<\/span> <\/span>0<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n<\/span>\n    <\/span>.<\/span>expertsender-banner<\/span> <\/span>{<\/span><\/span>\n        <\/span>display<\/span>:<\/span> grid<\/span>;<\/span><\/span>\n        <\/span>grid-template-columns<\/span>:<\/span> <\/span>repeat<\/span>(<\/span>auto-fit<\/span>,<\/span> <\/span>minmax<\/span>(<\/span>280px<\/span>,<\/span> <\/span>1fr<\/span>));<\/span><\/span>\n        <\/span>gap<\/span>:<\/span> <\/span>0<\/span>;<\/span><\/span>\n        <\/span>width<\/span>:<\/span> <\/span>100%<\/span>;<\/span><\/span>\n        <\/span>max-width<\/span>:<\/span> <\/span>1200px<\/span>;<\/span><\/span>\n        <\/span>margin<\/span>:<\/span> <\/span>0<\/span> auto<\/span>;<\/span><\/span>\n        <\/span>background<\/span>:<\/span> white<\/span>;<\/span><\/span>\n        <\/span>box-sizing<\/span>:<\/span> border-box<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n<\/span>\n    <\/span>.<\/span>banner-title<\/span> <\/span>{<\/span><\/span>\n        <\/span>grid-column<\/span>:<\/span> <\/span>1<\/span> \/ <\/span>-1<\/span>;<\/span><\/span>\n        <\/span>text-align<\/span>:<\/span> center<\/span>;<\/span><\/span>\n        <\/span>font-size<\/span>:<\/span> <\/span>32px<\/span>;<\/span><\/span>\n        <\/span>color<\/span>:<\/span> <\/span>#<\/span>2c3e50<\/span>;<\/span><\/span>\n        <\/span>margin<\/span>:<\/span> <\/span>40px<\/span> <\/span>0<\/span> <\/span>30px<\/span> <\/span>0<\/span>;<\/span><\/span>\n        <\/span>font-weight<\/span>:<\/span> <\/span>300<\/span>;<\/span><\/span>\n        <\/span>letter-spacing<\/span>:<\/span> <\/span>-0.5px<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n<\/span>\n    <\/span>.<\/span>product-card<\/span> <\/span>{<\/span><\/span>\n        <\/span>background<\/span>:<\/span> white<\/span>;<\/span><\/span>\n        <\/span>padding<\/span>:<\/span> <\/span>30px<\/span> <\/span>20px<\/span>;<\/span><\/span>\n        <\/span>text-align<\/span>:<\/span> center<\/span>;<\/span><\/span>\n        <\/span>transition<\/span>:<\/span> all <\/span>0.3s<\/span> ease<\/span>;<\/span><\/span>\n        <\/span>position<\/span>:<\/span> relative<\/span>;<\/span><\/span>\n        <\/span>display<\/span>:<\/span> flex<\/span>;<\/span><\/span>\n        <\/span>flex-direction<\/span>:<\/span> column<\/span>;<\/span><\/span>\n        <\/span>height<\/span>:<\/span> <\/span>520px<\/span>;<\/span><\/span>\n        <\/span>border-right<\/span>:<\/span> <\/span>1px<\/span> solid <\/span>#<\/span>f1f3f4<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n<\/span>\n    <\/span>.<\/span>product-card<\/span>:<\/span>last-child<\/span> <\/span>{<\/span><\/span>\n        <\/span>border-right<\/span>:<\/span> none<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n<\/span>\n    <\/span>.<\/span>product-card<\/span>:<\/span>hover<\/span> <\/span>{<\/span><\/span>\n        <\/span>background<\/span>:<\/span> <\/span>#<\/span>fafbfc<\/span>;<\/span><\/span>\n        <\/span>transform<\/span>:<\/span> <\/span>translateY<\/span>(<\/span>-2px<\/span>);<\/span><\/span>\n    <\/span>}<\/span><\/span>\n<\/span>\n    <\/span>.<\/span>discount-badge<\/span> <\/span>{<\/span><\/span>\n        <\/span>position<\/span>:<\/span> absolute<\/span>;<\/span><\/span>\n        <\/span>top<\/span>:<\/span> <\/span>20px<\/span>;<\/span><\/span>\n        <\/span>right<\/span>:<\/span> <\/span>20px<\/span>;<\/span><\/span>\n        <\/span>background<\/span>:<\/span> <\/span>#<\/span>e74c3c<\/span>;<\/span><\/span>\n        <\/span>color<\/span>:<\/span> white<\/span>;<\/span><\/span>\n        <\/span>padding<\/span>:<\/span> <\/span>6px<\/span> <\/span>12px<\/span>;<\/span><\/span>\n        <\/span>border-radius<\/span>:<\/span> <\/span>20px<\/span>;<\/span><\/span>\n        <\/span>font-size<\/span>:<\/span> <\/span>12px<\/span>;<\/span><\/span>\n        <\/span>font-weight<\/span>:<\/span> <\/span>600<\/span>;<\/span><\/span>\n        <\/span>box-shadow<\/span>:<\/span> <\/span>0<\/span> <\/span>2px<\/span> <\/span>8px<\/span> <\/span>rgba<\/span>(<\/span>231<\/span>,<\/span> <\/span>76<\/span>,<\/span> <\/span>60<\/span>,<\/span> <\/span>0.25<\/span>);<\/span><\/span>\n    <\/span>}<\/span><\/span>\n<\/span>\n    <\/span>.<\/span>product-image<\/span> <\/span>{<\/span><\/span>\n        <\/span>width<\/span>:<\/span> <\/span>220px<\/span>;<\/span><\/span>\n        <\/span>height<\/span>:<\/span> <\/span>220px<\/span>;<\/span><\/span>\n        <\/span>object-fit<\/span>:<\/span> cover<\/span>;<\/span><\/span>\n        <\/span>border-radius<\/span>:<\/span> <\/span>8px<\/span>;<\/span><\/span>\n        <\/span>margin<\/span>:<\/span> <\/span>0<\/span> auto <\/span>20px<\/span> auto<\/span>;<\/span><\/span>\n        <\/span>transition<\/span>:<\/span> transform <\/span>0.3s<\/span> ease<\/span>;<\/span><\/span>\n        <\/span>background<\/span>:<\/span> <\/span>#<\/span>f8f9fa<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n<\/span>\n    <\/span>.<\/span>product-card<\/span>:<\/span>hover<\/span> <\/span>.<\/span>product-image<\/span> <\/span>{<\/span><\/span>\n        <\/span>transform<\/span>:<\/span> <\/span>scale<\/span>(<\/span>1.02<\/span>);<\/span><\/span>\n    <\/span>}<\/span><\/span>\n<\/span>\n    <\/span>.<\/span>product-name<\/span> <\/span>{<\/span><\/span>\n        <\/span>font-size<\/span>:<\/span> <\/span>18px<\/span>;<\/span><\/span>\n        <\/span>font-weight<\/span>:<\/span> <\/span>500<\/span>;<\/span><\/span>\n        <\/span>color<\/span>:<\/span> <\/span>#<\/span>2c3e50<\/span>;<\/span><\/span>\n        <\/span>margin-bottom<\/span>:<\/span> <\/span>15px<\/span>;<\/span><\/span>\n        <\/span>height<\/span>:<\/span> <\/span>50px<\/span>;<\/span><\/span>\n        <\/span>overflow<\/span>:<\/span> hidden<\/span>;<\/span><\/span>\n        <\/span>display<\/span>:<\/span> -webkit-box<\/span>;<\/span><\/span>\n        <\/span>-webkit-line-clamp<\/span>:<\/span> <\/span>2<\/span>;<\/span><\/span>\n        <\/span>-webkit-box-orient<\/span>:<\/span> vertical<\/span>;<\/span><\/span>\n        <\/span>line-height<\/span>:<\/span> <\/span>1.4<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n<\/span>\n    <\/span>.<\/span>price-section<\/span> <\/span>{<\/span><\/span>\n        <\/span>margin-bottom<\/span>:<\/span> <\/span>25px<\/span>;<\/span><\/span>\n        <\/span>flex-grow<\/span>:<\/span> <\/span>1<\/span>;<\/span><\/span>\n        <\/span>display<\/span>:<\/span> flex<\/span>;<\/span><\/span>\n        <\/span>flex-direction<\/span>:<\/span> column<\/span>;<\/span><\/span>\n        <\/span>justify-content<\/span>:<\/span> center<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n<\/span>\n    <\/span>.<\/span>current-price<\/span> <\/span>{<\/span><\/span>\n        <\/span>font-size<\/span>:<\/span> <\/span>24px<\/span>;<\/span><\/span>\n        <\/span>font-weight<\/span>:<\/span> <\/span>600<\/span>;<\/span><\/span>\n        <\/span>color<\/span>:<\/span> <\/span>#<\/span>2c3e50<\/span>;<\/span><\/span>\n        <\/span>margin-bottom<\/span>:<\/span> <\/span>5px<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n<\/span>\n    <\/span>.<\/span>sale-price<\/span> <\/span>{<\/span><\/span>\n        <\/span>font-size<\/span>:<\/span> <\/span>24px<\/span>;<\/span><\/span>\n        <\/span>font-weight<\/span>:<\/span> <\/span>600<\/span>;<\/span><\/span>\n        <\/span>color<\/span>:<\/span> <\/span>#<\/span>e74c3c<\/span>;<\/span><\/span>\n        <\/span>margin-bottom<\/span>:<\/span> <\/span>5px<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n<\/span>\n    <\/span>.<\/span>original-price<\/span> <\/span>{<\/span><\/span>\n        <\/span>font-size<\/span>:<\/span> <\/span>16px<\/span>;<\/span><\/span>\n        <\/span>text-decoration<\/span>:<\/span> line-through<\/span>;<\/span><\/span>\n        <\/span>color<\/span>:<\/span> <\/span>#<\/span>95a5a6<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n<\/span>\n    <\/span>.<\/span>buy-button<\/span> <\/span>{<\/span><\/span>\n        <\/span>background<\/span>:<\/span> <\/span>#<\/span>2c3e50<\/span>;<\/span><\/span>\n        <\/span>color<\/span>:<\/span> white<\/span>;<\/span><\/span>\n        <\/span>padding<\/span>:<\/span> <\/span>12px<\/span> <\/span>32px<\/span>;<\/span><\/span>\n        <\/span>border<\/span>:<\/span> none<\/span>;<\/span><\/span>\n        <\/span>border-radius<\/span>:<\/span> <\/span>4px<\/span>;<\/span><\/span>\n        <\/span>text-decoration<\/span>:<\/span> none<\/span>;<\/span><\/span>\n        <\/span>display<\/span>:<\/span> inline-block<\/span>;<\/span><\/span>\n        <\/span>font-size<\/span>:<\/span> <\/span>14px<\/span>;<\/span><\/span>\n        <\/span>font-weight<\/span>:<\/span> <\/span>500<\/span>;<\/span><\/span>\n        <\/span>transition<\/span>:<\/span> all <\/span>0.3s<\/span> ease<\/span>;<\/span><\/span>\n        <\/span>text-transform<\/span>:<\/span> uppercase<\/span>;<\/span><\/span>\n        <\/span>letter-spacing<\/span>:<\/span> <\/span>1px<\/span>;<\/span><\/span>\n        <\/span>margin-top<\/span>:<\/span> auto<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n<\/span>\n    <\/span>.<\/span>buy-button<\/span>:<\/span>hover<\/span> <\/span>{<\/span><\/span>\n        <\/span>background<\/span>:<\/span> <\/span>#<\/span>34495e<\/span>;<\/span><\/span>\n        <\/span>transform<\/span>:<\/span> <\/span>translateY<\/span>(<\/span>-1px<\/span>);<\/span><\/span>\n        <\/span>box-shadow<\/span>:<\/span> <\/span>0<\/span> <\/span>4px<\/span> <\/span>12px<\/span> <\/span>rgba<\/span>(<\/span>44<\/span>,<\/span> <\/span>62<\/span>,<\/span> <\/span>80<\/span>,<\/span> <\/span>0.25<\/span>);<\/span><\/span>\n    <\/span>}<\/span><\/span>\n<\/span>\n    <\/span>@media<\/span> <\/span>(<\/span>max-width<\/span>:<\/span> <\/span>768px<\/span>)<\/span> <\/span>{<\/span><\/span>\n        <\/span>.<\/span>product-card<\/span> <\/span>{<\/span><\/span>\n            <\/span>border-right<\/span>:<\/span> none<\/span>;<\/span><\/span>\n            <\/span>border-bottom<\/span>:<\/span> <\/span>1px<\/span> solid <\/span>#<\/span>f1f3f4<\/span>;<\/span><\/span>\n            <\/span>height<\/span>:<\/span> auto<\/span>;<\/span><\/span>\n            <\/span>min-height<\/span>:<\/span> <\/span>420px<\/span>;<\/span><\/span>\n        <\/span>}<\/span><\/span>\n<\/span>\n        <\/span>.<\/span>product-card<\/span>:<\/span>last-child<\/span> <\/span>{<\/span><\/span>\n            <\/span>border-bottom<\/span>:<\/span> none<\/span>;<\/span><\/span>\n        <\/span>}<\/span><\/span>\n<\/span>\n        <\/span>.<\/span>banner-title<\/span> <\/span>{<\/span><\/span>\n            <\/span>font-size<\/span>:<\/span> <\/span>28px<\/span>;<\/span><\/span>\n            <\/span>margin<\/span>:<\/span> <\/span>30px<\/span> <\/span>0<\/span> <\/span>20px<\/span> <\/span>0<\/span>;<\/span><\/span>\n        <\/span>}<\/span><\/span>\n    <\/span>}<\/span><\/span>\n<\/span>\n    <\/span>@media<\/span> <\/span>(<\/span>max-width<\/span>:<\/span> <\/span>480px<\/span>)<\/span> <\/span>{<\/span><\/span>\n        <\/span>.<\/span>expertsender-banner<\/span> <\/span>{<\/span><\/span>\n            <\/span>grid-template-columns<\/span>:<\/span> <\/span>1fr<\/span>;<\/span><\/span>\n        <\/span>}<\/span><\/span>\n<\/span>\n        <\/span>.<\/span>product-image<\/span> <\/span>{<\/span><\/span>\n            <\/span>width<\/span>:<\/span> <\/span>200px<\/span>;<\/span><\/span>\n            <\/span>height<\/span>:<\/span> <\/span>200px<\/span>;<\/span><\/span>\n        <\/span>}<\/span><\/span>\n    <\/span>}<\/span><\/span>\n<\/<\/span>style<\/span>><\/span><\/span>\n<\/span>\n@{<\/span><\/span>\n    var recommendations = Model.GetRecommendations(4);<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n<<\/span>div<\/span> <\/span>class<\/span>=<\/span>"<\/span>expertsender-banner<\/span>"<\/span>><\/span><\/span>\n    <\/span><<\/span>h3<\/span> <\/span>class<\/span>=<\/span>"<\/span>banner-title<\/span>"<\/span>><\/span>Polecane produkty<\/span><\/<\/span>h3<\/span>><\/span><\/span>\n    @foreach (var product in recommendations.Products)<\/span><\/span>\n    {<\/span><\/span>\n        <\/span><<\/span>div<\/span> <\/span>class<\/span>=<\/span>"<\/span>product-card<\/span>"<\/span>><\/span><\/span>\n            @if (decimal.TryParse(product?.PriceString, out decimal regularPrice) &&<\/span><\/span>\n                 decimal.TryParse(product?.CurrentPriceString, out decimal salePrice) &&<\/span><\/span>\n                 regularPrice > 0 && salePrice > 0)<\/span><\/span>\n            {<\/span><\/span>\n                <\/span><<\/span>div<\/span> <\/span>class<\/span>=<\/span>"<\/span>discount-badge<\/span>"<\/span>><\/span>@Math.Round(((regularPrice - salePrice) \/ regularPrice) * 100, 0)% TANIEJ<\/span><\/<\/span>div<\/span>><\/span><\/span>\n            }<\/span><\/span>\n<\/span>\n            <\/span><<\/span>img<\/span> <\/span>src<\/span>=<\/span>"<\/span>@product?.ImageUrl<\/span>"<\/span> <\/span>alt<\/span>=<\/span>"<\/span>@product?.Name<\/span>"<\/span> <\/span>class<\/span>=<\/span>"<\/span>product-image<\/span>"<\/span>><\/span><\/span>\n            <\/span><<\/span>div<\/span> <\/span>class<\/span>=<\/span>"<\/span>product-name<\/span>"<\/span>><\/span>@product?.Name<\/span><\/<\/span>div<\/span>><\/span><\/span>\n<\/span>\n            <\/span><<\/span>div<\/span> <\/span>class<\/span>=<\/span>"<\/span>price-section<\/span>"<\/span>><\/span><\/span>\n                @if (!string.IsNullOrWhiteSpace(product?.CurrentPriceString))<\/span><\/span>\n                {<\/span><\/span>\n                    <\/span><<\/span>div<\/span> <\/span>class<\/span>=<\/span>"<\/span>sale-price<\/span>"<\/span>><\/span>@product?.CurrentPriceString @recommendations.Currency.Sign<\/span><\/<\/span>div<\/span>><\/span><\/span>\n                    <\/span><<\/span>div<\/span> <\/span>class<\/span>=<\/span>"<\/span>original-price<\/span>"<\/span>><\/span>@product?.PriceString @recommendations.Currency.Sign<\/span><\/<\/span>div<\/span>><\/span><\/span>\n                }<\/span><\/span>\n                else<\/span><\/span>\n                {<\/span><\/span>\n                    <\/span><<\/span>div<\/span> <\/span>class<\/span>=<\/span>"<\/span>current-price<\/span>"<\/span>><\/span>@product?.PriceString @recommendations.Currency.Sign<\/span><\/<\/span>div<\/span>><\/span><\/span>\n                }<\/span><\/span>\n            <\/span><\/<\/span>div<\/span>><\/span><\/span>\n<\/span>\n            <\/span><<\/span>a<\/span> <\/span>href<\/span>=<\/span>"<\/span>@product?.Url<\/span>"<\/span> <\/span>class<\/span>=<\/span>"<\/span>buy-button<\/span>"<\/span>><\/span>Kup teraz<\/span><\/<\/span>a<\/span>><\/span><\/span>\n        <\/span><\/<\/span>div<\/span>><\/span><\/span>\n    }<\/span><\/span>\n<\/<\/span>div<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
      Podgl\u0105d banneru:<\/p>\n\n\n\n