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

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);

});

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"/>');

                }

            }

      }

}

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;

}

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