401 lines
13 KiB
Smarty
401 lines
13 KiB
Smarty
<section class="woo-commerce mt-5">
|
|
<div class="product">
|
|
<div class="container">
|
|
<div class="row gx-5">
|
|
<div class="col-12 col-md-5">
|
|
{{{ gallery }}}
|
|
</div>
|
|
<div class="col-12 col-md-7">
|
|
<h1 class="product-title">{{#productTitleFormatter product.title }}</h1>
|
|
<!-- <p><a href="/resources/reviews/"><img src="/wp-content/themes/medicalalert/assets/media/images/reviews_icon.png"> <span style="font-size:16px; font-weight:600;">Read Reviews →</span> </a></p> -->
|
|
<div class="product-description mb-4 mt-3">
|
|
<p>{{{ product.excerpt }}}</p>
|
|
</div>
|
|
<div class="connection-types">
|
|
{{#if showHomeOptions}}
|
|
<div class="connection-types mt-4">
|
|
<p class="option-heading">Select Your System Type:</p>
|
|
{{#if currentProductIsHome}}
|
|
{{#each homesystemProducts}}
|
|
<a class="me-3" href="{{ permalink }}" data-product-id={{ id }}>
|
|
{{ _product_attributes.connection-type.value }}</a>
|
|
{{/each}}
|
|
{{/if}}
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{#if showOTGOptions}}
|
|
<div class="connection-types mt-4">
|
|
<div class="f-black fs-sm fw-bold mb-1">Select Your System Type:</div>
|
|
{{#each OTGProducts}}
|
|
<a class="me-3 f-black fw-normal" href="{{ permalink }}" data-product-id={{ id }}>
|
|
{{ _product_attributes.connection-type.value }}
|
|
</a>
|
|
{{/each}}
|
|
</div>
|
|
{{/if}}
|
|
|
|
|
|
<div class="d-flex align-items-center">
|
|
<div class="select-plan container-fluid p-0">
|
|
<div class="row">
|
|
<div class="col">
|
|
<label for="variation-select" class="f-black mt-3">Select a plan:</label>
|
|
<form class="variations_form" method="post" enctype="multipart/form-data">
|
|
<div class="d-lg-flex">
|
|
<div>
|
|
<select class="form-select p-2" name="variation_id" id="variation-select">
|
|
{{#each variation}}
|
|
<option value="{{{variation_id}}}">{{{attributes.attribute_rate-plan}}} | {{{price_html}}}</option>
|
|
{{this}}
|
|
{{/each}}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<button type="submit" class="btn btn-red mt-2 mt-lg-0 ms-lg-2">Buy Now</button>
|
|
</div>
|
|
</div>
|
|
<h6 class="f-purple fw-bold mb-0 mt-3">Includes free shipping and lockbox! </h6>
|
|
<div class="mb-3">{{product.fee_text}}</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <p class="fw-bold mt-3 fs-6">About the product:</p>
|
|
<ul class="mb-5 fs-6 about-product">
|
|
{{#each product.about_product_lines}}
|
|
<li><strong class="fw-bold">{{ bold_text }}:</strong> {{ regular_text }}</li>
|
|
{{/each}}
|
|
</ul> -->
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{{ flex-content }}}
|
|
</section>
|
|
|
|
<style>
|
|
.connection-types a {
|
|
color: #000000;
|
|
text-decoration: none;
|
|
font-size: 16px;
|
|
line-height: 30px;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
}
|
|
|
|
@media (max-width: 412px) {
|
|
.button--primary {
|
|
font-size: 14px;
|
|
padding: 15px 15px;
|
|
line-height: unset;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 387px) {
|
|
.button--primary {
|
|
font-size: 13px;
|
|
padding: 17px 15px;
|
|
line-height: unset;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 767px) and (max-width: 991px) {
|
|
.button--primary {
|
|
font-size: 1rem;
|
|
padding: 8px 14px;
|
|
}
|
|
}
|
|
|
|
.select-selected.select-arrow-active~.select-items .select-hide:first-child {
|
|
display: none;
|
|
}
|
|
|
|
.custom-select .select-selected {
|
|
color: black;
|
|
}
|
|
|
|
.custom-select .select-items div {
|
|
color: black;
|
|
}
|
|
|
|
.custom-select .select-items div:hover {
|
|
color: white;
|
|
}
|
|
|
|
.custom-select .select-selected.select-arrow-active {
|
|
color: black;
|
|
}
|
|
|
|
#price {
|
|
display: block;
|
|
}
|
|
|
|
#selected-text {
|
|
color: #000066;
|
|
margin: 5px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
#selected-price {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
#price {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.container {
|
|
dispaly: table;
|
|
width: 100%;
|
|
}
|
|
|
|
.column {
|
|
display: table-cell;
|
|
padding: 16px;
|
|
}
|
|
|
|
.button--primary {
|
|
margin-top: 25px;
|
|
}
|
|
|
|
.fee-text {
|
|
font-size: 15px;
|
|
margin: 5px;
|
|
}
|
|
|
|
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price,
|
|
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
|
|
color: #000066;
|
|
font-weight: 700;
|
|
line-height: 0px;
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.custom-select {
|
|
position: relative;
|
|
font-family: Arial;
|
|
}
|
|
|
|
.custom-select select {
|
|
display: none;
|
|
}
|
|
|
|
.form-select {
|
|
width: 100%;
|
|
max-width: 327px;
|
|
}
|
|
|
|
.select-selected {
|
|
background-color: #fff;
|
|
color: #000;
|
|
}
|
|
|
|
.select-items div,
|
|
.select-selected {
|
|
color: #000;
|
|
padding: 8px 16px;
|
|
border: 1px solid transparent;
|
|
border-color: #d3d3d3;
|
|
cursor: pointer;
|
|
line-height: 36px;
|
|
}
|
|
|
|
.select-items {
|
|
position: absolute;
|
|
background-color: #fff;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 99;
|
|
border: 1px solid transparent;
|
|
border-color: #d3d3d3;
|
|
}
|
|
|
|
.select-hide {
|
|
display: none;
|
|
}
|
|
|
|
.select-items div:hover,
|
|
.same-as-selected {
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.select-items div {
|
|
color: #fff;
|
|
padding: 8px 16px;
|
|
border: 1px solid transparent;
|
|
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.select-items div:hover {
|
|
background-color: #000066;
|
|
}
|
|
|
|
.woocommerce #content div.product div.images,
|
|
.woocommerce div.product div.images,
|
|
.woocommerce-page #content div.product div.images,
|
|
.woocommerce-page div.product div.images {
|
|
width: 100%;
|
|
float: none;
|
|
}
|
|
|
|
.woocommerce-product-gallery ol li img {
|
|
border: 1px solid darkgray;
|
|
}
|
|
|
|
.woocommerce div.product div.images .flex-control-thumbs {
|
|
text-align: center;
|
|
}
|
|
|
|
.woocommerce div.product div.images .flex-control-thumbs li {
|
|
margin: .5rem;
|
|
width: 85px;
|
|
display: inline-block;
|
|
float: none;
|
|
}
|
|
|
|
.product-title {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.option-heading {
|
|
margin-bottom: 0;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
line-height: 40px;
|
|
color: #505050;
|
|
}
|
|
|
|
.stars {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.stars i {
|
|
color: #ffbb00;
|
|
margin-right: 1px;
|
|
}
|
|
|
|
strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.about-product li {
|
|
line-height: 24px;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
margin-bottom: 0;
|
|
font-weight: 700;
|
|
color: #505050;
|
|
font-size: 1rem !important;
|
|
}
|
|
|
|
.select-selected.select-arrow-active:after {
|
|
border-color: transparent transparent #fff transparent;
|
|
top: 20px;
|
|
}
|
|
|
|
.select-selected::after {
|
|
content: "\f0d7";
|
|
font-family: 'FontAwesome', Verdana;
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
transform: translateY(-50%);
|
|
color: #000;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.col-select,
|
|
.col-button {
|
|
height: 11em !important;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
|
|
var currentProductID = {{ product.id }};
|
|
$(".wearing-style a, .connection-types a, .standardVsAutoAlert a").each(function () {
|
|
var ele = $(this);
|
|
if (ele.data("product-id") == currentProductID || $("h1").text().trim() === $(this).text().trim()) {
|
|
ele.html("<i class='bi bi-circle-fill'></i>" + ele.html());
|
|
} else {
|
|
ele.html("<i class='bi bi-circle'></i>" + ele.html());
|
|
}
|
|
});
|
|
|
|
|
|
var x, i, j, l, ll, selElmnt, a, b, c;
|
|
x = document.getElementsByClassName("custom-select");
|
|
l = x.length;
|
|
for (i = 0; i < l; i++) {
|
|
selElmnt = x[i].getElementsByTagName("select")[0];
|
|
ll = selElmnt.length;
|
|
a = document.createElement("DIV");
|
|
a.setAttribute("class", "select-selected");
|
|
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
|
|
x[i].appendChild(a);
|
|
b = document.createElement("DIV");
|
|
b.setAttribute("class", "select-items select-hide");
|
|
for (j = 0; j < ll; j++) {
|
|
|
|
c = document.createElement("DIV");
|
|
c.innerHTML = selElmnt.options[j].innerHTML;
|
|
c.addEventListener("click", function (e) {
|
|
var y, k, s, h, sl, yl;
|
|
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
|
|
sl = s.length;
|
|
h = this.parentNode.previousSibling;
|
|
for (k = 0; k < sl; k++) {
|
|
if (s.options[k].innerHTML == this.innerHTML) {
|
|
s.selectedIndex = k;
|
|
h.innerHTML = this.innerHTML;
|
|
if (this.innerHTML === "Annually | $19.95" || this.innerHTML === "Annually | $29.95" || this.innerHTML === "Annually | $34.95" || this.innerHTML === "Annually | $39.95") {
|
|
document.getElementById("selected-text").innerHTML = "Includes free shipping and lockbox! ";
|
|
} else if (this.innerHTML === "Semi-Annually | $24.95" || this.innerHTML === "Semi-Annually | $34.95" || this.innerHTML === "Semi-Annually | $44.95" || this.innerHTML === "Semi-Annually | $37.95" || this.innerHTML === "Semi-Annually | $37.95") {
|
|
document.getElementById("selected-text").innerHTML = "Includes free shipping!";
|
|
} else if (this.innerHTML === "Monthly | $27.95" || this.innerHTML === "Monthly | $37.95" || this.innerHTML === "Monthly | $39.95" || this.innerHTML === "Monthly | $47.95" || this.innerHTML === "Monthly | $34.95") {
|
|
document.getElementById("selected-text").innerHTML = "";
|
|
|
|
}
|
|
}
|
|
}
|
|
h.click();
|
|
});
|
|
c.setAttribute("data-price", selElmnt.options[j].getAttribute("data-price"));
|
|
b.appendChild(c);
|
|
}
|
|
x[i].appendChild(b);
|
|
a.addEventListener("click", function (e) {
|
|
e.stopPropagation();
|
|
closeAllSelect(this);
|
|
var items = this.nextElementSibling;
|
|
items.classList.toggle("select-hide");
|
|
this.classList.toggle("select-arrow-active");
|
|
});
|
|
|
|
// Close the dropdown when clicking outside of it
|
|
document.addEventListener("click", function (e) {
|
|
closeAllSelect(null);
|
|
});
|
|
}
|
|
|
|
function closeAllSelect(elmnt) {
|
|
var x = document.getElementsByClassName("select-items");
|
|
var y = document.getElementsByClassName("select-selected");
|
|
for (var i = 0; i < x.length; i++) {
|
|
if (y[i] && (elmnt !== y[i].parentNode)) {
|
|
x[i].classList.add("select-hide");
|
|
y[i].classList.remove("select-arrow-active");
|
|
}
|
|
}
|
|
}
|
|
document.addEventListener("click", closeAllSelect);
|
|
|
|
</script> |