Skip to content

Commit

Permalink
initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@bluedeepart
bluedeepart committed Jan 24, 2025
1 parent 4d455b8 commit da46a18
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 74 deletions.
10 changes: 10 additions & 0 deletions blocks/forms/formHelper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ export const formMapping = [
{ type: 'ebook-promo', id: 'b83700e4-f00b-4b92-9124-fab2968f60b5' },
{ type: 'app-note-promo', id: 'ed0daf7c-99c6-4fd8-aa32-13d4e053fa64' },
{ type: 'product-promo', id: 'cb509c1d-3c9d-4d8a-ac06-11f6e8fd14d0' },
{ type: 'get-in-touch', id: '00d558ff-6cf3-4044-87d1-b94ea3f86b6d' },
];

export function getFormId(type) {
Expand Down Expand Up @@ -160,6 +161,15 @@ export function createSalesforceForm(hubspotForm, formConfig) {
const elementqdcrequest = input({ name: QDCRrequest, value: qdc, type: 'hidden' });
form.appendChild(elementqdcrequest);

// get-in-tough/contact form
const getInTouchInterests = hubspotForm.querySelector("select[name='get_in_touch_interests']");
if (getInTouchInterests === 'Sales' || getInTouchInterests === 'Tech support') {
elementqdcrequest.value = qdc;
} else {
elementqdcrequest.value = '';
}
// get-in-tough/contact form

/* subscribe */
let subscribe = hubspotForm.querySelector('input[name="subscribe"]');
if (subscribe && subscribe.checked) {
Expand Down
20 changes: 20 additions & 0 deletions blocks/forms/forms.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
getFormId, updateFormFields,
} from './formHelper.js';

let GLOBAL_CMP = '';
/* create hubspot form */
export function createHubSpotForm(formConfig, target, type = '') {
try {
Expand All @@ -24,6 +25,25 @@ export function createHubSpotForm(formConfig, target, type = '') {
const fieldValues = getFormFieldValues(formConfig);
updateFormFields(form, fieldValues);

// get-in-tough/contact form
if (type === 'get-in-touch') {
GLOBAL_CMP = formConfig.cmp;
const cmpInput = form.querySelector("input[name='cmp']");
const requestedQDCDiscussion = form.querySelector('input[name="requested_qdc_discussion__c"]');

cmpInput.value = '';
form.querySelector("select[name='get_in_touch_interests']").addEventListener('change', (evt) => {
if (evt.target.value === 'Sales' || evt.target.value === 'Tech support') {
requestedQDCDiscussion.value = 'Call';
cmpInput.value = GLOBAL_CMP;
} else {
requestedQDCDiscussion.value = '';
cmpInput.value = '';
}
});
}
// get-in-tough/contact form

// Customize the submit button
const submitInput = form.querySelector('input[type="submit"]');
if (submitInput) {
Expand Down
155 changes: 81 additions & 74 deletions blocks/get-in-touch/get-in-touch.js
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,61 @@
import { div } from '../../scripts/dom-helpers.js';
import ffetch from '../../scripts/ffetch.js';
import { getCookie } from '../../scripts/scripts.js';
import { getFormId } from '../forms/formHelper.js';
import { createHubSpotForm, loadHubSpotScript } from '../forms/forms.js';

const CONTACT_CMP_ID = '701Rn00000S2zk6IAB';
let DEFAULT_CMP = '';
let REGION = new URLSearchParams(window.location.search).get('region');
const COMMENTS = 'comments';

function hubSpotFinalUrl(hubspotUrl, paramName) {
const hubUrl = new URL(hubspotUrl.href);
const { searchParams } = hubUrl;
const cmp = getCookie('cmp') || searchParams.get('cmp');
const returnURL = new URLSearchParams(decodeURIComponent(searchParams.get('return_url')));
const queryParams = new URLSearchParams(window.location.search);

searchParams.delete('cmp');
searchParams.delete('region');
searchParams.delete('return_url');
const formType = 'get-in-touch';
const pathName = window.location.origin + window.location.pathname;
const formConfig = {
formId: getFormId(formType),
cmp: CONTACT_CMP_ID,
redirectUrl: new URL(`?msg=success&region=${REGION}`, pathName),
};

function updateParams(params) {
const returnUrlInput = document.querySelector("input[name='return_url']");
const baseRedirectUrl = new URL(formConfig.redirectUrl, pathName);
const cmp = getCookie('cmp') || baseRedirectUrl.searchParams.get('cmp');

if (!DEFAULT_CMP) {
DEFAULT_CMP = cmp;
}

returnURL.set('region', queryParams.get('region') || REGION);
Object.entries(params).forEach(([key, value]) => {
if (value || value === 'sales') {
baseRedirectUrl.searchParams.set(key, value);
} else if (value === 'general') {
baseRedirectUrl.searchParams.delete(key);
} else {
baseRedirectUrl.searchParams.delete(key);
}
});

if (paramName === 'general') {
searchParams.delete(COMMENTS);
}
if (paramName === COMMENTS) {
searchParams.set(paramName, 'Sales');
}
baseRedirectUrl.searchParams.delete('comments');
baseRedirectUrl.searchParams.delete('cmp');

const searchPatamsStr = searchParams.toString() ? `&${(searchParams.toString())}` : '';
const queryStr = `?return_url=${returnURL.toString()}${searchPatamsStr}&cmp=${cmp || DEFAULT_CMP}`;
return new URL(`${hubspotUrl.pathname}${queryStr}`, hubspotUrl);
formConfig.redirectUrl = baseRedirectUrl.pathname + baseRedirectUrl.search;
returnUrlInput.value = new URL(formConfig.redirectUrl, pathName);
}

function createForm(block, hubspotUrl) {
const hubspotIframeWrapper = document.createElement('div');
const hubspotIframe = document.createElement('iframe');
hubspotIframeWrapper.className = 'hubspot-iframe-wrapper get-in-touch-form';
hubspotIframe.setAttribute('loading', 'lazy');
hubspotIframeWrapper.appendChild(hubspotIframe);
hubspotUrl.parentNode.replaceChild(hubspotIframeWrapper, hubspotUrl);

const observer = new IntersectionObserver((entries) => {
if (entries.some((e) => e.isIntersecting)) {
observer.disconnect();
const hubUrl = hubSpotFinalUrl(hubspotUrl, 'region');
hubspotUrl.href = hubUrl.href;
hubspotIframe.src = hubspotUrl.href;
}
});
observer.observe(block);
/* create form */
function createForm(block) {
const contactFormID = 'get-in-touch-form';
const hubspotIframeWrapper = div(
{ class: 'hubspot-form-wrapper' },
div({
class: 'hubspot-form show-label',
id: contactFormID,
}));

loadHubSpotScript(createHubSpotForm.bind(null, formConfig, contactFormID, formType));
block.firstElementChild.firstElementChild.appendChild(hubspotIframeWrapper);
}

/* create google map */
function createMap(block, mapUrl) {
const mapIframeWrapper = document.createElement('div');
const mapIframe = document.createElement('iframe');
Expand All @@ -66,31 +73,24 @@ function createMap(block, mapUrl) {
observer.observe(block);
}

function regenerateForm(hubspotUrl, params) {
const hubspotIframe = document.querySelector('.get-in-touch-form');
if (hubspotUrl) {
const hubUrl = hubSpotFinalUrl(hubspotUrl, params);
hubspotUrl.href = hubUrl.href;
hubspotIframe.querySelector('iframe').setAttribute('src', hubspotUrl);
}
}

function scrollToForm(link, hubspotUrl, region) {
const hubspotIframe = document.querySelector('.get-in-touch-form');
function scrollToForm(link, region) {
const hubspotFormWrapper = document.getElementById('get-in-touch-form');
const getInTouchBlock = document.querySelector('.get-in-touch');
if (hubspotIframe && hubspotUrl) {
const url = new URLSearchParams(hubspotUrl.href);
if (!DEFAULT_CMP) {
DEFAULT_CMP = url.get('cmp');
}
const getInTouchInterestsSelect = hubspotFormWrapper.querySelector("select[name='get_in_touch_interests']");

if (hubspotFormWrapper) {
let params = 'general';
if (link && link.getAttribute('title') === 'Sales Inquiry Form') {
params = COMMENTS;
DEFAULT_CMP = CONTACT_CMP_ID;
params = 'sales';
getInTouchInterestsSelect.value = 'Sales';
getInTouchInterestsSelect.dispatchEvent(new Event('change', { bubbles: true }));
} else {
getInTouchInterestsSelect.selectedIndex = 0;
}
const hubUrl = hubSpotFinalUrl(hubspotUrl, params, region);
hubspotUrl.href = hubUrl.href;
hubspotIframe.querySelector('iframe').setAttribute('src', hubspotUrl);
updateParams({ comments: params, region, cmp: DEFAULT_CMP });
}

window.scroll({
top: getInTouchBlock.offsetTop - 100,
behavior: 'smooth',
Expand All @@ -101,6 +101,8 @@ export default async function decorate(block) {
const queryParams = new URLSearchParams(window.location.search);
const hubspotUrl = block.querySelector('[href*="https://info.moleculardevices.com"]');
const mapUrl = block.querySelector('[href*="https://maps.google.com"]');
// block.querySelector('p:last-child').remove();
// console.log(block);

/* set success msg */
if (queryParams.has('msg') && queryParams.get('msg') === 'success') {
Expand All @@ -120,7 +122,7 @@ export default async function decorate(block) {
}, 1000);
} else {
block.lastElementChild.remove(); // success message we don't need for this case
createForm(block, hubspotUrl);
createForm(block);
createMap(block, mapUrl);
}

Expand All @@ -131,14 +133,30 @@ export default async function decorate(block) {
link.addEventListener('click', () => {
const regionName = link.hash.split('#')[1] || queryParams.get('region');
REGION = regionName;
regenerateForm(hubspotUrl, '');

// update region
updateParams({ region: REGION });

// set default country value to FIND A LOCAL DISTRIBUTOR
setTimeout(() => {
document.getElementById('country').selectedIndex = 1;
}, 500);
});
});
}

/* scroll to form on click of inquiry links */
const inquiryLinks = ['General Inquiry Form', 'Sales Inquiry Form', 'Contact Local Team', 'Service plans/warranty'];
const links = document.querySelectorAll('a[title]');
links.forEach((link) => {
if (inquiryLinks.includes(link.getAttribute('title'))) {
link.addEventListener('click', (event) => {
event.preventDefault();
scrollToForm(link, REGION);
}, false);
}
});

/* get region on country change */
const distributors = await ffetch('/contact/local-distibutors.json').withFetch(fetch).all();
const searchButton = document.querySelector('#searchButton > button');
Expand All @@ -157,19 +175,8 @@ export default async function decorate(block) {
const countryObj = distributors.filter(
(dist) => dist.DisplayCountry === countrySelect.value)[0].Region.toLowerCase();
REGION = countryObj || queryParams.get('region');
regenerateForm(hubspotUrl, '');
// updateParams(hubspotUrl, '');
updateParams();
});
}

/* scroll to form on click of inquiry links */
const inquiryLinks = ['General Inquiry Form', 'Sales Inquiry Form', 'Contact Local Team', 'Service plans/warranty'];
const links = document.querySelectorAll('a[title]');
links.forEach((link) => {
if (inquiryLinks.includes(link.getAttribute('title'))) {
link.addEventListener('click', (event) => {
event.preventDefault();
scrollToForm(link, hubspotUrl, REGION);
}, false);
}
});
}

0 comments on commit da46a18

Please sign in to comment.