|
@@ -0,0 +1,323 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="{{site.dist.country_lang}}">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <title>{{product.seo_title}} - Screen Protector Factory Directly</title>
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
|
+ <meta name="keywords" content="{{product.seo_keywords}}" />
|
|
|
+ <meta name="description" content="{{product.seo_description}}" />
|
|
|
+ <link rel="canonical" href="{{site.current_url}}/" />
|
|
|
+ <meta property="og:locale" content="{{site.dist.country_lang}}" />
|
|
|
+ <meta property="og:type" content="website" />
|
|
|
+ <meta property="og:title" content="{{product.seo_title}}" />
|
|
|
+ <meta property="og:description" content="{{product.seo_description}}" />
|
|
|
+ <meta property="og:url" content="{{site.current_url}}" />
|
|
|
+ <meta property="og:site_name" content="{{site.dist.site_name}}" />
|
|
|
+ <link rel='shortlink' href="{{site.current_url}}" />
|
|
|
+ <!-- Bootstrap CSS -->
|
|
|
+ <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
|
|
+ <!-- Font Awesome para ícones sociais -->
|
|
|
+ <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/fontawesome/css/all.min.css" rel="stylesheet">
|
|
|
+ <!-- CSS Personalizado -->
|
|
|
+ <link rel="stylesheet" href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/swiper/css/swiper.min.css">
|
|
|
+ <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/css/styles.css" rel="stylesheet">
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+{% include '_header.liquid' %}
|
|
|
+
|
|
|
+
|
|
|
+<div class="container products-detail">
|
|
|
+ <div class="breadcrumb">{% for breadcrumb in breadcrumbs %} {%if forloop.last%} <strong>Perguntas frequentes</strong> {%else%} <a href="{{ breadcrumb.url }}" title="Home page">{{ breadcrumb.name }}</a>{% endif %}{% endfor %} </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 第一行 -->
|
|
|
+ <div class="row g-4">
|
|
|
+ <!-- 左侧图片轮播 -->
|
|
|
+ <div class="col-md-5 top-left">
|
|
|
+ <div id="mainCarousel" class="carousel slide main-carousel">
|
|
|
+ <div class="carousel-inner">
|
|
|
+ {% if product.images and product.images.size > 0 %}
|
|
|
+ {% for item in product.images %}
|
|
|
+ {% assign image_url = item.image_url %}
|
|
|
+ <div class="carousel-item {% if forloop.first %}active {% endif %}">
|
|
|
+ <img src="{% if image_url contains 'http' %}{{ image_url }}?x-oss-process=image/resize,w_500,m_lfit{% else %}{{ site.image_base_url }}{{ image_url }}?x-oss-process=image/resize,w_500,m_lfit{% endif %}" class="d-block w-100" alt="{{ product.title }}">
|
|
|
+ </div>
|
|
|
+ {% endfor %}
|
|
|
+ {% else %}
|
|
|
+ <div class="carousel-item active">
|
|
|
+ <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/product_default.jpg" class="d-block w-100" alt="{{ product.title }}">
|
|
|
+ </div>
|
|
|
+ {% endif %}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="carousel-thumbnails swiper-container" >
|
|
|
+ <div class="swiper-wrapper">
|
|
|
+ {% if product.images and product.images.size > 0 %}
|
|
|
+ {% for item in product.images %}
|
|
|
+ {% assign image_url = item.image_url %}
|
|
|
+ <img src="{% if image_url contains 'http' %}{{ image_url }}?x-oss-process=image/resize,w_100,m_lfit{% else %}{{ site.image_base_url }}{{ image_url }}?x-oss-process=image/resize,w_100,m_lfit{% endif %}" class="swiper-slide" data-bs-target="#mainCarousel" data-bs-slide-to="{{ forloop.index0 }}" alt="{{ product.title }}">
|
|
|
+ {% endfor %}
|
|
|
+ {% else %}
|
|
|
+ <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/product_default.jpg" class="swiper-slide" data-bs-target="#mainCarousel" data-bs-slide-to="0" alt="{{ product.title }}">
|
|
|
+ {% endif %}
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 右侧产品介绍 -->
|
|
|
+ <div class="col-md-7 top-right">
|
|
|
+ <h1> {{product.title | strip_html }}</h1>
|
|
|
+
|
|
|
+ <div class="sku">{{product.sku | strip_html }}</div>
|
|
|
+
|
|
|
+ <div class="product-parameters">
|
|
|
+ {{ product.seo_description | strip_html }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="features"></div>
|
|
|
+
|
|
|
+
|
|
|
+ {% comment %}{% endcomment %}
|
|
|
+ {% comment %}<div class="contact-form">{% endcomment %}
|
|
|
+ {% comment %}<div class="form-container">{% endcomment %}
|
|
|
+ {% comment %}<h3 class="mb-4" mtb_edit="2">Obter Amostra Gratuita Agora</h3>{% endcomment %}
|
|
|
+ {% comment %}{% endcomment %}
|
|
|
+ {% comment %}<form id="form_contact" data-action="/contact" class="form-default" role="form">{% endcomment %}
|
|
|
+ {% comment %}<input type="hidden" name="consulting_products" value="{{ product.title }}" />{% endcomment %}
|
|
|
+ {% comment %}<!-- 姓名 -->{% endcomment %}
|
|
|
+ {% comment %}<div class="row mb-3 align-items-center">{% endcomment %}
|
|
|
+ {% comment %}<label class="col-md-3 col-form-label" mtb_edit="2">Nome</label>{% endcomment %}
|
|
|
+ {% comment %}<div class="col-md-9">{% endcomment %}
|
|
|
+ {% comment %}<input type="text" name="customer_name" class="form-control" required>{% endcomment %}
|
|
|
+ {% comment %}</div>{% endcomment %}
|
|
|
+ {% comment %}</div>{% endcomment %}
|
|
|
+ {% comment %}{% endcomment %}
|
|
|
+ {% comment %}<!-- 邮箱 -->{% endcomment %}
|
|
|
+ {% comment %}<div class="row mb-3 align-items-center">{% endcomment %}
|
|
|
+ {% comment %}<label class="col-md-3 col-form-label" mtb_edit="2">E-mail</label>{% endcomment %}
|
|
|
+ {% comment %}<div class="col-md-9">{% endcomment %}
|
|
|
+ {% comment %}<input type="email" name="email" class="form-control" required>{% endcomment %}
|
|
|
+ {% comment %}</div>{% endcomment %}
|
|
|
+ {% comment %}</div>{% endcomment %}
|
|
|
+ {% comment %}{% endcomment %}
|
|
|
+ {% comment %}<!-- 公司名称 -->{% endcomment %}
|
|
|
+ {% comment %}<div class="row mb-3 align-items-center">{% endcomment %}
|
|
|
+ {% comment %}<label class="col-md-3 col-form-label" mtb_edit="2">Empresa</label>{% endcomment %}
|
|
|
+ {% comment %}<div class="col-md-9">{% endcomment %}
|
|
|
+ {% comment %}<input type="text" name="company_name" class="form-control">{% endcomment %}
|
|
|
+ {% comment %}</div>{% endcomment %}
|
|
|
+ {% comment %}</div>{% endcomment %}
|
|
|
+ {% comment %}{% endcomment %}
|
|
|
+ {% comment %}<!-- WhatsApp -->{% endcomment %}
|
|
|
+ {% comment %}<div class="row mb-3 align-items-center">{% endcomment %}
|
|
|
+ {% comment %}<label class="col-md-3 col-form-label" mtb_edit="2">WhatsApp</label>{% endcomment %}
|
|
|
+ {% comment %}<div class="col-md-9">{% endcomment %}
|
|
|
+ {% comment %}<input type="tel" name="whats_app" class="form-control">{% endcomment %}
|
|
|
+ {% comment %}</div>{% endcomment %}
|
|
|
+ {% comment %}</div>{% endcomment %}
|
|
|
+ {% comment %}{% endcomment %}
|
|
|
+ {% comment %}<!-- 消息 -->{% endcomment %}
|
|
|
+ {% comment %}<div class="row mb-3 align-items-center">{% endcomment %}
|
|
|
+ {% comment %}<label class="col-md-3 col-form-label" mtb_edit="2">Mensagem</label>{% endcomment %}
|
|
|
+ {% comment %}<div class="col-md-9">{% endcomment %}
|
|
|
+ {% comment %}<textarea class="form-control" name="content" rows="2"></textarea>{% endcomment %}
|
|
|
+ {% comment %}</div>{% endcomment %}
|
|
|
+ {% comment %}</div>{% endcomment %}
|
|
|
+ {% comment %}{% endcomment %}
|
|
|
+ {% comment %}<!-- 提交按钮 -->{% endcomment %}
|
|
|
+ {% comment %}<div class="row">{% endcomment %}
|
|
|
+ {% comment %}<div class="col-md-9 offset-md-3">{% endcomment %}
|
|
|
+ {% comment %}<button type="submit" class="btn btn-custom w-100" mtb_edit="2">Enviar</button>{% endcomment %}
|
|
|
+ {% comment %}</div>{% endcomment %}
|
|
|
+ {% comment %}</div>{% endcomment %}
|
|
|
+ {% comment %}</form>{% endcomment %}
|
|
|
+ {% comment %}</div>{% endcomment %}
|
|
|
+ {% comment %}</div>{% endcomment %}
|
|
|
+
|
|
|
+ <button class="quote btnch" data-bs-toggle="modal" data-bs-target="#quoteModal">Get a quote</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 第二行 产品详情 -->
|
|
|
+ {% comment %}<div class="row mt-5">{% endcomment %}
|
|
|
+ {% comment %}<div class="col-12">{% endcomment %}
|
|
|
+ {% comment %}<h2 class="mb-4" mtb_edit="2">{% endcomment %}
|
|
|
+ {% comment %}Informações adicionais{% endcomment %}
|
|
|
+ {% comment %}</h2>{% endcomment %}
|
|
|
+ {% comment %}<hr class="w-100 mx-auto mb-5">{% endcomment %}
|
|
|
+ {% comment %}<div class="product-description">{% endcomment %}
|
|
|
+ {% comment %}{{product.content | raw }}{% endcomment %}
|
|
|
+ {% comment %}</div>{% endcomment %}
|
|
|
+ {% comment %}</div>{% endcomment %}
|
|
|
+ {% comment %}</div>{% endcomment %}
|
|
|
+
|
|
|
+ <div class="row mt-5">
|
|
|
+ <div class="col-12">
|
|
|
+ <ul class="nav nav-tabs mb-4" id="myTab" role="tablist">
|
|
|
+ <li class="nav-item" role="presentation">
|
|
|
+ <button class="nav-link active" id="description-tab" data-bs-toggle="tab" data-bs-target="#description" type="button" role="tab" aria-controls="description" aria-selected="true">
|
|
|
+ Descrição
|
|
|
+ </button>
|
|
|
+ </li>
|
|
|
+ <li class="nav-item" role="presentation">
|
|
|
+ <button class="nav-link" id="specification-tab" data-bs-toggle="tab" data-bs-target="#specification" type="button" role="tab" aria-controls="specification" aria-selected="false">
|
|
|
+ Especificação
|
|
|
+ </button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <div class="tab-content" id="myTabContent">
|
|
|
+ <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">
|
|
|
+ <div class="product-description">
|
|
|
+ {{product.content | raw }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tab-pane fade" id="specification" role="tabpanel" aria-labelledby="specification-tab">
|
|
|
+ <!-- 在这里添加Specification的内容 -->
|
|
|
+ <table class="table table-striped table-hover parameters-table">
|
|
|
+ {% for item in product.parameters %}
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <strong>{{ item.key }}</strong>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ {{ item.value }}
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ {% endfor %}
|
|
|
+ </table>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+
|
|
|
+<!-- Hidden content -->
|
|
|
+
|
|
|
+<div class="modal fade" id="quoteModal" tabindex="-1" aria-labelledby="quoteModalLabel" aria-hidden="true">
|
|
|
+ <div class="modal-dialog modal-dialog-centered">
|
|
|
+ <div class="modal-content">
|
|
|
+ <div class="modal-header">
|
|
|
+ <h5 class="modal-title" id="quoteModalLabel">Seja um Representante</h5>
|
|
|
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body contact-form">
|
|
|
+ <form id="form_contact" data-action="/contact" class="form-default" role="form">
|
|
|
+ <input type="hidden" name="consulting_products" value="{{ product.title }}" />
|
|
|
+
|
|
|
+ <!-- 修改为上下布局 -->
|
|
|
+ <div class="mb-3">
|
|
|
+ <label class="form-label">Nome</label>
|
|
|
+ <input type="text" name="customer_name" class="form-control" required>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="mb-3">
|
|
|
+ <label class="form-label">E-mail</label>
|
|
|
+ <input type="email" name="email" class="form-control" required>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="mb-3">
|
|
|
+ <label class="form-label">Empresa</label>
|
|
|
+ <input type="text" name="company_name" class="form-control">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="mb-3">
|
|
|
+ <label class="form-label">WhatsApp</label>
|
|
|
+ <input type="tel" name="whats_app" class="form-control">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="mb-3">
|
|
|
+ <label class="form-label">Mensagem</label>
|
|
|
+ <textarea class="form-control" name="content" rows="4"></textarea>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 按钮保持原宽度 -->
|
|
|
+ <div class="d-grid text-center" style="display: grid; justify-content: center;">
|
|
|
+ <button type="submit" class="quote btnch">Enviar</button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+{% include '_footer.liquid' %}
|
|
|
+
|
|
|
+<script>
|
|
|
+ var swiper = new Swiper('.swiper-container', {
|
|
|
+ slidesPerView: 5,
|
|
|
+ paginationClickable: true,
|
|
|
+ spaceBetween: 30,
|
|
|
+ freeMode: true
|
|
|
+ });
|
|
|
+
|
|
|
+ $(document).ready(function() {
|
|
|
+ $('#form_contact').on('submit', function(event) {
|
|
|
+ event.preventDefault();
|
|
|
+ var form = $(this);
|
|
|
+ var token = $('input[name="_token"]').val();
|
|
|
+ var formData = form.serialize();
|
|
|
+
|
|
|
+ // Validate required fields
|
|
|
+ var requiredFields = form.find('.required-field input, .required-field textarea');
|
|
|
+ var hasError = false;
|
|
|
+
|
|
|
+ requiredFields.each(function() {
|
|
|
+ if ($(this).val().trim() === '') {
|
|
|
+ alert('please fill in all required fields');
|
|
|
+ hasError = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ if (hasError) return;
|
|
|
+
|
|
|
+ // Validate WhatsApp as a number
|
|
|
+ var whatsapp = $('input[name="whats_app"]').val();
|
|
|
+ if (whatsapp == "") {
|
|
|
+ alert('please enter a valid WhatsApp number');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Validate email format
|
|
|
+ var email = $('input[name="email"]').val();
|
|
|
+ if (email == "") {
|
|
|
+ alert('please enter a valid email address');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ console.log(formData);
|
|
|
+
|
|
|
+ // Submit via AJAX
|
|
|
+ $.ajax({
|
|
|
+ url: form.data('action'),
|
|
|
+ type: 'POST',
|
|
|
+ data: formData,
|
|
|
+ dataType: 'json',
|
|
|
+ beforeSend: function() {
|
|
|
+ // Before send
|
|
|
+ },
|
|
|
+ success: function(response) {
|
|
|
+ alert('Success!');
|
|
|
+ form.trigger('reset');
|
|
|
+ },
|
|
|
+ error: function(xhr, status, error) {
|
|
|
+ alert('error! Please try again later.');
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|