Checkout for OpenCart

In this example below you will see how to do a Checkout for OpenCart with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by esvlad, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright esvlad ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Checkout for OpenCart</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<section class="sect sect_checkout">
  <div class="wrapper">
    <h3 class="section_block_title">Оформление заказа</h3>
    <div class="checkout_block" id="accordion">
      <div class="panel">
        <h4>Способ оформления заказа</h4>
        <div class="panel_collapse collapse active" id="collapse-checkout-option">
          <div class="panel_body">
            <div class="checkout_panel__login">
              <div class="checkout_panel__login_group">
                <div class="checkout_panel__login__reg_onreg">
                  <p class="check_registration" id="checkout_registrastion">Зарегистрироваться</p>
                  <p class="check__or_guest">или</p>
                  <p class="check_no_registration" id="checkout_no_registrastion">Оформить заказ без регистрации </p>
                </div>
              </div>
              <div class="checkout_panel__login_group">
                <div class="checkout_panel__login__auth">
                  <form class="check_auth_form" id="check_auth" action="#" mathod="post">
                    <h3 class="check_form_title">Войти на сайт</h3>
                    <div class="check_form_input_group">
                      <input class="check_auth__input" type="text" name="name" value="" placeholder="Ваш E-MAIL" requred="requred"/>
                      <input class="check_auth__input" type="password" name="password" value="" placeholder="Пароль" requred="requred"/>
                    </div>
                    <p class="check_recovery_text" id="recovery_pass">Забыли пароль?</p>
                    <div class="check_auth_btn" id="check_auth_submit">Войти</div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="panel">
        <h4>Платежная информация</h4>
        <div class="panel_collapse collapse" id="collapse-payment-address">
          <div class="panel_body">
            <div class="checkout_panel__payinfo">
              <form class="check_form_payinfo" id="check_payinfo" action="#" mathod="post" data-type="fiz">
                <div class="form_row form_user_type">
                  <input id="user_type_1" type="radio" name="customer_group_id" value="1" checked="checked"/>
                  <label for="user_type_1">Физическое лицо</label>
                  <input id="user_type_2" type="radio" name="customer_group_id" value="2"/>
                  <label for="user_type_2">Юридическое лицо</label>
                </div>
                <div class="form_row contact_name_card">
                  <input id="user_name" type="text" name="firstname" value="" placeholder="Имя" required="required"/>
                </div>
                <div class="form_row contact_mail">
                  <input id="user_mail" type="email" name="email" value="" placeholder="E-mail" required="required"/>
                </div>
                <div class="form_row contact_phone">
                  <input id="user_phone" type="text" name="telephone" value="" placeholder="Телефон" required="required"/>
                </div>
                <div class="form_row contact_birthday date">
                  <input id="user_name" type="text" name="firstname" value="" placeholder="Дата рождения" required="required"/>
                </div>
                <div class="form_row contact_org_inn company_name">
                  <input id="input-company" type="text" name="company" value="" placeholder="Название организации" required="required"/>
                  <div class="check_field_file">
                    <input class="org_file" type="file" name="custom_field[]" value=""/>
                    <button class="org_file_upload" id="button-custom-field" type="button" data-loading-text="Загрузка...">Загрузить</button>
                  </div>
                </div>
                <div class="form_row contact_org_inn company_inn">
                  <input id="input-custom-field" type="text" name="custom_field" value="" placeholder="ИНН" required="required"/>
                </div>
                <div class="form_row contact_org_inn company_address">
                  <input id="input-custom-field" type="text" name="custom_field" value="" placeholder="Адрес" required="required"/>
                </div>
                <div class="form_row contact_btn_confirm">
                  <p class="check_form_btn" id="check_payinfo_submit">Продолжить</p>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div class="panel">
        <h4>Способ оплаты</h4>
        <div class="panel_collapse collapse" id="collapse-payment-method">
          <div class="panel_body">
            <div class="checkout_panel__paymethod">
              <form class="check_form_paymetod" id="check_paymetod" action="#" mathod="post">
                <div class="check_form__radio_group">
                  <div class="check_form__radio_list">
                    <input id="pay_code_1" type="radio" name="payment_method" value="1" checked="checked"/>
                    <label for="pay_code_1">Наличные</label>
                  </div>
                  <div class="check_form__radio_list">
                    <input id="pay_code_2" type="radio" name="payment_method" value="2"/>
                    <label for="pay_code_2">Банковская карта</label>
                  </div>
                  <div class="check_form__radio_list">
                    <input id="pay_code_3" type="radio" name="payment_method" value="3"/>
                    <label for="pay_code_3">Расчетный счет</label>
                  </div>
                </div>
                <div class="form_row contact_btn_confirm">
                  <p class="check_form_btn" id="check_paymethod_submit">Продолжить</p>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div class="panel">
        <h4>Подтверждение заказа</h4>
        <div class="panel_collapse collapse" id="collapse-checkout-confirm">
          <div class="panel_body">
            <div class="checkout_panel__confirm">
              <div class="check_confirm__product_list">
                <div class="check_confirm__product product_name">
                  <p>Шамбертен Кло де Без Гран Крю</p>
                </div>
                <div class="check_confirm__product product_count">
                  <p>2</p>
                </div>
                <div class="check_confirm__product product_total">
                  <p>84 000 руб.</p>
                </div>
              </div>
              <div class="check_confirm__product_list">
                <div class="check_confirm__product product_name">
                  <p>Ле Гранж Барон Эдмонд де Ротшильд О-Медок</p>
                </div>
                <div class="check_confirm__product product_count">
                  <p>2</p>
                </div>
                <div class="check_confirm__product product_total">
                  <p>2 800 руб.</p>
                </div>
              </div>
              <div class="check_confirm__product_list">
                <div class="check_confirm__product product_name">
                  <p>Шато Пальмер (Марго)</p>
                </div>
                <div class="check_confirm__product product_count">
                  <p>1</p>
                </div>
                <div class="check_confirm__product product_total">
                  <p>9 000 руб.</p>
                </div>
              </div>
              <div class="check_confirm__total_pay">
                <p class="check_confirm__total_pay__text">Всего к оплате:</p>
                <p class="check_confirm__total_pay__summ">295 800 руб.</p>
              </div>
              <div class="check_confirm_btn contact_btn_confirm">
                <p class="check_form_btn" id="check_confirm_submit">Оформить заказ</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/esvlad/checkout-for-opencart-amzKPv */
@font-face{
  font-family: PFDinLight; 
  src: url(http://a1wine.promolink.su/catalog/view/theme/a1wine/stylesheet/fonts/PFDinTextCondProLight.ttf);
  font-weight: 300;
}

body{
	width: 100%;
	background: #f5f5f5;
	font-family: PFDinLight;
	font-size: 16px;
	font-weight: 300;
}

header, section, footer{
	width: 100%;
	position: relative;
}

.wrapper{
	width: 1280px;
	margin: 0 auto;
	position: relative;
}

.section_block_title{
	font-family: Barkentina;
	font-size: 24px;
	font-weight: 500;
	text-align: center;
  text-transform: uppercase;
	color: #393738;
	margin-bottom: 55px;
}

/* CHECKOUT */

.checkout_block{
    width: 100%;
    margin-top: 50px;
    overflow: hidden;
    position: relative;
}

.checkout_block *{
  font-weight: 300;
}

.panel{
    background: #fff;
    width: 100%;
    margin-bottom: 30px;
}

.panel > h4{
    font-size: 24px;
    line-height: 48px;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
}

.collapse {
    display: none;
}

.collapse.active {
    display: block;
}

.panel_collapse{
    padding: 0 15px;
    overflow: hidden;
}

.panel_body{
    padding: 15px 0;
    overflow: hidden;
}

.checkout_panel__login_group{
  width: 618px;
  height: 252px;
  background: #f5f5f5;
  overflow: hidden;
}

.checkout_panel__login_group:first-child{
  float: left;
}

.checkout_panel__login_group:last-child{
  float: right;
}

.checkout_panel__login__reg_onreg{
  text-align: center;
  font-size: 24px;
  padding: 70px 0;
}

.checkout_panel__login__reg_onreg > p{
  margin: 0;
}

.checkout_panel__login__reg_onreg > p.check_registration{
  text-decoration: underline;
  margin-bottom: 15px;
  cursor: pointer;
}

.checkout_panel__login__reg_onreg > p.check__or_guest{
  margin-bottom: 15px;
}

.checkout_panel__login__reg_onreg > p.check_no_registration{
  background: #d9b362;
  line-height: 36px;
  text-decoration: underline;
  text-transform: uppercase;
  padding: 2px 15px;
  display: inline-block;
  cursor: pointer;
}

.checkout_panel__login__auth{
  padding: 20px 0 15px;
  font-size: 24px;
}

.check_auth_form{
  width: 330px;
  margin: 0 auto;
}

.check_form_title{
  margin-top: 0;
  margin-bottom: 30px;
}

.check_form_input_group{
  width: 100%;
}

.check_form_input_group > .check_auth__input{
  width: 305px;
  height: 36px;
  padding: 0 10px;
  margin-bottom: 5px;
  border: 0;
  outline: 0;
  font-size: 24px;
  color: #000;
}

.check_form_input_group > .check_auth__input::-webkit-input-placeholder {color:#000;font-size: 24px;}
.check_form_input_group > .check_auth__input::-moz-placeholder          {color:#000;font-size: 24px;}/* Firefox 19+ */
.check_form_input_group > .check_auth__input:-moz-placeholder           {color:#000;font-size: 24px;}/* Firefox 18- */
.check_form_input_group > .check_auth__input:-ms-input-placeholder      {color:#000;font-size: 24px;}

.check_recovery_text{
  margin-top: 20px;
  font-size: 14px;
  float: left;
  text-decoration: underline;
  cursor: pointer;
}

.check_auth_btn{
  background: #d9b362;
  float: right;
  width: 114px;
  margin-top: 30px;
  line-height: 38px;
  text-align: center;
  text-decoration: underline;
  text-transform: uppercase;
  display: block;
  cursor: pointer;
}

/* Позже вырезать */

.form_row{
	width: 100%;
	float: none;
	clear: both;
	margin-bottom: 12px;
}

.form_row > label{
	width: 220px;
    text-align: right;
    display: block;
    float: left;
    margin-right: 25px;
	margin-top: 10px;
	font-size: 18px;
	color: #000;
}

.form_row > input:not([type="radio"]){
	width: 290px;
	height: 40px;
	border: 2px solid #ececec;
	outline: 0;
	padding: 0 15px;
	font-size: 18px;
	color: #000;
}

.form_row > input.number_card,
.form_row > input.org_file{
	position: absolute;
	width: 220px;
    margin-left: 50px;
}

.form_row > input::-webkit-input-placeholder {color:#000;font-size: 18px;}
.form_row > input::-moz-placeholder          {color:#000;font-size: 18px;}/* Firefox 19+ */
.form_row > input:-moz-placeholder           {color:#000;font-size: 18px;}/* Firefox 18- */
.form_row > input:-ms-input-placeholder      {color:#000;font-size: 18px;}

.form_row.form_user_type{
	overflow: hidden;
	margin-bottom: 35px;
}

.form_row.form_user_type > input{
	display: none;
}

.form_row.form_user_type > label{
	width: 48%;
    float: right;
    text-align: left;
    text-transform: uppercase;
    margin-right: 0;
    margin-top: 5px;
    color: #989898;
    cursor: pointer;
}

.form_row.form_user_type > label > span{
	border-bottom: 1px solid #989898;
}

.form_row.form_user_type > label[for="user_type_1"]{
	width: 48%;
    float: left;
    text-align: right;
    text-transform: uppercase;
}

.form_row.form_user_type > input:checked + label{
	color: #000;
}

.form_row.form_user_type > input:checked + label > span{
	border-bottom: 1px solid #000;
}

.form_row.contact_gender{
	margin: 20px 0;
}

.form_row.contact_gender > label{
	margin-top: -3px;
}

.form_row.contact_gender > .user_gender_type > input{
	display: none;
}

.form_row.contact_gender > .user_gender_type > label{
	position: relative;
	margin-left: 60px;
	cursor: pointer;
}

.form_row.contact_gender > .user_gender_type > label:before{
	content: '';
	background: url(../img/icons/icon_checkbox.png) no-repeat;
	background-position: 0 0;
    background-size: cover;
    width: 15px;
    height: 15px;
    position: absolute;
    left: -25px;
    top: 2px;
}

.form_row.contact_gender > .user_gender_type > input:checked + label:before{
	background-position: 0 -15px;
}

.text_danger{
	width: 100%;
	position: absolute;
    left: 245px;
    margin-top: 50px;
    font-size: 14px;
    color: red;
}

.text_danger.danger_file{
	left: 619px;
	margin-top: 36px;
}

.org_file{
	display: none;
}

.org_file_upload{
	background: transparent;
    border: 0;
    border-bottom: 1px solid #000;
    outline: 0;
    font-family: PFDinLight;
    font-size: 18px;
    text-transform: uppercase;
    position: absolute;
    margin: 9px 0 0 50px;
    cursor: pointer;
}

.org_file_uploaded{
	border: 0;
	font-family: PFDinLight;
    font-size: 16px;
    text-transform: none;
    color: green;
    position: absolute;
    width: 130px;
    margin: 33px 0 0 50px;
}

.org_file_uploaded.error{
	color: red;
}

.form_row.contact_captcha > input{
	display: none;
}

.form_row.contact_captcha > label{
	float: none;
    width: 100px;
    margin-left: 270px;
    margin-top: 22px;
    position: relative;
}

.form_row.contact_requred{
	margin: 25px 0 20px;
}

.form_row.contact_requred > p{
	text-align: center;
    width: 92.5%;
}

.form_row.contact_submitted{
	margin-bottom: 50px;
}

/* Конец вырезки */

/* PAYINFO */

.check_form_payinfo{
  width: 466px;
  margin: 0 auto;
  display: block;
}

.check_form_payinfo > .form_row > input{
  width: 426px;
  padding: 6px 15px 0;
}

.check_form_payinfo > .form_row > input::-webkit-input-placeholder {color:#808080;font-size: 24px;}
.check_form_payinfo > .form_row > input::-moz-placeholder          {color:#808080;font-size: 24px;}/* Firefox 19+ */
.check_form_payinfo > .form_row > input:-moz-placeholder           {color:#808080;font-size: 24px;}/* Firefox 18- */
.check_form_payinfo > .form_row > input:-ms-input-placeholder      {color:#808080;font-size: 24px;}

.check_form_payinfo > .form_row > input[name="customer_group_id"]:checked + label{
  text-decoration: underline;
}

.check_form_payinfo > .form_row > .check_field_file{
  position: relative;
}

.check_form_payinfo > .form_row > .check_field_file > .org_file_upload{
    right: -120px;
    margin: 26px 0 0;
    padding: 0;
    z-index: 999;
    display: inline-block;
}

.contact_btn_confirm{
  width: 100%;
  text-align: center;
}

.check_form_btn{
  font-size: 24px;
  text-decoration: underline;
  text-transform: uppercase;
  display: inline-block;
  cursor: pointer;
}

.check_form_paymetod{
  width: 148px;
  margin: 0 auto;
}

/* PAYMETOD */

.check_form__radio_list{
  width: 260px;
  margin-bottom: 15px;
}

.check_form__radio_list > input{
	display: none;
}

.check_form__radio_list > label{
	font-size: 24px;
	text-transform: uppercase;
	cursor: pointer;
  position: relative;
}

.check_form__radio_list > label:before{
	content: '';
	width: 15px;
	height: 15px;
  background: #fff;
	position: absolute;
	left: -50px;
  top: 5px;
  border: 1px solid #e6e6e6;
}

.check_form__radio_list > input:checked + label:after{
	content: '';
	width: 9px;
	height: 9px;
	background: #000;
	position: absolute;
	left: 0;
	left: -46px;
  top: 9px;
  border-radius: 50%;
}

.check_form__radio_list > input:not(checked) + label:after{
	background: #e6e6e6;
}

/* CONFIRM */

.checkout_panel__confirm{
  width: 1008px;
  margin: 0 auto;
}

.check_confirm__product_list{
  background: #f5f5f5;
  width: 100%;
  font-size: 24px;
  height: 48px;
  margin-bottom: 5px;
  overflow: hidden;
  clear: both;
}

.check_confirm__product > p{
  line-height: 48px;
  margin: 0;
}

.check_confirm__product.product_name{
  width: 614px;
  float: left;
}

.check_confirm__product.product_name > p{
  margin-left: 20px;
}

.check_confirm__product.product_count{
  width: 62px;
  float: left;
  text-align: center;
}

.check_confirm__product.product_total{
  width: 332px;
  float: right;
}

.check_confirm__product.product_total > p{
  margin-left: 145px;
}

.check_confirm__total_pay{
  width: 368px;
  font-size: 24px;
  float: right;
}

.check_confirm__total_pay__text{
  width: 180px;
  float: left;
}

.check_confirm_btn{
  clear: both;
}

/*Downloaded from https://www.codeseek.co/esvlad/checkout-for-opencart-amzKPv */
$('#checkout_no_registrastion').click(function(){
  if($(this).parents('.collapse').hasClass('active')){
    $('#collapse-payment-address').slideDown(200);
    $(this).parents('.collapse').delay(150).slideUp(200);
    setTimeout(function(){
      $('#collapse-checkout-option').removeClass('active');
      $('#collapse-checkout-option').prev().addClass('clicked_collapse');
      $('#collapse-payment-address').addClass('no_registration active');
    },350);
  }
});

$('#check_payinfo_submit').click(function(){
  if($(this).parents('.collapse').hasClass('active')){
    $('#collapse-payment-method').slideDown(200).addClass('no_registration');
    $(this).parents('.collapse').delay(150).slideUp(200);
    setTimeout(function(){
      $('#collapse-payment-address').removeClass('active');
      $('#collapse-payment-address').prev().addClass('clicked_collapse');
      $('#collapse-payment-method').addClass('no_registration active');
    },350);
  }
});

$('#check_paymethod_submit').click(function(){
  if($(this).parents('.collapse').hasClass('active')){
    $('#collapse-checkout-confirm').slideDown(200).addClass('no_registration');
    $(this).parents('.collapse').delay(150).slideUp(200);
    setTimeout(function(){
      $('#collapse-payment-method').removeClass('active');
      $('#collapse-payment-method').prev().addClass('clicked_collapse');
      $('#collapse-checkout-confirm').addClass('active');
    },350);
  }
});

$('#check_confirm_submit').click(function(){
  console.log('Успех!');
});

$(document).delegate('.clicked_collapse', 'click', function(){
  console.log($(this).text());
  $(this).next().slideDown(200);
  $('.collapse.active').slideUp(200);
  $('.collapse.active').queue(function () {
    $(this).removeClass('active');
    $(this).dequeue();
  });
  $(this).next().addClass('active');
});

Comments