@mezereon/bigcommerce-stencil
Version:
BigCommerce UI components for Mezereon Xperience
97 lines (96 loc) • 4.16 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<title>BigCommerce - Mezereon XP</title>
<link rel="stylesheet" href="/style.css">
<script type="text/javascript">
(function (w) {
w.mz = w.mz || {}; w.mz.track = w.mz.track || function() { (w.mz.q = w.mz.q || []).push(arguments) }
w.mz.config = {
tracking: {
url: 'https://app.mezereon/t',
key: 'track-bef5ae02-d2a7-4496-9892-10ce4a3f6bb4',
log: true
},
search: {
url: 'https://app.mezereon/api/1.0',
key: 'search-5110e3e3-10b0-464f-aade-55a55dd6c100'
},
scroll: {
element: ".mz-query",
duration: 500,
}
};
})(window);
</script>
<script src="./mezereon.js" defer></script>
</head>
<body>
<noscript>
<strong>We're sorry but ui-components-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div class="mz-wrapper">
<a href="https://www.mezereon.com" target="blank">
<img
alt="Mezereon logo"
src="https://cdn.mezereon.net/assets/mezereon-logo.png"
style="float: right; height: 40px; margin-top: 10px"
/>
</a>
<div class="mz-container mz-flex">
<div id="mz-autocomplete" class="mz-flex-fit">
<input type="text" name="search_query" placeholder="search the store.." />
<mz-autocomplete
selector="input[name='search_query']"
query-param="search_query"
search-url="/">
</mz-autocomplete>
</div>
</div>
<div data-mz-zone-id="home-zone-1" data-mz-display="bundle1"></div>
<div data-mz-zone-id="home-zone-2" data-mz-display="bundle"></div>
<div id="mz-app">
<mz-context ref="context"></mz-context>
<img src="https://cdn.mezereon.net/assets/loading.gif" class="mz-loader" v-show="loading" />
<div v-cloak class="mz-results" v-show="!loading">
<div :class="['mz-box-body', filterLayoutClass]">
<mz-refinements :horizontal="true" class="mz-aggs-horizontal mz-hidden-xs"></mz-refinements>
<mz-selections></mz-selections>
<div class="mz-row">
<div class="mz-aggs mz-aggs-vertical mz-hidden-xs mz-hidden-xs page-sidebar">
<portal to="mz-mobile-facets" :disabled="!portalNav">
<mz-banner zone="facets-top-1"></mz-banner>
<mz-banner zone="facets-top-2"></mz-banner>
<mz-refinements></mz-refinements>
<mz-banner zone="facets-bottom-1"></mz-banner>
<mz-banner zone="facets-bottom-2"></mz-banner>
</portal>
</div>
<div class="page-content">
<mz-action-bar @toggle-portal-nav="togglePortalNav">
<mz-hits-info></mz-hits-info>
</mz-action-bar>
<mz-banner zone="results-top-1"></mz-banner>
<mz-banner zone="results-top-2"></mz-banner>
<mz-hits-grid v-slot="single" class="mz-grid productGrid">
<hit-grid-item :item="single.hit.item" :score="single.hit.score" :index="single.index"></hit-grid-item>
</mz-hits-grid>
<mz-banner zone="results-bottom-1"></mz-banner>
<mz-banner zone="results-bottom-2"></mz-banner>
</div>
<mz-pagination></mz-pagination>
</div>
</div>
</div>
<ch-drawer location="right" custom-class="mz-drawer" area="80%" :visible.sync="portalNav">
<portal-target name="mz-mobile-facets"></portal-target>
</ch-drawer>
</div>
</div>
<!-- built files will be auto injected -->
</body>
</html>