---
title: "WT JShopping Cart - модуль Bootstrap 5 корзины для JoomShopping 5 и Joomla 4 - WebTolk"
description: "Модуль корзины для JoomShopping 5. Сделан на Bootstrap 5. Поддерживает Joomla 4  и интернет-магазин JoomShopping 5"
url: "https://web-tolk.ru/dev/joomla-modules/wt-jshopping-cart-modul-bootstrap-5-korziny-dlya-joomshopping-5-i-joomla-4"
date: "2026-06-12T18:27:15+00:00"
language: "ru-RU"
---

![WT JShopping Cart](https://web-tolk.ru/images/swjprojects/projects/48/ru-RU/cover.jpg)

---

# WT JShopping Cart

- **Категории:** [JoomShopping](https://web-tolk.ru/dev/joomshopping), [Модули Joomla](https://web-tolk.ru/dev/joomla-modules), [Расширения для Joomla 4 - Joomla 6](https://web-tolk.ru/dev/rasshireniya-dlya-joomla-4)
- **Версия:** 1.1.1
- **Дата:** 18 ноября 2024

15352 12409 CTR 124% Mod Free

[Скачать](https://web-tolk.ru/get?element=mod_wtjshoppingcart)[Версии](https://web-tolk.ru/dev/joomla-modules/wt-jshopping-cart-modul-bootstrap-5-korziny-dlya-joomshopping-5-i-joomla-4/versions)[GitHub](https://github.com/sergeytolkachyov/WT-JShopping-Cart)[JED](https://extensions.joomla.org/extension/extension-specific/joomshopping-extensions/wt-jshopping-cart/)

Модуль корзины для Joomla 4, Joomla 5 и JoomShopping 5+. Сделан на Bootstrap 5.

![WT JShopping Cart](https://web-tolk.ru/images/swjprojects/projects/48/ru-RU/icon.jpg)

## Описание

Модуль корзины для интернет-магазина JoomShopping 5 и Joomla 4, Joomla 5 имеет 6 макетов вывода:

- **default** - стандартный вывод корзины JoomShopping. Не связан с Bootstrap вообще.
- **bootstrap5-icon** - выводит модуль корзины в виде ссылки-кнопки с иконкой корзины и количеством товара в виде `badge`. Такой модуль удобно размещать в шапке сайта или мобильной версии сайта в нижней или верхней панельках.
- **bootstrap5-icon-and-text** - ссылка-кнопка, похожая на bootstrap5-icon, но со словом "корзина" и суммой товаров в корзине.
- **bootstrap5-list-group** - модуль корзины выводится в виде [компонента Bootstrap 5 List group](https://getbootstrap.com/docs/5.2/components/list-group/). Его можно размещать в правой или левой колонках сайта. В этом макете можно отображать атрибуты товара, вес товаров.
- **bootstrap5-offcanvas** - модуль корзины выводится в виде [компонента Bootstrap 5 Offcanvas](https://getbootstrap.com/docs/5.2/components/offcanvas/) - выплывающая справа или слева панель. Это по сути макет bootstrap5-list-group, обёрнутый в Offcanvas компонент. В этом макете можно отображать атрибуты товара, вес товаров.
- **bootstrap5-icon-btn** - этот макет является копией макета bootstrap5-icon со следующими изменениями: модуль выводится не ссылкой (тег`<a>`), а кнопкой (тег `<button>`). Подробнее о целях и настройке ниже.

## Настройка модуля с использованием Bootstrap 5 Offcanvas

Вы хотите отображать корзину в виде выплывающей из-за края экрана панели. Согласно [документации Bootstrap 5.2](https://getbootstrap.com/docs/5.2/components/offcanvas/#live-demo) для вызова или скрытия этой панели нужна кнопка-тогглер (переключатель). Это может быть как ссылка (тег `<a>`), так и кнопка (тег `<button>`). Вы можете создать такую кнопку самостоятельно в модуле типа HTML-код и разместить в нужном месте или же создать пункт меню с нужными атрибутами.

Однако, если Вам хотелось бы показать количество товаров около иконки корзины и при этом с её помощью открывать модуль корзины в Offcanvas - используйте макет **bootstrap5-icon-btn.**

Вы создаете 2 модуля с разными макетами: один с макетом **bootstrap5-offcanvas** (его ID нужно запомнить), второй с макетом **bootstrap5-icon-btn**. В настройках второго модуля нужно указать параметр **"ID модуля с макетом offcanvas"**, чтобы при клике по кнопке с корзиной появлялся первый offcanvas-модуль. Этот параметр используется для задания атрибута data-bs-target кнопки.

Модуль с макетом **bootstrap5-offcanvas** рекомендуется публиковать в позиции `debug` или аналогичной так, чтобы у содержимого модуля родительским элементом был тег `body`. Это связано с особенностями работы CSS-свойства `z-index`.

## Настройка ссылок на корзину и оформление заказа

Для того, чтобы ссылки на корзину и оформление заказа JoomShopping в модуле были "красивыми" - следует создать пункты меню обоих типов. Обычно их делают скрытыми - это находится в настройках пункта меню.

![Создание пункта меню для корзины и оформления заказа JoomShopping](https://web-tolk.ru/dev/joomla-modules/images/development/joomla/module/mod_wtjshoppingcart/menu-items-rus.webp)

![Скрыть пункт меню в Joomla с помощью настроек пункта меню](https://web-tolk.ru/dev/joomla-modules/images/development/joomla/module/mod_wtjshoppingcart/menu-items-2-rus.webp)

## Joomla

 **Тип расширения:** Модуль **Область системы:** Сайт **Версия Joomla:** 4.0, 4.1, 4.2, 4.3.3, , 5.1.0, 5.2.1

## Галерея

![...](https://web-tolk.ru/dev/joomla-modules/images/swjprojects/projects/48/ru-RU/gallery/aBZg3mzADOZ.jpg)

![...](https://web-tolk.ru/dev/joomla-modules/images/swjprojects/projects/48/ru-RU/gallery/oXetKvSpZAJ.jpg)

## Что нового

 18.11.2024, 10:43:44

Исправлено

### Joomla 4

Исправлена ошибка установки на Joomla 4

## JSON-LD Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "@id": "https://web-tolk.ru/#/schema/BreadcrumbList/17",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "item": {
                "@id": "https://web-tolk.ru/",
                "name": "Главная"
            }
        },
        {
            "@type": "ListItem",
            "position": 2,
            "item": {
                "@id": "https://web-tolk.ru/dev",
                "name": "Расширения Joomla"
            }
        },
        {
            "@type": "ListItem",
            "position": 3,
            "item": {
                "@id": "/dev/joomla-modules",
                "name": "Модули Joomla"
            }
        },
        {
            "@type": "ListItem",
            "position": 4,
            "item": {
                "name": "WT JShopping Cart"
            }
        }
    ]
}
```

```json
{
    "@context": "https://schema.org",
    "@graph": [
        {
            "@type": "Organization",
            "@id": "https://web-tolk.ru/#/schema/Organization/base",
            "name": "WebTolk",
            "url": "https://web-tolk.ru/",
            "logo": {
                "@type": "ImageObject",
                "@id": "https://web-tolk.ru/#/schema/ImageObject/logo",
                "url": "images/webtolk-1080p.jpg",
                "contentUrl": "images/webtolk-1080p.jpg",
                "width": 1920,
                "height": 1080
            },
            "image": {
                "@id": "https://web-tolk.ru/#/schema/ImageObject/logo"
            },
            "sameAs": [
                "https://github.com/WebTolk",
                "https://github.com/sergeytolkachyov",
                "https://vk.com/web_tolk",
                "https://vk.com/webtolkru",
                "https://tenchat.ru/sergeytolkachyov",
                "https://t.me/sergeytolkachyov",
                "https://t.me/webtolkru"
            ]
        },
        {
            "@type": "WebSite",
            "@id": "https://web-tolk.ru/#/schema/WebSite/base",
            "url": "https://web-tolk.ru/",
            "name": "WebTolk",
            "publisher": {
                "@id": "https://web-tolk.ru/#/schema/Organization/base"
            }
        },
        {
            "@type": "WebPage",
            "@id": "https://web-tolk.ru/#/schema/WebPage/base",
            "url": "https://web-tolk.ru/dev/joomla-modules/wt-jshopping-cart-modul-bootstrap-5-korziny-dlya-joomshopping-5-i-joomla-4",
            "name": "WT JShopping Cart - модуль Bootstrap 5 корзины для JoomShopping 5 и Joomla 4 - WebTolk",
            "description": "Модуль корзины для JoomShopping 5. Сделан на Bootstrap 5. Поддерживает Joomla 4  и интернет-магазин JoomShopping 5",
            "isPartOf": {
                "@id": "https://web-tolk.ru/#/schema/WebSite/base"
            },
            "about": {
                "@id": "https://web-tolk.ru/#/schema/SoftwareApplication/base"
            },
            "inLanguage": "ru-RU",
            "breadcrumb": {
                "@id": "https://web-tolk.ru/#/schema/BreadcrumbList/17"
            }
        },
        {
            "@type": "SoftwareApplication",
            "name": "WT JShopping Cart",
            "url": "https://web-tolk.ru/dev/joomla-modules/wt-jshopping-cart-modul-bootstrap-5-korziny-dlya-joomshopping-5-i-joomla-4",
            "description": "Модуль корзины для Joomla 4, Joomla 5 и JoomShopping 5+. Сделан на Bootstrap 5. ",
            "applicationCategory": "Модули Joomla",
            "softwareVersion": "1.1.1",
            "downloadUrl": "https://web-tolk.ru/get?element=mod_wtjshoppingcart",
            "image": "https://web-tolk.ru/images/swjprojects/projects/48/ru-RU/icon.jpg",
            "operatingSystem": "ANY",
            "interactionStatistic": [
                {
                    "@type": "InteractionCounter",
                    "interactionType": "https://schema.org/DownloadAction",
                    "userInteractionCount": 15352
                },
                {
                    "@type": "InteractionCounter",
                    "interactionType": "https://schema.org/ViewAction",
                    "userInteractionCount": 12410
                }
            ],
            "mainEntityOfPage": {
                "@type": "WebPage",
                "url": "https://web-tolk.ru/dev/joomla-modules/wt-jshopping-cart-modul-bootstrap-5-korziny-dlya-joomshopping-5-i-joomla-4"
            },
            "softwareRequirements": "Joomla",
            "applicationSubCategory": "JoomShopping, Модули Joomla, Расширения для Joomla 4 - Joomla 6",
            "isAccessibleForFree": true
        }
    ]
}
```