Show/Hide shipping address form depending on the checkbox/radio state

This commit is contained in:
Jean-Baptiste Bellet
2021-08-19 10:34:07 +02:00
parent c806b3e889
commit 402bfdac30
2 changed files with 64 additions and 10 deletions

View File

@@ -76,6 +76,7 @@
checked: (shipping_method.id == selected_shipping_method),
name: "shipping_method_id",
"data-description": shipping_method.description,
"data-requireAddress": shipping_method.require_ship_address,
"data-action": "toggle#toggle shippingmethod#selectShippingMethod",
"data-toggle-show": shipping_method.require_ship_address
= shipping_method_form.label shipping_method.id, shipping_method.name, {for: "shipping_method_" + shipping_method.id.to_s }
@@ -83,16 +84,7 @@
= payment_or_shipping_price(shipping_method, @order)
%div.checkout-input{ "data-toggle-target": "content", style: "display: none" }
= f.check_box "Checkout.ship_address_same_as_billing", { id: "Checkout.ship_address_same_as_billing" }
= f.label "Checkout.ship_address_same_as_billing", t(:checkout_address_same), { for: "Checkout.ship_address_same_as_billing" }
- if spree_current_user
%div.checkout-input{ "data-toggle-target": "content", style: "display: none" }
= f.check_box "Checkout.default_ship_address", { id: "Checkout.default_ship_address" }
= f.label "Checkout.default_ship_address", t(:checkout_default_ship_address), { for: "Checkout.default_ship_address" }
%div.checkout-input{"data-shippingmethod-target": "shippingMethodDescription"}
%div.checkout-input{"data-shippingmethod-target": "shippingMethodDescription", style: "display: none" }
#distributor_address.panel
%span{"data-shippingmethod-target": "shippingMethodDescriptionContent"}
%br/
@@ -100,6 +92,46 @@
- if @order.order_cycle.pickup_time_for(@order.distributor)
= t :checkout_ready_for
= @order.order_cycle.pickup_time_for(@order.distributor)
%div.checkout-input{ "data-toggle-target": "content", style: "display: none" }
= f.check_box "Checkout.ship_address_same_as_billing", { id: "Checkout.ship_address_same_as_billing", "data-action": "shippingmethod#showHideShippingAddress", "data-shippingmethod-target": "shippingAddressCheckbox" }
= f.label "Checkout.ship_address_same_as_billing", t(:checkout_address_same), { for: "Checkout.ship_address_same_as_billing" }
%div{"data-shippingmethod-target": "shippingMethodAddress", style: "display: none" }
= f.fields :ship_address, model: @order.ship_address do |ship_address|
%div.checkout-input
= ship_address.label :address1, t("split_checkout.step1.address.address1.label")
= ship_address.text_field :address1, { placeholder: t("split_checkout.step1.address.address1.placeholder") }
= f.error_message_on "ship_address.address1"
%div.checkout-input
= ship_address.label :address2, t("split_checkout.step1.address.address2.label")
= ship_address.text_field :address2, { placeholder: t("split_checkout.step1.address.address2.placeholder") }
= f.error_message_on "ship_address.address2"
%div.checkout-input
= ship_address.label :city, t("split_checkout.step1.address.city.label")
= ship_address.text_field :city, { placeholder: t("split_checkout.step1.address.city.placeholder") }
= f.error_message_on "ship_address.city"
%div.checkout-input
= ship_address.label :state_id, t("split_checkout.step1.address.state_id.label")
= ship_address.select :state_id, @countries_with_states, { }, { "data-dependant-select-target": "select" }
%div.checkout-input
= ship_address.label :zipcode, t("split_checkout.step1.address.zipcode.label")
= ship_address.text_field :zipcode, { placeholder: t("split_checkout.step1.address.zipcode.placeholder") }
= f.error_message_on "ship_address.zipcode"
%div.checkout-input
= ship_address.label :country_id, t("split_checkout.step1.address.country_id.label")
= ship_address.select :country_id, @countries, { selected: @order.ship_address.country_id || DefaultCountry.id }, {"data-dependant-select-target": "source", "data-action": "dependant-select#handleSelectChange"}
- if spree_current_user
%div.checkout-input{ "data-toggle-target": "content", style: "display: none" }
= f.check_box "Checkout.default_ship_address", { id: "Checkout.default_ship_address" }
= f.label "Checkout.default_ship_address", t(:checkout_default_ship_address), { for: "Checkout.default_ship_address" }
.div.checkout-input
= f.label :special_instructions, t(:checkout_instructions)

View File

@@ -3,14 +3,19 @@ export default class extends Controller {
static targets = [
"shippingMethodDescription",
"shippingMethodDescriptionContent",
"shippingMethodAddress",
"shippingAddressCheckbox",
];
connect() {
// Hide shippingMethodDescription by default
this.shippingMethodDescriptionTarget.style.display = "none";
this.shippingMethodAddressTarget.style.display = "none";
}
selectShippingMethod(event) {
const input = event.target;
if (input.tagName === "INPUT") {
// Shipping method description
if (input.dataset.description.length > 0) {
this.shippingMethodDescriptionTarget.style.display = "block";
this.shippingMethodDescriptionContentTarget.innerText =
@@ -19,6 +24,23 @@ export default class extends Controller {
this.shippingMethodDescriptionTarget.style.display = "none";
this.shippingMethodDescriptionContentTarget.innerText = null;
}
// Require a ship address
if (
input.dataset.requireaddress === "true" &&
!this.shippingAddressCheckboxTarget.checked
) {
this.shippingMethodAddressTarget.style.display = "block";
} else {
this.shippingMethodAddressTarget.style.display = "none";
}
}
}
showHideShippingAddress() {
if (this.shippingAddressCheckboxTarget.checked) {
this.shippingMethodAddressTarget.style.display = "none";
} else {
this.shippingMethodAddressTarget.style.display = "block";
}
}
}