Skip to content

Commit

Permalink
Merge pull request #25 from hlxsites/feature/forms-and-seperator
Browse files Browse the repository at this point in the history
Feature/forms and seperator
  • Loading branch information
pardeepgera23 authored Oct 27, 2023
2 parents 847f8ad + 9f03d10 commit 55acf67
Show file tree
Hide file tree
Showing 10 changed files with 75 additions and 32 deletions.
1 change: 0 additions & 1 deletion .eslintignore
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
helix-importer-ui
scripts/jquery-1.11.2.min.js
scripts/jquery.colorbox-min.js
scripts/swiper-342.jquery.min.js
scripts/main-scripts.js
scripts/gcse.js
scripts/v2.js
3 changes: 3 additions & 0 deletions blocks/forms/forms.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.forms {
padding: 50px 0;
}
25 changes: 25 additions & 0 deletions blocks/forms/forms.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { readBlockConfig } from '../../scripts/aem.js';

let formConfig = {};

export default function decorate(block) {
formConfig = readBlockConfig(block);
const form = document.createElement('div');
form.id = formConfig.target;
form.classList.add('content', 'outer');
block.textContent = '';
block.append(form);
}

export function isForm() {
return !!formConfig.target;
}

export function buildForm(hbspt) {
hbspt.forms.create({
region: formConfig.region,
portalId: formConfig.portalid,
formId: formConfig.formid,
target: `#${formConfig.target}`,
});
}
1 change: 1 addition & 0 deletions blocks/separator/separator.css
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/* seperator css */
6 changes: 6 additions & 0 deletions blocks/separator/separator.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export default function decorate(block) {
block.innerText = '';
const separator = document.createElement('hr');
separator.className = 'outer';
block.appendChild(separator);
}
47 changes: 19 additions & 28 deletions blocks/sidebar-form/sidebar-form.js
Original file line number Diff line number Diff line change
@@ -1,33 +1,24 @@
function embedHubSpotForm(formFields) {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/scripts/v2.js';
script.charset = 'utf-8';
script.setAttribute('async', '');
script.onload = () => {
window.hbspt.forms.create(formFields);
};
document.head.appendChild(script);
}
import { readBlockConfig } from '../../scripts/aem.js';

export default function decorate(block) {
const formDetails = {};
const tableRows = block.querySelectorAll('tr');
tableRows.forEach((row) => {
const cells = row.children;
if (cells.length >= 2) {
const key = cells[0].innerText.trim();
const value = cells[1].innerText.trim();
formDetails[key] = key === 'target' ? `#${value}` : value;
}
});
// Add a delay of 4 seconds (4000 milliseconds) before loading the form
setTimeout(() => {
embedHubSpotForm(formDetails);
}, 3000);
let formConfig = {};

export default function decorate(block) {
formConfig = readBlockConfig(block);
const form = document.createElement('div');
form.id = formDetails.target.replace('#', '');
form.id = formConfig.target;
block.textContent = '';
block.appendChild(form);
block.append(form);
}

export function isForm() {
return !!formConfig.target;
}

export function buildForm(hbspt) {
hbspt.forms.create({
region: formConfig.region,
portalId: formConfig.portalid,
formId: formConfig.formid,
target: `#${formConfig.target}`,
});
}
2 changes: 1 addition & 1 deletion head.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,4 @@
<link rel="stylesheet" href="/styles/template.css"/>
<link rel="stylesheet" href="/styles/responsive.css"/>
<link rel="stylesheet" href="/styles/gcse.css"/>
<link rel="stylesheet" href="/styles/styles_2020.css"/>
<link rel="stylesheet" href="/styles/styles_2020.css"/>
18 changes: 18 additions & 0 deletions scripts/delayed.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
// eslint-disable-next-line import/no-cycle
import { sampleRUM } from './aem.js';
import { buildForm, isForm } from '../blocks/forms/forms.js';

// Core Web Vitals RUM collection
sampleRUM('cwv');
Expand Down Expand Up @@ -34,3 +35,20 @@ if (
) {
loadGTM();
}

function loadHubSpot() {
const hsScriptEl = document.createElement('script');
hsScriptEl.type = 'text/javascript';
hsScriptEl.async = true;
hsScriptEl.setAttribute('id', 'hs-script-loader');
hsScriptEl.src = '//js.hsforms.net/forms/v2.js';
document.querySelector('head').append(hsScriptEl);
hsScriptEl.addEventListener('load', () => {
buildForm(hbspt); // eslint-disable-line
});
}

// only load this if there is a form block
if (isForm()) {
loadHubSpot();
}
2 changes: 1 addition & 1 deletion scripts/scripts.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
getMetadata,
} from './aem.js';

const LCP_BLOCKS = []; // add your LCP blocks to the list
const LCP_BLOCKS = ['forms']; // add your LCP blocks to the list

/**
* Builds hero block and prepends to main in a new section.
Expand Down
2 changes: 1 addition & 1 deletion scripts/v2.js

Large diffs are not rendered by default.

0 comments on commit 55acf67

Please sign in to comment.