Integruj 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 własnej stronie internetowej. Proces składa się z 2 kroków: najpierw dołącza się plik JavaScript, a w drugim kroku można napisać minimalny kod HTML, który zostanie rozpoznany i przetworzony przez ten plik JavaScript.
Dołączanie pliku JavaScript
Poniższy fragment kodu należy umieścić w sekcji head lub body dokumentu HTML:
<script src="https://widgets.gunfinder.de/js/search.js" async></script>
Umieszczanie fragmentu HTML
Po dołączeniu pliku JavaScript można wstawić nowy element DIV, który musi otrzymać 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>
Spowoduje to uruchomienie wyszukiwania frazy {Suchanfrage} w Gunfinder, a wyniki zostaną wyświetlone na stronie. data-gunfinder-search-query to jedyny obowiązkowy atrybut. Pozostałe dostępne atrybuty można znaleźć w poniższej tabeli. Wszystkie atrybuty muszą mieć przedrostek 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 |
Cena minimalna. Liczba całkowita. |
> 0 < price-max (jeśli podano) |
Nie |
price-max |
Cena maksymalna. Liczba całkowita. |
> 0 > price-min (jeśli podano) |
Nie |
condition |
Stan przedmiotu |
new lub used |
Nie |
available |
Dostępny 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. Patrz opis poniżej. |
Obiekt JSON |
Nie |
sources |
Oddzielona przecinkami lista nazw źródeł, które mają być przeszukiwane. Domyślnie przeszukiwane są wszystkie źródła. |
Proszę skontaktuj się z nami |
Nie |
exclude-sources |
Oddzielona przecinkami lista nazw źródeł, które nie(!) mają być przeszukiwane. Domyślnie przeszukiwane są wszystkie źródła. |
Proszę skontaktuj się z nami |
Nie |
marketplace |
Jeśli true, wyświetla tylko wyniki z marketplace. Jeśli false, nie wyświetla wyników z marketplace. |
true lub false |
Nie |
Więcej przykładów:
<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>
Stylizacja
Jeśli widget nie ma być stylizowany za pomocą reguł CSS, dostępnych jest kilka prostych zmiennych, które można przekazać do widgetu jako obiekt JSON, aby zmienić jego wygląd.
Zmienna |
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 oferty |
Standardowe wartości CSS dla kolorów |
itemPriceColor |
Kolor ceny oferty |
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>