first commit

.gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+src/*
+spa/node_modules

Makefile

@@ -0,0 +1,36 @@
+.PHONY: build
+
+fresh:
+	$(MAKE) stop && \
+	rm -rf ./src && \
+	./scripts/download_oc_store.sh && \
+	./scripts/install_ocstore.sh && \
+	$(MAKE) start
+
+setup:
+	$(MAKE) stop && \
+	rm -rf ./src && \
+	./scripts/download_oc_store.sh && \
+	./scripts/install_ocstore.sh && \
+	$(MAKE) start && \
+	$(MAKE) link
+
+stop:
+	docker compose down
+
+start:
+	docker compose up -d
+
+ssh:
+	docker compose exec web bash
+
+link:
+	docker compose exec web bash -c "php ./scripts/link.php"
+
+dev:
+	$(MAKE) link && \
+	cd frontend && npm run dev
+
+build:
+	docker build -t oc_layout_pro_build_prod -f docker/build.dockerfile . && \
+    docker run --rm -v "./build":/build oc_layout_pro_build_prod

build/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

docker-compose.yaml

@@ -0,0 +1,46 @@
+services:
+  web:
+    image: webdevops/php-apache-dev:${PHP_VERSION}
+    platform: linux/amd64
+    volumes:
+      - "./src:/web"
+      - "./scripts:/scripts"
+      - "./module:/module"
+      - ./docker/apache2/cors.conf:/opt/docker/etc/httpd/vhost.common.d/cors.conf
+    ports:
+      - "8000:80"
+    restart: always
+    deploy:
+      resources:
+        limits:
+          memory: 256M
+    environment:
+      - WEB_DOCUMENT_ROOT=/web/upload
+      - PHP_DISPLAY_ERRORS=1
+      - XDEBUG_IDE_KEY=PHPSTORM
+      - XDEBUG_START_WITH_REQUEST=yes
+      - XDEBUG_CLIENT_HOST=host.docker.internal
+      - XDEBUG_CLIENT_PORT=9003
+      - XDEBUG_DISCOVER_CLIENT_HOST=false
+      - PHP_IDE_CONFIG=serverName=orbstack
+
+  mysql:
+    image: mariadb:10.2.7
+    platform: linux/amd64
+    restart: always
+    environment:
+      - MYSQL_ROOT_PASSWORD=secret
+      - MYSQL_DATABASE=ocstore3
+    healthcheck:
+      test: ["CMD", "mysqladmin" ,"ping", "-h", "localhost"]
+      timeout: 20s
+      retries: 10
+    ports:
+      - "3306:3306"
+    volumes:
+      - mysql_data:/var/lib/mysql
+      - ./sql_dumps:/sql_dumps
+      - ./docker/mysql/docker-entrypoint-initdb.d:/docker-entrypoint-initdb.d
+
+volumes:
+  mysql_data:

docker/apache2/cors.conf

@@ -0,0 +1,6 @@
+<IfModule mod_headers.c>
+    Header set Access-Control-Allow-Origin "http://localhost:5173"
+    Header set Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE"
+    Header set Access-Control-Allow-Headers "Content-Type, Authorization"
+    Header set Access-Control-Allow-Credentials "true"
+</IfModule>

docker/build.dockerfile

@@ -0,0 +1,11 @@
+FROM node:latest
+
+RUN apt update && apt install -y zip
+RUN mkdir -p /app
+COPY ./frontend /app/frontend
+COPY ./module /app/module
+COPY ./scripts/build.sh /app/scripts/build.sh
+
+WORKDIR /app
+
+CMD ["./scripts/build.sh"]

docker/mysql/docker-entrypoint-initdb.d/create_database_for_tests.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+
+mysql_note "Creating database for tests: ${MYSQL_DATABASE}"
+docker_process_sql --database=mysql <<<"CREATE DATABASE IF NOT EXISTS \`${MYSQL_DATABASE}_tests\` ;"

scripts/build.sh

@@ -0,0 +1,46 @@
+#!/bin/bash
+
+set -e
+
+VERSION="1.0.0"
+MODULE_NAME="oc_telegram_shop"
+CURRENT_DIR="$(dirname "$0")"
+
+echo "Current dir: ${CURRENT_DIR}"
+node -v
+npm -v
+
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+echo -e "${BLUE}🔨 Starting build process...${NC}"
+
+echo -e "${BLUE}Build frontend...${NC}"
+rm -rf /app/module/oc_telegram_shop/upload/admin/view/javascript
+rm -rf /app/module/oc_telegram_shop/upload/admin/view/integration.js
+cd /app/frontend
+npm install
+NODE_ENV=production npm run build
+rm -rf /app/module/oc_telegram_shop/upload/admin/view/javascript/oc_telegram_shop/.vite
+rm -rf /app/module/oc_telegram_shop/upload/admin/view/javascript/oc_telegram_shop/oc_telegram_shop.js.map
+rm -rf /app/module/oc_telegram_shop/upload/admin/view/javascript/oc_telegram_shop/favicon.ico
+
+echo -e "${BLUE}📦 Packaging into .ocmod.zip...${NC}"
+cd /app/module/oc_telegram_shop
+zip -rqq "${MODULE_NAME}.ocmod.zip" .
+mv "${MODULE_NAME}.ocmod.zip" /build
+
+FINAL_FILE="/build/${MODULE_NAME}.ocmod.zip"
+
+if [ -f "$FINAL_FILE" ]; then
+  FILE_SIZE=$(du -h "$FINAL_FILE" | cut -f1)
+  echo -e "${GREEN}✅ Build completed successfully!${NC}"
+  echo -e "${GREEN}🎉 Created: $FINAL_FILE ($FILE_SIZE)${NC}"
+else
+  echo "❌ Error: Final build file not found: $FINAL_FILE"
+  exit 1
+fi
+
+echo -e "${BLUE}🎯 Build artifact ready for installation!${NC}"

scripts/download_oc_store.sh

@@ -0,0 +1,35 @@
+#!/bin/bash
+
+# The script downloads and unzip ocStore.
+# Should be executed from the project root folder.
+
+set -e
+
+OCSTORE_VERSION=v3.0.3.7
+CACHE_DIR=.cache
+
+echo "👽 Downloading ocStore ${OCSTORE_VERSION}..."
+
+DOWNLOAD_URL="https://github.com/ocStore/ocStore/archive/refs/tags/$OCSTORE_VERSION.zip"
+
+FILE_PATH="$CACHE_DIR/$OCSTORE_VERSION.zip"
+
+if [ ! -f "$FILE_PATH" ]; then
+    mkdir -p "$CACHE_DIR"
+    wget -P "$CACHE_DIR" "$DOWNLOAD_URL"
+else
+    echo "😎 Get file from cache: $FILE_PATH"
+fi
+
+echo "🗃 Unzipping..."
+rm -rf src/*
+
+unzip -q "$FILE_PATH" -d ./src
+SOURCE_DIR=src/ocStore-${OCSTORE_VERSION//v/}
+
+rsync -a $SOURCE_DIR/* ./src
+rm -rf $SOURCE_DIR
+
+chmod -R 775 src
+
+echo "✅ Completed."

scripts/install_ocstore.sh

@@ -0,0 +1,42 @@
+#!/bin/bash
+
+# The script install ocStore.
+# Should be executed from the project root folder.
+
+echo "Setup ocStore..."
+
+set -e
+
+docker compose down -v && docker compose up -d web mysql --remove-orphans
+
+bash ./scripts/wait_for_containers.sh
+bash ./scripts/wait_for_mysql.sh
+
+echo "Install composer dependencies..."
+docker compose exec web bash -c "cd /web; composer update"
+
+docker compose exec web bash -c '\
+	cd /web/upload/install; \
+	php cli_install.php install \
+		--db_hostname mysql \
+		--db_username root \
+		--db_password secret \
+		--db_database ocstore3 \
+		--db_driver mysqli \
+		--db_port 3306 \
+		--username admin \
+		--password admin \
+		--email youremail@example.com \
+		--http_server http://localhost:8000/; exit $?'
+
+docker compose exec web bash -c "cd /web; composer update"
+echo "Moving storage folder outside the system."
+mv src/upload/system/storage src/
+
+docker compose exec web bash -c "\
+  sed -i \"s/DIR_SYSTEM \. 'storage\/'/'\/web\/storage\/'/g\" /web/upload/config.php
+  sed -i \"s/DIR_SYSTEM \. 'storage\/'/'\/web\/storage\/'/g\" /web/upload/admin/config.php"
+
+rm -rf src/upload/install
+
+echo "OcStore successfully installed."

scripts/link.php

@@ -0,0 +1,40 @@
+<?php
+
+$module = 'oc_layout_pro';
+
+$basePath = dirname(__DIR__) . '/';
+
+if ($basePath === '//') {
+    $basePath = '/';
+}
+
+$modulesPath = $basePath . 'module/';
+$modulePath = $modulesPath . $module . '/upload/';
+
+$files = [];
+
+$iterator = new RecursiveDirectoryIterator($modulePath);
+$recursiveIterator = new RecursiveIteratorIterator($iterator);
+
+/** @var SplFileInfo $file */
+foreach ($recursiveIterator as $file) {
+    if ($file->isFile() && fnmatch($pattern = '*', $file->getFilename())) {
+        $files[] = $file->getRealPath();
+    }
+}
+
+foreach ($files as $file) {
+    $link = $basePath . 'web/upload/' . str_replace($modulePath, '', $file);
+
+    if (! is_dir(dirname($link))) {
+        if (!mkdir($concurrentDirectory = dirname($link), 0775, true) && !is_dir($concurrentDirectory)) {
+            throw new \RuntimeException(sprintf('Directory "%s" was not created', $concurrentDirectory));
+        }
+    }
+
+    echo sprintf('%s => %s', $file, $link) . PHP_EOL;
+
+    @unlink($link);
+    symlink($file, $link);
+    chmod($link, 0777);
+}

scripts/wait_for_containers.sh

@@ -0,0 +1,28 @@
+#!/bin/bash
+
+SERVICES=("web" "mysql")
+
+function check_containers {
+  for service in "${SERVICES[@]}"; do
+    if ! docker compose ps $service | grep "Up" > /dev/null; then
+      return 1
+    fi
+  done
+  return 0
+}
+
+echo "Waiting for docker containers..."
+
+MAX_WAIT_TIME=60
+WAIT_TIME=0
+
+while ! check_containers; do
+  if [ $WAIT_TIME -ge $MAX_WAIT_TIME ]; then
+    echo "Containers have not started within $MAX_WAIT_TIME seconds. Exit."
+    exit 1
+  fi
+  sleep 1
+  WAIT_TIME=$((WAIT_TIME + 1))
+done
+
+echo "All docker containers executed."

scripts/wait_for_mysql.sh

@@ -0,0 +1,24 @@
+#!/bin/bash
+
+MYSQL_SERVICE="mysql"
+
+function check_mysql {
+  docker compose exec $MYSQL_SERVICE mysqladmin ping --silent
+}
+
+echo "Waiting for MySQL..."
+
+MAX_WAIT_TIME=60
+WAIT_TIME=0
+
+while ! check_mysql; do
+  if [ $WAIT_TIME -ge $MAX_WAIT_TIME ]; then
+    echo "MySQL has not been available for $MAX_WAIT_TIME secods. Exit."
+    exit 1
+  fi
+  sleep 1
+  WAIT_TIME=$((WAIT_TIME + 1))
+done
+
+sleep 5
+echo "MySQL ready."

spa/README.md

@@ -0,0 +1,5 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).

spa/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

spa/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "tg-mini-app-shop",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@heroicons/vue": "^2.2.0",
+    "@tailwindcss/vite": "^4.1.11",
+    "vue": "^3.5.17"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.0",
+    "autoprefixer": "^10.4.21",
+    "daisyui": "^5.0.46",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.11",
+    "vite": "^7.0.3"
+  }
+}

spa/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

spa/src/App.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="relative flex justify-center items-center p-3">
+    <h1 class="text-gray-950 text-lg font-bold truncate">Демо Телеграм-магазин</h1>
+  </div>
+
+  <div class="p-3">
+    <button
+        class="btn"
+        @click="drawerVisible = true"
+    >
+      Категории
+      <ChevronDownIcon class="w-5"/>
+    </button>
+  </div>
+
+  <div class="grid grid-cols-1 gap-4 p-3 sm:grid-cols-2 md:grid-cols-3">
+    <ProductCard/>
+    <ProductCard/>
+    <ProductCard/>
+    <ProductCard/>
+    <ProductCard/>
+  </div>
+
+  <BottomDrawer v-model="drawerVisible">
+    <ul class="list bg-base-100 rounded-box shadow-md">
+
+      <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Категории</li>
+
+      <li class="list-row">
+        <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div>
+        <div class="flex items-center">Dio Lupa</div>
+      </li>
+
+      <li class="list-row">
+        <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div>
+        <div class="flex items-center">Dio Lupa</div>
+      </li>
+      <li class="list-row">
+        <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div>
+        <div class="flex items-center">Dio Lupa</div>
+      </li>
+      <li class="list-row">
+        <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div>
+        <div class="flex items-center">Dio Lupa</div>
+      </li>
+
+    </ul>
+  </BottomDrawer>
+</template>
+
+<script setup>
+import ProductCard from "./components/ProductCard.vue";
+import { ChevronDownIcon } from '@heroicons/vue/24/outline';
+import BottomDrawer from "./components/BottomDrawer.vue";
+import {ref} from "vue";
+
+const drawerVisible = ref(false);
+
+</script>
+
+<style scoped>
+
+</style>

spa/src/components/BottomDrawer.vue

@@ -0,0 +1,57 @@
+<template>
+  <transition name="fade">
+    <div
+        v-if="visible"
+        class="fixed inset-0 bg-black/50 z-40"
+        @click.self="close"
+    >
+      <transition name="slide-up">
+        <div
+            class="fixed bottom-0 left-0 w-full h-[80vh] bg-white rounded-t-2xl shadow-xl z-50 p-4"
+        >
+          <slot />
+        </div>
+      </transition>
+    </div>
+  </transition>
+</template>
+
+<script setup>
+import {computed} from "vue";
+import { XMarkIcon } from '@heroicons/vue/24/outline';
+
+const props = defineProps({
+  modelValue: Boolean,
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+
+function close() {
+  visible.value = false
+}
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: transform 0.25s ease;
+}
+.slide-up-enter-from,
+.slide-up-leave-to {
+  transform: translateY(100%);
+}
+</style>

spa/src/components/ProductCard.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="bg-white rounded-lg shadow p-3">
+    <img src="https://placehold.co/300x300" alt="Футболка" class="w-full h-auto rounded-md mb-2" />
+    <h2 class="font-semibold text-base">Базовая футболка</h2>
+    <p class="text-sm text-gray-500">RUB 6,000</p>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped>
+
+</style>

spa/src/main.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './style.css'
+
+createApp(App).mount('#app')

spa/src/style.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@plugin "daisyui";

spa/tailwind.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    content: [
+        "./index.html",
+        "./src/**/*.{vue,js,ts,jsx,tsx}",
+    ],
+    theme: {
+        extend: {},
+    },
+    plugins: [require("daisyui")], // убери строку, если DaisyUI не нужен
+};

spa/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import tailwindcss from "@tailwindcss/vite";
+import vue from "@vitejs/plugin-vue";
+
+export default defineConfig({
+  plugins: [tailwindcss(), vue()],
+});