@eqsmarketing/frontend-site
v3.1.2
Published
Equipmentshare's custom code for the Webflow build
Downloads
120
Readme
Equipmentshare
This repo contains Equipmentshare's Greenhouse API Level 5 integration. To learn how to contribute, please see the contributing guide.
Links of interest:
Table of Contents
In a nutshell
This custom Webflow site fetches data from the Greenhouse API and displays career positions on multiple pages. Some pages feature automatic filtering, while others allow the user to filter the results on demand.
Deployed scripts
The following scripts have been deployed for this project:
| Name | Latest | | ------------------------------- | -------------------------------------------------------------------------------------------------- | | src/careers/openings | https://cdn.jsdelivr.net/npm/@eqsmarketing/[email protected]/dist/careers/openings.js | | src/careers/department-template | https://cdn.jsdelivr.net/npm/@eqsmarketing/[email protected]/dist/careers/department-template.js | | src/careers/position | https://cdn.jsdelivr.net/npm/@eqsmarketing/[email protected]/dist/careers/position.js | | src/careers/custom-position | https://cdn.jsdelivr.net/npm/@eqsmarketing/[email protected]/dist/careers/custom-position.js |
Scripts placement
The following section outlines the specific pages and elements where the deployed scripts should be applied for optimal functionality. It's separated by pages and elements where data attributes are required.
Position Page
Page setup
The following scripts must be placed in the Custom Code section of the page settings, right in the "Inside <head> tag":
<!-- [Attributes by Finsweet] CMS Filter -->
<script
async
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js"
></script>
<!-- [Attributes by Finsweet] CMS Load -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsload@1/cmsload.js"></script>
<!-- Custom Code -->
<script
async
src="https://cdn.jsdelivr.net/npm/@eqsmarketing/[email protected]/dist/careers/position.js"
></script>Data attributes
Inside this page, you should add the following attributes to elements:
| ATTRIBUTE | DESCRIPTION |
| -------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| data-element = "department" | Placed to any text element, it will populate it with the job department. |
| data-element = "title" | Placed to any text element, it will populate it with the job title. |
| data-element = "location" | Placed to any text element, it will populate it with the job location. |
| data-element = "posted-date" | Placed to any text element, it will populate it with the job posted date. |
| data-element = "contract-type" | Placed to any text element, it will populate it with the job contract type. |
| data-element = "description" | Placed to a rich text element, it will populate it with the job details (note: all styles are coming from Greenhouse) |
Current Openings Page
Page setup
The following scripts must be placed in the Custom Code section of the page settings, right in the "Inside <head> tag":
<!-- [Attributes by Finsweet] CMS Filter -->
<script
async
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js"
></script>
<!-- [Attributes by Finsweet] CMS Load -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsload@1/cmsload.js"></script>
<!-- Custom Code -->
<script
async
src="https://cdn.jsdelivr.net/npm/@eqsmarketing/[email protected]/dist/careers/openings.js"
></script>Data attributes
Inside this page, you should add the following attributes to elements:
| ATTRIBUTE | DESCRIPTION |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| gh-element = "link" | Placed to an anchor link, will populate it with the job position URL. |
| gh-element = "title" | Placed to any text element, it will populate it with the job title |
| gh-element = "office" | Placed to any text element, it will populate it with the job location. This element must also have a fs-cmsfilter-field = "office" attribute. |
Departments Page [Collection]
Page setup
The following scripts must be placed in the Custom Code section of the page settings, right in the "Inside <head> tag":
<!-- [Attributes by Finsweet] CMS Filter -->
<script
async
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js"
></script>
<!-- [Attributes by Finsweet] CMS Load -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsload@1/cmsload.js"></script>
<!-- Custom Code -->
<script
async
src="https://cdn.jsdelivr.net/npm/@eqsmarketing/[email protected]/dist/careers/department-template.js"
></script>Custom embed
An embed block must be placed on the page with the following code:
<!-- [Attributes by Finsweet] CMS Filter -->
<script type="application/json">
{
"department_id": DEPARTMENT_ID,
"metadata": {
"name": "METADATA_NAME",
"value": "METADATA_VALUE"
}
}
</script>Note: DEPARTMENT_ID, METADATA_NAME and METADATA_VALUE are dynamic values that will be populated by the CMS. These are used for filtering, both department_id and metadata could be without the other.
Data attributes
Inside this page, you should add the following attributes to elements:
| ATTRIBUTE | DESCRIPTION |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| gh-element = "link" | Placed to an anchor link, will populate it with the job position URL. |
| gh-element = "title" | Placed to any text element, it will populate it with the job title |
| gh-element = "office" | Placed to any text element, it will populate it with the job location. This element must also have a fs-cmsfilter-field = "office" attribute. |
Third party services
The following APIs are used in this project:
| Service | Description | | ---------------------------------------------------------- | ---------------------------------- | | Greenhouse | Used to fetch career position data | | Finsweet Attributes | Used for custom filter and sorting |