crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-19 07:56:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

api and hero

Browse Source
This commit is contained in:
Joel Varty 2021-06-18 13:08:59 -04:00
parent 2e83467ad6
commit 52f2cccc11
4 changed files with 62 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/agility-modules/Hero.tsx
View File

@ -16,8 +16,8 @@ const HeroModule:Module<Fields> = ({ module: {fields }}) => {
<Hero
headline={fields.title}
description={fields.description}
linkText={fields.cTA?.text}
linkUrl={fields.cTA?.href}
ctaText={fields.cTA?.text}
ctaUrl={fields.cTA?.href}
/>
)
}

11
components/ui/Hero/Hero.tsx
View File

@ -6,10 +6,13 @@ import Link from 'next/link'
interface HeroProps {
className?: string
headline: string
description: string
description: string,
ctaUrl:string,
ctaText: string
}
const Hero: FC<HeroProps> = ({ headline, description }) => {
const Hero: FC<HeroProps> = ({ headline, description, ctaUrl, ctaText }) => {
return (
<div className="bg-accent-9 border-b border-t border-accent-2">
<Container>
@ -17,9 +20,9 @@ const Hero: FC<HeroProps> = ({ headline, description }) => {
<h2 className={s.title}>{headline}</h2>
<div className={s.description}>
<p>{description}</p>
<Link href="/">
<Link href={ctaUrl}>
<a className="flex items-center text-accent-0 pt-3 font-bold hover:underline cursor-pointer w-max-content">
Read it here
{ctaText}
<ArrowRight width="20" heigh="20" className="ml-1" />
</a>
</Link>

7
pages/api/search-products.ts
View File

@ -2,6 +2,7 @@
import { NextApiRequest, NextApiResponse } from "next"
import commerce from '@lib/api/commerce'
import { truncate } from "fs/promises"
export default async (req: NextApiRequest, res: NextApiResponse) => {
@ -50,8 +51,12 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
imageUrl: p.images[0].url,
price: p.price,
id: p.id,
description: p.description
description: p.description,
slug: p.path || p.slug
}
}).sort((a, b) => {
if (a.name > b.name) return 1
return -1
})
res.statusCode = 200

62
public/custom-fields.js
View File

@ -220,8 +220,12 @@ var ChooseProductCustomField = function () {
var htmlContent = `
<style>
.prod-item {
display: flex;
align-items: center;
}
.prod-img {
display:inline-block;
display:block;
height: 40px;
border-radius: 10px;
width: 40px;
@ -238,7 +242,7 @@ var ChooseProductCustomField = function () {
background-repeat: no-repeat;
}
.prod-text {
display:inline-block;
flex: 1;
margin-left: 5px;
line-height: 20px;
}
@ -269,15 +273,14 @@ var ChooseProductCustomField = function () {
self.formatResult = function (item) {
return $(`<div class='prod-img' style="background-image:url('${item.node.featuredImage.transformedSrc}')"/></div><div class='prod-text'>${item.node.title}</div>`);
return $(`<div class="prod-item"><div class='prod-img' style="background-image:url('${item.imageUrl}')"></div><div class='prod-text'>${item.name}</div></div>`);
//return item.node.title;
};
self.formatSelection = function (item) {
return $(`<div class='prod-img-small' style="background-image:url('${item.node.featuredImage.transformedSrc}')"/></div><div class='prod-text'>${item.node.title}</div>`);
return $(`<div class="prod-item"><div class='prod-img-small' style="background-image:url('${item.imageUrl}')"></div><div class='prod-text'>${item.name}</div></div>`);
};
self.ajaxRequest = null;
@ -299,21 +302,13 @@ var ChooseProductCustomField = function () {
},
id: function (obj) {
//set content of the Agility CMS Content Item
//options.contentItem.Values.ExternalID(obj.ID)
//options.contentItem.Values.MyField1(obj.Value1)
//options.contentItem.Values.MyField2(obj.Value2)
//etc...
//save the whole thing as JSON
return JSON.stringify(obj.node)
return JSON.stringify(obj)
},
ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
//url: "https://sample-swag-shopify.vercel.app/api/search-products",
url: "http://localhost:3000/api/search-products",
url: "https://nextjs-commerce-agility-cms.vercel.app/api/search-products",
//url: "http://localhost:3000/api/search-products",
dataType: 'json',
type: "get",
quietMillis: 250,
@ -332,19 +327,17 @@ var ChooseProductCustomField = function () {
};
},
current: function (data) {
console.log("CURRENT", data)
},
cache: true
},
initSelection: function (element, callback) {
//use the hidden "product name" field
var json = ko.unwrap(options.fieldBinding);
console.log({json})
if (json && json.length > 0) {
if (json && json.length > 0) {
var node = JSON.parse(json)
console.log({node})
callback({node})
callback(node)
}
@ -365,7 +358,32 @@ var ChooseProductCustomField = function () {
// }
},
allowClear: false,
dropdownCssClass: "bigdrop"
dropdownCssClass: "bigdrop",
change: function(e) {
if (e.added) {
var obj = e.added
//set the title and the description if we have them
if (options.contentItem.Values.Title) {
options.contentItem.Values.Title(obj.name)
}
if (options.contentItem.Values.Description) {
if (obj.description.indexOf("/>") != -1) {
obj.description = $(obj.description).text()
}
options.contentItem.Values.Description(obj.description)
}
if (options.contentItem.Values.CTA) {
var productUrl = "~/products" + obj.slug
var cta = "<a href=" + productUrl + ">Buy Now</a>"
options.contentItem.Values.CTA(cta)
}
}
}
};
}