2001 lines
87 KiB
HTML
2001 lines
87 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Solutry - Secure IT solutions</title>
|
|
|
|
<!--
|
|
- favicon
|
|
-->
|
|
<link rel="shortcut icon" href="favicon.svg" type="image/svg+xml">
|
|
|
|
<!--
|
|
- custom css link
|
|
-->
|
|
<link rel="stylesheet" href="css/style.bundle.css">
|
|
|
|
<!--
|
|
- google font link
|
|
-->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<header class="header" data-header data-v-save-global="index.html,header">
|
|
<div class="container">
|
|
|
|
<div class="navbar-brand logo" data-v-component-site>
|
|
<!-- <a class="navbar-brand" href="/" data-url data-v-url-params='{"host":"www.*.*"}'><span class="visually-hidden">Logo</span> -->
|
|
<a class="navbar-brand h4 mb-0 text-decoration-none" href="/" data-v-site-url>
|
|
<span class="visually-hidden">Logo</span>
|
|
<img src="img/logo.png" alt="Site logo" loading="lazy" class="logo-default" data-v-site-logo>
|
|
<img src="img/logo.png" alt="Site logo sticky" loading="lazy" class="logo-sticky" data-v-site-logo-sticky>
|
|
<img src="img/logo-white.png" alt="Site logo dark" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
|
|
<img src="img/logo-white.png" alt="Site logo dark sticky" loading="lazy" class="logo-default-dark-sticky" data-v-site-logo-dark-sticky>
|
|
</a>
|
|
</div>
|
|
|
|
<button class="nav-toggle-btn" data-nav-toggle-btn>
|
|
<ion-icon name="menu-outline" class="open"></ion-icon>
|
|
<ion-icon name="close-outline" class="close"></ion-icon>
|
|
</button>
|
|
|
|
<nav class="navbar" data-navbar data-v-component-menu="header" data-v-slug="main-menu">
|
|
<div class="container">
|
|
<ul class="navbar-list m-0" data-v-menu-items>
|
|
<li class="nav-item dropdown position-static" data-v-menu-item data-v-class-if-has-dropdown="category.children > 0" data-v-class-if-position-static="category.has-text">
|
|
|
|
<a class="navbar-link dropdown-toggle" data-v-class-if-dropdown-toggle="category.children > 0" data-v-class-if-active="category.active" aria-expanded="false" data-v-menu-item-url>
|
|
<span data-v-menu-item-name data-v-if-not="category.type = 'text' && category.name"></span>
|
|
<span data-v-if="category.content" data-v-menu-item-content>
|
|
<p>
|
|
<img src="/media/vvveb.svg" height="24" alt="" class="me-2">Mega menu
|
|
</p>
|
|
</span>
|
|
</a>
|
|
|
|
<div class="dropdown-menu" data-v-menu-item-recursive>
|
|
<div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
|
|
<a class="dropdown-item" data-v-class-if-active="category.active && category.type != 'text'" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
|
|
<span data-v-menu-item-name data-v-if-not="category.type = 'text'"></span>
|
|
<span data-v-if="category.content" data-v-menu-item-content>
|
|
<div class="row">
|
|
<div class="col-6 align-self-center">
|
|
<img src="img/demo/video-1.webp" alt="Post" width="250" loading="lazy" class="rounded img-fluid">
|
|
</div>
|
|
<div class="col-6">
|
|
<h4>Features</h4>
|
|
<p class="text-muted">Just a few mentions, but there is more</p>
|
|
<ul class="list-unstyled">
|
|
<li class="text-primary">Page builder</li>
|
|
<li class="text-primary">Mega menu</li>
|
|
<li class="text-primary">Multi language</li>
|
|
<li class="text-primary">Advanced SEO</li>
|
|
<li class="text-primary">Ecommerce</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
|
|
<a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-class-if-active="category.active" data-v-menu-item-url>
|
|
<span data-v-menu-item-name data-v-if-not="category.type = 'text'">Developer Documentation</span>
|
|
<span data-v-menu-item-content></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item dropdown" data-v-menu-item>
|
|
<a class="navbar-link dropdown-toggle" href="https://blog.vvveb.com" data-v-menu-item-url>
|
|
<span data-v-menu-item-name>Blog</span>
|
|
</a>
|
|
|
|
<div class="dropdown-menu" data-v-menu-item-recursive>
|
|
<div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
|
|
<a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
|
|
<span data-v-menu-item-name data-v-if-not="category.type = 'text'">User Documentation</span>
|
|
<span data-v-menu-item-content></span>
|
|
</a>
|
|
</div>
|
|
<div data-v-menu-item class="nav-item" data-v-class-if-dropdown="category.children > 0">
|
|
<a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
|
|
<span data-v-menu-item-name data-v-if-not="category.type = 'text'">Developer Documentation</span>
|
|
<span data-v-menu-item-content></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item" data-v-menu-item>
|
|
<a class="navbar-link" href="https://www.vvveb.com/page/contact" data-v-menu-item-url>
|
|
<span data-v-menu-item-name>Contact</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item" data-v-menu-item>
|
|
<a class="navbar-link" href="https://www.vvveb.com" data-v-menu-item-url>
|
|
<span data-v-menu-item-name>About us</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<a class="btn btn-secondary" href="/page/contact">
|
|
<span>Get Started</span>
|
|
|
|
<ion-icon name="chevron-forward-outline"></ion-icon>
|
|
</a>
|
|
|
|
</div>
|
|
</header>
|
|
|
|
<main id="site-content" role="main">
|
|
<div class="container product" data-v-component-product data-v-product_variant_id="url">
|
|
|
|
<nav aria-label="breadcrumb" class="text-muted text-small" data-v-component-breadcrumb>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item" data-v-breadcrumb-item>
|
|
<a data-v-breadcrumb-item-url data-v-if="breadcrumb.url">
|
|
<span data-v-breadcrumb-item-text>Home</span>
|
|
</a>
|
|
<span data-v-breadcrumb-item-text data-v-if-not="breadcrumb.url">Home</span>
|
|
</li>
|
|
<li class="breadcrumb-item" data-v-breadcrumb-item>
|
|
<a data-v-breadcrumb-item-url data-v-if="breadcrumb.url">
|
|
<span data-v-breadcrumb-item-text>Library</span>
|
|
</a>
|
|
<span data-v-breadcrumb-item-text data-v-if-not="breadcrumb.url">Library</span>
|
|
</li>
|
|
<li class="breadcrumb-item active" aria-current="page" data-v-breadcrumb-item>
|
|
<span>Data</span>
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<div class="row g-5 mb-4">
|
|
<div class="col-lg-8 col-md-6 col-sm-12">
|
|
|
|
<div id="product-gallery" class="carousel slide" data-bs-ride="carousel" data-bs-touch="true" data-v-product-images>
|
|
<div class="carousel-inner">
|
|
<div class="carousel-item active">
|
|
<div data-v-class-if-zoom="product.image" data-v-product-main-image-background-image>
|
|
<img src="demo/img/product.webp" loading="lazy" class="d-block w-100" alt="" data-v-if="product.image" data-v-product-main-image>
|
|
<img src="demo/img/video-1.webp" class="d-block w-100 bg-body-tertiary" loading="lazy" alt="" data-v-if-not="product.image" />
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item" data-v-product-image>
|
|
<div class="zoom" data-v-product-image-background-image>
|
|
<img src="demo/img/product.webp" loading="lazy" class="d-block w-100" alt="" data-v-product-image-src>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item" data-v-product-image>
|
|
<div class="zoom" data-v-product-image-background-image>
|
|
<img src="demo/img/product-2.webp" loading="lazy" class="d-block w-100" alt="" data-v-product-image-src>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#product-gallery" data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#product-gallery" data-bs-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="carousel">
|
|
|
|
<div class="carousel-thumbs" data-v-product-images>
|
|
<button type="button" data-bs-target="#product-gallery" class="img-thumbnail" data-bs-slide-to="0">
|
|
<img src="" alt="" class="d-block w-100" loading="lazy" data-v-product-main-image>
|
|
</button>
|
|
<button type="button" data-bs-target="#product-gallery" class="img-thumbnail" data-bs-slide-to="1" data-v-product-image>
|
|
<img src="" alt="" class="d-block w-100" loading="lazy" data-v-product-image-src>
|
|
</button>
|
|
<button type="button" data-bs-target="#product-gallery" class="img-thumbnail" data-bs-slide-to="2" data-v-product-image>
|
|
<img src="" alt="" class="d-block w-100" loading="lazy" data-v-product-image-src>
|
|
</button>
|
|
<button type="button" data-bs-target="#product-gallery" class="img-thumbnail" data-bs-slide-to="3" data-v-product-image>
|
|
<img src="" alt="" class="d-block w-100" loading="lazy" data-v-product-image-src>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6 col-sm-12 p-4" id="product">
|
|
<h1 class="product-name mb-2" data-v-product-name>One Shoulder Glitter Midi Dress</h1>
|
|
|
|
<div data-v-if="product.manufacturer_id">
|
|
<span class="text-muted">Manufacturer</span>
|
|
<a data-v-product-manufacturer_url>
|
|
<span data-v-product-manufacturer_name>mango</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div data-v-if="product.vendor_id">
|
|
<span class="text-muted">Vendor</span>
|
|
<a data-v-product-vendor_url>
|
|
<span data-v-product-vendor_name>mango</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div>
|
|
<span class="text-muted">Availability</span>
|
|
<span data-v-product-stock_status_name>In stock</span>
|
|
</div>
|
|
|
|
<div data-v-if="product.stock_quantity < 1">
|
|
<span class="text-muted">Stock</span>
|
|
<span class="badge text-bg-danger">Out of stock</span>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="my-2">
|
|
<small class="text-secondary" data-v-if="product.rating">
|
|
<i class="la la-star" data-v-class-if-text-warning="product.rating >= 1"></i>
|
|
<i class="la la-star" data-v-class-if-text-warning="product.rating >= 2"></i>
|
|
<i class="la la-star" data-v-class-if-text-warning="product.rating >= 3"></i>
|
|
<i class="la la-star" data-v-class-if-text-warning="product.rating >= 4"></i>
|
|
<i class="la la-star" data-v-class-if-text-warning="product.rating >= 5"></i>
|
|
<!-- <i class="la la-star-half"></i> -->
|
|
</small>
|
|
<a href="#reviews" data-v-if="product.reviews" class="ms-2" type="button" data-bs-target="#reviews">(<span data-v-product-reviews>no</span> reviews)</a>
|
|
</div>
|
|
|
|
|
|
<p class="product-price" data-v-if="product.promotion">
|
|
<span class="price" data-v-product-promotion_tax_formatted>$49.00</span>
|
|
|
|
<span class="text-decoration-line-through text-secondary text-opacity-75" data-v-product-price_tax_formatted>$350</span>
|
|
<small class="fs-6 ms-2 text-danger">
|
|
<span data-v-product-promotion_discount>30</span>% Off
|
|
</small>
|
|
</p>
|
|
|
|
<p class="product-price" data-v-if-not="product.promotion">
|
|
<span class="price old-price" data-v-if="product.old_price > 0" data-v-product-old_price_tax_formatted>$100.00</span>
|
|
<span class="price" data-v-if="product.price > 0" data-v-product-price_tax_formatted>$49.00</span>
|
|
<span class="badge text-bg-secondary on-sale mx-1 align-text-bottom" data-v-class-if-d-none="product.old_price <= 0">Sale</span>
|
|
</p>
|
|
|
|
|
|
<span class="muted small">
|
|
<span>Excluding taxes:</span>
|
|
<span data-v-product-price_formatted>$49.00</span>
|
|
</span>
|
|
|
|
<!--
|
|
<p class="product-price fs-3">
|
|
<span class="old-price text-muted text-small align-middle text-decoration-line-through" data-v-product-price-discount>$65.00</span>
|
|
<span class="old-currency text-muted text-small align-middle text-decoration-line-through">$</span>
|
|
<span class="price fw-bold" data-v-product-price_tax>$49.00</span>
|
|
<span class="currency">$</span>
|
|
</p>
|
|
-->
|
|
|
|
<!-- Form -->
|
|
|
|
<div id="variants" class="product-variants" data-v-component-product-variants>
|
|
<!--
|
|
<div data-v-if="count > 0">
|
|
<hr class="border opacity-50">
|
|
|
|
<h6>Available Options</h6>
|
|
|
|
<div class="form-group image" data-v-option>
|
|
<label class="form-label" data-v-option-name>Color</label>
|
|
|
|
<div data-v-if="option.type = 'radio'">
|
|
<div class="radio" data-v-value>
|
|
<label>
|
|
<input type="radio" name="option[1]" value="1" data-v-value-input>
|
|
<div>
|
|
<img src="demo/img/blue.gif" alt="Blue" data-v-if="value.image" data-v-value-image>
|
|
<span data-v-value-name>Blue</span>
|
|
<span data-v-if="value.price > 0">
|
|
(<span data-v-value-price_formatted>+$50</span>)
|
|
</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<div class="radio" data-v-value>
|
|
<label>
|
|
<input type="radio" name="option[1]" value="2" data-v-value-input>
|
|
<div>
|
|
<img src="demo/img/green.gif" alt="Green" data-v-if="value.image" data-v-value-image>
|
|
<span data-v-value-name>Green</span>
|
|
<span data-v-if="value.price > 0">
|
|
(<span data-v-value-price_formatted>+$50</span>)
|
|
</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<div class="radio" data-v-value>
|
|
<label>
|
|
<input type="radio" name="option[1]" value="3" data-v-value-input>
|
|
<div>
|
|
<img src="demo/img/navy.gif" alt="Navy" data-v-if="value.image" data-v-value-image>
|
|
<span data-v-value-name>Navy</span>
|
|
<span data-v-if="value.price > 0">
|
|
(<span data-v-value-price_formatted>+$50</span>)
|
|
</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-v-if="option.type = 'checkbox'">
|
|
<div class="checkbox mb-2" data-v-value>
|
|
<label class="form-check-label form-control">
|
|
<div class="form-check">
|
|
<input type="checkbox" class="form-check-input" name="option[2]" value="1" data-v-value-input>
|
|
<img src="demo/img/blue.gif" height="32" alt="Blue" data-v-if="value.image" data-v-value-image>
|
|
<span data-v-value-name>Blue</span>
|
|
<span data-v-if="value.price > 0">
|
|
(<span data-v-value-price_formatted>+$50</span>)
|
|
</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<div class="checkbox mb-2" data-v-value>
|
|
<label class="form-check-label form-control">
|
|
<div>
|
|
<input type="checkbox" class="form-check-input" name="option[2]" value="2" data-v-value-input>
|
|
<img src="demo/img/green.gif" height="32" alt="Green" data-v-if="value.image" data-v-value-image>
|
|
<span data-v-value-name>Green</span>
|
|
<span data-v-if="value.price > 0">
|
|
(<span data-v-value-price_formatted>+$50</span>)
|
|
</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<div class="checkbox mb-2" data-v-value>
|
|
<label class="form-check-label form-control">
|
|
<div>
|
|
<input type="checkbox" class="form-check-input" name="option[2]" value="3" data-v-value-input>
|
|
<img src="demo/img/navy.gif" height="32" alt="Navy" data-v-if="value.image" data-v-value-image>
|
|
<span data-v-value-name>Navy</span>
|
|
<span data-v-if="value.price > 0">
|
|
(<span data-v-value-price_formatted>+$50</span>)
|
|
</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-v-if="option.type = 'select'">
|
|
<select class="form-select" data-v-option-input>
|
|
<option value="" data-v-value>Option 1</option>
|
|
<option value="" data-v-value>Option 2</option>
|
|
<option value="" data-v-value>Option 3</option>
|
|
</select>
|
|
</div>
|
|
|
|
|
|
<div data-v-if="option.type = 'text'">
|
|
<input type="text" class="form-control" name="option[1]" value="" data-v-option-input>
|
|
</div>
|
|
|
|
<div data-v-if="option.type = 'number'">
|
|
<input type="number" class="form-control" name="option[1]" value="" data-v-option-input>
|
|
</div>
|
|
|
|
<div data-v-if="option.type = 'email'">
|
|
<input type="email" class="form-control" name="option[1]" value="" data-v-option-input>
|
|
</div>
|
|
|
|
<div data-v-if="option.type = 'textarea'">
|
|
<textarea class="form-control" name="option[1]" data-v-option-input></textarea>
|
|
</div>
|
|
|
|
<div data-v-if="option.type = 'file'">
|
|
<input type="file" class="form-control" name="option[1]" value="" data-v-option-input>
|
|
</div>
|
|
|
|
<div data-v-if="option.type = 'date'">
|
|
<input type="date" class="form-control" name="option[1]" value="" data-v-option-input>
|
|
</div>
|
|
|
|
<div data-v-if="option.type = 'time'">
|
|
<input type="time" class="form-control" name="option[1]" value="" data-v-option-input>
|
|
</div>
|
|
|
|
<div data-v-if="option.type = 'datetime'">
|
|
<input type="datetime-local" class="form-control" name="option[1]" value="" data-v-option-input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group" data-v-option>
|
|
<label class="form-label">Size</label>
|
|
|
|
<div>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name="option[240]" value="62">
|
|
<div>XS</div>
|
|
</label>
|
|
</div>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name="option[240]" value="60">
|
|
<div>M</div>
|
|
</label>
|
|
</div>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name="option[240]" value="63">
|
|
<div>L</div>
|
|
</label>
|
|
</div>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name="option[240]" value="61">
|
|
<div>XL</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
-->
|
|
<script>
|
|
delete productVariants;
|
|
var productVariants = {$variants}
|
|
</script>
|
|
</div>
|
|
|
|
|
|
<form class="cart-form clearfix" method="post" action="/cart">
|
|
|
|
<div class="cart-fav-box ">
|
|
<!-- Cart -->
|
|
<!-- button type="submit" name="addtocart" value="5" class="btn btn-primary" data-v-product-id data-v-vvveb-action="addToCart">Add to cart</button -->
|
|
|
|
<input type="hidden" name="product_id" value="" data-v-product-product_id>
|
|
<input type="hidden" name="product_variant_id" value="">
|
|
|
|
<div>
|
|
<div id="product-options" class="product-options mt-4" data-v-component-product-options data-v-product_variant_id="url">
|
|
<div data-v-if="count > 0">
|
|
<hr class="border opacity-50">
|
|
|
|
<h6>Available Options</h6>
|
|
|
|
<div class="form-group image" data-v-option>
|
|
<label class="form-label small text-muted" data-v-option-name>Color</label>
|
|
|
|
<div data-v-if="option.type = 'radio'">
|
|
<div class="radio" data-v-value>
|
|
<label>
|
|
<input type="radio" name="option[1]" value="1" data-v-value-input>
|
|
<div>
|
|
<img src="demo/img/blue.gif" alt="Blue" data-v-if="value.image" data-v-value-image>
|
|
<span data-v-value-name>Blue</span>
|
|
<span data-v-if="value.price > 0">
|
|
(<span data-v-value-price_formatted>+$50</span>)
|
|
</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<div class="radio" data-v-value>
|
|
<label>
|
|
<input type="radio" name="option[1]" value="2" data-v-value-input>
|
|
<div>
|
|
<img src="demo/img/green.gif" alt="Green" data-v-if="value.image" data-v-value-image>
|
|
<span data-v-value-name>Green</span>
|
|
<span data-v-if="value.price > 0">
|
|
(<span data-v-value-price_formatted>+$50</span>)
|
|
</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<div class="radio" data-v-value>
|
|
<label>
|
|
<input type="radio" name="option[1]" value="3" data-v-value-input>
|
|
<div>
|
|
<img src="demo/img/navy.gif" alt="Navy" data-v-if="value.image" data-v-value-image>
|
|
<span data-v-value-name>Navy</span>
|
|
<span data-v-if="value.price > 0">
|
|
(<span data-v-value-price_formatted>+$50</span>)
|
|
</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-v-if="option.type = 'checkbox'">
|
|
<div class="checkbox mb-2" data-v-value>
|
|
<label class="form-check-label form-control">
|
|
<div class="form-check">
|
|
<input type="checkbox" class="form-check-input" name="option[2]" value="1" data-v-value-input>
|
|
<img src="demo/img/blue.gif" height="32" alt="Blue" data-v-if="value.image" data-v-value-image>
|
|
<span data-v-value-name>Blue</span>
|
|
<span data-v-if="value.price > 0">
|
|
(<span data-v-value-price_formatted>+$50</span>)
|
|
</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<div class="checkbox mb-2" data-v-value>
|
|
<label class="form-check-label form-control">
|
|
<div>
|
|
<input type="checkbox" class="form-check-input" name="option[2]" value="2" data-v-value-input>
|
|
<img src="demo/img/green.gif" height="32" alt="Green" data-v-if="value.image" data-v-value-image>
|
|
<span data-v-value-name>Green</span>
|
|
<span data-v-if="value.price > 0">
|
|
(<span data-v-value-price_formatted>+$50</span>)
|
|
</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<div class="checkbox mb-2" data-v-value>
|
|
<label class="form-check-label form-control">
|
|
<div>
|
|
<input type="checkbox" class="form-check-input" name="option[2]" value="3" data-v-value-input>
|
|
<img src="demo/img/navy.gif" height="32" alt="Navy" data-v-if="value.image" data-v-value-image>
|
|
<span data-v-value-name>Navy</span>
|
|
<span data-v-if="value.price > 0">
|
|
(<span data-v-value-price_formatted>+$50</span>)
|
|
</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-v-if="option.type = 'select'">
|
|
<select class="form-select" data-v-option-input>
|
|
<option value="" data-v-value>Option 1</option>
|
|
<option value="" data-v-value>Option 2</option>
|
|
<option value="" data-v-value>Option 3</option>
|
|
</select>
|
|
</div>
|
|
|
|
|
|
<div data-v-if="option.type = 'text'">
|
|
<input type="text" class="form-control" name="option[1]" value="" data-v-option-input>
|
|
</div>
|
|
|
|
<div data-v-if="option.type = 'number'">
|
|
<input type="number" class="form-control" name="option[1]" value="" data-v-option-input>
|
|
</div>
|
|
|
|
<div data-v-if="option.type = 'email'">
|
|
<input type="email" class="form-control" name="option[1]" value="" data-v-option-input>
|
|
</div>
|
|
|
|
<div data-v-if="option.type = 'textarea'">
|
|
<textarea class="form-control" name="option[1]" data-v-option-input></textarea>
|
|
</div>
|
|
|
|
<div data-v-if="option.type = 'file'">
|
|
<input type="file" class="form-control" name="option[1]" value="" data-v-option-input>
|
|
</div>
|
|
|
|
<div data-v-if="option.type = 'date'">
|
|
<input type="date" class="form-control" name="option[1]" value="" data-v-option-input>
|
|
</div>
|
|
|
|
<div data-v-if="option.type = 'time'">
|
|
<input type="time" class="form-control" name="option[1]" value="" data-v-option-input>
|
|
</div>
|
|
|
|
<div data-v-if="option.type = 'datetime'">
|
|
<input type="datetime-local" class="form-control" name="option[1]" value="" data-v-option-input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group" data-v-option>
|
|
<label class="form-label">Size</label>
|
|
|
|
<div>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name="option[240]" value="62">
|
|
<div>XS</div>
|
|
</label>
|
|
</div>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name="option[240]" value="60">
|
|
<div>M</div>
|
|
</label>
|
|
</div>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name="option[240]" value="63">
|
|
<div>L</div>
|
|
</label>
|
|
</div>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name="option[240]" value="61">
|
|
<div>XL</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
delete productOptions;
|
|
var productOptions = {$options}
|
|
</script>
|
|
|
|
|
|
<div id="subscriptions" class="product-subscriptions mt-4" data-v-component-product-subscriptions>
|
|
<div data-v-if="count > 0">
|
|
|
|
<div class="card">
|
|
<!-- one time purchase -->
|
|
<div class="card-header bg-body" data-v-if="product.subscription_onetime">
|
|
<div class="form-check form-check-inline radio">
|
|
<label class="form-check-label">
|
|
<input class="form-check-input" type="radio" name="subscription_plan_id" required value="0">
|
|
<!-- <span data-v-subscription-name>Subscription name</span> -->
|
|
<span>One time purchase</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<label class="card-header bg-body" data-v-if="count > 0" data-v-if-not="product.subscription_onetime">Subscription</label>
|
|
<!--/ one time purchase -->
|
|
|
|
<div class="card-body">
|
|
<label class="mb-3" data-v-if="product.subscription_onetime">Subscription</label>
|
|
<div class="form-check form-check-inline radio mb-2" data-v-subscription>
|
|
<label class="form-check-label">
|
|
<input class="form-check-input" type="radio" name="subscription_plan_id" required data-v-subscription-subscription_plan_id>
|
|
<!-- <span data-v-subscription-name>Subscription name</span> -->
|
|
<span data-v-subscription-content>Subscription description</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="my-3 small">
|
|
<div>Auto-renews, skip or cancel anytime.</div>
|
|
<a class="link-secondary text-decoration-underline" href="/page/subscription-policy" target="_blank">View subscription policy</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<hr class="border opacity-50">
|
|
|
|
<div class="form-group">
|
|
|
|
<div class="mt-4 d-inline-block">
|
|
<!--
|
|
|
|
<label class="form-label" for="input-quantity">Qty</label>
|
|
|
|
-->
|
|
<div class="quantity mb-2">
|
|
<div class="input-group spinner">
|
|
<button class="btn btn-minus" type="button">
|
|
<i class="la la-minus"></i>
|
|
</button>
|
|
<input type="number" name="quantity" value="1" size="1" min="{$product.minimum_quantity}" max="{$product.stock_quantity}" id="input-quantity" class="form-control">
|
|
<button class="btn btn-plus" type="button">
|
|
<i class="la la-plus"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button data-v-attr-if-disabled="product.stock_quantity < 1" type="submit" formaction="/cart/1" id="button-cart" class="btn btn-primary btn-shadow w-100 button-cart" data-v-vvveb-action="addToCart" data-v-product-add_cart_url>
|
|
|
|
<span class="loading d-none">
|
|
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
|
|
</span>
|
|
<span>Add to cart</span>...
|
|
</span>
|
|
|
|
<span class="button-text">
|
|
<i class="la la-shopping-bag la-lg me-2"></i>
|
|
<span>Add to cart</span>
|
|
</span>
|
|
|
|
</button>
|
|
|
|
<button data-v-attr-if-disabled="product.stock_quantity < 1" type="submit" formaction="/checkout/1" id="buynow" class="btn btn-light btn-shadow border w-100 w-100 buynow" data-v-product-buy_url>
|
|
|
|
<span class="loading d-none">
|
|
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
|
|
</span>
|
|
<span>Add to cart</span>...
|
|
</span>
|
|
|
|
<span class="button-text">
|
|
<span>Buy now</span>
|
|
<i class="la la-arrow-right la-lg ms-2"></i>
|
|
</span>
|
|
|
|
</button>
|
|
</div>
|
|
|
|
<div class="product_wish_compare mt-4">
|
|
<a href="/wishlist/1" class="btn btn-sm btn-outline-secondary border-0" title="Add to wish list" data-v-vvveb-action="addToWishlist" data-v-product-add_wishlist_url>
|
|
<i class="la la-heart"></i>
|
|
<span>Add to Wish List</span>
|
|
</a>
|
|
<a href="/compare/1" class="btn btn-sm btn-outline-secondary border-0" title="Compare product" data-v-vvveb-action="addToCompare" data-v-product-add_compare_url>
|
|
<i class="la la-random"></i>
|
|
<span>Compare product</span>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="nav nav-tabs nav-scroll bg-body sticky-top mt-5" id="productTabs" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link active" id="description-tab" data-bs-target="#description" href="#description" type="button" role="tab" aria-controls="description" aria-selected="true">
|
|
Description
|
|
</a>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" id="specifications-tab" data-bs-target="#specifications" href="#specifications" type="button" role="tab" aria-controls="specifications" aria-selected="false">
|
|
Specifications
|
|
</a>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" id="reviews-tab" data-bs-target="#reviews" href="#reviews" type="button" role="tab" aria-controls="reviews" aria-selected="false">
|
|
Reviews
|
|
</a>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" id="questions-tab" data-bs-target="#questions" href="#questions" type="button" role="tab" aria-controls="questions" aria-selected="false">
|
|
Questions & Answers
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content nav-scroll" id="productTabsContent" data-bs-spy="scroll" data-bs-target="#productTabs" data-bs-root-margin="0px 0px -20%" data-bs-smooth-scroll="false">
|
|
|
|
<div class="tab-pane show active" id="description" role="tabpanel" aria-labelledby="description-tab" tabindex="0">
|
|
|
|
<h4>Description</h4>
|
|
|
|
<div class="description" data-v-product-content>
|
|
|
|
<p>All in the world know the beauty of the beautiful, and in doing this they have (the idea of) what ugliness is; they all know the skill of the skilful, and in doing this they have (the idea of) what the want of skill is.</p>
|
|
|
|
<p>So it is that existence and nonexistence give birth the one to (the idea of) the other; that difficulty and ease produce the one (the idea of) the other; that length and shortness fashion out the one the figure of the other; that (the ideas of) height and lowness arise from the contrast of the one with the other; that the musical notes and tones become harmonious through the relation of one with another; and that being before and behind give the idea of one following another.</p>
|
|
|
|
<p>Therefore the sage manages affairs without doing anything, and conveys his instructions without the use of speech.</p>
|
|
|
|
<p>All things spring up, and there is not one which declines to show itself; they grow, and there is no claim made for their ownership; they go through their processes, and there is no expectation (of a reward for the results). The work is accomplished, and there is no resting in it (as an achievement).</p>
|
|
|
|
<blockquote>
|
|
<p>
|
|
<span>The work is done, but how no one can see;</span>
|
|
<br>
|
|
<span>`This this that makes the power not cease to be.</span>
|
|
</p>
|
|
</blockquote>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="tab-pane" id="specifications" role="tabpanel" aria-labelledby="specifications-tab" tabindex="0">
|
|
<div id="specifications" class="product-specifications mt-4" data-v-component-product-attributes>
|
|
<h4>Specifications</h4>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered">
|
|
<tbody data-v-attributes>
|
|
<tr data-v-group>
|
|
<td colspan="2">
|
|
<strong data-v-attribute-group>Processor</strong>
|
|
</td>
|
|
</tr>
|
|
<tr data-v-attribute>
|
|
<td data-v-attribute-name>Number of cores</td>
|
|
<td data-v-attribute-value>16</td>
|
|
</tr>
|
|
<tr data-v-attribute>
|
|
<td data-v-attribute-name>Frequency</td>
|
|
<td data-v-attribute-value>3.6 GHZ</td>
|
|
</tr>
|
|
<tr data-v-attribute>
|
|
<td data-v-attribute-name>TDP</td>
|
|
<td data-v-attribute-value>65 W</td>
|
|
</tr>
|
|
<tr data-v-attribute>
|
|
<td data-v-attribute-name>Lithography</td>
|
|
<td data-v-attribute-value>7 nm</td>
|
|
</tr>
|
|
<tr data-v-attribute>
|
|
<td data-v-attribute-name>L2 Cache</td>
|
|
<td data-v-attribute-value>3 MB</td>
|
|
</tr>
|
|
<tr data-v-attribute>
|
|
<td data-v-attribute-name>L3 Cache</td>
|
|
<td data-v-attribute-value>32 MB</td>
|
|
</tr>
|
|
<tr data-v-group>
|
|
<td colspan="2">
|
|
<strong data-v-attribute-group>Memory</strong>
|
|
</td>
|
|
</tr>
|
|
<tr data-v-attribute>
|
|
<td data-v-attribute-name>Type</td>
|
|
<td data-v-attribute-value>DDR4</td>
|
|
</tr>
|
|
<tr data-v-attribute>
|
|
<td data-v-attribute-name>Capacity</td>
|
|
<td data-v-attribute-value>32 GB</td>
|
|
</tr>
|
|
<tr data-v-attribute>
|
|
<td data-v-attribute-name>Frequency</td>
|
|
<td data-v-attribute-value>1600 MHZ</td>
|
|
</tr>
|
|
<tr data-v-attribute>
|
|
<td data-v-attribute-name>Latency</td>
|
|
<td data-v-attribute-value>9 CL</td>
|
|
</tr>
|
|
<tr data-v-attribute>
|
|
<td data-v-attribute-name>Voltage</td>
|
|
<td data-v-attribute-value>1,5 V</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="tab-pane" id="reviews" role="tabpanel" aria-labelledby="reviews-tab" tabindex="0">
|
|
<div class="product-reviews mt-4" data-v-component-reviews>
|
|
<h4>Reviews</h4>
|
|
|
|
<div data-v-if="count > 0">
|
|
<div class="row border-top border-bottom py-4">
|
|
<!--
|
|
<div class="col-sm-2">
|
|
<div class="rating-block text-center">
|
|
<h2 class="text-muted mb-0" data-v-reviews-rating>4.3</h2>
|
|
<div class="fs-3">
|
|
<i class="la la-star" data-v-class-if-text-warning="product_review.rating >= 1"></i>
|
|
<i class="la la-star" data-v-class-if-text-warning="product_review.rating >= 2"></i>
|
|
<i class="la la-star" data-v-class-if-text-warning="product_review.rating >= 3"></i>
|
|
<i class="la la-star" data-v-class-if-text-warning="product_review.rating >= 4"></i>
|
|
<i class="la la-star" data-v-class-if-text-warning="product_review.rating >= 5"></i>
|
|
</div>
|
|
|
|
<h6 class=""><span data-v-reviews-count>15</span> reviews</h6>
|
|
</div>
|
|
</div>
|
|
-->
|
|
<div class="col-sm-6">
|
|
|
|
<div class="d-flex">
|
|
<div class="text-center">
|
|
<span class="display-4 fw-semibold" data-v-reviews-rating>3.1</span>
|
|
<br>
|
|
<div class="fs-3">
|
|
<i class="la la-star" data-v-class-if-text-warning="product_review.rating >= 1"></i>
|
|
<i class="la la-star" data-v-class-if-text-warning="product_review.rating >= 2"></i>
|
|
<i class="la la-star" data-v-class-if-text-warning="product_review.rating >= 3"></i>
|
|
<i class="la la-star" data-v-class-if-text-warning="product_review.rating >= 4"></i>
|
|
<i class="la la-star" data-v-class-if-text-warning="product_review.rating >= 5"></i>
|
|
</div>
|
|
<span class="text-black-50">
|
|
<span data-v-reviews-count>15</span> reviews
|
|
</span>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<div class="row align-items-center">
|
|
<div class="col-4 text-end text-secondary">
|
|
<i class="la la-star"></i>
|
|
<i class="la la-star"></i>
|
|
<i class="la la-star"></i>
|
|
<i class="la la-star"></i>
|
|
<i class="la la-star"></i>
|
|
<span class="text-muted">(<span class="" data-v-summary-five></span>)</span>
|
|
</div>
|
|
<div class="col-8">
|
|
<div class="progress" style="height: 2px;">
|
|
<div class="progress-bar" role="progressbar" data-v-summary-five-width aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center">
|
|
<div class="col-4 text-end text-secondary">
|
|
<i class="la la-star"></i>
|
|
<i class="la la-star"></i>
|
|
<i class="la la-star"></i>
|
|
<i class="la la-star"></i>
|
|
<span class="text-muted">(<span class="" data-v-summary-four></span>)</span>
|
|
</div>
|
|
<div class="col-8">
|
|
<div class="progress" style="height: 2px;">
|
|
<div class="progress-bar" role="progressbar" data-v-summary-four-width aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center">
|
|
<div class="col-4 text-end text-secondary">
|
|
<i class="la la-star"></i>
|
|
<i class="la la-star"></i>
|
|
<i class="la la-star"></i>
|
|
<span class="text-muted">(<span class="" data-v-summary-three></span>)</span>
|
|
</div>
|
|
<div class="col-8">
|
|
<div class="progress" style="height: 2px;">
|
|
<div class="progress-bar" role="progressbar" data-v-summary-three-width aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center">
|
|
<div class="col-4 text-end text-secondary">
|
|
<i class="la la-star"></i>
|
|
<i class="la la-star"></i>
|
|
<span class="text-muted">(<span class="" data-v-summary-two></span>)</span>
|
|
</div>
|
|
<div class="col-8">
|
|
<div class="progress" style="height: 2px;">
|
|
<div class="progress-bar" role="progressbar" data-v-summary-two-width aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center">
|
|
<div class="col-4 text-end text-secondary">
|
|
<i class="la la-star"></i>
|
|
<span class="text-muted">(<span class="" data-v-summary-one></span>)</span>
|
|
</div>
|
|
<div class="col-8">
|
|
<div class="progress" style="height: 2px;">
|
|
<div class="progress-bar" role="progressbar" data-v-summary-one-width aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col" data-v-if="product_review.buyers > 0">
|
|
<div class="rating-block text-center">
|
|
<i class="la la-check-circle text-success fs-1"></i>
|
|
<div class="">
|
|
<span data-v-reviews-buyers>5</span> reviews from buyers
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col" data-v-if="product_review.recommendations > 0">
|
|
<div class="rating-block text-center">
|
|
<i class="la la-thumbs-up text-primary fs-1"></i>
|
|
<div class="">
|
|
<span data-v-reviews-recommendations>100</span>% recommendations
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="border-bottom py-4">
|
|
<h6>User contributed images</h6>
|
|
|
|
<div class="">
|
|
<div class="d-inline-block" data-v-image>
|
|
<a href="/product/product-fifteen" title="Product 15" data-toggle="lightbox" data-gallery="review-gallery" data-v-image-src>
|
|
<img src="/image-cache/product/5-1-150x0.webp" alt="" class="img-thumbnail m-1" loading="lazy" data-v-thumb-src>
|
|
|
|
</a>
|
|
</div>
|
|
<div class="d-inline-block" data-v-image>
|
|
<a href="/product/product-fifteen" title="Product 15" data-toggle="lightbox" data-gallery="review-gallery" data-v-image-src>
|
|
<img src="/image-cache/product/4-1-150x0.webp" alt="" class="img-thumbnail m-1" loading="lazy" data-v-thumb-src>
|
|
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ol class="review-list list-unstyled my-3">
|
|
<li class="review mb-4" data-v-review>
|
|
|
|
<div class="review-wrap d-flex ">
|
|
|
|
<figure class="author-avatar me-2">
|
|
<img src="demo/img/sections/team/1.webp" alt="user" width="60" data-v-review-avatar_url loading="lazy" data-v-if="review.avatar">
|
|
</figure>
|
|
|
|
<div class="review-author">
|
|
|
|
<div class="review-author">
|
|
<a rel="external nofollow ugc" data-v-if="review.url">
|
|
<span data-v-review-author>Maria Williams</span>
|
|
</a>
|
|
<span data-v-review-author data-v-if-not="review.url">Maria Williams</span>
|
|
</div>
|
|
|
|
<div class="d-inline-block">
|
|
<small class="text-secondary" data-v-if="product.rating">
|
|
<i class="la la-star" data-v-class-if-text-warning="review.rating >= 1"></i>
|
|
<i class="la la-star" data-v-class-if-text-warning="review.rating >= 2"></i>
|
|
<i class="la la-star" data-v-class-if-text-warning="review.rating >= 3"></i>
|
|
<i class="la la-star" data-v-class-if-text-warning="review.rating >= 4"></i>
|
|
<i class="la la-star" data-v-class-if-text-warning="review.rating >= 5"></i>
|
|
<!-- <i class="la la-star-half"></i> -->
|
|
</small>
|
|
</div>
|
|
|
|
<div class="review-meta text-small text-muted d-inline-block">
|
|
<span data-v-review-created_at data-filter-friendly_date>Jan 29, 2018</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="my-2" data-v-review-content>
|
|
<p>Consectetur adipiscing elit. Praesent vel tortor facilisis, volutpat nulla placerat, tincidunt mi. Nullam vel orci dui. Su spendisse sit amet laoreet neque. Fusce sagittis suscipit sem a consequat. Proin nec interdum sem. Quisque in porttitor magna, a imperdiet est. Donec accumsan justo nulla, sit amet varius urna laoreet vitae. Maecenas feugiat fringilla metus. </p>
|
|
</div>
|
|
|
|
<div class="alert alert-light my-2 small" data-v-if="review.status = 0">
|
|
<div>Your review is awaiting moderation.</div>
|
|
<div>This is a preview, your review will be visible after it has been approved.</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="user-image" data-v-user-image>
|
|
<a href="/product/product-fifteen" title="Product 15" data-toggle="lightbox" data-gallery="user-gallery" data-v-image-src>
|
|
<img src="/image-cache/product/5-1-150x0.webp" alt="" class="img-thumbnail m-1" loading="lazy" data-v-thumb-src>
|
|
|
|
</a>
|
|
</div>
|
|
<div class="user-image" data-v-user-image>
|
|
<a href="/product/product-fifteen" title="Product 15" data-toggle="lightbox" data-gallery="user-gallery" data-v-image-src">
|
|
<img src="/image-cache/product/4-1-150x0.webp" alt="" class="img-thumbnail m-1" loading="lazy" data-v-thumb-src>
|
|
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="reply">
|
|
<a href="#review-form" class="reply-btn" data-review_id="{$review.review_id}" data-review_author="{$review.author}" data-v-vvveb-action="replyTo">Reply <i class="la la-reply"></i>
|
|
</a>
|
|
</div>
|
|
|
|
</li>
|
|
<li class="review mb-4 level-2" data-v-review>
|
|
|
|
<div class="review-wrap d-flex ">
|
|
|
|
<figure class="author-avatar me-2">
|
|
<img src="http://place-hold.it/60x60" alt="user" width="60" data-v-review-avatar_url loading="lazy" data-v-if="review.avatar">
|
|
</figure>
|
|
|
|
<div class="review-author">
|
|
|
|
<div class="review-author">
|
|
<span data-v-review-author data-v-if-not="review.url">John doe</span>
|
|
</div>
|
|
|
|
<div class="review-meta text-small text-muted">
|
|
<span data-v-review-created_at data-filter-friendly_date>Jan 29, 2018</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="my-2" data-v-review-content>
|
|
<p>This is a reply review.</p>
|
|
</div>
|
|
|
|
<div class="alert alert-light my-2 small" data-v-if="review.status = 0">
|
|
<div>Your review is awaiting moderation.</div>
|
|
<div>This is a preview, your review will be visible after it has been approved.</div>
|
|
</div>
|
|
|
|
<div class="reply">
|
|
<a href="#review-form" class="reply-btn" data-review_id="{$review.review_id}" data-review_author="{$review.author}" data-v-vvveb-action="replyTo">Reply <i class="la la-reply"></i>
|
|
</a>
|
|
</div>
|
|
|
|
</li>
|
|
<li class="review mb-4" data-v-review>
|
|
|
|
<div class="review-wrap d-flex ">
|
|
|
|
<figure class="author-avatar me-2">
|
|
<img src="demo/img/sections/team/1.webp" alt="user" width="60" data-v-review-avatar_url loading="lazy" data-v-if="review.avatar">
|
|
</figure>
|
|
|
|
<div class="review-author">
|
|
|
|
<div class="review-author">
|
|
<a rel="external nofollow ugc" data-v-if="review.url">
|
|
<span data-v-review-author>Maria Williams</span>
|
|
</a>
|
|
<span data-v-review-author data-v-if-not="review.url">Maria Williams</span>
|
|
</div>
|
|
|
|
<div class="review-meta text-small text-muted">
|
|
<span data-v-review-created_at data-filter-friendly_date>Jan 29, 2018</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div data-v-review-content>
|
|
<p>Consectetur adipiscing elit. Praesent vel tortor facilisis, volutpat nulla placerat, tincidunt mi. Nullam vel orci dui. Su spendisse sit amet laoreet neque. Fusce sagittis suscipit sem a consequat. Proin nec interdum sem. Quisque in porttitor magna, a imperdiet est. Donec accumsan justo nulla, sit amet varius urna laoreet vitae. Maecenas feugiat fringilla metus. </p>
|
|
</div>
|
|
|
|
<div class="alert alert-light my-2 small" data-v-if="review.status = 0">
|
|
<div>Your review is awaiting moderation.</div>
|
|
<div>This is a preview, your review will be visible after it has been approved.</div>
|
|
</div>
|
|
|
|
<div class="reply">
|
|
<a href="#review-form" class="reply-btn" data-review_id="{$review.review_id}" data-review_author="{$review.author}" data-v-vvveb-action="replyTo">Reply <i class="la la-reply"></i>
|
|
</a>
|
|
</div>
|
|
|
|
</li>
|
|
</ol>
|
|
|
|
</div>
|
|
|
|
<div data-v-if="count = 0">
|
|
<div class=" p-4 mb-4 bg-body-tertiary border">
|
|
<h6>Be the first to write a review!</h6>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="notifications" data-v-notifications>
|
|
|
|
<div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error>
|
|
|
|
<div class="icon align-middle me-2">
|
|
<i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 align-self-center text-small">
|
|
<div>
|
|
<div data-v-notification-text>
|
|
This is a placeholder for a notification message.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">
|
|
<!-- <i class="la la-times"></i> -->
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="alert alert-success d-flex alert-dismissable d-flex" role="alert" data-v-notification-success>
|
|
|
|
<div class="icon align-middle me-2">
|
|
<i class="align-middle la la-2x lh-1 la-check-circle"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
|
|
This is a placeholder for a success message.
|
|
</div>
|
|
|
|
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">
|
|
<!-- <i class="la la-times"></i> -->
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info>
|
|
|
|
<div class="icon align-middle me-2">
|
|
<i class="align-middle la la-2x lh-1 la-info-circle"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 align-self-center" data-v-notification-text>
|
|
This is a placeholder for a info message.
|
|
</div>
|
|
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">
|
|
<!-- <i class="la la-times"></i> -->
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<button data-bs-toggle="collapse" href="#reviews-form" role="button" aria-expanded="false" aria-controls="reviews-form" class="btn btn-light btn-sm border">
|
|
<span>Leave review</span>
|
|
<i class="la la-angle-down ms-2"></i>
|
|
</button>
|
|
|
|
<div class="reviews-form collapse mt-4" id="reviews-form">
|
|
|
|
|
|
<h5>Leave a review</h5>
|
|
<span class="replyto" style="display:none">
|
|
<h3>Reply to <b data-review-author>author</b>
|
|
</h3>
|
|
<a href="#review-form" class="reply-btn d-inline-block" data-review_id="0" data-v-vvveb-action="replyTo">
|
|
Cancel review
|
|
<i class="la la-window-close"></i>
|
|
</a>
|
|
</span>
|
|
|
|
|
|
<div class="loggedin mb-3" data-v-if="this.global.user_id">
|
|
<!--
|
|
<a href="#review-form" class="reply-btn d-inline-block" data-review_id="0" data-v-vvveb-action="replyTo">
|
|
Log out
|
|
<i class="la la-window-close"></i></a>
|
|
-->
|
|
|
|
<form action method="post" enctype="multipart/form-data" data-v-url="user/login/index" data-selector=".product-reviews">
|
|
|
|
<span>Logged in as <b data-v-global-user.display_name>author</b>
|
|
</span>
|
|
|
|
<input type="hidden" name="logout">
|
|
|
|
<button type="submit" value="logout" class="btn link-primary btn-submit">
|
|
|
|
<span class="loading d-none">
|
|
<span class="spinner-border spinner-border-sm align-middle" role="status">
|
|
</span>
|
|
<span>Loading ...</span>...
|
|
</span>
|
|
|
|
<span class="button-text">
|
|
Logout <i class="la la-sign-out-alt"></i>
|
|
</a>
|
|
</span>
|
|
|
|
</button>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
<form id="review-form" method="post" action="" data-v-vvveb-action="addReview" data-v-vvveb-on="submit">
|
|
|
|
<input type="hidden" name="product_id" data-v-product-product_id>
|
|
<input type="hidden" name="slug" data-v-product-slug>
|
|
<input type="hidden" name="parent_id" value="0">
|
|
<input type="hidden" name="csrf" data-v-csrf>
|
|
|
|
<!-- antibot do not fill -->
|
|
<input type="hidden" class="form-control" placeholder="First name" name="firstname-empty">
|
|
|
|
|
|
<div data-v-if-not="this.global.user_id">
|
|
<div class="mb-3">
|
|
<label for="exampleInputEmail1" class="form-label">Name</label>
|
|
<input type="text" placeholder="Name" name="author" class="form-control" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="exampleInputPassword1" class="form-label">Email address</label>
|
|
<input type="email" placeholder="Email" name="email" class="form-control" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<input type="radio" name="rating" value="1" id="onestar" class="form-check-input btn-check" required>
|
|
<label class="form-check-label btn btn-outline-secondary btn-sm border-secondary-subtle" for="onestar">
|
|
<i class="la la-lg la-star text-warning"></i>
|
|
1 <span>Star</span>
|
|
</label>
|
|
<input type="radio" name="rating" value="2" id="twostars" class="form-check-input btn-check" required>
|
|
<label class="form-check-label btn btn-outline-secondary btn-sm border-secondary-subtle" for="twostars">
|
|
<i class="la la-lg la-star text-warning"></i>
|
|
2 <span>Stars</span>
|
|
</label>
|
|
<input type="radio" name="rating" value="3" id="threestars" class="form-check-input btn-check" required>
|
|
<label class="form-check-label btn btn-outline-secondary btn-sm border-secondary-subtle" for="threestars">
|
|
<i class="la la-lg la-star text-warning"></i>
|
|
3 <span>Stars</span>
|
|
</label>
|
|
<input type="radio" name="rating" value="4" id="fourstars" class="form-check-input btn-check" required>
|
|
<label class="form-check-label btn btn-outline-secondary btn-sm border-secondary-subtle" for="fourstars">
|
|
<i class="la la-lg la-star text-warning"></i>
|
|
4 <span>Stars</span>
|
|
</label>
|
|
<input type="radio" name="rating" value="5" id="fivestars" class="form-check-input btn-check" checked required>
|
|
<label class="form-check-label btn btn-outline-secondary btn-sm border-secondary-subtle" for="fivestars">
|
|
<i class="la la-lg la-star text-warning"></i>
|
|
5 <span>Stars</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<textarea name="content" rows="5" cols="4" placeholder="Enter product review ..." class="form-control" required></textarea>
|
|
</div>
|
|
|
|
<!-- if these hidden inputs are filled then ignore robots -->
|
|
<input type="text" class="form-control d-none" placeholder="Subject" name="subject-empty">
|
|
|
|
<input type="text" class="form-control visually-hidden" placeholder="Last name" name="lastname-empty" tabindex="-1">
|
|
|
|
<button type="submit" value="review" class="btn btn-primary btn-submit">
|
|
<span class="loading d-none">
|
|
<span class="spinner-border spinner-border-sm align-middle" role="status"> </span>
|
|
<span>Posting</span>...
|
|
</span>
|
|
|
|
<span class="button-text">
|
|
<span>Post review</span>
|
|
<i class="la la-long-arrow-alt-right ms-1"></i>
|
|
</span>
|
|
</button>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="tab-pane" id="questions" role="tabpanel" aria-labelledby="questions-tab" tabindex="0">
|
|
<div class="product-questions mt-4" data-v-component-questions>
|
|
<h4 class="border-top pt-4">Questions and answers</h4>
|
|
|
|
<ol class="question-list list-unstyled my-3">
|
|
<li class="question mb-4" data-v-question>
|
|
|
|
<div class="question-wrap d-flex ">
|
|
|
|
<figure class="author-avatar me-2">
|
|
<img src="demo/img/sections/team/1.webp" alt="user" width="60" data-v-question-avatar_url loading="lazy" data-v-if="question.avatar">
|
|
</figure>
|
|
|
|
<div class="question-author">
|
|
|
|
<div class="question-author">
|
|
<a rel="external nofollow ugc" data-v-if="question.url">
|
|
<span data-v-question-author>Maria Williams</span>
|
|
</a>
|
|
<span data-v-question-author data-v-if-not="question.url">Maria Williams</span>
|
|
</div>
|
|
|
|
<div class="question-meta text-small text-muted">
|
|
<span data-v-question-created_at data-filter-friendly_date>Jan 29, 2018</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="my-2" data-v-question-content>
|
|
<p>Consectetur adipiscing elit. Praesent vel tortor facilisis, volutpat nulla placerat, tincidunt mi. Nullam vel orci dui. Su spendisse sit amet laoreet neque. Fusce sagittis suscipit sem a consequat. Proin nec interdum sem. Quisque in porttitor magna, a imperdiet est. Donec accumsan justo nulla, sit amet varius urna laoreet vitae. Maecenas feugiat fringilla metus. </p>
|
|
</div>
|
|
|
|
<div class="alert alert-light my-2 small" data-v-if="question.status = 0">
|
|
<div>Your question is awaiting moderation.</div>
|
|
<div>This is a question, your question will be visible after it has been approved.</div>
|
|
</div>
|
|
|
|
<div class="reply">
|
|
<a href="#question-form" class="reply-btn" data-question_id="{$question.question_id}" data-question_author="{$question.author}" data-v-vvveb-action="replyTo">Reply <i class="la la-reply"></i>
|
|
</a>
|
|
</div>
|
|
|
|
</li>
|
|
<li class="question mb-4 level-2" data-v-question>
|
|
|
|
<div class="question-wrap d-flex ">
|
|
|
|
<figure class="author-avatar me-2">
|
|
<img src="http://place-hold.it/60x60" alt="user" width="60" data-v-question-avatar_url loading="lazy" data-v-if="question.avatar">
|
|
</figure>
|
|
|
|
<div class="question-author">
|
|
|
|
<div class="question-author">
|
|
<span data-v-question-author data-v-if-not="question.url">John doe</span>
|
|
</div>
|
|
|
|
<div class="question-meta text-small text-muted">
|
|
<span data-v-question-created_at data-filter-friendly_date>Jan 29, 2018</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="my-2" data-v-question-content>
|
|
<p>This is a reply question.</p>
|
|
</div>
|
|
|
|
<div class="alert alert-light my-2 small" data-v-if="question.status = 0">
|
|
<div>Your question is awaiting moderation.</div>
|
|
<div>This is a question, your question will be visible after it has been approved.</div>
|
|
</div>
|
|
|
|
<div class="reply">
|
|
<a href="#question-form" class="reply-btn" data-question_id="{$question.question_id}" data-question_author="{$question.author}" data-v-vvveb-action="replyTo">Reply <i class="la la-reply"></i>
|
|
</a>
|
|
</div>
|
|
|
|
</li>
|
|
<li class="question mb-4" data-v-question>
|
|
|
|
<div class="question-wrap d-flex ">
|
|
|
|
<figure class="author-avatar me-2">
|
|
<img src="demo/img/sections/team/1.webp" alt="user" width="60" data-v-question-avatar_url loading="lazy" data-v-if="question.avatar">
|
|
</figure>
|
|
|
|
<div class="question-author">
|
|
|
|
<div class="question-author">
|
|
<a rel="external nofollow ugc" data-v-if="question.url">
|
|
<span data-v-question-author>Maria Williams</span>
|
|
</a>
|
|
<span data-v-question-author data-v-if-not="question.url">Maria Williams</span>
|
|
</div>
|
|
|
|
<div class="question-meta text-small text-muted">
|
|
<span data-v-question-created_at data-filter-friendly_date>Jan 29, 2018</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="my-2" data-v-question-content>
|
|
<p>Consectetur adipiscing elit. Praesent vel tortor facilisis, volutpat nulla placerat, tincidunt mi. Nullam vel orci dui. Su spendisse sit amet laoreet neque. Fusce sagittis suscipit sem a consequat. Proin nec interdum sem. Quisque in porttitor magna, a imperdiet est. Donec accumsan justo nulla, sit amet varius urna laoreet vitae. Maecenas feugiat fringilla metus. </p>
|
|
</div>
|
|
|
|
<div class="alert alert-light my-2 small" data-v-if="question.status = 0">
|
|
<div>Your question is awaiting moderation.</div>
|
|
<div>This is a question, your question will be visible after it has been approved.</div>
|
|
</div>
|
|
|
|
<div class="reply">
|
|
<a href="#question-form" class="reply-btn" data-question_id="{$question.question_id}" data-question_author="{$question.author}" data-v-vvveb-action="replyTo">Reply <i class="la la-reply"></i>
|
|
</a>
|
|
</div>
|
|
|
|
</li>
|
|
</ol>
|
|
|
|
<div class="notifications" data-v-notifications>
|
|
|
|
<div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error>
|
|
|
|
<div class="icon align-middle me-2">
|
|
<i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 align-self-center text-small">
|
|
<div>
|
|
<div data-v-notification-text>
|
|
This is a placeholder for a notification message.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">
|
|
<!-- <i class="la la-times"></i> -->
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="alert alert-success d-flex alert-dismissable d-flex" role="alert" data-v-notification-success>
|
|
|
|
<div class="icon align-middle me-2">
|
|
<i class="align-middle la la-2x lh-1 la-check-circle"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
|
|
This is a placeholder for a success message.
|
|
</div>
|
|
|
|
<button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">
|
|
<!-- <i class="la la-times"></i> -->
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info>
|
|
|
|
<div class="icon align-middle me-2">
|
|
<i class="align-middle la la-2x lh-1 la-info-circle"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 align-self-center" data-v-notification-text>
|
|
This is a placeholder for a info message.
|
|
</div>
|
|
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">
|
|
<!-- <i class="la la-times"></i> -->
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<button data-bs-toggle="collapse" href="#questions-form" role="button" aria-expanded="false" aria-controls="questions-form" class="btn btn-light btn-sm border">
|
|
<span>Ask question</span>
|
|
<i class="la la-angle-down ms-2"></i>
|
|
</button>
|
|
|
|
<div class="questions-form collapse mt-4" id="questions-form">
|
|
|
|
|
|
<h5>Leave a reply</h5>
|
|
<span class="replyto" style="display:none">
|
|
<h3>Reply to <b data-question-author>author</b>
|
|
</h3>
|
|
<a href="#question-form" class="reply-btn d-inline-block" data-question_id="0" data-v-vvveb-action="replyTo">
|
|
Cancel reply
|
|
<i class="la la-window-close"></i>
|
|
</a>
|
|
</span>
|
|
|
|
|
|
<div class="loggedin mb-3" data-v-if="this.global.user_id">
|
|
<!--
|
|
<a href="#question-form" class="reply-btn d-inline-block" data-question_id="0" data-v-vvveb-action="replyTo">
|
|
Log out
|
|
<i class="la la-window-close"></i></a>
|
|
-->
|
|
|
|
<form action method="post" enctype="multipart/form-data" data-v-url="user/login/index" data-selector=".product-questions">
|
|
|
|
<span>Logged in as <b data-v-global-user.display_name>author</b>
|
|
</span>
|
|
|
|
<input type="hidden" name="logout">
|
|
|
|
<button type="submit" value="logout" class="btn link-primary">
|
|
|
|
<span class="loading d-none">
|
|
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
|
|
</span>
|
|
<span>Loading ...</span>...
|
|
</span>
|
|
|
|
<span class="button-text">
|
|
Logout <i class="la la-sign-out-alt"></i>
|
|
</a>
|
|
</span>
|
|
|
|
</button>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
<form id="question-form" method="post" action="" data-v-vvveb-action="addQuestion" data-v-vvveb-on="submit">
|
|
|
|
<input type="hidden" name="product_id" data-v-product-product_id>
|
|
<input type="hidden" name="slug" data-v-product-slug>
|
|
<input type="hidden" name="parent_id" value="0">
|
|
<input type="hidden" name="csrf" data-v-csrf>
|
|
|
|
<!-- antibot do not fill -->
|
|
<input type="hidden" class="form-control" placeholder="First name" name="firstname-empty">
|
|
|
|
|
|
<div data-v-if-not="this.global.user_id">
|
|
<div class="mb-3">
|
|
<label for="exampleInputEmail1" class="form-label">Name</label>
|
|
<input type="text" placeholder="Name" name="author" class="form-control" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="exampleInputPassword1" class="form-label">Email address</label>
|
|
<input type="email" placeholder="Email" name="email" class="form-control" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<textarea name="content" rows="5" cols="4" placeholder="Enter product question ..." class="form-control" required></textarea>
|
|
</div>
|
|
|
|
<!-- if these hidden inputs are filled then ignore robots -->
|
|
<input type="text" class="form-control d-none" placeholder="Subject" name="subject-empty">
|
|
|
|
<input type="text" class="form-control visually-hidden" placeholder="Last name" name="lastname-empty" tabindex="-1">
|
|
|
|
<button type="submit" value="question" class="btn btn-primary btn-submit">
|
|
<span class="loading d-none">
|
|
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true"> </span>
|
|
<span>Posting</span>...
|
|
</span>
|
|
|
|
<span class="button-text">
|
|
<span>Post question</span>
|
|
<i class="la la-long-arrow-alt-right ms-1"></i>
|
|
</span>
|
|
</button>
|
|
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div data-v-component-products="index" data-v-related="url.product_id" data-v-limit="6" data-v-page="url">
|
|
<div data-v-if="count > 0">
|
|
<h3 class="mt-5">Related products</h3>
|
|
<div class="row g-3">
|
|
<div class="col-md-6 col-lg-4 col-xl-3" data-v-product>
|
|
<div class="product">
|
|
|
|
<article class="single-product-wrapper">
|
|
<!-- Product Image -->
|
|
<a href="product/product.html" data-v-product-url> </a>
|
|
<div class="product-image">
|
|
<a href="product/product.html" data-v-product-url>
|
|
|
|
<img src="demo/img/product.webp" loading="lazy" data-v-product-alt alt="" data-v-size="thumb" loading="lazy" data-v-if="prod.image" data-v-product-image />
|
|
<img src="demo/img/video-1.webp" class="bg-body-tertiary" loading="lazy" alt="" data-v-if-not="prod.image" />
|
|
|
|
<!-- Hover Thumb -->
|
|
<img class="hover-img" src="demo/img/product-2.webp" loading="lazy" data-v-product-alt alt="" loading="lazy" data-v-size="thumb" data-v-product-image-1 />
|
|
</a>
|
|
|
|
|
|
<!-- Favourite -->
|
|
<div class="product-favourite">
|
|
<a href="product/product.html" class="la la-heart" data-v-vvveb-action="addToWishlist" data-v-product-add_wishlist_url>
|
|
<span></span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Compare -->
|
|
<div class="product-compare">
|
|
<a href="product/product.html" class="la la-random" data-v-vvveb-action="addToCompare" data-v-product-add_compare_url>
|
|
<span></span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="badges">
|
|
<span class="badge text-bg-secondary" data-v-if="prod.old_price > 0">Sale</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product Description -->
|
|
<div class="product-content">
|
|
|
|
<a href="product/product.html" class="text-body" data-v-product-url>
|
|
<span data-v-product-name>Product 8</span>
|
|
</a>
|
|
|
|
<p data-v-if="prod.min_price > 0">
|
|
<span class="text-muted small">From</span>
|
|
<span class="product-price" data-v-product-min_price_tax_formatted>100.0000</span>
|
|
</p>
|
|
|
|
<div data-v-if-not="prod.min_price">
|
|
<p class="product-price old-price" data-v-if="prod.old_price > 0" data-v-product-old_price_tax_formatted>100.0000</p>
|
|
<p class="product-price" data-v-if="prod.price > 0" data-v-product-price_tax_formatted>100.0000</p>
|
|
</div>
|
|
|
|
<!-- Hover Content -->
|
|
<div class="hover-content" data-v-if="prod.price > 0 && !prod.has_variants">
|
|
<!-- Add to Cart -->
|
|
<div class="add-to-cart-btn">
|
|
<input type="hidden" name="product_id" value="" data-v-product-product_id />
|
|
|
|
<a href="#" class="btn btn-secondary btn-sm w-100 disabled" data-v-if="prod.stock_quantity < 1">
|
|
<span class="button-text">
|
|
Out of stock
|
|
</span>
|
|
</a>
|
|
|
|
<a href="" class="btn btn-primary btn-sm w-100" data-v-if="prod.stock_quantity > 0" data-v-product-add_cart_url data-v-vvveb-action="addToCart" data-product_id="1">
|
|
|
|
<span class="loading d-none">
|
|
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true"> </span>
|
|
<span>Add to cart</span>
|
|
</span>
|
|
|
|
<span class="button-text">
|
|
<i class="la la-lg la-shopping-bag"></i>
|
|
<span>Add to cart</span>
|
|
</span>
|
|
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</article>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
|
|
<footer class="footer" data-v-save-global="index.html,footer">
|
|
|
|
<div class="footer-top">
|
|
<div class="container">
|
|
|
|
<div class="footer-brand">
|
|
|
|
<div class="navbar-brand logo" data-v-component-site>
|
|
<!-- <a class="navbar-brand" href="/" data-url data-v-url-params='{"host":"www.*.*"}'><span class="visually-hidden">Logo</span> -->
|
|
<a class="navbar-brand h4 mb-0 text-decoration-none" href="/" data-v-site-url>
|
|
<span class="visually-hidden">Logo</span>
|
|
<img src="img/logo.png" alt="Site logo" loading="lazy" class="logo-default" data-v-site-logo>
|
|
<img src="img/logo.png" alt="Site logo sticky" loading="lazy" class="logo-sticky" data-v-site-logo-sticky>
|
|
<img src="img/logo-white.png" alt="Site logo dark" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
|
|
<img src="img/logo-white.png" alt="Site logo dark sticky" loading="lazy" class="logo-default-dark-sticky" data-v-site-logo-dark-sticky>
|
|
</a>
|
|
</div>
|
|
|
|
<p class="section-text">
|
|
Lorem ipsum dolor sit amet, consectetur, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
|
|
minim.
|
|
</p>
|
|
|
|
<div class="location-text">
|
|
<div class="location-icon">
|
|
<ion-icon name="location-outline"></ion-icon>
|
|
</div>
|
|
|
|
<address class="address">
|
|
2750 Quadra Street Victoria, Canada.
|
|
</address>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="quicklink-box">
|
|
<p class="h3 quicklink-title">Quick links</p>
|
|
|
|
<ul class="quicklink-list">
|
|
|
|
<li>
|
|
<a href="#" class="quicklink">IT Startup</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="quicklink">Software</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="quicklink">Business</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="quicklink">App</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="quicklink">Insurance</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="quicklink">Property</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="quicklink">Big Data</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="quicklink">Distance Learning</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="quicklink">Chatbot</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="quicklink">Medical</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="contact">
|
|
<p class="h3 contact-title">Contact with us</p>
|
|
|
|
<ul class="contact-list">
|
|
|
|
<li class="contact-item">
|
|
<div class="contact-icon">
|
|
<ion-icon name="mail-outline"></ion-icon>
|
|
</div>
|
|
|
|
<a href="mailto:hello@solutry.com" class="contact-link">hello@solutry.com</a>
|
|
</li>
|
|
|
|
<li class="contact-item">
|
|
<div class="contact-icon">
|
|
<ion-icon name="call-outline"></ion-icon>
|
|
</div>
|
|
|
|
<a href="tel:+14854560102" class="contact-link">+1-485-456-0102</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-bottom">
|
|
<div class="container">
|
|
|
|
<p class="copyright">
|
|
© <span data-v-year>2025</span>
|
|
<span data-v-global-site.description.title>codewithsadee</span> All Rights Reserved
|
|
<span>Powered by <a href="https://www.vvveb.com">Vvveb</a>
|
|
</span>
|
|
</p>
|
|
|
|
<ul class="social-list">
|
|
|
|
<li>
|
|
<a href="#" class="social-link">
|
|
<ion-icon name="logo-facebook"></ion-icon>
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="social-link">
|
|
<ion-icon name="logo-twitter"></ion-icon>
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="social-link">
|
|
<ion-icon name="logo-linkedin"></ion-icon>
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#" class="social-link">
|
|
<ion-icon name="logo-instagram"></ion-icon>
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</footer>
|
|
|
|
<!--
|
|
- #GO TO TOP
|
|
-->
|
|
|
|
<a href="#top" class="go-top active" data-go-top>
|
|
<ion-icon name="chevron-up-outline"></ion-icon>
|
|
</a>
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
- custom js link
|
|
-->
|
|
<script src="js/script.js"></script>
|
|
|
|
<!--
|
|
- ionicon link
|
|
-->
|
|
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
|
|
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
|
|
|
|
<div class="alert alert-light alert-dismissible fade alert-top" role="alert" style="display:none">
|
|
<div class="container">
|
|
|
|
<div class="message">
|
|
Product was added to cart.
|
|
</div>
|
|
|
|
|
|
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-scrollable">
|
|
<div class="modal-content">
|
|
<div class="modal-body">
|
|
|
|
<form action="/search" method="get">
|
|
<input type="hidden" name="route" value="search">
|
|
<div class="input-group">
|
|
<input type="search" name="search" class="form-control" id="headerSearch" placeholder="Type for search" data-v-vvveb-action="search" data-selector=".search-results" data-v-vvveb-on="keyup">
|
|
<button class="btn btn-outline-primary border" type="submit" title="Search">
|
|
<div class="la-flip-horizontal">
|
|
<i class="la la-search la-lg" aria-hidden="true"></i>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="search-results">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="page-loading-status" class="progress top-0 position-fixed progress-bar" role="progressbar" aria-label="Page loading status" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="z-index: 10;--bs-progress-bg: transparent;--bs-progress-height: 1px;width:0%"></div>
|
|
|
|
|
|
<script id="app-js" src="/js/app.js"></script>
|
|
<script id="theme-js" src="/js/app/theme.js"></script>
|
|
<script id="cart-js" src="/js/app/cart.js"></script>
|
|
|
|
|
|
<script>
|
|
document.querySelector('.carousel-item').classList.add("active");
|
|
/*
|
|
//anchors not working properly due to base href, add full url to anchors
|
|
$('a[href^="#"]').attr("href", function (i,a) {
|
|
return window.location.href + a;
|
|
});
|
|
$('a[href^="#"]').on("click", function (e) {
|
|
window.location.hash = this.attributes.href.value;
|
|
});
|
|
*/
|
|
document.addEventListener('click',function (e) {
|
|
let element = e.target.closest('a[href^="#"]');
|
|
if (element) {
|
|
let target = element.hash,
|
|
//window.location.hash = element.attributes.href.value;
|
|
$target = document.querySelector(target);
|
|
//window.location.hash = target;
|
|
|
|
document.firstElementChild.scroll({
|
|
top: $target.offsetTop - 200,//substract header height,
|
|
behavior: "smooth",
|
|
});
|
|
|
|
e.preventDefault();
|
|
return false;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |