Wyświetlanie drugiego zdjęcia na liście towarów

W tym artykule dowiesz się jak dodać możliwość wyświetlania drugiego zdjęcia na liście towarów.

Wskazówka

W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować i kompilować

Wskazówka

Kod wykorzystany do przykładu należy do szablonu Opal

Uwaga

Do zrozumienia tego artykułu wymagana jest wiedza z zakresu HTML, CSS, JavaScript oraz Liquid

Pobranie numeru Id zdjęć

Pierwszym krokiem jest dodanie kodu odpowiadającego za sprawdzenie czy produkt, na który najechaliśmy myszką ma więcej niż jedno zdjęcie. W takim wypadu, pobieramy numery Id tych kolejnego ze zdjęć i osadzamy je w elemencie html, odpowiadającym za wyświetlanie się zdjęcia produktu.

Przyklad

Kod odpowiadający za wyświetlenie listy produktów oraz sprawdzenie, czy główne zdjęcie produktu istnieje.


{% for prod in productlist.Product-%}
  <div class="product-item {% if prod.ImageId == -1 -%} no-photo {% endif -%}">
    {% if prod.ImageId <> -1 -%}{{ prod | Img:'large' }}{% endif -%}
  </div>
{% endfor -%}

{% for prod in productlist.Product-%}

{% if prod.ImageId <> -1 -%}{{ prod | Img:'large' }}{% endif -%}

</div>

{% endfor -%}

Gdzie prod jest przekazywanym w pętli for obiektem productlist.Products. Zwraca on informacje o aktualnie wyświetlonej liście produktów (w tym interesujący nas ImageId).

Odpowiednio dla reszty szablonów obiektami zwracającymi listę produktów są:

Szablon Topaz — products
Szablon Agat — productlist
Szablon Bursztyn — productlist
Szablon Szafir — products

Dodanie logiki

W celu sprawdzenia ilości dostępnych zdjęć dla danego produktu, zastosujemy następującą funkcje JavaScript (jQuery):


$('body').on('mouseenter', '.product-item', function () {
      var pItem = $(this);
      putPhoto(pItem);
});

$('body').on('mouseenter', '.product-item', function () {

var pItem = $(this);

putPhoto(pItem);

});

Funkcja ta „nasłuchuje” momentu, w którym myszka wejdzie na zdjęcie i uruchamia kolejną funkcję, która odpowiada za umiejscowienie kolejnego zdjęcia w kodzie strony.


window.putPhoto = function (pItem) {
    var imgContainer = pItem.find('.product-item');
    var images = imgContainer.find('img');
    var imagesCount = images.length;
    if (pItem.data('loaded') == undefined) {
        $.get(path, { __collection: 'productdetails.Product' }, function (res) {
            if (imagesCount == 1) {
                var imagesCol = res.collection.Images;
                if (imagesCol.length > 1) {
                    pItem.addClass('hover');
                    pItem.data('loaded', 'true');
                    var img = imagesCol[1];
                    imgContainer.append('<img alt="" src="img/large/' + img.Id + '/.jpg"/>');
                }
            }
      }
}

window.putPhoto = function (pItem) {

var imgContainer = pItem.find('.product-item');

var images = imgContainer.find('img');

var imagesCount = images.length;

if (pItem.data('loaded') == undefined) {

$.get(path, { __collection: 'productdetails.Product' }, function (res) {

if (imagesCount == 1) {

var imagesCol = res.collection.Images;

if (imagesCol.length > 1) {

pItem.addClass('hover');

pItem.data('loaded', 'true');

var img = imagesCol[1];

imgContainer.append('<img alt="" src="img/large/' + img.Id + '/.jpg"/>');

}

Dodanie styli

Na końcu wystarczy dodać style w taki sposób,tak aby zdjęcia były wyświetlane za zmianę.


.product-item.hover img:nth-child(1) {
  display: block;
}
.product-item.hover img:nth-child(2) {
  display: none;
}
.product-item.hover:hover img:nth-child(1) {
  display: none;
}
.product-item.hover:hover img:nth-child(2) {
  display: block;
}

.product-item.hover img:nth-child(1) {

display: block;

}

.product-item.hover img:nth-child(2) {

display: none;

}

.product-item.hover:hover img:nth-child(1) {

display: none;

}

.product-item.hover:hover img:nth-child(2) {

display: block;

}

Wyświetlanie drugiego zdjęcia na liście towarów