Updated product page, trying to fix tina vars
This commit is contained in:
Hamza Ahmed
@@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ site.Language }}" dir="{{ .Language.LanguageDirection | default "auto" }}">
|
||||
|
||||
<head>
|
||||
{{- partial "head.html" . }}
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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" />
|
||||
<link href="/css/shop.css" rel="stylesheet" />
|
||||
<link href="/css/product.css" rel="stylesheet"/>
|
||||
</head>
|
||||
|
||||
<body class="
|
||||
{{- if eq site.Params.defaultTheme `dark` -}}
|
||||
{{- print " dark" }}
|
||||
{{- end -}}
|
||||
" id="top">
|
||||
{{- partialCached "header.html" . .Page -}}
|
||||
<main class="main">
|
||||
|
||||
{{- block "main" . }}{{ end }}
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<img src="{{ .Params.image }}" alt="Product Image">
|
||||
<h1>{{ .Title }}</h1>
|
||||
<p>Description of the product.</p>
|
||||
<button>Shop Now</button>
|
||||
</section>
|
||||
|
||||
<!-- Product Details Section -->
|
||||
<section class="product-details">
|
||||
<h2>Product Details</h2>
|
||||
<p>More detailed description of the product and its features.</p>
|
||||
<ul>
|
||||
<li>Specification 1: Value</li>
|
||||
<li>Specification 2: Value</li>
|
||||
<!-- Add more specifications as needed -->
|
||||
</ul>
|
||||
<p>Price: $XX.XX</p>
|
||||
<button>Add to Cart</button>
|
||||
</section>
|
||||
|
||||
<!-- Image Gallery Section -->
|
||||
<section class="image-gallery">
|
||||
<img src="{{ .Params.image }}" alt="Product Image 1">
|
||||
<img src="{{ .Params.image }}" alt="Product Image 2">
|
||||
<!-- Add more images as needed -->
|
||||
</section>
|
||||
|
||||
<!-- Related Products Section -->
|
||||
<section class="related-products">
|
||||
<h2>Related Products</h2>
|
||||
<!-- Display related products or accessories here -->
|
||||
</section>
|
||||
|
||||
</main>
|
||||
{{ partialCached "footer.html" . .Layout .Kind (.Param "hideFooter") (.Param "ShowCodeCopyButtons") -}}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+5
-81
@@ -6,6 +6,7 @@
|
||||
<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" />
|
||||
<link href="/css/shop.css" rel="stylesheet" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
@@ -21,9 +22,9 @@
|
||||
<script>
|
||||
(function() {
|
||||
window.commercelayerConfig = {
|
||||
clientId: 'FhOf27nCAGlzcFebyY1I5I_IERTt_9axJ9QTcID62Ao',
|
||||
clientId: 'sU2jXv9bJKNyj8Li6bumfgnrGJTrRKHFmkcdtHlmrss',
|
||||
slug: 'ahmza',
|
||||
scope: 'market:15644',
|
||||
scope: 'market:15657',
|
||||
returnUrl: 'https://commercelayer.io/blog/composable-commerce-with-micro-frontends'
|
||||
}
|
||||
}());
|
||||
@@ -74,10 +75,10 @@
|
||||
</div>
|
||||
<div class=prodStock>
|
||||
<cl-availability code="{{ .Params.code }}">
|
||||
<cl-availability-status type="available" style="color: green;">
|
||||
<cl-availability-status type="available">
|
||||
• in stock
|
||||
</cl-availability-status>
|
||||
<cl-availability-status type="unavailable" style="color: red;">
|
||||
<cl-availability-status type="unavailable">
|
||||
• out of stock
|
||||
</cl-availability-status>
|
||||
</cl-availability>
|
||||
@@ -91,83 +92,6 @@
|
||||
{{ 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>
|
||||
|
||||
Reference in New Issue
Block a user