Zintegrować Gunfinder na własnej stronie internetowej
Widget Gunfinder daje właścicielom stron internetowych możliwość wyświetlania wyników wyszukiwania Gunfinder na własnej stronie. Dobrym przykładem jest integracja Gunfinder na Geartester (na samym dole strony).
Poniżej krótko wyjaśniamy, jak osadzić widget Gunfinder na swojej stronie . Proces zasadniczo składa się z 2 kroków: najpierw dołączasz plik JavaScript, a w drugim kroku możesz napisać minimalny kod HTML, który zostanie rozpoznany i przetworzony przez plik JavaScript.
Osadzenie pliku JavaScript
Następujący fragment kodu musi być osadzony w sekcji Head lub Body dokumentu HTML:
<script src="https://widgets.gunfinder.de/js/search.js" async></script>
Umieszczenie fragmentu HTML
Gdy plik JavaScript jest załadowany, można dodać nowy element DIV, który musi mieć atrybut o nazwie data-gunfinder-search-widget, aby został rozpoznany przez kod JavaScript. Oto prosty przykład:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Suchanfrage}"></div>
To uruchomi wyszukiwanie z hasłem {Suchanfrage} na Gunfinder, a wyniki zostaną wyświetlone na stronie. data-gunfinder-search-query to jedyny obowiązkowy atrybut. Inne możliwe atrybuty można znaleźć w poniższej tabeli. Wszystkie atrybuty muszą mieć prefiks data-gunfinder-search-.
Atrybut |
Opis |
Możliwe wartości |
Obowiązkowy |
query |
Zapytanie wyszukiwania |
Tekst |
Tak |
count |
Maksymalna liczba wyników. Liczba całkowita. Domyślnie: 5 |
> 0 < 30 |
Nie |
price-min |
Minimalna cena. Liczba całkowita. |
> 0 < price-max (jeśli podano) |
Nie |
price-max |
Maksymalna cena. Liczba całkowita. |
> 0 > price-min (jeśli podano) |
Nie |
condition |
Stan artykułu |
new lub used |
Nie |
available |
Dostępne od ręki. Domyślnie: false |
true lub false |
Nie |
category |
Ograniczenie wyszukiwania do określonej kategorii |
weapon, ammunition, optics, apparel, equipment |
Nie |
style |
Stylizacja. Zobacz opis poniżej. |
Obiekt JSON |
Nie |
sources |
Lista źródeł do przeszukania, oddzielona przecinkami. Domyślnie przeszukiwane są wszystkie źródła. |
Proszę skontaktuj się z nami |
Nie |
exclude-sources |
Lista źródeł, które nie mają być przeszukiwane, oddzielona przecinkami. Domyślnie przeszukiwane są wszystkie źródła. |
Proszę skontaktuj się z nami |
Nie |
marketplace |
Jeśli true, pokazuje tylko wyniki z Marktplatzu. Jeśli false, nie pokazuje wyników z Marktplatzu. |
true oder false |
Nie |
Weitere Beispiele:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Suchanfrage}" data-gunfinder-search-price-min="2500"></div>
<div data-gunfinder-search-widget data-gunfinder-search-query="{Suchanfrage}" data-gunfinder-search-available="true"></div>
Styling
Jeśli widget nie ma być stylizowany za pomocą reguł CSS, istnieje kilka prostych zmiennych, które można przekazać do widgetu jako obiekt JSON, aby zmienić wygląd widgetu.
Zmienne |
Opis |
Możliwe wartości |
fontSize |
Podstawowy rozmiar czcionki. Wpływa na cały widget. |
Standardowe wartości CSS dla rozmiarów |
itemTitleColor |
Kolor tytułu ogłoszenia |
Standardowe wartości CSS dla kolorów |
itemPriceColor |
Kolor ceny ogłoszenia |
Standardowe wartości CSS dla kolorów |
moreColor |
Kolor tekstu i obramowania przycisku „więcej ofert” |
Standardowe wartości CSS dla kolorów |
Przykład:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Suchanfrage}" data-gunfinder-search-style='{"fontSize": "15px", "itemTitleColor": "red"}'></div>