File: //home/artinside/public_html/sabbry/themes/web/product.php
<?php
$v->layout("_theme");
$v->insert("views/page-title", ["pageTitle" => $pageTitle]);
?>
<section id="content">
<div class="content-wrap">
<div class="container">
<div class="single-product">
<div class="product">
<div class="row gutter-40">
<div class="col-md-6">
<!-- Product Single - Gallery
============================================= -->
<div class="product-image">
<div class="fslider" data-pagi="false" data-arrows="false" data-thumbs="true">
<div class="flexslider">
<div class="slider-wrap" data-lightbox="gallery">
<div class="slide" data-thumb="<?= url("storage/". $product->cover); ?>"><a href="<?= url("storage/" . $product->cover); ?>" title="<?= $product->title ?>" data-lightbox="gallery-item"><img src="<?= image($product->cover, 1200)?>" title="<?= $product->title ?>" alt="<?= $product->title ?>"> </a></div>
<?php
if($gallery):
foreach ($gallery as $g):
?>
<div class="slide" data-thumb="<?= url("storage/". $g->gallery) ?>"><a href="<?= url("storage/" . $g->gallery) ?>" title="<?= $product->title ?>" data-lightbox="gallery-item"><img src="<?= image($g->gallery, 1200)?>" title="<?= $product->title ?>" alt="<?= $product->title ?>"></a></div>
<?php
endforeach;
endif;
?>
</div>
<div class="badge rounded-pill bg-magenta px-3 py-2 mb-2 fw-bolder font-small"><i class="bi-speedometer"></i> <?=$product->speed?></div>
</div>
</div>
</div><!-- Product Single - Gallery End -->
</div>
<div class="col-md-6 product-desc">
<div class="d-flex align-items-center justify-content-between mb-0">
<!-- Product Single - Price
============================================= -->
<h3 class="mb-0"><?=$product->title?></h3>
<!-- Product Single - Rating
============================================= -->
</div>
<h5 class="mt-0 text-primary"><?=$product->subtitle?></h5>
<div class="line"></div>
<!-- Product Single - Short Description
============================================= -->
<p><?= $product->content?></p>
<div class="promo promo-light px-5 py-4 mb-5 rounded-6 ">
<div class="row align-items-center">
<div class="col-12 col-lg">
<h3 class="text-primary">Mais Informações?</h3>
<span>Solicite uma cotação!</span>
</div>
<div class="col-12 col-lg-auto mt-4 mt-lg-0">
<a href="#modalOrcamento" data-lightbox="inline" class="button button-dark button-circle button-reveal text-end ls-0 m-0" style="padding-left: 40px;padding-right: 40px;"><span>Saiba Mais</span><i class="bi-chevron-right"></i></a>
</div>
</div>
</div>
<!-- <ul class="list-group list-group-flush">-->
<!-- <li class="list-group-item d-flex justify-content-between align-items-center px-0">-->
<!-- <span class="text-muted">Category</span><span class="text-dark fw-semibold">Dress</span>-->
<!-- </li>-->
<!-- <li class="list-group-item d-flex justify-content-between align-items-center px-0">-->
<!-- <span class="text-muted">Color</span><span class="text-dark fw-semibold">Light Pink</span>-->
<!-- </li>-->
<!-- <li class="list-group-item d-flex justify-content-between align-items-center px-0">-->
<!-- <span class="text-muted">Size</span><span class="text-dark fw-semibold">Medium, Large</span>-->
<!-- </li>-->
<!-- <li class="list-group-item d-flex justify-content-between align-items-center px-0">-->
<!-- <span class="text-muted">Quantity</span><span class="text-dark fw-semibold">7 Pcs</span>-->
<!-- </li>-->
<!-- <li class="list-group-item d-flex justify-content-between align-items-center px-0">-->
<!-- <span class="text-muted">Return Policy</span><span class="text-dark fw-semibold">30 days</span>-->
<!-- </li>-->
<!-- <li class="list-group-item d-flex justify-content-between align-items-center px-0">-->
<!-- <span class="text-muted">SKU</span><span class="text-dark fw-semibold">8465415</span>-->
<!-- </li>-->
<!-- </ul>-->
</div>
<div class="col-12">
<div class="line mt-0"></div>
<div class="mb-0">
<?php if($files): ?>
<ul class="nav canvas-tabs tabs nav-tabs mb-3" id="tab-1" role="tablist" style="--bs-nav-link-font-weight: 500;">
<?php
$i = 0;
foreach ($files as $file):
$i++
?>
<li class="nav-item" role="presentation">
<button class="nav-link <?php if($i == 1): echo 'active'; endif; ?>" id="canvas-tabs-<?= $i; ?>-tab" data-bs-toggle="pill" data-bs-target="#tabs-<?= $i; ?>"
type="button" role="tab" aria-controls="canvas-tabs-<?= $i; ?>" aria-selected="true"><i
class="me-1 bi-justify"></i><span class="d-none d-md-inline-block">
<?= $file->title ?></span></a></button>
</li>
<?php
endforeach;?>
</ul>
<div id="canvas-tab-alt-content" class="tab-content">
<?php
$x = 0;
foreach ($files as $file):
$x++;
?>
<div class="tab-pane fade <?php if($x == 1): echo ' show active'; endif; ?>" id="tabs-<?= $x; ?>" role="tabpanel" aria-labelledby="canvas-tabs-<?= $x; ?>-tab" tabindex="0">
<img src="<?=url("storage/{$file->file}");?>">
</div>
<?php
endforeach; ?>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section><!-- #content end -->
<?php $v->start("scripts"); ?>
<script type="text/javascript">
var ajaxResponseBaseTime = 5;
var ajaxResponseRequestError = "<div class='message error icon-warning'>Desculpe mas não foi possível processar sua requisição...</div>";
// AJAX RESPONSE
function ajaxMessage(message, time) {
var ajaxMessage = $(message);
ajaxMessage.append("<div class='message_time'></div>");
ajaxMessage.find(".message_time").animate({"width": "100%"}, time * 1000, function () {
$(this).parents(".message").fadeOut(200);
});
$(".ajax_response").append(ajaxMessage);
ajaxMessage.effect("bounce");
}
$(".j_cta").on("click", function (e) {
e.preventDefault();
var clicked = $(this);
var data = clicked.data();
data.email = $(".j_email").val();
var load = $(".ajax_load");
$.ajax({
url: data.url,
type: "POST",
data: data,
dataType: "json",
beforeSend: function () {
load.fadeIn(200).css("display", "flex");
},
success: function (response) {
//message
if (response.message) {
ajaxMessage(response.message, ajaxResponseBaseTime);
load.fadeOut();
}
},
error: function () {
ajaxMessage(ajaxResponseRequestError, 5);
load.fadeOut();
}
});
});
</script>
<?php $v->end(); ?>
<div class="modal1 mfp-hide fadeIn fast" id="modalOrcamento">
<div class="card border-0 mx-auto" style="max-width: 500px;">
<img src="<?= url("storage/". $product->cover); ?>" class="card-img-top" alt="Image">
<div class="card-body p-4">
<h3 class="card-title font-body"><?= $product->title?></h3>
<div class="form-widget">
<div class="form-result"></div>
<form class="mb-0 position-relative" action="<?= url("contact")?>" method="post" enctype="multipart/form-data">
<div class="form-process">
<div class="css3-spinner">
<div class="css3-spinner-scaler"></div>
</div>
</div>
<div class="row">
<div class="col-12 mb-2">
<label for="modal-health-name">Nome:</label>
<input type="text" name="name" id="modal-health-name" class="form-control required" value="" placeholder="Seu nome">
</div>
<div class="col-12 mb-2">
<label for="modal-health-email">Email:</label>
<input type="email" name="email" id="modal-health-email" class="form-control required" value="" placeholder="Seu melhor Email">
</div>
<div class="col-12 mb-2">
<label for="modal-health-phone">Telefone:</label>
<input type="email" name="phone" id="modal-health-phone" class="form-control required" value="" placeholder="Seu Telefone">
</div>
<div class="col-12 mb-2">
<label for="modal-health-product">Produto:</label>
<input type="text" name="product" value="<?= $product->title?>" class="form-control" style="background-color: #EEEEEE" readonly >
</div>
<div class="col-12 mb-2">
<label for="modal-health-email">Descreva sua necessidade</label>
<textarea name="message" class="form-control"></textarea>
</div>
<div class="col-12 form-group">
<small></small>
</div>
<div class="col-12 d-none">
<input type="text" id="modal-health-botcheck" name="modal-health-botcheck" value="">
</div>
<div class="col-12">
<button type="submit" name="modal-health-submit" class="btn btn-danger w-100 py-2">Enviar</button>
</div>
<input type="hidden" name="action" value="orcamento">
<input type="hidden" name="subject" value="Orçamento de <?= $product->title ?>">
</div>
</form>
</div>
</div>
</div>
</div>