{"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":"2025-12-08T11:49:26","modified_gmt":"2025-12-08T10:49:26","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 umo\u017cliwia tworzenie dynamicznych baner\u00f3w z rekomendacjami produkt\u00f3w przy u\u017cyciu kombinacji HTML, CSS, JavaScript i sk\u0142adni Razor. Z jego pomoc\u0105 wy\u015bwietlisz spersonalizowane rekomendacje produkt\u00f3w bezpo\u015brednio na swojej stronie lub w kampaniach e-mail.<\/p>\n\n\n\n

\n
\n
\n <\/svg> <\/div>\n
\n
\n Funkcja “Podgl\u0105d na \u017cywo” w bannerach <\/div>\n
\n

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

Nazwy produkt\u00f3w w rekomendacjach zostan\u0105 wy\u015bwietlone jako \u2019@products[0]?.Name<\/em>\u2019, poniewa\u017c obs\u0142uguj\u0105cy je kod nie jest przetwarzany bezpo\u015brednio w edytorze .<\/p>\n

<\/p>\n

Je\u015bli chcesz przetestowa\u0107 banner zawieraj\u0105cy rzeczywiste dane produkt\u00f3w, skorzystaj z opcji Podgl\u0105d na \u017cywo 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 pozwala na u\u017cycie nast\u0119puj\u0105cych technologii:<\/p>\n\n\n\n

    \n
  • HTML5 <\/strong>\u2013 u\u017cyj do nadania struktury bannerowi.<\/li>\n\n\n\n
  • CSS3<\/strong> \u2013 u\u017cyj do nadania indywidualnego wygl\u0105du i responsywno\u015bci.<\/li>\n\n\n\n
  • JavaScript <\/strong>\u2013 pozwoli doda\u0107 elementy interaktywne i dynamiczne.<\/li>\n\n\n\n
  • Sk\u0142adnia Razor <\/strong>\u2013 obs\u0142uguje logik\u0119 rekomendacji po stronie serwera, pozwala na wi\u0105zanie 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

    U\u017cyj nast\u0119puj\u0105cego wyra\u017cenia w bloku kodu HTML, kt\u00f3ry ma wy\u015bwietli\u0107 rekomendacje:<\/p>\n\n\n\n

    <\/path><\/path><\/svg><\/span>
    @{<\/span><\/span>\nExpertSender<\/span>.<\/span>Cdp<\/span>.<\/span>Common<\/span>.<\/span>Interfaces<\/span>.<\/span>DynamicContent<\/span>.<\/span>IProduct<\/span>[]<\/span> products <\/span>=<\/span> Model<\/span>.<\/span>GetRecommendedProducts<\/span>(<\/span>4<\/span>)<\/span>.<\/span>ToArray<\/span>();<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    Ten kod pobiera maksymalnie 4 polecane produkty i zapisuje je w tablicy. Liczb\u0119 t\u0119 mo\u017cesz dostosowa\u0107 do wymaga\u0144 projektu banera.<\/p>\n\n\n\n
    <\/div>\n\n\n\n
    Dost\u0119pne zmienne produkt\u00f3w<\/h2>\n\n\n\n
    W tablicy poni\u017cej znajdziesz zmienne dla ka\u017cdej cechy produktu:<\/p>\n\n\n\n
    Zmienna<\/strong><\/td>Typ<\/strong><\/td>Opis<\/strong><\/td>Jak stosowa\u0107?<\/strong><\/td><\/tr>
    Id<\/td>string<\/td>Unikalny identyfikator produktu<\/td>products[0].Id<\/td><\/tr>
    Name<\/td>string<\/td>Nazwa \/ tytu\u0142 produktu<\/td>products[0]?.Name<\/td><\/tr>
    ImageUrl<\/td>string<\/td>Adres URL obrazka przedstawiaj\u0105cego produkt<\/td>products[0]?.ImageUrl<\/td><\/tr>
    Url<\/td>string<\/td>Adres URL strony produktu<\/td>products[0]?.Url<\/td><\/tr>
    PriceS<\/td>string<\/td>Cena regularna w formacie string<\/em><\/td>products[0]?.PriceS<\/td><\/tr>
    SalePrice<\/td>string<\/td>Cena po obni\u017cce w formacie string<\/td>products[0]?.SalePriceS<\/td><\/tr>
    OmnibusPriceS<\/td>string<\/td>Necna Omnibus (wymagana przez UE)<\/td>products[0]?.OmnibusPriceS<\/td><\/tr>
    CurrencySymbol<\/td>string<\/td>Symbol waluty (\u20ac, $, \u00a3, etc.)<\/td>products[0]?.CurrencySymbol<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    <\/div>\n\n\n\n
    Przyk\u0142ady u\u017cycia<\/h2>\n\n\n\n
    Sprawd\u017a, czy produkt istnieje i wy\u015bwietl cen\u0119 po obni\u017cce<\/h3>\n\n\n\n
    <\/path><\/path><\/svg><\/span>
    @if<\/span> <\/span>(<\/span>products<\/span>[<\/span>0<\/span>]<\/span> <\/span>!=<\/span> <\/span>null)<\/span><\/span>\n{<\/span><\/span>\n    Produkt wy\u015bwietli si\u0119 w tym miejscu<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    <\/div>\n\n\n\n
    Sprawd\u017a, czy cena po obni\u017cce mo\u017ce by\u0107 wy\u015bwietlona<\/h3>\n\n\n\n
    Aby wy\u015bwietli\u0107 produkty z obni\u017con\u0105 cen\u0105, sprawd\u017a, czy zar\u00f3wno cena regularna, jak i obni\u017cona s\u0105 dost\u0119pne dla danego produktu.<\/p>\n\n\n\n
    <\/path><\/path><\/svg><\/span>
    @if<\/span> <\/span>(!<\/span>string<\/span>.<\/span>IsNullOrWhiteSpace<\/span>(<\/span>products<\/span>[<\/span>0<\/span>]?.<\/span>SalePriceS<\/span>))<\/span><\/span>\n{<\/span><\/span>\n    <\/span>@<\/span>products<\/span>[<\/span>0<\/span>]<\/span>?.SalePriceS <\/span>@<\/span>products<\/span>[<\/span>0<\/span>]<\/span>?.CurrencySymbol<\/span><\/span>\n}<\/span><\/span>\nelse<\/span><\/span>\n{<\/span><\/span>\n    <\/span>@<\/span>products<\/span>[<\/span>0<\/span>]<\/span>?.PriceS <\/span>@<\/span>products<\/span>[<\/span>0<\/span>]<\/span>?.CurrencySymbol<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    <\/div>\n\n\n\n
    Wy\u015bwietl cen\u0119 Omnibus, je\u015bli jest dost\u0119pna<\/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>products<\/span>[<\/span>0<\/span>]?.<\/span>OmnibusPriceS<\/span>))<\/span><\/span>\n{<\/span><\/span>\n   Najni\u017csza cena z <\/span>30<\/span> <\/span>dni<\/span>:<\/span> <\/span>@<\/span>products<\/span>[<\/span>0<\/span>]<\/span>?.OmnibusPriceS <\/span>@<\/span>products<\/span>[<\/span>0<\/span>]<\/span>?.CurrencySymbol<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    <\/div>\n\n\n\n
    Oblicz i wy\u015bwietl obni\u017ck\u0119 procentow\u0105<\/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>rec2<\/span>[<\/span>0<\/span>]?.<\/span>SalePriceS<\/span>))<\/span><\/span>\n{<\/span><\/span>\n    <\/span>@<\/span>rec2<\/span>[<\/span>0<\/span>]<\/span>?.SalePriceS <\/span>@<\/span>rec2<\/span>[<\/span>0<\/span>]<\/span>?.CurrencySymbol<\/span><\/span>\n    <\/span>@<\/span>rec2<\/span>[<\/span>0<\/span>]<\/span>?.PriceS <\/span>@<\/span>rec2<\/span>[<\/span>0<\/span>]<\/span>?.CurrencySymbol<\/span><\/span>\n<\/span>\n    <\/span>@if<\/span> <\/span>(!<\/span>string<\/span>.<\/span>IsNullOrWhiteSpace<\/span>(<\/span>rec2<\/span>[<\/span>0<\/span>]?.<\/span>OmnibusPriceS<\/span>))<\/span><\/span>\n    <\/span>{<\/span><\/span>\n        <\/span>@<\/span>rec2<\/span>[<\/span>0<\/span>]<\/span>?.OmnibusPriceS <\/span>@<\/span>rec2<\/span>[<\/span>0<\/span>]<\/span>?.CurrencySymbol<\/span><\/span>\n    <\/span>}<\/span><\/span>\n}<\/span><\/span>\nelse<\/span><\/span>\n{<\/span><\/span>\n    <\/span>@<\/span>rec2<\/span>[<\/span>0<\/span>]<\/span>?.PriceS <\/span>@<\/span>rec2<\/span>[<\/span>0<\/span>]<\/span>?.CurrencySymbol<\/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
    Oto jak przej\u015b\u0107 przez wszystkie pobrane produkty i wy\u015bwietli\u0107 ich w\u0142a\u015bciwo\u015bci:<\/p>\n\n\n\n
    <\/path><\/path><\/svg><\/span>
    @{<\/span>    <\/span>ExpertSender<\/span>.<\/span>Cdp<\/span>.<\/span>Common<\/span>.<\/span>Interfaces<\/span>.<\/span>DynamicContent<\/span>.<\/span>IProduct<\/span>[]<\/span> <\/span>products<\/span> <\/span>=<\/span> Model<\/span>.<\/span>GetRecommendedProducts<\/span>(<\/span>4<\/span>).<\/span>ToArray<\/span>();<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n@for<\/span> <\/span>(int<\/span> <\/span>i<\/span> <\/span>=<\/span> <\/span>0<\/span>;<\/span> i <\/span><<\/span> products<\/span>.<\/span>Length<\/span>;<\/span> i<\/span>++)<\/span><\/span>\n{<\/span><\/span>\n    <\/span>if<\/span> <\/span>(<\/span>products<\/span>[<\/span>i<\/span>]<\/span> <\/span>!=<\/span> <\/span>null)<\/span><\/span>\n    <\/span>{<\/span><\/span>\n        <\/span>@<\/span>products<\/span>[<\/span>i<\/span>]<\/span>.Id<\/span><\/span>\n        <\/span>@<\/span>products<\/span>[<\/span>i<\/span>]<\/span>.Name<\/span><\/span>\n        <\/span>@<\/span>products<\/span>[<\/span>i<\/span>]<\/span>.ImageUrl<\/span><\/span>\n        <\/span>@<\/span>products<\/span>[<\/span>i<\/span>]<\/span>.Url<\/span><\/span>\n        <\/span>@<\/span>products<\/span>[<\/span>i<\/span>]<\/span>.PriceS<\/span><\/span>\n        <\/span>@<\/span>products<\/span>[<\/span>i<\/span>]<\/span>.SalePriceS<\/span><\/span>\n        <\/span>@<\/span>products<\/span>[<\/span>i<\/span>]<\/span>.OmnibusPriceS<\/span><\/span>\n        <\/span>@<\/span>products<\/span>[<\/span>i<\/span>]<\/span>.CurrencySymbol<\/span><\/span>\n    <\/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        .banner-header {<\/span><\/span>\n            text-align: center;<\/span><\/span>\n            padding: 20px;<\/span><\/span>\n            background: white;<\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        .banner-header h1 {<\/span><\/span>\n            color: #2c3e50;<\/span><\/span>\n            font-size: 24px;<\/span><\/span>\n            margin-bottom: 5px;<\/span><\/span>\n            font-weight: 600;<\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        .banner-header p {<\/span><\/span>\n            color: #7f8c8d;<\/span><\/span>\n            font-size: 14px;<\/span><\/span>\n            margin: 0;<\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        .expertsender-banner {<\/span><\/span>\n            display: grid;<\/span><\/span>\n            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));<\/span><\/span>\n            gap: 0;<\/span><\/span>\n            width: 100%;<\/span><\/span>\n            max-width: 1200px;<\/span><\/span>\n            margin: 0 auto;<\/span><\/span>\n            background: white;<\/span><\/span>\n            box-sizing: border-box;<\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        .banner-title {<\/span><\/span>\n            grid-column: 1 \/ -1;<\/span><\/span>\n            text-align: center;<\/span><\/span>\n            font-size: 32px;<\/span><\/span>\n            color: #2c3e50;<\/span><\/span>\n            margin: 40px 0 30px 0;<\/span><\/span>\n            font-weight: 300;<\/span><\/span>\n            letter-spacing: -0.5px;<\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        .product-card {<\/span><\/span>\n            background: white;<\/span><\/span>\n            padding: 30px 20px;<\/span><\/span>\n            text-align: center;<\/span><\/span>\n            transition: all 0.3s ease;<\/span><\/span>\n            position: relative;<\/span><\/span>\n            display: flex;<\/span><\/span>\n            flex-direction: column;<\/span><\/span>\n            height: 520px;<\/span><\/span>\n            border-right: 1px solid #f1f3f4;<\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        .product-card:last-child {<\/span><\/span>\n            border-right: none;<\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        .product-card:hover {<\/span><\/span>\n            background: #fafbfc;<\/span><\/span>\n            transform: translateY(-2px);<\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        .discount-badge {<\/span><\/span>\n            position: absolute;<\/span><\/span>\n            top: 20px;<\/span><\/span>\n            right: 20px;<\/span><\/span>\n            background: #e74c3c;<\/span><\/span>\n            color: white;<\/span><\/span>\n            padding: 6px 12px;<\/span><\/span>\n            border-radius: 20px;<\/span><\/span>\n            font-size: 12px;<\/span><\/span>\n            font-weight: 600;<\/span><\/span>\n            box-shadow: 0 2px 8px rgba(231, 76, 60, 0.25);<\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        .product-image {<\/span><\/span>\n            width: 220px;<\/span><\/span>\n            height: 220px;<\/span><\/span>\n            object-fit: cover;<\/span><\/span>\n            border-radius: 8px;<\/span><\/span>\n            margin: 0 auto 20px auto;<\/span><\/span>\n            transition: transform 0.3s ease;<\/span><\/span>\n            background: #f8f9fa;<\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        .product-card:hover .product-image {<\/span><\/span>\n            transform: scale(1.02);<\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        .product-name {<\/span><\/span>\n            font-size: 18px;<\/span><\/span>\n            font-weight: 500;<\/span><\/span>\n            color: #2c3e50;<\/span><\/span>\n            margin-bottom: 15px;<\/span><\/span>\n            height: 50px;<\/span><\/span>\n            overflow: hidden;<\/span><\/span>\n            display: -webkit-box;<\/span><\/span>\n            -webkit-line-clamp: 2;<\/span><\/span>\n            -webkit-box-orient: vertical;<\/span><\/span>\n            line-height: 1.4;<\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        .price-section {<\/span><\/span>\n            margin-bottom: 25px;<\/span><\/span>\n            flex-grow: 1;<\/span><\/span>\n            display: flex;<\/span><\/span>\n            flex-direction: column;<\/span><\/span>\n            justify-content: center;<\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        .current-price {<\/span><\/span>\n            font-size: 24px;<\/span><\/span>\n            font-weight: 600;<\/span><\/span>\n            color: #2c3e50;<\/span><\/span>\n            margin-bottom: 5px;<\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        .sale-price {<\/span><\/span>\n            font-size: 24px;<\/span><\/span>\n            font-weight: 600;<\/span><\/span>\n            color: #e74c3c;<\/span><\/span>\n            margin-bottom: 5px;<\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        .original-price {<\/span><\/span>\n            font-size: 16px;<\/span><\/span>\n            text-decoration: line-through;<\/span><\/span>\n            color: #95a5a6;<\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        .buy-button {<\/span><\/span>\n            background: #2c3e50;<\/span><\/span>\n            color: white;<\/span><\/span>\n            padding: 12px 32px;<\/span><\/span>\n            border: none;<\/span><\/span>\n            border-radius: 4px;<\/span><\/span>\n            text-decoration: none;<\/span><\/span>\n            display: inline-block;<\/span><\/span>\n            font-size: 14px;<\/span><\/span>\n            font-weight: 500;<\/span><\/span>\n            transition: all 0.3s ease;<\/span><\/span>\n            text-transform: uppercase;<\/span><\/span>\n            letter-spacing: 1px;<\/span><\/span>\n            margin-top: auto;<\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        .buy-button:hover {<\/span><\/span>\n            background: #34495e;<\/span><\/span>\n            transform: translateY(-1px);<\/span><\/span>\n            box-shadow: 0 4px 12px rgba(44, 62, 80, 0.25);<\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        .code-section {<\/span><\/span>\n            margin-top: 40px;<\/span><\/span>\n            background: white;<\/span><\/span>\n            padding: 30px;<\/span><\/span>\n            margin-left: 20px;<\/span><\/span>\n            margin-right: 20px;<\/span><\/span>\n            border-radius: 8px;<\/span><\/span>\n            border: 1px solid #e9ecef;<\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        .code-section h3 {<\/span><\/span>\n            color: #2c3e50;<\/span><\/span>\n            margin-bottom: 20px;<\/span><\/span>\n            font-size: 18px;<\/span><\/span>\n            font-weight: 500;<\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        .code-block {<\/span><\/span>\n            background: #f8f9fa;<\/span><\/span>\n            color: #2c3e50;<\/span><\/span>\n            padding: 20px;<\/span><\/span>\n            border-radius: 6px;<\/span><\/span>\n            overflow-x: auto;<\/span><\/span>\n            font-family: 'Courier New', monospace;<\/span><\/span>\n            font-size: 13px;<\/span><\/span>\n            line-height: 1.6;<\/span><\/span>\n            border: 1px solid #e9ecef;<\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        @media (max-width: 768px) {<\/span><\/span>\n            .product-card {<\/span><\/span>\n                border-right: none;<\/span><\/span>\n                border-bottom: 1px solid #f1f3f4;<\/span><\/span>\n                height: auto;<\/span><\/span>\n                min-height: 420px;<\/span><\/span>\n            }<\/span><\/span>\n            <\/span><\/span>\n            .product-card:last-child {<\/span><\/span>\n                border-bottom: none;<\/span><\/span>\n            }<\/span><\/span>\n            <\/span><\/span>\n            .banner-title {<\/span><\/span>\n                font-size: 28px;<\/span><\/span>\n                margin: 30px 0 20px 0;<\/span><\/span>\n            }<\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        @media (max-width: 480px) {<\/span><\/span>\n            .expertsender-banner {<\/span><\/span>\n                grid-template-columns: 1fr;<\/span><\/span>\n            }<\/span><\/span>\n            <\/span><\/span>\n            .product-image {<\/span><\/span>\n                width: 200px;<\/span><\/span>\n                height: 200px;<\/span><\/span>\n            }<\/span><\/span>\n        }<\/span><\/span>\n<\/<\/span>style<\/span>><\/span><\/span>\n<\/span>\n@{<\/span><\/span>\n    <\/span>ExpertSender<\/span>.<\/span>Cdp<\/span>.<\/span>Common<\/span>.<\/span>Interfaces<\/span>.<\/span>DynamicContent<\/span>.<\/span>IProduct<\/span>[]<\/span> <\/span>products<\/span> <\/span>=<\/span> Model<\/span>.<\/span>GetRecommendedProducts<\/span>(<\/span>4<\/span>).<\/span>ToArray<\/span>();<\/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>Featured Products<\/span><\/<\/span>h3<\/span>><\/span><\/span>\n    <\/span>@foreach<\/span> <\/span>(<\/span>var<\/span> <\/span>product<\/span> <\/span>in<\/span> products<\/span>)<\/span><\/span>\n    <\/span>{<\/span><\/span>\n        <\/span><<\/span>div<\/span> <\/span>class<\/span>=<\/span>"<\/span>product-card<\/span>"<\/span>><\/span><\/span>\n            <\/span>@if<\/span> <\/span>(decimal.<\/span>TryParse<\/span>(<\/span>product<\/span>?.<\/span>PriceS<\/span>,<\/span> <\/span>out<\/span> <\/span>decimal<\/span> <\/span>regularPrice<\/span>)<\/span> <\/span>&&<\/span> <\/span><\/span>\n                 <\/span>decimal.<\/span>TryParse<\/span>(<\/span>product<\/span>?.<\/span>SalePriceS<\/span>,<\/span> <\/span>out<\/span> <\/span>decimal<\/span> <\/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                <\/span><<\/span>div<\/span> <\/span>class<\/span>=<\/span>"<\/span>discount-badge<\/span>"<\/span>><\/span>@<\/span>Math.<\/span>Round<\/span>(((<\/span>regularPrice <\/span>-<\/span> salePrice<\/span>)<\/span> <\/span>\/<\/span> regularPrice<\/span>)<\/span> <\/span>*<\/span> <\/span>100<\/span>, <\/span>0<\/span>)<\/span>% OFF<\/span><\/<\/span>div<\/span>><\/span><\/span>\n            <\/span>}<\/span><\/span>\n            <\/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>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>@<\/span>product?.Name<\/span><\/<\/span>div<\/span>><\/span><\/span>\n            <\/span><\/span>\n            <\/span><<\/span>div<\/span> <\/span>class<\/span>=<\/span>"<\/span>price-section<\/span>"<\/span>><\/span><\/span>\n                <\/span>@if<\/span> <\/span>(!<\/span>string<\/span>.<\/span>IsNullOrWhiteSpace<\/span>(<\/span>product<\/span>?.<\/span>SalePriceS<\/span>))<\/span><\/span>\n                <\/span>{<\/span><\/span>\n                    <\/span><<\/span>div<\/span> <\/span>class<\/span>=<\/span>"<\/span>sale-price<\/span>"<\/span>><\/span>@<\/span>product?.SalePriceS <\/span>@<\/span>product?.CurrencySymbol<\/span><\/<\/span>div<\/span>><\/span><\/span>\n                    <\/span><<\/span>div<\/span> <\/span>class<\/span>=<\/span>"<\/span>original-price<\/span>"<\/span>><\/span>@<\/span>product?.PriceS <\/span>@<\/span>product?.CurrencySymbol<\/span><\/<\/span>div<\/span>><\/span><\/span>\n                <\/span>}<\/span><\/span>\n                <\/span>else<\/span><\/span>\n                <\/span>{<\/span><\/span>\n                    <\/span><<\/span>div<\/span> <\/span>class<\/span>=<\/span>"<\/span>current-price<\/span>"<\/span>><\/span>@<\/span>product?.PriceS <\/span>@<\/span>product?.CurrencySymbol<\/span><\/<\/span>div<\/span>><\/span><\/span>\n                <\/span>}<\/span><\/span>\n            <\/span><\/<\/span>div<\/span>><\/span><\/span>\n            <\/span><\/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>Shop Now<\/span><\/<\/span>a<\/span>><\/span><\/span>\n        <\/span><\/<\/span>div<\/span>><\/span><\/span>\n    <\/span>}<\/span><\/span>\n<\/<\/span>div<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    Podgl\u0105d banneru:<\/p>\n\n\n\n