Ship your e-commerce site in just a few clicks Spin up a new project, or connect an existing, and explore rollbacks, CI/CD, edge functions, collaborative deploy previews, and more.
e-commerce site AI chatbot landing page edge function export function CartMain ({ layout , cart } : CartMainProps ) { const linesCount = Boolean (cart?.lines?.nodes?.length || 0 ); const withDiscount = cart && Boolean (cart.discountCodes. filter (( code ) => code.applicable).length); const className = `cart-main ${ withDiscount ? ' with-discount ' : '' } ` ; return ( < div className ={ className } > < CartEmpty hidden ={ linesCount } layout ={ layout } /> < CartDetails cart ={ cart } layout ={ layout } /> </ div > ); } const stream = await getChatStream ( { ... appConfig.apiConfig, user : context.ip, messages : [{ role : " system " , content : prompt }, ... messages], }, appConfig. OPENAI_API_KEY ?? "" ); return new Response (stream, { headers : { " Content-Type " : " text/plain " }, }); --- const homepage = await getEntryBySlug ( " homepage " , " index " ); const { banner, key_features, service, testimonial } = homepage.data; --- < Base > < Banner banner ={ banner } /> < KeyFeatures key_features ={ key_features } /> < Service service ={ service } /> < Testimonial testimonial ={ testimonial } /> < Cta /> </ Base > import type { Config, Context } from " @netlify/edge-functions " ; export default async ( request : Request , context : Context ) => { return Response. json ({ geo : context.geo }); }; export const config : Config = { path : " /geolocation " , }; \n );\n}"}},{"title":"AI chatbot","icon":"sparkles","url":"https://app.netlify.com/start/deploy?repository=https://github.com/ascorbic/daneel","code":{"lang":"js","block":"const stream = await getChatStream(\n {\n ...appConfig.apiConfig,\n user: context.ip,\n messages: [{ role: \"system\", content: prompt }, ...messages],\n },\n appConfig.OPENAI_API_KEY ?? \"\"\n);\nreturn new Response(stream, {\n headers: { \"Content-Type\": \"text/plain\" },\n});"}},{"title":"landing page","icon":"browser","url":"https://app.netlify.com/start/deploy?repository=https://github.com/themefisher/pinwheel-astro","code":{"lang":"js","block":"---\nconst homepage = await getEntryBySlug(\"homepage\", \"index\");\nconst { banner, key_features, service, testimonial } = homepage.data;\n---\n\n
\n
\n
\n
\n
\n
\n"}},{"title":"edge function","icon":"lambda","url":"https://app.netlify.com/start/deploy?repository=https://github.com/netlify/edge-functions-examples&utm_campaign=devex&utm_source=edge-functions-examples&utm_medium=web&utm_content=Deploy%20Edge%20Functions%20Examples%20to%20Netlify","code":{"lang":"js","block":"import type { Config, Context } from \"@netlify/edge-functions\";\n\nexport default async (request: Request, context: Context) => {\n return Response.json({ geo: context.geo });\n};\n\nexport const config: Config = {\n path: \"/geolocation\",\n};"}}];
const devPancake = document.getElementById('dev-pancake');
const dynamicText = devPancake.querySelector('.dev-pancake-dynamic-text');
const deployBtn = devPancake.querySelector('.dev-pancake-deploy-btn');
const tabsComponent = devPancake.querySelector('the-tabs');
const tabs = devPancake.querySelectorAll('[role="tab"]');
const tabIcons = devPancake.querySelectorAll('[role="tab"] .icon');
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
let fps = 20;
let interval = Math.floor(1000 / fps);
let startTime = performance.now();
let prevTime = startTime;
let deltaTime = 0;
let currentTime = 0;
let currentIndex = -1;
let animateTextRAF;
let cycleTextTimeout;
startCycleText();
tabs.forEach((tab, index) => {
tab.addEventListener('tab-change', () => {
const { title, url } = templates[index];
if (index === currentIndex) return;
animateText(title, dynamicText);
deployBtn.setAttribute('href', url);
currentIndex = index;
});
});
function setIconGlow() {
tabIcons.forEach((icon, index) => {
icon.classList.toggle('is-active', index === currentIndex);
});
}
function removeIconGlow() {
tabIcons.forEach((icon) => icon.classList.remove('is-active'));
}
function startCycleText() {
if (currentIndex === templates.length - 1) {
currentIndex = 0;
} else {
currentIndex++;
}
let text = templates[currentIndex].title;
animateText(text, dynamicText);
setIconGlow();
cycleTextTimeout = setTimeout(startCycleText, 2000);
}
function stopCycleText() {
removeIconGlow();
clearTimeout(cycleTextTimeout);
cycleTextTimeout = null;
}
function animateText(text, container) {
if (reduceMotion) {
container.innerHTML = text;
return;
}
let i = -1;
function animate(timestamp) {
if (i < text.length) {
currentTime = timestamp;
deltaTime = currentTime - prevTime;
if (deltaTime > interval) {
prevTime = currentTime - (deltaTime % interval);
container.innerHTML += text.charAt(i);
i++;
}
animateTextRAF = requestAnimationFrame(animate);
}
}
cancelAnimationFrame(animateTextRAF);
container.innerHTML = '';
animate();
}
const handleTabsFocus = () => {
if (cycleTextTimeout) {
stopCycleText();
tabsComponent?.removeEventListener('focus', handleTabsFocus, true);
}
};
tabsComponent?.addEventListener('focus', handleTabsFocus, true);
})();
