Obsługa towaru archiwalnego

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

{{ translations.ArchivalProductInfo }}

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

{{ translations.CheaperInSet }}

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

{{translations.ArchivalProductInfo}}

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

{{ translations.ArchivalProductInfo }}

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

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

{{ translations.ArchivalProductInfo }}

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

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

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

{{translations.ArchivalProduct}}

{% endif -%}

{% endfor -%}

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

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

    {{translations.ArchivalProduct}}

    {% endif -%}

    {% else -%}

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

      {{translations.ArchivalProduct}}

      {% endif -%}

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

      {{translations.ArchivalProductInfo}}

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

      {{ attribute.Name }}

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

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




      {{ translations.Com_RecommendProduct }}



      {{ translations.Com_AskAboutProduct }}

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


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

      {{translations.ArchivalProduct}}

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

      {{translations.ArchivalProduct}}

      {% endif -%}

        {% else -%}

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

        {{translations.ArchivalProduct}}

        {% endif -%}

          {% endif -%}

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


          {{ translations.Com_RecommendProduct }}

          {{ translations.Com_AskAboutProduct }}

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

          {{translations.ArchivalProductInfo}}

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

          {{ attribute.Name }}

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

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



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


          {% endfor -%}

          {% endif -%}

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

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

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

          {% else -%}


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






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

          Czy ten artykuł był pomocny?

          Wyślij opnie