<div class="flex flex-col gap-y-4">
<h2 class="h5">Adresse client</h2>
<div class="flex flex-col gap-y-4">
<h3 class="h6 text-brand-700">Informations de contact</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="flex flex-col w-full gap-y-1">
<div class="input-wrapper flex flex-col relative w-full floating-label">
<input type="text" name="firstname" id="firstname" class="form-input w-full peer
required
" placeholder="" required @input.debounce="onChange">
<div class="label-wrapper ">
<label for="firstname" class="flex flex-row items-center gap-2">
<span class="flex-grow">Prénom</span>
<div class="required text-error">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8.48605 7.23022L8.81938 7.03777L11.8608 5.28179C12.0734 5.15906 12.3452 5.23189 12.468 5.44446C12.5907 5.65704 12.5179 5.92886 12.3053 6.05159L9.26383 7.80757L8.9305 8.00002L9.26383 8.19247L12.3053 9.94845C12.5179 10.0712 12.5907 10.343 12.468 10.5556C12.3452 10.7681 12.0734 10.841 11.8608 10.7183L8.81938 8.96226L8.48605 8.76981V9.15471V12.6667C8.48605 12.9121 8.28706 13.1111 8.0416 13.1111C7.79614 13.1111 7.59716 12.9121 7.59716 12.6667V9.15472V8.76982L7.26382 8.96227L4.22237 10.7183L4.32568 10.8972L4.22237 10.7183C4.0098 10.841 3.73798 10.7681 3.61525 10.5556C3.49252 10.343 3.56536 10.0712 3.77793 9.94845L6.81938 8.19247L7.15272 8.00002L6.81938 7.80757L3.77794 6.05159L3.66964 6.23916L3.77794 6.05159C3.56536 5.92886 3.49253 5.65704 3.61526 5.44446C3.73799 5.23189 4.0098 5.15906 4.22238 5.28179L7.26382 7.03776L7.59716 7.23021V6.84531V3.33335C7.59716 3.08789 7.79614 2.88891 8.0416 2.88891C8.28706 2.88891 8.48605 3.08789 8.48605 3.33335V6.84532V7.23022Z" fill="currentColor" stroke="currentColor" stroke-width="0.444444" />
</svg>
</div>
</label>
</div>
</div>
</div>
<div class="flex flex-col w-full gap-y-1">
<div class="input-wrapper flex flex-col relative w-full floating-label">
<input type="text" name="lastname" id="lastname" class="form-input w-full peer
required
" placeholder="" required @input.debounce="onChange">
<div class="label-wrapper ">
<label for="lastname" class="flex flex-row items-center gap-2">
<span class="flex-grow">Nom</span>
<div class="required text-error">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8.48605 7.23022L8.81938 7.03777L11.8608 5.28179C12.0734 5.15906 12.3452 5.23189 12.468 5.44446C12.5907 5.65704 12.5179 5.92886 12.3053 6.05159L9.26383 7.80757L8.9305 8.00002L9.26383 8.19247L12.3053 9.94845C12.5179 10.0712 12.5907 10.343 12.468 10.5556C12.3452 10.7681 12.0734 10.841 11.8608 10.7183L8.81938 8.96226L8.48605 8.76981V9.15471V12.6667C8.48605 12.9121 8.28706 13.1111 8.0416 13.1111C7.79614 13.1111 7.59716 12.9121 7.59716 12.6667V9.15472V8.76982L7.26382 8.96227L4.22237 10.7183L4.32568 10.8972L4.22237 10.7183C4.0098 10.841 3.73798 10.7681 3.61525 10.5556C3.49252 10.343 3.56536 10.0712 3.77793 9.94845L6.81938 8.19247L7.15272 8.00002L6.81938 7.80757L3.77794 6.05159L3.66964 6.23916L3.77794 6.05159C3.56536 5.92886 3.49253 5.65704 3.61526 5.44446C3.73799 5.23189 4.0098 5.15906 4.22238 5.28179L7.26382 7.03776L7.59716 7.23021V6.84531V3.33335C7.59716 3.08789 7.79614 2.88891 8.0416 2.88891C8.28706 2.88891 8.48605 3.08789 8.48605 3.33335V6.84532V7.23022Z" fill="currentColor" stroke="currentColor" stroke-width="0.444444" />
</svg>
</div>
</label>
</div>
</div>
</div>
<div class="flex flex-col w-full gap-y-1">
<div class="input-wrapper flex flex-col relative w-full floating-label">
<input type="tel" name="telephone" id="telephone" class="form-input w-full peer
required
" placeholder="" required @input.debounce="onChange">
<div class="label-wrapper ">
<label for="telephone" class="flex flex-row items-center gap-2">
<span class="flex-grow">Téléphone</span>
<div class="required text-error">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8.48605 7.23022L8.81938 7.03777L11.8608 5.28179C12.0734 5.15906 12.3452 5.23189 12.468 5.44446C12.5907 5.65704 12.5179 5.92886 12.3053 6.05159L9.26383 7.80757L8.9305 8.00002L9.26383 8.19247L12.3053 9.94845C12.5179 10.0712 12.5907 10.343 12.468 10.5556C12.3452 10.7681 12.0734 10.841 11.8608 10.7183L8.81938 8.96226L8.48605 8.76981V9.15471V12.6667C8.48605 12.9121 8.28706 13.1111 8.0416 13.1111C7.79614 13.1111 7.59716 12.9121 7.59716 12.6667V9.15472V8.76982L7.26382 8.96227L4.22237 10.7183L4.32568 10.8972L4.22237 10.7183C4.0098 10.841 3.73798 10.7681 3.61525 10.5556C3.49252 10.343 3.56536 10.0712 3.77793 9.94845L6.81938 8.19247L7.15272 8.00002L6.81938 7.80757L3.77794 6.05159L3.66964 6.23916L3.77794 6.05159C3.56536 5.92886 3.49253 5.65704 3.61526 5.44446C3.73799 5.23189 4.0098 5.15906 4.22238 5.28179L7.26382 7.03776L7.59716 7.23021V6.84531V3.33335C7.59716 3.08789 7.79614 2.88891 8.0416 2.88891C8.28706 2.88891 8.48605 3.08789 8.48605 3.33335V6.84532V7.23022Z" fill="currentColor" stroke="currentColor" stroke-width="0.444444" />
</svg>
</div>
</label>
</div>
</div>
</div>
</div>
<h3 class="h6 text-brand-700">Adresse</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="col-span-1 md:col-span-3">
<div class="flex flex-col w-full gap-y-1">
<div class="input-wrapper flex flex-col relative w-full floating-label">
<input type="text" name="street[]" id="street_1" class="form-input w-full peer
required
" placeholder="" required @input.debounce="onChange">
<div class="label-wrapper ">
<label for="street_1" class="flex flex-row items-center gap-2">
<span class="flex-grow">Adresse</span>
<div class="required text-error">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8.48605 7.23022L8.81938 7.03777L11.8608 5.28179C12.0734 5.15906 12.3452 5.23189 12.468 5.44446C12.5907 5.65704 12.5179 5.92886 12.3053 6.05159L9.26383 7.80757L8.9305 8.00002L9.26383 8.19247L12.3053 9.94845C12.5179 10.0712 12.5907 10.343 12.468 10.5556C12.3452 10.7681 12.0734 10.841 11.8608 10.7183L8.81938 8.96226L8.48605 8.76981V9.15471V12.6667C8.48605 12.9121 8.28706 13.1111 8.0416 13.1111C7.79614 13.1111 7.59716 12.9121 7.59716 12.6667V9.15472V8.76982L7.26382 8.96227L4.22237 10.7183L4.32568 10.8972L4.22237 10.7183C4.0098 10.841 3.73798 10.7681 3.61525 10.5556C3.49252 10.343 3.56536 10.0712 3.77793 9.94845L6.81938 8.19247L7.15272 8.00002L6.81938 7.80757L3.77794 6.05159L3.66964 6.23916L3.77794 6.05159C3.56536 5.92886 3.49253 5.65704 3.61526 5.44446C3.73799 5.23189 4.0098 5.15906 4.22238 5.28179L7.26382 7.03776L7.59716 7.23021V6.84531V3.33335C7.59716 3.08789 7.79614 2.88891 8.0416 2.88891C8.28706 2.88891 8.48605 3.08789 8.48605 3.33335V6.84532V7.23022Z" fill="currentColor" stroke="currentColor" stroke-width="0.444444" />
</svg>
</div>
</label>
</div>
</div>
</div>
</div>
<div class="col-span-1 md:col-span-3">
<div class="flex flex-col w-full gap-y-1">
<div class="input-wrapper flex flex-col relative w-full floating-label">
<input type="text" name="street[]" id="street_2" class="form-input w-full peer
" placeholder="" @input.debounce="onChange">
<div class="label-wrapper ">
<label for="street_2" class="flex flex-row items-center gap-2">
<span class="flex-grow">Complément d'adresse</span>
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-col w-full gap-y-1">
<div class="input-wrapper flex flex-col relative w-full floating-label">
<input type="text" name="postcode" id="postcode" class="form-input w-full peer
required
" placeholder="" required @input.debounce="onChange">
<div class="label-wrapper ">
<label for="postcode" class="flex flex-row items-center gap-2">
<span class="flex-grow">Code postal</span>
<div class="required text-error">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8.48605 7.23022L8.81938 7.03777L11.8608 5.28179C12.0734 5.15906 12.3452 5.23189 12.468 5.44446C12.5907 5.65704 12.5179 5.92886 12.3053 6.05159L9.26383 7.80757L8.9305 8.00002L9.26383 8.19247L12.3053 9.94845C12.5179 10.0712 12.5907 10.343 12.468 10.5556C12.3452 10.7681 12.0734 10.841 11.8608 10.7183L8.81938 8.96226L8.48605 8.76981V9.15471V12.6667C8.48605 12.9121 8.28706 13.1111 8.0416 13.1111C7.79614 13.1111 7.59716 12.9121 7.59716 12.6667V9.15472V8.76982L7.26382 8.96227L4.22237 10.7183L4.32568 10.8972L4.22237 10.7183C4.0098 10.841 3.73798 10.7681 3.61525 10.5556C3.49252 10.343 3.56536 10.0712 3.77793 9.94845L6.81938 8.19247L7.15272 8.00002L6.81938 7.80757L3.77794 6.05159L3.66964 6.23916L3.77794 6.05159C3.56536 5.92886 3.49253 5.65704 3.61526 5.44446C3.73799 5.23189 4.0098 5.15906 4.22238 5.28179L7.26382 7.03776L7.59716 7.23021V6.84531V3.33335C7.59716 3.08789 7.79614 2.88891 8.0416 2.88891C8.28706 2.88891 8.48605 3.08789 8.48605 3.33335V6.84532V7.23022Z" fill="currentColor" stroke="currentColor" stroke-width="0.444444" />
</svg>
</div>
</label>
</div>
</div>
</div>
<div class="flex flex-col w-full gap-y-1">
<div class="input-wrapper flex flex-col relative w-full floating-label">
<input type="text" name="city" id="city" class="form-input w-full peer
required
" placeholder="" required @input.debounce="onChange">
<div class="label-wrapper ">
<label for="city" class="flex flex-row items-center gap-2">
<span class="flex-grow">Ville</span>
<div class="required text-error">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8.48605 7.23022L8.81938 7.03777L11.8608 5.28179C12.0734 5.15906 12.3452 5.23189 12.468 5.44446C12.5907 5.65704 12.5179 5.92886 12.3053 6.05159L9.26383 7.80757L8.9305 8.00002L9.26383 8.19247L12.3053 9.94845C12.5179 10.0712 12.5907 10.343 12.468 10.5556C12.3452 10.7681 12.0734 10.841 11.8608 10.7183L8.81938 8.96226L8.48605 8.76981V9.15471V12.6667C8.48605 12.9121 8.28706 13.1111 8.0416 13.1111C7.79614 13.1111 7.59716 12.9121 7.59716 12.6667V9.15472V8.76982L7.26382 8.96227L4.22237 10.7183L4.32568 10.8972L4.22237 10.7183C4.0098 10.841 3.73798 10.7681 3.61525 10.5556C3.49252 10.343 3.56536 10.0712 3.77793 9.94845L6.81938 8.19247L7.15272 8.00002L6.81938 7.80757L3.77794 6.05159L3.66964 6.23916L3.77794 6.05159C3.56536 5.92886 3.49253 5.65704 3.61526 5.44446C3.73799 5.23189 4.0098 5.15906 4.22238 5.28179L7.26382 7.03776L7.59716 7.23021V6.84531V3.33335C7.59716 3.08789 7.79614 2.88891 8.0416 2.88891C8.28706 2.88891 8.48605 3.08789 8.48605 3.33335V6.84532V7.23022Z" fill="currentColor" stroke="currentColor" stroke-width="0.444444" />
</svg>
</div>
</label>
</div>
</div>
</div>
<div class="flex flex-col w-full gap-y-1 field field-reserved">
<div x-data="selectCountryOptions" class="input-wrapper input-wrapper-select flex flex-col relative w-full floating-label ">
<button type="button" @click="openSelect" x-ref="selectButton" class="form-select w-full peer flex justify-between btn gap-x-2
required
" :class="selected ? 'option-selected' : ''">
<span class="flex flex-row items-center gap-2">
<template x-if="selected && selected.type === 'leading-icon'">
<img :src="selected.image" :alt="selected.name">
</template>
<span x-text="selected ? selected.name : 'Séléctionnez...'">
Séléctionnez...
</span>
</span>
<span class="transition-all transform flex items-center" :class="{'rotate-180' : show}">
<svg class=" shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />
</svg> </span>
</button>
<div class="label-wrapper ">
<label for="CountryOptions" class="flex flex-row items-center gap-2">
<span class="flex-grow">Pays</span>
<div class="required text-error">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8.48605 7.23022L8.81938 7.03777L11.8608 5.28179C12.0734 5.15906 12.3452 5.23189 12.468 5.44446C12.5907 5.65704 12.5179 5.92886 12.3053 6.05159L9.26383 7.80757L8.9305 8.00002L9.26383 8.19247L12.3053 9.94845C12.5179 10.0712 12.5907 10.343 12.468 10.5556C12.3452 10.7681 12.0734 10.841 11.8608 10.7183L8.81938 8.96226L8.48605 8.76981V9.15471V12.6667C8.48605 12.9121 8.28706 13.1111 8.0416 13.1111C7.79614 13.1111 7.59716 12.9121 7.59716 12.6667V9.15472V8.76982L7.26382 8.96227L4.22237 10.7183L4.32568 10.8972L4.22237 10.7183C4.0098 10.841 3.73798 10.7681 3.61525 10.5556C3.49252 10.343 3.56536 10.0712 3.77793 9.94845L6.81938 8.19247L7.15272 8.00002L6.81938 7.80757L3.77794 6.05159L3.66964 6.23916L3.77794 6.05159C3.56536 5.92886 3.49253 5.65704 3.61526 5.44446C3.73799 5.23189 4.0098 5.15906 4.22238 5.28179L7.26382 7.03776L7.59716 7.23021V6.84531V3.33335C7.59716 3.08789 7.79614 2.88891 8.0416 2.88891C8.28706 2.88891 8.48605 3.08789 8.48605 3.33335V6.84532V7.23022Z" fill="currentColor" stroke="currentColor" stroke-width="0.444444" />
</svg>
</div>
</label>
</div>
<div class="dropdown-content relative w-full overflow-auto max-h-screen-40" x-show="show" x-transition x-cloak @click.outside="show = false" x-anchor.bottom-start.offset.0="$refs.selectButton">
<template x-for="option in options">
<div>
<template x-if="option.type === 'group'">
<div class="item-category text-brand-700 font-bold">
<div class="dropdown-item-category p-2">
<span class="flex-1" x-text="option.name"></span>
</div>
</div>
</template>
<template x-if="option.type !== 'group'">
<div @click="select(option.id)" :class="option.checked ? 'selected' : ''">
<template x-if="option.href">
<div>
<a :href="option.href" class="dropdown-item cursor-pointer p-2">
<template x-if="option.image">
<img :src="option.image" :alt="option.name">
</template>
<span class="flex-1" x-text="option.name"></span>
<template x-if="option.checked">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M21 2H3C2.4 2 2 2.4 2 3V21C2 21.6 2.4 22 3 22H21C21.6 22 22 21.6 22 21V3C22 2.4 21.6 2 21 2ZM17.7 9.3L10.9 16.1C10.5 16.5 9.9 16.5 9.5 16.1L6.3 12.9C5.9 12.5 5.9 11.9 6.3 11.5C6.7 11.1 7.3 11.1 7.7 11.5L10.2 14L16.3 7.9C16.7 7.5 17.3 7.5 17.7 7.9C18.1 8.3 18.1 8.9 17.7 9.3Z" fill="#34A5C3" />
</svg>
</template>
</a>
</div>
</template>
<template x-if="!option.href">
<div class="dropdown-item cursor-pointer p-2">
<template x-if="option.image">
<img :src="option.image" :alt="option.name">
</template>
<span class="flex-1" x-text="option.name"></span>
<template x-if="option.checked">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M21 2H3C2.4 2 2 2.4 2 3V21C2 21.6 2.4 22 3 22H21C21.6 22 22 21.6 22 21V3C22 2.4 21.6 2 21 2ZM17.7 9.3L10.9 16.1C10.5 16.5 9.9 16.5 9.5 16.1L6.3 12.9C5.9 12.5 5.9 11.9 6.3 11.5C6.7 11.1 7.3 11.1 7.7 11.5L10.2 14L16.3 7.9C16.7 7.5 17.3 7.5 17.7 7.9C18.1 8.3 18.1 8.9 17.7 9.3Z" fill="#34A5C3" />
</svg>
</template>
</div>
</template>
</div>
</template>
</div>
</template>
</div>
<select class="sr-only required" id="CountryOptions" required name="country" id="country">
<option value="" selected disabled hidden></option>
<option value="fr">France</option>
</select>
</div>
</div>
<script>
function selectCountryOptions() {
return {
rawOptions: [{
"value": "fr",
"text": "France"
}],
options: [],
show: false,
selected: null,
init() {
Array.from(this.rawOptions).forEach(option => {
if (!option.disabled) {
this.options.push({
id: option.value,
name: option.text,
checked: option.selected,
image: option.image,
href: option.href,
type: option.type,
})
}
if (option.selected && option.value) {
this.select(option.value);
}
});
},
openSelect() {
this.show = !this.show;
},
select(id) {
this.options = this.options.map(option => {
if (option.id === id) {
option.checked = true;
this.selected = option;
} else {
option.checked = false;
}
return option;
});
document.getElementById('CountryOptions').value = this.selected.id;
this.show = false;
}
}
}
</script>
</div>
</div>
<div class="text-body-xs">
Champs obligatoires<span class="text-error">*</span>
</div>
<div class="text-body-base text-black/64">
<!-- replace identifiers with normal values (for,id,name etc...) -->
<label class="selection-control-label selection-control-checkbox " for="default_billing">
<input type="checkbox" id="primary_billing" name="default_billing" class="" value="1" @input.debounce="onChange">
<span class="
">
Utiliser comme adresse de facturation par défaut
</span>
</label>
</div>
<div class="text-body-base text-black/64">
<!-- replace identifiers with normal values (for,id,name etc...) -->
<label class="selection-control-label selection-control-checkbox " for="default_shipping">
<input type="checkbox" id="primary_shipping" name="default_shipping" class="" value="1" @input.debounce="onChange">
<span class="
">
Utiliser comme adresse de livraison par défaut
</span>
</label>
</div>
</div>
<div class="flex flex-col gap-y-4">
<h2 class="h5">Adresse client</h2>
<div class="flex flex-col gap-y-4">
<h3 class="h6 text-brand-700">Informations de contact</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
{% include "@template-input" with {
id: 'firstname',
name: 'firstname',
type: 'text',
label: 'Prénom',
required: true,
label_floating: true,
} %}
{% include "@template-input" with {
id: 'lastname',
name: 'lastname',
type: 'text',
label: 'Nom',
required: true,
label_floating: true,
} %}
{% include "@template-input" with {
id: 'telephone',
name: 'telephone',
type: 'tel',
label: 'Téléphone',
required: true,
label_floating: true,
} %}
</div>
<h3 class="h6 text-brand-700">Adresse</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="col-span-1 md:col-span-3">
{% include "@template-input" with {
id: 'street_1',
name: 'street[]',
type: 'text',
label: 'Adresse',
required: true,
label_floating: true,
} %}
</div>
<div class="col-span-1 md:col-span-3">
{% include "@template-input" with {
id: 'street_2',
name: 'street[]',
type: 'text',
label: "Complément d'adresse",
required: false,
label_floating: true,
} %}
</div>
{% include "@template-input" with {
id: 'postcode',
name: 'postcode',
type: 'text',
label: 'Code postal',
required: true,
label_floating: true,
} %}
{% include "@template-input" with {
id: 'city',
name: 'city',
type: 'text',
label: 'Ville',
required: true,
label_floating: true,
} %}
{% include "@template-select" with {
id: 'country',
name: 'country',
label: 'Pays',
label_floating: true,
required: true,
placeholder: 'Séléctionnez...',
options: [
{value: 'fr', text: 'France'},
],
selectId: 'CountryOptions'
} %}
</div>
</div>
<div class="text-body-xs">
Champs obligatoires<span class="text-error">*</span>
</div>
<div class="text-body-base text-black/64">
{% render "@template-checkbox" with {
label: "Utiliser comme adresse de facturation par défaut",
input_identifier: "primary_billing",
name: "default_billing",
value: 1,
} %}
</div>
<div class="text-body-base text-black/64">
{% render "@template-checkbox" with {
label: "Utiliser comme adresse de livraison par défaut",
input_identifier: "primary_shipping",
name: "default_shipping",
value: 1,
} %}
</div>
</div>
/* No context defined. */
No notes defined.