@eqsmarketing/frontend-site

# Equipmentshare This repo contains Equipmentshare's Greenhouse API Level 5 integration. To learn how to contribute, please see the [contributing guide](/docs/CONTRIBUTE.md.md). Links of interest: - [Webflow sandbox](https://webflow.com/design/fs-cjs-equipmentshare-sandbox) - [Notion project docs](https://www.notion.so/finsweet/Equipment-Share-535329d46aa24dd18e25943e3d3b8fb5) ## Table of Contents - [In a nutshell](#in-a-nutshell) - [Deployed scripts](#deployed-scripts) - [Scripts placement](#scripts-placement) - [Third party services](#3rd-party-services) <a id="in-a-nutshell"></a> ## 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. <a id="deployed-scripts"></a> ## Deployed scripts The following scripts have been deployed for this project: | Name | Latest | | ------------------------------- | -------------------------------------------------------------------------------------------------- | | src/careers/openings | https://cdn.jsdelivr.net/npm/@eqsmarketing/frontend-site@2.2.3/dist/careers/openings.js | | src/careers/department-template | https://cdn.jsdelivr.net/npm/@eqsmarketing/frontend-site@2.2.3/dist/careers/department-template.js | | src/careers/position | https://cdn.jsdelivr.net/npm/@eqsmarketing/frontend-site@2.2.3/dist/careers/position.js | | src/careers/custom-position | https://cdn.jsdelivr.net/npm/@eqsmarketing/frontend-site@2.2.3/dist/careers/custom-position.js | <a id="scripts-placement"></a> ## 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 [Check on sandbox](https://webflow.com/design/fs-cjs-equipmentshare-sandbox?pageId=63cfe2baee0fc137e3add718) #### Page setup The following scripts must be placed in the Custom Code section of the page settings, right in the "Inside `<head>` tag": ```html  <script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js" ></script>  <script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsload@1/cmsload.js"></script>  <script async src="https://cdn.jsdelivr.net/npm/@eqsmarketing/frontend-site@2.2.3/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 [Check on sandbox](https://webflow.com/design/fs-cjs-equipmentshare-sandbox?pageId=63cfe2baee0fc12eb9add6ee) #### Page setup The following scripts must be placed in the Custom Code section of the page settings, right in the "Inside `<head>` tag": ```html  <script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js" ></script>  <script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsload@1/cmsload.js"></script>  <script async src="https://cdn.jsdelivr.net/npm/@eqsmarketing/frontend-site@2.2.3/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] [Check on sandbox](https://webflow.com/design/fs-cjs-equipmentshare-sandbox?pageId=63cfe2baee0fc1fdc0add6f7&itemId=63cfe2baee0fc1df57add848) #### Page setup The following scripts must be placed in the Custom Code section of the page settings, right in the "Inside `<head>` tag": ```html  <script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js" ></script>  <script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsload@1/cmsload.js"></script>  <script async src="https://cdn.jsdelivr.net/npm/@eqsmarketing/frontend-site@2.2.3/dist/careers/department-template.js" ></script> ``` #### Custom embed An embed block must be placed on the page with the following code: ```html  <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. | <a id="3rd-party-services"></a> ## Third party services The following APIs are used in this project: | Service | Description | | ---------------------------------------------------------- | ---------------------------------- | | [Greenhouse](https://developers.greenhouse.io/job-board) | Used to fetch career position data | | [Finsweet Attributes](https://finsweet.com/attributes/api) | Used for custom filter and sorting |