Integracja 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 wyjaśnimy pokrótce, jak osadzić widget Gunfinder na własnej stronie internetowej. Zasadniczo proces składa się z 2 kroków: najpierw dołączany jest plik JavaScript, a w drugim kroku można napisać minimalny kod HTML, który jest rozpoznawany i przetwarzany przez plik JavaScript.
Osadzanie pliku JavaScript
Poniższy fragment kodu musi zostać umieszczony 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 posiadać 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="{zapytanie}"></div>
Spowoduje to uruchomienie wyszukiwania frazy {zapytanie} w Gunfinder, a wyniki zostaną wyświetlone na stronie. data-gunfinder-search-query jest jedynym obowiązkowym atrybutem. Pozostałe dostępne atrybuty można znaleźć w poniższej tabeli. Wszystkie atrybuty muszą posiadać 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 |
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. Zobacz opis poniżej. |
Obiekt JSON |
Nie |
sources |
Rozdzielana przecinkami lista nazw źródeł, które mają być przeszukiwane. Domyślnie przeszukiwane są wszystkie źródła. |
Prosimy skontaktuj się z nami |
Nie |
exclude-sources |
Rozdzielana przecinkami lista nazw źródeł, które nie(!) mają być przeszukiwane. Domyślnie przeszukiwane są wszystkie źródła. |
Prosimy 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="{zapytanie}" data-gunfinder-search-price-min="2500"></div>
<div data-gunfinder-search-widget data-gunfinder-search-query="{zapytanie}" data-gunfinder-search-available="true"></div>
Stylizacja
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ć 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 nagłówka 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>