Obsługa towaru archiwalnego

Wskazówka

Od 1 czerwca 2025 roku zakończyliśmy aktualizację oraz wydawanie nowych wersji szablonów Bursztyn, Agat i Opal, a tym samym ich wsparcie, aby skupić się na nowoczesnych rozwiązaniach, które jeszcze lepiej odpowiadają na potrzeby dynamicznie rozwijającego się rynku e-commerce.

Zachęcamy Was do przejścia na nasze nowe, udoskonalone szablony. Dla sklepów B2C polecamy szablony Topaz, One Page Shop oraz Dla Gastronomii, natomiast dla platform B2B idealnym wyborem będą Rubin i Szafir.

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 -%}

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 -%}

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

{{ translations.EarnLoyaltyPoints | Format:quantityUnit }}: {{ activeProduct.Points }} {{ translations.PointsShortcut }}

{% endif -%}

{% assign flagsQuantity = product.Flags | Size -%} {% for flag in product.Flags limit: 3 -%}- {% if flag.Type == „Reward” -%} {{ translations.PointsProduct }}{% if usr.Authenticated and activeProduct.PointsPrice != null -%}: {{ activeProduct.PointsPrice }} {{ translations.PointsShortcut }}/{{ product.SaleUnit }}{% endif -%} {% else -%} {{ flag.Text }} {% endif -%}

{% 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 -%} {{ translations.ChooseProductVariant }} {% endif -%} {% if activeProduct.Availability.Text != '' and product.Archival == false -%}

{{ translations.Availability }}: {{ activeProduct.Availability.Text }}

{% 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 -%}

{% 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; }
A na końcu pliku scss/globals/_globals-m.scss wklej taki kod:
.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 -%}

{% 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 -%}
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 -%}
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 -%}
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;
}
}

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 -%}

{% 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 -%}
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 %}
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 -%} {{ translations.Com_AddFeedback }} {% 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; }

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 -%}

{% 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 -%}
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; }

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:

{% for flag in product.Flags -%}
{{ flag.Text }}
{% endfor %}

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

{% for image in product.Images -%}- {% if image.Id != -1 -%}
{{image | Img: 'compact’}}
{% else -%}
{{’css/img/img-placeholder.jpg’ | Img, translations.DefaultImage}}
{% endif -%}

{% endfor -%}

{% for image in product.Images -%}

{% if image.Id != -1 -%}
{{image | Img: 'grande’}}
{% else -%}
{{’css/img/img-placeholder.jpg’ | Img, translations.DefaultImage}}
{% endif -%}
{% if product.Archival -%}

{% endif -%}

{% endfor -%}

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

{{product.Images[0] | Img: 'grande’}}
{% if product.Archival -%}

{% endif -%}

{% else -%}

{{’css/img/img-placeholder.jpg’ | Img, translations.DefaultImage}}
{% if product.Archival -%}

{% endif -%}

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

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

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

{{ translations.Crt_Delivery }}:
{{ translations.Sea_From | Downcase }} {{ product.DeliveryCost | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }}

|
{% endif -%}
{% if stockLevel.Control -%}

{{ translations.Com_StockLvl }}:
{% unless stockLevel.Type == 2 or stockLevel.Type == 4 or stockLevel.Text == null -%}
{{ stockLevel.Text }}
{% endunless -%}
{% if stockLevel.Type == 4 -%}
{{ stockLevel.Value | Normalize }} {{ product.SaleUnit }}
{% endif -%}
{% if stockLevel.Type == 1 or stockLevel.Type == 2 -%}
{% unless stockLevel.ImageUrl == null -%}
{{stockLevel.ImageUrl | Img: ”, stockLevel.Text}}
{% endunless -%}
{% endif -%}

|
{% endif -%}

{{ translations.Com_Availability }}:
{% unless product.Availability.Text == ” or product.Availability.Type == 2 -%}
{{ product.Availability.Text }}
{% endunless -%}
{% if product.Availability.Type == 1 or product.Availability.Type == 2 -%}
{{product.Availability.ImageUrl | Img: ”, product.Availability.Text}}
{% endif -%}
{% unless product.Availability.Date == null -%}
({{ product.Availability.Date | Date:’d’ }})
{% endunless -%}

{% endif -%}

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

{% endif -%}

Kawałek niżej znajdziesz kontener z klasą product-details__reviewsContainer. Podmień go poniższym kodem:
{% unless product.Archival and product.RatingCount == 0 -%}

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

{% 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 -%}

{% for attribute in product.Supplies.AttributeNames -%}
{{ attribute.Name | H }}

{% endfor -%}

{% elseif product.AttributesPolyvalent != empty -%}
{% for attribute in product.AttributesPolyvalent -%}

{% for value in attribute.Values -%}
{{ value.Value | H }}
{% endfor -%}

{% endfor -%}
{% endif -%}
{% if product.Batch == null or product.Batch == false -%}
{% if product.AttributesEditable != empty -%}
{% assign i = 0 -%}
{% for attribute in product.AttributesEditable -%}

{% assign i = i | Plus: 1 -%}
{% endfor -%}
{{ i }}
{% endif -%}
{% endif -%}
{% if product.Units[1] -%}

{{ translations.Com_MeasureUnit }}
{% for unit in product.Units -%}

{% endfor -%}

{% endif -%}
{% 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 -%}

{% 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 -%}

{% 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 -%}

{% if stockLevel and stockLevel.Control -%}
{% assign stockValue = stockLevel.Value | ToString | Split: ’,’ -%}

{% endif -%}

{% endunless -%}
{% endif -%}

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

{% else -%}
{{ translations.Com_NotifyMeAboutAvailability }}

{% endif -%}

{% else -%}
{{translations.ArchivalProductCheckInfo}}
{% 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}

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:

{% for flag in product.Flags -%}
{{ flag.Text }}
{% endfor %}

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

{% for image in product.Images -%}

{% if image.Id != -1 -%}
{{image | Img: 'grande’}}
{% else -%}
{{’css/img/img-placeholder.jpg’ | Img, translations.DefaultImage}}
{% endif -%}
{% if product.Archival -%}

{% endif -%}

{% endfor -%}

{% for image in product.Images -%}- {% if image.Id != -1 -%}
{{image | Img: 'compact’}}
{% else -%}
{{’css/img/img-placeholder.jpg’ | Img, translations.DefaultImage}}
{% endif -%}

{% endfor -%}

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

{{product.Images[0] | Img: 'grande’}}
{% if product.Archival -%}

{% endif -%}

{% else -%}

{{’css/img/img-placeholder.jpg’ | Img, translations.DefaultImage}}
{% if product.Archival -%}

{% endif -%}

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

{% endif -%}

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

{% endif -%}

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

{% 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 -%}

{% for attribute in product.Supplies.AttributeNames -%}
{{ attribute.Name | H }}

{% endfor -%}

{% elseif product.AttributesPolyvalent != empty -%}
{% for attribute in product.AttributesPolyvalent -%}

{% for value in attribute.Values -%}
{{ value.Value | H }}
{% endfor -%}

{% assign i = i | Plus: 1 -%}
{% endfor -%}
{{ i }}
{% endif -%}
{% endif -%}
{% endif -%}
{% if product.Units[1] -%}

{{ translations.Com_MeasureUnit }}
{% for unit in product.Units -%}

{% endfor -%}

{% endif -%}

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

{% if stockLevel.Control -%}

{% endif -%}

{{ translations.Com_Availability }}
{% unless product.Availability.Text == ” or product.Availability.Type == 2 -%}
{{ product.Availability.Text }}:
{% endunless -%}
{% if product.Availability.Type == 1 or product.Availability.Type == 2 -%}
{{product.Availability.ImageUrl | Img: ”, product.Availability.Text}}
{% endif -%}
{% unless product.Availability.Date == null -%}
({{ product.Availability.Date | Date:’d’ }})
{% endunless -%}

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

{{ translations.Crt_Delivery }}
{{ translations.Sea_From | Downcase }} {{ product.DeliveryCost | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }}

{% endif -%}

{% 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 -%}

{% if stockLevel and stockLevel.Control -%}
{% assign stockValue = stockLevel.Value | ToString | Split: ’,’ -%}

{% endif -%}

{% endunless -%}
{% endif -%}

{% if customer.HidePrices == true -%}
{{ translations.Com_LogInToSeePrice }}
{% else -%}
{{ translations.Com_NotifyMeAboutAvailability }}

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

{% endif -%}

{% else -%}
{{translations.ArchivalProductCheckInfo}}
{% endif -%}

Czy ten artykuł był pomocny?

Wyślij opinie

Inne w kategorii

Wyszukiwarka zaawansowana w szablonie Topaz
-1
2098
Ustawienia paska nawigacji w szablonie Szafir
1
2273
Aktualizacja filtrów i wyszukiwarki w szablonach
-1
2668
Dodanie nowego widoku filtrów
-26
1636
Zmiana nagłówka sekcji polecanych towarów na przykładzie szablonu Topaz
0
2880
Szablon i treści wiadomości e-mail
0
3135

Społeczność Comarch

Dzięki społeczności Comarch ERP rozwiązujemy problemy, dzielimy się pomysłami oraz informujemy o nowościach.

Dołącz do Społeczności Comarch

Obsługa towaru archiwalnego

Obsługa towaru archiwalnego

Szafir

Agat

Bursztyn

Opal

Topaz

Czy ten artykuł był pomocny?

Inne w kategorii

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt