{"id":17965872,"url":"https://github.com/bert27/angular-shop","last_synced_at":"2025-08-16T12:33:41.742Z","repository":{"id":259255060,"uuid":"874678288","full_name":"bert27/angular-shop","owner":"bert27","description":"An Angular-based e-commerce platform for product browsing, cart management, and online shopping.","archived":false,"fork":false,"pushed_at":"2024-11-18T14:01:24.000Z","size":3499,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"develop","last_synced_at":"2024-11-18T15:10:34.918Z","etag":null,"topics":["angular-shopping","angular18","carousel","material-ui","ngx-owl-carousel-o","pwa","responsive-design","sass","shoping-cart","shopings","shoppingstore","stripe","typescript","ui"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bert27.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-18T09:07:33.000Z","updated_at":"2024-11-18T14:01:29.000Z","dependencies_parsed_at":"2024-10-23T22:58:01.045Z","dependency_job_id":"886971f5-5f79-409e-8f69-96437db02a3b","html_url":"https://github.com/bert27/angular-shop","commit_stats":{"total_commits":4,"total_committers":2,"mean_commits":2.0,"dds":0.25,"last_synced_commit":"7a2e8d59986ed095b9e2b02326e60b598589b114"},"previous_names":["bert27/angular-shop"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bert27%2Fangular-shop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bert27%2Fangular-shop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bert27%2Fangular-shop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bert27%2Fangular-shop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bert27","download_url":"https://codeload.github.com/bert27/angular-shop/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230038878,"owners_count":18163311,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular-shopping","angular18","carousel","material-ui","ngx-owl-carousel-o","pwa","responsive-design","sass","shoping-cart","shopings","shoppingstore","stripe","typescript","ui"],"created_at":"2024-10-29T13:05:51.700Z","updated_at":"2025-08-16T12:33:41.729Z","avatar_url":"https://github.com/bert27.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🛍️ Ng-shop\n\nThis project is an online store in Spanish created with Angular.\n\n[![Visit Shop🚀](https://img.shields.io/badge/Visit%20Shop-Angular--Store-00BFFF?style=for-the-badge)](https://angular-shop-iota.vercel.app/)\n\n---\n\n## 💳 Payment Methods\n\nIt supports **three payment gateways**:\n\n```ts\ntype MethodPayInterface = 'monei' | 'stripe' | 'redsys';\n```\n\n### ✨ Features V1.3:\\*\\*\n\n- Multiple payment gateways (Redsys, Monei, Stripe)\n- Invoice delivery via email with React HTML templates\n- PDF invoice generation with logo and VAT included\n\n### 🧩 Components:\n\n- Carousel with animations\n- Forms for user inputs\n- Shopping cart with product management\n- Button to download invoices in PDF\n- Responsive design for all devices\n\n### ⚙️ Configuration:\n\n- All data is defined in data.ts\n- Products are configured in products-data.ts\n- In selectedMethodPay, you can use monei or stripe. This will automatically switch the payment method.\n\n  ```export const dataWeb = {\n  nameShop: 'Tecnología Avanzada',\n  name: 'mike',\n  email: 'soporte@tecnologiaavanzada.com',\n  instagram: 'https://www.instagram.com',\n  youtube: 'https://www.youtube.com',\n  phone: '+34 900 123 456',\n  address: 'Calle Innovación 42, 28001 Madrid, España',\n  nif: 'A12345678',\n  paymentIntentUrl:\n   (selectedMethodPay as MethodPayInterface) === 'stripe'\n     ? 'http://localhost:4000/stripe-payment'\n     : 'http://localhost:4000/monei-payment',\n\n  shippingCost: 9,\n  logo: {\n   mobile: `${directory}/images-logo/logo-head-mobile.png`,\n   pc: `${directory}/images-logo/logo-head.png`,\n   icon: `${directory}/icon.ico`,\n  },\n  ```\n\n### 🔗 Webhooks and External Communication:\n\n    -  The server includes an example .env file. For the webhooks to work, use ngrok or any other tool to expose your local server to the internet.\n    -  If you deploy the server outside your local machine, this issue will not occur.\n    -  External communication allows payment gateways to return the status of the order (successful or failed) to the server.\n    -  Once the server receives the payment status, it sends a PDF invoice with a React HTML template.\n\n### 🖥️ PC\n\n\u003cdiv style=\"display: flex; align-items: center; width: 100%;\"\u003e\n  \u003cimg src=\"public/screenshots/index_PC.png\" alt=\"Home\" style=\"width: 40%;\"\u003e\n  \u003cimg src=\"public/screenshots/products_PC.png\" alt=\"Products\" style=\"width: 40%;\"\u003e\n\u003c/div\u003e\n\n## 📱 SmartPhone\n\n\u003cdiv style=\"display: flex; align-items: center; width: 100%;\"\u003e\n  \u003cimg src=\"public/screenshots/index_MVL.png\" alt=\"Home\" style=\"width: 40%;\"\u003e\n  \u003cimg src=\"public/screenshots/products_MVL.png\" alt=\"Products\" style=\"width: 40%;\"\u003e\n\u003c/div\u003e\n\n---\n\n## 🧾 Redsys Integration\n\nNg-shop also includes full support for **Redsys** with **3DS protocol**.\n\nYou can test the Redsys payment integration using these test cards:\n\n🔗 [Redsys Test Cards and Environments](https://pagosonline.redsys.es/desarrolladores-inicio/integrate-con-nosotros/tarjetas-y-entornos-de-prueba/)\n\n| **Brand**  | **Protocol** | **Card Number**     | **Expiry** | **CVV** |\n| ---------- | ------------ | ------------------- | ---------- | ------- |\n| VISA       | EMV3DS 2.2   | 4548 8100 0000 0003 | 12/49      | 123     |\n| Mastercard | EMV3DS 2.1   | 5576 4415 6304 5037 | 12/49      | 123     |\n\n\u003cimg src=\"public/screenshots/redsys.png\" alt=\"Redsys Payment Screenshot\" width=\"60%\"\u003e\n\n### Other Characteristics\n\n| **View template in server**                                                        | **PDF template in server**                        | **Cart**                           |\n| ---------------------------------------------------------------------------------- | ------------------------------------------------- | ---------------------------------- |\n| localhost:4000/preview-email\u003cbr\u003e![Template](public/screenshots/template-email.png) | ![Template](public/screenshots/template-pdf.jpeg) | ![Cart](public/screenshots/1a.png) |\n\n---\n\n## Install\n\nNavigate to the project and run:\n\nnpm i\n\n## ▶️ Start the web to get started\n\nRun npm run start or ng serve to start both the client and server. Both run on http://localhost:3000/\n\nAlternatively, you can click on start-mac.sh (for macOS) or start-windows.bat (for Windows) to start the application.\n\n---\n\n## How to modify products\n\nTo modify the products, go to `src/data/products-data.ts`. This file contains an array of product objects exported as `productsData`. Each product has properties such as `title`, `description`, `stock`, `imageUrl`, `category`, and `options`. You can add or update products by modifying the objects in this file.\n\n### Example\n\nEach product is an object with properties such as:\n\n- title\n\n- description\n\n- stock\n\n- imageUrl\n\n- category\n\n- options (with price and tipo)\n\n```javascript\nexport const cardProduct1 = {\n  title: 'Iphone 16 pro',\n  description: 'Smartphone 5G con Control de Cámara, grabación en 4K a 120 f/s con Dolby Vision.',\n  stock: true,\n  imageUrl: 'images-products/1.jpg',\n  options: [\n    {\n      price: 1219,\n      tipo: '128Gb',\n    },\n    {\n      price: 1540,\n      tipo: '256Gb',\n    },\n    {\n      price: 1800,\n      tipo: '512Gb',\n    },\n  ],\n};\n```\n\n```\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbert27%2Fangular-shop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbert27%2Fangular-shop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbert27%2Fangular-shop/lists"}