nextjs woocommerce

Звездная история

Next.js Ecommerce сайт с бэкэнд WooCommerce

Live URL: https://next-woocommerce.dfweb.no

Содержание таблицы (TOC)

• Установка
• Функции
• Проблемы
• Поиск неисправностей
• Тодо

Установка

1. Установите и активируйте следующие требуемые плагины, в вашем каталоге плагинов WordPress:

• Woocommerce Ecommerce для WordPress.
• WP-GraphQL обнажает GraphQL для WordPress.
• WP-Graphql-Woocommerce добавляет функциональность Woocommerce к схеме wpgraphql.
• WP-Algolia-Woo-Indexer WordPress плагин, кодированный мной. Отправляет продукты WooCommerce в Алголию. Требуется для работы поиска.

Дополнительный плагин:

• Безголовный слойный отключает фронт, поэтому доступен только бэкэнд. (необязательный)

Текущий выпуск был проверен и подтвержден, работая со следующими версиями:

• WordPress версия 6.6.2
• Woocommerce Версия 7.4.0
• WP GraphQL версия 1.13.8
• Версия woographQL 0.12.0
• Wpgraphql cors версия 2.1

2. Для отладки и тестирования установите: либо:

   https://addons.mozilla.org/en-us/firefox/addon/apollo-developer-tools/ (Firefox)

   https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbalgoeccclkfbmbnfm (Chrome)

3. Убедитесь, что у WooCommerce уже есть некоторые продукты

4. Клонировать или разветвлять репо и изменить .env.example и переименовать его в .env

   Затем установите переменные среды соответственно в Vercel или в вашем предпочтительном хостинговом решении.

   См

5. Измените значения в соответствии с вашей настройкой

6. Запустите сервер с npm run dev

7. Включить метод оплаты COD (наличные по требованию) в WooCommerce

8. Добавить продукт в корзину

9. Перейти к оформлению (Gå Til Kasse)

10. Заполните свои данные и разместите заказ

Функции

• Next.js версия 14.3.11
• React версии 18.3.1
• Машинопись
• Тесты с драматургом
• Подключитесь к Woocommerce GraphQL API и название списка, цена и отображение изображения для продуктов
• Поддержка простых продуктов и переменных продуктов
• Обработка корзины и проверка с Woocommerce (наличные на доставке только на данный момент)
• Поиск в Алголии (требует Algolia-Woo-Indexer)
• Соответствует стандартам доступности WCAG, где это возможно
• Заполнитель для продуктов без изображений
• Apollo Client с GraphQL
• Реагировать форму крючка
• Нативная проверка формы HTML5
• Анимации с Framer Motion, стилируемыми компонентами и animate.css
• Загрузка спиннера, созданного со стилизованными компонентами
• Показать прогресс загрузки страницы с NProgress во время навигации
• Полностью отзывчивый дизайн
• Категория и списки продуктов
• Показать статус запаса
• Красивые URL -адреса с функциональностью NextJs NextJS
• Tailwind 3 для стиля
• JSDOC Комментарии

Поиск неисправностей

Я получаю погрешность тележки без определенной ошибки или другие ошибки GraphQL

Убедитесь, что вы используете версию 0,12,0 плагина WP-Graphql-Woocommerce

Страница продуктов не загружается

Проверьте атрибуты продуктов. Прямо сейчас приложение требует размера и цвета.

Проблемы

В целом приложение работает как предполагалось, но оно не было тщательно протестировано в производственной среде. Прежде чем развернуть его в производственной среде, требуется дополнительное тестирование и отладка.

С учетом сказанного, помните о следующем:

• В настоящее время только простые продукты и переменные продукты работают без каких -либо проблем. Другие типы продуктов не известны.
• В настоящее время поддерживаются только наличные деньги на доставку (COD). Больше методов оплаты может быть добавлено позже.

Этот проект протестирован с помощью браузстука.

Тодо

• Добавить Total в страницу Cart/Chectout
• Скопируйте адрес выставления счетов по адресу доставки
• Добавить приборную панель заказов и требовать входа в систему
• Скрыть продукты не в наличии
• Добавьте лучший SEO
• Повторно добавить следующее/изображение, когда он работает лучше