php js css php js css

Changes

Changes to Page: membership

220079
Today 1:28am
Guevarra, Kim
Modified page
225004
Today 3:58am
Guevarra, Kim
Modified page
Handle Child Routes:
Content:
Id:
/new-site/join-us/membership/
/new-site/join-us/membership/
Title:
Membership
Membership
Content Additional:
{"togglable_footerCTA":"on","togglable_memberCTA":null,"togglable_testCTA":null,"togglable_newslettercta":null}
{"togglable_footerCTA":"on","togglable_memberCTA":null,"togglable_testCTA":null,"togglable_newslettercta":null}
Css:
/* --- General Elements --- */
span.template-selectedProduct {}

select {
width: 100% !important;
}

.product-price {
font-size: 1.432rem;
}

/* --- Grid Container --- */
.template-productFlexContainer {
display: grid !important;
align-items: center;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 1.5rem;
padding: 0;
margin: 0;
}

/* --- Radio Button Group --- */
.s8-radiobuttongroup {
display: block !important;
}

/* --- Product Flex Card --- */
.template-productFlex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #333333;
color: #fff;
text-align: center;
min-height: 230px;
padding: 25px;
position: relative;
}

.template-productFlex .s8-radiobutton-container {
opacity: 1 !important;
min-height: unset !important;
min-width: unset !important;
}

.template-productFlex .s8-radiobutton-container,
.template-productFlex input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0;
opacity: 0;
}

/* --- Radio Button Appearance --- */
.template-productFlex label.s8-radiobutton-container input ~ .s8-radiobutton {
border: none;
}

label.s8-radiobutton-container input:checked ~ .s8-radiobutton:before {
opacity: 0;
}

.template-productFlex.selected {
background: #d90e30;
}

/* --- Quantity Counter --- */
.counter {
position: absolute;
right: 0;
bottom: -67px;
}

.counter .formRowCol1 {
display: none;
min-width: 100px;
width: auto;
}

.counter .formRowLabel {
color: #989898;
font-size: 2rem;
letter-spacing: 2px;
padding-top: 0.8rem;
text-transform: uppercase;
}

.counter .spinBox > input {
display: none !important;
}

.counter .spinBoxUp,
.counter .spinBoxDown {
background: #720c1c;
color: #fff;
display: inline-block;
width: 2rem;
height: 2rem;
line-height: 2rem;
text-align: center;
position: static;
top: 0;
bottom: 0;
right: 0;
opacity: 1;
}

.counter .spinBoxUp:before,
.counter .spinBoxDown:before {
content: '+';
font-size: 1.2rem;
position: static;
width: 100%;
height: 100%;
left: 0;
top: 0;
border: none;
transform: none;
}

.counter .spinBoxDown:before {
content: '-' !important;
}
/* --- General Elements --- */
span.template-selectedProduct {}

select {
width: 100% !important;
}

.product-price {
font-size: 1.432rem;
}

/* --- Grid Container --- */
.template-productFlexContainer {
display: grid !important;
align-items: center;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 1.5rem;
padding: 0;
margin: 0;
}

/* --- Radio Button Group --- */
.s8-radiobuttongroup {
display: block !important;
}

/* --- Product Flex Card --- */
.template-productFlex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #333333;
color: #fff;
text-align: center;
min-height: 230px;
padding: 25px;
position: relative;
}

.template-productFlex .s8-radiobutton-container {
opacity: 1 !important;
min-height: unset !important;
min-width: unset !important;
}

.template-productFlex .s8-radiobutton-container,
.template-productFlex input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0;
opacity: 0;
}

/* --- Radio Button Appearance --- */
.template-productFlex label.s8-radiobutton-container input ~ .s8-radiobutton {
border: none;
}

label.s8-radiobutton-container input:checked ~ .s8-radiobutton:before {
opacity: 0;
}

.template-productFlex.selected {
background: #d90e30;
}

/* --- Quantity Counter --- */
.counter {
position: absolute;
right: 0;
bottom: -67px;
}

.counter .formRowCol1 {
display: none;
min-width: 100px;
width: auto;
}

.counter .formRowLabel {
color: #989898;
font-size: 2rem;
letter-spacing: 2px;
padding-top: 0.8rem;
text-transform: uppercase;
}

.counter .spinBox > input {
display: none !important;
}

.counter .spinBoxUp,
.counter .spinBoxDown {
background: #720c1c;
color: #fff;
display: inline-block;
width: 2rem;
height: 2rem;
line-height: 2rem;
text-align: center;
position: static;
top: 0;
bottom: 0;
right: 0;
opacity: 1;
}

.counter .spinBoxUp:before,
.counter .spinBoxDown:before {
content: '+';
font-size: 1.2rem;
position: static;
width: 100%;
height: 100%;
left: 0;
top: 0;
border: none;
transform: none;
}

.counter .spinBoxDown:before {
content: '-' !important;
}
Js:
document.addEventListener('DOMContentLoaded', function () {
// Select all radio inputs inside .template-productFlex
const productFlexBoxes = document.querySelectorAll('.template-productFlex');

productFlexBoxes.forEach(function (box) {
const radio = box.querySelector('input[type="radio"]');

if (radio) {
// Initial state on load
if (radio.checked) {
box.classList.add('selected');
}

// Listen for changes
radio.addEventListener('change', function () {
// Remove 'selected' from all .template-productFlex elements sharing the same name
const allRadios = document.querySelectorAll(`input[name="${radio.name}"]`);
allRadios.forEach(function (r) {
const parent = r.closest('.template-productFlex');
if (parent) {
parent.classList.remove('selected');
}
});

// Add 'selected' class to the current one
if (radio.checked) {
box.classList.add('selected');
}
});
}
});
});
document.addEventListener('DOMContentLoaded', function () {
// Select all radio inputs inside .template-productFlex
const productFlexBoxes = document.querySelectorAll('.template-productFlex');

productFlexBoxes.forEach(function (box) {
const radio = box.querySelector('input[type="radio"]');

if (radio) {
// Initial state on load
if (radio.checked) {
box.classList.add('selected');
}

// Listen for changes
radio.addEventListener('change', function () {
// Remove 'selected' from all .template-productFlex elements sharing the same name
const allRadios = document.querySelectorAll(`input[name="${radio.name}"]`);
allRadios.forEach(function (r) {
const parent = r.closest('.template-productFlex');
if (parent) {
parent.classList.remove('selected');
}
});

// Add 'selected' class to the current one
if (radio.checked) {
box.classList.add('selected');
}
});
}
});
});
Php Source:
<?php

function onFormSubmit($arrValues)
{
$arrContact['contact_first_name'] = $arrValues['contact_first_name'];
$arrContact['contact_last_name'] = $arrValues['contact_last_name'];
$arrContact['contact_email'] = $arrValues['contact_email'];
$arrContact['contact_password'] = $arrValues['contact_password'];

// save first contact
$iContactId = \Components\Customers\Contacts::save($arrContact);
\Components\Customers\Contacts::currentLoginViaContactId($iContactId);

if ($arrValues['product_id'] == 308)
{
$i = 1;
$strFormName = 'additional_contact_family_' . $i;
while (isset($arrValues[$strFormName]))
{
$arrFamilyContact = $arrValues[$strFormName];
$strRelationship = $arrFamilyContact['relationship_type_id'];
varDump($arrFamilyContact);
unset($arrFamilyContact['relationship_type_id']);
$iFamilyContactId = \Components\Customers\Contacts::save($arrFamilyContact);

if ($iFamilyContactId)
{
\Components\Customers\Contacts\Relationships::create($iContactId, $iFamilyContactId, $strRelationship);
}
$i++;
$strFormName = 'additional_contact_family_' . $i;
}
}
}

function createCounter($last)
{
return range(1, $last);
}

function updatePreferencesOnSubmit($arrValues, $iContactId = NULL)
{
if(!$iContactId)
{
$iContactId = \Components\Customers\Contacts::currentContactId(true);
}
}

function getRelationshipCategory($strType1, $strType2)
{
if($strType1 == 'Individual' && $strType2 == 'Individual')
{
return 'I2I';
}

if($strType1 == 'Individual' && $strType2 == 'Company')
{
return 'I2C';
}

if($strType1 == 'Company' && in_array($strType2, ['Individual', '']))
{
return 'I2C';
}

if($strType1 == 'Company' && $strType2 == 'Company')
{
return 'C2C';
}

return 'I2I';
}

function getContactType($arrContact)
{
if(!is_array($arrContact))
{
$arrContact = \Components\Customers\Contacts::get($arrContact);
}

if(isset($arrContact['contact_type']))
{
return $arrContact['contact_type'];
}

return null;
}

function renderRelationship($arrContact1, $arrContact2, $strRelationshipType)
{
if(!is_array($arrContact1))
{
$arrContact1 = \Components\Customers\Contacts::get($arrContact1);
}

if(!is_array($arrContact2))
{
$arrContact2 = \Components\Customers\Contacts::get($arrContact2);
}

$strContact1Name = \Components\Customers\Contacts::renderName($arrContact1);
$strContact2Name = \Components\Customers\Contacts::renderName($arrContact2);

$strRelationshipTitle = \Components\Customers\Contacts\Relationships\Types::getColumn($strRelationshipType, 'relationship_type_title');

if(strpos($strRelationshipType, "I2C") === 0 && $arrContact1['contact_type'] == 'Company')
{
return $strContact2Name . ' is ' . $strRelationshipTitle . ' of &nbsp;' . $strContact1Name;
}

return $strContact1Name . ' is ' . $strRelationshipTitle . ' of &nbsp;' . $strContact2Name;
}

function getRelationshipTypes($iContactId1, $arrContact2)
{
$strRelationshipCategory = getRelationshipCategory(getContactType($iContactId1), getContactType($arrContact2));

$arrRelationshipTypes = \Components\Customers\Contacts\Relationships\Types::getAllForRelationshipCategory($strRelationshipCategory);

foreach ($arrRelationshipTypes as &$arrRelationshipType)
{
$arrRelationshipType['relationship_type_title'] = renderRelationship($arrContact2, $iContactId1, $arrRelationshipType['relationship_type_id']);
}

//varDump($arrRelationshipTypes);
return $arrRelationshipTypes;
}

function createRelationship($arrValues)
{
foreach($arrValues as $strField => $strValue)
{
if(str_starts_with($strField, 'contact_'))
{
$arrContact[$strField] = $arrValues[$strField];
}
}

// Try to auto merge the contact with an existing one
\Components\Customers\Contacts::autoMerge($arrContact);

$iContactId1 = $arrContact['contact_id'];
$iContactId2 = \Components\Customers\Contacts::currentContactId(true);


$arrRelationship = [];
$arrRelationship['relationship_type_id'] = 'I2I_Partner';
$arrRelationship['contact_id_1'] = $iContactId1;
$arrRelationship['contact_id_2'] = $iContactId2;
$arrRelationship['contact1_can_edit_contact2'] = 1;
$arrRelationship['contact2_can_edit_contact1'] = 0;

\Components\Customers\Contacts\Relationships::save($arrRelationship);
}

?>
<?php

function onFormSubmit($arrValues)
{
$arrContact['contact_first_name'] = $arrValues['contact_first_name'];
$arrContact['contact_last_name'] = $arrValues['contact_last_name'];
$arrContact['contact_email'] = $arrValues['contact_email'];
$arrContact['contact_password'] = $arrValues['contact_password'];

// save first contact
$iContactId = \Components\Customers\Contacts::save($arrContact);
\Components\Customers\Contacts::currentLoginViaContactId($iContactId);

if ($arrValues['product_id'] == 308)
{
$i = 1;
$strFormName = 'additional_contact_family_' . $i;
while (isset($arrValues[$strFormName]))
{
$arrFamilyContact = $arrValues[$strFormName];
$strRelationship = $arrFamilyContact['relationship_type_id'];
varDump($arrFamilyContact);
unset($arrFamilyContact['relationship_type_id']);
$iFamilyContactId = \Components\Customers\Contacts::save($arrFamilyContact);

if ($iFamilyContactId)
{
\Components\Customers\Contacts\Relationships::create($iContactId, $iFamilyContactId, $strRelationship);
}
$i++;
$strFormName = 'additional_contact_family_' . $i;
}
}
}

function createCounter($last)
{
return range(1, $last);
}

function updatePreferencesOnSubmit($arrValues, $iContactId = NULL)
{
if(!$iContactId)
{
$iContactId = \Components\Customers\Contacts::currentContactId(true);
}
}

function getRelationshipCategory($strType1, $strType2)
{
if($strType1 == 'Individual' && $strType2 == 'Individual')
{
return 'I2I';
}

if($strType1 == 'Individual' && $strType2 == 'Company')
{
return 'I2C';
}

if($strType1 == 'Company' && in_array($strType2, ['Individual', '']))
{
return 'I2C';
}

if($strType1 == 'Company' && $strType2 == 'Company')
{
return 'C2C';
}

return 'I2I';
}

function getContactType($arrContact)
{
if(!is_array($arrContact))
{
$arrContact = \Components\Customers\Contacts::get($arrContact);
}

if(isset($arrContact['contact_type']))
{
return $arrContact['contact_type'];
}

return null;
}

function renderRelationship($arrContact1, $arrContact2, $strRelationshipType)
{
if(!is_array($arrContact1))
{
$arrContact1 = \Components\Customers\Contacts::get($arrContact1);
}

if(!is_array($arrContact2))
{
$arrContact2 = \Components\Customers\Contacts::get($arrContact2);
}

$strContact1Name = \Components\Customers\Contacts::renderName($arrContact1);
$strContact2Name = \Components\Customers\Contacts::renderName($arrContact2);

$strRelationshipTitle = \Components\Customers\Contacts\Relationships\Types::getColumn($strRelationshipType, 'relationship_type_title');

if(strpos($strRelationshipType, "I2C") === 0 && $arrContact1['contact_type'] == 'Company')
{
return $strContact2Name . ' is ' . $strRelationshipTitle . ' of &nbsp;' . $strContact1Name;
}

return $strContact1Name . ' is ' . $strRelationshipTitle . ' of &nbsp;' . $strContact2Name;
}

function getRelationshipTypes($iContactId1, $arrContact2)
{
$strRelationshipCategory = getRelationshipCategory(getContactType($iContactId1), getContactType($arrContact2));

$arrRelationshipTypes = \Components\Customers\Contacts\Relationships\Types::getAllForRelationshipCategory($strRelationshipCategory);

foreach ($arrRelationshipTypes as &$arrRelationshipType)
{
$arrRelationshipType['relationship_type_title'] = renderRelationship($arrContact2, $iContactId1, $arrRelationshipType['relationship_type_id']);
}

//varDump($arrRelationshipTypes);
return $arrRelationshipTypes;
}

function createRelationship($arrValues)
{
foreach($arrValues as $strField => $strValue)
{
if(str_starts_with($strField, 'contact_'))
{
$arrContact[$strField] = $arrValues[$strField];
}
}

// Try to auto merge the contact with an existing one
\Components\Customers\Contacts::autoMerge($arrContact);

$iContactId1 = $arrContact['contact_id'];
$iContactId2 = \Components\Customers\Contacts::currentContactId(true);


$arrRelationship = [];
$arrRelationship['relationship_type_id'] = 'I2I_Partner';
$arrRelationship['contact_id_1'] = $iContactId1;
$arrRelationship['contact_id_2'] = $iContactId2;
$arrRelationship['contact1_can_edit_contact2'] = 1;
$arrRelationship['contact2_can_edit_contact1'] = 0;

\Components\Customers\Contacts\Relationships::save($arrRelationship);
}

?>
Search Title:

															

														
Search Title Prefix:

															

														
Search Description:

															

														
Search Keywords:

															

														
Search Noindex:
0
0
Search Nofollow:
0
0
Search Change Frequency:

															

														
Search Priority:
0.5
0.5
Search Canonical Override:

															

														
Is Offline:
0
0
Is Hidden In Navigation:
0
0
Is Hidden In Sitemap:
0
0
Security New:
0
0
Security Contact Mode:

															

														
Security Contact Squeeze Viewlimit:

															

														
Security Contact Require Login:

															

														
Security Contact Groups:

															

														
Security Condition Id:

															

														
Security Heading:

															

														
Security Description:

															

														
Other Fields:

															

														
Order:
0
0
Parent Id:
/new-site/join-us/
/new-site/join-us/
Contact Id:
0
0
Design Id:
16
16
Header Functions:

															

														
Header Category:

															

														
Is Domain:
0
0
Post Category Id:

															

														
Event Category: