rebly-sections 1.0.1 → 1.2.0

package/assets/data/component-library/contact-us.liquid

@@ -0,0 +1,663 @@
+
+
+
+
+
+
+
+{% comment %}
+Regular page content goes here.
+{% endcomment %}
+<div class="rte">
+  {{ page.content }}
+</div>
+
+
+
+
+
+
+
+
+
+{% comment %}
+Regular page content goes here.
+{% endcomment %}
+<div class="rte">
+  {{ page.content }}
+</div>
+
+
+{% if section.settings.show_contact_4_page %}
+<div class="contact-page-four">
+  <div class="grid-uniform">
+    <div class="grid__item">
+      <div class="grid__item map-section">
+        <div id="map">{{ settings.contact_iframe_code }} </div>
+      </div>
+      <div class="grid__item ">
+        <div class="container">
+          <div class="grid__item contct-form-section" >
+            <div class="grid__item wide--one-half post-large--one-half large--one-half medium-down--one-third small--grid__item">
+              {% if section.settings.contact_detail != blank %}
+              <p> {{section.settings.contact_detail }}</p>
+              {% endif %}
+              <div class="invisible-small"></div>
+              {% if section.settings.contact_heading  != blank %}
+              <h5>{{section.settings.contact_heading  }}</h5>
+              <div class="contact-info">
+                <ul>
+                  {% if section.settings.contact_address  != blank %}
+                  <li class="adress"><span><i class="fa fa-map-marker" aria-hidden="true"></i></span>{{section.settings.contact_address  }}</li>
+                  {% endif %}
+                  {% if section.settings.contact_phone  != blank %}
+                  <li class="phone-no"><span><i class="fa fa-phone" aria-hidden="true"></i></span>{{section.settings.contact_phone  }}</li>
+                  {% endif %}
+                  {% if section.settings.contact_mail  != blank %}
+                  <li class="mail"><span><i class="fa fa-envelope" aria-hidden="true"></i></span><a href="">{{section.settings.contact_mail  }}</a></li>
+                  {% endif %}
+                </ul>
+              </div>
+              {% if section.settings.show_contact_4_contactsocialicon%}
+              <div class="social-icon">
+                <ul>
+                  {% if section.settings.show_contact_4_facebook %}
+                  <li><a href="{{section.settings.contact_4_facebook}}"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
+                  {% endif %}
+                  {% if section.settings.show_contact_4_twitter %}
+                  <li><a href="{{section.settings.contact_4_twitter}}"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
+                  {% endif %}
+                  {% if section.settings.show_contact_4_googleplus %}
+                  <li><a href="{{section.settings.contact_4_googleplus}}"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
+                  {% endif %}
+                  {% if section.settings.show_contact_4_youtube %}
+                  <li><a href="{{section.settings.contact_4_youtube}}"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
+                  {% endif %}
+                </ul>
+              </div>
+              {% endif %}
+
+            </div>
+            {% endif %}
+            {% if section.settings.show_contact_4_contactform %}
+            <div class="grid__item wide--one-half post-large--one-half large--one-half medium-down--one-third small--grid__item form-section">
+              {% form 'contact' %}
+              {% if form.posted_successfully? %}
+              <p class="note form-success">
+                {{ 'contact.form.post_success' | t }}
+              </p>
+              {% endif %}
+              {{ form.errors | default_errors }}
+              {% assign name_attr = 'contact.form.name' | t | handle %}
+              <label for="ContactFormName" class="label--hidden">{{ 'contact.form.name' | t }}</label>
+              <input type="text" id="ContactFormName" name="contact[{{ name_attr }}]" placeholder="{{ 'contact.form.name' | t }}" autocapitalize="words" value="{% if form[name_attr] %}{{ form[name_attr] }}{% elsif customer %}{{ customer.name }}{% endif %}">
+              <label for="ContactFormEmail" class="label--hidden">{{ 'contact.form.email' | t }}</label>
+              <input type="email" id="ContactFormEmail" name="contact[email]" placeholder="{{ 'contact.form.email' | t }}" autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}">
+              {% assign name_attr = 'contact.form.phone' | t | handle %}
+              <label for="ContactFormPhone" class="label--hidden">{{ 'contact.form.phone' | t }}</label>
+              <input type="tel" id="ContactFormPhone" name="contact[{{ name_attr }}]" placeholder="phone" pattern="[0-9\-]*" value="{% if form[name_attr] %}{{ form[name_attr] }}{% elsif customer %}{{ customer.phone }}{% endif %}">
+              <label for="ContactFormMessage" class="label--hidden">{{ 'contact.form.message' | t }}</label>
+              <textarea rows="5" id="ContactFormMessage" name="contact[body]" placeholder="{{ 'contact.form.message' | t }}">{% if form.body %}{{ form.body }}{% endif %}</textarea>
+              <button class="contact-btn" value="">{{ 'contact.form.send' | t }}</button>
+              {% endform %}
+            </div>
+            {% endif %}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+  {% if section.settings.show_contact_4_contactlocation %}
+  <div class="grid-uniform location-section">
+    <div class="container">
+      {% if section.settings.location_title != blank %}
+      <h3>{{section.settings.location_title  }}</h3>
+      {% endif %}
+      <div class="grid__item">
+        <div class="grid__item wide--one-third post-large--one-third large--one-third medium--one-half small-grid__item">
+          <div class="contact_address">
+          <div class="location">
+            <div class="location-img">
+              {% if section.settings.contact_4_locationimg1 != blank %}
+              <img src="{{ section.settings.contact_4_locationimg1 | img_url: '1024x1024' }}" alt="{{section.settings.contact_4_locationimg1_title  }}" title="" /> 
+              {% endif %}
+              <span clas="location-icon"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
+            </div>
+            <div class="location-details">
+              {% if section.settings.location_1_title != blank %}
+              <h2>{{section.settings.location_1_title  }}</h2>
+              {% endif %}
+              {% if section.settings.location_1_desc != blank %}
+              <p>
+                {{section.settings.location_1_desc  }}
+              </p>
+              {% endif %}
+            </div>
+          </div>
+          </div>
+        </div>
+
+        <div class="grid__item wide--one-third post-large--one-third large--one-third medium--one-half small-grid__item">
+          <div class="contact_address">
+          <div class="location">
+            <div class="location-img">
+              {% if section.settings.contact_4_locationimg2 != blank %}
+              <img src="{{ section.settings.contact_4_locationimg2 | img_url: '1024x1024' }}" alt="{{section.settings.contact_4_locationimg2_title  }}" title="" /> 
+              {% endif %}
+              <span clas="location-icon"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
+            </div>
+            <div class="location-details">
+              {% if section.settings.location_2_title != blank %}
+              <h2>{{section.settings.location_2_title  }}</h2>
+              {% endif %}
+              {% if section.settings.location_2_desc != blank %}
+              <p>
+                {{section.settings.location_2_desc  }}
+              </p>
+              {% endif %}
+            </div>
+          </div>
+          </div>
+        </div>
+
+        <div class="grid__item wide--one-third post-large--one-third large--one-third medium--one-half small-grid__item">
+          <div class="contact_address">
+          <div class="location">
+            <div class="location-img">
+              {% if section.settings.contact_4_locationimg3 != blank %}
+              <img src="{{ section.settings.contact_4_locationimg3 | img_url: '1024x1024' }}" alt="{{section.settings.contact_4_locationimg3_title  }}" title="" /> 
+              {% endif %}
+              <span clas="location-icon"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
+            </div>
+            <div class="location-details">
+              {% if section.settings.location_3_title != blank %}
+              <h2>{{section.settings.location_3_title  }}</h2>
+              {% endif %}
+              {% if section.settings.location_3_desc != blank %}
+              <p>
+                {{section.settings.location_3_desc  }}
+              </p>
+              {% endif %}
+            </div>
+          </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  {% endif %}
+
+
+  {% if section.settings.show_contact_4_contacticonwrapper %}
+    <div class="container">
+  <div class="grid-uniform icon-wrapper">
+        <div class="grid__item wide--one-third post-large--one-third large--one-third medium--one-half small-grid__item">
+          <div class="contact-icon">
+            <span class="icon"><i class="fa fa-life-ring" aria-hidden="true"></i></span>
+            {% if section.settings.icon_1_heading != blank %}
+            <span class="icon-text"> {{section.settings.icon_1_heading  }}</span>
+            {% endif %}
+          </div>
+        </div>
+        <div class="grid__item wide--one-third post-large--one-third large--one-third medium--one-half small-grid__item">
+          <div class="contact-icon">
+            <span class="icon"><i class="fa fa-question" aria-hidden="true"></i></span>
+            {% if section.settings.icon_2_heading != blank %}
+            <span class="icon-text"> {{section.settings.icon_2_heading  }}</span>
+            {% endif %}
+          </div>
+        </div>
+        <div class="grid__item wide--one-third post-large--one-third large--one-third medium--one-half small-grid__item">
+          <div class="contact-icon">
+            <span class="icon"><i class="fa fa-stethoscope" aria-hidden="true"></i></span>
+            {% if section.settings.icon_3_heading != blank %}
+            <span class="icon-text"> {{section.settings.icon_3_heading  }}</span>
+            {% endif %}
+          </div>
+        </div>
+      </div>
+    </div>
+  
+  {% endif %}
+</div>
+{% endif %}
+
+
+
+
+
+<style>
+
+
+
+  .contact-page-four .contct-form-section {background: {{section.settings.contact_4_formbgcolor}}; border: 2px solid {{section.settings.contact_4_formbordercolor}};}
+
+  .contact-page-four p{color:{{section.settings.contact_4_paragraphcolor}};}
+
+  .contact-page-four h5{color:{{section.settings.contact_4_formheadingcolor}}}
+
+  .contact-page-four .adress  , .contact-page-four .phone-no{color:{{section.settings.contact_4_addressphcolor}};}
+
+  .contact-page-four .contact-info ul li span{color:{{section.settings.contact_4_contacticoncolor}};}
+
+  .contact-page-four a{color:{{section.settings.contact_4_linkcolor}};   transition: all 0.3s linear 0s;}
+
+  .contact-page-four a:hover{color:{{section.settings.contact_4_linkhovercolor}};}
+
+  .contact-page-four .social-icon a {border: 1px solid {{section.settings.contact_4_socialiconcolor}};color:{{section.settings.contact_4_socialiconcolor}};}
+
+  .contact-page-four .social-icon a:hover{background:{{section.settings.contact_4_socialiconhoverbg}};border:1px solid {{section.settings.contact_4_socialiconhoverbg}};color:{{section.settings.contact_4_socialiconhovercolor}};}
+
+  .contact-page-four .contact-btn{background:{{section.settings.contact_4_btnbg}};color:{{section.settings.contact_4_btncolor}};}
+
+  .contact-page-four .contact-btn:hover{color:{{section.settings.contact_4_btnhovercolor}};}
+
+  .contact-page-four .contact-btn::after{background:{{section.settings.contact_4_btnhoverbg}};}
+
+  .contact-page-four h3{color:{{section.settings.contact_4_headingcolor}};}
+
+  .contact-page-four .location {background: {{section.settings.contact_4_locationbgcolor}} ;}
+
+  .contact-page-four  .location-img span  { background:{{section.settings.contact_4_locationiconbg}};}
+
+  .contact-page-four .location-img span , .contact-page-four .location h2{color:{{section.settings.contact_4_iconheading}};}
+
+  .contact-page-four .icon-wrapper{background:{{section.settings.contact_4_iconwrapperbg}};}
+
+  .contact-page-four .contact-icon { background:  {{section.settings.contact_4_iconborder}};}
+
+  .contact-page-four .icon {background: {{section.settings.contact_4_iconbg}} ;color:{{section.settings.contact_4_iconcolor}};}
+
+  .contact-page-four .icon-text{color:{{section.settings.contact_4_icontextcolor}};}
+
+  .contact-page-four .contact-icon:hover .icon{background:{{section.settings.contact_4_iconhoverbg}};}
+</style>
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% schema %}
+{
+"name": "Contact Section",
+"settings": [
+
+{
+"type": "color",
+"id": "contact_4_paragraphcolor",
+"default": "#000",
+"label": "Paragraph color"
+},
+{
+"type": "color",
+"id": "contact_4_btnbg",
+"default": "#000",
+"label": "Button bg color"
+},
+{
+"type": "color",
+"id": "contact_4_btncolor",
+"default": "#000",
+"label": "Button border and text color"
+},
+{
+"type": "color",
+"id": "contact_4_btnhoverbg",
+"default": "#000",
+"label": "Button hover bg color"
+},
+{
+"type": "color",
+"id": "contact_4_btnhovercolor",
+"default": "#000",
+"label": "Button text hover color"
+},
+{
+"type": "checkbox",
+"id": "enable_gmap",
+"label": "Enable Contact Map?"
+},
+{
+"type": "textarea",
+"id": "contact_iframe_code",
+"label": "Map Code[iframe]",
+"info": "[Where do I find googlemap action URL?](https:\/\/support.google.com\/maps\/answer\/3544418?hl=en)"
+},
+{
+"type": "checkbox",
+"id": "show_contact_4_page",
+"label": "Show contact page"
+},
+{
+"type": "text",
+"id": "contact_detail",
+"label": "Contact Detail",
+"default":"some Desc"
+},
+{
+"type": "text",
+"id": "contact_heading",
+"label": "Contact Heading",
+"default":"Heading"
+},
+{
+"type": "color",
+"id": "contact_4_formheadingcolor",
+"default": "#000",
+"label": "Form heading color"
+},
+{
+"type": "text",
+"id": "contact_address",
+"label": "Contact Address",
+"default":"Address"
+},
+
+{
+"type": "text",
+"id": "contact_phone",
+"label": "Contact Phone",
+"default":"230"
+},
+
+{
+"type": "text",
+"id": "contact_mail",
+"label": "Contact mail",
+"default":"Mail"
+},
+{
+"type": "color",
+"id": "contact_4_addressphcolor",
+"default": "#000",
+"label": "Address and phone no color"
+},
+{
+"type": "color",
+"id": "contact_4_contacticoncolor",
+"default": "#000",
+"label": "Contact icon color"
+},
+{
+"type": "color",
+"id": "contact_4_linkcolor",
+"default": "#000",
+"label": "Contact link color"
+},
+{
+"type": "color",
+"id": "contact_4_linkhovercolor",
+"default": "#000",
+"label": "Contact link hover color"
+},
+{
+"type": "checkbox",
+"id": "show_contact_4_contactsocialicon",
+"label": "Show contact social icon"
+},
+{
+"type": "checkbox",
+"id": "show_contact_4_facebook",
+"label": "Show facebook"
+},
+{
+"type": "text",
+"id": "contact_4_facebook",
+"label": "Facebook link"
+},
+{
+"type": "checkbox",
+"id": "show_contact_4_twitter",
+"label": "Show twitter"
+},
+{
+"type": "text",
+"id": "contact_4_twitter",
+"label": "Twitter link"
+},
+{
+"type": "checkbox",
+"id": "show_contact_4_googleplus",
+"label": "Show google plus"
+},
+{
+"type": "text",
+"id": "contact_4_googleplus",
+"label": "Google plus link"
+},
+{
+"type": "checkbox",
+"id": "show_contact_4_youtube",
+"label": "Show youtube"
+},
+{
+"type": "text",
+"id": "contact_4_youtube",
+"label": "youtube link"
+},
+{
+"type": "color",
+"id": "contact_4_socialiconcolor",
+"default": "#000",
+"label": "Social icon color"
+},
+{
+"type": "color",
+"id": "contact_4_socialiconhovercolor",
+"default": "#000",
+"label": "Social icon hover color"
+},
+{
+"type": "color",
+"id": "contact_4_socialiconhoverbg",
+"default": "#000",
+"label": "Social icon hover bg"
+},
+{
+"type": "checkbox",
+"id": "show_contact_4_contactform",
+"label": "Show contact form"
+},
+{
+"type": "color",
+"id": "contact_4_formbgcolor",
+"default": "#000",
+"label": "Contact form bg color"
+},
+{
+"type": "color",
+"id": "contact_4_formbordercolor",
+"default": "#000",
+"label": "Contact form border color"
+},
+{
+"type": "checkbox",
+"id": "show_contact_4_contactlocation",
+"label": "show contact location"
+},
+{
+"type": "text",
+"id": "location_title",
+"label": "Heading"
+},
+{
+"type": "color",
+"id": "contact_4_headingcolor",
+"default": "#000",
+"label": "Heading color"
+},
+{
+"type": "image_picker",
+"id": "contact_4_locationimg1",
+"label": "Location img",
+"info": "Size: 500x300"
+},
+{
+"type": "text",
+"id": "contact_4_locationimg1_title",
+"label": "title"
+},
+{
+"type": "text",
+"id": "location_1_title",
+"label": "title"
+},
+{
+"type": "text",
+"id": "location_1_desc",
+"label": "Desc"
+},
+{
+"type": "image_picker",
+"id": "contact_4_locationimg2",
+"label": "Location img",
+"info": "Size: 500x300"
+},
+{
+"type": "text",
+"id": "contact_4_locationimg2_title",
+"label": "title"
+},
+{
+"type": "text",
+"id": "location_2_title",
+"label": "title"
+},
+{
+"type": "text",
+"id": "location_2_desc",
+"label": "Desc"
+},
+{
+"type": "image_picker",
+"id": "contact_4_locationimg3",
+"label": "Location img",
+"info": "Size: 500x300"
+},
+{
+"type": "text",
+"id": "contact_4_locationimg3_title",
+"label": "title"
+},
+{
+"type": "text",
+"id": "location_3_title",
+"label": "title"
+},
+{
+"type": "text",
+"id": "location_3_desc",
+"label": "Desc"
+},
+{
+"type": "color",
+"id": "contact_4_locationbgcolor",
+"default": "#000",
+"label": "Location bg color"
+},
+{
+"type": "color",
+"id": "contact_4_locationiconbg",
+"default": "#000",
+"label": "Location icon bg color"
+},
+{
+"type": "color",
+"id": "contact_4_iconheading",
+"default": "#000",
+"label": "Location icon and heading color"
+},
+{
+"type": "checkbox",
+"id": "show_contact_4_contacticonwrapper",
+"label": "Show contact icon wrapper"
+},
+{
+"type": "color",
+"id": "contact_4_iconwrapperbg",
+"default": "#000",
+"label": "Icon wrapper bg"
+},
+{
+"type": "text",
+"id": "icon_1_heading",
+"label": "title"
+},
+{
+"type": "text",
+"id": "icon_2_heading",
+"label": "title"
+},
+{
+"type": "text",
+"id": "icon_3_heading",
+"label": "title"
+},
+{
+"type": "color",
+"id": "contact_4_iconborder",
+"default": "#000",
+"label": "Icon bg color"
+},
+{
+"type": "color",
+"id": "contact_4_iconbg",
+"default": "#000",
+"label": "Icon background"
+},
+{
+"type": "color",
+"id": "contact_4_iconhoverbg",
+"default": "#000",
+"label": "Icon hover background"
+},
+{
+"type": "color",
+"id": "contact_4_iconcolor",
+"default": "#000",
+"label": "Icon color"
+},
+{
+"type": "color",
+"id": "contact_4_icontextcolor",
+"default": "#000",
+"label": "Icon text color"
+}
+]
+}
+{% endschema %}
+
+{% stylesheet %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endstylesheet %}
+
+{% javascript %}
+{% endjavascript %}