create-magic-storefront 0.5.0 → 0.6.0

package/template/theme/sections/testimonials.tsx

@@ -1,5 +1,6 @@
 import { defineBlock, defineSection, type SectionProps } from '@magicstoreai/hydrogen/theme';
 
+import { Rating } from '@/components/ui/rating';
 import { locale } from '@/lib/api';
 import { messages } from '@/lib/i18n';
 
@@ -65,16 +66,20 @@ export function Testimonials({ settings, blocks }: SectionProps<typeof testimoni
     return null;
   }
   return (
-    <section className="stack">
-      <h2>{settings.heading || t.customersSay}</h2>
-      <div className="testimonials">
+    <section>
+      <div className="section-header">
+        <h2>{settings.heading || t.customersSay}</h2>
+      </div>
+      <div className="testimonials__grid">
         {quotes.map(({ id, settings: quote }) => (
-          <figure key={id} className="stack">
-            <span className="rating" role="img" aria-label={t.ratedOutOf(quote.rating)}>
-              {'★'.repeat(quote.rating)}
-              {'☆'.repeat(5 - quote.rating)}
-            </span>
-            <blockquote>{quote.text}</blockquote>
+          <figure key={id} className="testimonial">
+            <Rating
+              average={quote.rating}
+              count={1}
+              label={t.ratedOutOf(quote.rating)}
+              showCount={false}
+            />
+            <blockquote className="testimonial__text">{quote.text}</blockquote>
             {quote.author && <figcaption className="muted">{quote.author}</figcaption>}
           </figure>
         ))}

package/template/theme/settings.ts

@@ -2,7 +2,11 @@ import { defineThemeSettings } from '@magicstoreai/hydrogen/theme';
 
 import { label } from './text';
 
-/** Global settings, edited in the admin under the theme's settings. Brand colors stay in `shop.branding`. */
+/**
+ * Global settings, edited in the admin under the theme's settings. Brand colors stay in
+ * `shop.branding`. `lib/theme-settings.ts` reads them; `app/layout.tsx` turns the visual ones into
+ * `data-*` attributes on <html> that `app/styles/tokens.css` reads (DESIGN.md, Theme settings).
+ */
 export const settings = defineThemeSettings([
   {
     id: 'announcement',
@@ -16,4 +20,84 @@ export const settings = defineThemeSettings([
     maxLength: 200,
     default: '',
   },
+  { type: 'HEADER', content: label('Layout', 'Оформление', 'Bezak') },
+  {
+    id: 'cornerRadius',
+    type: 'SELECT',
+    label: label('Corner radius', 'Скругление углов', 'Burchaklar yumaloqligi'),
+    info: label(
+      'Buttons, fields, cards and images.',
+      'Кнопки, поля, карточки и изображения.',
+      'Tugmalar, maydonlar, kartochkalar va rasmlar.',
+    ),
+    default: 'SMALL',
+    options: [
+      { value: 'NONE', label: label('None', 'Без скругления', "Yo'q") },
+      { value: 'SMALL', label: label('Small', 'Небольшое', 'Kichik') },
+      { value: 'MEDIUM', label: label('Medium', 'Среднее', "O'rtacha") },
+      { value: 'LARGE', label: label('Large', 'Большое', 'Katta') },
+    ],
+  },
+  {
+    id: 'stickyHeader',
+    type: 'CHECKBOX',
+    label: label('Sticky header', 'Закреплённая шапка', 'Qotirilgan sarlavha'),
+    default: true,
+  },
+  { type: 'HEADER', content: label('Product cards', 'Карточки товаров', 'Mahsulot kartochkalari') },
+  {
+    id: 'productImageRatio',
+    type: 'SELECT',
+    label: label('Image shape', 'Форма изображения', 'Rasm shakli'),
+    default: 'PORTRAIT',
+    options: [
+      { value: 'PORTRAIT', label: label('Portrait (3:4)', 'Вертикальная (3:4)', 'Tik (3:4)') },
+      { value: 'SQUARE', label: label('Square', 'Квадрат', 'Kvadrat') },
+      { value: 'NATURAL', label: label('As uploaded', 'Как загружено', 'Yuklanganidek') },
+    ],
+  },
+  {
+    id: 'cardStyle',
+    type: 'SELECT',
+    label: label('Card style', 'Стиль карточки', 'Kartochka uslubi'),
+    default: 'MINIMAL',
+    options: [
+      { value: 'MINIMAL', label: label('Minimal', 'Минимальный', 'Minimal') },
+      { value: 'CARD', label: label('With a frame', 'С рамкой', 'Ramkali') },
+    ],
+  },
+  {
+    id: 'showVendor',
+    type: 'CHECKBOX',
+    label: label('Show the brand', 'Показывать бренд', "Brendni ko'rsatish"),
+    default: false,
+  },
+  {
+    id: 'showRating',
+    type: 'CHECKBOX',
+    label: label('Show the rating', 'Показывать рейтинг', "Reytingni ko'rsatish"),
+    info: label(
+      'Only for products that have reviews.',
+      'Только у товаров с отзывами.',
+      'Faqat sharhlari bor mahsulotlarda.',
+    ),
+    default: true,
+  },
+  { type: 'HEADER', content: label('Cart', 'Корзина', 'Savat') },
+  {
+    id: 'cartType',
+    type: 'SELECT',
+    label: label('After adding to cart', 'После добавления в корзину', "Savatga qo'shgandan keyin"),
+    default: 'DRAWER',
+    options: [
+      {
+        value: 'DRAWER',
+        label: label('Open a side panel', 'Открыть боковую панель', 'Yon panelni ochish'),
+      },
+      {
+        value: 'PAGE',
+        label: label('Stay on the page', 'Остаться на странице', 'Sahifada qolish'),
+      },
+    ],
+  },
 ]);

package/template/theme/templates/index.json

@@ -1,9 +1,11 @@
 {
   "sections": {
     "hero": { "type": "hero", "settings": {} },
+    "collections": { "type": "collection-list", "settings": {} },
     "featured": { "type": "featured-collection", "settings": {} },
+    "story": { "type": "image-with-text", "settings": {} },
     "new-arrivals": { "type": "product-shelf", "settings": { "source": "NEW_ARRIVALS" } },
-    "story": { "type": "image-with-text", "settings": {} }
+    "testimonials": { "type": "testimonials", "settings": {} }
   },
-  "order": ["hero", "featured", "new-arrivals", "story"]
+  "order": ["hero", "collections", "featured", "story", "new-arrivals", "testimonials"]
 }

package/template/components/buy-box.tsx

@@ -1,89 +0,0 @@
-'use client';
-
-import {
-  MagicStoreError,
-  Money,
-  useAnalytics,
-  useCart,
-  useMagicStore,
-  useVariantSelection,
-  useWishlist,
-} from '@magicstoreai/hydrogen';
-import type { Schema } from '@magicstoreai/storefront-client';
-import { useEffect, useState } from 'react';
-import { messages } from '@/lib/i18n';
-
-export function BuyBox({ product }: { product: Schema<'ProductDetail'> }) {
-  const { selectedOptions, selectedVariant, setOption, isAvailable } = useVariantSelection(product);
-  const { addLine, status } = useCart();
-  const wishlist = useWishlist();
-  const analytics = useAnalytics();
-  const t = messages(useMagicStore().locale);
-  const [error, setError] = useState<string | null>(null);
-  const [added, setAdded] = useState(false);
-
-  useEffect(
-    () => analytics.productView(product.id, selectedVariant?.id),
-    [analytics, product.id, selectedVariant?.id],
-  );
-
-  // A product without options has one variant; a product without variants is bought as itself.
-  const variantId = product.variants.length > 0 ? (selectedVariant?.id ?? null) : null;
-  const forSale =
-    product.variants.length > 0
-      ? Boolean(selectedVariant?.availableForSale)
-      : product.availableForSale;
-
-  async function add() {
-    setError(null);
-    try {
-      await addLine({ productId: product.id, variantId, quantity: 1 });
-      setAdded(true);
-    } catch (e) {
-      setError(e instanceof MagicStoreError ? (e.detail ?? e.message) : t.couldNotAdd);
-    }
-  }
-
-  return (
-    <div className="stack">
-      <div className="row">
-        <Money data={selectedVariant?.price ?? product.price} />
-        {(selectedVariant?.compareAtPrice ?? product.compareAtPrice) && (
-          <s className="muted">
-            <Money data={selectedVariant?.compareAtPrice ?? product.compareAtPrice} />
-          </s>
-        )}
-      </div>
-      {product.options
-        .filter((option) => option.values.length > 1)
-        .map((option) => (
-          <fieldset key={option.name}>
-            <legend>{option.name}</legend>
-            <div className="row">
-              {option.values.map((value) => (
-                <button
-                  key={value}
-                  type="button"
-                  aria-pressed={selectedOptions[option.name] === value}
-                  disabled={!isAvailable(option.name, value)}
-                  onClick={() => setOption(option.name, value)}
-                >
-                  {value}
-                </button>
-              ))}
-            </div>
-          </fieldset>
-        ))}
-      <div className="row">
-        <button className="primary" disabled={!forSale || status === 'updating'} onClick={add}>
-          {forSale ? t.addToCart : t.soldOut}
-        </button>
-        <button type="button" onClick={() => void wishlist.toggle(product.id)}>
-          {wishlist.has(product.id) ? `♥ ${t.saved}` : `♡ ${t.save}`}
-        </button>
-      </div>
-      {added && <p className="muted">{t.addedToCart}</p>}
-      {error && <p className="error">{error}</p>}
-    </div>
-  );
-}

package/template/components/cart-link.tsx

@@ -1,15 +0,0 @@
-'use client';
-
-import { useCart, useMagicStore } from '@magicstoreai/hydrogen';
-import Link from 'next/link';
-import { messages } from '@/lib/i18n';
-
-export function CartLink() {
-  const { totalQuantity } = useCart();
-  const t = messages(useMagicStore().locale);
-  return (
-    <Link href="/cart">
-      {t.cart} ({totalQuantity})
-    </Link>
-  );
-}