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-%}
{% 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;
}
Czy ten artykuł był pomocny?
Inne w kategorii
-
-1
- 2099
-
1
- 2273
-
-1
- 2669
-
-26
- 1636
-
Zmiana nagłówka sekcji polecanych towarów na przykładzie szablonu Topaz
-
0
- 2880
-
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
Oferta e-Commerce
Demo Comarch e-Sklep
Zamów Comarch e-Sklep
Cennik Comarch e-Sklep
Comarch e-Sale
Comarch B2B
Czym się różni Comarch
e-Sklep B2B od Comarch B2B?
Przydatne linki
Spis treści
Stwórz darmowy szablon
Konfigurator produktu
Więcej o Comarch ERP
Pomoc Comarch Betterfly
Pomoc Comarch ERP Optima
Pomoc Comarch ERP XL
Pomoc Comarch ERP Altum
Oprogramowanie e-commerce
Sztuczna Inteligencja (AI)