Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yaleksandr89/filter-ajax

Пример реализации фильтров с применением асинхронного запроса
https://github.com/yaleksandr89/filter-ajax

ajax ajax-form bootstrap bootstrap5 composer filters javascript php php8 php83

Last synced: 3 days ago
JSON representation

Пример реализации фильтров с применением асинхронного запроса

Awesome Lists containing this project

README

        

# Проект: Пример реализации фильтров с применением асинхронного запроса

Как работает фильтрация

![ajax filter is in operation](./docs/img/ajax-filter-main.gif)

## Выберите язык:

| Русский | English | Español | 中文 | Français | Deutsch |
|----------|--------------------------------------|--------------------------------------|---------------------------------|---------------------------------------|--------------------------------------|
| **Выбран** | [English](./docs/langs/README_en.md) | [Español](./docs/langs/README_es.md) | [中文](./docs/langs/README_zh.md) | [Français](./docs/langs/README_fr.md) | [Deutsch](./docs/langs/README_de.md) |

## Используемый стек:

- PHP 8
- Mysql (PDO)
- Bootstrap 5.3

## Описание:

Проект реализует фильтрацию товаров по категории, цвету и весу с применением асинхронных запросов без использования дополнительных библиотек на нативном JavaScript. CSS-фреймворк Bootstrap 5.3 используется для стилизации, с возможностью переключения между светлой и темной темами, реализованной в шаблоне.

Как работает переключение темы

![ajax filter is in operation](./docs/img/ajax-filter-theme-color.gif)

В каталоге `docs/examples/` вы найдете два файла:

1. `nginx-configuration.conf` - пример конфигурации для `nginx`.
2. `db-config.php.example` - пример файла конфигурации для подключения к базе данных. Вам необходимо изменить его имя на `db-config.php`, скопировать его в `app/models/database.php` и указать соответствующие данные для подключения к БД.

Проект не использует `composer` и написан максимально просто без излишних зависимостей.

## Запуск проекта:

1. Добавьте конфигурацию на ваш сервер. В каталоге `docs/examples/` есть пример конфигурации для Nginx. Следуйте этому примеру, чтобы настроить свой сервер.
2. Создайте базу данных и импортируйте содержимое файла `ajax-filter.sql`, который находится в `docs/mysql-dump/`.