Nous allons voir dans ce tutoriel comment rajouter un champ date d’anniversaire lors de la création du compte client. C’est très pratique pour connecter un système de mailing et proposer à vos clients des offres pour leur anniversaire 😉

Installation du code

Rendez-vous dans boutique en ligne – Actions – Modifier le code et ouvrez le dossier Modèles (Templates). A l’intérieur de celui-ci vous trouverez un fichier customers/register.liquid ! Ouvrez-le et logiquement vous devriez trouver un formulaire, balise form avec des labels et des inputs.

A l’endroit souhaité copier collez le code suivant afin de rajouter la date d’anniversaire :

Version champ optionnel :

<div class="birthday-wrapper" class="clearfix large_form">
	<label for="birthday" class="label">Date d'anniversaire</label>
	<input type="date" value="" name="customer[note][birthday]" id="birthday" class="text" size="30" {% if form.errors contains "birthday" %} class="error"{% endif %}>
</div>

<style>
	.birthday-wrapper {
	display:flex;
	border: 1px solid var(--colorBorder);
	background-color: rgba(var(--color-text-body),.1);
	width: 100%;
	max-width: 100%;       
	margin: 0 0 15px;
	padding:0 0 0 1rem;
	text-align:left;
	align-items:center;
	justify-content:space-between;
	font-size:13px;       
	}
	.birthday-wrapper * {
	color:#666 !important;
	border:none;
	margin:0;
	}
	.birthday-wrapper label {
	font-size:inherit;
	}
</style>

Version champ obligatoire :

<div class="birthday-wrapper" class="clearfix large_form">
	<label for="birthday" class="label">Date d'anniversaire</label>
	<input required type="date" value="" name="customer[note][birthday]" id="birthday" class="text" size="30" {% if form.errors contains "birthday" %} class="error"{% endif %}>
</div>

<style>
	.birthday-wrapper {
	display:flex;
	border: 1px solid var(--colorBorder);
	background-color: rgba(var(--color-text-body),.1);
	width: 100%;
	max-width: 100%;       
	margin: 0 0 15px;
	padding:0 0 0 1rem;
	text-align:left;
	align-items:center;
	justify-content:space-between;
	font-size:13px;       
	}
	.birthday-wrapper * {
	color:#666 !important;
	border:none;
	margin:0;
	}
	.birthday-wrapper label {
	font-size:inherit;
	}
</style>

Il ne vous reste plus qu’a tester tout cela en vous créant un compte client de test !

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 1 votes]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 3 commentaires

  1. Coucou, super tutoriel, MERCI!!
    Comment faire la même chose mais sur la page panier, lorsque le client entre ses informations ?
    merci

    1. Hello, hum c’est assez délicat… Il faudrait un développement sur mesure.

  2. Bonjour,
    Un tout grand merci pour le tuto, j’ai ajouté cela. Par contre je me demande comment retrouver cette information une fois que le client l’a encodé: en allant sur le client je n’aperçoit pas la date qu’il a encodé et je ne sais donc pas me servir de cette information si précieuse.
    merci d’avance

Laisser un commentaire

Fermer le menu