رابط کاربری تعاملی E-Com: نوار ارسال رایگان متحرک

در این مقاله، اولین مقاله از سری رابط کاربری تعاملی تجارت الکترونیک ما، هدف ما ایجاد یک نوار پیشرفت متحرک کوچک با استفاده از Framer Motion است. این نوار پیشرفت که برای استفاده در خلاصه سبد خرید در نظر گرفته شده است، به کاربر اطلاع می دهد که چقدر بیشتر باید برای واجد شرایط بودن برای حمل و نقل رایگان هزینه کند و با نمایش انیمیشن Lottie، موفقیت خود را هنگامی که به این هدف رسید جشن می گیرد.

به عنوان صاحب فروشگاه تجارت الکترونیکی که این را اجرا می کند، هدف اصلی نوار ارسال رایگان ما افزایش میانگین ارزش سفارش (AOV) و تشویق کاربران برای ادامه پرداخت است.

تنظیم صحنه

در چند سال گذشته، انیمیشن ها و ریز تعامل ها به طور فزاینده ای در برنامه های کاربردی وب محبوب شده اند. این روند که در ابتدا در برنامه های موبایل بومی ظهور کرد، به تدریج در حال یافتن جایگاه خود در برنامه های وب طراحی شده برای نمایش مرورگرها است. با وجود افزایش استفاده از تعاملات خرد، اجرای استراتژیک اغلب کوتاهی می کند. توسعه دهندگان اغلب این ویژگی ها را برای جذابیت زیبایی شناختی خود ادغام می کنند و از پتانسیل آنها در هدایت توجه کاربر و تأثیرگذاری بر رفتار کاربر ناتوان هستند.

برای سبد خرید باربری رایگان متحرک خود، از دو الگوی رفتاری آشنا استفاده می‌کنیم:

باز کردن قفل

اگر امکان دستیابی به چیزی که قبلاً غیرقابل دسترس بود وجود داشته باشد، مردم سعی می کنند به آن دسترسی پیدا کنند تا بتوانند از آن بهره مند شوند. از این اصل می توان برای ایجاد جذابیت بیشتر استفاده کرد.

تشویق کردن

دریافت بازخورد مثبت از قبل در طول یک کار و دیدن اینکه همه چیز به درستی انجام شده است انگیزه بخش است.

این الگوها اساس طراحی ما را تشکیل می دهند. اگر بخواهیم این را در یک سناریوی واقعی آزمایش کنیم، می‌توانیم از این الگوها برای فرمول‌بندی یک فرضیه آگاهانه درباره اینکه آیا نوار ارسال رایگان به طور موثر AOV ما را تقویت می‌کند و نرخ پرش از سبد خرید تا پرداخت را کاهش می‌دهد، استفاده کنیم.

پیاده سازی

برای پیاده سازی این، ما با فروشگاه استاندارد Shopify Hydrogen Demo Store کار خواهیم کرد. Hydrogen یک پشته تجاری بدون سرنشین مبتنی بر React Shopify است که از Framer Motion، یک کتابخانه React برای انیمیشن و حرکت پشتیبانی می کند.
در مورد ما، ابتدا با دنبال کردن مستندات، الگوی Shopify Hydrogen را نصب کردیم. اگر نوار حمل و نقل رایگان را در فروشگاه خودتان که ممکن است بر روی پلتفرم دیگری اجرا شود، اجرا می کنید، واضح است که می توانید از این مرحله رد شوید.

Shopify Hydrogen با Framer Motion خارج از جعبه عرضه می‌شود، اگر این را در معماری سیستم دیگری اجرا می‌کنید که این را ندارد، ابتدا باید وابستگی‌های خود را با اجرای زیر نصب کنید:

npm install framer-motion lottie-react

ایجاد مولفه نوار ارسال رایگان

با نصب وابستگی ها، بیایید یک جزء جدید برای نوار ارسال رایگان خود ایجاد کنیم. در این کامپوننت، استفاده خواهیم کرد motion از Framer Motion برای متحرک سازی عرض نوار ارسال رایگان، و AnimatePresence برای مدیریت حضور انیمیشن Lottie.

ابتدا کتابخانه ها و اجزای لازم را وارد کنید. ما از حرکت و استفاده خواهیم کرد AnimatePresence از Framer Motion برای انیمیشن نوار ارسال رایگان و Lottie انیمیشن ما همچنین مولفه Lottie را از lottie-react بسته، و یک فایل JSON حاوی داده های انیمیشن confetti.

import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import Lottie from 'lottie-react';
import ConfettiAnimation from '../../public/assets/7893-confetti-cannons.json'

بعد، تعریف کنید ProgressBar جزء. الف را دریافت می کند price prop که برای محاسبه پیشرفت نوار و پیام نمایش داده شده در بالای نوار استفاده می شود.

را freeShippingThreshold به عنوان 1500 تعریف می شود. این آستانه ای است که می خواهیم قیمت ما به آن برسد. مسلما این یک آستانه بسیار بالا برای ارسال رایگان است! از آنجایی که ما از راه‌اندازی استاندارد هیدروژن استفاده می‌کردیم که دارای یک فروشگاه اسنوبرد با قیمت‌های بسیار بالا است، آن را مطابق با این مثال تنظیم کردیم. این مقدار را بر اساس نیاز خود تنظیم کنید.

را progress به عنوان درصدی از قیمت در مقایسه با آستانه ارسال رایگان محاسبه می شود. اگر پیشرفت بیش از 100٪ باشد، آن را به 100٪ محدود می کنیم:

const ProgressBar: React.FC<ProgressBarProps> = ({ price }) => {
  // Define the threshold for free shipping
  const freeShippingThreshold = 1500;

  // Calculate the progress as a percentage
  let progress = (price / freeShippingThreshold) * 100;

  // Ensure the progress doesn't exceed 100%
  if (progress > 100) {
    progress = 100;
  }

در مرحله بعد، مقدار باقیمانده مورد نیاز برای ارسال رایگان را محاسبه کرده و پیامی را که در بالای نوار ارسال رایگان نمایش داده می شود، تعریف می کنیم:

  // Calculate the remaining amount for free shipping
  const remaining = freeShippingThreshold - price;

  // Determine the message to display above the free shipping bar
  const message = progress === 100 
    ? 'Free shipping unlocked!' 
    : `You're missing $${remaining.toFixed(2)} for free shipping`;

در نهایت، TSX را برای کامپوننت خود برمی گردانیم. ما استفاده می کنیم motion.div کامپوننت برای ایجاد یک div متحرک که عرض و رنگ پس‌زمینه آن را بر اساس پیشرفت تغییر می‌دهد. ما نیز استفاده می کنیم AnimatePresence برای رندر مشروط انیمیشن Lottie زمانی که پیشرفت به 100٪ رسید.

  return (
    <div className="overflow-hidden bg-transparent">
      {/* Display the progress bar */}
      <div className="overflow-hidden h-3 w-full border border-gray-300 rounded-md">
        <motion.div
          className="h-full rounded-md"
          animate={{
            width: `${progress}%`,
            // Change the background colorcolor based on the progress
            backgroundColor: progress === 100 ? 'lightblue' : 'lightgrey'
          }}
          transition={{ duration: 0.5, ease: "easeOut" }}
        />
      </div>

      {/* Display the message */}
      <p className="mb-2 text-center text-sm mt-2">{message}</p>

      {/* Display the Lottie animation when progress is 100% */}
      <AnimatePresence>
        {progress === 100 && (
          <Lottie className="absolute bottom-0 left-0 pointer-events-none" animationData={ConfettiAnimation} loop={false} autoplay />
        )}
      </AnimatePresence>
    </div>
  );
};

export default ProgressBar;

به طور خلاصه، در TSX برگشتی، یک div کانتینری با یک نوار ارسال رایگان و یک پیام ایجاد می کنیم. نوار یک است motion.div که عرض و رنگ پس زمینه بر اساس متحرک می شوند progress ارزش. پیام یک پاراگراف است که متغیر پیام را که قبلا تعریف کرده بودیم نمایش می دهد.

ما نیز از AnimatePresence مولفه برای رندر مشروط یک انیمیشن Lottie زمانی که progress به 100% می رسد. این انیمیشن یک انیمیشن SVG است که یک بار پخش می شود و لوپ نمی شود. در پایین سمت چپ صفحه قرار گرفته است و به لطف وجود نشانگر تداخلی با رویدادهای نشانگر ندارد pointer-events-none کلاس

این کد را برای مؤلفه نوار ارسال رایگان به ما می‌دهد:

import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import Lottie from 'lottie-react';
import ConfettiAnimation from '../../public/assets/7893-confetti-cannons.json'

interface ProgressBarProps {
  price: number;
}

const ProgressBar: React.FC<ProgressBarProps> = ({ price }) => {
  // Define the threshold for free shipping
  const freeShippingThreshold = 1500;

  // Calculate the progress as a percentage
  let progress = (price / freeShippingThreshold) * 100;

  // Ensure the progress doesn't exceed 100%
  if (progress > 100) {
    progress = 100;
  }

  // Calculate the remaining amount for free shipping
  const remaining = freeShippingThreshold - price;

  // Determine the message to display above the progress bar
  const message = progress === 100 
    ? 'Free shipping unlocked!' 
    : `You're missing $${remaining.toFixed(2)} for free shipping`;

  return (
    <div className="overflow-hidden bg-transparent">
      {/* Display the message */}
      <div className="overflow-hidden h-3 w-full border border-gray-300 rounded-md">
        <motion.div
          className="h-full rounded-md"
          animate={{
            width: `${progress}%`,
            // Change the background color based on the progress
            backgroundColor: progress === 100 ? 'lightblue' : 'lightgrey'
          }}
          transition={{ duration: 0.5, ease: "easeOut" }}
        />
      </div>
      <p className="mb-2 text-center text-sm mt-2">{message}</p>
      {/* Display the Lottie animation when progress is 100% */}
      <AnimatePresence>
        {progress === 100 && (
          <Lottie className="absolute bottom-0 left-0 pointer-events-none" animationData={ConfettiAnimation} loop={false} autoplay />
        )}
      </AnimatePresence>
    </div>
  );
};

export default ProgressBar;

بخش نوار حمل و نقل اکنون می تواند به عنوان یک جزء به سادگی با وارد کردن آن در فایل مورد نظر و قرار دادن آن در جایی که می خواهید ظاهر شود، استفاده شود. در مورد ما آن را در CartSummary عملکرد از Cart.tsx فایل زیر عناصر خلاصه سپس کل مبلغ موجود در سبد خرید را ارسال می کنیم تا نوار ارسال رایگان را بر این اساس ارائه کنیم.

function CartSummary({
  cost,
  layout,
  children = null,
}: {
  children?: React.ReactNode;
  cost: CartCost;
  layout: Layouts;
}) {
  const summary = {
    drawer: 'grid gap-4 p-6 border-t md:px-12',
    page: 'sticky top-nav grid gap-6 p-4 md:px-6 md:translate-y-4 bg-primary/5 rounded w-full',
  };

  // Retrieve the `totalAmount` from the `cost` object, convert it to a floating-point number, 
  // and assign it to `totalAmount`. If `cost`, `totalAmount`, or `amount` is not defined, default to 0.
  const totalAmount = parseFloat(cost?.totalAmount?.amount || '0');


  return (
    <section aria-labelledby="summary-heading overflow-hidden" className={summary[layout]}>
      <h2 id="summary-heading" className="sr-only">
        Order summary
      </h2>
      <dl className="grid">
        <div className="flex items-center justify-between font-medium">
          <Text as="dt">Subtotal</Text>
          <Text as="dd" data-test="subtotal">
            {cost?.subtotalAmount?.amount ? (
              <Money data={cost?.subtotalAmount} />
            ) : (
              '-'
            )}
          </Text>
        </div>
      </dl>
      {children}
        <div>
        <ProgressBar price={totalAmount} /> {/* Use the ProgressBar component here */}
      </div>
    </section>
  );
}

بسته بندی

در نتیجه، یک سبد خرید باربری رایگان متحرک، که با اصول باز کردن قفل و تشویق طراحی شده است، می تواند تجربه کاربر را در فروشگاه های تجارت الکترونیک تا حد زیادی افزایش دهد. نه تنها یک عنصر جذاب بصری را فراهم می کند، بلکه به طرز نامحسوسی بر رفتار مشتری تأثیر می گذارد و آنها را به سمت اقدامات مفید برای فروشگاه هدایت می کند، مانند افزایش میانگین ارزش سفارش و کاهش نرخ پرش.

با استفاده از فناوری‌هایی مانند Hydrogen Shopify، Framer Motion برای انیمیشن‌ها، و بسته lottie-react برای جلوه‌های جشن، می‌توانیم یک رابط کاربری جذاب، واکنش‌گرا و تعاملی ایجاد کنیم که برای مشتریان مدرن جذاب باشد. به یاد داشته باشید، در حالی که مثال ما از یک پشته و راه‌اندازی خاص استفاده می‌کرد، این اصول را می‌توان با پلتفرم تجارت الکترونیک منحصر به فرد شما تطبیق داد.

منتظر مقالات بیشتر در سری رابط کاربری تعاملی تجارت الکترونیکی ما باشید، جایی که ما به کاوش در راه های هیجان انگیز برای غنی سازی تجربه کاربری ویترین فروشگاه دیجیتال شما ادامه خواهیم داد!