ahmza/blog-ahmza-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added shop page

Browse Source
This commit is contained in:
Hamza Ahmed
2023-11-14 00:00:10 +00:00
parent 79a42ff9d5
commit d6cbde3e8e
19 changed files with 443 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/extended/style.css
+6 -2
View File
@@ -1,4 +1,8 @@
h1 {
color: rgb(145, 70, 255);
:root{
--purple: rgb(145, 70, 255);
}
h1 {
color: var(--purple)
}
config.yml
+7 -3
View File
@@ -30,7 +30,7 @@ params:
images: ["http://blog.ahmza.com/content/images/2021/11/Padlock-1.png"] #Change this
DateFormat: "January 2, 2006"
defaultTheme: dark # dark, light
disableThemeToggle: false
disableThemeToggle: true
ShowReadingTime: true
ShowShareButtons: false
@@ -132,14 +132,18 @@ menu:
name: tags
url: /tags/
weight: 20
- identifier: shop
name: shop
url: /shop/
weight: 30
- identifier: contact
name: contact
url: /contact
weight: 30
weight: 40
- identifier: search
name: search
url: /search/
weight: 40
weight: 50
# Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma
pygmentsUseClasses: true
markup:
content/products/Skullstache-Holographic-Sticker-6.md
+9
View File
@@ -0,0 +1,9 @@
---
title: Skullstache Holographic Sticker
code: SkullstacheSticker
image: 'http://localhost:1313/img/SkullstacheHolographicSticker.png'
---
This is a set of 3 stickers you can purchase to personalise any of your surfaces.
The sticker dimensions are: 76mm x 76mm
content/shop.md
+6
View File
@@ -0,0 +1,6 @@
---
layout: shop
title: "Shop"
date: 2023-11-11T03:00:04Z
draft: false
---
layouts/page/shop.html
+177
View File
@@ -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>
layouts/shortcodes/rawhtml.html
+2
View File
@@ -0,0 +1,2 @@
<!-- raw html -->
{{.Inner}}
static/css/drop-in.css
+83
View File
@@ -0,0 +1,83 @@
:root{
--cl-color-primary: var(--tertiary);
--cl-color-white: var(--content);
}
cl-availability-status[aria-disabled=true],cl-identity-status[aria-disabled=true]{
display:none
}
cl-price-amount{
color: var(--purple);
font-size:1em;
font-weight:600;
line-height:1.5em
}
cl-price-amount[type=compare-at]{
color: var(--content);
font-size:.875em;
font-weight:300;
line-height:1.25em;
text-decoration:line-through
}
cl-price-amount[type=compare-at]::part(strikethrough){
text-decoration:none
}
cl-add-to-cart{
display:inline-block;
background-image:none;
border:none;
font-weight:600;
color:var(--cl-color-white);
padding:.75rem 1rem .75rem 1rem;
border-radius: var(--radius);
background-color: var(--cl-color-primary);
cursor:default;
position: relative;
bottom: 0;
}
cl-add-to-cart:not([aria-disabled=true]){
background-color:var(--cl-color-primary);
cursor:pointer;
}
cl-cart-link,.cl-cart-link{
position:relative;
display:inline-block;
cursor:pointer;
}
cl-cart-link cl-cart-count,.cl-cart-link cl-cart-count{
position:absolute;
bottom:0;
right:0;
font-size:.5rem;
border-radius:50%;
background-color:var(--cl-color-primary);
min-width:1rem;
height:1rem;
display:flex;
align-items:center;
justify-content:center;
color:var(--cl-color-white);
transform:translate(120%, 0%);
padding:.2rem;
}
cl-cart-link cl-cart-count[hide-when-empty=""],cl-cart-link cl-cart-count[hide-when-empty=true],.cl-cart-link cl-cart-count[hide-when-empty=""],.cl-cart-link cl-cart-count[hide-when-empty=true]{
opacity:0
}
cl-cart-link cl-cart-count[quantity],.cl-cart-link cl-cart-count[quantity]{
transition:opacity .3s;opacity:1
}
cl-cart-link svg~cl-cart-count,.cl-cart-link svg~cl-cart-count{
bottom:0%;
right:0%;
transform:translate(30%, 0%);
}
static/css/minicart.css
+69
View File
@@ -0,0 +1,69 @@
cl-cart[type=mini]{
--cl-cart-mini-backdrop-bg: #000;
--cl-cart-mini-backdrop-opacity: 0.4;
--cl-cart-mini-backdrop-shadow: -1px 0px 10px rgba(0, 0, 0, .3);
--cl-cart-mini-modal-z-index: 100;
--cl-cart-mini-modal-bg: #fff;
--cl-cart-mini-modal-width: 400px;
--cl-cart-mini-modal-max-width: calc(100vw - 40px);
--cl-cart-mini-transition-duration: .3s;
--cl-cart-mini-transition-timing-function: ease-in-out;
display:flex;
cursor:auto;
position:fixed;
z-index:var(--cl-cart-mini-modal-z-index);
top:0;
width:var(--cl-cart-mini-modal-width);
max-width:var(--cl-cart-mini-modal-max-width);
height:100%;
pointer-events:none;
box-sizing:border-box;
box-shadow:none;
transition:box-shadow var(--cl-cart-mini-transition-duration) var(--cl-cart-mini-transition-timing-function)
}
cl-cart[type=mini]::before,cl-cart[type=mini]::after{
position:fixed;
content:" ";
opacity:0;
width:100%;
height:100%;
top:0;
right:0;
z-index:-1;
transition:opacity var(--cl-cart-mini-transition-duration) var(--cl-cart-mini-transition-timing-function)
}
cl-cart[type=mini]::before{
background:var(--cl-cart-mini-backdrop-bg)
}
cl-cart[type=mini]::after{
position:fixed;
width:var(--cl-cart-mini-modal-width);
max-width:var(--cl-cart-mini-modal-max-width);
box-shadow:var(--cl-cart-mini-backdrop-shadow)
}
cl-cart[type=mini],cl-cart[type=mini]::after{
right:calc(var(--cl-cart-mini-modal-width)*-1 + 0px);
transition:right var(--cl-cart-mini-transition-duration) var(--cl-cart-mini-transition-timing-function),opacity var(--cl-cart-mini-transition-duration) var(--cl-cart-mini-transition-timing-function)
}
cl-cart[type=mini][open]:not([open=false]){
right:0;
pointer-events:initial
}
cl-cart[type=mini][open]:not([open=false])::before{
opacity:var(--cl-cart-mini-backdrop-opacity)
}
cl-cart[type=mini][open]:not([open=false])::after{
right:0;
opacity:1
}
body.cl-cart--open{
overflow:hidden
}
static/img/SkullstacheHolographicSticker.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

static/img/products/SkullstacheHolographicSticker.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

static/products.json
+9
View File
@@ -0,0 +1,9 @@
[
{
"id": "STRATUS",
"name": "Stratus",
"price": 9.95,
"image": "",
"description": 'Testing descriptions and products for the shop page'
}
]
tina/__generated__/_graphql.json
Generated
+1 -1
View File
File diff suppressed because one or more lines are too long
tina/__generated__/_schema.json
Generated
+1 -1
View File
@@ -1 +1 @@
{"version":{"fullVersion":"1.4.27","major":"1","minor":"4","patch":"27"},"meta":{"flags":["experimentalData"]},"collections":[{"name":"post","label":"Posts","path":"content/posts","fields":[{"type":"string","name":"title","label":"Title","isTitle":true,"required":true,"namespace":["post","title"],"searchable":true},{"type":"rich-text","name":"body","label":"Body","isBody":true,"namespace":["post","body"],"searchable":true,"parser":{"type":"markdown"}}],"namespace":["post"]},{"name":"products","label":"Products","path":"content/products","fields":[{"type":"string","name":"productName","title":"Product Name","isTitle":true,"required":true,"namespace":["products","productName"],"searchable":true},{"type":"rich-text","name":"description","label":"Description","isBody":true,"namespace":["products","description"],"searchable":true,"parser":{"type":"markdown"}}],"namespace":["products"]}],"config":{"media":{"tina":{"publicFolder":"static","mediaRoot":""}}}}
{"version":{"fullVersion":"1.4.27","major":"1","minor":"4","patch":"27"},"meta":{"flags":["experimentalData"]},"collections":[{"name":"post","label":"Posts","path":"content/posts","fields":[{"type":"string","name":"title","label":"Title","isTitle":true,"required":true,"namespace":["post","title"],"searchable":true},{"type":"rich-text","name":"body","label":"Body","isBody":true,"namespace":["post","body"],"searchable":true,"parser":{"type":"markdown"}}],"namespace":["post"]},{"name":"products","label":"Products","path":"content/products","fields":[{"type":"string","name":"title","label":"Product Name","isTitle":true,"required":true,"namespace":["products","title"],"searchable":true},{"type":"string","name":"code","label":"Code","required":true,"namespace":["products","code"],"searchable":true},{"type":"string","name":"image","label":"Image","required":false,"namespace":["products","image"],"searchable":true},{"type":"rich-text","name":"description","label":"Description","isBody":true,"namespace":["products","description"],"searchable":true,"parser":{"type":"markdown"}}],"namespace":["products"]}],"config":{"media":{"tina":{"publicFolder":"static","mediaRoot":""}},"search":{"tina":{"indexerToken":"3ad8991708087bb81af5aa2bd79586afd6d847fb","stopwordLanguages":["eng"]},"indexBatchSize":100,"maxSearchIndexFieldLength":100}}}
tina/__generated__/config.prebuild.jsx
Generated
+22 -2
View File
@@ -46,11 +46,23 @@ var config_default = defineConfig({
fields: [
{
type: "string",
name: "productName",
title: "Product Name",
name: "title",
label: "Product Name",
isTitle: true,
required: true
},
{
type: "string",
name: "code",
label: "Code",
required: true
},
{
type: "string",
name: "image",
label: "Image",
required: false
},
{
type: "rich-text",
name: "description",
@@ -60,6 +72,14 @@ var config_default = defineConfig({
]
}
]
},
search: {
tina: {
indexerToken: "3ad8991708087bb81af5aa2bd79586afd6d847fb",
stopwordLanguages: ["eng"]
},
indexBatchSize: 100,
maxSearchIndexFieldLength: 100
}
});
export {
tina/__generated__/frags.gql
Generated
+3 -1
View File
@@ -6,6 +6,8 @@ fragment PostParts on Post {
fragment ProductsParts on Products {
__typename
productName
title
code
image
description
}
tina/__generated__/schema.gql
Generated
+9 -3
View File
@@ -127,7 +127,9 @@ type PostConnection implements Connection {
}
type Products implements Node & Document {
productName: String!
title: String!
code: String!
image: String
description: JSON
id: ID!
_sys: SystemInfo!
@@ -135,7 +137,9 @@ type Products implements Node & Document {
}
input ProductsFilter {
productName: StringFilter
title: StringFilter
code: StringFilter
image: StringFilter
description: RichTextFilter
}
@@ -178,7 +182,9 @@ input PostMutation {
}
input ProductsMutation {
productName: String
title: String
code: String
image: String
description: JSON
}
tina/__generated__/types.ts
Generated
+15 -7
View File
@@ -224,7 +224,9 @@ export type PostConnection = Connection & {
export type Products = Node & Document & {
__typename?: 'Products';
productName: Scalars['String']['output'];
title: Scalars['String']['output'];
code: Scalars['String']['output'];
image?: Maybe<Scalars['String']['output']>;
description?: Maybe<Scalars['JSON']['output']>;
id: Scalars['ID']['output'];
_sys: SystemInfo;
@@ -232,7 +234,9 @@ export type Products = Node & Document & {
};
export type ProductsFilter = {
productName?: InputMaybe<StringFilter>;
title?: InputMaybe<StringFilter>;
code?: InputMaybe<StringFilter>;
image?: InputMaybe<StringFilter>;
description?: InputMaybe<RichTextFilter>;
};
@@ -329,13 +333,15 @@ export type PostMutation = {
};
export type ProductsMutation = {
productName?: InputMaybe<Scalars['String']['input']>;
title?: InputMaybe<Scalars['String']['input']>;
code?: InputMaybe<Scalars['String']['input']>;
image?: InputMaybe<Scalars['String']['input']>;
description?: InputMaybe<Scalars['JSON']['input']>;
};
export type PostPartsFragment = { __typename: 'Post', title: string, body?: any | null };
export type ProductsPartsFragment = { __typename: 'Products', productName: string, description?: any | null };
export type ProductsPartsFragment = { __typename: 'Products', title: string, code: string, image?: string | null, description?: any | null };
export type PostQueryVariables = Exact<{
relativePath: Scalars['String']['input'];
@@ -361,7 +367,7 @@ export type ProductsQueryVariables = Exact<{
}>;
export type ProductsQuery = { __typename?: 'Query', products: { __typename: 'Products', id: string, productName: string, description?: any | null, _sys: { __typename?: 'SystemInfo', filename: string, basename: string, breadcrumbs: Array<string>, path: string, relativePath: string, extension: string } } };
export type ProductsQuery = { __typename?: 'Query', products: { __typename: 'Products', id: string, title: string, code: string, image?: string | null, description?: any | null, _sys: { __typename?: 'SystemInfo', filename: string, basename: string, breadcrumbs: Array<string>, path: string, relativePath: string, extension: string } } };
export type ProductsConnectionQueryVariables = Exact<{
before?: InputMaybe<Scalars['String']['input']>;
@@ -373,7 +379,7 @@ export type ProductsConnectionQueryVariables = Exact<{
}>;
export type ProductsConnectionQuery = { __typename?: 'Query', productsConnection: { __typename?: 'ProductsConnection', totalCount: number, pageInfo: { __typename?: 'PageInfo', hasPreviousPage: boolean, hasNextPage: boolean, startCursor: string, endCursor: string }, edges?: Array<{ __typename?: 'ProductsConnectionEdges', cursor: string, node?: { __typename: 'Products', id: string, productName: string, description?: any | null, _sys: { __typename?: 'SystemInfo', filename: string, basename: string, breadcrumbs: Array<string>, path: string, relativePath: string, extension: string } } | null } | null> | null } };
export type ProductsConnectionQuery = { __typename?: 'Query', productsConnection: { __typename?: 'ProductsConnection', totalCount: number, pageInfo: { __typename?: 'PageInfo', hasPreviousPage: boolean, hasNextPage: boolean, startCursor: string, endCursor: string }, edges?: Array<{ __typename?: 'ProductsConnectionEdges', cursor: string, node?: { __typename: 'Products', id: string, title: string, code: string, image?: string | null, description?: any | null, _sys: { __typename?: 'SystemInfo', filename: string, basename: string, breadcrumbs: Array<string>, path: string, relativePath: string, extension: string } } | null } | null> | null } };
export const PostPartsFragmentDoc = gql`
fragment PostParts on Post {
@@ -385,7 +391,9 @@ export const PostPartsFragmentDoc = gql`
export const ProductsPartsFragmentDoc = gql`
fragment ProductsParts on Products {
__typename
productName
title
code
image
description
}
`;
tina/config.ts
+23 -2
View File
@@ -47,11 +47,23 @@ export default defineConfig({
fields: [
{
type: "string",
name: "productName",
title: "Product Name",
name: "title",
label: "Product Name",
isTitle: true,
required: true,
},
{
type: "string",
name: "code",
label: "Code",
required: true,
},
{
type: "string",
name: "image",
label: "Image",
required: false,
},
{
type: "rich-text",
name: "description",
@@ -62,4 +74,13 @@ export default defineConfig({
},
],
},
search: {
tina: {
indexerToken: '3ad8991708087bb81af5aa2bd79586afd6d847fb',
stopwordLanguages: ['eng']
},
indexBatchSize: 100,
maxSearchIndexFieldLength: 100
},
});
tina/tina-lock.json
+1 -1
View File
File diff suppressed because one or more lines are too long