217 lines
9.7 KiB
Smarty
217 lines
9.7 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">
|
|
<p class="option-heading">Select Your System Type:</p>
|
|
{{#each OTGProducts}}
|
|
<a class="me-3" 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-8 col-lg-6 col-md-8 p-3">
|
|
<label for="variation-select">Select a plan:</label>
|
|
<form class="variations_form" method="post" enctype="multipart/form-data">
|
|
<div class="custom-select">
|
|
<select class="select-items select-hide" name="variation_id" id="variation-select">
|
|
{{#each variation}}
|
|
<option value="{{{variation_id}}}">{{{attributes.attribute_rate-plan}}} | {{{price_html}}}</option>
|
|
{{this}}
|
|
{{/each}}
|
|
</select>
|
|
</div>
|
|
<p id="selected-text">Includes free shipping and lockbox! </p>
|
|
<p class="fee-text">{{product.fee_text}}</p>
|
|
</div>
|
|
<div class="col-4 col-lg-6 col-md-4 p-3">
|
|
<button type="submit" class="button--primary ms-2">Buy Now</button>
|
|
</form>
|
|
<p id="selected-price"></p>
|
|
</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 class="col-12 my-5">
|
|
<hr />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- WOOCOMMERCE STYLE OVERRIDES! -->
|
|
<style>
|
|
.connection-types a {color: #505050;text-decoration: none;font-size: 18px;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;}
|
|
.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>
|
|
|
|
{{{ flex-content }}}
|