first commit

extension/opencart/catalog/view/template/captcha/basic.twig

@@ -0,0 +1,10 @@
+<fieldset>
+  <legend>{{ text_captcha }}</legend>
+  <div class="mb-3 required">
+    <label for="input-captcha" class="form-label">{{ entry_captcha }}</label> <input type="text" name="captcha" value="" id="input-captcha" class="form-control mb-1"/>
+    <div id="captcha">
+      <img src="index.php?route=extension/opencart/captcha/basic.captcha" alt=""/>
+    </div>
+    <div id="error-captcha" class="invalid-feedback"></div>
+  </div>
+</fieldset>

extension/opencart/catalog/view/template/module/account.twig

@@ -0,0 +1,13 @@
+<div class="list-group mb-3">
+  {% if not logged %}
+    <a href="{{ login }}" class="list-group-item">{{ text_login }}</a> <a href="{{ register }}" class="list-group-item">{{ text_register }}</a> <a href="{{ forgotten }}" class="list-group-item">{{ text_forgotten }}</a>
+  {% endif %}
+  <a href="{{ account }}" class="list-group-item">{{ text_account }}</a>
+  {% if logged %}
+    <a href="{{ edit }}" class="list-group-item">{{ text_edit }}</a> <a href="{{ password }}" class="list-group-item">{{ text_password }}</a>
+  {% endif %}
+  <a href="{{ address }}" class="list-group-item">{{ text_address }}</a> <a href="{{ wishlist }}" class="list-group-item">{{ text_wishlist }}</a> <a href="{{ order }}" class="list-group-item">{{ text_order }}</a> <a href="{{ download }}" class="list-group-item">{{ text_download }}</a><a href="{{ subscription }}" class="list-group-item">{{ text_subscription }}</a> <a href="{{ reward }}" class="list-group-item">{{ text_reward }}</a> <a href="{{ return }}" class="list-group-item">{{ text_return }}</a> <a href="{{ transaction }}" class="list-group-item">{{ text_transaction }}</a> <a href="{{ newsletter }}" class="list-group-item">{{ text_newsletter }}</a>
+  {% if logged %}
+    <a href="{{ logout }}" class="list-group-item">{{ text_logout }}</a>
+  {% endif %}
+</div>

extension/opencart/catalog/view/template/module/banner.twig

@@ -0,0 +1,43 @@
+<div id="carousel-banner-{{ module }}" class="carousel slide{% if effect == 'fade' %} carousel-fade{% endif %}" data-bs-ride="carousel">
+  {% if indicators and banners|batch(items)|length > 1 %}
+    <div class="carousel-indicators">
+      {% set banner_row = 0 %}
+      {% for banner in banners|batch(items) %}
+        <button type="button" data-bs-target="#carousel-banner-{{ module }}" data-bs-slide-to="{{ banner_row }}"{% if banner_row == 0 %} class="active"{% endif %}></button>
+        {% set banner_row = banner_row + 1 %}
+      {% endfor %}
+    </div>
+  {% endif %}
+  <div class="carousel-inner">
+    {% set banner_row = 0 %}
+    {% for carousel in banners|batch(items) %}
+      <div class="carousel-item{% if banner_row == 0 %} active{% endif %}">
+        <div class="row justify-content-center">
+          {% for banner in carousel %}
+            <div class="col-{{ (12 / items)|round }} text-center">
+              {% if banner.link %}
+                <a href="{{ banner.link }}"><img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-fluid"/></a>
+              {% else %}
+                <img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-fluid"/>
+              {% endif %}
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+      {% set banner_row = banner_row + 1 %}
+    {% endfor %}
+  </div>
+  {% if controls and banners|batch(items)|length > 1 %}
+    <button type="button" class="carousel-control-prev" data-bs-target="#carousel-banner-{{ module }}" data-bs-slide="prev"><span class="fa-solid fa-chevron-left"></span></button>
+    <button type="button" class="carousel-control-next" data-bs-target="#carousel-banner-{{ module }}" data-bs-slide="next"><span class="fa-solid fa-chevron-right"></span></button>
+  {% endif %}
+</div>
+<script type="text/javascript"><!--
+$(document).ready(function () {
+    new bootstrap.Carousel(document.querySelector('#carousel-banner-{{ module }}'), {
+        ride: 'carousel',
+        interval: {{ interval|escape('js') }},
+        wrap: true
+    });
+});
+//--></script>

extension/opencart/catalog/view/template/module/bestseller.twig

@@ -0,0 +1,6 @@
+<h3>{{ heading_title }}</h3>
+<div class="row{% if axis == 'horizontal' %} row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-4{% endif %}">
+  {% for product in products %}
+    <div class="col mb-3">{{ product }}</div>
+  {% endfor %}
+</div>

extension/opencart/catalog/view/template/module/category.twig

@@ -0,0 +1,17 @@
+<div class="list-group mb-3">
+  {% for category in categories %}
+    {% if category.category_id == category_id %}
+      <a href="{{ category.href }}" class="list-group-item active">{{ category.name }}</a>
+      {% if category.children %}
+        {% for child in category.children %}
+          {% if child.category_id == child_id %}
+            <a href="{{ child.href }}" class="list-group-item active">&nbsp;&nbsp;&nbsp;- {{ child.name }}</a>
+          {% else %}
+            <a href="{{ child.href }}" class="list-group-item">&nbsp;&nbsp;&nbsp;- {{ child.name }}</a>
+          {% endif %}
+        {% endfor %}
+      {% endif %}
+    {% else %} <a href="{{ category.href }}" class="list-group-item">{{ category.name }}</a>
+    {% endif %}
+  {% endfor %}
+</div>

extension/opencart/catalog/view/template/module/featured.twig

@@ -0,0 +1,6 @@
+<h3>{{ heading_title }}</h3>
+<div class="row{% if axis == 'horizontal' %} row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-4{% endif %}">
+  {% for product in products %}
+    <div class="col mb-3">{{ product }}</div>
+  {% endfor %}
+</div>

extension/opencart/catalog/view/template/module/filter.twig

@@ -0,0 +1,32 @@
+<div class="card">
+  <div class="card-header"><i class="fa-solid fa-filter"></i> {{ heading_title }}</div>
+  <div class="list-group list-group-flush">
+    {% for filter_group in filter_groups %}
+      <a class="list-group-item">{{ filter_group.name }}</a>
+      <div class="list-group-item">
+        <div id="filter-group-{{ filter_group.filter_group_id }}">
+          {% for filter in filter_group.filter %}
+            <div class="form-check">
+              <input type="checkbox" name="filter[]" value="{{ filter.filter_id }}" id="input-filter-{{ filter.filter_id }}" class="form-check-input"{% if filter.filter_id in filter_category %} checked{% endif %}/>
+              <label for="input-filter-{{ filter.filter_id }}" class="form-check-label">{{ filter.name }}</label>
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+  <div class="card-footer text-right">
+    <button type="button" id="button-filter" class="btn btn-primary"><i class="fa-solid fa-filter"></i> {{ button_filter }}</button>
+  </div>
+</div>
+<script type="text/javascript"><!--
+$('#button-filter').on('click', function () {
+    filter = [];
+
+    $('input[name^=\'filter\']:checked').each(function (element) {
+        filter.push(this.value);
+    });
+
+    location = '{{ action }}&filter=' + filter.join(',');
+});
+//--></script>

extension/opencart/catalog/view/template/module/html.twig

@@ -0,0 +1,6 @@
+<div>
+	{% if heading_title %}
+		<h2>{{ heading_title }}</h2>
+	{% endif %}
+	{{ html }}
+</div>

extension/opencart/catalog/view/template/module/information.twig

@@ -0,0 +1,9 @@
+<div class="sidebar">
+  <ul class="nav nav-tabs nav-stacked">
+    {% for information in informations %}
+      <li><a href="{{ information.href }}">{{ information.title }}</a></li>
+    {% endfor %}
+    <li><a href="{{ contact }}">{{ text_contact }}</a></li>
+    <li><a href="{{ sitemap }}">{{ text_sitemap }}</a></li>
+  </ul>
+</div>

extension/opencart/catalog/view/template/module/latest.twig

@@ -0,0 +1,6 @@
+<h3>{{ heading_title }}</h3>
+<div class="row{% if axis == 'horizontal' %} row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-4{% endif %}">
+  {% for product in products %}
+    <div class="col mb-3">{{ product }}</div>
+  {% endfor %}
+</div>

extension/opencart/catalog/view/template/module/special.twig

@@ -0,0 +1,6 @@
+<h3>{{ heading_title }}</h3>
+<div class="row{% if axis == 'horizontal' %} row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-4{% endif %}">
+  {% for product in products %}
+    <div class="col mb-3">{{ product }}</div>
+  {% endfor %}
+</div>

extension/opencart/catalog/view/template/module/store.twig

@@ -0,0 +1,12 @@
+<div class="card">
+  <div class="card-header">{{ heading_title }}</div>
+  <p style="text-align: center;">{{ text_store }}</p>
+  {% for store in stores %}
+    {% if store.store_id == store_id %}<a href="{{ store.url }}"><b>{{ store.name }}</b></a>
+      <br/>
+    {% else %}<a href="{{ store.url }}">{{ store.name }}</a>
+      <br/>
+    {% endif %}
+  {% endfor %}
+  <br/>
+</div>

extension/opencart/catalog/view/template/payment/bank_transfer.twig

@@ -0,0 +1,39 @@
+<fieldset>
+  <legend>{{ text_instruction }}</legend>
+  <p><b>{{ text_description }}</b></p>
+  <div class="border rounded p-3 mb-2">
+    <p>{{ bank }}</p>
+    <p>{{ text_payment }}</p>
+  </div>
+  <div class="text-end">
+    <button type="button" id="button-confirm" class="btn btn-primary">{{ button_confirm }}</button>
+  </div>
+</fieldset>
+<script type="text/javascript"><!--
+$('#button-confirm').on('click', function () {
+    var element = this;
+
+    $.ajax({
+        url: 'index.php?route=extension/opencart/payment/bank_transfer.confirm&language={{ language }}',
+        dataType: 'json',
+        beforeSend: function () {
+            $(element).button('loading');
+        },
+        complete: function () {
+            $(element).button('reset');
+        },
+        success: function (json) {
+            if (json['error']) {
+                $('#alert').prepend('<div class="alert alert-danger alert-dismissible"><i class="fa-solid fa-circle-exclamation"></i> ' + json['error'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
+            }
+
+            if (json['redirect']) {
+                location = json['redirect'];
+            }
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
+        }
+    });
+});
+//--></script>

extension/opencart/catalog/view/template/payment/cheque.twig

@@ -0,0 +1,42 @@
+<fieldset>
+  <legend>{{ text_instruction }}</legend>
+  <div class="border rounded p-3 mb-2">
+    <p><b>{{ text_payable }}</b></p>
+    <p>{{ payable }}</p>
+    <b>{{ text_address }}</b>
+    <br/>
+    <p>{{ address }}</p>
+    <p>{{ text_payment }}</p>
+  </div>
+  <div class="text-end">
+    <button type="button" id="button-confirm" class="btn btn-primary">{{ button_confirm }}</button>
+  </div>
+</fieldset>
+<script type="text/javascript"><!--
+$('#button-confirm').on('click', function () {
+    var element = this;
+
+    $.ajax({
+        url: 'index.php?route=extension/opencart/payment/cheque.confirm&language={{ language }}',
+        dataType: 'json',
+        beforeSend: function () {
+            $(element).button('loading');
+        },
+        complete: function () {
+            $(element).button('reset');
+        },
+        success: function (json) {
+            if (json['error']) {
+                $('#alert').prepend('<div class="alert alert-danger alert-dismissible"><i class="fa-solid fa-circle-exclamation"></i> ' + json['error'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
+            }
+
+            if (json['redirect']) {
+                location = json['redirect'];
+            }
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
+        }
+    });
+});
+//--></script>

extension/opencart/catalog/view/template/payment/cod.twig

@@ -0,0 +1,31 @@
+<div class="text-end">
+  <button type="button" id="button-confirm" class="btn btn-primary">{{ button_confirm }}</button>
+</div>
+<script type="text/javascript"><!--
+$('#button-confirm').on('click', function () {
+    var element = this;
+
+    $.ajax({
+        url: 'index.php?route=extension/opencart/payment/cod.confirm&language={{ language }}',
+        dataType: 'json',
+        beforeSend: function () {
+            $(element).button('loading');
+        },
+        complete: function () {
+            $(element).button('reset');
+        },
+        success: function (json) {
+            if (json['error']) {
+                $('#alert').prepend('<div class="alert alert-danger alert-dismissible"><i class="fa-solid fa-circle-exclamation"></i> ' + json['error'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
+            }
+
+            if (json['redirect']) {
+                location = json['redirect'];
+            }
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
+        }
+    });
+});
+//--></script>

extension/opencart/catalog/view/template/payment/free_checkout.twig

@@ -0,0 +1,31 @@
+<div class="text-end">
+  <button type="button" id="button-confirm" class="btn btn-primary">{{ button_confirm }}</button>
+</div>
+<script type="text/javascript"><!--
+$('#button-confirm').on('click', function() {
+    var element = this;
+
+    $.ajax({
+        url: 'index.php?route=extension/opencart/payment/free_checkout.confirm&language={{ language }}',
+        dataType: 'json',
+        beforeSend: function () {
+            $(element).button('loading');
+        },
+        complete: function () {
+            $(element).button('reset');
+        },
+        success: function (json) {
+            if (json['error']) {
+                $('#alert').prepend('<div class="alert alert-danger alert-dismissible"><i class="fa-solid fa-circle-exclamation"></i> ' + json['error'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
+            }
+
+            if (json['redirect']) {
+                location = json['redirect'];
+            }
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
+        }
+    });
+});
+//--></script>

extension/opencart/catalog/view/template/total/coupon.twig

@@ -0,0 +1,16 @@
+<div class="accordion-item">
+  <h2 class="accordion-header"><button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapse-coupon">{{ heading_title }}</button></h2>
+  <div id="collapse-coupon" class="accordion-collapse collapse" data-bs-parent="#accordion">
+    <div class="accordion-body">
+      <form id="form-coupon" action="{{ save }}" method="post" data-oc-toggle="ajax" data-oc-load="{{ list }}" data-oc-target="#shopping-cart">
+        <div class="row mb-3">
+          <label for="input-coupon" class="col-md-4 col-form-label">{{ entry_coupon }}</label>
+          <div class="col-md-8">
+            <input type="text" name="coupon" value="{{ coupon }}" placeholder="{{ entry_coupon }}" id="input-coupon" class="form-control"/>
+          </div>
+        </div>
+        <div class="text-end"><button type="submit" class="btn btn-primary">{{ button_coupon }}</button></div>
+      </form>
+    </div>
+  </div>
+</div>

extension/opencart/catalog/view/template/total/reward.twig

@@ -0,0 +1,16 @@
+<div class="accordion-item">
+  <h2 class="accordion-header"><button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapse-reward">{{ heading_title }}</button></h2>
+  <div id="collapse-reward" class="accordion-collapse collapse" data-bs-parent="#accordion">
+    <div class="accordion-body">
+      <form id="form-reward" action="{{ save }}" method="post" data-oc-toggle="ajax" data-oc-load="{{ list }}" data-oc-target="#shopping-cart">
+        <div class="row mb-3">
+          <label for="input-reward" class="col-md-4 col-form-label">{{ entry_reward }}</label>
+          <div class="col-md-8">
+            <input type="text" name="reward" value="{{ reward }}" placeholder="{{ entry_reward }}" id="input-reward" class="form-control"/>
+          </div>
+        </div>
+        <div class="text-end"><button type="submit" class="btn btn-primary">{{ button_reward }}</button></div>
+      </form>
+    </div>
+  </div>
+</div>

extension/opencart/catalog/view/template/total/shipping.twig

@@ -0,0 +1,211 @@
+<div class="accordion-item">
+  <h2 class="accordion-header"><button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapse-shipping">{{ heading_title }}</button></h2>
+  <div id="collapse-shipping" class="accordion-collapse collapse" data-bs-parent="#accordion">
+    <div class="accordion-body">
+      <form id="form-quote">
+        <p>{{ text_destination }}</p>
+        <div class="row mb-3 required">
+          <label for="input-country" class="col-md-4 col-form-label">{{ entry_country }}</label>
+          <div class="col-md-8">
+            <select name="country_id" id="input-country" class="form-select">
+              <option value="">{{ text_select }}</option>
+              {% for country in countries %}
+                <option value="{{ country.country_id }}"{% if country.country_id == country_id %} selected{% endif %}>{{ country.name }}</option>
+              {% endfor %}
+            </select>
+            <div id="error-country" class="invalid-feedback"></div>
+          </div>
+        </div>
+        <div class="row mb-3 required">
+          <label for="input-zone" class="col-md-4 col-form-label">{{ entry_zone }}</label>
+          <div class="col-md-8">
+            <select name="zone_id" id="input-zone" class="form-select"></select>
+            <div id="error-zone" class="invalid-feedback"></div>
+          </div>
+        </div>
+        <div class="row mb-3 required">
+          <label for="input-postcode" class="col-md-4 col-form-label">{{ entry_postcode }}</label>
+          <div class="col-md-8">
+            <input type="text" name="postcode" value="{{ postcode }}" placeholder="{{ entry_postcode }}" id="input-postcode" class="form-control"/>
+            <div id="error-postcode" class="invalid-feedback"></div>
+          </div>
+        </div>
+        <div class="text-end">
+          <button type="submit" id="button-quote" class="btn btn-primary">{{ button_quote }}</button>
+        </div>
+      </form>
+    </div>
+  </div>
+  <script type="text/javascript"><!--
+  $('#form-quote').on('submit', function (e) {
+      e.preventDefault();
+
+      $.ajax({
+          url: 'index.php?route=extension/opencart/total/shipping.quote&language={{ language }}',
+          type: 'post',
+          data: $('#form-quote').serialize(),
+          dataType: 'json',
+          beforeSend: function () {
+              $('#button-quote').button('loading');
+          },
+          complete: function () {
+              $('#button-quote').button('reset');
+          },
+          success: function (json) {
+              $('.alert-dismissible').remove();
+              $('#form-shipping').find('.is-invalid').removeClass('is-invalid');
+              $('#form-shipping').find('.invalid-feedback').removeClass('d-block');
+
+              if (json['error']) {
+                  if (json['error']['warning']) {
+                      $('#alert').prepend('<div class="alert alert-danger alert-dismissible"><i class="fa-solid fa-circle-exclamation"></i> ' + json['error']['warning'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
+                  }
+
+                  for (key in json['error']) {
+                      $('#input-' + key.replaceAll('_', '-')).addClass('is-invalid').find('.form-control, .form-select, .form-check-input, .form-check-label').addClass('is-invalid');
+                      $('#error-' + key.replaceAll('_', '-')).html(json['error'][key]).addClass('d-block');
+                  }
+              }
+
+              if (json['shipping_methods']) {
+                  $('#modal-shipping').remove();
+
+                  html = '<div id="modal-shipping" class="modal">';
+                  html += '  <div class="modal-dialog">';
+                  html += '    <div class="modal-content">';
+                  html += '      <div class="modal-header">';
+                  html += '        <h4 class="modal-title">{{ text_shipping_method }}</h4>';
+                  html += '        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>';
+                  html += '      </div>';
+                  html += '      <div class="modal-body">';
+                  html += '        <form id="form-shipping">';
+                  html += '          <p>{{ text_estimate }}</p>';
+
+                  for (i in json['shipping_methods']) {
+                      html += '<p><strong>' + json['shipping_methods'][i]['name'] + '</strong></p>';
+
+                      if (!json['shipping_methods'][i]['error']) {
+                          for (j in json['shipping_methods'][i]['quote']) {
+                              html += '<div class="form-check">';
+
+                              var code = i + '-' + j.replaceAll('_', '-');
+
+                              html += '<input type="radio" name="shipping_method" value="' + json['shipping_methods'][i]['quote'][j]['code'] + '" id="input-shipping-method-' + code + '"';
+
+                              if (json['shipping_methods'][i]['quote'][j]['code'] == '{{ code }}') {
+                                  html += ' checked';
+                              }
+
+                              html += '/>';
+                              html += '  <label for="input-shipping-method-' + code + '">' + json['shipping_methods'][i]['quote'][j]['name'] + ' - ' + json['shipping_methods'][i]['quote'][j]['text'] + '</label>';
+                              html += '</div>';
+                          }
+                      } else {
+                          html += '<div class="alert alert-danger alert-dismissible">' + json['shipping_methods'][i]['error'] + '</div>';
+                      }
+                  }
+
+                  html += '          <div class="text-end">';
+                  html += '            <button type="submit" id="button-shipping-method" class="btn btn-primary">{{ button_shipping }}</button>';
+                  html += '          </div>';
+                  html += '        </form>';
+                  html += '      </div>';
+                  html += '    </div>';
+                  html += '  </div>';
+                  html += '</div>';
+
+                  $('body').append(html);
+
+                  $('#modal-shipping').modal('show');
+              }
+          },
+          error: function (xhr, ajaxOptions, thrownError) {
+              console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
+          }
+      });
+  });
+
+  $(document).on('submit', '#form-shipping', function (e) {
+      e.preventDefault();
+
+      $.ajax({
+          url: 'index.php?route=extension/opencart/total/shipping.save&language={{ language }}',
+          type: 'post',
+          data: $('#form-shipping').serialize(),
+          dataType: 'json',
+          contentType: 'application/x-www-form-urlencoded',
+          beforeSend: function () {
+              $('#button-shipping-method').button('loading');
+          },
+          complete: function () {
+              $('#button-shipping-method').button('reset');
+          },
+          success: function (json) {
+              $('.alert-dismissible').remove();
+
+              if (json['error']) {
+                  $('#alert').prepend('<div class="alert alert-danger alert-dismissible"><i class="fa-solid fa-circle-exclamation"></i> ' + json['error'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
+              }
+
+              if (json['success']) {
+                  $('#alert').prepend('<div class="alert alert-success alert-dismissible"><i class="fa-solid fa-circle-exclamation"></i> ' + json['success'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
+
+                  $('#shopping-cart').load('index.php?route=checkout/cart.list&language={{ language }}');
+
+                  $('#modal-shipping').modal('hide');
+              }
+          },
+          error: function (xhr, ajaxOptions, thrownError) {
+              console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
+          }
+      });
+  });
+
+  $('#input-country').on('change', function () {
+      var element = this;
+
+      $.ajax({
+          url: 'index.php?route=localisation/country&country_id=' + this.value + '&language={{ language }}',
+          dataType: 'json',
+          beforeSend: function () {
+              $(element).prop('disabled', true);
+              $('#input-zone').prop('disabled', true);
+          },
+          complete: function () {
+              $(element).prop('disabled', false);
+              $('#input-zone').prop('disabled', false);
+          },
+          success: function (json) {
+              if (json['postcode_required'] == '1') {
+                  $('#input-postcode').parent().parent().addClass('required');
+              } else {
+                  $('#input-postcode').parent().parent().removeClass('required');
+              }
+
+              html = '<option value="">{{ text_select }}</option>';
+
+              if (json['zone'] && json['zone'] != '') {
+                  for (i = 0; i < json['zone'].length; i++) {
+                      html += '<option value="' + json['zone'][i]['zone_id'] + '"';
+
+                      if (json['zone'][i]['zone_id'] == '{{ zone_id }}') {
+                          html += ' selected';
+                      }
+
+                      html += '>' + json['zone'][i]['name'] + '</option>';
+                  }
+              } else {
+                  html += '<option value="0" selected>{{ text_none }}</option>';
+              }
+
+              $('#input-zone').html(html);
+          },
+          error: function (xhr, ajaxOptions, thrownError) {
+              console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
+          }
+      });
+  });
+
+  $('#input-country').trigger('change');
+  //--></script>
+</div>

extension/opencart/catalog/view/template/total/voucher.twig

@@ -0,0 +1,19 @@
+<div class="accordion-item">
+  <h2 class="accordion-header"><button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapse-voucher">{{ heading_title }}</button></h2>
+  <div id="collapse-voucher" class="accordion-collapse collapse" data-bs-parent="#accordion">
+    <div class="accordion-body">
+      <form id="form-voucher" action="{{ save }}" method="post" data-oc-toggle="ajax" data-oc-load="{{ list }}" data-oc-target="#shopping-cart">
+
+        <div class="row mb-3">
+          <label for="input-voucher" class="col-md-4 col-form-label">{{ entry_voucher }}</label>
+          <div class="col-md-8">
+            <input type="text" name="voucher" value="{{ voucher }}" placeholder="{{ entry_voucher }}" id="input-voucher" class="form-control"/>
+          </div>
+        </div>
+
+        <div class="text-end"><button type="submit" class="btn btn-primary">{{ button_voucher }}</button></div>
+
+      </form>
+    </div>
+  </div>
+</div>