E-Commerce Website: The Complete Strategy for Business Growth

// app/products/page.tsx
import { getProducts } from "@/lib/shopify";
import { ProductCard } from "@/components/ProductCard";

export default async function ProductsPage() {
  const products = await getProducts({ first: 20 });

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-8">Our Products</h1>
      <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
        {products.map((product) => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </div>
  );
}

// components/ProductCard.tsx
"use client";

import { useCart } from "@/hooks/useCart";
import Image from "next/image";

interface ProductCardProps {
  product: {
    id: string;
    title: string;
    description: string;
    price: { amount: string; currencyCode: string };
    images: { url: string; altText: string }[];
  };
}

export function ProductCard({ product }: ProductCardProps) {
  const { addItem } = useCart();

  return (
    <div className="border rounded-lg p-4 hover:shadow-lg transition-shadow">
      <div className="relative h-48 mb-4">
        <Image
          src={product.images[0]?.url || "/placeholder.png"}
          alt={product.images[0]?.altText || product.title}
          fill
          className="object-cover rounded"
        />
      </div>
      <h3 className="font-semibold text-lg">{product.title}</h3>
      <p className="text-gray-600 text-sm line-clamp-2">{product.description}</p>
      <div className="flex items-center justify-between mt-4">
        <span className="text-xl font-bold">
          {new Intl.NumberFormat("en-US", {
            style: "currency",
            currency: product.price.currencyCode,
          }).format(Number(product.price.amount))}
        </span>
        <button
          onClick={() => addItem({ id: product.id, quantity: 1 })}
          className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
        >
          Add to Cart
        </button>
      </div>
    </div>
  );
}

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Wireless Headphones Pro",
  "image": "https://example.com/images/headphones.jpg",
  "description": "Premium wireless headphones with noise cancellation and 40-hour battery life.",
  "sku": "WH-1000XM5",
  "brand": {
    "@type": "Brand",
    "name": "AudioTech"
  },
  "offers": {
    "@type": "Offer",
    "price": "299.99",
    "priceCurrency": "USD",
    "availability": "https://schema.org/InStock"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.5",
    "reviewCount": "127"
  }
}
</script>

// services/email.ts
export async function sendAbandonedCartEmail(userId: string) {
  const cart = await getCart(userId);
  if (!cart || cart.items.length === 0) return;

  const email = await getUserEmail(userId);
  await sendEmail({
    to: email,
    subject: "Your cart is waiting!",
    html: `
      <h1>You left these items in your cart</h1>
      <ul>
        ${cart.items.map(item => `
          <li>${item.name} - $${item.price}</li>
        `).join("")}
      </ul>
      <a href="${process.env.STORE_URL}/checkout">Complete Your Order</a>
      <p>Use code SAVE10 for 10% off!</p>
    `,
  });
}

// Schedule abandoned cart emails
export function scheduleAbandonedCartEmails() {
  // Run every hour
  cron.schedule("0 * * * *", async () => {
    const usersWithAbandonedCarts = await getUsersWithAbandonedCarts();
    for (const user of usersWithAbandonedCarts) {
      await sendAbandonedCartEmail(user.id);
    }
  });
}