16
Май
2018

Shopify: добавление дополнительной информации о пользователе

В этой статье мы добавим форму с возможностью добавление более подробного описания информации о пользователе - номер телефона, адрес, название компании и т.д

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

Итак приступим. За добавление дополнительной информации о пользователе у нас ответственен шаблон addresses.liquid

1.Создание шаблона

Если у вас нет этого шаблона, этот шаблон можно создать через админку. Для этого переходим в редактор темы, нажимаем на кнопку ‘Add a new template’ и создаем шаблон addresses.liquid

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

Вставьте код который приведен ниже в файл addresses.liquid предварительно удалив все то что там есть:

<div class="form_wrap">
	<h3 class="form_title">Информация о компании</h3>
	<ul class="input_list">
		<li class="input_item">
			<dl class="form_cell">
				<dt class="form_cell_title">
					<label for="user_company">Название компании:</label>
				</dt>
				<dd class="form_field_wrap">
					<input type="text" id="user_company" placeholder="Введите полное название компании" name="address[company]" class="form_field">
				</dd>
			</dl>
		</li>
		<li class="input_item">
			<dl class="form_cell">
				<dt class="form_cell_title">
					<label for="user_company">Адрес компании:</label>
				</dt>
				<dd class="form_field_wrap">
					<input type="text" id="user_company" placeholder="Адрес компании" name="address[address1]" class="form_field ">
				</dd>
			</dl>
		</li>
		<li class="input_item">
			<dl class="form_cell">
				<dt class="form_cell_title">
					<label for="user_phone">Телефон:</label>
				</dt>
				<dd class="form_field_wrap">
					<input type="tel" id="user_phone" placeholder="+7 (XXX) XXX-XX-XX" name="address[phone]" class="form_field">
				</dd>
			</dl>
		</li>
		<li class="input_item">
			<dl class="form_cell">
				<dt class="form_cell_title form_v2_mod">
					<label for="user_inn">ИНН:</label>
				</dt>
				<dd class="form_field_wrap">
					<input type="text" id="user_inn" placeholder="ХХХХХХХХХХ" name="address[zip]" class="form_field">
				</dd>
			</dl>
		</li>
		<li class="input_item row_mod right_mod">
			<label class="radio_check">
				<input required name="check" type="checkbox" checked="checked" class="radio_check_input"><span class="radio_check_text">Я согласен с правилами пользования сайтом</span>
			</label>
		</li>
	</ul>
	<div class="btn_wrap">
		<button type="submit" class="btn">Отправить</button>
	</div>
</div>

Здесь самое главное прописать в инпуты нужные атрибуты name. Более подробно какие есть возможные значения у атрибутов name можно почитать в документации - https://help.shopify.com/themes/development/templates/customers-addresses

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

{% form 'customer_address', customer.new_address %}

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

{% form 'customer_address', customer.new_address %}
	<div class="form_wrap">
		<h3 class="form_title">Информация о компании</h3>
		<ul class="input_list">
			<li class="input_item">
				<dl class="form_cell">
					<dt class="form_cell_title">
						<label for="user_company">Название компании:</label>
					</dt>
					<dd class="form_field_wrap">
						<input type="text" id="user_company" placeholder="Введите полное название компании" name="address[company]" class="form_field ">
					</dd>
				</dl>
			</li>
			<li class="input_item">
				<dl class="form_cell">
					<dt class="form_cell_title">
						<label for="user_company">Адрес компании:</label>
					</dt>
					<dd class="form_field_wrap">
						<input type="text" id="user_company" placeholder="Адрес компании" name="address[address1]" class="form_field ">
					</dd>
				</dl>
			</li>
			<li class="input_item">
				<dl class="form_cell">
					<dt class="form_cell_title">
						<label for="user_phone">Телефон:</label>
					</dt>
					<dd class="form_field_wrap">
						<input type="tel" id="user_phone" placeholder="+7 (XXX) XXX-XX-XX" name="address[phone]" class="form_field">
					</dd>
				</dl>
			</li>
			<li class="input_item">
				<dl class="form_cell">
					<dt class="form_cell_title form_v2_mod">
						<label for="user_inn">ИНН:</label>
					</dt>
					<dd class="form_field_wrap">
						<input type="text" id="user_inn" placeholder="ХХХХХХХХХХ" name="address[zip]" class="form_field">
					</dd>
				</dl>
			</li>
			<li class="input_item row_mod right_mod">
				<label class="radio_check">
					<input required name="check" type="checkbox" checked="checked" class="radio_check_input"><span class="radio_check_text">Я согласен с правилами пользования сайтом</span>
				</label>
			</li>
		</ul>
		<div class="btn_wrap">
			<button type="submit" class="btn">Отправить</button>
		</div>
	</div>
{% endform %}

Теперь перейдем по адресу your-store-name.myshopify.com/account/addresses и заполним ту форму которую мы только что создали, после заполнения нажмем на кнопку ‘Отправить’. После того как мы добавили какую-то информацию в эти поля, просмотреть мы сможем их через админку во вкладке ‘Customers’ выбрав свой аккаунт и в блоке ‘DEFAULT ADDRESS’ будет отображена та информация которую мы ввели в форму.

Также еще проставим в инпуты следующие значения:

{% form 'customer_address', customer.new_address %}
	<div class="form_wrap">
		<h3 class="form_title">Информация о компании</h3>
		<ul class="input_list">
			<li class="input_item">
				<dl class="form_cell">
					<dt class="form_cell_title">
						<label for="user_company">Название компании:</label>
					</dt>
					<dd class="form_field_wrap">
						<input value="{{ customer.default_address.company }}" type="text" id="user_company" placeholder="Введите полное название компании" name="address[company]" class="form_field ">
					</dd>
				</dl>
			</li>
			<li class="input_item">
				<dl class="form_cell">
					<dt class="form_cell_title">
						<label for="user_company">Адрес компании:</label>
					</dt>
					<dd class="form_field_wrap">
						<input value="{{ customer.default_address.address1 }}" type="text" id="user_company" placeholder="Адрес компании" name="address[address1]" class="form_field ">
					</dd>
				</dl>
			</li>
			<li class="input_item">
				<dl class="form_cell">
					<dt class="form_cell_title">
						<label for="user_phone">Телефон:</label>
					</dt>
					<dd class="form_field_wrap">
						<input value="{{ customer.default_address.phone }}" type="tel" id="user_phone" placeholder="+7 (XXX) XXX-XX-XX" name="address[phone]" class="form_field">
					</dd>
				</dl>
			</li>
			<li class="input_item">
				<dl class="form_cell">
					<dt class="form_cell_title form_v2_mod">
						<label for="user_inn">ИНН:</label>
					</dt>
					<dd class="form_field_wrap">
						<input value="{{ customer.default_address.zip }}" type="text" id="user_inn" placeholder="ХХХХХХХХХХ" name="address[zip]" class="form_field">
					</dd>
				</dl>
			</li>
			<li class="input_item row_mod right_mod">
				<label class="radio_check">
					<input required name="check" type="checkbox" checked="checked" class="radio_check_input"><span class="radio_check_text">Я согласен с правилами пользования сайтом</span>
				</label>
			</li>
		</ul>
		<div class="btn_wrap">
			<button type="submit" class="btn">Отправить</button>
		</div>
	</div>
{% endform %}

Это делается для того, чтобы когда мы уже заполнили эти поля и отправили форму, в следующий раз когда мы захотим перейти на страницу addresses снова, то мы уже увидим следующую картину:

То есть мы просто здесь подставили те значение которые мы заполнили до этого.

Share

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