Add primary checkboxs to address editing in example templates #2940

craftcms · Jul 5, 2023 · c78ee10 · c78ee10
1 parent 4b315f6
commit c78ee10
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 0 deletions.
diff --git a/example-templates/dist/shop/_private/address/fields.twig b/example-templates/dist/shop/_private/address/fields.twig
@@ -2,6 +2,7 @@
 {#
 Outputs address form fields for editing an address.
 #}
+{% set showPrimaryCheckboxes = showPrimaryCheckboxes is defined ? showPrimaryCheckboxes : false %}
 {% set addressFieldLayout = craft.app.getAddresses().getLayout() %}
 {% set addressCustomFields = addressFieldLayout.getCustomFields()|filter(f => className(f) == 'craft\\fields\\PlainText') %}
 {# @var address \craft\elements\Address #}
@@ -193,9 +194,34 @@ Outputs address form fields for editing an address.
  {% endfor %}
  </div>
  {% endif %}
+
+ {% if showPrimaryCheckboxes %}
+ <hr class="my-2">
+ <div class="my-2">
+ {{ input('text', 'isPrimaryBilling', address.isPrimarybilling ? 1 : 0) }}
+ <label>{{ input('checkbox', 'isPrimaryBillingBox', 1, { checked: address.isPrimaryBilling, 'data-primary-input': 'isPrimaryBilling' }) }} {{ 'Use as the primary billing address'|t('commerce') }}</label>
+ </div>
+ <div class="my-2">
+ {{ input('text', 'isPrimaryShipping', address.isPrimaryShipping ? 1 : 0) }}
+ <label>{{ input('checkbox', 'isPrimaryShippingBox', 1, { checked: address.isPrimaryShipping, 'data-primary-input': 'isPrimaryShipping' }) }} {{ 'Use as the primary shipping address'|t('commerce') }}</label>
+ </div>
+ {% endif %}
 </div>
 
 {% js %}
+{% if showPrimaryCheckboxes %}
+document.querySelectorAll('input[type=checkbox][data-primary-input]').forEach(el => {
+ el.addEventListener('change', ev => {
+ let primaryInput = document.querySelector(`input[name="${ev.target.dataset.primaryInput}"]`);
+ if (ev.target.checked) {
+ primaryInput.value = 1;
+ } else {
+ primaryInput.value = 0;
+ }
+ });
+});
+{% endif %}
+
 document.querySelector('select#{{ 'countryCode'|namespaceInputId(addressName) }}').addEventListener('change', ev => {
  const countryCode = ev.target.value;
  const stateSelect = document.querySelector('select#{{ 'administrativeArea'|namespaceInputId(addressName) }}');

diff --git a/example-templates/dist/shop/customer/addresses/edit.twig b/example-templates/dist/shop/customer/addresses/edit.twig
@@ -46,6 +46,7 @@
  {{ include('shop/_private/address/fields', {
  address: address,
  showLabelField: true,
+ showPrimaryCheckboxes: true,
  }) }}
  {{ hiddenInput('ownerId', currentUser.id) }}
 

diff --git a/example-templates/src/shop/_private/address/fields.twig b/example-templates/src/shop/_private/address/fields.twig
@@ -2,6 +2,7 @@
 {#
 Outputs address form fields for editing an address.
 #}
+{% set showPrimaryCheckboxes = showPrimaryCheckboxes is defined ? showPrimaryCheckboxes : false %}
 {% set addressFieldLayout = craft.app.getAddresses().getLayout() %}
 {% set addressCustomFields = addressFieldLayout.getCustomFields()|filter(f => className(f) == 'craft\\fields\\PlainText') %}
 {# @var address \craft\elements\Address #}
@@ -193,9 +194,34 @@ Outputs address form fields for editing an address.
  {% endfor %}
  </div>
  {% endif %}
+
+ {% if showPrimaryCheckboxes %}
+ <hr class="my-2">
+ <div class="my-2">
+ {{ input('text', 'isPrimaryBilling', address.isPrimarybilling ? 1 : 0) }}
+ <label>{{ input('checkbox', 'isPrimaryBillingBox', 1, { checked: address.isPrimaryBilling, 'data-primary-input': 'isPrimaryBilling' }) }} {{ 'Use as the primary billing address'|t('commerce') }}</label>
+ </div>
+ <div class="my-2">
+ {{ input('text', 'isPrimaryShipping', address.isPrimaryShipping ? 1 : 0) }}
+ <label>{{ input('checkbox', 'isPrimaryShippingBox', 1, { checked: address.isPrimaryShipping, 'data-primary-input': 'isPrimaryShipping' }) }} {{ 'Use as the primary shipping address'|t('commerce') }}</label>
+ </div>
+ {% endif %}
 </div>
 
 {% js %}
+{% if showPrimaryCheckboxes %}
+document.querySelectorAll('input[type=checkbox][data-primary-input]').forEach(el => {
+ el.addEventListener('change', ev => {
+ let primaryInput = document.querySelector(`input[name="${ev.target.dataset.primaryInput}"]`);
+ if (ev.target.checked) {
+ primaryInput.value = 1;
+ } else {
+ primaryInput.value = 0;
+ }
+ });
+});
+{% endif %}
+
 document.querySelector('select#{{ 'countryCode'|namespaceInputId(addressName) }}').addEventListener('change', ev => {
  const countryCode = ev.target.value;
  const stateSelect = document.querySelector('select#{{ 'administrativeArea'|namespaceInputId(addressName) }}');

diff --git a/example-templates/src/shop/customer/addresses/edit.twig b/example-templates/src/shop/customer/addresses/edit.twig
@@ -46,6 +46,7 @@
  {{ include('[[folderName]]/_private/address/fields', {
  address: address,
  showLabelField: true,
+ showPrimaryCheckboxes: true,
  }) }}
  {{ hiddenInput('ownerId', currentUser.id) }}