php js css php js css

Changes

Changes to Page: form

225002
Today 3:58am
Guevarra, Kim
Created page
Change made at /admin/website/pages/
225003
Today 3:58am
Guevarra, Kim
Modified page
Can't Undo: This is the current version
Change made at /admin/website/pages/
Is Offline:
Content Additional:
Id:
/new-site/join-us/membership/form/
/new-site/join-us/membership/form/
Title:
Form
Form
Content:
<forms:form id="membership_form" recordsubmissions="true" onsubmitredirect="/membership/success/?sale_id=[? $sale_id ?]" onsubmitserver="onFormSubmit($membership_form.getValuesForComponent())" contactmode="register">
<ajax:event id="selected_product_ajaxevent" updateregions="selected_product_ajaxregion, total_paymentmethod_ajaxregion" />
<div class="fieldset">
<h4>Membership Type</h4>
<forms:row type="one_column" label="">
<forms:radiobuttongroup name="product_id" validations="mandatory">
<div class="membership-product-repeater">
<data:repeater datasource="\Components\Commerce\Products::getAllForCategoryAndBrand(5, null)" as="product" dataorder="[? [['product_price_base', 'ASC']] ?]" datafilter="[? [['product_is_offline', '=', 0], 'AND', ['product_is_unorderable', '=', 0]] ?]">
<div class="membership-product">
<forms:radiobutton datacolumn="product_id" valuechecked="[? $product['product_id'] ?]" label="" validations="mandatory" onchangeajax="selected_product_ajaxevent">
<span class="product-price">[? ' $' + round(\Components\Commerce\Products::getColumn($product['product_id'],'product_price'), 2) ?]<standard:icon library="fontawesome" iconname="square-check" iconstyle="solid" style="color: #efefef; width: 20px; height: 20px" /></span>
<br />
<br />
<span class="product-name">[? $product['product_title'] ?]<span class="small-text">Membership</span></span></forms:radiobutton>
</div>
</data:repeater>
</div>
</forms:radiobuttongroup>
</forms:row>
</div>
<logic:if test="!(\Components\Customers\Contacts::currentIsLoggedIn())">
<div class="fieldset accent-bg">
<h4>Create an Account</h4>
<p>If you have an existing account, please login <a href="/community/login/">here</a>. Otherwise, create an account below.</p>
<templates:row>
<templates:column width="6">
<forms:row label="Email Address" type="one_column">
<forms:editbox id="contact_email" datacolumn="contact_email" validations="mandatory,email" transformations="tolower" />
</forms:row>
</templates:column>
<templates:column width="6">
<forms:row label="Password" type="one_column">
<forms:password datacolumn="contact_password" id="contact_password" validations="mandatory" />
</forms:row>
</templates:column>
</templates:row>
</div>
<div class="fieldset">
<h4>Personal Information</h4>
<templates:row>
<templates:column width="6">
<forms:row label="First Name" type="one_column">
<forms:editbox id="contact_first_name" datacolumn="contact_first_name" validations="mandatory" />
</forms:row>
</templates:column>
<templates:column width="6">
<forms:row label="Last Name" type="one_column">
<forms:editbox id="contact_last_name" datacolumn="contact_last_name" validations="mandatory" />
</forms:row>
</templates:column>
</templates:row>
<templates:row>
<templates:column width="12">
<forms:row label="Phone" type="one_column">
<forms:editbox id="contact_phone" datacolumn="contact_phone" validations="numeric" />
</forms:row>
</templates:column>
</templates:row>
<div class="custom-address"><forms:address id="contact_address" validations="mandatory" rowtype="one_column" /></div>
</div>
</logic:if>
<logic:else>
<forms:hidden id="contact_email" datacolumn="contact_email" />
<forms:hidden id="contact_first_name" datacolumn="contact_first_name" />
<forms:hidden id="contact_last_name" datacolumn="contact_last_name" />
<div class="fieldset">
<h4>Personal Information</h4>
<p>Click <a href="/community/profile/">here</a> to update your profile. Not you? Logout <a href="/community/logout/">here</a>.</p>
<templates:row>
<templates:column width="6">
<forms:row label="Email Address" type="one_column">
<input type="text" value="[? \Components\Customers\Contacts::currentEmail() ?]" readonly disabled style="text-transform: lowercase" />
</forms:row>
</templates:column>
<templates:column width="6">
<forms:row label="Full Name" type="one_column">
<input type="text" value="[? \Components\Customers\Contacts::currentFullName() ?]" readonly disabled />
</forms:row>
</templates:column>
</templates:row>
</div>
</logic:else>
<ajax:region id="selected_product_ajaxregion">
<logic:variable as="selected_product_id" value="[? $membership_form.getValueForFormItem('product_id') ?]" />
<!-- Family Membership -->
<logic:if test="$selected_product_id == 308">
<div class="fieldset">
<h4>Family Members</h4>
<ajax:event id="counterContactDetails_ajaxevent" updateregions="counterContactDetails_ajaxregion" />
<ajax:region id="counterContactDetails_ajaxregion">
<div style="position: relative;">
<forms:row label="Additional Contacts QTY" class="counter">
<forms:spinbox id="counterContactDetails" valuemin="1" valuemax="5" value="1" onchangeajax="counterContactDetails_ajaxevent" />
</forms:row>
<logic:if test="$counterContactDetails.value > 0">
<data:repeater datasource="createCounter($counterContactDetails.value)" as="item">
<logic:if test="$counterContactDetails.value < 2">
<style> .spinBoxDown {background-color: #efefef !important; pointer-events: none; } </style>
</logic:if>
<logic:if test="$counterContactDetails.value >= 5">
<style> .spinBoxUp {background-color: #efefef !important; pointer-events: none; } </style>
</logic:if>
<forms:form id="additional_contact_partner" datacolumn="additional_contact_partner">
<h3 class="text-enlarge"><small>Family Member #[? $item ?]</small></h3>
<templates:row>
<templates:column width="6">
<forms:row type="one_column" label="First Name">
<forms:editbox id="ac_first_name_[? $item ?]" datacolumn="contact_first_name" validations="mandatory" />
</forms:row>
</templates:column>
<templates:column width="6">
<forms:row type="one_column" label="Last Name">
<forms:editbox id="ac_last_name_[? $item ?]" datacolumn="contact_last_name" validations="mandatory" />
</forms:row>
</templates:column>
</templates:row>
<forms:row type="one_column" label="E-mail Address">
<forms:editbox id="ac_email_[? $item ?]" datacolumn="contact_email" transformations="tolower" validations="mandatory,email" />
</forms:row>
<forms:row label="Relationship" type="one_column">
<forms:combobox id="relationship_type_combobox_[? $item ?]" validations="mandatory" showvalueoption="true" value="" datacolumn="relationship_type_id" datasource="getRelationshipTypes(\Components\Customers\Contacts::currentContactId(), $membership_form.getValuesForComponent())" as="relationship_type" datatitle="$relationship_type['relationship_type_title']" datavalue="$relationship_type['relationship_type_id']"/>
</forms:row>
</forms:form>
</data:repeater>
</logic:if>
</div>
</ajax:region>
</div>
</logic:if>

<!-- Couple / Partner Membership -->
<logic:if test="$selected_product_id == 389">
<div class="fieldset">
<h4>Partner's Information</h4>
<ajax:event id="counterContactDetails_ajaxevent" updateregions="counterContactDetails_ajaxregion" />
<ajax:region id="counterContactDetails_ajaxregion">
<div style="position: relative;">
<forms:row label="Additional Contacts qty" class="counter">
<forms:spinbox id="counterContactDetails" valuemin="1" valuemax="1" value="1" onchangeajax="counterContactDetails_ajaxevent" />
</forms:row>
<logic:if test="$counterContactDetails.value > 0">
<data:repeater datasource="createCounter($counterContactDetails.value)" as="item">
<style>.counter { display: none; } </style>
<forms:form id="additional_contact_partner" datacolumn="additional_contact_partner">
<h3><small>Partner's Contact Information</small></h3>
<p>Add each of the additional member contacts below. Not including the main contact.</p>
<templates:row>
<templates:column width="6">
<forms:row type="one_column" label="First Name">
<forms:editbox id="ac_first_name_[? $item ?]" datacolumn="contact_first_name" validations="mandatory" />
</forms:row>
</templates:column>
<templates:column width="6">
<forms:row type="one_column" label="Last Name">
<forms:editbox id="ac_last_name_[? $item ?]" datacolumn="contact_last_name" validations="mandatory" />
</forms:row>
</templates:column>
</templates:row>
<forms:row type="one_column" label="E-mail Address">
<forms:editbox id="ac_email_[? $item ?]" datacolumn="contact_email" transformations="tolower" validations="mandatory,email" />
</forms:row>
</forms:form>
</data:repeater>
</logic:if>
</div>
</ajax:region>
</div>
</logic:if>
</ajax:region>
<ajax:region id="total_paymentmethod_ajaxregion">
<logic:if test="$membership_form.getValueForFormItem('product_id')">
<logic:variable as="selected_product_id" value="[? \Components\Commerce\Products::get($membership_form.getValueForFormItem('product_id')) ?]" />
<div class="fieldset">
<h4>Payment</h4>
<forms:paymentmethod productid="[? $selected_product_id['product_id'] ?]" completecart="true" recurring="true" recurringamount="[? $selected_product_id['recurring_sale_amount'] ?]" recurringinterval="[? $selected_product_id['recurring_sale_schedule_interval'] ?]" recurringintervalnumber="[? $selected_product_id['recurring_sale_schedule_interval_number'] ?]" showpaymentformonzerovalue="true" />
</div>
</logic:if>
</ajax:region>
</forms:form>
<forms:form id="membership_form" recordsubmissions="true" onsubmitredirect="/membership/success/?sale_id=[? $sale_id ?]" onsubmitserver="onFormSubmit($membership_form.getValuesForComponent())" contactmode="register">
<ajax:event id="selected_product_ajaxevent" updateregions="selected_product_ajaxregion, total_paymentmethod_ajaxregion" />
<div class="fieldset">
<h4>Membership Type</h4>
<forms:row type="one_column" label="">
<forms:radiobuttongroup name="product_id" validations="mandatory">
<div class="membership-product-repeater">
<data:repeater datasource="\Components\Commerce\Products::getAllForCategoryAndBrand(5, null)" as="product" dataorder="[? [['product_price_base', 'ASC']] ?]" datafilter="[? [['product_is_offline', '=', 0], 'AND', ['product_is_unorderable', '=', 0]] ?]">
<div class="membership-product">
<forms:radiobutton datacolumn="product_id" valuechecked="[? $product['product_id'] ?]" label="" validations="mandatory" onchangeajax="selected_product_ajaxevent">
<span class="product-price">[? ' $' + round(\Components\Commerce\Products::getColumn($product['product_id'],'product_price'), 2) ?]<standard:icon library="fontawesome" iconname="square-check" iconstyle="solid" style="color: #efefef; width: 20px; height: 20px" /></span>
<br />
<br />
<span class="product-name">[? $product['product_title'] ?]<span class="small-text">Membership</span></span></forms:radiobutton>
</div>
</data:repeater>
</div>
</forms:radiobuttongroup>
</forms:row>
</div>
<logic:if test="!(\Components\Customers\Contacts::currentIsLoggedIn())">
<div class="fieldset accent-bg">
<h4>Create an Account</h4>
<p>If you have an existing account, please login <a href="/community/login/">here</a>. Otherwise, create an account below.</p>
<templates:row>
<templates:column width="6">
<forms:row label="Email Address" type="one_column">
<forms:editbox id="contact_email" datacolumn="contact_email" validations="mandatory,email" transformations="tolower" />
</forms:row>
</templates:column>
<templates:column width="6">
<forms:row label="Password" type="one_column">
<forms:password datacolumn="contact_password" id="contact_password" validations="mandatory" />
</forms:row>
</templates:column>
</templates:row>
</div>
<div class="fieldset">
<h4>Personal Information</h4>
<templates:row>
<templates:column width="6">
<forms:row label="First Name" type="one_column">
<forms:editbox id="contact_first_name" datacolumn="contact_first_name" validations="mandatory" />
</forms:row>
</templates:column>
<templates:column width="6">
<forms:row label="Last Name" type="one_column">
<forms:editbox id="contact_last_name" datacolumn="contact_last_name" validations="mandatory" />
</forms:row>
</templates:column>
</templates:row>
<templates:row>
<templates:column width="12">
<forms:row label="Phone" type="one_column">
<forms:editbox id="contact_phone" datacolumn="contact_phone" validations="numeric" />
</forms:row>
</templates:column>
</templates:row>
<div class="custom-address"><forms:address id="contact_address" validations="mandatory" rowtype="one_column" /></div>
</div>
</logic:if>
<logic:else>
<forms:hidden id="contact_email" datacolumn="contact_email" />
<forms:hidden id="contact_first_name" datacolumn="contact_first_name" />
<forms:hidden id="contact_last_name" datacolumn="contact_last_name" />
<div class="fieldset">
<h4>Personal Information</h4>
<p>Click <a href="/community/profile/">here</a> to update your profile. Not you? Logout <a href="/community/logout/">here</a>.</p>
<templates:row>
<templates:column width="6">
<forms:row label="Email Address" type="one_column">
<input type="text" value="[? \Components\Customers\Contacts::currentEmail() ?]" readonly disabled style="text-transform: lowercase" />
</forms:row>
</templates:column>
<templates:column width="6">
<forms:row label="Full Name" type="one_column">
<input type="text" value="[? \Components\Customers\Contacts::currentFullName() ?]" readonly disabled />
</forms:row>
</templates:column>
</templates:row>
</div>
</logic:else>
<ajax:region id="selected_product_ajaxregion">
<logic:variable as="selected_product_id" value="[? $membership_form.getValueForFormItem('product_id') ?]" />
<!-- Family Membership -->
<logic:if test="$selected_product_id == 308">
<div class="fieldset">
<h4>Family Members</h4>
<ajax:event id="counterContactDetails_ajaxevent" updateregions="counterContactDetails_ajaxregion" />
<ajax:region id="counterContactDetails_ajaxregion">
<div style="position: relative;">
<forms:row label="Additional Contacts QTY" class="counter">
<forms:spinbox id="counterContactDetails" valuemin="1" valuemax="5" value="1" onchangeajax="counterContactDetails_ajaxevent" />
</forms:row>
<logic:if test="$counterContactDetails.value > 0">
<data:repeater datasource="createCounter($counterContactDetails.value)" as="item">
<logic:if test="$counterContactDetails.value < 2">
<style> .spinBoxDown {background-color: #efefef !important; pointer-events: none; } </style>
</logic:if>
<logic:if test="$counterContactDetails.value >= 5">
<style> .spinBoxUp {background-color: #efefef !important; pointer-events: none; } </style>
</logic:if>
<forms:form id="additional_contact_partner" datacolumn="additional_contact_partner">
<h3 class="text-enlarge"><small>Family Member #[? $item ?]</small></h3>
<templates:row>
<templates:column width="6">
<forms:row type="one_column" label="First Name">
<forms:editbox id="ac_first_name_[? $item ?]" datacolumn="contact_first_name" validations="mandatory" />
</forms:row>
</templates:column>
<templates:column width="6">
<forms:row type="one_column" label="Last Name">
<forms:editbox id="ac_last_name_[? $item ?]" datacolumn="contact_last_name" validations="mandatory" />
</forms:row>
</templates:column>
</templates:row>
<forms:row type="one_column" label="E-mail Address">
<forms:editbox id="ac_email_[? $item ?]" datacolumn="contact_email" transformations="tolower" validations="mandatory,email" />
</forms:row>
<forms:row label="Relationship" type="one_column">
<forms:combobox id="relationship_type_combobox_[? $item ?]" validations="mandatory" showvalueoption="true" value="" datacolumn="relationship_type_id" datasource="getRelationshipTypes(\Components\Customers\Contacts::currentContactId(), $membership_form.getValuesForComponent())" as="relationship_type" datatitle="$relationship_type['relationship_type_title']" datavalue="$relationship_type['relationship_type_id']"/>
</forms:row>
</forms:form>
</data:repeater>
</logic:if>
</div>
</ajax:region>
</div>
</logic:if>

<!-- Couple / Partner Membership -->
<logic:if test="$selected_product_id == 389">
<div class="fieldset">
<h4>Partner's Information</h4>
<ajax:event id="counterContactDetails_ajaxevent" updateregions="counterContactDetails_ajaxregion" />
<ajax:region id="counterContactDetails_ajaxregion">
<div style="position: relative;">
<forms:row label="Additional Contacts qty" class="counter">
<forms:spinbox id="counterContactDetails" valuemin="1" valuemax="1" value="1" onchangeajax="counterContactDetails_ajaxevent" />
</forms:row>
<logic:if test="$counterContactDetails.value > 0">
<data:repeater datasource="createCounter($counterContactDetails.value)" as="item">
<style>.counter { display: none; } </style>
<forms:form id="additional_contact_partner" datacolumn="additional_contact_partner">
<h3><small>Partner's Contact Information</small></h3>
<p>Add each of the additional member contacts below. Not including the main contact.</p>
<templates:row>
<templates:column width="6">
<forms:row type="one_column" label="First Name">
<forms:editbox id="ac_first_name_[? $item ?]" datacolumn="contact_first_name" validations="mandatory" />
</forms:row>
</templates:column>
<templates:column width="6">
<forms:row type="one_column" label="Last Name">
<forms:editbox id="ac_last_name_[? $item ?]" datacolumn="contact_last_name" validations="mandatory" />
</forms:row>
</templates:column>
</templates:row>
<forms:row type="one_column" label="E-mail Address">
<forms:editbox id="ac_email_[? $item ?]" datacolumn="contact_email" transformations="tolower" validations="mandatory,email" />
</forms:row>
</forms:form>
</data:repeater>
</logic:if>
</div>
</ajax:region>
</div>
</logic:if>
</ajax:region>
<ajax:region id="total_paymentmethod_ajaxregion">
<logic:if test="$membership_form.getValueForFormItem('product_id')">
<logic:variable as="selected_product_id" value="[? \Components\Commerce\Products::get($membership_form.getValueForFormItem('product_id')) ?]" />
<div class="fieldset">
<h4>Payment</h4>
<forms:paymentmethod productid="[? $selected_product_id['product_id'] ?]" completecart="true" recurring="true" recurringamount="[? $selected_product_id['recurring_sale_amount'] ?]" recurringinterval="[? $selected_product_id['recurring_sale_schedule_interval'] ?]" recurringintervalnumber="[? $selected_product_id['recurring_sale_schedule_interval_number'] ?]" showpaymentformonzerovalue="true" />
</div>
</logic:if>
</ajax:region>
</forms:form>
Css:
.counter {
position: absolute;
right: 0;
bottom: -67px;

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

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

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

.spinBoxUp,
.spinBoxDown {
background: #d2042d;
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;

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

.spinBoxDown {
&:before {
content: '-' !important;
}
}
}


.fieldset {
border: 1px solid #d2042d;
margin-bottom: 2rem;
padding: 3rem 2rem 1rem;
position: relative;

h4 {
background: #d2042d;
color: #fff;
display: inline-block;
font-weight: 500;
padding: 10px 3rem;
position: absolute;
top: -20px;
left: -10px;
}

h4::after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 9px 5px 0;
border-color: transparent #d2042d transparent transparent;
bottom: -5px;
left: 1px;
}
}

.membership-product-repeater
{
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: stretch;
justify-content: center;
gap: 1rem;

.membership-product
{
position: relative;
padding: 1rem;
background: #efefef;
min-width: 200px;

&.selected
{
background: #d2042d;
color: #fff;
}
}

.s8-radiobutton-container
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0px !important;
display: block;
}

.product-price
{
font-weight: 900;
font-size: 2rem;

display: flex;
justify-content: space-between;
align-items: center;
}

.product-name
{
font-size: 1.5rem;
}

.s8-radiobutton-container input ~ .s8-radiobutton
{
border-radius: 0 !important;
display: none;
visibility: hidden;
opacity: 0;
}

.small-text
{
font-size: 14px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1px;
display: block;
}
}
.counter {
position: absolute;
right: 0;
bottom: -67px;

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

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

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

.spinBoxUp,
.spinBoxDown {
background: #d2042d;
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;

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

.spinBoxDown {
&:before {
content: '-' !important;
}
}
}


.fieldset {
border: 1px solid #d2042d;
margin-bottom: 2rem;
padding: 3rem 2rem 1rem;
position: relative;

h4 {
background: #d2042d;
color: #fff;
display: inline-block;
font-weight: 500;
padding: 10px 3rem;
position: absolute;
top: -20px;
left: -10px;
}

h4::after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 9px 5px 0;
border-color: transparent #d2042d transparent transparent;
bottom: -5px;
left: 1px;
}
}

.membership-product-repeater
{
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: stretch;
justify-content: center;
gap: 1rem;

.membership-product
{
position: relative;
padding: 1rem;
background: #efefef;
min-width: 200px;

&.selected
{
background: #d2042d;
color: #fff;
}
}

.s8-radiobutton-container
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0px !important;
display: block;
}

.product-price
{
font-weight: 900;
font-size: 2rem;

display: flex;
justify-content: space-between;
align-items: center;
}

.product-name
{
font-size: 1.5rem;
}

.s8-radiobutton-container input ~ .s8-radiobutton
{
border-radius: 0 !important;
display: none;
visibility: hidden;
opacity: 0;
}

.small-text
{
font-size: 14px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1px;
display: block;
}
}
Js:
// Add 'selected' class to .membership-product when radio button is checked
document.addEventListener('DOMContentLoaded', function() {
// Function to update selected classes
function updateSelectedClasses() {
// Get all membership product containers
const membershipProducts = document.querySelectorAll('.membership-product');

// Remove 'selected' class from all containers
membershipProducts.forEach(product => {
product.classList.remove('selected');
});

// Find all radio buttons within membership products
const radioButtons = document.querySelectorAll('.membership-product input[type="radio"]');

// Add 'selected' class to the container of the checked radio button
radioButtons.forEach(radioButton => {
if (radioButton.checked) {
const membershipProduct = radioButton.closest('.membership-product');
if (membershipProduct) {
membershipProduct.classList.add('selected');
}
}
});
}

// Run on page load
updateSelectedClasses();

// Run on any change event within membership products
const membershipProductRepeater = document.querySelector('.membership-product-repeater');
if (membershipProductRepeater) {
membershipProductRepeater.addEventListener('change', function(e) {
if (e.target.type === 'radio') {
updateSelectedClasses();
}
});
}
});
// Add 'selected' class to .membership-product when radio button is checked
document.addEventListener('DOMContentLoaded', function() {
// Function to update selected classes
function updateSelectedClasses() {
// Get all membership product containers
const membershipProducts = document.querySelectorAll('.membership-product');

// Remove 'selected' class from all containers
membershipProducts.forEach(product => {
product.classList.remove('selected');
});

// Find all radio buttons within membership products
const radioButtons = document.querySelectorAll('.membership-product input[type="radio"]');

// Add 'selected' class to the container of the checked radio button
radioButtons.forEach(radioButton => {
if (radioButton.checked) {
const membershipProduct = radioButton.closest('.membership-product');
if (membershipProduct) {
membershipProduct.classList.add('selected');
}
}
});
}

// Run on page load
updateSelectedClasses();

// Run on any change event within membership products
const membershipProductRepeater = document.querySelector('.membership-product-repeater');
if (membershipProductRepeater) {
membershipProductRepeater.addEventListener('change', function(e) {
if (e.target.type === 'radio') {
updateSelectedClasses();
}
});
}
});
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 membership is for duo
if ($arrValues['product_id'] == 389)
{
$arrPartner = $arrValues['additional_contact_partner'];
$iPartnerContactId = \Components\Customers\Contacts::save($arrPartner);
if ($iPartnerContactId)
{
\Components\Customers\Contacts\Relationships::create($iContactId, $iPartnerContactId, 'I2I_Partner');
}
}

//if membership is for family
else 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 membership is for duo
if ($arrValues['product_id'] == 389)
{
$arrPartner = $arrValues['additional_contact_partner'];
$iPartnerContactId = \Components\Customers\Contacts::save($arrPartner);
if ($iPartnerContactId)
{
\Components\Customers\Contacts\Relationships::create($iContactId, $iPartnerContactId, 'I2I_Partner');
}
}

//if membership is for family
else 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);
}

?>
Handle Child Routes:
0
0
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 Hidden In Navigation:
1
1
Is Hidden In Sitemap:
1
1
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:
Parent Id:
/new-site/join-us/membership/
/new-site/join-us/membership/
Contact Id:
0
0
Design Id:
0
0
Header Functions:

															

														
Header Category:

															

														
Is Domain:
0
0
Post Category Id:

															

														
Event Category: