Template for Floor Plan

In order to use this floor plan function, follow the step2 below. (Sample: M3270)

 

1. Preferences > Step1 Page >  Display Events as “Floor plan”
2. Put the variable %%step1_form_selectbox%% on step1 template
3. Styling the event selector by CSS

 

%%step1_form_selectbox%% generates the following html codes.

<div class=”Step1TFP” id=”Step1TFP”>
<div class=”FP_event” id=”ecode001″ eid=”500000531178642″>
<div class=”FP_selector”>
Step1 Selector comes here*
</div>
<div class=”FP_ecode”>001</div>
<div class=”FP_spotleft”>0</div>
</div>
</div>

 

*Step1 Selector

• SelectBox
  <select class=”step1_matrix_select” name=”ExE500000521415975[0]”>
  <option selected=”selected” value=”0″>0</option>
  <option value=”1″>1</option>
  </select>
• Checkbox
  <input class=”step1_matrix_check” name=”ExE500000521415980[0]” type=”checkbox” value=”1″ />
• Radio Button
  <input class=”step1_matrix_radio” name=”RadioGrp_[0]” type=”radio” value=”ExE500000521421439[0]” />
• Sold out
  <div class=”FP_soldout”></div>

 

Sample Code

 

With CSS, the html code rendered like the image below.

 

Note:

Does not work with Matrix labels, Overlap events