Last active
October 17, 2024 14:43
-
-
Save patrickbolle/7d960d480368064aa1b3cc6f42d611d1 to your computer and use it in GitHub Desktop.
wl
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {%- liquid | |
| assign og_wait_li_product_id = product.id | downcase | |
| assign og_wait_li_product_metafield = product.metafields.wait_li[og_wait_li_product_id] | |
| assign new_wait_li_product_id = product.selected_or_first_available_variant.id | downcase | |
| assign new_wait_li_product_metafield = product.selected_or_first_available_variant.metafields.wait_li[new_wait_li_product_id] | |
| if og_wait_li_product_metafield | |
| assign wait_li_product_metafield = og_wait_li_product_metafield | |
| assign wait_li_product_id = og_wait_li_product_id | |
| else | |
| assign wait_li_product_metafield = new_wait_li_product_metafield | |
| assign wait_li_product_id = new_wait_li_product_id | |
| endif | |
| assign wait_li_customer_metafield = customer.metafields.wait_li[wait_li_product_id] | |
| assign wait_li_settings = shop.metafields.wait_li.settings | |
| assign list_count = wait_li_product_metafield.list_count | |
| assign sign_in_text = wait_li_settings.sign_in_text | default: 'There are currently list_count people on the waiting list. Click the button below to join!' | replace: 'list_count', list_count | |
| assign currently_waiting_text = wait_li_settings.currently_waiting_text | default: 'You are currently #current_position on the waiting list. Please keep an eye on your inbox.' | |
| assign full_currently_waiting_text = currently_waiting_text | replace: 'list_count', list_count | |
| assign join_text = wait_li_settings.join_text | default: 'Join Waiting List' | |
| assign success_text = wait_li_settings.success_text | default: 'Congratulations! You are now #current_position on the waiting list. Keep an eye on your email for when you are activated!' | replace: 'list_count', list_count | |
| assign button_colour = wait_li_settings.button_colour | default: '#3d85c6' | |
| assign button_text_colour = wait_li_settings.button_text_colour | default: 'white' | |
| assign wl_list_limit = wait_li_product_metafield.wl_list_limit | plus: 0 | |
| if list_count == 1 | |
| assign sign_in_text = sign_in_text | replace: 'list_count', list_count | replace: 'people', 'person' | replace: 'are', 'is' | |
| endif | |
| if wl_list_limit != blank and wl_list_limit != 0 | |
| assign spots_left = wl_list_limit | minus: list_count | |
| assign wl_lang_list_limit_info = wait_li_product_metafield.wl_lang_list_limit_info | default: 'There are spots_left spots left on the waiting list. Join now to get a spot!' | replace: 'spots_left', spots_left | |
| if spots_left == 1 | |
| assign wl_lang_list_limit_info = wl_lang_list_limit_info | replace: 'spots', 'spot' | replace: 'are', 'is' | |
| endif | |
| assign wl_lang_no_spots_left = wait_li_product_metafield.wl_lang_no_spots_left | default: 'There are no spots left on the waiting list right now. Please wait until a spot opens up.' | |
| endif | |
| assign wl_lang_join_waiting_list = wait_li_settings.meta_settings.wl_lang_join_waiting_list | default: 'Join Waiting List' | |
| assign wl_lang_register = wait_li_settings.meta_settings.wl_lang_register | default: 'Register Account' | |
| assign wl_lang_register_join_list = 'Register & Join Waiting List' | |
| assign wl_lang_sign_in = wait_li_settings.meta_settings.wl_lang_sign_in | default: 'Sign In' | |
| assign wl_lang_sign_in_to_purchase = wait_li_settings.meta_settings.wl_lang_sign_in_to_purchase | default: 'Sign In To Purchase' | |
| assign wl_lang_sign_in_check_status = wait_li_settings.meta_settings.wl_lang_sign_in_check_status | default: 'or Sign In To Check Status' | |
| assign wl_lang_email = wait_li_settings.meta_settings.wl_lang_email | default: 'Email' | |
| assign wl_lang_password = wait_li_settings.meta_settings.wl_lang_password | default: 'Password' | |
| assign wl_lang_custom_column = wait_li_product_metafield.metaSettings.wl_lang_custom_column | default: '' | |
| assign wl_lang_generic_error = wait_li_settings.meta_settings.wl_lang_generic_error | default: 'Something went wrong with while joining the waiting list - please try again later.' | |
| assign wl_lang_empty_email = wait_li_settings.meta_settings.wl_lang_empty_email | default: 'Please enter your email' | |
| assign wl_lang_empty_password = wait_li_settings.meta_settings.wl_lang_empty_password | default: 'Please enter your password' | |
| assign wl_lang_password_length = wait_li_settings.meta_settings.wl_lang_password_length | default: 'Please make sure your password is over 6 characters long' | |
| assign wl_lang_valid_email = wait_li_settings.meta_settings.wl_lang_valid_email | default: 'Please check that your email is valid' | |
| assign wl_lang_already_on_list = wait_li_settings.meta_settings.wl_lang_already_on_list | default: 'You are already on the waiting list! Please sign in to check your status on the list.' | |
| assign wl_lang_account_valid = wait_li_settings.meta_settings.wl_lang_account_valid | default: 'Please make sure your email and password are valid, then try again.' | |
| assign wl_lang_main_referral_msg = wait_li_settings.meta_settings.main_referral_msg | default: 'Share the link below to refer your friends and jump up spots on the waiting list!' | |
| -%} | |
| {% comment %} | |
| Wait.li Button Form | |
| {% endcomment %} | |
| {% capture wait_li_referral_box %} | |
| {% if wait_li_product_metafield.metaSettings.listType == 'referral' %} | |
| <div class="wait_li_referral_box"> | |
| <p>{{- wl_lang_main_referral_msg -}}</p> | |
| <textarea id="in_page_referral_box" class="wait_li_copy_field">{{ shop.url }}{{product.url}}?ref=__referral_id__</textarea> | |
| <button id="in_page_copy_btn" class="wait_li_copy_button" wait_li_tooltip="Copied!"> | |
| Copy <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 2A1.5 1.5 0 006 3.5V13a1 1 0 001 1h9.5a1.5 1.5 0 001.5-1.5v-9A1.5 1.5 0 0016.5 2h-9zm-4 4H4v10h10v.5a1.5 1.5 0 01-1.5 1.5h-9A1.5 1.5 0 012 16.5v-9A1.5 1.5 0 013.5 6z" fill="#5C5F62"/></svg> | |
| </button> | |
| </div> | |
| {% endif %} | |
| {% endcapture %} | |
| <div id='wait_li_form' class='wla_form'> | |
| {% if customer %} | |
| {% if customer_status == 'waiting' %} | |
| <p class='wla_text currently_waiting' style='display: none;'> | |
| {{- full_currently_waiting_text -}} | |
| </p> | |
| <div class='wait_li_referral_box_wrapper' style='display: none;'> | |
| {{- wait_li_referral_box -}} | |
| </div> | |
| <div class='wait_li_spinner' style='margin-top: 10px;'></div> | |
| {% else %} | |
| {% if spots_left < 1 %} | |
| <p>{{- wl_lang_no_spots_left -}}</p> | |
| {% else %} | |
| {% if wl_list_limit > 0 %} | |
| <p class='wla_text wait_li_list_status'>{{- wl_lang_list_limit_info -}}</p> | |
| {% else %} | |
| <p class='wla_text wait_li_list_status'>{{- sign_in_text -}}</p> | |
| {% endif %} | |
| {% if wl_lang_custom_column != blank %} | |
| <div class='wla_input wla_custom_column'> | |
| <input | |
| type='text' | |
| id='signed_in_custom_column' | |
| placeholder='{{ wl_lang_custom_column }}' | |
| > | |
| </div> | |
| {% endif %} | |
| <span class='wla_button' id='wl_join_button'>{{- join_text -}}</span> | |
| <div id='list-join-loading' style='display: none;'> | |
| <div class='position-loading-content'> | |
| <div class='wait_li_ring_loader'> | |
| <div class='double-bounce1'></div> | |
| <div class='double-bounce2'></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class='wait_li_referral_box_wrapper' style='display: none;'> | |
| {{- wait_li_referral_box -}} | |
| </div> | |
| {% endif %} | |
| {% endif %} | |
| {% else %} | |
| {% if spots_left < 1 %} | |
| <p>{{- wl_lang_no_spots_left -}}</p> | |
| {% else %} | |
| {% if wl_list_limit > 0 %} | |
| <p class='wla_text wait_li_list_status'>{{- wl_lang_list_limit_info -}}</p> | |
| {% else %} | |
| <p class='wla_text wait_li_list_status'>{{- sign_in_text -}}</p> | |
| {% endif %} | |
| <span class='wla_button' id='wait_li_register_trigger'>{{- join_text -}}</span> | |
| <a id='wait_li_login_trigger' class='wla_login_text'>{{- wl_lang_sign_in_check_status -}}</a> | |
| {% endif %} | |
| <p class='wla_text currently_waiting' style='display: none;'> | |
| {{- full_currently_waiting_text -}} | |
| </p> | |
| <div class='wait_li_referral_box_wrapper' style='display: none;'> | |
| {{- wait_li_referral_box -}} | |
| </div> | |
| <div class='wait_li_spinner' style='margin-top: 10px;'></div> | |
| {% endif %} | |
| </div> | |
| <div id='wait_li_success'> | |
| <p id='join_success_text' class='currently_waiting'>{{- success_text -}}</p> | |
| {{- wait_li_referral_box -}} | |
| </div> | |
| {% comment %} | |
| End Wait.li Button Form | |
| {% endcomment %} | |
| {% comment %} | |
| Wait.li Modal | |
| {% endcomment %} | |
| <div id='wait_li_modal' class='wait_li_modal'> | |
| <div class='wait_li_modal_content'> | |
| <div class='tabs'> | |
| <div class='tab'> | |
| <input type='radio' name='css-tabs' id='tab-1' checked class='tab-switch'> | |
| <label id='register_tab' for='tab-1' class='tab-label'>{{- wl_lang_register -}}</label> | |
| <div class='tab-content'> | |
| <div id='tab_success'> | |
| <svg | |
| width='50' | |
| height='50' | |
| viewBox='0 0 24 24' | |
| xmlns='http://www.w3.org/2000/svg' | |
| fill-rule='evenodd' | |
| clip-rule='evenodd' | |
| > | |
| <path d="M12 0c6.623 0 12 5.377 12 12s-5.377 12-12 12-12-5.377-12-12 5.377-12 12-12zm0 1c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11zm7 7.457l-9.005 9.565-4.995-5.865.761-.649 4.271 5.016 8.24-8.752.728.685z"/> | |
| </svg> | |
| <br> | |
| <p id='modal_success_text' class='currently_waiting'>{{ success_text }}</p> | |
| <div class='wait_li_referral_box_wrapper' style='display: none;'> | |
| {{- wait_li_referral_box -}} | |
| </div> | |
| </div> | |
| <div id='register_form'> | |
| <div class='section-header section-header--large'> | |
| <h1 class='section-header__title'>{{- wl_lang_register -}}</h1> | |
| </div> | |
| <form id='CustomerRegisterForm' class='wait_li_form'> | |
| <div class='wla_input wla_email'> | |
| <input | |
| type='email' | |
| id='wl_customer_email' | |
| placeholder='{{ wl_lang_email }}' | |
| required | |
| > | |
| <span id='wl_customer_email_error' class='wl_validation_error'></span> | |
| </div> | |
| <div class='wla_input wla_password'> | |
| <input | |
| type='password' | |
| id='wl_customer_password' | |
| placeholder='{{ wl_lang_password }}' | |
| required | |
| > | |
| <span id='wl_customer_password_error' class='wl_validation_error'></span> | |
| </div> | |
| {% if wl_lang_custom_column != blank %} | |
| <div class='wla_input wla_custom_column'> | |
| <input | |
| type='text' | |
| id='wl_custom_column' | |
| placeholder='{{ wl_lang_custom_column }}' | |
| required | |
| > | |
| <span id='wl_custom_column_error'></span> | |
| </div> | |
| {% endif %} | |
| <button type='submit' class='wla_button' id='wl_register_button'> | |
| {{- wl_lang_join_waiting_list -}} | |
| </button> | |
| <span id='error_field'></span> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <div class='tab'> | |
| <input type='radio' name='css-tabs' id='tab-2' class='tab-switch'> | |
| <label id='login_tab' for='tab-2' class='tab-label'>{{- wl_lang_sign_in -}}</label> | |
| <div class='tab-content'> | |
| <div id='CustomerLoginForm' class='wait_li_form'> | |
| {% form 'customer_login' %} | |
| <div class='section-header section-header--large'> | |
| <h1 id='sign_in_header' class='section-header__title'>{{- wl_lang_sign_in -}}</h1> | |
| </div> | |
| {{ form.errors | default_errors }} | |
| <input | |
| type='email' | |
| name='customer[email]' | |
| id='CustomerEmail' | |
| required | |
| placeholder='{{ wl_lang_email }}' | |
| {% if form.errors contains 'email' %} | |
| class='error' | |
| {% endif %} | |
| autocorrect='off' | |
| autocapitalize='off' | |
| autofocus | |
| > | |
| <input | |
| type='password' | |
| value='' | |
| name='customer[password]' | |
| required | |
| id='CustomerPassword' | |
| placeholder='{{ wl_lang_password }}' | |
| {% if form.errors contains 'password' %} | |
| class='error' | |
| {% endif %} | |
| > | |
| <input type='hidden' name='checkout_url' id='redirect_url' value=''> | |
| <button type='submit' class='wla_button'>{{- wl_lang_sign_in -}}</button> | |
| {% endform %} | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| {% comment %} | |
| End Wait.li Modal | |
| {% endcomment %} | |
| {% comment %} | |
| Wait.li Styling | |
| {% endcomment %} | |
| <style> | |
| .page-container { | |
| transform: none; | |
| -ms-transform: none; | |
| -webkit-transform: none; | |
| } | |
| #wait_li_success, | |
| .wla_form { | |
| margin: 10px 0; | |
| text-align: center; | |
| box-sizing: border-box; | |
| } | |
| .wait_li_atc_status_hide { | |
| display: none !important; | |
| } | |
| #wait_li_success { | |
| display: none; | |
| } | |
| .wait_li_modal .tab-content .section-header__title { | |
| font-size: 22px; | |
| margin-bottom: 15px; | |
| } | |
| .wait_li_modal { | |
| position: fixed; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 9999999; | |
| opacity: 0; | |
| visibility: hidden; | |
| transform: scale(1.1); | |
| transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s; | |
| box-sizing: border-box; | |
| } | |
| .wait_li_modal_content { | |
| -webkit-box-shadow: 0 0 11px 0 rgba(0,0,0,0.75); | |
| -moz-box-shadow: 0 0 11px 0 rgba(0,0,0,0.75); | |
| box-shadow: 0 0 11px 0 rgba(0,0,0,0.75); | |
| background-color: white; | |
| width: 450px; | |
| border-radius: 1px; | |
| margin: auto; | |
| position: relative; | |
| top: 25%; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| display: table; | |
| box-sizing: border-box; | |
| } | |
| @media only screen and (max-width: 500px) { | |
| .wait_li_modal_content { | |
| width: 100%; | |
| top: 15%; | |
| } | |
| } | |
| .wait_li_modal_content form { | |
| margin-bottom: 0; | |
| } | |
| .wait_li_modal_content .section-header { | |
| margin-bottom: 0; | |
| text-align: center; | |
| } | |
| #signed_in_custom_column { | |
| width: 100%; | |
| padding: 15px; | |
| margin: 10px 0 0px; | |
| } | |
| .wait_li_form input{ | |
| width: 100%; | |
| padding: 15px; | |
| margin: 10px 0; | |
| } | |
| .wait_li_form .btn { | |
| background: {{button_colour}}; | |
| color: {{button_text_colour}} | |
| } | |
| .wait_li_close_button { | |
| float: right; | |
| width: 1.5rem; | |
| line-height: 1.5rem; | |
| text-align: center; | |
| cursor: pointer; | |
| border-radius: 0; | |
| } | |
| .wait_li_close_button:hover { | |
| background-color: darkgray; | |
| } | |
| .wait_li_show_modal { | |
| opacity: 1; | |
| visibility: visible; | |
| transform: scale(1.0); | |
| transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s; | |
| background: rgba(0,0,0, 0.75); | |
| z-index: 2147483647; | |
| } | |
| .wla_input { | |
| float: left; | |
| } | |
| .wla_first_name { | |
| width: 50%; | |
| padding-right: 6px; | |
| } | |
| .wla_last_name { | |
| width: 50%; | |
| padding-left: 6px; | |
| } | |
| .wla_email { | |
| width: 100%; | |
| } | |
| .wla_password, | |
| .wla_password_confirmation { | |
| width: 100%; | |
| } | |
| .wla_custom_column { | |
| width: 100%; | |
| } | |
| #wl_customer_email { | |
| width: 100%; | |
| } | |
| .wla_button { | |
| width: 100%; | |
| } | |
| .wla_login_text { | |
| text-align: center; | |
| display: block; | |
| padding: 10px; | |
| } | |
| .wait_li_modal .tabs { | |
| position: relative; | |
| margin: 0; | |
| background: {{button_colour}} | |
| } | |
| .wait_li_modal .tabs::after, | |
| .wait_li_modal .tabs::before { | |
| content: ""; | |
| display: table; | |
| } | |
| .wait_li_modal .tabs input[type="radio"] { | |
| position: fixed; | |
| opacity: 0; | |
| } | |
| .wait_li_modal .tabs::after { | |
| clear: both; | |
| } | |
| .wait_li_modal .tab { | |
| float: left; | |
| width: 50%; | |
| } | |
| .wait_li_modal .section-header { | |
| padding: 0; | |
| } | |
| .wait_li_modal .tab-switch { | |
| display: none; | |
| } | |
| .wait_li_modal .tab-label { | |
| text-align: center; | |
| position: relative; | |
| display: block; | |
| line-height: 2.75em; | |
| height: 3em; | |
| padding: 0 1.618em; | |
| background: {{button_colour}}; | |
| border-right: 0.125rem solid{{button_colour}}; | |
| color: {{button_text_colour}}; | |
| cursor: pointer; | |
| top: 0; | |
| transition: all 0.25s; | |
| width: 100%; | |
| z-index: 6; | |
| margin-bottom: 0; | |
| } | |
| .wait_li_modal .tab-label:hover { | |
| top: -0.25rem; | |
| transition: all 0.25s; | |
| } | |
| .wait_li_modal .tab-content { | |
| padding: 1.618rem; | |
| background: #fff; | |
| color: #2c3e50; | |
| height: auto; | |
| width: 100%; | |
| position: absolute; | |
| z-index: 1; | |
| left: 0; | |
| opacity: 0; | |
| transition: all 0.35s; | |
| -webkit-box-shadow: 0 0 11px 0 rgba(0,0,0,0.75); | |
| -moz-box-shadow: 0 0 11px 0 rgba(0,0,0,0.75); | |
| box-shadow: 0 0 11px 0 rgba(0,0,0,0.75); | |
| } | |
| .wait_li_modal .tab-switch:checked + .tab-label { | |
| background: #fff; | |
| color: #2c3e50; | |
| border-bottom: 0; | |
| border-right: 0.0625rem solid #fff; | |
| transition: all 0.35s; | |
| z-index: 6; | |
| } | |
| .wait_li_modal .tab-switch:checked + .tab-label:hover { | |
| top: 0; | |
| } | |
| .wait_li_modal .tab-switch:checked + .tab-label + .tab-content { | |
| opacity: 1; | |
| transition: all 0.35s; | |
| z-index: 3; | |
| } | |
| @keyframes spinner { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .wla_form .wl_btn_spinner:before, .wait_li_modal .wl_btn_spinner:before { | |
| content: ''; | |
| box-sizing: border-box; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 20px; | |
| height: 20px; | |
| margin-top: -10px; | |
| margin-left: -10px; | |
| border-radius: 50%; | |
| border: 2px solid white; | |
| border-top-color: #333; | |
| animation: spinner 0.6s linear infinite; | |
| } | |
| .wait_li_spinner { | |
| content: ''; | |
| box-sizing: border-box; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 20px; | |
| height: 20px; | |
| margin-top: -10px; | |
| margin-left: -10px; | |
| border-radius: 50%; | |
| border: 2px solid white; | |
| border-top-color: #333; | |
| animation: spinner 0.6s linear infinite; | |
| display: none; | |
| } | |
| .wla_button { | |
| background: {{button_colour}}; | |
| color: {{button_text_colour}}; | |
| padding: 10px 25px; | |
| min-height: 47px; | |
| min-width: 150px; | |
| border: none; | |
| position: relative; | |
| margin-top: 10px; | |
| width: 100%; | |
| display: inline-block; | |
| cursor: pointer; | |
| } | |
| .wla_button:hover { | |
| color: {{button_text_colour}} | |
| } | |
| .wait_li_modal #tab_success { | |
| display: none; | |
| text-align: center; | |
| } | |
| .wait_li_modal #tab_success > svg { | |
| fill: {{button_colour}} !important; | |
| margin: 10px 0 20px; | |
| } | |
| .wait_li_modal #success_content { | |
| display: none; | |
| } | |
| .wait_li_modal .page-container { | |
| transform: none; | |
| -ms-transform: none; | |
| -webkit-transform: none; | |
| } | |
| .wla_text { | |
| margin: 0; | |
| } | |
| /* referral box */ | |
| .wait_li_referral_box { | |
| margin-top: 15px; | |
| } | |
| .wait_li_referral_box .resp-sharing-button__link{ | |
| max-width: 50px; | |
| } | |
| .wait_li_copy_field { | |
| padding: 5px; | |
| background-color: #f0f0f0; | |
| overflow: hidden; | |
| resize: none; | |
| width: 100%; | |
| min-height: 50px; | |
| text-align: center; | |
| } | |
| .wait_li_copy_field p { | |
| margin-bottom: 0; | |
| } | |
| .wait_li_copy_button { | |
| background-color: transparent; | |
| height: 25px; | |
| padding: 0px 10px; | |
| border-radius: 0; | |
| outline: none; | |
| border: 1px solid #ccc; | |
| font-size: 11px; | |
| } | |
| .wait_li_copy_button:hover { | |
| background-color: #f4f4f4; | |
| } | |
| *[wait_li_tooltip]:focus:after { | |
| content: attr(wait_li_tooltip); | |
| display: block; | |
| position: absolute; | |
| height: 25px; | |
| } | |
| .wait_li_copy_button svg { | |
| width: 14px; | |
| height: 14px; | |
| vertical-align: middle; | |
| margin-top: -2px; | |
| margin-left: 3px; | |
| } | |
| .wl_validation_error { | |
| color: #f00; | |
| } | |
| </style> | |
| {% comment %} | |
| End Wait.li Styling | |
| {% endcomment %} | |
| {% comment %} | |
| Wait.li Script | |
| {% endcomment %} | |
| <script> | |
| const base_url = 'https://my.wait.li'; | |
| function setCookie(cname, cvalue, exminutes) { | |
| const d = new Date(); | |
| d.setTime(d.getTime() + exminutes * 60 * 1000); | |
| let expires = 'expires=' + d.toUTCString(); | |
| document.cookie = cname + '=' + cvalue + ';' + expires + ';path=/'; | |
| } | |
| function getCookie(cname) { | |
| let name = cname + '='; | |
| let decodedCookie = decodeURIComponent(document.cookie); | |
| let ca = decodedCookie.split(';'); | |
| for (let i = 0; i < ca.length; i++) { | |
| let c = ca[i]; | |
| while (c.charAt(0) == ' ') { | |
| c = c.substring(1); | |
| } | |
| if (c.indexOf(name) == 0) { | |
| return c.substring(name.length, c.length); | |
| } | |
| } | |
| return ''; | |
| } | |
| var positionPolling = function (referralId) { | |
| return new Promise(function (resolve, reject) { | |
| var timerId = setInterval(function () { | |
| fetch(base_url + '/current_position?referralId=' + referralId, { | |
| method: 'GET', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| }) | |
| .then(function (response) { | |
| return response.json(); | |
| }) | |
| .then(function (data) { | |
| if (data.status !== 'waiting') { | |
| clearInterval(timerId); | |
| reject('You are not on the waiting list.'); | |
| return; | |
| } | |
| if (data.position) { | |
| clearInterval(timerId); | |
| resolve(data); | |
| } | |
| }) | |
| .catch(function (ex) { | |
| reject(ex); | |
| }); | |
| }, 10000); | |
| }); | |
| }; | |
| var saveReferralId = function (referralId) { | |
| var productId = '{{- product.id -}}'; | |
| var key = 'waitli_customer_referral_id_' + productId; | |
| setCookie(key, referralId, 30); | |
| }; | |
| var getSavedReferralId = function () { | |
| var productId = '{{- product.id -}}'; | |
| var key = 'waitli_customer_referral_id_' + productId; | |
| return getCookie(key); | |
| }; | |
| var wlShowSpinner = function () { | |
| var spinners = document.querySelectorAll('.wait_li_spinner'); | |
| if (spinners.length > 0) { | |
| spinners.forEach(function (item) { | |
| item.style.display = 'block'; | |
| }); | |
| } | |
| }; | |
| var wlHideSpinner = function () { | |
| var spinners = document.querySelectorAll('.wait_li_spinner'); | |
| if (spinners.length > 0) { | |
| spinners.forEach(function (item) { | |
| item.style.display = 'none'; | |
| }); | |
| } | |
| }; | |
| var wlDisplayListStatus = function (isHide) { | |
| const display = isHide ? 'none' : 'block'; | |
| // display register, login button | |
| const register_trigger = document.getElementById('wait_li_register_trigger'); | |
| const login_trigger = document.getElementById('wait_li_login_trigger'); | |
| const listStatusTexts = document.querySelectorAll('.wait_li_list_status'); | |
| if (register_trigger) { | |
| register_trigger.style.display = display; | |
| } | |
| if (login_trigger) { | |
| login_trigger.style.display = display; | |
| } | |
| if (listStatusTexts && listStatusTexts.length) { | |
| listStatusTexts.forEach(function (item) { | |
| item.style.display = display; | |
| }); | |
| } | |
| }; | |
| var wlHideListStatus = function () { | |
| wlDisplayListStatus(true); | |
| }; | |
| var wlShowListStatus = function () { | |
| wlDisplayListStatus(false); | |
| }; | |
| </script> | |
| <script> | |
| document.addEventListener("DOMContentLoaded", function(event) { | |
| var modal = document.getElementById("wait_li_modal"); | |
| var register_trigger = document.getElementById("wait_li_register_trigger"); | |
| var login_trigger = document.getElementById("wait_li_login_trigger"); | |
| var close_modal_button = document.getElementById("wait_li_close_button"); | |
| // Put the modal at the end of the body so it displays on top of other elements | |
| document.body.appendChild(modal); | |
| // Various functions for the modal popup and other scripts | |
| function isEmpty(value) { | |
| if (typeof value === 'number') return false | |
| else if (typeof value === 'string') return value.trim().length === 0 | |
| else if (Array.isArray(value)) return value.length === 0 | |
| else if (typeof value === 'object') return value == null || Object.keys(value).length === 0 | |
| else if (typeof value === 'boolean') return false | |
| else return !value | |
| }; | |
| function toggleModal(stat) { | |
| modal.classList.toggle("wait_li_show_modal") | |
| } | |
| function validateEmail(email) { | |
| var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; | |
| return re.test(email); | |
| } | |
| function windowOnClick(event) { | |
| if (event.target === modal) { | |
| toggleModal() | |
| } | |
| } | |
| var referred_id = new URL(document.location.href).searchParams.get('ref'); | |
| // Event trigger for opening register popup | |
| if (register_trigger) { | |
| register_trigger.addEventListener("click", function() { | |
| toggleModal(); | |
| document.getElementById("tab-1").checked = true; | |
| document.getElementById("tab-2").checked = false | |
| }) | |
| } | |
| // Event trigger for opening sign in popup | |
| if (login_trigger) { | |
| login_trigger.addEventListener("click", function() { | |
| toggleModal(); | |
| document.getElementById("tab-1").checked = false; | |
| document.getElementById("tab-2").checked = true | |
| }) | |
| } | |
| // Event trigger to close popup | |
| if (close_modal_button) { | |
| close_modal_button.addEventListener("click", toggleModal) | |
| } | |
| // Show waiting list popup for customers visiting via the link | |
| {% unless customer %} | |
| if (window.location.href.indexOf('#waiting_list') > 0) { | |
| toggleModal(); | |
| document.getElementById("tab-1").checked = false; | |
| document.getElementById("tab-2").checked = true; | |
| document.getElementById("sign_in_header").innerHTML = "{{- wl_lang_sign_in_to_purchase -}}"; | |
| } | |
| {% endunless %} | |
| var referralBoxInit = function(value) { | |
| document.querySelectorAll('.wait_li_referral_box_wrapper').forEach(function(item) { | |
| item.style.display = 'block'; | |
| }) | |
| var referralBoxes = document.querySelectorAll('.wait_li_copy_field'); | |
| referralBoxes.forEach(function(item) { | |
| item.value = item.value.replace(/__referral_id__/g, value); | |
| }) | |
| var refCopyButtons = document.querySelectorAll('.wait_li_copy_button'); | |
| refCopyButtons.forEach(function(item) { | |
| item.addEventListener('click', function(e) { | |
| var btn = e.target; | |
| var textarea = btn.previousElementSibling; | |
| if (!textarea) return; | |
| textarea.select(); | |
| document.execCommand('copy'); | |
| }) | |
| }) | |
| wlHideListStatus(); | |
| } | |
| window.addEventListener("click", windowOnClick); | |
| const signed_in_button = document.getElementById("wl_join_button"); | |
| const register_button = document.getElementById("wl_register_button"); | |
| // Script for signing up for waiting list via the already signed in button | |
| if (signed_in_button) { | |
| signed_in_button.addEventListener("click", function() { | |
| var customInput = document.getElementById('signed_in_custom_column'); | |
| var customColumn = null; | |
| if (customInput) { | |
| customColumn = document.getElementById('signed_in_custom_column').value; | |
| } | |
| const joinData = { | |
| customerId: {{ customer.id | json }}, | |
| productId: {{ wait_li_product_id | json }}, | |
| productTitle: {{ product.title | escape | json }}, | |
| productHandle: {{ product.handle | json }}, | |
| shopDomain: {{ shop.permanent_domain | json }}, | |
| customerEmail: {{ customer.email | json }}, | |
| custom_column: customColumn, | |
| referred_id | |
| }; | |
| console.log(joinData); | |
| signed_in_button.classList.add("wl_btn_spinner"); | |
| const originSignInText = signed_in_button.innerHTML; | |
| signed_in_button.innerHTML = ''; | |
| document.getElementById("wl_join_button").disabled = true; | |
| fetch(base_url + "/list/join", { | |
| method: 'POST', | |
| body: JSON.stringify(joinData), | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| } | |
| }) | |
| .then(response => { | |
| return response.json(); | |
| }) | |
| .then(async function(data) { | |
| if (!data.referralId) return; | |
| saveReferralId(data.referralId); | |
| let positionData = null; | |
| try { | |
| positionData = await positionPolling(data.referralId); | |
| } catch(e) { | |
| console.error(e); | |
| } | |
| if (!data) return; | |
| document.getElementById('wait_li_form').style.display = 'none'; | |
| document.getElementById('wait_li_success').style.display = 'block'; | |
| document.getElementById('register_form').style.display = 'none'; | |
| document.getElementById('register_tab').style.display = 'none'; | |
| document.getElementById('login_tab').style.display = 'none'; | |
| document.getElementById('tab_success').style.display = 'block'; | |
| referralBoxInit(data.referralId); | |
| var currently_elements = document.getElementsByClassName('currently_waiting'); | |
| if (currently_elements.length > 0) { | |
| for (let i = 0; i < currently_elements.length; i++) { | |
| var element = currently_elements[i]; | |
| element.innerHTML = element.innerHTML.replace(/current_position/g, positionData.position); | |
| } | |
| } | |
| }) | |
| .catch(error => console.error('Error:', error)) | |
| .finally(() => { | |
| signed_in_button.classList.remove("wl_btn_spinner"); | |
| signed_in_button.innerHTML = originSignInText; | |
| }) | |
| }) | |
| } | |
| // Script for signing up for waiting list via the register page button | |
| if (register_button) { | |
| register_button.addEventListener("click", function(e) { | |
| e.preventDefault(); | |
| const errors = []; | |
| const new_email = document.getElementById('wl_customer_email').value; | |
| const new_password = document.getElementById('wl_customer_password').value; | |
| const new_password_confirmation = document.getElementById('wl_customer_password').value; | |
| var customInput = document.getElementById('wl_custom_column'); | |
| var customColumn = null; | |
| if (customInput) { | |
| customColumn = document.getElementById('wl_custom_column').value; | |
| } | |
| if (isEmpty(new_email)) { | |
| document.getElementById('wl_customer_email_error').innerHTML = {{ wl_lang_empty_email | json }}; | |
| errors.push({{ wl_lang_empty_email | json }}) | |
| } | |
| if (!validateEmail(new_email)) { | |
| document.getElementById('wl_customer_email_error').innerHTML = {{ wl_lang_valid_email | json }}; | |
| errors.push({{ wl_lang_valid_email | json }}) | |
| } | |
| if (isEmpty(new_password)) { | |
| document.getElementById('wl_customer_password_error').innerHTML = {{ wl_lang_empty_password | json }}; | |
| errors.push({{ wl_lang_empty_password | json }}); | |
| } | |
| if (new_password.length < 6) { | |
| errors.push({{ wl_lang_password_length | json }}); | |
| document.getElementById('wl_customer_password_error').innerHTML = {{ wl_lang_password_length | json }}; | |
| } | |
| if (errors.length === 0) { | |
| const createData = { | |
| customerEmail: new_email, | |
| password: new_password, | |
| password_confirmation: new_password_confirmation, | |
| productId: '{{ wait_li_product_id }}', | |
| productTitle: '{{ product.title | escape }}', | |
| productHandle: '{{ product.handle }}', | |
| shopDomain: '{{ shop.permanent_domain }}', | |
| custom_column: customColumn, | |
| referred_id | |
| }; | |
| document.getElementById("wl_register_button").classList.add("wl_btn_spinner"); | |
| document.getElementById("wl_register_button").innerHTML = ''; | |
| document.getElementById("wl_register_button").disabled = true; | |
| fetch(base_url + "/list/join", { | |
| method: 'POST', | |
| body: JSON.stringify(createData), | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| } | |
| }) | |
| .then(response => { | |
| if (response.status == 200) { | |
| return response.json(); | |
| } | |
| document.getElementById("wl_register_button").classList.remove("wl_btn_spinner"); | |
| document.getElementById("wl_register_button").innerHTML = {{ wl_lang_join_waiting_list | json }}; | |
| if (response.status == 409) { | |
| document.getElementById("wl_register_button").disabled = true; | |
| document.getElementById('error_field').innerHTML = '<br><p style="text-align:center;">' + {{ wl_lang_already_on_list | json }} + '</p>'; | |
| } else if (response.status == 422) { | |
| document.getElementById("wl_register_button").disabled = false; | |
| document.getElementById('error_field').innerHTML = '<br><p style="text-align:center;">' + {{ wl_lang_account_valid | json }} + '</p>'; | |
| } else { | |
| document.getElementById("wl_register_button").disabled = false; | |
| document.getElementById('error_field').innerHTML = '<br><p style="text-align:center;">' + {{ wl_lang_generic_error | json }} + '</p>'; | |
| } | |
| }) | |
| .then(async (data) => { | |
| if (!data || !data.referralId) return; | |
| saveReferralId(data.referralId); | |
| var referalBox = document.getElementById('in_page_referral_box'); | |
| if (referalBox) | |
| referalBox.value = referalBox.value.replace(/__referral_id__/g, data.referralId); | |
| let positionData = null; | |
| try { | |
| positionData = await positionPolling(data.referralId); | |
| } catch(e) { | |
| console.error(e); | |
| } | |
| if (!positionData) { | |
| console.log('Wait.li Error: No position data returned.'); | |
| return | |
| } | |
| document.getElementById('register_form').style.display = 'none'; | |
| document.getElementById('register_tab').style.display = 'none'; | |
| document.getElementById('login_tab').style.display = 'none'; | |
| document.getElementById('tab_success').style.display = 'block'; | |
| document.getElementById('wait_li_success').style.display = 'block'; | |
| document.getElementById('wait_li_form').style.display = 'none' | |
| referralBoxInit(data.referralId); | |
| var currently_elements = document.getElementsByClassName('currently_waiting'); | |
| if (currently_elements.length > 0) { | |
| for (let i = 0; i < currently_elements.length; i++) { | |
| var element = currently_elements[i]; | |
| element.innerHTML = element.innerHTML.replace(/current_position/g, positionData.position); | |
| } | |
| } | |
| var domReferralId = document.getElementById("referral_id"); | |
| if (domReferralId) { | |
| if (Array.isArray(domReferralId)) { | |
| for (let i = 0; i < domReferralId.length; i++) { | |
| var element = currently_elements[i]; | |
| element.innerHTML = positionData.referralId; | |
| } | |
| } else { | |
| domReferralId.innerHTML = positionData.referralId; | |
| } | |
| } | |
| }) | |
| .catch(error => console.error('Error:', error)) | |
| } | |
| }, false) | |
| } | |
| // Add current page url to the login form for redirect purposes | |
| var login_redirect_url = document.getElementById("redirect_url"); | |
| var current_url = window.location.href.replace('#waiting_list', '');; | |
| if (login_redirect_url) { | |
| login_redirect_url.value = current_url; | |
| } | |
| // Grab the customer's current position on the list if they are waiting | |
| {% if customer != null and customer.id and customer_status == 'waiting' %} | |
| (function() { | |
| wlShowSpinner(); | |
| fetch(base_url + "/current_position/?customerId={{ customer.id }}&productId={{ wait_li_product_id }}&shopDomain={{ shop.permanent_domain }}", { | |
| method: 'GET', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| } | |
| }) | |
| .then((resp) => resp.json()) | |
| .then(function(data) { | |
| if (!data || !data.position || data.status !== 'waiting') return; | |
| referralBoxInit(data.referralId); | |
| var currently_elements = document.getElementsByClassName('currently_waiting'); | |
| if (currently_elements.length > 0) { | |
| for (let i = 0; i < currently_elements.length; i++) { | |
| var element = currently_elements[i]; | |
| element.innerHTML = element.innerHTML.replace(/current_position/g, data.position); | |
| element.style.display = 'block'; | |
| } | |
| } | |
| }) | |
| .finally(function() { | |
| wlHideSpinner(); | |
| }) | |
| })(); | |
| {% endif %} | |
| {% if customer == null %} | |
| const referralId = getSavedReferralId(); | |
| if (referralId) { | |
| (async function() { | |
| let positionData = null; | |
| wlHideListStatus(); | |
| wlShowSpinner(); | |
| try { | |
| positionData = await positionPolling(referralId); | |
| } catch(e) { | |
| console.error(e); | |
| } | |
| wlHideSpinner(); | |
| if (positionData && positionData.position && positionData.status === 'waiting') { | |
| referralBoxInit(positionData.referralId); | |
| var currently_elements = document.getElementsByClassName('currently_waiting'); | |
| if (currently_elements.length > 0) { | |
| for (let i = 0; i < currently_elements.length; i++) { | |
| var element = currently_elements[i]; | |
| element.innerHTML = element.innerHTML.replace(/current_position/g, positionData.position); | |
| element.style.display = 'block'; | |
| } | |
| } | |
| } else { | |
| saveReferralId(''); | |
| wlShowListStatus(); | |
| } | |
| })(); | |
| } | |
| {% endif %} | |
| }); | |
| </script> | |
| {% comment %} | |
| End Wait.li Script | |
| {% endcomment %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment