03
Май
2018

Shopify: регистрация нового пользователя

Разберем как сделать регистрацию нового пользователя в Shopify. Работать мы будем с такой формой.

Шаблон register.liquid который находится по пути templates/customers/register.liquid он отвечает за регистрацию нового пользователя. Если его у вас нет, вы можете создать этот файл через свою админ-панель в редакторе темы(в slate он идет по умолчанию, но это уже совсем другая история).

1.Создание файла register.liquid

Переходим к вашей текущей теме в админке, нажимаем Actions > Edit code

После этого создаем новый шаблон кликая по кнопке ‘Add a new template’ и из выпадающего списка выбираем файл customers/register после этого нажимаем на кнопку ‘Create template’. Удалите все то что есть в этом файле.

2.Создание структуры

Итак первое что нам нужно сделать, это создать подходящую структуру.

Добавьте следующий код в файл register.liquid:

<h3 class="form_title">Личная информация</h3>
<ul class="form_list">
	<li class="form_item">
		<label for="first_name" class="form_label">Имя:</label>
		<input type="text" placeholder="Имя" id="first_name" class="default_input">
	</li>
	<li class="form_item">
		<label for="last_name" class="form_label">Фамилия:</label>
		<input type="text" placeholder="Фамилия" id="last_name" class="default_input">
	</li>
	<li class="form_item">
		<label for="email" class="form_label">Ваш E-mail:</label>
		<input type="email" placeholder="E-mail" id="email" class="default_input">
	</li>
	<li class="form_item">
		<label for="password" class="form_label">Пароль</label>
		<input type="password" placeholder="Пароль" id="password" class="default_input">
	</li>
	<li class="form_item right_mod">
		<input class="btn" type="submit" value="Отправить">
	</li>
</ul>

В Shopify есть множество форм под разные нужды. К примеру форма под регистрацию нового пользователя, форма для авторизации, форма активации аккаунта и т.д. В этой статье мы разберем форму которая предназначена для регистрации нового пользователя. Следующее что нам нужно сделать, это добавить к нашей разметке форму, делается это при помощи тега form.

{% form 'create_customer' %} 

{% endform % }

Должно получиться следующее:

<h3 class="form_title">Личная информация</h3>
{% form 'create_customer' %}
	<ul class="form_list"
		<li class="form_item">
			<label for="first_name" class="form_label">Имя:</label>
			<input type="text" placeholder="Имя" id="first_name" class="default_input">
		</li>
		<li class="form_item">
			<label for="last_name" class="form_label">Фамилия:</label>
			<input type="text" placeholder="Фамилия" id="last_name" class="default_input">
		</li>
		<li class="form_item">
			<label for="email" class="form_label">Ваш E-mail:</label>
			<input type="email" placeholder="E-mail" id="email" class="default_input">
		</li>
		<li class="form_item">
			<label for="password" class="form_label">Пароль</label>
			<input type="password" placeholder="Пароль" id="password" class="default_input">
		</li>
		<li class="form_item right_mod">
			<input class="btn" type="submit" value="Отправить">
		</li>
	</ul>
{% endform %}

Здесь мы оборачиваем нашу разметку тегом формы, которая ответственна за создание нового пользователя. Следующее что нам нужно сделать, это добавить атрибут name с нужными значениями в наши инпуты.

Должно получиться следующее:

<h3 class="form_title">Личная информация</h3>
{% form 'create_customer' %}
	<ul class="form_list"
		<li class="form_item">
			<label for="first_name" class="form_label">Имя:</label>
			<input type="text" placeholder="Имя" name="customer[first_name]" id="first_name" class="default_input">
		</li>
		<li class="form_item">
			<label for="last_name" class="form_label">Фамилия:</label>
			<input type="text" placeholder="Фамилия" name="customer[last_name]" id="last_name" class="default_input">
		</li>
		<li class="form_item">
			<label for="email" class="form_label">Ваш E-mail:</label>
			<input type="email" placeholder="E-mail" name="customer[email]" id="email" class="default_input">
		</li>
		<li class="form_item">
			<label for="password" class="form_label">Пароль</label>
			<input type="password" placeholder="Пароль" name="customer[password]" id="password" class="default_input">
		</li>
		<li class="form_item right_mod">
			<input class="btn" type="submit" value="Отправить">
		</li>
	</ul>
{% endform %}

Здесь мы просто описываем какое поле за что ответственно. Для того чтобы увидеть форму которую мы только что создали, перейдите по url yourshop-name.com/account/register После того как вы заполните все поля и нажмете кнопку Отправить аккаунт должен быть создан. Чтобы проверить так ли это, зайдите в вашей админке в раздел Customers и посмотрите есть ли в списке тот аккаунт который вы только что создали.

На этом все, наша форма регистрации полностью готова. Осталось только вам ее хорошо стилизовать и тогда все будет perfect.

Share

Тебе может это понравится...