Skip to content

Instantly share code, notes, and snippets.

@rootpd

rootpd/sample_funnel.twig

Created July 30, 2019 08:23
Show Gist options
  • Save rootpd/2b7e1fe5a117c19b132b883c374294fb to your computer and use it in GitHub Desktop.
Save rootpd/2b7e1fe5a117c19b132b883c374294fb to your computer and use it in GitHub Desktop.
Download ZIP
Sample REMP CRM sales funnel
Raw
sample_funnel.twig
<!doctype html>
<html lang="en" dir="ltr">
<head>
<title>Buy subscription</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js" integrity="sha256-sPB0F50YUDK0otDnsfNHawYmA5M0pjjUf4TvRJkGFrI=" crossorigin="anonymous"></script>
<!--[if lt IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script><![endif]-->
{{ headEnd|raw }}
</head>
<body>
<form action="/sales-funnel/sales-funnel-frontend/submit" id="frm-payment" method="post" target="_top">
<div class="container">
<input type="hidden" name="funnel_url_key" value="{{ funnel.url_key }}">
<h1>Buy new subscription</h1>
<div class="row">
<div class="col-md-6">
<h3 class="show-error">Select type of subscription</h3>
{% if subscriptionTypes is empty %}
There are no subscription types allowed for this sales funnel. Head to <a href="/sales-funnel/sales-funnels-admin/">CRM admin</a>, click on the detail of funnel and select at least one subscription type.
{% else %}
<div class="show-error">
{% for subscriptionType in subscriptionTypes %}
<div class="radio">
<label><input type="radio" name="subscription_type" value="{{ subscriptionType.code }}">{{ subscriptionType.user_label }}</label>
</div>
{% endfor %}
</div>
{% endif %}
</div>
<div class="col-md-6">
<h3>Select payment gateway</h3>
{% if gateways is empty %}
There are no gateways allowed for this sales funnel. Head to <a href="/sales-funnel/sales-funnels-admin/">CRM admin</a>, click on the detail of funnel and select at least one gateway.
{% else %}
<div class="show-error">
{% for gateway in gateways %}
<div class="radio">
<label><input type="radio" name="payment_gateway" value="{{ gateway.code }}">{{ gateway.name }}</label>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
<hr>
{% if not isLogged %}
<style type="text/css">
#password_field { display:none }
</style>
<h3>Log in</h3>
<div class="row">
<div class="col-md-12">
<div class="form-group controls show-error">
<input type="text"
required
data-validation="email"
id="email"
name="email"
class="form-control optout-email input-text"
placeholder="Enter e-mail address" />
<span id="email-help-block" class="help-block">We'll send you access information to this email address.</span>
</div>
<div class="form-group controls show-error" id="password_field">
<input type="password"
id="password"
name="password"
class="form-group optout-password password input-text"
placeholder="Enter password" />
<span class="help-block" id="password-help-block">
E-mail is already registered, please enter your password. <a href="/users/users/reset-password" target="_blank">reset password?</a>)
</span>
<span class="help-block" id="password-help-block-fail" style="display: none">
Password is not correct
</span>
</div>
</div>
</div>
{% else %}
<p>You're currently logged in as <strong>{{ email }}</strong></p>
{% endif %}
<hr>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
<script src="/layouts/default/js/iframeResizer.contentWindow.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var $password_field = $('#password_field');
var $password = $('#password');
var $email = $('#email');
function checkEmail(callback) {
$.ajax({
method: 'POST',
url: '/api/v1/users/email',
data: {
email: $email.val(),
password: $password.val(),
},
timeout: 20000
}).done(function (response) {
callback(response);
}).fail(function (jqXHR, textStatus) {
if (textStatus === 'timeout') {
alert("server timeout");
} else {
alert("server error");
}
});
}
$email.change(function () {
checkEmail(function (response) {
if (response.status && response.status === 'taken') {
$('#password-help-block-fail').hide();
$('#password-help-block').show();
$password_field.show();
$password_field.closest('.show-error').addClass('has-error');
$('#email-help-block').html("E-mail is realdy registered");
} else if (response.status === 'error') {
if (response.code === 'email_missing') {
return;
}
$email.closest('.show-error').addClass('has-error');
if (response.code === 'invalid_email') {
$('#email-help-block').html("Invalid e-mail address");
}
} else {
$password_field.hide();
$('#email-help-block').html("");
}
});
});
$('form').on('submit', function () {
$('.show-error').removeClass('has-error')
});
$('form').validate({
rules: {
email: {
email: true
},
payment_gateway: {
required: true
},
subscription_type: {
required: true
},
},
highlight: function(element) {
console.log($(element), $(element).closest('.show-error'));
$(element).closest('.show-error').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.show-error').removeClass('has-error');
},
errorElement: 'div',
errorClass: 'help-block row',
errorPlacement: function(error, element) {
},
submitHandler: function (form) {
{% if isLogged %}
form.submit();
{% else %}
checkEmail(function(response) {
if (response.status && response.status === 'taken') {
if ($password_field.find('input').val() === '') {
$password_field.show();
$('#password-help-block-fail').hide();
$('#password-help-block').show();
$password_field.closest('.show-error').addClass('has-error');
return false;
} else if (response.password === false) {
$password_field.show();
$('#password-help-block-fail').show();
$('#password-help-block').hide();
$password_field.closest('.show-error').addClass('has-error');
return false;
} else {
form.submit();
}
} else if (response.status === 'error') {
// alert(response.message);
} else {
form.submit();
}
});
{% endif %}
},
invalidHandler: function (form, validator) {
if (!validator.numberOfInvalids())
return;
window.parent.$('html, body').animate({
scrollTop: $(validator.errorList[0].element).offset().top - 120
}, 400);
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment