├── src └── shopping │ ├── conf │ └── app.conf │ ├── static │ ├── img │ │ ├── img1.jpg │ │ ├── img2.jpg │ │ ├── pass.jpg │ │ ├── Thumbs.db │ │ ├── thumb-1.jpg │ │ ├── thumb-2.jpg │ │ ├── thumb-3.jpg │ │ ├── cd-icon-arrow.svg │ │ ├── cd-icon-cart.svg │ │ └── cd-icon-settings.svg │ ├── cart │ │ ├── images │ │ │ ├── Thumbs.db │ │ │ ├── img1.jpg │ │ │ └── img2.jpg │ │ ├── css │ │ │ └── index.css │ │ ├── js │ │ │ └── Calculation.js │ │ └── index.html │ ├── index │ │ ├── img │ │ │ ├── thumb-1.jpg │ │ │ ├── thumb-2.jpg │ │ │ ├── thumb-3.jpg │ │ │ ├── cd-icon-arrow.svg │ │ │ ├── cd-icon-cart.svg │ │ │ └── cd-icon-settings.svg │ │ ├── css │ │ │ ├── reset.css │ │ │ └── style.css │ │ ├── index.html │ │ └── js │ │ │ ├── main.js │ │ │ └── modernizr.js │ ├── css │ │ ├── reset.css │ │ ├── index.css │ │ └── style.css │ └── js │ │ ├── main.js │ │ ├── Calculation.js │ │ └── modernizr.js │ ├── routers │ └── router.go │ ├── controllers │ ├── default.go │ └── show.go │ ├── helper │ └── format.go │ ├── main.go │ ├── tests │ └── default_test.go │ ├── views │ ├── show.tpl │ ├── mycart.tpl │ └── index.tpl │ └── models │ └── models.go ├── README.md └── hello.go /src/shopping/conf/app.conf: -------------------------------------------------------------------------------- 1 | appname = shopping 2 | httpport = 8080 3 | runmode = dev 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # BeeGo Shopping Cart 2 | 使用golang 3 | beego框架+mysql数据库 4 | 一个简单的购物车演示，增删改查。 5 | -------------------------------------------------------------------------------- /hello.go: -------------------------------------------------------------------------------- 1 | package main 2 | 3 | import "fmt" 4 | 5 | func main() { 6 | fmt.Printf("hello, world\n") 7 | } 8 | -------------------------------------------------------------------------------- /src/shopping/static/img/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cowkeys/beego_shoppingCart/master/src/shopping/static/img/img1.jpg -------------------------------------------------------------------------------- /src/shopping/static/img/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cowkeys/beego_shoppingCart/master/src/shopping/static/img/img2.jpg -------------------------------------------------------------------------------- /src/shopping/static/img/pass.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cowkeys/beego_shoppingCart/master/src/shopping/static/img/pass.jpg -------------------------------------------------------------------------------- /src/shopping/static/img/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cowkeys/beego_shoppingCart/master/src/shopping/static/img/Thumbs.db -------------------------------------------------------------------------------- /src/shopping/static/img/thumb-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cowkeys/beego_shoppingCart/master/src/shopping/static/img/thumb-1.jpg -------------------------------------------------------------------------------- /src/shopping/static/img/thumb-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cowkeys/beego_shoppingCart/master/src/shopping/static/img/thumb-2.jpg -------------------------------------------------------------------------------- /src/shopping/static/img/thumb-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cowkeys/beego_shoppingCart/master/src/shopping/static/img/thumb-3.jpg -------------------------------------------------------------------------------- /src/shopping/static/cart/images/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cowkeys/beego_shoppingCart/master/src/shopping/static/cart/images/Thumbs.db -------------------------------------------------------------------------------- /src/shopping/static/cart/images/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cowkeys/beego_shoppingCart/master/src/shopping/static/cart/images/img1.jpg -------------------------------------------------------------------------------- /src/shopping/static/cart/images/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cowkeys/beego_shoppingCart/master/src/shopping/static/cart/images/img2.jpg -------------------------------------------------------------------------------- /src/shopping/static/index/img/thumb-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cowkeys/beego_shoppingCart/master/src/shopping/static/index/img/thumb-1.jpg -------------------------------------------------------------------------------- /src/shopping/static/index/img/thumb-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cowkeys/beego_shoppingCart/master/src/shopping/static/index/img/thumb-2.jpg -------------------------------------------------------------------------------- /src/shopping/static/index/img/thumb-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cowkeys/beego_shoppingCart/master/src/shopping/static/index/img/thumb-3.jpg -------------------------------------------------------------------------------- /src/shopping/static/img/cd-icon-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/shopping/static/index/img/cd-icon-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/shopping/routers/router.go: -------------------------------------------------------------------------------- 1 | package routers 2 | 3 | import ( 4 | "shopping/controllers" 5 | "github.com/astaxie/beego" 6 | ) 7 | 8 | func init() { 9 | beego.Router("/", &controllers.MainController{}) 10 | beego.Router("/showcart", &controllers.ShowController{},"get:Showcart") 11 | beego.Router("/additem", &controllers.ShowController{}, "post:Additem") 12 | beego.Router("/addmin", &controllers.ShowController{}, "post:Addmin") 13 | beego.Router("/deleteitem", &controllers.ShowController{}, "post:Deleteitem") 14 | beego.Router("/order", &controllers.ShowController{}, "post:Getorder") 15 | } 16 | -------------------------------------------------------------------------------- /src/shopping/controllers/default.go: -------------------------------------------------------------------------------- 1 | package controllers 2 | 3 | import ( 4 | "github.com/astaxie/beego" 5 | //"shopping/models" 6 | ) 7 | 8 | type MainController struct { 9 | beego.Controller 10 | } 11 | func (c *MainController) Get() { 12 | /*c.Data["Website"] = "beego.me" 13 | c.Data["Email"] = "astaxie@gmail.com" 14 | 15 | uid := 2 16 | username := "测试内容" 17 | password := "2333" 18 | var usr models.User 19 | id, err := usr.Add(uid, username, password) 20 | if err == nil { 21 | c.Data["errr"] =id 22 | } else{c.Data["errr"] =err} 23 | */ 24 | c.TplName = "show.tpl"//默认到模板目录Controller/<方法名>.tpl：MainController/index.tpl 25 | //c.Ctx.WriteString("hello rick") 26 | } 27 | -------------------------------------------------------------------------------- /src/shopping/helper/format.go: -------------------------------------------------------------------------------- 1 | package helper 2 | 3 | import ( 4 | //"github.com/astaxie/beego/orm" 5 | //_ "github.com/go-sql-driver/mysql" 6 | //"github.com/astaxie/beego" 7 | "strconv" 8 | ) 9 | 10 | 11 | 12 | func init() { 13 | 14 | } 15 | //int 转 string 16 | func Its(num int) (string) { 17 | i := int64(num) 18 | return strconv.FormatInt(i, 10) 19 | } 20 | func I64ts(num int64) (string) { 21 | return strconv.FormatInt(num, 10) 22 | } 23 | func Sti(s string) (int) { 24 | intid, err := strconv.Atoi(s) 25 | if err==nil{ 26 | return int(intid) 27 | } 28 | return int(intid) 29 | } 30 | 31 | func Stf64(s string) (float64) { 32 | f, err := strconv.ParseFloat(s, 64) 33 | if err==nil{ 34 | return f 35 | } 36 | return float64(0) 37 | } 38 | -------------------------------------------------------------------------------- /src/shopping/static/img/cd-icon-cart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/shopping/static/index/img/cd-icon-cart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/shopping/main.go: -------------------------------------------------------------------------------- 1 | package main 2 | 3 | import ( 4 | _ "shopping/routers" 5 | "github.com/astaxie/beego/orm" 6 | _ "github.com/go-sql-driver/mysql" 7 | "github.com/astaxie/beego" 8 | ) 9 | func init() { 10 | // PostgreSQL 配置 11 | /* pname:=beego.AppConfig.String("psqlnickname") 12 | puser:=beego.AppConfig.String("drivetype") 13 | connectstr:=beego.AppConfig.String("psqlconnectstr") 14 | 15 | orm.RegisterDriver("postgres", orm.DRPostgres) // 注册驱动 16 | orm.RegisterDataBase(pname, puser,connectstr)*/ 17 | 18 | // Mysql 配置 19 | orm.RegisterDriver("mysql", orm.DRMySQL) //注册数据库驱动 20 | orm.RegisterDataBase("default", "mysql", "root:@/newdef?charset=utf8") //注册一个别名为default的数据库 //设置数据库最大连接数 21 | // 自动建表 22 | orm.RunSyncdb("default", false, true) 23 | 24 | } 25 | func main() { 26 | beego.Run() 27 | } 28 | -------------------------------------------------------------------------------- /src/shopping/tests/default_test.go: -------------------------------------------------------------------------------- 1 | package test 2 | 3 | import ( 4 | "net/http" 5 | "net/http/httptest" 6 | "testing" 7 | "runtime" 8 | "path/filepath" 9 | _ "shopping/routers" 10 | 11 | "github.com/astaxie/beego" 12 | . "github.com/smartystreets/goconvey/convey" 13 | ) 14 | 15 | func init() { 16 | _, file, _, _ := runtime.Caller(1) 17 | apppath, _ := filepath.Abs(filepath.Dir(filepath.Join(file, ".." + string(filepath.Separator)))) 18 | beego.TestBeegoInit(apppath) 19 | } 20 | 21 | 22 | // TestMain is a sample to run an endpoint test 23 | func TestMain(t *testing.T) { 24 | r, _ := http.NewRequest("GET", "/", nil) 25 | w := httptest.NewRecorder() 26 | beego.BeeApp.Handlers.ServeHTTP(w, r) 27 | 28 | beego.Trace("testing", "TestMain", "Code[%d]\n%s", w.Code, w.Body.String()) 29 | 30 | Convey("Subject: Test Station Endpoint\n", t, func() { 31 | Convey("Status Code Should Be 200", func() { 32 | So(w.Code, ShouldEqual, 200) 33 | }) 34 | Convey("The Result Should Not Be Empty", func() { 35 | So(w.Body.Len(), ShouldBeGreaterThan, 0) 36 | }) 37 | }) 38 | } 39 | 40 | -------------------------------------------------------------------------------- /src/shopping/static/img/cd-icon-settings.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/shopping/static/index/img/cd-icon-settings.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/shopping/static/css/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section, main { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } -------------------------------------------------------------------------------- /src/shopping/static/index/css/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section, main { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } -------------------------------------------------------------------------------- /src/shopping/static/css/index.css: -------------------------------------------------------------------------------- 1 | *{margin:0px;padding:0px;border:0px; font-size:12px;color:#333; font-family:微软雅黑;} 2 | ul li{ list-style:none} 3 | a{ text-decoration:none;} 4 | a:hover{ color:#e46432;} 5 | body{margin:auto; background:url(../images/bj.jpg);overflow-x:hidden;} 6 | 7 | 8 | /*****购物车*********/ 9 | .gwc{ width:950px;overflow:hidden;} 10 | .gwc_tb1{ width:100%; border-top:5px solid #48b9e5; background:#d0e7fa; height:38px; margin-top:20px; overflow:hidden;} 11 | .tb1_td1{ width:35px; text-align:center;} 12 | .tb1_td3{ width:290px; text-align:center; background:url(../images/td1.jpg) right no-repeat;} 13 | .tb1_td4{ width:260px; text-align:center; background:url(../images/td1.jpg) right no-repeat;} 14 | .tb1_td5{ width:115px; text-align:center; background:url(../images/td1.jpg) right no-repeat;} 15 | .tb1_td6{ width:135px; text-align:center; background:url(../images/td1.jpg) right no-repeat;} 16 | .tb1_td7{ text-align:center;} 17 | 18 | 19 | .gwc_tb2{ width:100%; margin-top:20px; background:#eef6ff; border:1px solid #e5e5e5; padding-top:20px; padding-bottom:20px;} 20 | .tb2_td1{ width:60px; text-align:center;} 21 | .tb2_td2{ width:100px; text-align:center;} 22 | .tb2_td2 img{ width:96px; height:96px; border:2px solid #c9c6c7;} 23 | .tb2_td3{ width:170px; padding-left:12px; padding-right:18px;} 24 | .tb2_td3 a{ font-size:14px; line-height:22px;} 25 | 26 | .gwc_tb3{ width:100%; border:1px solid #d2d2d2; background:#e7e7e7; height:46px; margin-top:20px; } 27 | .gwc_tb3 tr td{font-size:14px;} 28 | .tb3_td2{ width:100px;text-align:center;} 29 | .tb3_td2 span{ color:#ff5500;font-size:14px; font-weight:bold; padding-left:5px; padding-right:5px; } 30 | .tb3_td3{ width:220px;text-align:center;} 31 | .tb3_td3 span{ font-size:18px; font-weight:bold;} 32 | .tb3_td4{ width:110px;text-align:center;} 33 | .jz2{ width:100px; height:46px; line-height:46px; text-align:center; font-size:18px; color:#fff; background:#ee0000; display:block; float:right;} 34 | #jz1{font-size:18px;} 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /src/shopping/static/cart/css/index.css: -------------------------------------------------------------------------------- 1 | *{margin:0px;padding:0px;border:0px; font-size:12px;color:#333; font-family:微软雅黑;} 2 | ul li{ list-style:none} 3 | a{ text-decoration:none;} 4 | a:hover{ color:#e46432;} 5 | body{margin:auto; background:url(../images/bj.jpg);overflow-x:hidden;} 6 | 7 | 8 | /*****购物车*********/ 9 | .gwc{ width:950px;overflow:hidden;} 10 | .gwc_tb1{ width:100%; border-top:5px solid #48b9e5; background:#d0e7fa; height:38px; margin-top:20px; overflow:hidden;} 11 | .tb1_td1{ width:35px; text-align:center;} 12 | .tb1_td3{ width:290px; text-align:center; background:url(../images/td1.jpg) right no-repeat;} 13 | .tb1_td4{ width:260px; text-align:center; background:url(../images/td1.jpg) right no-repeat;} 14 | .tb1_td5{ width:115px; text-align:center; background:url(../images/td1.jpg) right no-repeat;} 15 | .tb1_td6{ width:135px; text-align:center; background:url(../images/td1.jpg) right no-repeat;} 16 | .tb1_td7{ text-align:center;} 17 | 18 | 19 | .gwc_tb2{ width:100%; margin-top:20px; background:#eef6ff; border:1px solid #e5e5e5; padding-top:20px; padding-bottom:20px;} 20 | .tb2_td1{ width:60px; text-align:center;} 21 | .tb2_td2{ width:100px; text-align:center;} 22 | .tb2_td2 img{ width:96px; height:96px; border:2px solid #c9c6c7;} 23 | .tb2_td3{ width:170px; padding-left:12px; padding-right:18px;} 24 | .tb2_td3 a{ font-size:14px; line-height:22px;} 25 | 26 | .gwc_tb3{ width:100%; border:1px solid #d2d2d2; background:#e7e7e7; height:46px; margin-top:20px; } 27 | .gwc_tb3 tr td{font-size:14px;} 28 | .tb3_td2{ width:100px;text-align:center;} 29 | .tb3_td2 span{ color:#ff5500;font-size:14px; font-weight:bold; padding-left:5px; padding-right:5px; } 30 | .tb3_td3{ width:220px;text-align:center;} 31 | .tb3_td3 span{ font-size:18px; font-weight:bold;} 32 | .tb3_td4{ width:110px;text-align:center;} 33 | .jz2{ width:100px; height:46px; line-height:46px; text-align:center; font-size:18px; color:#fff; background:#ee0000; display:block; float:right;} 34 | #jz1{font-size:18px;} 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /src/shopping/controllers/show.go: -------------------------------------------------------------------------------- 1 | package controllers 2 | 3 | import ( 4 | "github.com/astaxie/beego" 5 | "shopping/models" 6 | "shopping/helper" 7 | "github.com/astaxie/beego/orm" 8 | ) 9 | 10 | type ShowController struct { 11 | beego.Controller 12 | } 13 | func (this *ShowController) Additem() { 14 | pid := helper.Sti(this.GetString("p")) 15 | //beego.Debug(pid) 16 | num := helper.Sti(this.GetString("n")) 17 | beego.Debug("num",num) 18 | 19 | var item models.Item 20 | beego.Debug("pid",pid) 21 | var s= item.Additem(pid,int(3),num) 22 | resultjson := map[string]string{"status":s} 23 | this.Data["json"] = &resultjson 24 | this.ServeJSON() 25 | } 26 | func (this *ShowController) Showcart() { 27 | //uid := helper.Sti(this.GetString("u")) 28 | uid := int(3) 29 | var maps []orm.Params = models.Queryitems(uid) 30 | beego.Debug("aaa",maps) 31 | this.Data["list"] = maps 32 | this.TplName = "mycart.tpl" 33 | } 34 | func (this *ShowController) Addmin() { 35 | pid := helper.Sti(this.GetString("p")) 36 | num := helper.Sti(this.GetString("n")) 37 | beego.Debug("pid",pid) 38 | beego.Debug("num",num) 39 | var item models.Itemnum 40 | //beego.Debug("pid",pid) 41 | var s= item.Addmin(pid,num) 42 | resultjson := map[string]string{"status":s} 43 | this.Data["json"] = &resultjson 44 | this.ServeJSON() 45 | } 46 | func (this *ShowController) Deleteitem() { 47 | pid := helper.Sti(this.GetString("p")) 48 | var item models.Item 49 | //beego.Debug("pid",pid) 50 | var s= item.Deleteitem(pid) 51 | resultjson := map[string]string{"status":s} 52 | this.Data["json"] = &resultjson 53 | this.ServeJSON() 54 | } 55 | 56 | func (this *ShowController) Getorder() { 57 | ids := this.GetStrings("ids") 58 | totalp := this.GetString("totp") 59 | //beego.Debug("idsssss",ids) 60 | //beego.Debug("totalp",totalp) 61 | var order models.Order 62 | //beego.Debug("pid",pid) 63 | //var s= item.Deleteitem(pid) 64 | var uid = int(3) 65 | var remarks = "订单备注" 66 | var s= order.Addorder(ids,uid,remarks,helper.Stf64(totalp)) 67 | resultjson := map[string]string{"status":s} 68 | this.Data["json"] = &resultjson 69 | this.ServeJSON() 70 | } 71 | -------------------------------------------------------------------------------- /src/shopping/static/index/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 购物 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 0 13 | 14 | 15 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /src/shopping/views/show.tpl: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | show 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 0 13 | 14 | 15 | 95 |

96 | 97 | 98 | 99 | 100 | 124 | 125 | -------------------------------------------------------------------------------- /src/shopping/static/js/main.js: -------------------------------------------------------------------------------- 1 | jQuery(document).ready(function(){ 2 | var productCustomization = $('.cd-customization'), 3 | cart = $('.cd-cart'), 4 | animating = false; 5 | 6 | initCustomization(productCustomization); 7 | 8 | $('body').on('click', function(event){ 9 | //if user clicks outside the .cd-gallery list items - remove the .hover class and close the open ul.size/ul.color list elements 10 | if( $(event.target).is('body') || $(event.target).is('.cd-gallery') ) { 11 | deactivateCustomization(); 12 | } 13 | }); 14 | 15 | function initCustomization(items) { 16 | items.each(function(){ 17 | var actual = $(this), 18 | selectOptions = actual.find('[data-type="select"]'), 19 | addToCartBtn = actual.find('.add-to-cart'), 20 | touchSettings = actual.next('.cd-customization-trigger'); 21 | 22 | //detect click on ul.size/ul.color list elements 23 | selectOptions.on('click', function(event) { 24 | var selected = $(this); 25 | //open/close options list 26 | selected.toggleClass('is-open'); 27 | resetCustomization(selected); 28 | 29 | if($(event.target).is('li')) { 30 | // update selected option 31 | var activeItem = $(event.target), 32 | index = activeItem.index() + 1; 33 | 34 | activeItem.addClass('active').siblings().removeClass('active'); 35 | selected.removeClass('selected-1 selected-2 selected-3').addClass('selected-'+index); 36 | // if color has been changed, update the visible product image 37 | selected.hasClass('color') && updateSlider(selected, index-1); 38 | } 39 | }); 40 | 41 | //detect click on the add-to-cart button 42 | addToCartBtn.on('click', function() { 43 | if(!animating) { 44 | //animate if not already animating 45 | animating = true; 46 | resetCustomization(addToCartBtn); 47 | 48 | addToCartBtn.addClass('is-added').find('path').eq(0).animate({ 49 | //draw the check icon 50 | 'stroke-dashoffset':0 51 | }, 300, function(){ 52 | setTimeout(function(){ 53 | updateCart(); 54 | addToCartBtn.removeClass('is-added').find('em').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ 55 | //wait for the end of the transition to reset the check icon 56 | addToCartBtn.find('path').eq(0).css('stroke-dashoffset', '19.79'); 57 | animating = false; 58 | }); 59 | 60 | if( $('.no-csstransitions').length > 0 ) { 61 | // check if browser doesn't support css transitions 62 | addToCartBtn.find('path').eq(0).css('stroke-dashoffset', '19.79'); 63 | animating = false; 64 | } 65 | }, 600); 66 | }); 67 | } 68 | }); 69 | 70 | //detect click on the settings icon - touch devices only 71 | touchSettings.on('click', function(event){ 72 | event.preventDefault(); 73 | resetCustomization(addToCartBtn); 74 | }); 75 | }); 76 | } 77 | 78 | function updateSlider(actual, index) { 79 | var slider = actual.parent('.cd-customization').prev('a').children('.cd-slider-wrapper'), 80 | slides = slider.children('li'); 81 | 82 | slides.eq(index).removeClass('move-left').addClass('selected').prevAll().removeClass('selected').addClass('move-left').end().nextAll().removeClass('selected move-left'); 83 | } 84 | 85 | function resetCustomization(selectOptions) { 86 | //close ul.clor/ul.size if they were left open and user is not interacting with them anymore 87 | //remove the .hover class from items if user is interacting with a different one 88 | selectOptions.siblings('[data-type="select"]').removeClass('is-open').end().parents('.cd-single-item').addClass('hover').parent('li').siblings('li').find('.cd-single-item').removeClass('hover').end().find('[data-type="select"]').removeClass('is-open'); 89 | } 90 | 91 | function deactivateCustomization() { 92 | productCustomization.parent('.cd-single-item').removeClass('hover').end().find('[data-type="select"]').removeClass('is-open'); 93 | } 94 | 95 | function updateCart() { 96 | //show counter if this is the first item added to the cart 97 | ( !cart.hasClass('items-added') ) && cart.addClass('items-added'); 98 | 99 | var cartItems = cart.find('span'), 100 | text = parseInt(cartItems.text()) + 1; 101 | cartItems.text(text); 102 | } 103 | }); -------------------------------------------------------------------------------- /src/shopping/static/index/js/main.js: -------------------------------------------------------------------------------- 1 | jQuery(document).ready(function(){ 2 | var productCustomization = $('.cd-customization'), 3 | cart = $('.cd-cart'), 4 | animating = false; 5 | 6 | initCustomization(productCustomization); 7 | 8 | $('body').on('click', function(event){ 9 | //if user clicks outside the .cd-gallery list items - remove the .hover class and close the open ul.size/ul.color list elements 10 | if( $(event.target).is('body') || $(event.target).is('.cd-gallery') ) { 11 | deactivateCustomization(); 12 | } 13 | }); 14 | 15 | function initCustomization(items) { 16 | items.each(function(){ 17 | var actual = $(this), 18 | selectOptions = actual.find('[data-type="select"]'), 19 | addToCartBtn = actual.find('.add-to-cart'), 20 | touchSettings = actual.next('.cd-customization-trigger'); 21 | 22 | //detect click on ul.size/ul.color list elements 23 | selectOptions.on('click', function(event) { 24 | var selected = $(this); 25 | //open/close options list 26 | selected.toggleClass('is-open'); 27 | resetCustomization(selected); 28 | 29 | if($(event.target).is('li')) { 30 | // update selected option 31 | var activeItem = $(event.target), 32 | index = activeItem.index() + 1; 33 | 34 | activeItem.addClass('active').siblings().removeClass('active'); 35 | selected.removeClass('selected-1 selected-2 selected-3').addClass('selected-'+index); 36 | // if color has been changed, update the visible product image 37 | selected.hasClass('color') && updateSlider(selected, index-1); 38 | } 39 | }); 40 | 41 | //detect click on the add-to-cart button 42 | addToCartBtn.on('click', function() { 43 | if(!animating) { 44 | //animate if not already animating 45 | animating = true; 46 | resetCustomization(addToCartBtn); 47 | 48 | addToCartBtn.addClass('is-added').find('path').eq(0).animate({ 49 | //draw the check icon 50 | 'stroke-dashoffset':0 51 | }, 300, function(){ 52 | setTimeout(function(){ 53 | updateCart(); 54 | addToCartBtn.removeClass('is-added').find('em').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ 55 | //wait for the end of the transition to reset the check icon 56 | addToCartBtn.find('path').eq(0).css('stroke-dashoffset', '19.79'); 57 | animating = false; 58 | }); 59 | 60 | if( $('.no-csstransitions').length > 0 ) { 61 | // check if browser doesn't support css transitions 62 | addToCartBtn.find('path').eq(0).css('stroke-dashoffset', '19.79'); 63 | animating = false; 64 | } 65 | }, 600); 66 | }); 67 | } 68 | }); 69 | 70 | //detect click on the settings icon - touch devices only 71 | touchSettings.on('click', function(event){ 72 | event.preventDefault(); 73 | resetCustomization(addToCartBtn); 74 | }); 75 | }); 76 | } 77 | 78 | function updateSlider(actual, index) { 79 | var slider = actual.parent('.cd-customization').prev('a').children('.cd-slider-wrapper'), 80 | slides = slider.children('li'); 81 | 82 | slides.eq(index).removeClass('move-left').addClass('selected').prevAll().removeClass('selected').addClass('move-left').end().nextAll().removeClass('selected move-left'); 83 | } 84 | 85 | function resetCustomization(selectOptions) { 86 | //close ul.clor/ul.size if they were left open and user is not interacting with them anymore 87 | //remove the .hover class from items if user is interacting with a different one 88 | selectOptions.siblings('[data-type="select"]').removeClass('is-open').end().parents('.cd-single-item').addClass('hover').parent('li').siblings('li').find('.cd-single-item').removeClass('hover').end().find('[data-type="select"]').removeClass('is-open'); 89 | } 90 | 91 | function deactivateCustomization() { 92 | productCustomization.parent('.cd-single-item').removeClass('hover').end().find('[data-type="select"]').removeClass('is-open'); 93 | } 94 | 95 | function updateCart() { 96 | //show counter if this is the first item added to the cart 97 | ( !cart.hasClass('items-added') ) && cart.addClass('items-added'); 98 | 99 | var cartItems = cart.find('span'), 100 | text = parseInt(cartItems.text()) + 1; 101 | cartItems.text(text); 102 | } 103 | }); -------------------------------------------------------------------------------- /src/shopping/static/js/Calculation.js: -------------------------------------------------------------------------------- 1 | /** jQuery Calculation Plug-in**/ 2 | (function($) { 3 | var defaults = {reNumbers: /(-|-\$)?(\d+(,\d{3})*(\.\d{1,})?|\.\d{1,})/g, cleanseNumber: function (v) { 4 | return v.replace(/[^0-9.\-]/g, ""); 5 | }, useFieldPlugin: (!!$.fn.getValue), onParseError: null, onParseClear: null}; 6 | $.Calculation = {version: "0.4.07",setDefaults: function(options) { 7 | $.extend(defaults, options); 8 | }}; 9 | $.fn.parseNumber = function(options) { 10 | var aValues = []; 11 | options = $.extend(options, defaults); 12 | this.each(function () { 13 | var $el = $(this),sMethod = ($el.is(":input") ? (defaults.useFieldPlugin ? "getValue" : "val") : "text"),v = $.trim($el[sMethod]()).match(defaults.reNumbers, ""); 14 | if (v == null) { 15 | v = 0; 16 | if (jQuery.isFunction(options.onParseError)) options.onParseError.apply($el, [sMethod]); 17 | $.data($el[0], "calcParseError", true); 18 | } else { 19 | v = options.cleanseNumber.apply(this, [v[0]]); 20 | if ($.data($el[0], "calcParseError") && jQuery.isFunction(options.onParseClear)) { 21 | options.onParseClear.apply($el, [sMethod]); 22 | $.data($el[0], "calcParseError", false); 23 | } 24 | } 25 | aValues.push(parseFloat(v, 10)); 26 | }); 27 | return aValues; 28 | }; 29 | $.fn.calc = function(expr, vars, cbFormat, cbDone) { 30 | var $this = this, exprValue = "", precision = 0, $el, parsedVars = {}, tmp, sMethod, _, bIsError = false; 31 | for (var k in vars) { 32 | expr = expr.replace((new RegExp("(" + k + ")", "g")), "_.$1"); 33 | if (!!vars[k] && !!vars[k].jquery) { 34 | parsedVars[k] = vars[k].parseNumber(); 35 | } else { 36 | parsedVars[k] = vars[k]; 37 | } 38 | } 39 | this.each(function (i, el) { 40 | var p, len; 41 | $el = $(this); 42 | sMethod = ($el.is(":input") ? (defaults.useFieldPlugin ? "setValue" : "val") : "text"); 43 | _ = {}; 44 | for (var k in parsedVars) { 45 | if (typeof parsedVars[k] == "number") { 46 | _[k] = parsedVars[k]; 47 | } else if (typeof parsedVars[k] == "string") { 48 | _[k] = parseFloat(parsedVars[k], 10); 49 | } else if (!!parsedVars[k] && (parsedVars[k] instanceof Array)) { 50 | tmp = (parsedVars[k].length == $this.length) ? i : 0; 51 | _[k] = parsedVars[k][tmp]; 52 | } 53 | if (isNaN(_[k])) _[k] = 0; 54 | p = _[k].toString().match(/\.\d+$/gi); 55 | len = (p) ? p[0].length - 1 : 0; 56 | if (len > precision) precision = len; 57 | } 58 | try { 59 | exprValue = eval(expr); 60 | if (precision) exprValue = Number(exprValue.toFixed(Math.max(precision, 4))); 61 | if (jQuery.isFunction(cbFormat)) { 62 | var tmp = cbFormat.apply(this, [exprValue]); 63 | if (!!tmp) exprValue = tmp; 64 | } 65 | } catch(e) { 66 | exprValue = e; 67 | bIsError = true; 68 | } 69 | $el[sMethod](exprValue.toString()); 70 | }); 71 | if (jQuery.isFunction(cbDone)) cbDone.apply(this, [this]); 72 | return this; 73 | }; 74 | $.each(["sum", "avg", "min", "max"], function (i, method) { 75 | $.fn[method] = function (bind, selector) { 76 | if (arguments.length == 0)return math[method](this.parseNumber()); 77 | var bSelOpt = selector && (selector.constructor == Object) && !(selector instanceof jQuery); 78 | var opt = bind && bind.constructor == Object ? bind : {bind: bind || "keyup", selector: (!bSelOpt) ? selector : null, oncalc: null}; 79 | if (bSelOpt) opt = jQuery.extend(opt, selector); 80 | if (!!opt.selector) opt.selector = $(opt.selector); 81 | var self = this, sMethod, doCalc = function () { 82 | var value = math[method](self.parseNumber(opt)); 83 | if (!!opt.selector) { 84 | sMethod = (opt.selector.is(":input") ? (defaults.useFieldPlugin ? "setValue" : "val") : "text"); 85 | opt.selector[sMethod](value.toString()); 86 | } 87 | if (jQuery.isFunction(opt.oncalc)) opt.oncalc.apply(self, [value, opt]); 88 | }; 89 | doCalc(); 90 | return self.bind(opt.bind, doCalc); 91 | } 92 | }); 93 | var math = {sum: function (a) { 94 | var total = 0, precision = 0; 95 | $.each(a, function (i, v) { 96 | var p = v.toString().match(/\.\d+$/gi), len = (p) ? p[0].length - 1 : 0; 97 | if (len > precision) precision = len; 98 | total += v; 99 | }); 100 | if (precision) total = Number(total.toFixed(precision)); 101 | return total; 102 | },avg: function (a) { 103 | return math.sum(a) / a.length; 104 | },min: function (a) { 105 | return Math.min.apply(Math, a); 106 | },max: function (a) { 107 | return Math.max.apply(Math, a); 108 | }}; 109 | })(jQuery); 110 | -------------------------------------------------------------------------------- /src/shopping/static/cart/js/Calculation.js: -------------------------------------------------------------------------------- 1 | /** jQuery Calculation Plug-in**/ 2 | (function($) { 3 | var defaults = {reNumbers: /(-|-\$)?(\d+(,\d{3})*(\.\d{1,})?|\.\d{1,})/g, cleanseNumber: function (v) { 4 | return v.replace(/[^0-9.\-]/g, ""); 5 | }, useFieldPlugin: (!!$.fn.getValue), onParseError: null, onParseClear: null}; 6 | $.Calculation = {version: "0.4.07",setDefaults: function(options) { 7 | $.extend(defaults, options); 8 | }}; 9 | $.fn.parseNumber = function(options) { 10 | var aValues = []; 11 | options = $.extend(options, defaults); 12 | this.each(function () { 13 | var $el = $(this),sMethod = ($el.is(":input") ? (defaults.useFieldPlugin ? "getValue" : "val") : "text"),v = $.trim($el[sMethod]()).match(defaults.reNumbers, ""); 14 | if (v == null) { 15 | v = 0; 16 | if (jQuery.isFunction(options.onParseError)) options.onParseError.apply($el, [sMethod]); 17 | $.data($el[0], "calcParseError", true); 18 | } else { 19 | v = options.cleanseNumber.apply(this, [v[0]]); 20 | if ($.data($el[0], "calcParseError") && jQuery.isFunction(options.onParseClear)) { 21 | options.onParseClear.apply($el, [sMethod]); 22 | $.data($el[0], "calcParseError", false); 23 | } 24 | } 25 | aValues.push(parseFloat(v, 10)); 26 | }); 27 | return aValues; 28 | }; 29 | $.fn.calc = function(expr, vars, cbFormat, cbDone) { 30 | var $this = this, exprValue = "", precision = 0, $el, parsedVars = {}, tmp, sMethod, _, bIsError = false; 31 | for (var k in vars) { 32 | expr = expr.replace((new RegExp("(" + k + ")", "g")), "_.$1"); 33 | if (!!vars[k] && !!vars[k].jquery) { 34 | parsedVars[k] = vars[k].parseNumber(); 35 | } else { 36 | parsedVars[k] = vars[k]; 37 | } 38 | } 39 | this.each(function (i, el) { 40 | var p, len; 41 | $el = $(this); 42 | sMethod = ($el.is(":input") ? (defaults.useFieldPlugin ? "setValue" : "val") : "text"); 43 | _ = {}; 44 | for (var k in parsedVars) { 45 | if (typeof parsedVars[k] == "number") { 46 | _[k] = parsedVars[k]; 47 | } else if (typeof parsedVars[k] == "string") { 48 | _[k] = parseFloat(parsedVars[k], 10); 49 | } else if (!!parsedVars[k] && (parsedVars[k] instanceof Array)) { 50 | tmp = (parsedVars[k].length == $this.length) ? i : 0; 51 | _[k] = parsedVars[k][tmp]; 52 | } 53 | if (isNaN(_[k])) _[k] = 0; 54 | p = _[k].toString().match(/\.\d+$/gi); 55 | len = (p) ? p[0].length - 1 : 0; 56 | if (len > precision) precision = len; 57 | } 58 | try { 59 | exprValue = eval(expr); 60 | if (precision) exprValue = Number(exprValue.toFixed(Math.max(precision, 4))); 61 | if (jQuery.isFunction(cbFormat)) { 62 | var tmp = cbFormat.apply(this, [exprValue]); 63 | if (!!tmp) exprValue = tmp; 64 | } 65 | } catch(e) { 66 | exprValue = e; 67 | bIsError = true; 68 | } 69 | $el[sMethod](exprValue.toString()); 70 | }); 71 | if (jQuery.isFunction(cbDone)) cbDone.apply(this, [this]); 72 | return this; 73 | }; 74 | $.each(["sum", "avg", "min", "max"], function (i, method) { 75 | $.fn[method] = function (bind, selector) { 76 | if (arguments.length == 0)return math[method](this.parseNumber()); 77 | var bSelOpt = selector && (selector.constructor == Object) && !(selector instanceof jQuery); 78 | var opt = bind && bind.constructor == Object ? bind : {bind: bind || "keyup", selector: (!bSelOpt) ? selector : null, oncalc: null}; 79 | if (bSelOpt) opt = jQuery.extend(opt, selector); 80 | if (!!opt.selector) opt.selector = $(opt.selector); 81 | var self = this, sMethod, doCalc = function () { 82 | var value = math[method](self.parseNumber(opt)); 83 | if (!!opt.selector) { 84 | sMethod = (opt.selector.is(":input") ? (defaults.useFieldPlugin ? "setValue" : "val") : "text"); 85 | opt.selector[sMethod](value.toString()); 86 | } 87 | if (jQuery.isFunction(opt.oncalc)) opt.oncalc.apply(self, [value, opt]); 88 | }; 89 | doCalc(); 90 | return self.bind(opt.bind, doCalc); 91 | } 92 | }); 93 | var math = {sum: function (a) { 94 | var total = 0, precision = 0; 95 | $.each(a, function (i, v) { 96 | var p = v.toString().match(/\.\d+$/gi), len = (p) ? p[0].length - 1 : 0; 97 | if (len > precision) precision = len; 98 | total += v; 99 | }); 100 | if (precision) total = Number(total.toFixed(precision)); 101 | return total; 102 | },avg: function (a) { 103 | return math.sum(a) / a.length; 104 | },min: function (a) { 105 | return Math.min.apply(Math, a); 106 | },max: function (a) { 107 | return Math.max.apply(Math, a); 108 | }}; 109 | })(jQuery); 110 | -------------------------------------------------------------------------------- /src/shopping/models/models.go: -------------------------------------------------------------------------------- 1 | package models 2 | 3 | import ( 4 | "github.com/astaxie/beego/orm" 5 | _ "github.com/go-sql-driver/mysql" 6 | "github.com/astaxie/beego" 7 | "shopping/helper" 8 | ) 9 | 10 | type User struct { 11 | Id int 12 | Username string 13 | Password string 14 | } 15 | type Product struct{ 16 | Id int 17 | Name string 18 | Stock int//库存数量 19 | Price float64 `orm:"digits(8);decimals(2)"` 20 | Remarks string 21 | Img string 22 | } 23 | type Item struct{ 24 | Id int 25 | Pid int 26 | Uid int 27 | Oid int 28 | Remarks string 29 | Flag int 30 | //Product *Product //状态 `orm:fk` 31 | } 32 | type Itemnum struct{ 33 | Id int 34 | Itemid int 35 | Num int 36 | } 37 | 38 | type Order struct{ 39 | Id int 40 | Uid int 41 | Totalprice float64 `orm:"digits(8);decimals(2)"` 42 | Remarks string 43 | } 44 | /* 45 | type Items struct{ 46 | Itemid int 47 | Uid int 48 | Pname string 49 | Num int 50 | Iremarks string 51 | Premarks string 52 | }*/ 53 | 54 | 55 | func init() { 56 | //设置数据库最大连接数 57 | orm.RegisterModel(new(User),new(Product),new(Item),new(Itemnum),new(Order)) //注册模型并使用表前缀 58 | //orm.RunCommand() 59 | } 60 | 61 | func (u *User) Add(uid int,username string,password string) (int64,error) { 62 | o := orm.NewOrm() 63 | var user User 64 | user.Id = uid 65 | user.Username = username 66 | user.Password = password 67 | //usr := User{Id: uid, Username: username, Password: password} 68 | id, err := o.Insert(&user) 69 | return id, err 70 | } 71 | //新增item，如果pid，uid，flag=0则更新 72 | func (i *Item) Additem(pid int,uid int,num int) (string) { 73 | 74 | o := orm.NewOrm() 75 | beego.Debug("Additem","76") 76 | var item Item 77 | err := o.QueryTable("Item").Filter("pid", pid).Filter("uid",uid).Filter("flag",int(0)).One(&item) 78 | if err == orm.ErrMultiRows { 79 | // 多条的时候报错 80 | return "multiRow-models.go-line83" 81 | } 82 | if err == orm.ErrNoRows { 83 | // 没有找到记录 84 | item.Pid = pid 85 | item.Remarks = "无" 86 | item.Flag = int(0) 87 | item.Uid = int(3) 88 | item.Oid = int(0) 89 | beego.Debug("Additem","91") 90 | id, ierr := o.Insert(&item) 91 | if ierr == nil{ 92 | var itns Itemnum 93 | itnid,itnerr :=itns.Additem(int(id),num) 94 | if itnerr == nil{ 95 | return helper.I64ts(id)+"添加成功"+helper.I64ts(itnid) 96 | } 97 | return "数据插入错误" 98 | } 99 | beego.Debug("Additem","100") 100 | return "数据插入错误" 101 | 102 | } 103 | /*这个方法增加不起作用。。 104 | num, err := o.QueryTable("Itemnum").Filter("itemid",item.Id).Update(orm.Params{ 105 | "num": o.ColValue(o.Col_Add, num), 106 | })*/ 107 | 108 | res, errrow := o.Raw("UPDATE Itemnum SET num = num + ? WHERE Itemid = ?", num, item.Id).Exec() 109 | // res, err := o.Raw("UPDATE user SET name = ?", "your").Exec() 110 | if errrow == nil { 111 | num, _ := res.RowsAffected() 112 | return helper.I64ts(num)+"更新成功" 113 | } 114 | 115 | return "更新失败" 116 | } 117 | 118 | 119 | //beego.Debug(err) 120 | 121 | func (n *Itemnum) Addmin(itid int, num int)(string){ 122 | o := orm.NewOrm() 123 | res, errrow := o.Raw("UPDATE Itemnum SET num = ? WHERE Itemid = ?", num, itid).Exec() 124 | // res, err := o.Raw("UPDATE user SET name = ?", "your").Exec() 125 | if errrow == nil { 126 | num, _ := res.RowsAffected() 127 | return helper.I64ts(num)+"更新成功" 128 | } 129 | 130 | return "更新失败" 131 | 132 | } 133 | 134 | func (n *Order) Addorder(ids []string,uid int,remarks string, totalp float64)(string){ 135 | o := orm.NewOrm() 136 | var order Order 137 | order.Uid = uid 138 | order.Totalprice = totalp 139 | order.Remarks = remarks 140 | beego.Debug("Addorder","143") 141 | //var idsarry = strings.Split(ids, ",") 142 | //var aaa string 143 | var str ="UPDATE Item SET flag = 2,oid=? WHERE Id in (0"; 144 | for _, v := range ids { 145 | str=str+","+v 146 | } 147 | str = str +")" 148 | //beego.Debug("Addorder",ids[0]) 149 | id, err := o.Insert(&order) 150 | if err == nil{ 151 | res, errrow := o.Raw(str, id).Exec() 152 | //res, err := o.Raw("UPDATE user SET name = ?", "your").Exec() 153 | if errrow == nil { 154 | num, _ := res.RowsAffected() 155 | return helper.I64ts(num)+"更新数据成功" 156 | } 157 | return "更新数据失败" 158 | } 159 | return "更新数据失败" 160 | 161 | } 162 | 163 | func (n *Item) Deleteitem(itid int)(string){ 164 | o := orm.NewOrm() 165 | res, errrow := o.Raw("UPDATE Item SET flag = ? WHERE Id = ?", 1, itid).Exec() 166 | // res, err := o.Raw("UPDATE user SET name = ?", "your").Exec() 167 | if errrow == nil { 168 | num, _ := res.RowsAffected() 169 | return helper.I64ts(num)+"更新成功" 170 | } 171 | return "更新失败" 172 | 173 | } 174 | 175 | 176 | 177 | func (n *Itemnum) Additem(itid int,num int) (int64,error) { 178 | 179 | o := orm.NewOrm() 180 | var itn Itemnum 181 | itn.Itemid = itid 182 | itn.Num = num 183 | beego.Debug("adfadfafdafdas",itid) 184 | id, err := o.Insert(&itn) 185 | //beego.Debug(err) 186 | return id, err 187 | } 188 | 189 | func Queryitems(uid int)([]orm.Params){ 190 | o :=orm.NewOrm() 191 | var maps []orm.Params 192 | o.Raw("select it.id as itemid,pro.`name` as proname,pro.img as img,it.remarks as remarks,itn.num as num ,pro.price as price,itn.num * pro.price as total from item as it left join itemnum as itn on it.id = itn.itemid left join product as pro on it.pid = pro.id where it.flag =? and it.uid = ?", 0,uid).Values(&maps) 193 | return maps 194 | } 195 | -------------------------------------------------------------------------------- /src/shopping/static/cart/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jquery特效制作复选框,全选,反选,取消,购物车，统计价格，统计，淘宝 6 | 7 | 8 | 9 | 10 | 11 | 81 | 82 | 83 | 84 | 85 | 86 |
87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 |
全选商品商品信息数量单价操作
98 | 99 | 100 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 131 | 132 | 133 | 134 |
产品标题一件 127 | 128 | 129 | 130 | 删除
135 | 136 | 137 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 167 | 168 | 169 | 170 |
产品标题一件 163 | 164 | 165 | 166 | 删除
171 | 172 | 173 | 193 | 194 | 195 | 196 | 197 | 201 | 202 | 203 | 204 | 205 |
全选 198 | 反选 199 | 取消 200 | 已选商品 件合计(不含运费):￥结算结算
206 | 207 |
208 | 209 | 210 | 211 | -------------------------------------------------------------------------------- /src/shopping/views/mycart.tpl: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 购物车 6 | 7 | 8 | 9 | 10 | 80 | 81 | 82 | 83 | 84 | 85 |
86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 |
全选产品名称备注信息数量价格操作
97 | 98 | 99 | 133 | {{range $k,$v :=.list}} 134 | 135 | 136 | 137 | 138 | 139 | 140 | 145 | 146 | 147 | 148 |
{{.proname}}{{.proname}} 141 | 142 | 143 | 144 | 删除
149 | {{end}} 150 | 151 | 152 | 153 | 154 | 158 | 159 | 160 | 161 | 162 |
全选 155 | 反选 156 | 取消 157 | 已选商品 件合计(不含运费):￥结算结算
163 | 164 |
165 | 166 | 167 | 168 | 251 | 252 | -------------------------------------------------------------------------------- /src/shopping/static/js/modernizr.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.8.3 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-fontface-backgroundsize-borderimage-borderradius-boxshadow-flexbox-hsla-multiplebgs-opacity-rgba-textshadow-cssanimations-csscolumns-generatedcontent-cssgradients-cssreflections-csstransforms-csstransforms3d-csstransitions-applicationcache-canvas-canvastext-draganddrop-hashchange-history-audio-video-indexeddb-input-inputtypes-localstorage-postmessage-sessionstorage-websockets-websqldatabase-webworkers-geolocation-inlinesvg-smil-svg-svgclippaths-touch-webgl-shiv-cssclasses-addtest-prefixed-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function C(a){j.cssText=a}function D(a,b){return C(n.join(a+";")+(b||""))}function E(a,b){return typeof a===b}function F(a,b){return!!~(""+a).indexOf(b)}function G(a,b){for(var d in a){var e=a[d];if(!F(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function H(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:E(f,"function")?f.bind(d||b):f}return!1}function I(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+p.join(d+" ")+d).split(" ");return E(b,"string")||E(b,"undefined")?G(e,b):(e=(a+" "+q.join(d+" ")+d).split(" "),H(e,b,c))}function J(){e.input=function(c){for(var d=0,e=c.length;d',a,""].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},z=function(){function d(d,e){e=e||b.createElement(a[d]||"div"),d="on"+d;var f=d in e;return f||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(d,""),f=E(e[d],"function"),E(e[d],"undefined")||(e[d]=c),e.removeAttribute(d))),e=null,f}var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return d}(),A={}.hasOwnProperty,B;!E(A,"undefined")&&!E(A.call,"undefined")?B=function(a,b){return A.call(a,b)}:B=function(a,b){return b in a&&E(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=w.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(w.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(w.call(arguments)))};return e}),s.flexbox=function(){return I("flexWrap")},s.canvas=function(){var a=b.createElement("canvas");return!!a.getContext&&!!a.getContext("2d")},s.canvastext=function(){return!!e.canvas&&!!E(b.createElement("canvas").getContext("2d").fillText,"function")},s.webgl=function(){return!!a.WebGLRenderingContext},s.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:y(["@media (",n.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},s.geolocation=function(){return"geolocation"in navigator},s.postmessage=function(){return!!a.postMessage},s.websqldatabase=function(){return!!a.openDatabase},s.indexedDB=function(){return!!I("indexedDB",a)},s.hashchange=function(){return z("hashchange",a)&&(b.documentMode===c||b.documentMode>7)},s.history=function(){return!!a.history&&!!history.pushState},s.draganddrop=function(){var a=b.createElement("div");return"draggable"in a||"ondragstart"in a&&"ondrop"in a},s.websockets=function(){return"WebSocket"in a||"MozWebSocket"in a},s.rgba=function(){return C("background-color:rgba(150,255,150,.5)"),F(j.backgroundColor,"rgba")},s.hsla=function(){return C("background-color:hsla(120,40%,100%,.5)"),F(j.backgroundColor,"rgba")||F(j.backgroundColor,"hsla")},s.multiplebgs=function(){return C("background:url(https://),url(https://),red url(https://)"),/(url\s*\(.*?){3}/.test(j.background)},s.backgroundsize=function(){return I("backgroundSize")},s.borderimage=function(){return I("borderImage")},s.borderradius=function(){return I("borderRadius")},s.boxshadow=function(){return I("boxShadow")},s.textshadow=function(){return b.createElement("div").style.textShadow===""},s.opacity=function(){return D("opacity:.55"),/^0.55$/.test(j.opacity)},s.cssanimations=function(){return I("animationName")},s.csscolumns=function(){return I("columnCount")},s.cssgradients=function(){var a="background-image:",b="gradient(linear,left top,right bottom,from(#9f9),to(white));",c="linear-gradient(left top,#9f9, white);";return C((a+"-webkit- ".split(" ").join(b+a)+n.join(c+a)).slice(0,-a.length)),F(j.backgroundImage,"gradient")},s.cssreflections=function(){return I("boxReflect")},s.csstransforms=function(){return!!I("transform")},s.csstransforms3d=function(){var a=!!I("perspective");return a&&"webkitPerspective"in g.style&&y("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},s.csstransitions=function(){return I("transition")},s.fontface=function(){var a;return y('@font-face {font-family:"font";src:url("https://")}',function(c,d){var e=b.getElementById("smodernizr"),f=e.sheet||e.styleSheet,g=f?f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"":"";a=/src/i.test(g)&&g.indexOf(d.split(" ")[0])===0}),a},s.generatedcontent=function(){var a;return y(["#",h,"{font:0/0 a}#",h,':after{content:"',l,'";visibility:hidden;font:3px/1 a}'].join(""),function(b){a=b.offsetHeight>=3}),a},s.video=function(){var a=b.createElement("video"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('video/ogg; codecs="theora"').replace(/^no$/,""),c.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/,""),c.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,"")}catch(d){}return c},s.audio=function(){var a=b.createElement("audio"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,""),c.mp3=a.canPlayType("audio/mpeg;").replace(/^no$/,""),c.wav=a.canPlayType('audio/wav; codecs="1"').replace(/^no$/,""),c.m4a=(a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")).replace(/^no$/,"")}catch(d){}return c},s.localstorage=function(){try{return localStorage.setItem(h,h),localStorage.removeItem(h),!0}catch(a){return!1}},s.sessionstorage=function(){try{return sessionStorage.setItem(h,h),sessionStorage.removeItem(h),!0}catch(a){return!1}},s.webworkers=function(){return!!a.Worker},s.applicationcache=function(){return!!a.applicationCache},s.svg=function(){return!!b.createElementNS&&!!b.createElementNS(r.svg,"svg").createSVGRect},s.inlinesvg=function(){var a=b.createElement("div");return a.innerHTML="",(a.firstChild&&a.firstChild.namespaceURI)==r.svg},s.smil=function(){return!!b.createElementNS&&/SVGAnimate/.test(m.call(b.createElementNS(r.svg,"animate")))},s.svgclippaths=function(){return!!b.createElementNS&&/SVGClipPath/.test(m.call(b.createElementNS(r.svg,"clipPath")))};for(var K in s)B(s,K)&&(x=K.toLowerCase(),e[x]=s[K](),v.push((e[x]?"":"no-")+x));return e.input||J(),e.addTest=function(a,b){if(typeof a=="object")for(var d in a)B(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},C(""),i=k=null,function(a,b){function l(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function m(){var a=s.elements;return typeof a=="string"?a.split(" "):a}function n(a){var b=j[a[h]];return b||(b={},i++,a[h]=i,j[i]=b),b}function o(a,c,d){c||(c=b);if(k)return c.createElement(a);d||(d=n(c));var g;return d.cache[a]?g=d.cache[a].cloneNode():f.test(a)?g=(d.cache[a]=d.createElem(a)).cloneNode():g=d.createElem(a),g.canHaveChildren&&!e.test(a)&&!g.tagUrn?d.frag.appendChild(g):g}function p(a,c){a||(a=b);if(k)return a.createDocumentFragment();c=c||n(a);var d=c.frag.cloneNode(),e=0,f=m(),g=f.length;for(;e",g="hidden"in a,k=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){g=!0,k=!0}})();var s={elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:c,shivCSS:d.shivCSS!==!1,supportsUnknownElements:k,shivMethods:d.shivMethods!==!1,type:"default",shivDocument:r,createElement:o,createDocumentFragment:p};a.html5=s,r(b)}(this,b),e._version=d,e._prefixes=n,e._domPrefixes=q,e._cssomPrefixes=p,e.hasEvent=z,e.testProp=function(a){return G([a])},e.testAllProps=I,e.testStyles=y,e.prefixed=function(a,b,c){return b?I(a,b,c):I(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+v.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f',a,""].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},z=function(){function d(d,e){e=e||b.createElement(a[d]||"div"),d="on"+d;var f=d in e;return f||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(d,""),f=E(e[d],"function"),E(e[d],"undefined")||(e[d]=c),e.removeAttribute(d))),e=null,f}var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return d}(),A={}.hasOwnProperty,B;!E(A,"undefined")&&!E(A.call,"undefined")?B=function(a,b){return A.call(a,b)}:B=function(a,b){return b in a&&E(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=w.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(w.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(w.call(arguments)))};return e}),s.flexbox=function(){return I("flexWrap")},s.canvas=function(){var a=b.createElement("canvas");return!!a.getContext&&!!a.getContext("2d")},s.canvastext=function(){return!!e.canvas&&!!E(b.createElement("canvas").getContext("2d").fillText,"function")},s.webgl=function(){return!!a.WebGLRenderingContext},s.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:y(["@media (",n.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},s.geolocation=function(){return"geolocation"in navigator},s.postmessage=function(){return!!a.postMessage},s.websqldatabase=function(){return!!a.openDatabase},s.indexedDB=function(){return!!I("indexedDB",a)},s.hashchange=function(){return z("hashchange",a)&&(b.documentMode===c||b.documentMode>7)},s.history=function(){return!!a.history&&!!history.pushState},s.draganddrop=function(){var a=b.createElement("div");return"draggable"in a||"ondragstart"in a&&"ondrop"in a},s.websockets=function(){return"WebSocket"in a||"MozWebSocket"in a},s.rgba=function(){return C("background-color:rgba(150,255,150,.5)"),F(j.backgroundColor,"rgba")},s.hsla=function(){return C("background-color:hsla(120,40%,100%,.5)"),F(j.backgroundColor,"rgba")||F(j.backgroundColor,"hsla")},s.multiplebgs=function(){return C("background:url(https://),url(https://),red url(https://)"),/(url\s*\(.*?){3}/.test(j.background)},s.backgroundsize=function(){return I("backgroundSize")},s.borderimage=function(){return I("borderImage")},s.borderradius=function(){return I("borderRadius")},s.boxshadow=function(){return I("boxShadow")},s.textshadow=function(){return b.createElement("div").style.textShadow===""},s.opacity=function(){return D("opacity:.55"),/^0.55$/.test(j.opacity)},s.cssanimations=function(){return I("animationName")},s.csscolumns=function(){return I("columnCount")},s.cssgradients=function(){var a="background-image:",b="gradient(linear,left top,right bottom,from(#9f9),to(white));",c="linear-gradient(left top,#9f9, white);";return C((a+"-webkit- ".split(" ").join(b+a)+n.join(c+a)).slice(0,-a.length)),F(j.backgroundImage,"gradient")},s.cssreflections=function(){return I("boxReflect")},s.csstransforms=function(){return!!I("transform")},s.csstransforms3d=function(){var a=!!I("perspective");return a&&"webkitPerspective"in g.style&&y("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},s.csstransitions=function(){return I("transition")},s.fontface=function(){var a;return y('@font-face {font-family:"font";src:url("https://")}',function(c,d){var e=b.getElementById("smodernizr"),f=e.sheet||e.styleSheet,g=f?f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"":"";a=/src/i.test(g)&&g.indexOf(d.split(" ")[0])===0}),a},s.generatedcontent=function(){var a;return y(["#",h,"{font:0/0 a}#",h,':after{content:"',l,'";visibility:hidden;font:3px/1 a}'].join(""),function(b){a=b.offsetHeight>=3}),a},s.video=function(){var a=b.createElement("video"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('video/ogg; codecs="theora"').replace(/^no$/,""),c.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/,""),c.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,"")}catch(d){}return c},s.audio=function(){var a=b.createElement("audio"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,""),c.mp3=a.canPlayType("audio/mpeg;").replace(/^no$/,""),c.wav=a.canPlayType('audio/wav; codecs="1"').replace(/^no$/,""),c.m4a=(a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")).replace(/^no$/,"")}catch(d){}return c},s.localstorage=function(){try{return localStorage.setItem(h,h),localStorage.removeItem(h),!0}catch(a){return!1}},s.sessionstorage=function(){try{return sessionStorage.setItem(h,h),sessionStorage.removeItem(h),!0}catch(a){return!1}},s.webworkers=function(){return!!a.Worker},s.applicationcache=function(){return!!a.applicationCache},s.svg=function(){return!!b.createElementNS&&!!b.createElementNS(r.svg,"svg").createSVGRect},s.inlinesvg=function(){var a=b.createElement("div");return a.innerHTML="",(a.firstChild&&a.firstChild.namespaceURI)==r.svg},s.smil=function(){return!!b.createElementNS&&/SVGAnimate/.test(m.call(b.createElementNS(r.svg,"animate")))},s.svgclippaths=function(){return!!b.createElementNS&&/SVGClipPath/.test(m.call(b.createElementNS(r.svg,"clipPath")))};for(var K in s)B(s,K)&&(x=K.toLowerCase(),e[x]=s[K](),v.push((e[x]?"":"no-")+x));return e.input||J(),e.addTest=function(a,b){if(typeof a=="object")for(var d in a)B(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},C(""),i=k=null,function(a,b){function l(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function m(){var a=s.elements;return typeof a=="string"?a.split(" "):a}function n(a){var b=j[a[h]];return b||(b={},i++,a[h]=i,j[i]=b),b}function o(a,c,d){c||(c=b);if(k)return c.createElement(a);d||(d=n(c));var g;return d.cache[a]?g=d.cache[a].cloneNode():f.test(a)?g=(d.cache[a]=d.createElem(a)).cloneNode():g=d.createElem(a),g.canHaveChildren&&!e.test(a)&&!g.tagUrn?d.frag.appendChild(g):g}function p(a,c){a||(a=b);if(k)return a.createDocumentFragment();c=c||n(a);var d=c.frag.cloneNode(),e=0,f=m(),g=f.length;for(;e",g="hidden"in a,k=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){g=!0,k=!0}})();var s={elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:c,shivCSS:d.shivCSS!==!1,supportsUnknownElements:k,shivMethods:d.shivMethods!==!1,type:"default",shivDocument:r,createElement:o,createDocumentFragment:p};a.html5=s,r(b)}(this,b),e._version=d,e._prefixes=n,e._domPrefixes=q,e._cssomPrefixes=p,e.hasEvent=z,e.testProp=function(a){return G([a])},e.testAllProps=I,e.testStyles=y,e.prefixed=function(a,b,c){return b?I(a,b,c):I(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+v.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f li { 129 | margin-bottom: 2em; 130 | } 131 | @media only screen and (min-width: 768px) { 132 | .cd-gallery { 133 | margin-top: 2em; 134 | } 135 | .cd-gallery::after { 136 | clear: both; 137 | content: ""; 138 | display: table; 139 | } 140 | .cd-gallery > li { 141 | width: 48%; 142 | float: left; 143 | margin: 0 4% 6% 0; 144 | } 145 | .cd-gallery > li:nth-of-type(2n) { 146 | margin-right: 0; 147 | } 148 | } 149 | @media only screen and (min-width: 1100px) { 150 | .cd-gallery { 151 | margin-top: 2.5em; 152 | } 153 | .cd-gallery > li { 154 | width: 30%; 155 | float: left; 156 | margin: 0 5% 5% 0; 157 | } 158 | .cd-gallery > li:nth-of-type(2n) { 159 | margin-right: 5%; 160 | } 161 | .cd-gallery > li:nth-of-type(3n) { 162 | margin-right: 0; 163 | } 164 | } 165 | 166 | /* -------------------------------- 167 | 168 | Single Item 169 | 170 | -------------------------------- */ 171 | .cd-single-item { 172 | position: relative; 173 | } 174 | .cd-single-item > a { 175 | display: block; 176 | background-color: #ffffff; 177 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); 178 | border-radius: 4px; 179 | } 180 | .no-touch .cd-single-item:hover .cd-customization, .cd-single-item.hover .cd-customization { 181 | /* product customization visible */ 182 | pointer-events: auto; 183 | visibility: visible; 184 | opacity: 1; 185 | -webkit-transition: opacity 0.2s 0s, visiblity 0s 0s; 186 | -moz-transition: opacity 0.2s 0s, visiblity 0s 0s; 187 | transition: opacity 0.2s 0s, visiblity 0s 0s; 188 | } 189 | .no-touch .cd-single-item:hover .cd-customization-trigger, .cd-single-item.hover .cd-customization-trigger { 190 | /* this is the settings icon - visible on touch devices only */ 191 | display: none; 192 | } 193 | 194 | /* -------------------------------- 195 | 196 | Product Slider 197 | 198 | -------------------------------- */ 199 | .cd-slider-wrapper { 200 | position: relative; 201 | overflow: hidden; 202 | } 203 | .cd-slider-wrapper li { 204 | position: absolute; 205 | top: 0; 206 | left: 0; 207 | visibility: hidden; 208 | /* Force Hardware Acceleration in WebKit */ 209 | -webkit-transform: translateZ(0); 210 | -moz-transform: translateZ(0); 211 | -ms-transform: translateZ(0); 212 | -o-transform: translateZ(0); 213 | transform: translateZ(0); 214 | -webkit-backface-visibility: hidden; 215 | backface-visibility: hidden; 216 | /* by default, move the product image on the right*/ 217 | -webkit-transform: translateX(100%); 218 | -moz-transform: translateX(100%); 219 | -ms-transform: translateX(100%); 220 | -o-transform: translateX(100%); 221 | transform: translateX(100%); 222 | -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s; 223 | -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s; 224 | transition: transform 0.3s 0s, visibility 0s 0.3s; 225 | } 226 | .cd-slider-wrapper li.selected { 227 | /* this is the visible product image */ 228 | position: relative; 229 | visibility: visible; 230 | z-index: 1; 231 | -webkit-transform: translateX(0); 232 | -moz-transform: translateX(0); 233 | -ms-transform: translateX(0); 234 | -o-transform: translateX(0); 235 | transform: translateX(0); 236 | -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s; 237 | -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s; 238 | transition: transform 0.3s 0s, visibility 0s 0s; 239 | } 240 | .cd-slider-wrapper li.move-left { 241 | /* move the product image on the left */ 242 | -webkit-transform: translateX(-100%); 243 | -moz-transform: translateX(-100%); 244 | -ms-transform: translateX(-100%); 245 | -o-transform: translateX(-100%); 246 | transform: translateX(-100%); 247 | } 248 | .cd-slider-wrapper img { 249 | width: 100%; 250 | display: block; 251 | border-radius: 4px; 252 | } 253 | 254 | /* -------------------------------- 255 | 256 | Product Customization 257 | 258 | -------------------------------- */ 259 | .cd-customization { 260 | position: absolute; 261 | z-index: 2; 262 | left: 0; 263 | bottom: 0; 264 | width: 100%; 265 | padding: 16px; 266 | visibility: hidden; 267 | opacity: 0; 268 | pointer-events: none; 269 | -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s; 270 | -moz-transition: opacity 0.2s 0s, visibility 0s 0.2s; 271 | transition: opacity 0.2s 0s, visibility 0s 0.2s; 272 | } 273 | .cd-customization::after { 274 | clear: both; 275 | content: ""; 276 | display: table; 277 | } 278 | .cd-customization > * { 279 | float: left; 280 | } 281 | .cd-customization .color, .cd-customization .size, .cd-customization .add-to-cart { 282 | height: 34px; 283 | border-radius: 3px; 284 | position: relative; 285 | overflow: hidden; 286 | } 287 | .cd-customization .color, .cd-customization .size { 288 | /* these are the color and size options */ 289 | display: inline-block; 290 | cursor: pointer; 291 | box-shadow: inset 0 0 0 1px #e5e5e5; 292 | /* Force Hardware Acceleration - fix a bug on Safari */ 293 | -webkit-transform: translateZ(0); 294 | -moz-transform: translateZ(0); 295 | -ms-transform: translateZ(0); 296 | -o-transform: translateZ(0); 297 | transform: translateZ(0); 298 | -webkit-backface-visibility: hidden; 299 | backface-visibility: hidden; 300 | } 301 | .cd-customization .color:hover, .cd-customization .size:hover { 302 | box-shadow: inset 0 0 0 1px #cccccc; 303 | } 304 | .cd-customization .color ul, .cd-customization .size ul { 305 | display: inline-block; 306 | position: absolute; 307 | left: 50%; 308 | top: 50%; 309 | bottom: auto; 310 | right: auto; 311 | -webkit-transform: translateX(-50%) translateY(-50%); 312 | -moz-transform: translateX(-50%) translateY(-50%); 313 | -ms-transform: translateX(-50%) translateY(-50%); 314 | -o-transform: translateX(-50%) translateY(-50%); 315 | transform: translateX(-50%) translateY(-50%); 316 | width: 100%; 317 | border-radius: 3px; 318 | border: 1px solid transparent; 319 | } 320 | .cd-customization .color li, .cd-customization .size li { 321 | position: relative; 322 | height: 34px; 323 | } 324 | .cd-customization .color ul li:first-of-type, .cd-customization .size ul li:first-of-type { 325 | /* arrange list items according to the selected color/size option */ 326 | -webkit-transform: translateY(100%); 327 | -moz-transform: translateY(100%); 328 | -ms-transform: translateY(100%); 329 | -o-transform: translateY(100%); 330 | transform: translateY(100%); 331 | border-radius: 0; 332 | } 333 | .cd-customization .color ul li:nth-of-type(2), .cd-customization .size ul li:nth-of-type(2) { 334 | -webkit-transform: translateY(-100%); 335 | -moz-transform: translateY(-100%); 336 | -ms-transform: translateY(-100%); 337 | -o-transform: translateY(-100%); 338 | transform: translateY(-100%); 339 | border-radius: 3px 3px 0 0; 340 | } 341 | .cd-customization .color ul li:nth-of-type(3), .cd-customization .size ul li:nth-of-type(3) { 342 | -webkit-transform: translateY(0); 343 | -moz-transform: translateY(0); 344 | -ms-transform: translateY(0); 345 | -o-transform: translateY(0); 346 | transform: translateY(0); 347 | border-radius: 0 0 3px 3px; 348 | } 349 | .cd-customization .color.selected-2 ul li:first-of-type, .cd-customization .color.selected-2 ul li:nth-of-type(2), .cd-customization .color.selected-2 ul li:nth-of-type(3), .cd-customization .size.selected-2 ul li:first-of-type, .cd-customization .size.selected-2 ul li:nth-of-type(2), .cd-customization .size.selected-2 ul li:nth-of-type(3) { 350 | /* second option selected in the ul.color/ul.size list*/ 351 | -webkit-transform: translateY(0); 352 | -moz-transform: translateY(0); 353 | -ms-transform: translateY(0); 354 | -o-transform: translateY(0); 355 | transform: translateY(0); 356 | } 357 | .cd-customization .color.selected-2 ul li:first-of-type, .cd-customization .size.selected-2 ul li:first-of-type { 358 | border-radius: 3px 3px 0 0; 359 | } 360 | .cd-customization .color.selected-2 ul li:nth-of-type(2), .cd-customization .size.selected-2 ul li:nth-of-type(2) { 361 | border-radius: 0; 362 | } 363 | .cd-customization .color.selected-3 ul li:first-of-type, .cd-customization .size.selected-3 ul li:first-of-type { 364 | /* third option selected in the ul.color/ul.size list */ 365 | -webkit-transform: translateY(0); 366 | -moz-transform: translateY(0); 367 | -ms-transform: translateY(0); 368 | -o-transform: translateY(0); 369 | transform: translateY(0); 370 | border-radius: 3px 3px 0 0; 371 | } 372 | .cd-customization .color.selected-3 ul li:nth-of-type(2), .cd-customization .size.selected-3 ul li:nth-of-type(2) { 373 | -webkit-transform: translateY(100%); 374 | -moz-transform: translateY(100%); 375 | -ms-transform: translateY(100%); 376 | -o-transform: translateY(100%); 377 | transform: translateY(100%); 378 | border-radius: 0 0 3px 3px; 379 | } 380 | .cd-customization .color.selected-3 ul li:nth-of-type(3), .cd-customization .size.selected-3 ul li:nth-of-type(3) { 381 | -webkit-transform: translateY(-100%); 382 | -moz-transform: translateY(-100%); 383 | -ms-transform: translateY(-100%); 384 | -o-transform: translateY(-100%); 385 | transform: translateY(-100%); 386 | border-radius: 0; 387 | } 388 | .cd-customization .color.is-open, .cd-customization .size.is-open { 389 | /* color/size list open - make ul element visible */ 390 | overflow: visible; 391 | box-shadow: none; 392 | } 393 | .cd-customization .color.is-open::after, .cd-customization .size.is-open::after { 394 | /* remove the arrow icon for the size option element */ 395 | display: none; 396 | } 397 | .cd-customization .color.is-open ul, .cd-customization .size.is-open ul { 398 | box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); 399 | border-color: #e5e5e5; 400 | background-color: #ffffff; 401 | } 402 | .cd-customization .color.is-open li:hover, .cd-customization .color.is-open li.active, .cd-customization .size.is-open li:hover, .cd-customization .size.is-open li.active { 403 | background-color: #f2f2f2; 404 | } 405 | .cd-customization .color { 406 | width: 34px; 407 | } 408 | .cd-customization .color li { 409 | /* replace color name with colored circle */ 410 | overflow: hidden; 411 | text-indent: 100%; 412 | white-space: nowrap; 413 | color: transparent; 414 | } 415 | .cd-customization .color li::before { 416 | /* this is the colored circle */ 417 | content: ''; 418 | position: absolute; 419 | left: 50%; 420 | top: 50%; 421 | bottom: auto; 422 | right: auto; 423 | -webkit-transform: translateX(-50%) translateY(-50%); 424 | -moz-transform: translateX(-50%) translateY(-50%); 425 | -ms-transform: translateX(-50%) translateY(-50%); 426 | -o-transform: translateX(-50%) translateY(-50%); 427 | transform: translateX(-50%) translateY(-50%); 428 | height: 10px; 429 | width: 10px; 430 | border-radius: 50%; 431 | } 432 | .cd-customization .color li.color-1::before { 433 | background-color: #314d5d; 434 | } 435 | .cd-customization .color li.color-2::before { 436 | background-color: #de5b48; 437 | } 438 | .cd-customization .color li.color-3::before { 439 | background-color: #f0ca4d; 440 | } 441 | .cd-customization .size { 442 | margin: 0 6px; 443 | } 444 | .cd-customization .size::after { 445 | /* arrow icon for the size option element */ 446 | content: ''; 447 | position: absolute; 448 | right: 7px; 449 | top: 50%; 450 | margin-top: -8px; 451 | display: block; 452 | width: 16px; 453 | height: 16px; 454 | background: url("../img/cd-icon-arrow.svg") no-repeat center center; 455 | pointer-events: none; 456 | } 457 | .cd-customization .size li { 458 | padding: 0 1em; 459 | } 460 | .cd-customization .size, .cd-customization .add-to-cart { 461 | width: calc(50% - 23px); 462 | } 463 | .cd-customization .size li, .cd-customization .add-to-cart { 464 | font-size: 1.2rem; 465 | font-weight: 600; 466 | text-transform: uppercase; 467 | line-height: 34px; 468 | } 469 | .cd-customization .add-to-cart { 470 | color: #ffffff; 471 | background-color: #46b29d; 472 | -webkit-font-smoothing: antialiased; 473 | -moz-osx-font-smoothing: grayscale; 474 | } 475 | .no-touch .cd-customization .add-to-cart:hover { 476 | background-color: #55bca8; 477 | } 478 | .cd-customization .add-to-cart em { 479 | /* this is the button text message */ 480 | position: absolute; 481 | top: 0; 482 | left: 0; 483 | width: 100%; 484 | height: 100%; 485 | /* Force Hardware Acceleration */ 486 | -webkit-transform: translateZ(0); 487 | -moz-transform: translateZ(0); 488 | -ms-transform: translateZ(0); 489 | -o-transform: translateZ(0); 490 | transform: translateZ(0); 491 | -webkit-backface-visibility: hidden; 492 | backface-visibility: hidden; 493 | -webkit-transition: -webkit-transform 0.3s; 494 | -moz-transition: -moz-transform 0.3s; 495 | transition: transform 0.3s; 496 | } 497 | .cd-customization .add-to-cart svg { 498 | /* this is the check icon */ 499 | position: absolute; 500 | left: 50%; 501 | top: 50%; 502 | width: 100%; 503 | /* move the icon on the right - outside the button */ 504 | -webkit-transform: translateX(50%) translateY(-50%); 505 | -moz-transform: translateX(50%) translateY(-50%); 506 | -ms-transform: translateX(50%) translateY(-50%); 507 | -o-transform: translateX(50%) translateY(-50%); 508 | transform: translateX(50%) translateY(-50%); 509 | -webkit-transition: -webkit-transform 0.3s; 510 | -moz-transition: -moz-transform 0.3s; 511 | transition: transform 0.3s; 512 | } 513 | .cd-customization .add-to-cart.is-added em { 514 | /* product added to the cart - hide text message on the left with no transition*/ 515 | color: transparent; 516 | -webkit-transform: translateX(-100%); 517 | -moz-transform: translateX(-100%); 518 | -ms-transform: translateX(-100%); 519 | -o-transform: translateX(-100%); 520 | transform: translateX(-100%); 521 | -webkit-transition: -webkit-transform 0s; 522 | -moz-transition: -moz-transform 0s; 523 | transition: transform 0s; 524 | } 525 | .cd-customization .add-to-cart.is-added svg { 526 | /* product added to the cart - move the svg back inside the button */ 527 | -webkit-transform: translateX(-50%) translateY(-50%); 528 | -moz-transform: translateX(-50%) translateY(-50%); 529 | -ms-transform: translateX(-50%) translateY(-50%); 530 | -o-transform: translateX(-50%) translateY(-50%); 531 | transform: translateX(-50%) translateY(-50%); 532 | -webkit-transition: -webkit-transform 0s; 533 | -moz-transition: -moz-transform 0s; 534 | transition: transform 0s; 535 | } 536 | 537 | /* -------------------------------- 538 | 539 | Settings icon - touch devices only 540 | 541 | -------------------------------- */ 542 | .cd-customization-trigger { 543 | position: absolute; 544 | z-index: 2; 545 | right: 0px; 546 | bottom: 0px; 547 | height: 40px; 548 | width: 40px; 549 | /* replace text with an icon */ 550 | overflow: hidden; 551 | text-indent: 100%; 552 | white-space: nowrap; 553 | color: transparent; 554 | background: url(../img/cd-icon-settings.svg) no-repeat center center; 555 | display: none; 556 | } 557 | .touch .cd-customization-trigger { 558 | display: block; 559 | } 560 | 561 | /* -------------------------------- 562 | 563 | Product Info (title + price) 564 | 565 | -------------------------------- */ 566 | .cd-item-info { 567 | padding: 1em .5em 0; 568 | color: #314d5d; 569 | font-weight: bold; 570 | } 571 | .cd-item-info::after { 572 | clear: both; 573 | content: ""; 574 | display: table; 575 | } 576 | .cd-item-info b { 577 | float: left; 578 | } 579 | .cd-item-info em { 580 | float: right; 581 | color: #5484a0; 582 | } 583 | .cd-item-info a { 584 | color: #314d5d; 585 | } 586 | .cd-item-info a:hover { 587 | text-decoration: underline; 588 | } 589 | -------------------------------------------------------------------------------- /src/shopping/static/index/css/style.css: -------------------------------------------------------------------------------- 1 | /* -------------------------------- 2 | 3 | Primary style 4 | 5 | -------------------------------- */ 6 | *, *::after, *::before { 7 | box-sizing: border-box; 8 | } 9 | 10 | html { 11 | font-size: 62.5%; 12 | } 13 | 14 | body { 15 | font-size: 1.6rem; 16 | font-family: "Work Sans", sans-serif; 17 | color: #314d5d; 18 | background-color: #f2f2f2; 19 | } 20 | 21 | a { 22 | color: #de5b48; 23 | text-decoration: none; 24 | } 25 | 26 | img, svg { 27 | max-width: 100%; 28 | } 29 | 30 | button { 31 | -webkit-appearance: none; 32 | -moz-appearance: none; 33 | -ms-appearance: none; 34 | -o-appearance: none; 35 | appearance: none; 36 | cursor: pointer; 37 | border: none; 38 | padding: 0; 39 | } 40 | button:focus { 41 | outline: none; 42 | } 43 | 44 | header { 45 | height: 80px; 46 | position: relative; 47 | padding-top: 40px; 48 | } 49 | header h1 { 50 | text-align: center; 51 | width: 90%; 52 | margin: 0 auto; 53 | } 54 | @media only screen and (min-width: 768px) { 55 | header { 56 | height: 200px; 57 | padding-top: 100px; 58 | } 59 | header h1 { 60 | font-size: 2.2rem; 61 | } 62 | } 63 | 64 | /* -------------------------------- 65 | 66 | Cart button 67 | 68 | -------------------------------- */ 69 | .cd-cart { 70 | position: absolute; 71 | z-index: 2; 72 | top: 24px; 73 | right: 10px; 74 | height: 50px; 75 | width: 50px; 76 | background: url(../img/cd-icon-cart.svg) no-repeat center center; 77 | } 78 | .cd-cart span { 79 | /* number of items added to the cart */ 80 | position: absolute; 81 | top: 2px; 82 | right: 5px; 83 | height: 18px; 84 | width: 18px; 85 | line-height: 18px; 86 | background-color: #46b29d; 87 | color: #ffffff; 88 | font-size: 1rem; 89 | font-weight: bold; 90 | text-align: center; 91 | border-radius: 50%; 92 | /* scale it down if no products have been added to the cart */ 93 | -webkit-transform: scale(0); 94 | -moz-transform: scale(0); 95 | -ms-transform: scale(0); 96 | -o-transform: scale(0); 97 | transform: scale(0); 98 | -webkit-transition: -webkit-transform 0.2s 0s; 99 | -moz-transition: -moz-transform 0.2s 0s; 100 | transition: transform 0.2s 0s; 101 | } 102 | .cd-cart.items-added span { 103 | /* counter visible when a product is added to the cart */ 104 | -webkit-transform: scale(1); 105 | -moz-transform: scale(1); 106 | -ms-transform: scale(1); 107 | -o-transform: scale(1); 108 | transform: scale(1); 109 | } 110 | @media only screen and (min-width: 1100px) { 111 | .cd-cart { 112 | position: fixed; 113 | top: 30px; 114 | right: 30px; 115 | } 116 | } 117 | 118 | /* -------------------------------- 119 | 120 | Gallery grid 121 | 122 | -------------------------------- */ 123 | .cd-gallery { 124 | width: 90%; 125 | max-width: 1100px; 126 | margin: 1.5em auto; 127 | } 128 | .cd-gallery > li { 129 | margin-bottom: 2em; 130 | } 131 | @media only screen and (min-width: 768px) { 132 | .cd-gallery { 133 | margin-top: 2em; 134 | } 135 | .cd-gallery::after { 136 | clear: both; 137 | content: ""; 138 | display: table; 139 | } 140 | .cd-gallery > li { 141 | width: 48%; 142 | float: left; 143 | margin: 0 4% 6% 0; 144 | } 145 | .cd-gallery > li:nth-of-type(2n) { 146 | margin-right: 0; 147 | } 148 | } 149 | @media only screen and (min-width: 1100px) { 150 | .cd-gallery { 151 | margin-top: 2.5em; 152 | } 153 | .cd-gallery > li { 154 | width: 30%; 155 | float: left; 156 | margin: 0 5% 5% 0; 157 | } 158 | .cd-gallery > li:nth-of-type(2n) { 159 | margin-right: 5%; 160 | } 161 | .cd-gallery > li:nth-of-type(3n) { 162 | margin-right: 0; 163 | } 164 | } 165 | 166 | /* -------------------------------- 167 | 168 | Single Item 169 | 170 | -------------------------------- */ 171 | .cd-single-item { 172 | position: relative; 173 | } 174 | .cd-single-item > a { 175 | display: block; 176 | background-color: #ffffff; 177 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); 178 | border-radius: 4px; 179 | } 180 | .no-touch .cd-single-item:hover .cd-customization, .cd-single-item.hover .cd-customization { 181 | /* product customization visible */ 182 | pointer-events: auto; 183 | visibility: visible; 184 | opacity: 1; 185 | -webkit-transition: opacity 0.2s 0s, visiblity 0s 0s; 186 | -moz-transition: opacity 0.2s 0s, visiblity 0s 0s; 187 | transition: opacity 0.2s 0s, visiblity 0s 0s; 188 | } 189 | .no-touch .cd-single-item:hover .cd-customization-trigger, .cd-single-item.hover .cd-customization-trigger { 190 | /* this is the settings icon - visible on touch devices only */ 191 | display: none; 192 | } 193 | 194 | /* -------------------------------- 195 | 196 | Product Slider 197 | 198 | -------------------------------- */ 199 | .cd-slider-wrapper { 200 | position: relative; 201 | overflow: hidden; 202 | } 203 | .cd-slider-wrapper li { 204 | position: absolute; 205 | top: 0; 206 | left: 0; 207 | visibility: hidden; 208 | /* Force Hardware Acceleration in WebKit */ 209 | -webkit-transform: translateZ(0); 210 | -moz-transform: translateZ(0); 211 | -ms-transform: translateZ(0); 212 | -o-transform: translateZ(0); 213 | transform: translateZ(0); 214 | -webkit-backface-visibility: hidden; 215 | backface-visibility: hidden; 216 | /* by default, move the product image on the right*/ 217 | -webkit-transform: translateX(100%); 218 | -moz-transform: translateX(100%); 219 | -ms-transform: translateX(100%); 220 | -o-transform: translateX(100%); 221 | transform: translateX(100%); 222 | -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s; 223 | -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s; 224 | transition: transform 0.3s 0s, visibility 0s 0.3s; 225 | } 226 | .cd-slider-wrapper li.selected { 227 | /* this is the visible product image */ 228 | position: relative; 229 | visibility: visible; 230 | z-index: 1; 231 | -webkit-transform: translateX(0); 232 | -moz-transform: translateX(0); 233 | -ms-transform: translateX(0); 234 | -o-transform: translateX(0); 235 | transform: translateX(0); 236 | -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s; 237 | -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s; 238 | transition: transform 0.3s 0s, visibility 0s 0s; 239 | } 240 | .cd-slider-wrapper li.move-left { 241 | /* move the product image on the left */ 242 | -webkit-transform: translateX(-100%); 243 | -moz-transform: translateX(-100%); 244 | -ms-transform: translateX(-100%); 245 | -o-transform: translateX(-100%); 246 | transform: translateX(-100%); 247 | } 248 | .cd-slider-wrapper img { 249 | width: 100%; 250 | display: block; 251 | border-radius: 4px; 252 | } 253 | 254 | /* -------------------------------- 255 | 256 | Product Customization 257 | 258 | -------------------------------- */ 259 | .cd-customization { 260 | position: absolute; 261 | z-index: 2; 262 | left: 0; 263 | bottom: 0; 264 | width: 100%; 265 | padding: 16px; 266 | visibility: hidden; 267 | opacity: 0; 268 | pointer-events: none; 269 | -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s; 270 | -moz-transition: opacity 0.2s 0s, visibility 0s 0.2s; 271 | transition: opacity 0.2s 0s, visibility 0s 0.2s; 272 | } 273 | .cd-customization::after { 274 | clear: both; 275 | content: ""; 276 | display: table; 277 | } 278 | .cd-customization > * { 279 | float: left; 280 | } 281 | .cd-customization .color, .cd-customization .size, .cd-customization .add-to-cart { 282 | height: 34px; 283 | border-radius: 3px; 284 | position: relative; 285 | overflow: hidden; 286 | } 287 | .cd-customization .color, .cd-customization .size { 288 | /* these are the color and size options */ 289 | display: inline-block; 290 | cursor: pointer; 291 | box-shadow: inset 0 0 0 1px #e5e5e5; 292 | /* Force Hardware Acceleration - fix a bug on Safari */ 293 | -webkit-transform: translateZ(0); 294 | -moz-transform: translateZ(0); 295 | -ms-transform: translateZ(0); 296 | -o-transform: translateZ(0); 297 | transform: translateZ(0); 298 | -webkit-backface-visibility: hidden; 299 | backface-visibility: hidden; 300 | } 301 | .cd-customization .color:hover, .cd-customization .size:hover { 302 | box-shadow: inset 0 0 0 1px #cccccc; 303 | } 304 | .cd-customization .color ul, .cd-customization .size ul { 305 | display: inline-block; 306 | position: absolute; 307 | left: 50%; 308 | top: 50%; 309 | bottom: auto; 310 | right: auto; 311 | -webkit-transform: translateX(-50%) translateY(-50%); 312 | -moz-transform: translateX(-50%) translateY(-50%); 313 | -ms-transform: translateX(-50%) translateY(-50%); 314 | -o-transform: translateX(-50%) translateY(-50%); 315 | transform: translateX(-50%) translateY(-50%); 316 | width: 100%; 317 | border-radius: 3px; 318 | border: 1px solid transparent; 319 | } 320 | .cd-customization .color li, .cd-customization .size li { 321 | position: relative; 322 | height: 34px; 323 | } 324 | .cd-customization .color ul li:first-of-type, .cd-customization .size ul li:first-of-type { 325 | /* arrange list items according to the selected color/size option */ 326 | -webkit-transform: translateY(100%); 327 | -moz-transform: translateY(100%); 328 | -ms-transform: translateY(100%); 329 | -o-transform: translateY(100%); 330 | transform: translateY(100%); 331 | border-radius: 0; 332 | } 333 | .cd-customization .color ul li:nth-of-type(2), .cd-customization .size ul li:nth-of-type(2) { 334 | -webkit-transform: translateY(-100%); 335 | -moz-transform: translateY(-100%); 336 | -ms-transform: translateY(-100%); 337 | -o-transform: translateY(-100%); 338 | transform: translateY(-100%); 339 | border-radius: 3px 3px 0 0; 340 | } 341 | .cd-customization .color ul li:nth-of-type(3), .cd-customization .size ul li:nth-of-type(3) { 342 | -webkit-transform: translateY(0); 343 | -moz-transform: translateY(0); 344 | -ms-transform: translateY(0); 345 | -o-transform: translateY(0); 346 | transform: translateY(0); 347 | border-radius: 0 0 3px 3px; 348 | } 349 | .cd-customization .color.selected-2 ul li:first-of-type, .cd-customization .color.selected-2 ul li:nth-of-type(2), .cd-customization .color.selected-2 ul li:nth-of-type(3), .cd-customization .size.selected-2 ul li:first-of-type, .cd-customization .size.selected-2 ul li:nth-of-type(2), .cd-customization .size.selected-2 ul li:nth-of-type(3) { 350 | /* second option selected in the ul.color/ul.size list*/ 351 | -webkit-transform: translateY(0); 352 | -moz-transform: translateY(0); 353 | -ms-transform: translateY(0); 354 | -o-transform: translateY(0); 355 | transform: translateY(0); 356 | } 357 | .cd-customization .color.selected-2 ul li:first-of-type, .cd-customization .size.selected-2 ul li:first-of-type { 358 | border-radius: 3px 3px 0 0; 359 | } 360 | .cd-customization .color.selected-2 ul li:nth-of-type(2), .cd-customization .size.selected-2 ul li:nth-of-type(2) { 361 | border-radius: 0; 362 | } 363 | .cd-customization .color.selected-3 ul li:first-of-type, .cd-customization .size.selected-3 ul li:first-of-type { 364 | /* third option selected in the ul.color/ul.size list */ 365 | -webkit-transform: translateY(0); 366 | -moz-transform: translateY(0); 367 | -ms-transform: translateY(0); 368 | -o-transform: translateY(0); 369 | transform: translateY(0); 370 | border-radius: 3px 3px 0 0; 371 | } 372 | .cd-customization .color.selected-3 ul li:nth-of-type(2), .cd-customization .size.selected-3 ul li:nth-of-type(2) { 373 | -webkit-transform: translateY(100%); 374 | -moz-transform: translateY(100%); 375 | -ms-transform: translateY(100%); 376 | -o-transform: translateY(100%); 377 | transform: translateY(100%); 378 | border-radius: 0 0 3px 3px; 379 | } 380 | .cd-customization .color.selected-3 ul li:nth-of-type(3), .cd-customization .size.selected-3 ul li:nth-of-type(3) { 381 | -webkit-transform: translateY(-100%); 382 | -moz-transform: translateY(-100%); 383 | -ms-transform: translateY(-100%); 384 | -o-transform: translateY(-100%); 385 | transform: translateY(-100%); 386 | border-radius: 0; 387 | } 388 | .cd-customization .color.is-open, .cd-customization .size.is-open { 389 | /* color/size list open - make ul element visible */ 390 | overflow: visible; 391 | box-shadow: none; 392 | } 393 | .cd-customization .color.is-open::after, .cd-customization .size.is-open::after { 394 | /* remove the arrow icon for the size option element */ 395 | display: none; 396 | } 397 | .cd-customization .color.is-open ul, .cd-customization .size.is-open ul { 398 | box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); 399 | border-color: #e5e5e5; 400 | background-color: #ffffff; 401 | } 402 | .cd-customization .color.is-open li:hover, .cd-customization .color.is-open li.active, .cd-customization .size.is-open li:hover, .cd-customization .size.is-open li.active { 403 | background-color: #f2f2f2; 404 | } 405 | .cd-customization .color { 406 | width: 34px; 407 | } 408 | .cd-customization .color li { 409 | /* replace color name with colored circle */ 410 | overflow: hidden; 411 | text-indent: 100%; 412 | white-space: nowrap; 413 | color: transparent; 414 | } 415 | .cd-customization .color li::before { 416 | /* this is the colored circle */ 417 | content: ''; 418 | position: absolute; 419 | left: 50%; 420 | top: 50%; 421 | bottom: auto; 422 | right: auto; 423 | -webkit-transform: translateX(-50%) translateY(-50%); 424 | -moz-transform: translateX(-50%) translateY(-50%); 425 | -ms-transform: translateX(-50%) translateY(-50%); 426 | -o-transform: translateX(-50%) translateY(-50%); 427 | transform: translateX(-50%) translateY(-50%); 428 | height: 10px; 429 | width: 10px; 430 | border-radius: 50%; 431 | } 432 | .cd-customization .color li.color-1::before { 433 | background-color: #314d5d; 434 | } 435 | .cd-customization .color li.color-2::before { 436 | background-color: #de5b48; 437 | } 438 | .cd-customization .color li.color-3::before { 439 | background-color: #f0ca4d; 440 | } 441 | .cd-customization .size { 442 | margin: 0 6px; 443 | } 444 | .cd-customization .size::after { 445 | /* arrow icon for the size option element */ 446 | content: ''; 447 | position: absolute; 448 | right: 7px; 449 | top: 50%; 450 | margin-top: -8px; 451 | display: block; 452 | width: 16px; 453 | height: 16px; 454 | background: url("../img/cd-icon-arrow.svg") no-repeat center center; 455 | pointer-events: none; 456 | } 457 | .cd-customization .size li { 458 | padding: 0 1em; 459 | } 460 | .cd-customization .size, .cd-customization .add-to-cart { 461 | width: calc(50% - 23px); 462 | } 463 | .cd-customization .size li, .cd-customization .add-to-cart { 464 | font-size: 1.2rem; 465 | font-weight: 600; 466 | text-transform: uppercase; 467 | line-height: 34px; 468 | } 469 | .cd-customization .add-to-cart { 470 | color: #ffffff; 471 | background-color: #46b29d; 472 | -webkit-font-smoothing: antialiased; 473 | -moz-osx-font-smoothing: grayscale; 474 | } 475 | .no-touch .cd-customization .add-to-cart:hover { 476 | background-color: #55bca8; 477 | } 478 | .cd-customization .add-to-cart em { 479 | /* this is the button text message */ 480 | position: absolute; 481 | top: 0; 482 | left: 0; 483 | width: 100%; 484 | height: 100%; 485 | /* Force Hardware Acceleration */ 486 | -webkit-transform: translateZ(0); 487 | -moz-transform: translateZ(0); 488 | -ms-transform: translateZ(0); 489 | -o-transform: translateZ(0); 490 | transform: translateZ(0); 491 | -webkit-backface-visibility: hidden; 492 | backface-visibility: hidden; 493 | -webkit-transition: -webkit-transform 0.3s; 494 | -moz-transition: -moz-transform 0.3s; 495 | transition: transform 0.3s; 496 | } 497 | .cd-customization .add-to-cart svg { 498 | /* this is the check icon */ 499 | position: absolute; 500 | left: 50%; 501 | top: 50%; 502 | width: 100%; 503 | /* move the icon on the right - outside the button */ 504 | -webkit-transform: translateX(50%) translateY(-50%); 505 | -moz-transform: translateX(50%) translateY(-50%); 506 | -ms-transform: translateX(50%) translateY(-50%); 507 | -o-transform: translateX(50%) translateY(-50%); 508 | transform: translateX(50%) translateY(-50%); 509 | -webkit-transition: -webkit-transform 0.3s; 510 | -moz-transition: -moz-transform 0.3s; 511 | transition: transform 0.3s; 512 | } 513 | .cd-customization .add-to-cart.is-added em { 514 | /* product added to the cart - hide text message on the left with no transition*/ 515 | color: transparent; 516 | -webkit-transform: translateX(-100%); 517 | -moz-transform: translateX(-100%); 518 | -ms-transform: translateX(-100%); 519 | -o-transform: translateX(-100%); 520 | transform: translateX(-100%); 521 | -webkit-transition: -webkit-transform 0s; 522 | -moz-transition: -moz-transform 0s; 523 | transition: transform 0s; 524 | } 525 | .cd-customization .add-to-cart.is-added svg { 526 | /* product added to the cart - move the svg back inside the button */ 527 | -webkit-transform: translateX(-50%) translateY(-50%); 528 | -moz-transform: translateX(-50%) translateY(-50%); 529 | -ms-transform: translateX(-50%) translateY(-50%); 530 | -o-transform: translateX(-50%) translateY(-50%); 531 | transform: translateX(-50%) translateY(-50%); 532 | -webkit-transition: -webkit-transform 0s; 533 | -moz-transition: -moz-transform 0s; 534 | transition: transform 0s; 535 | } 536 | 537 | /* -------------------------------- 538 | 539 | Settings icon - touch devices only 540 | 541 | -------------------------------- */ 542 | .cd-customization-trigger { 543 | position: absolute; 544 | z-index: 2; 545 | right: 0px; 546 | bottom: 0px; 547 | height: 40px; 548 | width: 40px; 549 | /* replace text with an icon */ 550 | overflow: hidden; 551 | text-indent: 100%; 552 | white-space: nowrap; 553 | color: transparent; 554 | background: url(../img/cd-icon-settings.svg) no-repeat center center; 555 | display: none; 556 | } 557 | .touch .cd-customization-trigger { 558 | display: block; 559 | } 560 | 561 | /* -------------------------------- 562 | 563 | Product Info (title + price) 564 | 565 | -------------------------------- */ 566 | .cd-item-info { 567 | padding: 1em .5em 0; 568 | color: #314d5d; 569 | font-weight: bold; 570 | } 571 | .cd-item-info::after { 572 | clear: both; 573 | content: ""; 574 | display: table; 575 | } 576 | .cd-item-info b { 577 | float: left; 578 | } 579 | .cd-item-info em { 580 | float: right; 581 | color: #5484a0; 582 | } 583 | .cd-item-info a { 584 | color: #314d5d; 585 | } 586 | .cd-item-info a:hover { 587 | text-decoration: underline; 588 | } 589 | -------------------------------------------------------------------------------- /src/shopping/views/index.tpl: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Beego 6 | 7 | 8 | 9 | 74 | 75 | 76 | 77 |
78 |

Welcome to Beego

79 |
80 | Beego is a simple & powerful Go web framework which is inspired by tornado and sinatra. 81 |
82 |
83 | 91 |
92 | 93 | 94 | --------------------------------------------------------------------------------