An active SSL certificate is the only requirement for using this library. If your website does not run under https set install an SSL certificate on your hosting. There are no dependencies that distributor-js requires, it’s vanilla JS with a few custom CSS classes and rules.
Embed the following <script> and empty <div> container on your website where you want to display the distributors.
Set these data attributes on the empty <div> container in order to to customize the distributors layout.
| Name | Type | Default | Description |
|---|---|---|---|
data-distributors | empty | Required. In order to display the distributors add this standalone data attribute to the empty <div> container | |
data-brand | string | empty | All distributor brands will be loaded if this data attribute is either empty or not used. Otherwise you can pass one of the following brand names: – Ilford– Polaroid– Peak Design– Samyang– General– Tamron– NiSi– Zhiyun |
data-filter | int | 0 | This data attribute only works in combination with the empty or not used data-brand attributeI order to to display the brand filter dropdown set the value of this data attribute to 1. Leave data-attribute empty, set it to 0 or don’t use at all to prevent the brand filter dropdown from being displayed. |
data-map | int | 0 | In order to display a map with distributors as markers set the value of this data attribute to 1. Leave data-attribute empty, set it to 0 or don’t use at all to prevent the map from being displayed. |
data-api-key | string | empty | Only required in combination with data attribute data-map. Provide a valid Google Maps API key as a string in order to properly display the map with distributors as markers.How to get a Google Maps API key? |
data-cols | int | 2 | This data attribute only works in combination with the data attribute data-map set to 1In order to control the amount of the columns for the distributors listing set this data-attribute to either: – 2– 3– 4 |
Layout without additional settings. Will display the distributors of all brands in a 4 columns listing without filter or map
Layout with listing of the distributors on the left side and the map on the right side. The brand filter dropdown will be displayed above the listing. (In order to make the map appear bigger the data attribute data-cols could be set to 2)
With the data-brand data attribute it’s possible to control which distributors from which brand will be listed. Only one specific brand can be set.