Skip to content

Commit b1ca73d

Browse files
cm-slcm-sl
committed
Allow form fields to be required
1 parent a79f877 commit b1ca73d

File tree

1 file changed

+141
-59
lines changed

1 file changed

+141
-59
lines changed

‎sections/main-b2b-login.liquid‎

Lines changed: 141 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@
88
*********************
99
1010
SETUP
11-
In your Shopify Admin, go to Online Store > Pages > Add page. Create a new page, under "Search engine listing", set the "URl handle" to "b2b-login". From the "Template" section, choose "b2b-login"
11+
Add this code to a new file /sections/b2b-login.liquid
12+
Next, add a new page /templates/page.b2b-login.json and add the code from here https://gist.github.com/cm-sl/1c18244e75ed401b217f15eb1c9d6308
13+
Next, in your Shopify Admin, go to Online Store > Pages > Add page. Create a new page, under "Search engine listing", set the "URl handle" to "b2b-login". From the "Template" section, choose "b2b-login"
1214
Once this is done, go to Online Store and click "Customize" on your theme. Search for "b2b-login" and you can then edit how this page works and looks
1315
1416
*********************
@@ -64,53 +66,53 @@ This is the Shopify Liquid code that generates the page layout
6466

6567
{% if section.settings.login_type == 'passwordless' %}
6668
<a class="b2b-btn b2b-btn-primary" href="{{ routes.account_login_url }}">
67-
{{ 'customer.login_page.sign_in' | t }}
69+
{{ section.settings.sign_in }}
6870
</a>
6971
{% else %}
7072

71-
<form method="post" action="/account/login" id="customer_login" accept-charset="UTF-8" novalidate>
72-
<input type="hidden" name="form_type" value="customer_login">
73-
<input type="hidden" name="utf8" value="✓">
74-
75-
<div class="b2b-form-item">
76-
<input
77-
id="CustomerEmail"
78-
type="email"
79-
name="customer[email]"
80-
class="b2b-input"
81-
aria-required="true"
82-
autocorrect="off"
83-
autocapitalize="off"
84-
autocomplete="email"
85-
placeholder="{{ 'customer.login_page.email' | t }}"
86-
required
87-
>
88-
</div>
89-
90-
<div class="b2b-form-item">
91-
<input
92-
id="CustomerPassword"
93-
type="password"
94-
name="customer[password]"
95-
class="b2b-input"
96-
aria-required="true"
97-
autocorrect="off"
98-
autocapitalize="off"
99-
autocomplete="current-password"
100-
placeholder="{{ 'customer.login_page.password' | t }}""
101-
required
102-
>
103-
<div class="b2b-form-help">
104-
<a href="/account/login#recover" class="b2b-link-text">
105-
{{ 'customer.login_page.forgot_password' | t }}
106-
</a>
107-
</div>
108-
</div>
73+
<form method="post" action="/account/login" id="customer_login" accept-charset="UTF-8" novalidate>
74+
<input type="hidden" name="form_type" value="customer_login">
75+
<input type="hidden" name="utf8" value="✓">
76+
77+
<div class="b2b-form-item">
78+
<input
79+
id="CustomerEmail"
80+
type="email"
81+
name="customer[email]"
82+
class="b2b-input"
83+
aria-required="true"
84+
autocorrect="off"
85+
autocapitalize="off"
86+
autocomplete="email"
87+
placeholder="{{ 'customer.login_page.email' | t }}"
88+
required
89+
>
90+
</div>
91+
92+
<div class="b2b-form-item">
93+
<input
94+
id="CustomerPassword"
95+
type="password"
96+
name="customer[password]"
97+
class="b2b-input"
98+
aria-required="true"
99+
autocorrect="off"
100+
autocapitalize="off"
101+
autocomplete="current-password"
102+
placeholder="{{ 'customer.login_page.password' | t }}""
103+
required
104+
>
105+
<div class="b2b-form-help">
106+
<a href="/account/login#recover" class="b2b-link-text">
107+
{{ 'customer.login_page.forgot_password' | t }}
108+
</a>
109+
</div>
110+
</div>
109111
110-
<button class="b2b-btn b2b-btn-primary">
111-
{{ 'customer.login_page.sign_in' | t }}
112-
</button>
113-
</form>
112+
<button class="b2b-btn b2b-btn-primary">
113+
{{ 'customer.login_page.sign_in' | t }}
114+
</button>
115+
</form>
114116
115117
{% endif %}
116118
@@ -160,6 +162,7 @@ This is the Shopify Liquid code that generates the page layout
160162
<div class="b2b-form-item">
161163
<input class="b2b-input"
162164
type="text"
165+
{% if section.settings.form_email_field1_required %} required {% endif %}
163166
id="ContactForm-{{ section.settings.form_email_field1 | replace: ' ', '_' | downcase }}"
164167
name="contact[{{ section.settings.form_email_field1 | replace: ' ', '_' | downcase }}]"
165168
placeholder="{{ section.settings.form_email_field1 }}">
@@ -169,48 +172,63 @@ This is the Shopify Liquid code that generates the page layout
169172
{% if section.settings.form_email_field2 != blank %}
170173
<div class="b2b-form-item">
171174
<input class="b2b-input"
172-
type="text"
175+
type="text"
176+
{% if section.settings.form_email_field2_required %} required {% endif %}
173177
id="ContactForm-{{ section.settings.form_email_field2 | replace: ' ', '_' | downcase }}"
174178
name="contact[{{ section.settings.form_email_field2 | replace: ' ', '_' | downcase }}]"
175179
placeholder="{{ section.settings.form_email_field2 }}">
176180
</div>
177181
{% endif %}
178182
179183
{% if section.settings.form_email_field3 != blank %}
180-
<div class="b2b-form-item">
181-
<input class="b2b-input"
182-
type="text"
183-
id="ContactForm-{{ section.settings.form_email_field3 | replace: ' ', '_' | downcase }}"
184-
name="contact[{{ section.settings.form_email_field3 | replace: ' ', '_' | downcase }}]"
185-
placeholder="{{ section.settings.form_email_field3 }}">
186-
</div>
184+
<div class="b2b-form-item">
185+
<input class="b2b-input"
186+
type="text"
187+
{% if section.settings.form_email_field3_required %} required {% endif %}
188+
id="ContactForm-{{ section.settings.form_email_field3 | replace: ' ', '_' | downcase }}"
189+
name="contact[{{ section.settings.form_email_field3 | replace: ' ', '_' | downcase }}]"
190+
placeholder="{{ section.settings.form_email_field3 }}">
191+
</div>
187192
{% endif %}
188193
189194
{% if section.settings.form_email_field4 != blank %}
190195
<div class="b2b-form-item">
191196
<input class="b2b-input"
192197
type="text"
198+
{% if section.settings.form_email_field4_required %} required {% endif %}
193199
id="ContactForm-{{ section.settings.form_email_field4 | replace: ' ', '_' | downcase }}"
194200
name="contact[{{ section.settings.form_email_field4 | replace: ' ', '_' | downcase }}]"
195201
placeholder="{{ section.settings.form_email_field4 }}">
196202
</div>
197203
{% endif %}
198204
199-
{% for block in form_fields %}
200-
<div class="b2b-form-item">
205+
{% for block in form_fields %}
206+
<div class="b2b-form-item">
201207
{% if block.settings.field_type == "hidden" %}
202-
<input type="hidden" id="ContactForm-{{ block.settings.field_name | replace: ' ', '_' | downcase }}" name="contact[{{ block.settings.field_name | replace: ' ', '_' | downcase }}]" value="{{ block.settings.default_value }}">
208+
<input type="hidden"
209+
id="ContactForm-{{ block.settings.field_name | replace: ' ', '_' | downcase }}"
210+
name="contact[{{ block.settings.field_name | replace: ' ', '_' | downcase }}]"
211+
value="{{ block.settings.default_value }}">
203212
{% elsif block.settings.field_type == "textarea" %}
204-
<textarea class="b2b-input" id="ContactForm-{{ block.settings.field_name | replace: ' ', '_' | downcase }}" name="contact[{{ block.settings.field_name | replace: ' ', '_' | downcase }}]" placeholder="{{ block.settings.placeholder }}"></textarea>
213+
<textarea class="b2b-input"
214+
id="ContactForm-{{ block.settings.field_name | replace: ' ', '_' | downcase }}"
215+
name="contact[{{ block.settings.field_name | replace: ' ', '_' | downcase }}]"
216+
placeholder="{{ block.settings.placeholder }}"
217+
{% if block.settings.field_required %} required {% endif %}></textarea>
205218
{% else %}
206-
<input class="b2b-input" type="{{ block.settings.field_type }}" name="contact[{{ block.settings.field_name | replace: ' ', '_' | downcase }}]" placeholder="{{ block.settings.placeholder }}">
219+
<input class="b2b-input"
220+
type="{{ block.settings.field_type }}"
221+
name="contact[{{ block.settings.field_name | replace: ' ', '_' | downcase }}]"
222+
placeholder="{{ block.settings.placeholder }}"
223+
{% if block.settings.field_required %} required {% endif %}>
207224
{% endif %}
208225
</div>
209-
{% endfor %}
226+
{% endfor %}
210227
211228
{% if section.settings.form_email_field5 != blank %}
212229
<div class="b2b-form-item">
213-
<textarea class="b2b-input"
230+
<textarea class="b2b-input"
231+
{% if section.settings.form_email_field5_required %} required {% endif %}
214232
id="ContactForm-{{ section.settings.form_email_field5 | replace: ' ', '_' | downcase }}"
215233
name="contact[{{ section.settings.form_email_field5 | replace: ' ', '_' | downcase }}]"
216234
placeholder="{{ section.settings.form_email_field5 }}"></textarea>
@@ -742,6 +760,33 @@ This is the scheme that controls the content in the Shopify Customizer tool
742760
"label": "Introduction Text",
743761
"default": "Sign in below to get instant access to your B2B account and start placing orders."
744762
},
763+
764+
{
765+
"type": "text",
766+
"id": "login_email",
767+
"label": "Email",
768+
"default": "Enter your email address"
769+
},
770+
771+
{
772+
"type": "text",
773+
"id": "login_password",
774+
"label": "Password",
775+
"default": "Enter your password"
776+
},
777+
{
778+
"type": "text",
779+
"id": "sign_in",
780+
"label": "Sign in button",
781+
"default": "Sign In"
782+
},
783+
{
784+
"type": "text",
785+
"id": "forgot_password",
786+
"label": "Forgot password",
787+
"default": "Forgot password?"
788+
},
789+
745790
{
746791
"type": "text",
747792
"id": "open_account_title",
@@ -831,34 +876,64 @@ This is the scheme that controls the content in the Shopify Customizer tool
831876
"info": "Leave blank to remove this field"
832877
},
833878
{
879+
"type": "checkbox",
880+
"id": "form_email_field1_required",
881+
"label": "Make this field required?",
882+
"default": false
883+
},
884+
{
834885
"type": "text",
835886
"id": "form_email_field2",
836887
"label": "Field 2",
837888
"default": "Email",
838889
"info": "Leave blank to remove this field"
839890
},
840891
{
892+
"type": "checkbox",
893+
"id": "form_email_field2_required",
894+
"label": "Make this field required?",
895+
"default": true
896+
},
897+
{
841898
"type": "text",
842899
"id": "form_email_field3",
843900
"label": "Field 3",
844901
"default": "Phone",
845902
"info": "Leave blank to remove this field"
846903
},
847904
{
905+
"type": "checkbox",
906+
"id": "form_email_field3_required",
907+
"label": "Make this field required?",
908+
"default": false
909+
},
910+
{
848911
"type": "text",
849912
"id": "form_email_field4",
850913
"label": "Field 4",
851914
"default": "Your Tax ID",
852915
"info": "Leave blank to remove this field"
853916
},
854917
{
918+
"type": "checkbox",
919+
"id": "form_email_field4_required",
920+
"label": "Make this field required?",
921+
"default": false
922+
},
923+
{
855924
"type": "text",
856925
"id": "form_email_field5",
857926
"label": "Comments",
858927
"default": "Comments",
859928
"info": "This field always shows at the end to allow comments to be added. Leave blank to remove this field"
860929
},
861930
{
931+
"type": "checkbox",
932+
"id": "form_email_field5_required",
933+
"label": "Make this field required?",
934+
"default": false
935+
},
936+
{
862937
"type": "header",
863938
"content": "FAQs",
864939
"info": "Include a FAQ section. You can add FAQs on the left by clicking 'Add FAQs' under 'Login Page'"
@@ -1045,6 +1120,13 @@ This is the scheme that controls the content in the Shopify Customizer tool
10451120
"id": "placeholder",
10461121
"label": "Placeholder Text",
10471122
"default": "Enter value"
1123+
},
1124+
1125+
{
1126+
"type": "checkbox",
1127+
"id": "field_required",
1128+
"label": "Make this field required?",
1129+
"default": false
10481130
}
10491131
]
10501132
}

0 commit comments

Comments
 (0)