Brands TEST
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
.owl-theme .owl-controls .owl-buttons div {
opacity: .9;
}
html {
scroll-behavior: smooth;
}
.page-width{
max-width: 90%;
}
.page-content{
max-width: 1000px;
}
.page-width--narrow{
padding-left: 0;
padding-right: 0;
}
.brandPage_Root{
font-size: 16px;
}
.brandPage_Root img{
margin-bottom: 0px !important;
}
.brandPage_Root div{
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.brandPage_Root a{
text-decoration: none !important;
}
.brandPage_Root .imag_cont{
flex-wrap: nowrap !important;
display: flex !important;
gap: 16px !important;
overflow-x: scroll !important;
width: fit-content !important;
max-width: 100% !important;
}
.brandPage_Root .imag_cont::-webkit-scrollbar{
display: none !important;
}
.feimg-bx{
height: 150px !important;
width: 150px !important;
}
.nam-bx{
width: 150px
}
@media (min-width: 801px){
.feimg-bx{
height: 180px !important;
width: 180px !important;
}
.nam-bx{
width: 180px !important
}
}
.brandPage_Root ol, .brandPage_Root li{
list-style-type: none !important;
}
.brandPage_Root ol{
margin: 0 0 0 0 !important;
}
.brandPage_Root .brand-page-bg-gray{
background-color: #eee !important;
}
.brandPage_Root li{
margin-bottom: 0px !important;
}
.l10-bodr-bot{
border-bottom: 1px solid #eee !important;
}
.l10-hover-bg:hover{
background-color: #f8f8f8 !important;
}
.brand-page-py-6 {
padding-bottom: 1.5rem !important;
padding-top: 1.5rem !important;
}
.brand-page-pl-8{
padding-left: 2rem !important
}
.brandPage_Root .imag_cont{
flex-wrap: nowrap !important;
display: flex !important;
gap: 16px !important;
overflow-x: scroll !important;
width: fit-content !important;
max-width: 100% !important;
}
.brandPage_Root .imag_cont::-webkit-scrollbar{
display: none !important;
}
.brandPage_Root .name-bx, .nam-bx{
overflow-x: scroll !important;
height: 40px !important;
}
.brandPage_Root .name-bx::-webkit-scrollbar, .nam-bx::-webkit-scrollbar{
display: none !important;
}
.header-bg {
background-color: white;
border: 2px solid black;
color: black;
}
.brandPage_Root{
padding-left: 10px !important;
padding-right: 10px!important;
}
@media (prefers-color-scheme: dark) {
.header-bg {
background-color: black;
color: white;
}
}
.brand-page-list-none{
list-style-type: none !important;
}
.brandPage_Root a{
border-bottom: 0px !important;
}
.brandPage_Root .brand-page-text-2xl{
font-size: 22px !important
}
.brandPage_Root .brand-page-text-xl{
font-size: 18px !important
}
.brand-page-bott-bor{
border-bottom: solid 1px #ccc;
}
.brand-page-right-bor{
border-right: solid 1px #ccc;
}
.brand-page-pl-12{
padding-left: 3rem !important
}
.brandPage_Root input{
border: 1px solid black;
padding-bottom: 5px;
padding-top: 5px;
}
.brandPage_Root ul{
margin: 0px;
padding-left: 0px;
padding-right: 0px;
}
.brand-page-absolute {
position: absolute
}
.brand-page-relative {
position: relative
}
.brand-page-left-4 {
left: 1rem
}
.brand-page-top-set {
top: 30%
}
.brand-page-order-last {
order: 9999
}
.brand-page-col-span-12 {
grid-column: span 12/span 12
}
.brand-page-col-span-3 {
grid-column: span 3/span 3
}
.brand-page-col-span-6 {
grid-column: span 6/span 6
}
.brand-page-m-0 {
margin: 0
}
.brand-page-mx-auto {
margin-left: auto !important;
margin-right: auto !important;
}
.brand-page-my-2 {
margin-bottom: .5rem !important;
margin-top: .5rem !important
}
.brand-page-my-4 {
margin-bottom: 1rem !important;
margin-top: 1rem !important
}
.brand-page-my-auto {
margin-bottom: auto !important;
margin-top: auto !important
}
.brand-page-mb-4 {
margin-bottom: 1rem !important
}
.brand-page-mb-2 {
margin-bottom: 0.5rem !important
}
.brand-page-ml-2 {
margin-left: .5rem !important
}
.brand-page-ml-4 {
margin-left: 1rem !important
}
.brand-page-mr-1 {
margin-right: .25rem !important
}
.brand-page-mr-4 {
margin-right: 1rem !important
}
.brand-page-mt-2 {
margin-top: .5rem !important
}
.brand-page-mt-4 {
margin-top: 1rem !important
}
.brand-page-block {
display: block !important
}
.brand-page-inline-block {
display: inline-block !important
}
.brand-page-flex {
display: flex !important
}
.brand-page-grid {
display: grid !important
}
.brand-page-inline-grid {
display: inline-grid !important
}
.brand-page-h-0 {
height: 0
}
.brand-page-h-0\.5 {
height: .125rem !important
}
.brand-page-h-full {
height: 100% !important
}
.brand-page-w-1\/2 {
width: 50% !important
}
.brand-page-w-1\/3 {
width: 33.333333% !important
}
.brand-page-w-11\/12 {
width: 91.666667% !important
}
.brand-page-w-auto {
width: auto !important
}
.brand-page-w-full {
width: 100% !important
}
.-brand-page-translate-y-1\/2 {
--tw-translate-y: -50%
}
.-brand-page-translate-y-1\/2,.brand-page-transform {
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.brand-page-select-none {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.brand-page-list-none {
list-style-type: none
}
.brand-page-grid-cols-1 {
grid-template-columns: repeat(1,minmax(0,1fr))
}
.brand-page-grid-cols-12 {
grid-template-columns: repeat(12,minmax(0,1fr))
}
.brand-page-grid-cols-3 {
grid-template-columns: repeat(3,minmax(0,1fr))
}
.brand-page-grid-cols-4 {
grid-template-columns: repeat(4,minmax(0,1fr))
}
.brand-page-grid-cols-7 {
grid-template-columns: repeat(7,minmax(0,1fr))
}
.brand-page-flex-col {
flex-direction: column
}
.brand-page-flex-wrap {
flex-wrap: wrap
}
.brand-page-items-center {
align-items: center !important
}
.brand-page-justify-center {
justify-content: center !important
}
.brand-page-gap-2 {
gap: .5rem !important
}
.brand-page-gap-4 {
gap: 1rem !important
}
.brand-page-self-center {
align-self: center !important
}
.brand-page-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.brand-page-break-words {
overflow-wrap: break-word
}
.brand-page-rounded-lg {
border-radius: .5rem !important
}
.brand-page-border-0 {
border-width: 0 !important
}
.brand-page-border-\[1px\] {
border-width: 1px !important
}
.brand-page-border-solid {
border-style: solid !important
}
.brand-page-border-none {
border-style: none !important
}
.brand-page-border-\[\#757575\] {
--tw-border-opacity: 1;
border-color: rgb(117 117 117/var(--tw-border-opacity))
}
.brand-page-bg-\[\#FAFAFA\],.brand-page-bg-\[\#fafafa\] {
--tw-bg-opacity: 1;
background-color: rgb(250 250 250/var(--tw-bg-opacity))
}
.brand-page-bg-gray-400 {
--tw-bg-opacity: 1;
background-color: rgb(156 163 175/var(--tw-bg-opacity))
}
.brand-page-bg-transparent {
background-color: initial
}
.brand-page-p-2 {
padding: .5rem !important
}
.brand-page-p-4 {
padding: 1rem !important
}
.brand-page-p-\[30px\] {
padding: 30px !important;
}
.brand-page-px-0 {
padding-left: 0 !important;
padding-right: 0 !important
}
.brand-page-px-1 {
padding-left: .25rem !important;
padding-right: .25rem !important
}
.brand-page-px-2 {
padding-left: .5rem !important;
padding-right: .5rem !important
}
.brand-page-px-4 {
padding-left: 1rem !important;
padding-right: 1rem !important
}
.brand-page-py-2 {
padding-bottom: .5rem !important;
padding-top: .5rem !important
}
.brand-page-py-4 {
padding-bottom: 1rem !important;
padding-top: 1rem !important
}
.brand-page-pb-1 {
padding-bottom: .25rem !important
}
.brand-page-pb-2 {
padding-bottom: .5rem !important
}
.brand-page-pb-4 {
padding-bottom: 1rem !important
}
.brand-page-pl-2 {
padding-left: .5rem !important
}
.brand-page-pt-\[10px\] {
padding-top: 10px !important
}
.brand-page-text-center {
text-align: center !important
}
.brand-page-font-bold {
font-weight: 700 !important
}
.brand-page-font-medium {
font-weight: 500 !important
}
.brand-page-font-semibold {
font-weight: 600 !important
}
.brand-page-leading-tight {
line-height: 1.25 !important
}
.brand-page-text-black {
--tw-text-opacity: 1;
color: rgb(0 0 0/var(--tw-text-opacity))
}
.brand-page-no-underline {
text-decoration-line: none !important
}
.hover\:brand-page-break-normal:hover {
overflow-wrap: normal !important;
word-break: normal !important
}
@media (min-width: 640px) {
.sm\:brand-page-col-span-5 {
grid-column:span 5/span 5
}
.sm\:brand-page-col-span-8 {
grid-column: span 8/span 8
}
.sm\:brand-page-flex {
display: flex !important
}
.sm\:brand-page-w-1\/2 {
width: 50% !important
}
.sm\:brand-page-w-1\/3 {
width: 33.333333% !important
}
.sm\:brand-page-w-4\/5 {
width: 80% !important
}
.sm\:brand-page-grid-cols-2 {
grid-template-columns: repeat(2,minmax(0,1fr))
}
.sm\:brand-page-grid-cols-6 {
grid-template-columns: repeat(6,minmax(0,1fr))
}
.sm\:brand-page-grid-cols-9 {
grid-template-columns: repeat(9,minmax(0,1fr))
}
.sm\:brand-page-pb-4 {
padding-bottom: 1rem !important
}
}
@media (min-width: 768px) {
.md\:brand-page-w-1\/3 {
width: 33.333333% !important
}
.md\:brand-page-grid-cols-3 {
grid-template-columns: repeat(3,minmax(0,1fr))
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="brandPage_Root"></div>
<script>
var brandPageUrl = "https://brandpagebuilder.aperitive.io/shop/9119/brands";
function split(str, q) {
const str_norm = str.toLowerCase()
const q_norm = q.toLowerCase()
const split_norm = str_norm.split(q_norm)
if (split_norm.length == 1) return ["no", str];
let join = str.slice(0, split_norm[0].length)
let pos = join.length
for (let i = 0; i < split_norm.length; i++) {
if (i >= split_norm.length - 1) break;
join += '<b>' + str.slice(pos, pos + q.length) + '</b>' + str.slice(pos + q.length, pos + q.length + split_norm[i + 1].length)
pos += q.length + split_norm[i + 1].length
}
return ['yes', join];
}
function httpGetAsync(theUrl, callback) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var data = xmlHttp.responseText;
var divElement = document.querySelector('.brandPage_Root');
divElement.innerHTML = data;
var formElement = document.querySelector('#searchForm');
if (formElement){
var layout = formElement.getAttribute("layout")
formElement.addEventListener("input",function(e){
const query = e.target.value.toLowerCase();
var totalCount = 0;
const sections = Array.from(document.getElementsByClassName("brand-section"))
sections.forEach(section => {
const brands = Array.from(section.getElementsByClassName("brands"))
var count = 0;
brands.forEach(brand => {
let vendor_name_container = brand.querySelector("a");
let vendor_name = vendor_name_container.innerText;
let url = brand.getAttribute("url");
if(query.length){
const [present_or_not, displayText] = split(vendor_name, query);
if (present_or_not == 'yes'){
brand.style["display"] = 'block';
vendor_name_container.innerHTML = displayText;
}
else{
brand.style["display"] = 'none';
}
count += (present_or_not == "no" ? 0 : 1);
if (layout == "layout_7") {
let cc_block = document.getElementById("cc_value");
cc_block.classList.remove("cc");
}
}
else{
let ven_name = brand.querySelector("p").getAttribute("title")
if (layout == "layout_7") {
let cc_block = document.getElementById("cc_value");
cc_block.classList.add("cc");
}
vendor_name_container.innerHTML = ven_name;
brand.style["display"] = 'block';
count += 1;
}
})
totalCount += count;
if (layout == 'layout_6'){
section.style["display"] = (count ? 'inline-block' : 'none');
}
else{
section.style["display"] = (count ? 'block' : 'none');
}
const shortcutID = "shortcut-" + section.getAttribute("term")
const shortcut = document.getElementById(shortcutID)
if (shortcut) {
shortcut.style = (count ? "" : "color: #ccc;");
}
});
document.getElementById('no-results').style['display'] = (totalCount ? 'none' : 'block');
})
}
const charFilterLinks = document.querySelectorAll('#char_filter a');
if (charFilterLinks) {
charFilterLinks.forEach(link => {
link.addEventListener('click', function (e) {
e.preventDefault();
const targetSectionId = this.getAttribute('data-target');
const targetElement = document.getElementById(targetSectionId);
if (targetElement) {
var viewportOffset = targetElement.getBoundingClientRect();
var top = viewportOffset.top;
window.scroll({
behavior: 'smooth',
left: 0,
top: top
});
}
});
});
};
const toggleButtons = document.querySelectorAll('.dtoggle');
if (toggleButtons){
toggleButtons.forEach(function (toggleButton) {
toggleButton.addEventListener('click', function () {
var brands_block_id = toggleButton.getAttribute('brands_id');
var content_box = document.getElementById(brands_block_id);
var plus_minus = toggleButton.querySelector('#plus-minus');
if (content_box.style.display === 'none' || content_box.style.display === '') {
content_box.style.display = 'block';
plus_minus.textContent = '-';
plus_minus.style.fontSize = '40px';
} else {
content_box.style.display = 'none';
plus_minus.textContent = '+';
plus_minus.style.fontSize = '30px';
}
});
})
};
}
};
xmlHttp.open('GET', theUrl + window.location.search, true);
xmlHttp.send(null);
}
httpGetAsync("https://brandpagebuilder.aperitive.io/shop/9119/brands");
var storename = "gatetestshop194.myshopify.com";
</script>
