Angular T-shirt shop

Developer
Dima
Size
8,889 Kb
Views
18,216
  1. Angular T-shirt shop Previews
  2. Angular T-shirt shop HTML Codes
  3. Angular T-shirt shop CSS Codes
  4. Angular T-shirt shop JS Codes

How do I make an angular t-shirt shop?

Flexbox angular shopping сart. What is a angular t-shirt shop? How do you make a angular t-shirt shop? This script and codes were developed by Dima on 17 September 2022, Saturday.

Angular T-shirt shop Previews
IQ Test

Angular T-shirt shop - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>angular T-shirt shop</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav id="nav"> <a href="#" class="home"> <svg width="50" height="50"> <circle cx="25" cy="25" r="20" fill="#FFF"></circle> <path d="M41 25l-16-12-16 12v-5l16-12 16 12z M37 25v12h-8v-8h-8v8h-8v-12l12-9z" fill="#8aa4bb"></path> </svg> </a>
</nav>
<!-- NG Mystore -->
<div ng-app="MyNGstore" ng-controller="storeController as store"> <div ng-view class="Shop"></div> <script type="text/ng-template" id="store.html"> <div class="item-product" ng-repeat="product in store.products"> <img ng-src="//zupra.github.io/t-shirt_shop/img/test-2/{{product.id}}.png" alt=""> <div class="store_item-hover actions"> <a href="#/products/{{product.id}}">Подробно ▷</a> <!-- 〉 › --> <div> <button ng-repeat="size in ['S','M','L','XL','XXL']" ng-class="{active: isActive(size)}" ng-click="select(size)" ng-bind="size"> </button> </div> <div>{{product.price}} ₽</div> <button ng-click="cart.addItem(product.id, product.name, product.price, selected, 1)" ng-disabled="!selected"> Купить <span class="number">{{cart.getTotalCount(product.id)}}</span> <span ng-show="!selected" class="need_param">размер ?</span> </button> <div class="store_item-cart" ng-disabled="cart.getTotalCount() < 1"> <b>{{cart.getTotalCount()}}</b> шт. <b>{{cart.getTotalPrice()}}</b> ₽ <a href="#/cart#MyNGstore">	▷ Корзина</a> </div> </div> </div> </script> <script type="text/ng-template" id="product.html"> <div class="product_dscr"> <picture> <img ng-src="//zupra.github.io/t-shirt_shop/img/test-2/{{product.id}}.png" alt="{{product.name}}" /> </picture> <div class="actions"> <a class="btn" href="#">⟨ в каталог</a> <h4>Название</h4> <p>Тестируем Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta at et ipsam culpa voluptatem quod porro facilis tempore corrupti aperiam nobis quis officia vel, rem vitae expedita debitis magni perferendis!</p> <p> Цена <b>{{product.price}}</b> ₽</p> <button ng-repeat="size in ['S','M','L','XL','XXL']" ng-class="{active: isActive(size)}" ng-click="select(size)" ng-bind="size"></button> <button ng-click="cart.addItem(product.id, product.name, product.price, selected, 1)" ng-disabled="!selected"> Купить <span class="number">{{cart.getTotalCount(product.id)}}</span> <span ng-show="!selected" class="need_param">размер ?</span> </button> <div class="cart" ng-disabled="cart.getTotalCount() < 1"> Всего Покупок <b>{{cart.getTotalCount()}}</b> шт. <b>{{cart.getTotalPrice()}}</b> ₽ <a href="#/cart#MyNGstore">Корзина</a> </div> </div> </div> </script> <script type="text/ng-template" id="shoppingCart.html"> <div class="item_incart" ng-repeat="item in cart.items | orderBy:'name'"> <a href="#/products/{{item.id}}"> <img ng-src="//zupra.github.io/t-shirt_shop/img/test-2/{{item.id}}.png" alt="{{item.name}}" /> </a> <div class="item_incart_checkout"> <button class="reset-item" ng-click="cart.addItem(item.id, item.name, item.price, item.size, -10000000)">✖</button> <p> {{item.name}} / {{item.size || "Не выбран"}} </p> <p> <button ng-disabled="item.quantity <= 1" ng-click="cart.addItem(item.id, item.name, item.price, item.size, -1)">-</button> <input type="text" ng-model="item.quantity" ng-change="cart.saveItems()" /> <button ng-disabled="item.quantity >= 1000" ng-click="cart.addItem(item.id, item.name, item.price, item.size, 1)">+</button> </p> <p>{{item.price * item.quantity}} ₽</p> </div> </div> <!-- empty --> <h1 class="bigmess" ng-hide="cart.getTotalCount() > 0">Ваша корзина пуста.</h1> <div class="fixed-cart"> <b>{{cart.getTotalCount()}}</b> шт. <b>{{cart.getTotalPrice()}}</b> ₽ </div> <!-- <a href="store.html#/store#MyNGstore">back to store</a> --> <a class="btn fixed-back" href="#">‹ В каталог</a> <button class="fixed-reset" ng-click="cart.clearItems()" ng-disabled="cart.getTotalCount() < 1"> × Сбросить </button> <!-- SE --> <form id="sendForm"> <input name="entry.2078485491" type="text" placeholder="Имя" required title="имя" /> <input name="entry.1577245810" type="text" placeholder="Тел" required title="телефон" /> <input ame="entry.672290986" type="text" placeholder="mail" /> <input type="hidden" name="entry.2052318090" value={{cart.items}}> <textarea name="entry.424724423"></textarea> <button class="sendFormBtn">Отправить</button> </form> <script> $('#sendForm').on('submit', function(e) { e.preventDefault(); var values = $(this).serialize(), //form = $(this), btn = $('.sendFormBtn'); $.ajax({ type: 'POST', url: 'https://', data: values, complete: function() { btn.addClass('success'); setTimeout(function() { btn.removeClass('success'); form[0].reset(); }, 2000); } //error : function() {} //success: function() {} }); }); </script> </script>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-route.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Angular T-shirt shop - Script Codes CSS Codes

* { padding: 0; margin: 0; box-sizing: border-box;
}
:root { font-size: calc(1vw + 1vh + 0.5vmin);
}
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font: 400 100%/1.63 'Roboto', sans-serif; color: #444; background: url("https://zupra.github.io/t-shirt_shop/img/brick-wall-dark.png") #eee;
}
img { display: block; max-width: 100%; height: auto;
}
button,
input,
select,
textarea { border-radius: 0; box-shadow: none; border: 1px solid #ccc; display: block; max-width: 100%; padding: 0.3em 0.6em; margin-bottom: 0.5em; font-size: 1em;
}
button:focus,
input:focus,
select:focus,
textarea:focus { outline: none;
}
button { border: 0; cursor: pointer;
}
button,
.btn { background: #34495e; padding: 0.3em 0.6em; color: #fff;
}
button:hover,
.btn:hover { background: #333;
}
.btn { margin-bottom: 0.5em; color: #fff; text-decoration: none;
}
[placeholder]:focus::-webkit-input-placeholder { color: transparent;
}
[placeholder]:focus::-moz-placeholder { color: transparent;
}
[placeholder]:focus:-ms-input-placeholder { color: transparent;
}
[placeholder]:focus::placeholder { color: transparent;
}
[disabled] { opacity: 0.3; cursor: default; pointer-events: none;
}
#nav { position: fixed; top: 0; width: 100%; z-index: 5; height: 50px; background: #fff; box-shadow: 0 1px 5px 5px rgba(0,0,0,0.3);
}
.Shop { max-width: 1280px; min-height: 100vh; margin: 0 auto; padding: calc(60px + 1em) 1em 2em; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around;
}
.item-product,
.item_incart { position: relative;
}
.item_incart { -ms-flex-item-align: start; align-self: flex-start;
}
.item-product { font-size: 20px; text-align: center; margin-bottom: 2em;
}
.item-product .store_item-hover { position: absolute; bottom: 0; width: 100%; background: #fff; padding: 1.2em 0 2.4em; display: none; -webkit-transition: display 0.5s; transition: display 0.5s; pointer-events: none;
}
.item-product:hover { background: rgba(255,255,255,0.3);
}
.item-product:hover img { -webkit-transition: -webkit-transform 0.4s; transition: -webkit-transform 0.4s; transition: transform 0.4s; transition: transform 0.4s, -webkit-transform 0.4s; -webkit-transform: scale(1.2); transform: scale(1.2);
}
.item-product:hover .store_item-hover { display: block; pointer-events: auto;
}
.item-product:hover .ftr_store_cart a { -webkit-animation: gelatine 0.5s 0.5s 2; animation: gelatine 0.5s 0.5s 2;
}
.actions a { text-decoration: none; padding: 0 0.6em;
}
.actions a,
.actions button { display: inline-block; background: #fff; margin: 4px; color: #999faf; border: 3px solid #999faf; position: relative; -webkit-transition: 0.4s; transition: 0.4s;
}
.actions a:hover,
.actions button:hover { background: #f62459; color: #fff; border: 3px solid #f62459;
}
.actions a.active,
.actions button.active { background: #999faf; color: #fff; border: 3px solid #999faf;
}
.actions a .number,
.actions button .number { position: absolute; top: -0.7em; right: -0.7em; line-height: 1.2em; padding: 0 0.3em; border-radius: 1.2em; border: 3px solid #fff; background: #999faf; color: #fff;
}
.actions a .need_param,
.actions button .need_param { position: absolute; top: 0; left: 0; padding: 0 0.3em; color: #fff; font-size: 0.8em; line-height: 1; padding: 0.5em; background: rgba(205,90,90,0.8); white-space: nowrap; -webkit-transform: translate(-50%, -50%) rotate(-14deg); transform: translate(-50%, -50%) rotate(-14deg); -webkit-animation: rotate 0.5s 2s 1; animation: rotate 0.5s 2s 1;
}
.actions .store_item-cart { position: absolute; bottom: 0; width: 100%; background: #3498db; color: #fff; line-height: 1.8;
}
.actions .store_item-cart a { margin: 0; border: 0; float: right; background: #f62459; color: #fff;
}
.actions .store_item-cart a:hover { -webkit-animation: gelatine 0.5s 1; animation: gelatine 0.5s 1;
}
.product_dscr { margin: auto; background: rgba(255,255,255,0.3); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.product_dscr .actions { background: #fff; min-width: 300px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 1em;
}
.product_dscr picture { padding: 0 1em; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center;
}
.product_dscr h4 { margin-top: 0.5em;
}
.product_dscr p { margin-bottom: 0.5em;
}
.product_dscr .cart { border-top: 1px solid #ccc; margin-top: 1em; padding-top: 0.7em;
}
.fixed-cart { position: fixed; z-index: 10; right: 1em; top: 0; line-height: 50px;
}
.fixed-reset,
.fixed-back { position: fixed; top: 60px; line-height: 1.4;
}
.fixed-reset { right: 1em;
}
.fixed-back { left: 1em;
}
.item_incart_checkout { font-size: 22px; background: rgba(255,255,255,0.7); padding: 1em 0; width: 80%; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); text-align: center;
}
.item_incart_checkout input,
.item_incart_checkout button { display: inline-block;
}
.item_incart_checkout input { width: 3em; text-align: center;
}
.reset-item { position: absolute; top: 0; right: 0;
}
h1 { width: 100%; text-align: center;
}
#sendForm { margin: 3em;
}
@-webkit-keyframes rotate { 25% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 50% { -webkit-transform: rotate(-14deg); transform: rotate(-14deg); } 75% { -webkit-transform: rotate(-18deg); transform: rotate(-18deg); }
}
@keyframes rotate { 25% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 50% { -webkit-transform: rotate(-14deg); transform: rotate(-14deg); } 75% { -webkit-transform: rotate(-18deg); transform: rotate(-18deg); }
}
@-webkit-keyframes gelatine { 25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); } 50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); } 75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); }
}
@keyframes gelatine { 25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); } 50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); } 75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); }
}

Angular T-shirt shop - Script Codes JS Codes

/*
TEST
http://www.responsinator.com/?url=http://s.codepen.io/dimaZubkov/debug/eZwXON#/store
*/
'use strict';
//name ModuleName matches the ng-app attribute in the main <html> tag
var storeApp = angular.module('MyNGstore', ['ngRoute']);
storeApp.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/store', { templateUrl: 'store.html', controller: 'storeController' }). when('/products/:productCode', { templateUrl: 'product.html', controller: 'storeController' }). when('/cart', { templateUrl: 'shoppingCart.html', controller: 'storeController' }). otherwise({ redirectTo: '/store' });
}]);
storeApp.controller('storeController', function ($scope, $routeParams, DataService) { //size item $scope.select = function(item) { $scope.selected = item; }; $scope.isActive = function(item) { return $scope.selected === item; }; $scope.store = DataService.store; $scope.cart = DataService.cart; if ($routeParams.productCode != null) { $scope.product = $scope.store.getProduct($routeParams.productCode); }
});
//shared all views
storeApp.factory("DataService", function () { var myStore = new store(), myCart = new shoppingCart("ngStore"); return { store: myStore, cart: myCart, };
});
function store() { this.products = [{ id: 1, name: "black", price: 99 }, { id: 2, name: "dark-blue", price: 99 }, { id: 3, name: "green", price: 99 }, { id: 4, name: "grey", price: 99 }, { id: 5, name: "light-blue", price: 99 }, { id: 6, name: "pink", price: 99 }, { id: 7, name: "purple", price: 99 }, { id: 8, name: "red", price: 99 }, { id: 9, name: "white", price: 99 }];
}
// URL $routeParams.productCode
store.prototype.getProduct = function(id) { for (var i = 0; i < this.products.length; i++) { if (this.products[i].id == id) return this.products[i]; } return null;
}
//=== CART ======
function shoppingCart(cartName) { this.cartName = cartName; this.clearCart = false; //this.checkoutParameters = {}; this.items = []; // load items from local storage when initializing this.loadItems(); // save items to local storage when unloading var self = this; $(window).unload(function () { if (self.clearCart) { self.clearItems(); } self.saveItems(); self.clearCart = false; });
}
// product class | items in the cart
function cartItem(id, name, price, size, quantity) { this.id = id; this.name = name; this.price = price * 1; this.size = size; this.quantity = quantity * 1;
}
// utility not NaN
shoppingCart.prototype.toNumber = function(value) { value = value * 1; return isNaN(value) ? 0 : value;
}
// >>> shoppingCart metods
// load items from local storage
shoppingCart.prototype.loadItems = function() { var items = localStorage != null ? localStorage[this.cartName + "_items"] : null; if (items != null && JSON != null){ try { var items = JSON.parse(items); for (var i = 0; i < items.length; i++) { var item = items[i]; if (item.id != null) { item = new cartItem(item.id, item.name, item.price, item.size, item.quantity); this.items.push(item); } } } catch (err) { // catches the errors while loading } }
}
// save items to local storage
shoppingCart.prototype.saveItems = function () { if (localStorage != null && JSON != null) { localStorage[this.cartName + "_items"] = JSON.stringify(this.items); //localStorage[this.cartName + "_items"] = angular.toJson(this.items); }
}
// adds || update an item to the cart
shoppingCart.prototype.addItem = function(id, name, price, size, quantity) { var quantity = this.toNumber(quantity); var price = this.toNumber(price); // update quantity for existing item var found = false; for (var i = 0; i < this.items.length && !found; i++) { var item = this.items[i]; // existing item if (item.id == id && item.size == size) { found = true; item.quantity = this.toNumber(item.quantity + quantity); //remove existing item if (item.quantity <= 0) { this.items.splice(i, 1); } } } // new item, add now if (!found) { var item = new cartItem(id, name, price, size, quantity); this.items.push(item); } // save changes this.saveItems();
}
// get the total price for all items currently in the cart
shoppingCart.prototype.getTotalPrice = function(id) { var total = 0; for (var i = 0; i < this.items.length; i++) { var item = this.items[i]; if (id == null || item.id == id) { total += this.toNumber(item.quantity * item.price); } } return total;
}
// get the total price for all items currently in the cart
shoppingCart.prototype.getTotalCount = function(id) { var count = 0; for (var i = 0; i < this.items.length; i++) { var item = this.items[i]; if (id == null || item.id == id) { count += this.toNumber(item.quantity); } } return count;
}
// clear the cart
shoppingCart.prototype.clearItems = function() { this.items = []; this.saveItems();
}
Angular T-shirt shop - Script Codes
Angular T-shirt shop - Script Codes
Home Page Home
Developer Dima
Username dimaZubkov
Uploaded September 17, 2022
Rating 3.5
Size 8,889 Kb
Views 18,216
Do you need developer help for Angular T-shirt shop?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dima (dimaZubkov) Script Codes
Name
Fluid typography
Codrops HoverEffectIdeas
Section scroll
Burger nav
Glitch
Scroll animating effect
Responsive typography harmony
Web Audio API
Audio button
Price range slider
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!