frontend-shopify/nextjs-shopify-products
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update default shopify site design

Browse Source
This commit is contained in:
Rami Bitar
2026-06-10 13:20:03 -04:00
parent 1fb1df8cfd
commit e4ecab1875
33 changed files with 527 additions and 2371 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
components/shopify/cart-drawer.tsx
View File

@@ -4,7 +4,7 @@ import React from 'react';
import { useShopifyCart, redirectToCheckout } from '@/hooks/use-shopify-cart';
import { Button } from '@/components/ui/button';
import { Empty, EmptyHeader, EmptyTitle, EmptyDescription } from '@/components/ui/empty';
import { Spinner } from '@/components/ui/spinner';
import { Loader } from '@/components/ui/loader';
import {
Sheet,
SheetContent,
@@ -58,7 +58,7 @@ const CartDrawer: React.FC = () => {
<div className="flex-1 overflow-y-auto p-4">
{loading && items.length === 0 ? (
<div className="flex items-center justify-center py-12">
<Spinner size="lg" />
<Loader size={32} />
</div>
) : items.length === 0 ? (
<Empty className="py-12">
@@ -79,7 +79,7 @@ const CartDrawer: React.FC = () => {
return (
<div key={item.id} className="flex items-start space-x-4 pb-6 border-b border-gray-200 last:border-b-0">
{/* Product Image */}
<div className="w-20 h-20 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
<div className="w-20 h-20 bg-gray-100 overflow-hidden flex-shrink-0">
{image ? (
<img
src={image}
@@ -95,13 +95,13 @@ const CartDrawer: React.FC = () => {
{/* Product Details */}
<div className="flex-1 min-w-0">
<h4 className="font-semibold text-gray-900 mb-1 line-clamp-2">
<h4 className="text-sm font-medium text-gray-900 mb-1 line-clamp-2">
{item.merchandise.product.title}
</h4>
{/* Variant Info */}
{selectedOptions.length > 0 && (
<div className="text-sm text-gray-500 mb-2">
<div className="text-xs text-gray-500 mb-2">
{selectedOptions.map((option, index) => (
<span key={option.name}>
{option.value}
@@ -113,7 +113,7 @@ const CartDrawer: React.FC = () => {
{/* Quantity Controls */}
<div className="flex items-center mt-3">
<div className="flex items-center border border-gray-300 rounded-lg">
<div className="flex items-center border border-gray-200 rounded-md">
<Button
onClick={() => updateItemQuantity(item.id, item.quantity - 1)}
variant="ghost"
@@ -123,7 +123,7 @@ const CartDrawer: React.FC = () => {
>
<RiSubtractLine size={14} />
</Button>
<span className="px-2 py-1 font-semibold min-w-[30px] text-center text-sm">
<span className="px-2 py-1 font-medium min-w-[30px] text-center text-sm">
{item.quantity}
</span>
<Button
@@ -141,7 +141,7 @@ const CartDrawer: React.FC = () => {
{/* Price */}
<div className="flex-shrink-0">
<span className="text-sm font-semibold text-gray-900">
<span className="text-sm text-gray-500">
${parseFloat(item.merchandise.price.amount).toFixed(2)}
</span>
</div>
@@ -153,7 +153,7 @@ const CartDrawer: React.FC = () => {
variant="ghost"
size="icon-sm"
disabled={loading}
className="text-gray-400 hover:text-red-500"
className="text-gray-400 hover:text-gray-900"
>
<RiCloseLine size={18} />
</Button>
@@ -169,14 +169,14 @@ const CartDrawer: React.FC = () => {
{items.length > 0 && (
<div className="border-t border-border p-6">
{/* Subtotal */}
<div className="flex items-center justify-between mb-4">
<span className="text-base font-semibold">Subtotal</span>
<span className="text-lg font-bold">
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium text-gray-900">Subtotal</span>
<span className="text-sm font-medium text-gray-900">
${totalAmount.toFixed(2)}
</span>
</div>
<div className="text-sm text-gray-500 mb-4">
<div className="text-xs text-gray-500 mb-4">
Shipping and taxes calculated at checkout
</div>
@@ -185,12 +185,12 @@ const CartDrawer: React.FC = () => {
<Button
onClick={handleCheckout}
disabled={loading || !checkoutUrl}
className="w-full"
className="w-full h-14 rounded-full text-base"
size="lg"
>
{loading ? (
<span className="flex items-center justify-center space-x-2">
<Spinner size="sm" />
<Loader size={16} />
<span>Processing...</span>
</span>
) : (