added shop page
This commit is contained in:
Hamza Ahmed
@@ -0,0 +1,177 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ site.Language }}" dir="{{ .Language.LanguageDirection | default "auto" }}">
|
||||
|
||||
<head>
|
||||
{{- partial "head.html" . }}
|
||||
<script type="module" src="https://cdn.jsdelivr.net/npm/@commercelayer/drop-in.js@1.0.0/dist/drop-in/drop-in.esm.js"></script>
|
||||
<link href="/css/minicart.css" rel="stylesheet" />
|
||||
<link href="/css/drop-in.css" rel="stylesheet" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
|
||||
|
||||
<body class="
|
||||
{{- if eq site.Params.defaultTheme `dark` -}}
|
||||
{{- print " dark" }}
|
||||
{{- end -}}
|
||||
" id="top">
|
||||
{{- partialCached "header.html" . .Page -}}
|
||||
<main class="main">
|
||||
<script>
|
||||
(function() {
|
||||
window.commercelayerConfig = {
|
||||
clientId: 'FhOf27nCAGlzcFebyY1I5I_IERTt_9axJ9QTcID62Ao',
|
||||
slug: 'ahmza',
|
||||
scope: 'market:15644',
|
||||
returnUrl: 'https://commercelayer.io/blog/composable-commerce-with-micro-frontends'
|
||||
}
|
||||
}());
|
||||
</script>
|
||||
|
||||
<div class=shop-nav-div>
|
||||
<ul class=shop-nav>
|
||||
<li>
|
||||
<cl-identity-status type="guest">
|
||||
<cl-identity-link type="login" target="_parent">
|
||||
Login
|
||||
</cl-identity-link>
|
||||
</cl-identity-status>
|
||||
</li>
|
||||
<li>
|
||||
<cl-identity-status type="customer">
|
||||
<cl-identity-link type="login" target="_parent">
|
||||
Account
|
||||
</cl-identity-link>
|
||||
</cl-identity-status>
|
||||
</li>
|
||||
<li>
|
||||
<cl-cart-link>
|
||||
cart
|
||||
<cl-cart-count hide-when-empty="true"></cl-cart-count>
|
||||
<cl-cart></cl-cart>
|
||||
</cl-cart-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class=productList>
|
||||
{{ range ( where .Site.RegularPages "Type" "products" ) }}
|
||||
<div class=product>
|
||||
<a href="{{ .RelPermalink }}">
|
||||
<div class=prodImage>
|
||||
<img src="{{ .Params.image }}">
|
||||
</div>
|
||||
<div class=prodTitle>
|
||||
<h4>{{ .Title }}<h4>
|
||||
</div>
|
||||
</a>
|
||||
<div class=prodPrice>
|
||||
<cl-price code="{{ .Params.code }}">
|
||||
<cl-price-amount type="compare-at">.</cl-price-amount>
|
||||
<cl-price-amount type="price">.</cl-price-amount>
|
||||
</cl-price>
|
||||
</div>
|
||||
<div class=prodStock>
|
||||
<cl-availability code="{{ .Params.code }}">
|
||||
<cl-availability-status type="available" style="color: green;">
|
||||
• in stock
|
||||
</cl-availability-status>
|
||||
<cl-availability-status type="unavailable" style="color: red;">
|
||||
• out of stock
|
||||
</cl-availability-status>
|
||||
</cl-availability>
|
||||
</div>
|
||||
<div class=prodAddToCart>
|
||||
<cl-add-to-cart code="{{ .Params.code }}">
|
||||
Add to cart
|
||||
</cl-add-to-cart>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.main {
|
||||
position: relative;
|
||||
min-height: calc(100vh - var(--header-height) - var(--footer-height));
|
||||
max-width: calc(1024px + var(--gap) * 2);
|
||||
margin: auto;
|
||||
padding var(--gap)
|
||||
|
||||
}
|
||||
.productList {
|
||||
display: inline-grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
grid-auto-rows: 400px;
|
||||
grid-gap: 30px 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.product {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-color: var(--entry);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
text-align: center;
|
||||
padding: var(--gap);
|
||||
}
|
||||
img{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.prodImage {
|
||||
display:block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 100%;
|
||||
border-radius: var(--radius);
|
||||
overflow-clip-margin: content-box;
|
||||
overflow: clip;
|
||||
padding-bottom: 10px
|
||||
}
|
||||
.shop-nav {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
max-width: calc(var(--nav-width) + var(--gap) * 2);
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: auto;
|
||||
}
|
||||
.shop-nav li {
|
||||
padding-right:10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 608px) {
|
||||
.productList {
|
||||
grid-template-columns: auto auto auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 609px) {
|
||||
.productList {
|
||||
grid-template-columns: auto auto auto auto;
|
||||
}
|
||||
.shop-nav {
|
||||
justify-content: flex-end
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
.productList {
|
||||
grid-template-columns: auto auto auto auto auto;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</main>
|
||||
{{ partialCached "footer.html" . .Layout .Kind (.Param "hideFooter") (.Param "ShowCodeCopyButtons") -}}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
<!-- raw html -->
|
||||
{{.Inner}}
|
||||
Reference in New Issue
Block a user