Unable to populate customer telephone from cart #948
-
Hi Duncan Our client has requested that we also capture the customer telephone at checkout. I have added the field to the customer blueprint and displayed it on the information.antlers.html view. However when I complete a test order the customer is written (name and email) but no telephone. I have cleared the application cache. I can manually add and save the customer telephone via the admin panel out of interest, it is just not saving from the cart. Any ideas? Thanks Jamie |
Beta Was this translation helpful? Give feedback.
Replies: 5 comments 5 replies
-
Can you share the code for the |
Beta Was this translation helpful? Give feedback.
-
{{# If there's nothing in the cart, redirect the user to the Cart page. #}}
{{ if {sc:cart:count} === 0 }}
{{ redirect to="/cart" }}
{{ /if }}
<section class="fluid-container pt-28 text-center">
{{ partial:typography/prose as="article" class="contents" }}
<h1>Checkout</h1>
{{ /partial:typography/prose }}
</section>
<main>
<div class="max-w-4xl mx-auto my-12 px-4">
<div class="flex flex-col md:flex-row w-full">
<div class="w-full">
<div class="max-w-lg">
{{ partial:checkout/errors }}
{{ sc:cart:update x-data="checkoutInformationForm" redirect="/checkout/shipping" @submit.prevent="submit" }}
<h2 class="text-gray-900 font-bold text-2xl mb-4">
Your information
</h2>
<div class="grid md:grid-cols-12 gap-6 mb-12">
{{ partial:components/forms/input_field width="50" handle="name" display="Name" required="true" }}
{{ partial:components/forms/input_field width="50" handle="email" display="Email" input_type="email" required="true" }}
{{ partial:components/forms/input_field width="50" handle="telephone" display="Telephone" required="false" }}
</div>
<h2 class="text-gray-900 font-bold text-2xl mb-4">
Shipping Address
</h2>
<div class="grid md:grid-cols-12 gap-6 mb-12">
{{ partial:components/forms/input_field width="50" handle="shipping_name" display="Shipping Name" required="true" }}
{{ partial:components/forms/input_field width="50" handle="shipping_address" display="Address Line 1" required="true" }}
{{ partial:components/forms/input_field width="50" handle="shipping_address_line2" display="Address Line 2" }}
{{ partial:components/forms/input_field width="50" handle="shipping_city" display="Town/City" required="true" }}
{{ partial:components/forms/input_field width="50" handle="shipping_postal_code" display="Postal/Zip Code" required="true" }}
{{ partial:components/forms/select_field width="50" handle="shipping_country" display="Country" x-model="shippingCountry" required="true" }}
{{ sc:countries common="GB|US|CA|IE" }}
<option value="{{ iso }}">{{ name }}</option>
{{ /sc:countries }}
{{ /partial:components/forms/select_field }}
{{ partial:components/forms/select_field width="50" handle="shipping_region" display="Region" }}
<template
x-for="region in shippingRegionOptions"
>
<option
:value="region.id"
x-text="region.name"
></option>
</template>
{{ /partial:components/forms/select_field }}
</div>
<h2 class="text-gray-900 font-bold text-2xl mb-4">
Billing Address
</h2>
<label for="use_shipping_address_for_billing" class="text-sm text-gray-700 flex flex-row items-center select-none mb-6">
<input
type="checkbox"
id="use_shipping_address_for_billing"
name="use_shipping_address_for_billing"
x-model="useShippingAddressForBilling"
class="mr-2"
value="{{ old:use_shipping_address_for_billing }}"
/>
Same as shipping address
</label>
<template x-if="!useShippingAddressForBilling">
<div class="grid md:grid-cols-12 gap-6 mb-12">
{{ partial:components/forms/input_field width="50" handle="billing_name" display="Billing Name" required="true" }}
{{ partial:components/forms/input_field width="50" handle="billing_address_line1" display="Address Line 1" required="true" }}
{{ partial:components/forms/input_field width="50" handle="billing_address_line2" display="Address Line 2" }}
{{ partial:components/forms/input_field width="50" handle="billing_city" display="Town/City" required="true" }}
{{ partial:components/forms/input_field width="50" handle="billing_zip_code" display="Postal/Zip Code" required="true" }}
{{ partial:components/forms/select_field width="50" handle="billing_country" display="Country" x-model="billingCountry" required="true" }}
{{ sc:countries common="GB|US|CA|IE" }}
<option value="{{ iso }}">{{ name }}</option>
{{ /sc:countries }}
{{ /partial:components/forms/select_field }}
{{ partial:components/forms/select_field width="50" handle="billing_region" display="Region" }}
<template
x-for="region in billingRegionOptions"
>
<option
:value="region.id"
x-text="region.name"
></option>
</template>
{{ /partial:components/forms/select_field }}
</div>
</template>
<div class="my-6 flex justify-center">
{{ partial:components/button label="Continue to Shipping" type="submit" as="button" }}
</div>
{{ /sc:cart:update }}
</div>
</div>
<div class="w-full md:w-2/5 mb-4 md:mb-0">
{{ partial:checkout/cart }}
</div>
</div>
</div>
</main>
<script>
{{ cache for="24 hours" }}
window.regions = {{ json_regions:index }};
{{ /cache }}
document.addEventListener('alpine:init', () => {
Alpine.data('checkoutInformationForm', () => ({
isSubmitting: false,
useShippingAddressForBilling: true,
shippingCountry: 'GB',
billingCountry: 'GB',
get shippingRegionOptions() {
return window.regions.filter(region => region.country_iso === this.shippingCountry)
},
get billingRegionOptions() {
return window.regions.filter(region => region.country_iso === this.billingCountry)
},
submit() {
this.isSubmitting = true
this.$el.querySelector('button').disabled = true
this.$el.querySelector('button').classList.add('opacity-50')
this.$el.submit()
},
}))
})
</script> |
Beta Was this translation helpful? Give feedback.
-
{{# If there's nothing in the cart, redirect the user to the Cart page. #}}
{{ if {sc:cart:count} === 0 }}
{{ redirect to="/cart" }}
{{ /if }}
<section class="fluid-container pt-28 text-center">
{{ partial:typography/prose as="article" class="contents" }}
<h1>Checkout</h1>
{{ /partial:typography/prose }}
</section>
<main>
<div class="max-w-4xl mx-auto my-12 px-4">
<div class="flex flex-col md:flex-row w-full">
<div class="w-full">
<div class="max-w-lg">
{{ partial:checkout/errors }}
{{ sc:cart:update x-data="checkoutInformationForm" redirect="/checkout/shipping" @submit.prevent="submit" }}
<h2 class="text-gray-900 font-bold text-2xl mb-4">
Your information
</h2>
<div class="grid md:grid-cols-12 gap-6 mb-12">
{{ partial:components/forms/input_field width="50" handle="name" display="Name" required="true" }}
{{ partial:components/forms/input_field width="50" handle="email" display="Email" input_type="email" required="true" }}
{{ partial:components/forms/input_field width="50" handle="telephone" display="Telephone" required="false" }}
</div>
<h2 class="text-gray-900 font-bold text-2xl mb-4">
Shipping Address
</h2>
<div class="grid md:grid-cols-12 gap-6 mb-12">
{{ partial:components/forms/input_field width="50" handle="shipping_name" display="Shipping Name" required="true" }}
{{ partial:components/forms/input_field width="50" handle="shipping_address" display="Address Line 1" required="true" }}
{{ partial:components/forms/input_field width="50" handle="shipping_address_line2" display="Address Line 2" }}
{{ partial:components/forms/input_field width="50" handle="shipping_city" display="Town/City" required="true" }}
{{ partial:components/forms/input_field width="50" handle="shipping_postal_code" display="Postal/Zip Code" required="true" }}
{{ partial:components/forms/select_field width="50" handle="shipping_country" display="Country" x-model="shippingCountry" required="true" }}
{{ sc:countries common="GB|US|CA|IE" }}
<option value="{{ iso }}">{{ name }}</option>
{{ /sc:countries }}
{{ /partial:components/forms/select_field }}
{{ partial:components/forms/select_field width="50" handle="shipping_region" display="Region" }}
<template
x-for="region in shippingRegionOptions"
>
<option
:value="region.id"
x-text="region.name"
></option>
</template>
{{ /partial:components/forms/select_field }}
</div>
<h2 class="text-gray-900 font-bold text-2xl mb-4">
Billing Address
</h2>
<label for="use_shipping_address_for_billing" class="text-sm text-gray-700 flex flex-row items-center select-none mb-6">
<input
type="checkbox"
id="use_shipping_address_for_billing"
name="use_shipping_address_for_billing"
x-model="useShippingAddressForBilling"
class="mr-2"
value="{{ old:use_shipping_address_for_billing }}"
/>
Same as shipping address
</label>
<template x-if="!useShippingAddressForBilling">
<div class="grid md:grid-cols-12 gap-6 mb-12">
{{ partial:components/forms/input_field width="50" handle="billing_name" display="Billing Name" required="true" }}
{{ partial:components/forms/input_field width="50" handle="billing_address_line1" display="Address Line 1" required="true" }}
{{ partial:components/forms/input_field width="50" handle="billing_address_line2" display="Address Line 2" }}
{{ partial:components/forms/input_field width="50" handle="billing_city" display="Town/City" required="true" }}
{{ partial:components/forms/input_field width="50" handle="billing_zip_code" display="Postal/Zip Code" required="true" }}
{{ partial:components/forms/select_field width="50" handle="billing_country" display="Country" x-model="billingCountry" required="true" }}
{{ sc:countries common="GB|US|CA|IE" }}
<option value="{{ iso }}">{{ name }}</option>
{{ /sc:countries }}
{{ /partial:components/forms/select_field }}
{{ partial:components/forms/select_field width="50" handle="billing_region" display="Region" }}
<template
x-for="region in billingRegionOptions"
>
<option
:value="region.id"
x-text="region.name"
></option>
</template>
{{ /partial:components/forms/select_field }}
</div>
</template>
<div class="my-6 flex justify-center">
{{ partial:components/button label="Continue to Shipping" type="submit" as="button" }}
</div>
{{ /sc:cart:update }}
</div>
</div>
<div class="w-full md:w-2/5 mb-4 md:mb-0">
{{ partial:checkout/cart }}
</div>
</div>
</div>
</main>
<script>
{{ cache for="24 hours" }}
window.regions = {{ json_regions:index }};
{{ /cache }}
document.addEventListener('alpine:init', () => {
Alpine.data('checkoutInformationForm', () => ({
isSubmitting: false,
useShippingAddressForBilling: true,
shippingCountry: 'GB',
billingCountry: 'GB',
get shippingRegionOptions() {
return window.regions.filter(region => region.country_iso === this.shippingCountry)
},
get billingRegionOptions() {
return window.regions.filter(region => region.country_iso === this.billingCountry)
},
submit() {
this.isSubmitting = true
this.$el.querySelector('button').disabled = true
this.$el.querySelector('button').classList.add('opacity-50')
this.$el.submit()
},
}))
})
</script> |
Beta Was this translation helpful? Give feedback.
-
I have zipped the file as I'm not sure how clear the above code is (with or without the code markup). Thanks for the speedy response btw. |
Beta Was this translation helpful? Give feedback.
-
Hi Duncan Thanks for coming back so quickly. I have amended the handles as you suggested but it is still not saving. Again I have cleared the cache and tested using an existing customer and a new customer. |
Beta Was this translation helpful? Give feedback.
Can you try adding
telephone
to the customers field whitelist in your config?https://github.com/duncanmcclean/simple-commerce/blob/5.x/config/simple-commerce.php#L98