Produktas

Produkto konfigūratoriaus anatomija

Momentinė peržiūra, sąžininga kaina ir bendrinama būsena, kuri smalsuolius paverčia pirkėjais

2025 m. sausio 22 d.

Manweba

Konfigūratorius veikia tada, kai rinktis panašu į kūrimą, o ne į formos pildymą. Momentinė peržiūra, aiškūs kainos pokyčiai ir galimybė išsaugoti ar pasidalyti – tai stuburas. Visa kita yra pasirenkamas sudėtingumas.

Peržiūra, kuri spėja

Kiekvienas reikšmingas pasirinkimas turi iškart atnaujinti produkto vaizdą. Delsimas kūrimą paverčia popierizmu.

Būsenų kaitą animuokite tiek, kiek reikia tęstinumui išlaikyti; tarp „mėlyna“ ir mėlynos spalvos krovimosi indikatoriaus nereikia.

Gyva peržiūra ir bendra suma

jsx

1import { useMemo, useState } from 'react';
2import { motion, AnimatePresence } from 'motion/react';
3
4const colors = {
5  midnight: { value: '#1e293b', delta: 0 },
6  ocean: { value: '#0ea5e9', delta: 20 },
7  forest: { value: '#10b981', delta: 20 },
8};
9
10const sizes = {
11  small: -30,
12  medium: 0,
13  large: 30,
14};
15
16export function ProductConfigurator() {
17  const [color, setColor] = useState('midnight');
18  const [size, setSize] = useState('medium');
19
20  const price = useMemo(
21    () =>=299 + colors[color].delta + sizes[size],
22    [color, size],
23  );
24
25  return (
26    <div className="grid gap-10 lg:grid-cols-2">
27      <div className="relative aspect-square overflow-hidden rounded-3xl">
28        <AnimatePresence mode="wait">
29          <motion.div
30            key={color + size}
31            initial={{ opacity: 0 }}
32            animate={{ opacity: 1 }}
33            exit={{ opacity: 0 }}
34            transition={{ duration: 0.25 }}
35            className="absolute inset-0"
36            style={{ backgroundColor: colors[color].value }}
37          />
38        </AnimatePresence>
39      </div>
40
41      <div className="space-y-6">
42        <p className="text-4xl">${price}</p>
43        <div className="flex gap-3">
44          {Object.entries(colors).map(([name, swatch]) =>=(
45            <button
46              key={name}
47              type="button"
48              onClick={() =>=setColor(name)}
49              className="h-12 w-12 rounded-full border border-white/30"
50              style={{ backgroundColor: swatch.value }}
51              aria-label={name}
52            />
53          ))}
54        </div>
55        <div className="flex gap-2">
56          {Object.keys(sizes).map((name) =>=(
57            <button key={name} type="button" onClick={() =>=setSize(name)}>
58              {name}
59            </button>
60          ))}
61        </div>
62      </div>
63    </div>
64  );
65}

Loading code…

Atskleiskite parinktis palaipsniui

Pradėkite nuo sprendimų, kurie produktą keičia labiausiai (forma, medžiaga, spalva). Pažangesnius nustatymus paslėpkite už „daugiau pritaikymo“, kad pirmą kartą užsukęs žmogus nesiderėtų su dvidešimt valdiklių.

Kaina – atvirai

Rodykite bendrą sumą ir kiekvienos parinkties pokytį (+20 €, −30 €). Netikėtumai atsiskaitant griauna pasitikėjimą; matoma matematika jį kuria.

Išsaugokite ir bendrinkite tą pačią konfigūraciją

Konfigūraciją užkoduokite adrese, kad bendrinta nuoroda atkurtų tą patį produktą. Taip personalizacija tampa platinimu: kolegos ir klientai atsidaro tą patį rezultatą.

Konfigūracija, saugoma adrese

jsx

1'use client';
2
3import { useCallback, useState } from 'react';
4import { usePathname, useRouter, useSearchParams } from 'next/navigation';
5
6export function ShareableConfigurator({ Options }) {
7  const searchParams = useSearchParams();
8  const router = useRouter();
9  const pathname = usePathname();
10
11  const [config, setConfig] = useState(() =>=({
12    color: searchParams.get('color') ???'midnight',
13    size: searchParams.get('size') ???'medium',
14  }));
15
16  const updateConfig = useCallback(
17    (next) =>={
18      setConfig(next);
19      const params = new URLSearchParams();
20      Object.entries(next).forEach(([key, value]) =>={
21        params.set(key, String(value));
22      });
23      router.replace(`${pathname}?${params.toString()}`, { scroll: false });
24    },
25    [pathname, router],
26  );
27
28  const share = async () =>={
29    const url = window.location.href;
30    if (navigator.share) {
31      await navigator.share({ title: 'My configuration', url });
32      return;
33    }
34    await navigator.clipboard.writeText(url);
35  };
36
37  return (
38    <div>
39      <Options config={config} onChange={updateConfig} />
40      <button type="button" onClick={share}>
41        Share this build
42      </button>
43    </div>
44  );
45}

Loading code…

Apibendrinimas

Pirmiausia paleiskite stuburą: gyvą peržiūrą, sąžiningą kainą, palaipsniui atskleidžiamas parinktis ir bendrinamą būseną. Sudėtingumą auginkite tik ten, kur žmonės jo prašo – kai jie jau jaučia, kad kūrinys yra jų.

Susiję straipsniai

Produktas

SEO, kuris iš tikrųjų atneša užklausų, o ne tik pozicijas

Struktūra, greitis, ketinimą atitinkantys puslapiai ir matavimas – SEO kaip augimo sistema, o ne sąrašų spektaklis

Skaityti straipsnį

Produktas

Klientų portalas ar bendras diskas: kada individuali programa atsiperka

Prisijungimai, rolės ir darbo eigos, kurios išsibarsčiusius failus paverčia produktu, kuriuo klientai pasitiki

Skaityti straipsnį

Norite, kad jūsų produktas būtų toks pat apgalvotas?

Žiūrėti paslaugas Pradėti projektą