VvebOIDC/public/themes/solutry/product/index.html

1072 lines
42 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&amp;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 &gt; 0" data-v-class-if-position-static="category.has-text">
<a class="navbar-link dropdown-toggle" data-v-class-if-dropdown-toggle="category.children &gt; 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' &amp;&amp; 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 &gt; 0">
<a class="dropdown-item" data-v-class-if-active="category.active &amp;&amp; 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 &gt; 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 &gt; 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 &gt; 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 mt-5">
</div>
<div class="container">
<div class="row justify-content-between">
<div class="col-md-3 col-xl-3 products-sidebar">
<!-- Categories Widget -->
<div class="card border border-opacity-10" data-v-component-product-categories="sidebar" data-v-type="categories" data-v-limit="1000" data-v-post_type="product">
<div class="card-body menutree">
<h6 class="card-title text-muted">Categories</h6>
<div class="card-body p-0 menu-content collapse show">
<ul class="list-unstyled" data-v-cats>
<li data-v-cat class="expand">
<input type="checkbox" id="m3" data-v-if="category.children > 0" />
<label for="m3" data-v-if="category.children > 0">
<!-- <a data-v-cat-url data-url data-v-cat-name data-selector=".content-body" data-scroll="start">Bodysuits</a> -->
<a data-v-cat-url data-v-cat-name>Bodysuits</a>
</label>
<!-- <a href="#" data-v-if="category.children = 0" data-v-cat-url data-v-cat-name data-selector=".content-body" data-scroll="start">Bodysuits</a> -->
<a href="#" data-v-if="category.children = 0" data-v-cat-url data-v-cat-name>Bodysuits</a>
</li>
<li data-v-cat>
<a data-v-cat-url>
<span data-v-cat-name>HTML</span>
</a>
</li>
<li data-v-cat>
<a data-v-cat-url>
<span data-v-cat-name>Freebies</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Manufacturers Widget -->
<div class="card border bg-opacity-10 filters mt-2">
<div class="card-body">
<h6 class="card-title text-muted">Brands</h6>
<ul class="list-unstyled" data-v-component-product-manufacturers="sidebar" data-v-filter="url">
<li data-v-manufacturer>
<div class="form-check form-check-minimal">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="manufacturer_id[]" value="" data-v-manufacturer-manufacturer_id>
<span data-v-manufacturer-name>Mango</span>
</label>
</div>
</li>
<li data-v-manufacturer>
<div class="form-check form-check-minimal">
<input class="form-check-input" type="checkbox" name="manufacturer_id[]" value="" data-v-manufacturer-manufacturer_id>
<label class="form-check-label" for="brand-2">
<span data-v-manufacturer-name>Assos</span>
</label>
</div>
</li>
<li data-v-manufacturer>
<div class="form-check form-check-minimal">
<label class="form-check-label" for="brand-3">
<input class="form-check-input" type="checkbox" name="manufacturer_id[]" value="" data-v-manufacturer-manufacturer_id>
<span data-v-manufacturer-name>Brand name</span>
</label>
</div>
</li>
</ul>
</div>
</div>
<!-- Vendors Widget -->
<div class="card border bg-opacity-10 filters mt-2">
<div class="card-body">
<h6 class="card-title text-muted">Vendors</h6>
<ul class="list-unstyled" data-v-component-product-vendors="sidebar" data-v-filter="url">
<li data-v-vendor>
<div class="form-check form-check-minimal">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="vendor_id[]" value="" data-v-vendor-vendor_id>
<span data-v-vendor-name>Mango</span>
</label>
</div>
</li>
<li data-v-vendor>
<div class="form-check form-check-minimal">
<input class="form-check-input" type="checkbox" name="vendor_id[]" value="" data-v-vendor-vendor_id>
<label class="form-check-label" for="brand-2">
<span data-v-vendor-name>Assos</span>
</label>
</div>
</li>
<li data-v-vendor>
<div class="form-check form-check-minimal">
<label class="form-check-label" for="brand-3">
<input class="form-check-input" type="checkbox" name="vendor_id[]" value="" data-v-vendor-vendor_id>
<span data-v-vendor-name>Brand name</span>
</label>
</div>
</li>
</ul>
</div>
</div>
<!--
<div data-v-component-product-filters>
</div>
<div class="card border bg-opacity-10 filters mt-2">
<h6 class="card-title text-muted">Color</h6>
<ul class="list-unstyled">
<li>
<div class="form-check form-check-color">
<input class="form-check-input" type="checkbox" value="" id="color-1">
<label class="form-check-label" for="color-1">
<span class="bg-red"></span> Red </label>
</div>
</li>
<li class="mt-1">
<div class="form-check form-check-color">
<input class="form-check-input" type="checkbox" value="" id="color-2">
<label class="form-check-label" for="color-2">
<span class="bg-blue"></span> Blue </label>
</div>
</li>
<li class="mt-1">
<div class="form-check form-check-color">
<input class="form-check-input" type="checkbox" value="" id="color-3">
<label class="form-check-label" for="color-3">
<span class="bg-green"></span> Green </label>
</div>
</li>
<li class="mt-1">
<div class="form-check form-check-color">
<input class="form-check-input" type="checkbox" value="" id="color-4">
<label class="form-check-label" for="color-4">
<span class="bg-yellow"></span> Yellow </label>
</div>
</li>
</ul>
</div>
<div class="card border bg-opacity-10 filters mt-2">
<h6 class="card-title text-muted">Size</h6>
<ul class="list-unstyled">
<li>
<label class="form-check form-check-color">
<input name="filter_option[]" type="checkbox" class="form-check-input" class="form-check-input" value="46">
<span>Small <strong>(1)</strong>
</span>
</label>
</li>
<li>
<label class="form-check">
<input name="filter_option[]" type="checkbox" class="form-check-input" value="47">
<span>Medium <strong>(1)</strong>
</span>
</label>
</li>
<li>
<label class="form-check">
<input name="filter_option[]" type="checkbox" class="form-check-input" value="48">
<span>Large <strong>(1)</strong>
</span>
</label>
</li>
<li>
<label class="form-check">
<input name="filter_option[]" type="checkbox" class="form-check-input" value="61">
<span>XS <strong>(11)</strong>
</span>
</label>
</li>
<li>
<label class="form-check">
<input name="filter_option[]" type="checkbox" class="form-check-input" value="62">
<span>S <strong>(15)</strong>
</span>
</label>
</li>
<li>
<label class="form-check">
<input name="filter_option[]" type="checkbox" class="form-check-input" value="63">
<span>M <strong>(12)</strong>
</span>
</label>
</li>
<li>
<label class="form-check">
<input name="filter_option[]" type="checkbox" class="form-check-input" value="64">
<span>L <strong>(6)</strong>
</span>
</label>
</li>
<li>
<label class="form-check">
<input name="filter_option[]" type="checkbox" class="form-check-input" value="65">
<span>XL <strong>(10)</strong>
</span>
</label>
</li>
<li>
<label class="form-check">
<input name="filter_option[]" type="checkbox" class="form-check-input" value="66">
<span>XXL <strong>(6)</strong>
</span>
</label>
</li>
</ul>
</div>
<div class="card border bg-opacity-10 filters mt-2">
<h6 class="card-title text-muted">Color</h6>
<ul class="list-unstyled">
<label class="form-check">
<input name="filter_option[]" type="checkbox" class="form-check-input" value="49">
<img src="http://anne.nicolethemes.com/image/cache/catalog/colors/blue-20x20.gif" alt="">
<span>Blue <strong>(3)</strong>
</span>
</label>
</li>
<li>
<label class="form-check">
<input name="filter_option[]" type="checkbox" class="form-check-input" value="50">
<img src="http://anne.nicolethemes.com/image/cache/catalog/colors/gold-20x20.gif" alt="">
<span>Gold <strong>(3)</strong>
</span>
</label>
</li>
<li>
<label class="form-check">
<input name="filter_option[]" type="checkbox" class="form-check-input" value="51">
<img src="http://anne.nicolethemes.com/image/cache/catalog/colors/green-20x20.gif" alt="">
<span>Green <strong>(3)</strong>
</span>
</label>
</li>
<li>
<label class="form-check">
<input name="filter_option[]" type="checkbox" class="form-check-input" value="52">
<img src="http://anne.nicolethemes.com/image/cache/catalog/colors/hotpink-20x20.gif" alt="">
<span>Hot pink <strong>(5)</strong>
</span>
</label>
</li>
<li>
<label class="form-check">
<input name="filter_option[]" type="checkbox" class="form-check-input" value="53">
<img src="http://anne.nicolethemes.com/image/cache/catalog/colors/lemon-20x20.gif" alt="">
<span>Lemon <strong>(4)</strong>
</span>
</label>
</li>
<li>
<label class="form-check">
<input name="filter_option[]" type="checkbox" class="form-check-input" value="54">
<img src="http://anne.nicolethemes.com/image/cache/catalog/colors/lime-20x20.gif" alt="">
<span>Lime <strong>(3)</strong>
</span>
</label>
</li>
<li>
<label class="form-check">
<input name="filter_option[]" type="checkbox" class="form-check-input" value="55">
<img src="http://anne.nicolethemes.com/image/cache/catalog/colors/navy-20x20.gif" alt="">
<span>Navy <strong>(9)</strong>
</span>
</label>
</li>
<li>
<label class="form-check">
<input name="filter_option[]" type="checkbox" class="form-check-input" value="56">
<img src="http://anne.nicolethemes.com/image/cache/catalog/colors/orange-20x20.gif" alt="">
<span>Orange <strong>(1)</strong>
</span>
</label>
</li>
<li>
<label class="form-check">
<input name="filter_option[]" type="checkbox" class="form-check-input" value="57">
<img src="http://anne.nicolethemes.com/image/cache/catalog/colors/red-20x20.gif" alt="">
<span>Red <strong>(5)</strong>
</span>
</label>
</li>
<li>
<label class="form-check">
<input name="filter_option[]" type="checkbox" class="form-check-input" value="58">
<img src="http://anne.nicolethemes.com/image/cache/catalog/colors/slate-20x20.gif" alt="">
<span>Slate <strong>(5)</strong>
</span>
</label>
</li>
<li>
<label class="form-check">
<input name="filter_option[]" type="checkbox" class="form-check-input" value="59">
<img src="http://anne.nicolethemes.com/image/cache/catalog/colors/teal-20x20.gif" alt="">
<span>Teal <strong>(2)</strong>
</span>
</label>
</li>
<li>
<label class="form-check">
<input name="filter_option[]" type="checkbox" class="form-check-input" value="60">
<img src="http://anne.nicolethemes.com/image/cache/catalog/colors/vanilla-20x20.gif" alt="">
<span>Vanilla <strong>(2)</strong>
</span>
</label>
</li>
</ul>
</div>
<div class="card border bg-opacity-10 filters mt-2">
<h6 class="card-title text-muted">Manufacturer</h6>
<ul class="list-unstyled">
<li>
<label class="form-check">
<input name="filter_manufacturer[]" type="checkbox" value="6">
<img src="http://anne.nicolethemes.com/image/cache/catalog/demo/palm_logo-he-100x30.webp" alt="">
<span>Palm</span>
</label>
</li>
<li>
<label class="form-check">
<input name="filter_manufacturer[]" type="checkbox" value="7">
<span>Hewlett-Packard</span>
</label>
</li>
<li>
<label class="form-check">
<input name="filter_manufacturer[]" type="checkbox" value="8">
<img src="http://anne.nicolethemes.com/image/cache/catalog/demo/apple_logo-he-100x30.webp" alt="">
<span>Apple</span>
</label>
</li>
<li>
<label class="form-check">
<input name="filter_manufacturer[]" type="checkbox" value="9">
<img src="http://anne.nicolethemes.com/image/cache/catalog/demo/canon_logo-he-100x30.webp" alt="">
<span>Canon</span>
</label>
</li>
<li>
<label class="form-check">
<input name="filter_manufacturer[]" type="checkbox" value="10">
<img src="http://anne.nicolethemes.com/image/cache/catalog/demo/sony_logo-he-100x30.webp" alt="">
<span>Sony</span>
</label>
</li>
</ul>
</div>
<div class="card border bg-opacity-10 filters mt-2">
<h6 class="card-title text-muted">Price</h6>
<div class="list-group-item">
<div id="option-groupSize">
<label class="form-check form-check-color">
<input name="filter_option[]" type="checkbox" class="form-check-input" class="form-check-input" value="46">
<span>Small <small>(1)</small>
</span>
</label>
</div>
</div>
<div class="list-group-item pb-4">
<div class="price-input">
<label>
<span>Min</span>
<input type="number" class="input-min form-control" value="2500">
</label>
<label>
<span>Max</span>
<input type="number" class="input-max form-control" value="7500">
</label>
</div>
<div class="slider">
<div class="progress"></div>
</div>
<div class="range-input">
<input type="range" class="range-min" min="0" max="10000" value="2500" step="100">
<input type="range" class="range-max" min="0" max="10000" value="7500" step="100">
</div>
</div>
</div>
-->
<script>
/*
//add active to current menu item in navigation list and open parent categories
var pathname = window.location.pathname;
var current_url = pathname.replace(/\/\d+$/, '');//remove pagination
document.querySelectorAll('.menutree a').forEach(function(el) {
let url = el.getAttribute('href');
// Add .active on menu if it is current page
if(url == current_url) {
let parent = el;
while ((parent = parent.parentNode) && parent !== document) {
if (parent.matches('li')) {
parent.classList.add("active");
parent.querySelector(':scope > input[type="checkbox"]')?.setAttribute("checked", true);
}
}
return;
//('.menutree a[href="' + current_url +'"]').parents('li').addClass('active').find('> input[type="checkbox"]').attr("checked", true);
}
});
document.addEventListener('click', (event) => {
let el = event.target.closest('.menutree a');
if (el) {
document.querySelectorAll('.menutree .active').forEach(function(el) {el.classList.remove("active")});
let parent = el;
while ((parent = parent.parentNode) && parent !== document) {
if (parent.matches('li')) {
parent.classList.add("active");
//parent.querySelector(':scope > input[type="checkbox"]')?.setAttribute("checked", true);
}
}
}
});
*/
/*
.click(function(e) {
$('.menutree .active').removeClass("active");
$(this).parents('li').addClass("active");
});
*/
</script>
</div>
<div class="col-md-9 col-xl-9 content-body">
<div class="row g-3 g-md-5 align-items-end">
<div class="col-md-6">
<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>
<div class="col-md-6 text-md-end">
<ul class="list-inline">
<li class="list-inline-item">
<div class="dropdown">
<a class="btn btn-light btn-sm" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Price high to low <i class="la la-arrow-down"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li>
<a class="dropdown-item" href="/shop?order_by=name&direction=asc">
<i class="la la-sort-alpha-up"></i>
<span>Name ascending</span>
</a>
</li>
<li>
<a class="dropdown-item" href="/shop?order_by=name&direction=desc">
<i class="la la-sort-alpha-down"></i>
<span>Name descending</span>
</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="/shop?order_by=price&direction=asc">
<i class="la la-arrow-up"></i>
<span>Price low to high</span>
</a>
</li>
<li>
<a class="dropdown-item" href="/shop?order_by=price&direction=desc">
<i class="la la-arrow-down"></i>
<span>Price high to low</span>
</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="/shop?order_by=product_id&direction=desc">
<i class="la la-calendar"></i>
<span>Newest</span>
</a>
</li>
<li>
<a class="dropdown-item" href="/shop?order_by=product_id&direction=asc">
<i class="la la-calendar"></i>
<span>Oldest</span>
</a>
</li>
<!--
<li>
<a class="dropdown-item" href="/shop?order_by=views&direction=desc">
<i class="la la-certificate"></i> <span>Most Popular</span>
</a>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<a class="dropdown-item" href="/shop?order_by=promotion&direction=desc">
<i class="la la-percentage"></i> <span>Discount</span>
</a>
</li>
<li>
<a class="dropdown-item" href="/shop?order_by=review&direction=desc">
<i class="la la-tags"></i> <span>Most Reviews</span>
</a>
</li>
<li>
<a class="dropdown-item" href="/shop?order_by=rating&direction=desc">
<i class="la la-star"></i> <span>Rating</span>
</a>
</li> -->
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="row g-3" data-v-component-products="index" data-v-limit="6" data-v-variant_price="true" data-v-order_by="url" data-v-direction="url" data-v-page="url" data-v-taxonomy_item_id="url" data-v-image_size="medium" data-v-filter="url">
<div class="col-md-6 col-xl-4" 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 data-v-if="index < 1">
<h4 class="text-center py-4">No products to display!</h4>
</div>
</div>
<div class="mt-4 py-2">
<div data-pagination data-v-parent-component="products" data-v-parent-index="0" data-v-query-string="true" data-v-parameters='{}'>
<nav data-v-if="pagecount > 1">
<ul class="pagination pagination-sm justify-content-end pt-2 mt-2" style="border-top: 1px solid var(--bs-border-color);">
<!--
<li class="page-item pager-first" data-first>
<a class="page-link" title="First page" data-page-url data-v-if="current_page > 1">
<span aria-hidden="true" class="la la-angle-double-left"></span>
<span class="sr-only">First</span>
</a>
</li>
-->
<li class="page-item pager-prev lh-1" data-prev>
<a class="page-link" aria-label="Previous" title="Previous page" data-page-url data-scroll="start" data-v-if="current_page > 1">
<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="21"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M244 400L100 256l144-144M120 256h292"/></svg> -->
<span aria-hidden="true" class="la la-arrow-left la-lg"></span>
<!-- <span>Newer Posts</span> -->
</a>
</li>
<li class="page-item" data-page>
<a class="page-link" data-page-no data-page-url data-scroll="start">1</a>
</li>
<li class="page-item" data-page>
<a class="page-link" data-page-no data-page-url data-scroll="start">2</a>
</li>
<li class="page-item" data-page>
<a class="page-link" data-page-no data-page-url data-scroll="start">3</a>
</li>
<li class="page-item" data-page>
<a class="page-link" data-page-no data-page-url data-scroll="start">4</a>
</li>
<li class="page-item" data-page>
<a class="page-link" data-page-no data-page-url data-scroll="start">5</a>
</li>
<li class="page-item pager-next" data-next>
<a class="page-link lh-1" aria-label="Next" title="Next page" data-page-url data-scroll="start" data-v-if="current_page < pagecount">
<!-- <span>Older Posts</span> -->
<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="21"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M268 112l144 144-144 144M392 256H100"/></svg> -->
<span aria-hidden="true" class="la la-arrow-right la-lg"></span>
</a>
</li>
<!--
<li class="page-item pager-last" data-last>
<a class="page-link" title="Last page" data-page-url data-v-if="current_page < pagecount">
<span aria-hidden="true" class="la la-angle-double-right"></span>
<span class="sr-only">Last</span>
</a>
</li>
-->
</ul>
</nav>
</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 id="filter-js" data-no-minify src="/js/app/filter.js"></script>
</body>
</html>