Obsługa towaru archiwalnego

W tym artykule dowiesz się jak obsłużyć towar archiwalny na stronie ze szczegółami towaru w swoim szablonie.

Szafir

W pliku product/product-presentation-data.html wyszukaj frazę header. Jest to element, w którym trzeba dodać warunek, aby ostatecznie wyglądało to tak:


{% if product.Archival == false -%} . . . {% endif -%}

{% if product.Archival == false -%} . . . {% endif -%}

Następnie wyszukaj frazę add-to-cart-container-ui. Jest to kontener, w którym na samym początku wyświetlane są punkty lojalnościowe i flagi. Trzeba je uwarunkować, żeby nie pojawiały się przy towarze archiwalnym. Zamiast nich powinna się pojawić informacja o tym, że jest to towar archiwalny. Początek tego kontenera powinien wyglądać następująco:


{% if product.Archival -%}
<div class="archival-product-info-ui">{{ translations.ArchivalProductInfo }}</div>
{% else -%} {% if activeProduct.Points != null and usr.Authenticated -%} {% capture quantityUnit -%}1 {{ product.SaleUnit }}{% endcapture -%}
<div class="earn-loyalty-points-ui"><i class="ti-cup"></i> {{ translations.EarnLoyaltyPoints | Format:quantityUnit }}: <strong>{{ activeProduct.Points }} {{ translations.PointsShortcut }}</strong></div>
{% endif -%}
<ul class="flags-ui">
 	<li style="list-style-type: none;">
<ul class="flags-ui">{% assign flagsQuantity = product.Flags | Size -%} {% for flag in product.Flags limit: 3 -%}
 	<li class="ribbon-ui {{ flag.Type }}-ui {% if flagsQuantity == 3 -%} three-flags-ui {% elseif flagsQuantity == 2 -%} two-flags-ui {% endif -%}">{% if flag.Type == "Reward" -%} {{ translations.PointsProduct }}{% if usr.Authenticated and activeProduct.PointsPrice != null -%}: {{ activeProduct.PointsPrice }} {{ translations.PointsShortcut }}/{{ product.SaleUnit }}{% endif -%} {% else -%} {{ flag.Text }} {% endif -%}</li>
</ul>
</li>
</ul>
{% endfor -%}

{% endif -%}
<div class="add-to-cart-border-container-ui {% if customer.HidePrices -%} sign-in-to-see-prices-container-ui {% endif -%}">. . .</div>

{% if product.Archival -%}

<div class="archival-product-info-ui">{{ translations.ArchivalProductInfo }}</div>

{% else -%} {% if activeProduct.Points != null and usr.Authenticated -%} {% capture quantityUnit -%}1 {{ product.SaleUnit }}{% endcapture -%}

<div class="earn-loyalty-points-ui"><i class="ti-cup"></i> {{ translations.EarnLoyaltyPoints | Format:quantityUnit }}: <strong>{{ activeProduct.Points }} {{ translations.PointsShortcut }}</strong></div>

{% endif -%}

<ul class="flags-ui">{% assign flagsQuantity = product.Flags | Size -%} {% for flag in product.Flags limit: 3 -%}

<li class="ribbon-ui {{ flag.Type }}-ui {% if flagsQuantity == 3 -%} three-flags-ui {% elseif flagsQuantity == 2 -%} two-flags-ui {% endif -%}">{% if flag.Type == "Reward" -%} {{ translations.PointsProduct }}{% if usr.Authenticated and activeProduct.PointsPrice != null -%}: {{ activeProduct.PointsPrice }} {{ translations.PointsShortcut }}/{{ product.SaleUnit }}{% endif -%} {% else -%} {{ flag.Text }} {% endif -%}</li>

</ul>

</li>

</ul>

{% endfor -%}

{% endif -%}

Parę linijek niżej znajdują się etykiety {{ translations.ChooseProductVariant }} i {{ translations.Availability }}: {{ activeProduct.Availability.Text }}. Trzeba zmodyfikować ich warunki tak, aby nie wyświetlały się w przypadku towaru archiwalnego. Powinno to wyglądać w ten sposób:


{% if tableView and product.Archival == false -%}
    <span class="choose-variant-ui no-on-mobile-ui">{{ translations.ChooseProductVariant }}</span>
{% endif -%}
{% if activeProduct.Availability.Text != '' and product.Archival == false -%}
<div class="availability-ui">{{ translations.Availability }}: {{ activeProduct.Availability.Text }}</div>
{% endif -%}

{% if tableView and product.Archival == false -%}

<span class="choose-variant-ui no-on-mobile-ui">{{ translations.ChooseProductVariant }}</span>

{% endif -%}

{% if activeProduct.Availability.Text != '' and product.Archival == false -%}

<div class="availability-ui">{{ translations.Availability }}: {{ activeProduct.Availability.Text }}</div>

{% endif -%}

W podobny sposób należy ukryć całą resztę dotyczącą różnych danych o towarze. Aby to zrobić należy wyszukać taki warunek {% if activeProduct.StockLevel.Control and tableView == false -%} i linijkę wyżej dopisać {% if product.Archival == false -%}. Natomiast zamknięcie tego warunku trzeba będzie dopisać dużo dalej. Aby znaleźć odpowiednie miejsce należy wyszukać taką frazę CheaperInSet. Jest to etykieta przycisku przewijającego do sekcji z zestawami (o ile takowe istnieją dla danego towaru). Pod tym przyciskiem znajduje się {% endif -%}, który zamyka warunek sprawdzający właśnie istnienie owych zestawów. Pod nim trzeba dopisać jeszcze jedno {% endif -%}, aby zamknąć warunek, który dodaliśmy wyżej. Ostatecznie powinno to wyglądać tak:


{% if product.Archival == false -%}
    {% if activeProduct.StockLevel.Control and tableView == false -%}
        .
        .
        .
    {% if product.Sets != null and product.Sets != empty -%}
<div class="cheaper-in-set-ui btn-pure-ui" data-scroll-to-paragraph=".sets-lq">{{ translations.CheaperInSet }} <i class="ti-angle-double-right"></i></div>
{% endif -%} {% endif -%} . . .

{% if product.Archival == false -%}

{% if activeProduct.StockLevel.Control and tableView == false -%}

{% if product.Sets != null and product.Sets != empty -%}

<div class="cheaper-in-set-ui btn-pure-ui" data-scroll-to-paragraph=".sets-lq">{{ translations.CheaperInSet }} <i class="ti-angle-double-right"></i></div>

{% endif -%} {% endif -%} . . .

Na końcu pliku scss/globals/_globals2.scss wklej taki kod:


.archival-product-info-ui{
    position: absolute;
    top: -40px;
    right: 0;
    text-transform: uppercase;
    color: $primaryColor;
    font-style: italic;
}

.archival-product-info-ui{

position: absolute;

top: -40px;

right: 0;

text-transform: uppercase;

color: $primaryColor;

font-style: italic;

}

A na końcu pliku scss/globals/_globals-m.scss wklej taki kod:


.archival-product-info-ui{
    right: 20px;
}

.archival-product-info-ui{

right: 20px;

}

Wskazówka

Zwróć uwagę, aby ten styl znajdował się wewnątrz głównej klamry, która otwiera się w pierwszej linijce pliku i zamyka w ostatniej

Wskazówka

Pamiętaj, że pliki scss należy zminifikować. O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.

Agat

W pliku product-page.html wyszukaj frazę button-container. Jest to klasa kontenera, w którym znajdują się najważniejsze dane związane z towarem. Pod tym kontenerem wklej taki kod:


{% if product.Archival -%}
<div class="archival-info">{{translations.ArchivalProductInfo}}</div>
{% endif -%}

{% if product.Archival -%}

<div class="archival-info">{{translations.ArchivalProductInfo}}</div>

{% endif -%}

Pozostając w tym samym pliku (product-page.html) wyszukaj frazę config.Reviews.Enabled. Jest to część warunku, odpowiedzialnego za dodawanie opinii o produkcie. Zmodyfikuj go tak, aby wyglądał następująco:


{% if product.Archival -%}
    {% if config.Reviews.Enabled == true and productD.Archival == false -%}
{% endif -%}

{% if product.Archival -%}

{% if config.Reviews.Enabled == true and productD.Archival == false -%}

{% endif -%}

W pliku partials/product/product-popup.html wyszukaj frazę usr.Authenticated. W tym pliku będą dwa wystąpienia takiej frazy. W obu to część warunku. W obu przypadkach zmodyfikuj te warunki, aby wyglądały tak:


{% if usr.Authenticated and product.Archival == false -%}

{% if usr.Authenticated and product.Archival == false -%}

W tym samym pliku (partials/product/product-popup.html) wyszukaj frazę add-to-cart-popup. Jest to klasa kontenera, który trzeba zmodyfikować, aby wyglądał tak:

Dalej w tym samym pliku (partials/product/product-popup.html) wyszukaj frazę AddToCartForm. Jest to ID formularza odpowiedzialnego za dodawanie towaru do koszyka. Linijkę wyżej otwórz taki warunek:


{% if product.Archival == false -%}

{% if product.Archival == false -%}

Będzie on obejmował resztę kodu znajdującego się w tym pliku. Na końcu znajdziesz kontener z klasą ask-for-price-popup. Pod tym kontenerem zamknij wcześniej otworzony warunek dopisując linijkę niżej {% endif -%}.

Na końcu pliku scss/main2.scss wklej taki kod:


.archival{
    padding-bottom: 20px;
}

.archival-info{
    background: $pageNameColor;
    color: $primaryColor;
    padding: 20px;
    margin-bottom: 20px;
    text-transform: uppercase;
    @media only screen and (min-width: 481px) {
        box-shadow: 2px 2px 1px 0 $bgColorFont;
    }
}

.archival{

padding-bottom: 20px;

}

.archival-info{

background: $pageNameColor;

color: $primaryColor;

padding: 20px;

margin-bottom: 20px;

text-transform: uppercase;

@media only screen and (min-width: 481px) {

box-shadow: 2px 2px 1px 0 $bgColorFont;

}

Wskazówka

Pamiętaj, że pliki scss należy zminifikować. O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.

Bursztyn

W pliku productdetails.html wyszukaj frazę itemprop=”offers”. Jest to jeden z atrybutów kontenera, na którego początku trzeba wkleić taki kod:


{% if _pd.Archival -%}
<div class="archival-product-info">{{ translations.ArchivalProductInfo }}</div>
{% endif %}

{% if _pd.Archival -%}

<div class="archival-product-info">{{ translations.ArchivalProductInfo }}</div>

{% endif %}

W tym samym pliku (productdetails.html) wyszukaj frazę usr.Authenticated. W tym pliku będą dwa wystąpienia takiej frazy. W obu to część warunku. W obu przypadkach zmodyfikuj te warunki, aby wyglądały tak:


{% if usr.Authenticated and _pd.Archival == false -%}

{% if usr.Authenticated and _pd.Archival == false -%}

Dalej w tym samym pliku (productdetails.html) wyszukaj frazę class=”availability”. Linijkę wyżej nad elementem, który ma taką klasę dopisz {% if _pd.Archival == false %}. Będzie to początek warunku, który trzeba zakończyć trochę niżej. Aby znaleźć to miejsce wyszukaj frazę {% if customer.HidePrices %}. Jest to warunek przed, którym trzeba zakończyć ten nasz nowy, który właśnie dodaliśmy. Aby tego dokonać należy linijkę wyżej dopisać {% endif %}.

Kolejną frazą w tym pliku (productdetails.html), którą trzeba wyszukać jest add-to-cart. Jest to klasa przycisku dodawania towaru do koszyka. Będą dwa wystąpienia. Interesuje nas tylko pierwsze, które dotyczy danego towaru. Drugie wystąpienie dotyczy zestawów i znajduje się w warunku {% if set.Price <> null %}. To nas nie interesuje więc zostańmy przy tym pierwszym. Linijkę wyżej dopisz {% if _pd.Archival == false %}. Pod tym przyciskiem znajdują się jeszcze dwa przyciski (powiadamiania o dostępności i pytania o cenę). Pod tym drugim należy zamknąć warunek dopisując linijkę niżej {% endif %}.

Będąc przy tych przyciskach możemy zauważyć element nav z klasą options. Linijkę wyżej wklej {% if _pd.Archival == false %}, a zaraz za końcem tego elementu dopisz linijkę niżej {% endif %}.

Ostatni warunek w tym pliku (productdetails.html), który trzeba zmienić znajdziesz wyszukując frazę productuserreviews.TotalItems. Trzeba ją podmienić, aby wyglądała tak:


{% unless productuserreviews.TotalItems == 0 and _pd.Archival %}

{% unless productuserreviews.TotalItems == 0 and _pd.Archival %}

Plik productdetails/opinions-partial.html należy zmodyfikować tak, żeby wyglądał w ten sposób:


{% if productuserreviews.TotalItems == 0 %}
    {% if _pd.Archival == false -%}
        .
        .
        .
    {% endif -%}
{% else %}
    {% for o in productuserreviews.Reviews %}
        .
        .
        .
    {% endfor %}
    {% if _pd.Archival == false -%}
        <button id="add-first-review">{{ translations.Com_AddFeedback }}</button>
    {% endif -%}
{% endif%}

{% if productuserreviews.TotalItems == 0 %}

{% if _pd.Archival == false -%}

{% endif -%}

{% else %}

{% for o in productuserreviews.Reviews %}

{% endfor %}

{% if _pd.Archival == false -%}

<button id="add-first-review">{{ translations.Com_AddFeedback }}</button>

{% endif -%}

{% endif%}

Na końcu pliku scss/main2.scss wklej:


.archival-product-info{
    padding: 15px 20px;
    border-radius: 5px 0 0 5px;
    box-shadow: rgba(0,0,0,.2) -2px 2px 10px;
    background: #F5F5F5;
    position: relative;
    right: -20px;
    left: -20px;
    width: calc(100% + 40px);
    margin: 10px 0 30px;
    font-style: italic;
}

.archival-product-info{

padding: 15px 20px;

border-radius: 5px 0 0 5px;

box-shadow: rgba(0,0,0,.2) -2px 2px 10px;

background: #F5F5F5;

position: relative;

right: -20px;

left: -20px;

width: calc(100% + 40px);

margin: 10px 0 30px;

font-style: italic;

}

Wskazówka

Pamiętaj, że pliki scss należy zminifikować. O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.

Opal

W pliku productdetails.html wyszukaj frazę details-section. Jest to klasa kontenera, nad którym trzeba wkleić linijkę wyżej taki kod:


{% if _pd.Archival -%}
<div class="archival-product-info">{{ translations.ArchivalProductInfo }}</div>
{% endif %}

{% if _pd.Archival -%}

<div class="archival-product-info">{{ translations.ArchivalProductInfo }}</div>

{% endif %}

Następnie wyszukaj frazę usr.Authenticated. W tym pliku będą dwa wystąpienia takiej frazy. W obu to część warunku. W obu przypadkach zmodyfikuj te warunki, aby wyglądały tak:


{% if usr.Authenticated and _pd.Archival == false -%}

{% if usr.Authenticated and _pd.Archival == false -%}

Kolejna fraza to class=”stock”. Będzie to klasa elementu, który trzeba „ubrać” w warunek {% if _pd.Archival == false %}. Będzie to początek warunku, który trzeba zakończyć linijkę pod elementem poprzez dopisanie {% endif %}.

Teraz wyszukaj frazę class=”attributes”. Linijkę wyżej nad elementem, który ma taką klasę dopisz {% if _pd.Archival == false %}. Będzie to początek warunku, który trzeba zakończyć trochę niżej. Aby znaleźć to miejsce wyszukaj frazę {% if customer.HidePrices %}. Jest to warunek przed, którym trzeba zakończyć ten nasz nowy, który właśnie dodaliśmy. Aby tego dokonać należy linijkę wyżej dopisać {% endif %}.

Następna fraza to add-to-cart. Jest to klasa przycisku dodawania towaru do koszyka. Będą dwa wystąpienia. Interesuje nas tylko pierwsze, które dotyczy danego towaru. Drugie wystąpienie dotyczy zestawów i znajduje się w warunku {% if set.Price <> null %}. To nas nie interesuje więc zostańmy przy tym pierwszym. Linijkę wyżej dopisz {% if _pd.Archival == false %}. Pod tym przyciskiem znajdują się jeszcze dwa przyciski (powiadamiania o dostępności i pytania o cenę). Pod tym drugim należy zamknąć warunek dopisując linijkę niżej {% endif %}.

Na końcu pliku scss/main2.scss wklej:


.archival-product-info{
    background: #f7f7f7;
    color: $placeholderColorFont;
    padding: 20px;
    margin-top: 20px;
    text-align: center;
}

.archival-product-info{

background: #f7f7f7;

color: $placeholderColorFont;

padding: 20px;

margin-top: 20px;

text-align: center;

}

Wskazówka

Pamiętaj, że pliki scss należy zminifikować. O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.

Topaz

Wzależności od wybranego wariantu szczegółów towaru zmiany będą inne.

Wersja z miniaturkami zdjęć po lewej

W pliku elements/product/product-details-1.html wyszukaj frazę product-details__images. Zastąp kontener z tą klasą poniższym kodem:


<div class="product-details__images">
    <div class="product-flags">
        {% for flag in product.Flags -%}
            <span class="{{ flag.Type }}">{{ flag.Text }}</span>
        {% endfor %}
    </div>
    {% if product.Images[1] -%}
        <ul class="product-details__image-list">
            {% for image in product.Images -%}
                <li>
                    {% if image.Id != -1 -%}
                        {{image | Img: 'compact'}}
                    {% else -%}
                        {{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}}
                    {% endif -%}
                </li>
            {% endfor -%}
        </ul>
        <div class="product-details__image">
            {% for image in product.Images -%}
                <div {% if product.Archival -%} style="position: relative;" {% endif -%}>
                    {% if image.Id != -1 -%}
                        {{image | Img: 'grande'}}
                    {% else -%}
                        {{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}}
                    {% endif -%}
                    {% if product.Archival -%}
                        <div class="product-details__image__archival">{{translations.ArchivalProduct}}</div>
                    {% endif -%}
                </div>
             {% endfor -%}
        </div>
    {% elseif product.Images[0] -%}
        <ul class="product-details__image-list"></ul>
        <div class="product-details__image product-details__image__single" {% if product.Archival -%} style="position: relative;" {% endif -%}>
            <div>
                {{product.Images[0] | Img: 'grande'}}
                {% if product.Archival -%}
                    <div class="product-details__image__archival">{{translations.ArchivalProduct}}</div>
                {% endif -%}
            </div>
        </div>
    {% else -%}
        <ul class="product-details__image-list"></ul>
        <div class="product-details__image product-details__image__single" {% if product.Archival -%} style="position: relative;" {% endif -%}>
            <div>
                {{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}}
                {% if product.Archival -%}
                    <div class="product-details__image__archival">{{translations.ArchivalProduct}}</div>
                {% endif -%}
            </div>
        </div>
    {% endif -%}

    <input type="hidden" class="sample" data-src="img//.jpg" data-alt="{{product.Images[0].Alt}}" data-oldImageId="{{product.ImageId}}">
    {% if product.Images[0] -%}
        <input type="hidden" name="parent-images" data-parent-images="{% for image in product.Images -%}{{ image.Id }},{% endfor -%}">
    {% endif -%}
    {% if product.Archival == false -%}
        <div class="product-details__additionalInfo">
            {% if product.DeliveryCost != null and product.DeliveryCost > 0 -%}
                <div class="delivery-cost-container">
                    <span class="stock-label">{{ translations.Crt_Delivery }}: </span>
                    <a href="{{config.DefinedPages.Shipping.Url}}">{{ translations.Sea_From | Downcase }} {{ product.DeliveryCost | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }}</a>
                </div>
                <span class="line">|</span>
            {% endif -%}
            {% if stockLevel.Control -%}
                <div class="stock-container ">
                    <span class="stock-label">{{ translations.Com_StockLvl }}: </span>
                    {% unless stockLevel.Type == 2 or stockLevel.Type == 4 or stockLevel.Text == null -%}
                        <span class="value">{{ stockLevel.Text }}</span>
                    {% endunless -%}
                    {% if stockLevel.Type == 4 -%}
                        <span class="value"><span class="value-to-replace">{{ stockLevel.Value | Normalize }}</span> <span class="unit-to-replace">{{ product.SaleUnit }}</span></span>
                    {% endif -%}
                    {% if stockLevel.Type == 1 or stockLevel.Type == 2 -%}
                        {% unless stockLevel.ImageUrl == null -%}
                            {{stockLevel.ImageUrl | Img: '', stockLevel.Text}}
                        {% endunless -%}
                    {% endif -%}
                </div>
                <span class="line">|</span>
            {% endif -%}
            <div class="availability-container">
                <input type="hidden" name="status" value="{{ product.Availability.Status }}"/>
                <span class="availability-label">{{ translations.Com_Availability }}: </span>
                {% unless product.Availability.Text == '' or product.Availability.Type == 2 -%}
                    <span class="value">{{ product.Availability.Text }}</span>
                {% endunless -%}
                {% if product.Availability.Type == 1 or product.Availability.Type == 2  -%}
                    {{product.Availability.ImageUrl | Img: '', product.Availability.Text}}
                {% endif -%}
                {% unless product.Availability.Date == null -%}
                    <span class="date">({{ product.Availability.Date | Date:'d' }})</span>
                {% endunless -%}
            </div>
        </div>
    {% endif -%}
</div>

100

101

{% for flag in product.Flags -%}

{% endfor %}

</div>

{% if product.Images[1] -%}

{% for image in product.Images -%}

<li>

{% if image.Id != -1 -%}

{% else -%}

{{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}}

{% endif -%}

</li>

{% endfor -%}

</ul>

{% for image in product.Images -%}

{% if image.Id != -1 -%}

{% else -%}

{{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}}

{% endif -%}

{% if product.Archival -%}

<div class="product-details__image__archival">{{translations.ArchivalProduct}}</div>

{% endif -%}

</div>

{% endfor -%}

</div>

{% elseif product.Images[0] -%}

<div>

{% if product.Archival -%}

<div class="product-details__image__archival">{{translations.ArchivalProduct}}</div>

{% endif -%}

</div>

{% else -%}

<div>

{{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}}

{% if product.Archival -%}

<div class="product-details__image__archival">{{translations.ArchivalProduct}}</div>

{% endif -%}

</div>

{% endif -%}

{% if product.Images[0] -%}

{% endif -%}

{% if product.Archival == false -%}

{% if product.DeliveryCost != null and product.DeliveryCost > 0 -%}

<span class="stock-label">{{ translations.Crt_Delivery }}: </span>

<a href="{{config.DefinedPages.Shipping.Url}}">{{ translations.Sea_From | Downcase }} {{ product.DeliveryCost | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }}</a>

</div>

{% endif -%}

{% if stockLevel.Control -%}

<span class="stock-label">{{ translations.Com_StockLvl }}: </span>

{% unless stockLevel.Type == 2 or stockLevel.Type == 4 or stockLevel.Text == null -%}

<span class="value">{{ stockLevel.Text }}</span>

{% endunless -%}

{% if stockLevel.Type == 4 -%}

<span class="value"><span class="value-to-replace">{{ stockLevel.Value | Normalize }}</span> <span class="unit-to-replace">{{ product.SaleUnit }}</span></span>

{% endif -%}

{% if stockLevel.Type == 1 or stockLevel.Type == 2 -%}

{% unless stockLevel.ImageUrl == null -%}

{% endunless -%}

{% endif -%}

</div>

{% endif -%}

<span class="availability-label">{{ translations.Com_Availability }}: </span>

{% unless product.Availability.Text == '' or product.Availability.Type == 2 -%}

<span class="value">{{ product.Availability.Text }}</span>

{% endunless -%}

{% if product.Availability.Type == 1 or product.Availability.Type == 2 -%}

{{product.Availability.ImageUrl | Img: '', product.Availability.Text}}

{% endif -%}

{% unless product.Availability.Date == null -%}

<span class="date">({{ product.Availability.Date | Date:'d' }})</span>

{% endunless -%}

</div>

{% endif -%}

</div>

Następnie wyszukaj frazę product-details__add-to-cart. Na początku kontenera z tą klasą wklej poniższy kod:


{% if product.Archival -%}
    <div class="product-details__archivalProductInfo">{{translations.ArchivalProductInfo}}</div>
{% endif -%}

{% if product.Archival -%}

<div class="product-details__archivalProductInfo">{{translations.ArchivalProductInfo}}</div>

{% endif -%}

Kawałek niżej znajdziesz kontener z klasą product-details__reviewsContainer. Podmień go poniższym kodem:


{% unless product.Archival and product.RatingCount == 0 -%}
    <div class="product-details__reviewsContainer goToAddReviewSection goToAddReviewSection-js">
        {% include 'partials/common/product-rating.html', rating: product.Rating -%}
        <span>({{ product.RatingCount }})</span>
    </div>
{% endunless -%}

{% unless product.Archival and product.RatingCount == 0 -%}

{% include 'partials/common/product-rating.html', rating: product.Rating -%}

<span>({{ product.RatingCount }})</span>

</div>

{% endunless -%}

Teraz wyszukiaj basic-unit-ratio. Podmień wszystko co jest pod tą linijką, aż do linijki, w której znajduje się kontener z klasą product-details__info-container (tej linijki nie podmieniaj) poniższym kodem:


{% if product.Archival == false -%}
    {% if product.Clip or product.Batch -%}
        <input name="supplyId" type="hidden" id="supplyId" data-supplies="{{ product.SuppliesJSON | H }}" {% if product.Clip -%} data-clip="1" {% endif -%} {% if product.Batch -%} data-batch="1" {% endif -%} data-parent-id="{{ product.Id }}"/>
        <input type="hidden" name="ask-for-price" value="{{ product.AskForPrice }}" />
        <div class="input-group">
            {% for attribute in product.Supplies.AttributeNames -%}
                <span class="attribute-name">{{ attribute.Name | H }}</span>
                <div class="attributes-select button-option attributeId"></div>
            {% endfor -%}
        </div>
    {% elseif product.AttributesPolyvalent != empty -%}
        {% for attribute in product.AttributesPolyvalent -%}
            <div class="input-group">
                <span class="attribute-name">{{ attribute.Name }}</span>
                <div class="button-option attributes-select attributeId">
                    {% for value in attribute.Values -%}
                        <span data-value="{{ value.ValueId }}" class="button-option {% if value.ValueId == attribute.Values[0].ValueId -%}active{% endif -%}">{{ value.Value | H }}</span>
                    {% endfor -%}
                    <input name="attributeId" type="hidden" value="{{ attribute.Values[0].ValueId }}"/>
                </div>
            </div>
        {% endfor -%}
    {% endif -%}
    {% if product.Batch == null or product.Batch == false -%}
        {% if product.AttributesEditable != empty -%}
            {% assign i = 0 -%}
            {% for attribute in product.AttributesEditable -%}
                <div class="input-group">
                    <input class="attributeEditable{{i}}" aria-label="attribute-editable" name="attributeEditable" type="text" value="" placeholder="{{ attribute.Name }} *"/>
                </div>
                {% assign i = i | Plus: 1 -%}
            {% endfor -%}
            <span class="counter hidden">{{ i }}</span>
        {% endif -%}
    {% endif -%}
    {% if product.Units[1] -%}
        <div class="input-group button-option">
            <input type="hidden" name="initial-price" value="{{ product.Price }}"/>
            <input type="hidden" name="initial-old-price" value="{{ product.PreviousPrice }}"/>
            <span class="attribute-name">{{ translations.Com_MeasureUnit }}</span>
            {% for unit in product.Units -%}
            <input class="button-option unitId {% if unit.Default == true or unit.Id == null -%}active{% endif -%}" type="button" value="{{ unit.Name }}"/>
            <input type="hidden" value="{{ unit.Id }}" data-ratio="{{ unit.Ratio }}"/>
            {% endfor -%}
        </div>
    {% endif -%}
{% endif -%}

{% if product.Archival == false -%}

{% if product.Clip or product.Batch -%}

{% for attribute in product.Supplies.AttributeNames -%}

<span class="attribute-name">{{ attribute.Name | H }}</span>

{% endfor -%}

</div>

{% elseif product.AttributesPolyvalent != empty -%}

{% for attribute in product.AttributesPolyvalent -%}

<span class="attribute-name">{{ attribute.Name }}</span>

{% for value in attribute.Values -%}

<span data-value="{{ value.ValueId }}" class="button-option {% if value.ValueId == attribute.Values[0].ValueId -%}active{% endif -%}">{{ value.Value | H }}</span>

{% endfor -%}

</div>

{% endfor -%}

{% endif -%}

{% if product.Batch == null or product.Batch == false -%}

{% if product.AttributesEditable != empty -%}

{% assign i = 0 -%}

{% for attribute in product.AttributesEditable -%}

</div>

{% assign i = i | Plus: 1 -%}

{% endfor -%}

{% endif -%}

{% if product.Units[1] -%}

<span class="attribute-name">{{ translations.Com_MeasureUnit }}</span>

{% for unit in product.Units -%}

{% endfor -%}

</div>

{% endif -%}

Następnie znajdź kontener z klasą product-details__other-options i podmień go (wraz z jego zawartością) poniższym kodem:


{% if product.Archival == false -%}
    <div class="product-details__other-options">
        <div class="product-details__other-option">
            <span>
                <svg class="svgIcon">
                    <use xlink:href="css/img/icons-sprite.svg#bookmark-{{settings.iconStyle}}"></use>
                </svg>
            </span>
            <span class="open-popup-recommend-product open-popup-with-form" data-popup-class=".recommend-product-popup">{{ translations.Com_RecommendProduct }}</span>
        </div>
        <div class="product-details__other-option">
            <span>
                <svg class="svgIcon">
                    <use xlink:href="css/img/icons-sprite.svg#envelope-open-{{settings.iconStyle}}"></use>
                </svg>
            </span>
            <span class="open-popup-ask-about-product open-popup-with-form" data-popup-class=".ask-about-product-popup">{{ translations.Com_AskAboutProduct }}</span>
        </div>
        <div class="product-details__other-option {% if product.AskForPrice == false and customer.HidePrices == false and product.Price != null -%} hidden {% endif -%}">
            <span>
                <svg class="svgIcon">
                    <use xlink:href="css/img/icons-sprite.svg#question-circle-{{settings.iconStyle}}"></use>
                </svg>
            </span>
            <span class="open-popup-ask-for-price open-popup-with-form {% if product.Availability.Status == 3 or noProductInStock == true -%}secondary{% endif -%}" data-popup-class=".ask-for-price-popup">{{ translations.Com_AskForPrice }}</span>
        </div>
    </div>
{% endif -%}

{% if product.Archival == false -%}

<span>

</svg>

</span>

<span class="open-popup-recommend-product open-popup-with-form" data-popup-class=".recommend-product-popup">{{ translations.Com_RecommendProduct }}</span>

</div>

<span>

</svg>

</span>

<span class="open-popup-ask-about-product open-popup-with-form" data-popup-class=".ask-about-product-popup">{{ translations.Com_AskAboutProduct }}</span>

</div>

<span>

</svg>

</span>

<span class="open-popup-ask-for-price open-popup-with-form {% if product.Availability.Status == 3 or noProductInStock == true -%}secondary{% endif -%}" data-popup-class=".ask-for-price-popup">{{ translations.Com_AskForPrice }}</span>

</div>

{% endif -%}

Teraz znajdź kontener z klasą product-details__prices. Na samym początku w tym kontenerze będzie warunek {% if customer.Authenticated == true -%}. Zmień go na {% if customer.Authenticated == true and product.Archival == false -%}.

Następnie znajdź kontener z klasą product-details__button-group i podmień go (wraz z jego zawartością) na poniższy kod:


{% if product.Archival == false -%}
    <div class="product-details__button-group">
        {% if product.AskForPrice == false or customer.HidePrices == false -%}
            {% unless product.Availability.Status == 3 or noProductInStock == true -%}
                <div class="input-group product-details__quantity {% if decimalUnits == false -%} min-js {% endif -%}">
                    {% if stockLevel -%}
                        {% assign stockValue = stockLevel.Value | ToString | Split: "," -%}
                    {% endif -%}
                    <button type="button" class="button-minus-add-product" aria-label="button-minus-add-product" data-field="quantity">
                        <svg class="svgIcon">
                            <use xlink:href="css/img/icons-sprite.svg#minus-light"></use>
                        </svg>
                    </button>
                    <input type="text"
                        name="quantity"
                        class="quantity-field quantity__field-js"
                        aria-label="quantity-field"
                        data-decimal="{{decimalUnits}}"
                        {% if decimalUnits -%} value="1,00" {% else -%} value="1" {% endif -%}
                        {% if stockLevel -%}{% if stockLevel.QuantityControl -%} max="{{ stockValue[0] }}" {% else -%} max="" {% endif -%} {% else -%} max="" {% endif -%} />
                    <button type="button" class="button-plus-add-product" aria-label="button-plus-add-product" data-field="quantity">
                        <svg class="svgIcon">
                            <use xlink:href="css/img/icons-sprite.svg#plus-light"></use>
                        </svg>
                    </button>
                    {% if stockLevel and stockLevel.Control -%}
                        {% assign stockValue = stockLevel.Value | ToString | Split: ',' -%}
                        <input type="hidden" name="stock-value" value="{{ stockValue[0] }}"/>
                        <input type="hidden" name="stock-control" value="{{ stockLevel.Control }}"/>
                        <input type="hidden" name="stock-quantity-control" value="{{ stockLevel.QuantityControl }}"/>
                    {% endif -%}
                </div>
            {% endunless -%}
        {% endif -%}

        <input type="hidden" name="login-to-see-prices" value="{{ customer.HidePrices }}" />

        {% if customer.HidePrices == true  -%}
            <a class="primary-action-button login-to-see-prices" href="{{ config.DefinedPages.Login.Url }}" title="{{ translations.Log_Login }}">
                <svg class="svgIcon">
                    <use xlink:href="css/img/icons-sprite.svg#sign-in-{{settings.iconStyle}}"></use>
                </svg>
                {{ translations.Com_LogInToSeePrice }}
            </a>
        {% else -%}
            <span class="primary-action-button open-popup-notify-about-availability open-popup-with-form {% if product.Availability.Status != 3 and noProductInStock == false -%} hidden {% endif -%}" data-popup-class=".notify-about-availability-popup">{{ translations.Com_NotifyMeAboutAvailability }}</span>
            <span class="primary-action-button add-to-cart cartAdd-js {% if product.Price == null or product.Availability.Status == 3 or noProductInStock -%} hidden {% endif -%}" data-product-id="{{ product.Id }}">
                {{ translations.BuyNow }}
            </span>
        {% endif -%}
    </div>
{% else -%}
    <a class="parent-category-link" href="{{page.CurrentSiteNode.Url}}">{{translations.ArchivalProductCheckInfo}} <svg><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg></a>
{% endif -%}

{% if product.Archival == false -%}

{% if product.AskForPrice == false or customer.HidePrices == false -%}

{% unless product.Availability.Status == 3 or noProductInStock == true -%}

{% if stockLevel -%}

{% assign stockValue = stockLevel.Value | ToString | Split: "," -%}

{% endif -%}

</svg>

</button>

<input type="text"

name="quantity"

class="quantity-field quantity__field-js"

aria-label="quantity-field"

data-decimal="{{decimalUnits}}"

{% if decimalUnits -%} value="1,00" {% else -%} value="1" {% endif -%}

{% if stockLevel -%}{% if stockLevel.QuantityControl -%} max="{{ stockValue[0] }}" {% else -%} max="" {% endif -%} {% else -%} max="" {% endif -%} />

</svg>

</button>

{% if stockLevel and stockLevel.Control -%}

{% assign stockValue = stockLevel.Value | ToString | Split: ',' -%}

{% endif -%}

</div>

{% endunless -%}

{% endif -%}

{% if customer.HidePrices == true -%}

</svg>

</a>

{% else -%}

<span class="primary-action-button open-popup-notify-about-availability open-popup-with-form {% if product.Availability.Status != 3 and noProductInStock == false -%} hidden {% endif -%}" data-popup-class=".notify-about-availability-popup">{{ translations.Com_NotifyMeAboutAvailability }}</span>

</span>

{% endif -%}

</div>

{% else -%}

<a class="parent-category-link" href="{{page.CurrentSiteNode.Url}}">{{translations.ArchivalProductCheckInfo}} <svg><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg></a>

{% endif -%}

Teraz w pliku css/layout.css dodaj poniższy kod:


.product-details .product-details__image__archival{position:absolute;bottom:0;left:0;right:0;padding:20px;font-size:18px;background:rgba(204,204,204,0.9);color:#fff;text-align:center}.product-details .product-details__archivalProductInfo{background:{{settings.$breadcrumbsBgColor}};color:{{settings.breadcrumbsFontColor}};padding:30px;margin-bottom:30px;text-align:center}.product-details .parent-category-link{color:{{settings.linkFontColor}};margin-top:50px;display:inline-block}.product-details .parent-category-link svg{fill:{{settings.linkFontColor}};height:19px;width:19px;vertical-align:middle}

.product-details .product-details__image__archival{position:absolute;bottom:0;left:0;right:0;padding:20px;font-size:18px;background:rgba(204,204,204,0.9);color:#fff;text-align:center}.product-details .product-details__archivalProductInfo{background:{{settings.$breadcrumbsBgColor}};color:{{settings.breadcrumbsFontColor}};padding:30px;margin-bottom:30px;text-align:center}.product-details .parent-category-link{color:{{settings.linkFontColor}};margin-top:50px;display:inline-block}.product-details .parent-category-link svg{fill:{{settings.linkFontColor}};height:19px;width:19px;vertical-align:middle}

Wersja z miniaturkami zdjęć pod głównym zdjęciem

W pliku elements/product/product-details-2.html wyszukaj frazę product-details__images. Zastąp kontener z tą klasą poniższym kodem:


<div class="product-details__images">
    <div class="product-flags">
        {% for flag in product.Flags -%}
            <span class="{{ flag.Type }}">{{ flag.Text }}</span>
        {% endfor %}
    </div>
    {% if product.Images[1] -%}
        <div class="product-details__image" {% if product.Archival -%} style="position: relative;" {% endif -%}>
            {% for image in product.Images -%}
                <div>
                    {% if image.Id != -1 -%}
                        {{image | Img: 'grande'}}
                    {% else -%}
                        {{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}}
                    {% endif -%}
                    {% if product.Archival -%}
                        <div class="product-details__image__archival">{{translations.ArchivalProduct}}</div>
                    {% endif -%}
                </div>
            {% endfor -%}
        </div>
        <ul class="product-details__image-list">
            {% for image in product.Images -%}
                <li>
                    {% if image.Id != -1 -%}
                        {{image | Img: 'compact'}}
                    {% else -%}
                        {{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}}
                    {% endif -%}
                </li>
            {% endfor -%}
        </ul>
    {% elseif product.Images[0] -%}
        <div class="product-details__image product-details__image__single" {% if product.Archival -%} style="position: relative;" {% endif -%}>
            <div>
                {{product.Images[0] | Img: 'grande'}}
                {% if product.Archival -%}
                    <div class="product-details__image__archival">{{translations.ArchivalProduct}}</div>
                {% endif -%}
            </div>
        </div>
        <ul class="product-details__image-list"></ul>
    {% else -%}
        <div class="product-details__image product-details__image__single" {% if product.Archival -%} style="position: relative;" {% endif -%}>
            <div>
                {{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}}
                {% if product.Archival -%}
                    <div class="product-details__image__archival">{{translations.ArchivalProduct}}</div>
                {% endif -%}
            </div>
        </div>
        <ul class="product-details__image-list"></ul>
    {% endif -%}

    {% if product.Archival == false -%}
        <div class="product-details__other-options">
            <div class="product-details__other-option">
                <svg class="svgIcon">
                    <use xlink:href="css/img/icons-sprite.svg#bookmark-{{settings.iconStyle}}"></use>
                </svg>
                <span class="open-popup-recommend-product open-popup-with-form" data-popup-class=".recommend-product-popup">{{ translations.Com_RecommendProduct }}</span>
            </div>
            <div class="product-details__other-option">
                <svg class="svgIcon">
                    <use xlink:href="css/img/icons-sprite.svg#envelope-open-{{settings.iconStyle}}"></use>
                </svg>
                <span class="open-popup-ask-about-product open-popup-with-form" data-popup-class=".ask-about-product-popup">{{ translations.Com_AskAboutProduct }}</span>
            </div>
            <div class="product-details__other-option {% if product.AskForPrice == false and customer.HidePrices == false and product.Price != null -%} hidden {% endif -%}">
                <svg class="svgIcon">
                    <use xlink:href="css/img/icons-sprite.svg#comment-{{settings.iconStyle}}"></use>
                </svg>
                <span class="open-popup-ask-for-price open-popup-with-form {% if product.Availability.Status == 3 or noProductInStock == true -%}secondary{% endif -%}" data-popup-class=".ask-for-price-popup">{{ translations.Com_AskForPrice }}</span>
            </div>
        </div>
    {% endif -%}

    <input type="hidden" class="sample" data-src="img//.jpg" data-alt="{{product.Images[0].Alt}}" data-oldImageId="{{product.ImageId}}">
    {% if product.Images[0] -%}
        <input type="hidden" name="parent-images" data-parent-images="{% for image in product.Images -%}{{ image.Id }},{% endfor -%}">
    {% endif -%}
</div>

{% for flag in product.Flags -%}

{% endfor %}

</div>

{% if product.Images[1] -%}

{% for image in product.Images -%}

<div>

{% if image.Id != -1 -%}

{% else -%}

{{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}}

{% endif -%}

{% if product.Archival -%}

<div class="product-details__image__archival">{{translations.ArchivalProduct}}</div>

{% endif -%}

</div>

{% endfor -%}

</div>

{% for image in product.Images -%}

<li>

{% if image.Id != -1 -%}

{% else -%}

{{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}}

{% endif -%}

</li>

{% endfor -%}

</ul>

{% elseif product.Images[0] -%}

<div>

{% if product.Archival -%}

<div class="product-details__image__archival">{{translations.ArchivalProduct}}</div>

{% endif -%}

</div>

{% else -%}

<div>

{{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}}

{% if product.Archival -%}

<div class="product-details__image__archival">{{translations.ArchivalProduct}}</div>

{% endif -%}

</div>

{% endif -%}

{% if product.Archival == false -%}

</svg>

<span class="open-popup-recommend-product open-popup-with-form" data-popup-class=".recommend-product-popup">{{ translations.Com_RecommendProduct }}</span>

</div>

</svg>

<span class="open-popup-ask-about-product open-popup-with-form" data-popup-class=".ask-about-product-popup">{{ translations.Com_AskAboutProduct }}</span>

</div>

</svg>

</div>

{% endif -%}

{% if product.Images[0] -%}

{% endif -%}

</div>

Następnie wyszukaj frazę product-details__add-to-cart. Na początku kontenera z tą klasą wklej poniższy kod:


{% if product.Archival -%}
    <div class="product-details__archivalProductInfo">{{translations.ArchivalProductInfo}}</div>
{% endif -%}

{% if product.Archival -%}

<div class="product-details__archivalProductInfo">{{translations.ArchivalProductInfo}}</div>

{% endif -%}

Teraz wyszukiaj {% if product.Clip or product.Batch -%}. Podmień wszystko co jest pod tą linijką (łącznie z nią), aż do linijki {% include 'partials/common/after-adding-to-cart-popup.html’ %} (jej nie podmieniaj) poniższym kodem:


    {% if product.Archival == false -%}
        {% if product.Clip or product.Batch -%}
            <input name="supplyId" type="hidden" id="supplyId" data-supplies="{{ product.SuppliesJSON | H }}" {% if product.Clip -%} data-clip="1" {% endif -%} {% if product.Batch -%} data-batch="1" {% endif -%} data-parent-id="{{ product.Id }}"/>
            <input type="hidden" name="ask-for-price" value="{{ product.AskForPrice }}" />
            <div class="input-group">
                {% for attribute in product.Supplies.AttributeNames -%}
                <span class="attribute-name">{{ attribute.Name | H }}</span>
                <div class="attributes-select button-option attributeId"></div>
                {% endfor -%}
            </div>
        {% elseif product.AttributesPolyvalent != empty -%}
            {% for attribute in product.AttributesPolyvalent -%}
                <div class="input-group">
                    <span class="attribute-name">{{ attribute.Name }}</span>
                    <div class="button-option attributes-select attributeId">
                        {% for value in attribute.Values -%}
                            <span data-value="{{ value.ValueId }}" class="button-option {% if value.ValueId == attribute.Values[0].ValueId -%}active{% endif -%}">{{ value.Value | H }}</span>
                        {% endfor -%}
                        <input name="attributeId" type="hidden" value="{{ attribute.Values[0].ValueId }}"/>
                    </div>
                </div>
            {% endfor -%}
        {% endif -%}
        {% if product.Batch == null or product.Batch == false -%}
            {% if product.AttributesEditable != empty -%}
                {% assign i = 0 -%}
                {% for attribute in product.AttributesEditable -%}
                    <div class="input-group">
                        <input class="attributeEditable{{i}}" aria-label="attributeEditable" name="attributeEditable" type="text" value="" placeholder="{{ attribute.Name }} *"/>
                    </div>
                    {% assign i = i | Plus: 1 -%}
                {% endfor -%}
                <span class="counter hidden">{{ i }}</span>
            {% endif -%}
        {% endif -%}
    {% endif -%}
    {% if product.Units[1] -%}
        <div class="input-group button-option">
            <input type="hidden" name="initial-price" value="{{ product.Price }}"/>
            <input type="hidden" name="initial-old-price" value="{{ product.PreviousPrice }}"/>
            <span class="attribute-name">{{ translations.Com_MeasureUnit }}</span>
            {% for unit in product.Units -%}
                <input class="button-option unitId {% if unit.Default == true or unit.Id == null -%}active{% endif -%}" type="button" value="{{ unit.Name }}"/>
                <input type="hidden" value="{{ unit.Id }}" data-ratio="{{ unit.Ratio }}"/>
            {% endfor -%}
        </div>
    {% endif -%}

    {% if product.Archival == false -%}
        <div class="product-details__info-container">
            {% if stockLevel.Control -%}
                <div class="stock-container ">
                    <span class="stock-label">{{ translations.Com_StockLvl }}: </span>
                    {% unless stockLevel.Type == 2 or stockLevel.Type == 4 or stockLevel.Text == null -%}
                        <span class="value">{{ stockLevel.Text }}</span>
                    {% endunless -%}
                    {% if stockLevel.Type == 4 -%}
                        <span class="value"><span class="value-to-replace">{{ stockLevel.Value | Normalize }}</span> <span class="unit-to-replace">{{ product.SaleUnit }}</span></span>
                    {% endif -%}
                    {% if stockLevel.Type == 1 or stockLevel.Type == 2 -%}
                        {% unless stockLevel.ImageUrl == null -%}
                            {{stockLevel.ImageUrl | Img: '', stockLevel.Text}}
                        {% endunless -%}
                    {% endif -%}
                </div>
            {% endif -%}
            <div class="availability-container">
                <input type="hidden" name="status" value="{{ product.Availability.Status }}"/>
                <span class="availability-label">{{ translations.Com_Availability }}</span>
                {% unless product.Availability.Text == '' or product.Availability.Type == 2 -%}
                    <span class="value">{{ product.Availability.Text }}: </span>
                {% endunless -%}
                {% if product.Availability.Type == 1 or product.Availability.Type == 2  -%}
                    {{product.Availability.ImageUrl | Img: '', product.Availability.Text}}
                {% endif -%}
                {% unless product.Availability.Date == null -%}
                    <span class="date">({{ product.Availability.Date | Date:'d' }})</span>
                {% endunless -%}
            </div>
            {% if product.DeliveryCost != null and product.DeliveryCost > 0 -%}
                <div class="delivery-cost-container">
                    <span class="stock-label">{{ translations.Crt_Delivery }} </span>
                    <a href="{{config.DefinedPages.Shipping.Url}}">{{ translations.Sea_From | Downcase }} {{ product.DeliveryCost | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }}</a>
                </div>
            {% endif -%}
        </div>
        <div class="product-details__button-group">
            {% if product.AskForPrice == false or customer.HidePrices == false -%}
                {% unless product.Availability.Status == 3 or noProductInStock == true -%}
                    <div class="input-group product-details__quantity {% if decimalUnits == false -%} min-js {% endif -%}">
                        {% if stockLevel -%}
                            {% assign stockValue = stockLevel.Value | ToString | Split: "," -%}
                        {% endif -%}
                        <button type="button" class="button-minus-add-product" aria-label="buttonMinusAddProduct" data-field="quantity">
                            <svg class="svgIcon">
                                <use xlink:href="css/img/icons-sprite.svg#minus-light"></use>
                            </svg>
                        </button>                        
                        <input type="text"
                            name="quantity"
                            class="quantity-field quantity__field-js"
                            aria-label="quantityField"
                            data-decimal="{{decimalUnits}}"
                            {% if decimalUnits -%} value="1,00" {% else -%} value="1" {% endif -%}
                            {% if stockLevel -%}{% if stockLevel.QuantityControl -%} max="{{ stockValue[0] }}" {% else -%} max="" {% endif -%} {% else -%} max="" {% endif -%} />                        
                        <button type="button" class="button-plus-add-product" aria-label="buttonPlusAddProduct" data-field="quantity">
                            <svg class="svgIcon">
                                <use xlink:href="css/img/icons-sprite.svg#plus-light"></use>
                            </svg>
                        </button>                        
                        {% if stockLevel and stockLevel.Control -%}
                            {% assign stockValue = stockLevel.Value | ToString | Split: ',' -%}
                            <input type="hidden" name="stock-value" value="{{ stockValue[0] }}"/>
                            <input type="hidden" name="stock-control" value="{{ stockLevel.Control }}"/>
                            <input type="hidden" name="stock-quantity-control" value="{{ stockLevel.QuantityControl }}"/>
                        {% endif -%}
                    </div>
                {% endunless -%}
            {% endif -%}
            <div class="product-details__actionButtons">
                <input type="hidden" name="login-to-see-prices" value="{{ customer.HidePrices }}" />

                {% if customer.HidePrices == true  -%}
                    <a class="primary-action-button login-to-see-prices" href="{{ config.DefinedPages.Login.Url }}" title="{{ translations.Log_Login }}">
                        <svg class="svgIcon">
                            <use xlink:href="css/img/icons-sprite.svg#sign-in-{{settings.iconStyle}}"></use>
                        </svg>
                        {{ translations.Com_LogInToSeePrice }}
                    </a>
                {% else -%}
                    <span class="primary-action-button open-popup-notify-about-availability open-popup-with-form {% if product.Availability.Status != 3 and noProductInStock == false -%} hidden {% endif -%}" data-popup-class=".notify-about-availability-popup">{{ translations.Com_NotifyMeAboutAvailability }}</span>
                    <span class="primary-action-button add-to-cart cartAdd-js {% if product.Price == null or product.Availability.Status == 3 or noProductInStock -%} hidden {% endif -%}" data-product-id="{{ product.Id }}">
                        {{ translations.BuyNow }}
                    </span>
                {% endif -%}
                {% if customer.Authenticated == true -%}
                    <span class="secondary-action-button product-details__squareBtn product-details__wishListAdd productWishListAdd-js">
                        <input type="hidden" name="__action" value="Product/WishListAdd"/>
                        <input type="hidden" name="productId" value="{{ product.Id }}"/>
                        <input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
                        <svg class="svgIcon">
                            <use xlink:href="css/img/icons-sprite.svg#heart-{{settings.iconStyle}}"></use>
                        </svg>
                    </span>
                {% endif -%}
            </div>
        </div>
    {% else -%}
        <a class="parent-category-link" href="{{page.CurrentSiteNode.Url}}">{{translations.ArchivalProductCheckInfo}} <svg><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg></a>
    {% endif -%}
</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

{% if product.Archival == false -%}

{% if product.Clip or product.Batch -%}

{% for attribute in product.Supplies.AttributeNames -%}

<span class="attribute-name">{{ attribute.Name | H }}</span>

{% endfor -%}

</div>

{% elseif product.AttributesPolyvalent != empty -%}

{% for attribute in product.AttributesPolyvalent -%}

<span class="attribute-name">{{ attribute.Name }}</span>

{% for value in attribute.Values -%}

<span data-value="{{ value.ValueId }}" class="button-option {% if value.ValueId == attribute.Values[0].ValueId -%}active{% endif -%}">{{ value.Value | H }}</span>

{% endfor -%}

</div>

{% endfor -%}

{% endif -%}

{% if product.Batch == null or product.Batch == false -%}

{% if product.AttributesEditable != empty -%}

{% assign i = 0 -%}

{% for attribute in product.AttributesEditable -%}

</div>

{% assign i = i | Plus: 1 -%}

{% endfor -%}

{% endif -%}

{% if product.Units[1] -%}

<span class="attribute-name">{{ translations.Com_MeasureUnit }}</span>

{% for unit in product.Units -%}

{% endfor -%}

</div>

{% endif -%}

{% if product.Archival == false -%}

{% if stockLevel.Control -%}

<span class="stock-label">{{ translations.Com_StockLvl }}: </span>

{% unless stockLevel.Type == 2 or stockLevel.Type == 4 or stockLevel.Text == null -%}

<span class="value">{{ stockLevel.Text }}</span>

{% endunless -%}

{% if stockLevel.Type == 4 -%}

<span class="value"><span class="value-to-replace">{{ stockLevel.Value | Normalize }}</span> <span class="unit-to-replace">{{ product.SaleUnit }}</span></span>

{% endif -%}

{% if stockLevel.Type == 1 or stockLevel.Type == 2 -%}

{% unless stockLevel.ImageUrl == null -%}

{% endunless -%}

{% endif -%}

</div>

{% endif -%}

<span class="availability-label">{{ translations.Com_Availability }}</span>

{% unless product.Availability.Text == '' or product.Availability.Type == 2 -%}

<span class="value">{{ product.Availability.Text }}: </span>

{% endunless -%}

{% if product.Availability.Type == 1 or product.Availability.Type == 2 -%}

{{product.Availability.ImageUrl | Img: '', product.Availability.Text}}

{% endif -%}

{% unless product.Availability.Date == null -%}

<span class="date">({{ product.Availability.Date | Date:'d' }})</span>

{% endunless -%}

</div>

{% if product.DeliveryCost != null and product.DeliveryCost > 0 -%}

<span class="stock-label">{{ translations.Crt_Delivery }} </span>

<a href="{{config.DefinedPages.Shipping.Url}}">{{ translations.Sea_From | Downcase }} {{ product.DeliveryCost | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }}</a>

</div>

{% endif -%}

</div>

{% if product.AskForPrice == false or customer.HidePrices == false -%}

{% unless product.Availability.Status == 3 or noProductInStock == true -%}

{% if stockLevel -%}

{% assign stockValue = stockLevel.Value | ToString | Split: "," -%}

{% endif -%}

</svg>

</button>

<input type="text"

name="quantity"

class="quantity-field quantity__field-js"

aria-label="quantityField"

data-decimal="{{decimalUnits}}"

{% if decimalUnits -%} value="1,00" {% else -%} value="1" {% endif -%}

{% if stockLevel -%}{% if stockLevel.QuantityControl -%} max="{{ stockValue[0] }}" {% else -%} max="" {% endif -%} {% else -%} max="" {% endif -%} />

</svg>

</button>

{% if stockLevel and stockLevel.Control -%}

{% assign stockValue = stockLevel.Value | ToString | Split: ',' -%}

{% endif -%}

</div>

{% endunless -%}

{% endif -%}

{% if customer.HidePrices == true -%}

</svg>

</a>

{% else -%}

</span>

{% endif -%}

{% if customer.Authenticated == true -%}

</svg>

</span>

{% endif -%}

</div>

{% else -%}

<a class="parent-category-link" href="{{page.CurrentSiteNode.Url}}">{{translations.ArchivalProductCheckInfo}} <svg><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg></a>

{% endif -%}

</div>

Teraz w pliku css/layout.css dodaj poniższy kod:


.product-details .product-details__image__archival{position:absolute;bottom:0;left:0;right:0;padding:20px;font-size:18px;background:rgba(204,204,204,0.9);color:#fff;text-align:center}.product-details .product-details__archivalProductInfo{background:{{settings.$breadcrumbsBgColor}};color:{{settings.breadcrumbsFontColor}};padding:30px;margin-bottom:30px;text-align:center}.product-details .parent-category-link{color:{{settings.linkFontColor}};margin-top:50px;display:inline-block}.product-details .parent-category-link svg{fill:{{settings.linkFontColor}};height:19px;width:19px;vertical-align:middle}

Obsługa towaru archiwalnego