WooCommerce Cart Tab - Version 1.0.0

Version Description

  • 26/01/2017 =
  • New - The cart tab now opens when an add to cart button on a shop page is clicked.
  • New - Cart tab opens on click rather than hover.
  • New - Display controls moved to the Customizer.
  • New - Integration with Storefront theme.
Download this release

Release Info

Developer jameskoster
Plugin Icon wp plugin WooCommerce Cart Tab
Version 1.0.0
Comparing to
See all releases

Code changes from version 0.5.0 to 1.0.0

Files changed (18) hide show
  1. Gruntfile.js +190 -0
  2. README.md +0 -4
  3. assets/css/mixins.less +0 -122
  4. assets/css/style-storefront.css +154 -0
  5. assets/css/style.css +149 -171
  6. assets/css/style.less +0 -149
  7. assets/js/cart-tab.js +89 -0
  8. assets/js/cart-tab.min.js +1 -0
  9. assets/scss/style-storefront.scss +179 -0
  10. assets/scss/style.scss +186 -0
  11. cart-tab.php +13 -176
  12. includes/cart-tab-functions.php +20 -0
  13. includes/cart-tab-templates.php +58 -0
  14. includes/class-cart-tab-customizer.php +237 -0
  15. includes/class-cart-tab-frontend.php +64 -0
  16. includes/class-cart-tab-hooks.php +14 -0
  17. package.json +29 -0
  18. readme.txt +12 -8
Gruntfile.js ADDED
@@ -0,0 +1,190 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* jshint node:true */
2
+ module.exports = function( grunt ) {
3
+ 'use strict';
4
+
5
+ grunt.initConfig({
6
+
7
+ // JavaScript linting with JSHint.
8
+ jshint: {
9
+ options: {
10
+ jshintrc: '.jshintrc'
11
+ },
12
+ all: [
13
+ 'Gruntfile.js',
14
+ 'assets/js/*.js',
15
+ '!assets/js/*.min.js'
16
+ ]
17
+ },
18
+
19
+ // Minify .js files.
20
+ uglify: {
21
+ options: {
22
+ preserveComments: 'some'
23
+ },
24
+ main: {
25
+ files: [{
26
+ expand: true,
27
+ cwd: 'assets/js/',
28
+ src: [
29
+ '*.js',
30
+ '!*.min.js'
31
+ ],
32
+ dest: 'assets/js/',
33
+ ext: '.min.js'
34
+ }]
35
+ }
36
+ },
37
+
38
+ // Compile all .scss files.
39
+ sass: {
40
+ dist: {
41
+ options: {
42
+ require: 'susy',
43
+ sourcemap: 'none',
44
+ includePaths: require( 'node-bourbon' ).includePaths
45
+ },
46
+ files: [{
47
+ 'assets/css/style.css': 'assets/scss/style.scss',
48
+ 'assets/css/style-storefront.css': 'assets/scss/style-storefront.scss',
49
+ }]
50
+ }
51
+ },
52
+
53
+ // Minify all .css files.
54
+ cssmin: {
55
+ minify: {
56
+ expand: true,
57
+ cwd: 'assets/css/',
58
+ src: ['*.css'],
59
+ dest: 'assets/css/',
60
+ ext: '.css'
61
+ }
62
+ },
63
+
64
+ // Watch changes for assets.
65
+ watch: {
66
+ css: {
67
+ files: [
68
+ 'assets/scss/*.scss'
69
+ ],
70
+ tasks: [
71
+ 'sass',
72
+ 'css'
73
+ ]
74
+ },
75
+ js: {
76
+ files: [
77
+ // Main js
78
+ 'assets/js/*js',
79
+ 'assets/js/**/*.js',
80
+ '!assets/js/*.min.js'
81
+ ],
82
+ tasks: ['uglify']
83
+ }
84
+ },
85
+
86
+ // Generate POT files.
87
+ makepot: {
88
+ options: {
89
+ type: 'wp-plugin',
90
+ domainPath: 'languages',
91
+ potHeaders: {
92
+ 'report-msgid-bugs-to': 'https://github.com/jameskoster/woocommerce-cart-tab/issues',
93
+ 'language-team': 'LANGUAGE <EMAIL@ADDRESS>'
94
+ }
95
+ },
96
+ frontend: {
97
+ options: {
98
+ potFilename: 'woocommerce-cart-tab.pot',
99
+ exclude: [
100
+ 'woocommerce-cart-tab/.*' // Exclude deploy directory
101
+ ],
102
+ processPot: function( pot ) {
103
+ pot.headers['project-id-version'];
104
+ return pot;
105
+ }
106
+ }
107
+ }
108
+ },
109
+
110
+ // Check textdomain errors.
111
+ checktextdomain: {
112
+ options:{
113
+ text_domain: 'woocommerce-cart-tab',
114
+ keywords: [
115
+ '__:1,2d',
116
+ '_e:1,2d',
117
+ '_x:1,2c,3d',
118
+ 'esc_html__:1,2d',
119
+ 'esc_html_e:1,2d',
120
+ 'esc_html_x:1,2c,3d',
121
+ 'esc_attr__:1,2d',
122
+ 'esc_attr_e:1,2d',
123
+ 'esc_attr_x:1,2c,3d',
124
+ '_ex:1,2c,3d',
125
+ '_n:1,2,4d',
126
+ '_nx:1,2,4c,5d',
127
+ '_n_noop:1,2,3d',
128
+ '_nx_noop:1,2,3c,4d'
129
+ ]
130
+ },
131
+ files: {
132
+ src: [
133
+ '**/*.php', // Include all files
134
+ '!node_modules/**' // Exclude node_modules/
135
+ ],
136
+ expand: true
137
+ }
138
+ },
139
+
140
+ // Creates deploy-able plugin
141
+ copy: {
142
+ deploy: {
143
+ src: [
144
+ '**',
145
+ '!.*',
146
+ '!.*/**',
147
+ '.htaccess',
148
+ '!Gruntfile.js',
149
+ '!package.json',
150
+ '!node_modules/**',
151
+ '!.DS_Store',
152
+ '!npm-debug.log'
153
+ ],
154
+ dest: 'woocommerce-cart-tab',
155
+ expand: true,
156
+ dot: true
157
+ }
158
+ }
159
+ });
160
+
161
+ // Load NPM tasks to be used here
162
+ grunt.loadNpmTasks( 'grunt-contrib-uglify' );
163
+ grunt.loadNpmTasks( 'grunt-wp-i18n' );
164
+ grunt.loadNpmTasks( 'grunt-checktextdomain' );
165
+ grunt.loadNpmTasks( 'grunt-sass' );
166
+ grunt.loadNpmTasks( 'grunt-contrib-cssmin' );
167
+ grunt.loadNpmTasks( 'grunt-contrib-watch' );
168
+ grunt.loadNpmTasks( 'grunt-contrib-copy' );
169
+ grunt.loadNpmTasks( 'grunt-contrib-jshint' );
170
+
171
+ // Register tasks
172
+ grunt.registerTask( 'default', [
173
+ 'css',
174
+ 'uglify'
175
+ ]);
176
+
177
+ grunt.registerTask( 'css', [
178
+ 'sass'
179
+ ]);
180
+
181
+ grunt.registerTask( 'dev', [
182
+ 'default',
183
+ 'makepot'
184
+ ]);
185
+
186
+ grunt.registerTask( 'deploy', [
187
+ 'makepot',
188
+ 'copy'
189
+ ]);
190
+ };
README.md DELETED
@@ -1,4 +0,0 @@
1
- WooCommerce Cart Tab
2
- ====================
3
-
4
- Displays a link to the cart which is visible sitewide and fixed in position so it remains visible wherever the user scrolls. When the user hovers over the tab, the full cart widget is displayed.
 
 
 
 
assets/css/mixins.less DELETED
@@ -1,122 +0,0 @@
1
- // MIXINS
2
- .clearfix() {
3
- &:after {
4
- content: "";
5
- display: block;
6
- clear: both;
7
- }
8
- }
9
- .border_radius(@radius:10px)
10
- {
11
- -webkit-border-radius:@radius;
12
- -moz-border-radius:@radius;
13
- border-radius:@radius;
14
- }
15
-
16
- .border_radius_right(@radius:10px)
17
- {
18
- -webkit-border-top-right-radius: @radius;
19
- -webkit-border-bottom-right-radius: @radius;
20
- -moz-border-radius-topright: @radius;
21
- -moz-border-radius-bottomright: @radius;
22
- border-top-right-radius: @radius;
23
- border-bottom-right-radius: @radius;
24
- }
25
-
26
- .border_radius_left(@radius:10px)
27
- {
28
- -webkit-border-top-left-radius: @radius;
29
- -webkit-border-bottom-left-radius: @radius;
30
- -moz-border-radius-topleft: @radius;
31
- -moz-border-radius-bottomleft: @radius;
32
- border-top-left-radius: @radius;
33
- border-bottom-left-radius: @radius;
34
- }
35
-
36
- .border_radius_bottom(@radius:10px)
37
- {
38
- -webkit-border-bottom-left-radius: @radius;
39
- -webkit-border-bottom-right-radius: @radius;
40
- -moz-border-radius-bottomleft: @radius;
41
- -moz-border-radius-bottomright: @radius;
42
- border-bottom-left-radius: @radius;
43
- border-bottom-right-radius: @radius;
44
- }
45
-
46
- .border_radius_top(@radius:10px)
47
- {
48
- -webkit-border-top-left-radius: @radius;
49
- -webkit-border-top-right-radius: @radius;
50
- -moz-border-radius-topleft: @radius;
51
- -moz-border-radius-topright: @radius;
52
- border-top-left-radius: @radius;
53
- border-top-right-radius: @radius;
54
- }
55
-
56
- .box_shadow(@shadow_x:3px, @shadow_y:3px, @shadow_rad:3px, @shadow_in:3px, @shadow_color:#888)
57
- {
58
- box-shadow:@shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color;
59
- -webkit-box-shadow:@shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color;
60
- -moz-box-shadow:@shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color;
61
- -o-box-shadow:@shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color;
62
- }
63
-
64
- .inset_box_shadow(@shadow_x:3px, @shadow_y:3px, @shadow_rad:3px, @shadow_in:3px, @shadow_color:#888)
65
- {
66
- box-shadow:inset @shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color;
67
- -webkit-box-shadow:inset @shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color;
68
- -moz-box-shadow:inset @shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color;
69
- -o-box-shadow:inset @shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color;
70
- }
71
-
72
- .text_shadow(@shadow_x:3px, @shadow_y:3px, @shadow_rad:3px, @shadow_color:#fff)
73
- {
74
- text-shadow:@shadow_x @shadow_y @shadow_rad @shadow_color;
75
- }
76
-
77
- .vertical_gradient(@from: #000, @to: #FFF) {
78
- background: @from;
79
- background: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to));
80
- background: -webkit-linear-gradient(@from, @to);
81
- background: -moz-linear-gradient(center top, @from 0%, @to 100%);
82
- background: -moz-gradient(center top, @from 0%, @to 100%);
83
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=%d,endColorstr=%d)", @from, @to));
84
- -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=%d, endColorstr=%d)", @from, @to);
85
- }
86
-
87
- .transition(@selector:all, @animation:ease-in-out, @duration:.2s) {
88
- -webkit-transition:@selector @animation @duration;
89
- -moz-transition:@selector @animation @duration;
90
- -o-transition:@selector @animation @duration;
91
- transition:@selector @animation @duration;
92
- }
93
-
94
- .opacity(@opacity:0.75) {
95
- filter:~"alpha(opacity=@opacity * 100)";
96
- -moz-opacity:@opacity;
97
- -khtml-opacity: @opacity;
98
- opacity: @opacity;
99
- }
100
-
101
- .rotate(@degree:1deg) {
102
- -webkit-transform:rotate(@degree);
103
- -moz-transform:rotate(@degree);
104
- }
105
-
106
- .scale(@ratio:1.5){
107
- -webkit-transform:scale(@ratio);
108
- -moz-transform:scale(@ratio);
109
- transform:scale(@ratio);
110
- }
111
-
112
- .radial_gradient(@from: #000, @to: #FFF) {
113
- background: @from;
114
- background: -webkit-gradient(radial, 50% 10%, 0, 50% 10%, 1000, from(@from), to(@to));
115
- background: -moz-radial-gradient(center top, @from 0%, @to 100%);
116
- }
117
-
118
- .borderbox () {
119
- -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
120
- -moz-box-sizing: border-box; /* Firefox, other Gecko */
121
- box-sizing: border-box; /* Opera/IE 8+ */
122
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
assets/css/style-storefront.css ADDED
@@ -0,0 +1,154 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .woocommerce-cart-tab-container {
2
+ width: 320px;
3
+ position: fixed;
4
+ top: 0;
5
+ z-index: 99999999;
6
+ -webkit-transition: all cubic-bezier(0.11, 0.51, 0.54, 0.9) 0.5s;
7
+ -moz-transition: all cubic-bezier(0.11, 0.51, 0.54, 0.9) 0.5s;
8
+ transition: all cubic-bezier(0.11, 0.51, 0.54, 0.9) 0.5s;
9
+ box-sizing: border-box; }
10
+ .woocommerce-cart-tab-container .widget_shopping_cart {
11
+ overflow: auto;
12
+ margin-bottom: 0; }
13
+ .woocommerce-cart-tab-container .widget_shopping_cart .widgettitle {
14
+ position: absolute;
15
+ top: 0;
16
+ left: 0;
17
+ width: 100%;
18
+ z-index: 99;
19
+ margin: 0;
20
+ padding: 0;
21
+ padding: 1.387rem 1.618rem;
22
+ text-align: center;
23
+ font-size: 1.2em;
24
+ border: 0; }
25
+ .woocommerce-cart-tab-container .widget_shopping_cart ul.product_list_widget {
26
+ margin-top: 5.2em;
27
+ padding: 0 1.618em;
28
+ margin-bottom: 1.618em; }
29
+ .woocommerce-cart-tab-container .widget_shopping_cart ul.product_list_widget li {
30
+ border: 0; }
31
+ .woocommerce-cart-tab-container .widget_shopping_cart .total {
32
+ margin-bottom: 8em;
33
+ padding: 0 3em;
34
+ padding-bottom: 1em;
35
+ border: 0; }
36
+ .woocommerce-cart-tab-container .widget_shopping_cart .buttons {
37
+ position: absolute;
38
+ bottom: 0;
39
+ left: 0;
40
+ width: 100%;
41
+ padding: 1.387em 1.618em;
42
+ z-index: 99;
43
+ margin: 0; }
44
+ .woocommerce-cart-tab-container .widget_shopping_cart .buttons .button {
45
+ width: 48%;
46
+ float: left;
47
+ margin: 0;
48
+ text-align: center; }
49
+ .woocommerce-cart-tab-container .widget_shopping_cart .buttons .button:nth-child(2) {
50
+ float: right; }
51
+ .woocommerce-cart-tab-container .widget_shopping_cart .buttons .button:after {
52
+ display: none; }
53
+
54
+ .admin-bar .woocommerce-cart-tab-container {
55
+ top: 32px; }
56
+
57
+ .woocommerce-cart-tab-container--left {
58
+ left: 0;
59
+ -webkit-transform: translateX(-320px);
60
+ -moz-transform: translateX(-320px);
61
+ -ms-transform: translateX(-320px);
62
+ -o-transform: translateX(-320px);
63
+ transform: translateX(-320px); }
64
+ .woocommerce-cart-tab-container--left .woocommerce-cart-tab {
65
+ left: 320px; }
66
+ .woocommerce-cart-tab-container--left.woocommerce-cart-tab-container--visible {
67
+ -webkit-transform: translateX(0);
68
+ -moz-transform: translateX(0);
69
+ -ms-transform: translateX(0);
70
+ -o-transform: translateX(0);
71
+ transform: translateX(0); }
72
+
73
+ .woocommerce-cart-tab-container--right {
74
+ right: 0;
75
+ -webkit-transform: translateX(320px);
76
+ -moz-transform: translateX(320px);
77
+ -ms-transform: translateX(320px);
78
+ -o-transform: translateX(320px);
79
+ transform: translateX(320px); }
80
+ .woocommerce-cart-tab-container--right .woocommerce-cart-tab {
81
+ right: 320px; }
82
+ .woocommerce-cart-tab-container--right.woocommerce-cart-tab-container--visible {
83
+ -webkit-transform: translateX(0);
84
+ -moz-transform: translateX(0);
85
+ -ms-transform: translateX(0);
86
+ -o-transform: translateX(0);
87
+ transform: translateX(0); }
88
+
89
+ .woocommerce-cart-tab {
90
+ position: absolute;
91
+ top: 0;
92
+ width: 60px;
93
+ height: 68px;
94
+ box-sizing: border-box;
95
+ line-height: 1;
96
+ cursor: pointer; }
97
+ .woocommerce-cart-tab:focus {
98
+ outline: none; }
99
+ .woocommerce-cart-tab .woocommerce-cart-tab__icon {
100
+ position: absolute;
101
+ top: 50%;
102
+ left: 50%;
103
+ transform: translateX(-50%) translateY(-50%);
104
+ width: 24px; }
105
+
106
+ .woocommerce-cart-tab__contents {
107
+ display: block;
108
+ position: absolute;
109
+ bottom: 10px;
110
+ right: 10px;
111
+ width: 25px;
112
+ height: 25px;
113
+ background: red;
114
+ line-height: 25px;
115
+ border-radius: 100%;
116
+ text-align: center;
117
+ z-index: 10;
118
+ font-size: .857em; }
119
+
120
+ .woocommerce-cart-tab a {
121
+ display: block; }
122
+
123
+ body .site:before {
124
+ content: "";
125
+ display: block;
126
+ position: fixed;
127
+ top: 0;
128
+ left: 0;
129
+ width: 100%;
130
+ height: 100%;
131
+ background: rgba(0, 0, 0, 0.4);
132
+ z-index: 9999999;
133
+ -webkit-transition: all cubic-bezier(0.11, 0.51, 0.54, 0.9) 0.5s;
134
+ -moz-transition: all cubic-bezier(0.11, 0.51, 0.54, 0.9) 0.5s;
135
+ transition: all cubic-bezier(0.11, 0.51, 0.54, 0.9) 0.5s;
136
+ -webkit-transform: translateX(-100%);
137
+ -moz-transform: translateX(-100%);
138
+ -ms-transform: translateX(-100%);
139
+ -o-transform: translateX(-100%);
140
+ transform: translateX(-100%);
141
+ cursor: pointer; }
142
+
143
+ body.woocommerce-cart-tab-is-visible {
144
+ overflow: hidden; }
145
+ body.woocommerce-cart-tab-is-visible .site:before {
146
+ -webkit-transform: translateX(0);
147
+ -moz-transform: translateX(0);
148
+ -ms-transform: translateX(0);
149
+ -o-transform: translateX(0);
150
+ transform: translateX(0); }
151
+
152
+ @media screen and (max-width: 768px) {
153
+ .woocommerce-cart-tab-container {
154
+ display: none; } }
assets/css/style.css CHANGED
@@ -1,181 +1,159 @@
1
- .cart-tab {
2
- width: 22em;
3
  position: fixed;
4
- top: 5em;
5
- z-index: 9999999;
6
- }
7
- .cart-tab a.cart-parent {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  position: absolute;
9
  top: 0;
10
- display: block;
11
- -webkit-box-sizing: border-box;
12
- /* Safari/Chrome, other WebKit */
13
- -moz-box-sizing: border-box;
14
- /* Firefox, other Gecko */
15
  box-sizing: border-box;
16
- /* Opera/IE 8+ */
17
- padding: 1.618em;
18
- text-decoration: none;
19
- }
20
- .cart-tab a.cart-parent span.contents {
 
 
 
 
 
 
 
21
  display: block;
22
- color: #666;
23
- font-size: .8em;
24
- }
25
- .cart-tab a.cart-parent:hover {
26
- text-decoration: none;
27
- }
28
- .cart-tab .widget {
29
- padding: 1.618em;
30
- margin: 0;
31
- max-height: 600px;
32
- overflow: auto;
33
- }
34
- .cart-tab.light {
35
- background: #fff;
36
- }
37
- .cart-tab.light a.cart-parent,
38
- .cart-tab.light .widget {
39
- box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.2);
40
- -webkit-box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.2);
41
- -moz-box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.2);
42
- -o-box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.2);
43
- }
44
- .cart-tab.light a.cart-parent {
45
- background: #fff;
46
- }
47
- .cart-tab.light a.cart-parent:after {
48
- content: "";
49
- display: block;
50
- width: 10px;
51
- height: 100%;
52
- background: #fff;
53
  position: absolute;
54
- top: 0;
55
- right: -10px;
56
- }
57
- .cart-tab.dark {
58
- background: #333;
59
- }
60
- .cart-tab.dark a.cart-parent,
61
- .cart-tab.dark .widget {
62
- box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.2);
63
- -webkit-box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.2);
64
- -moz-box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.2);
65
- -o-box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.2);
66
- }
67
- .cart-tab.dark a.cart-parent {
68
- background: #333;
69
- }
70
- .cart-tab.dark a.cart-parent:after {
71
  content: "";
72
  display: block;
73
- width: 10px;
74
- height: 100%;
75
- background: #333;
76
- position: absolute;
77
  top: 0;
78
- right: -10px;
79
- }
80
- .cart-tab.right {
81
- right: -22em;
82
- -webkit-transition: right ease 0.5s;
83
- -moz-transition: right ease 0.5s;
84
- -o-transition: right ease 0.5s;
85
- transition: right ease 0.5s;
86
- }
87
- .cart-tab.right a.cart-parent {
88
- left: -8.402328em;
89
- width: 8.402328em;
90
- -webkit-transition: left ease 0.5s;
91
- -moz-transition: left ease 0.5s;
92
- -o-transition: left ease 0.5s;
93
- transition: left ease 0.5s;
94
- -webkit-border-top-left-radius: 3px;
95
- -webkit-border-bottom-left-radius: 3px;
96
- -moz-border-radius-topleft: 3px;
97
- -moz-border-radius-bottomleft: 3px;
98
- border-top-left-radius: 3px;
99
- border-bottom-left-radius: 3px;
100
- }
101
- .cart-tab.right a.cart-parent.hidden {
102
- left: 0;
103
- }
104
- .cart-tab.right a.cart-parent.visible {
105
- left: -8.402328em;
106
- }
107
- .cart-tab.right:hover {
108
- right: 0;
109
- }
110
- .cart-tab.right .widget {
111
- -webkit-border-bottom-left-radius: 3px;
112
- -webkit-border-bottom-right-radius: 3px;
113
- -moz-border-radius-bottomleft: 3px;
114
- -moz-border-radius-bottomright: 3px;
115
- border-bottom-left-radius: 3px;
116
- border-bottom-right-radius: 3px;
117
- -webkit-border-top-right-radius: 0;
118
- -webkit-border-bottom-right-radius: 0;
119
- -moz-border-radius-topright: 0;
120
- -moz-border-radius-bottomright: 0;
121
- border-top-right-radius: 0;
122
- border-bottom-right-radius: 0;
123
- }
124
- .cart-tab.left {
125
- left: -22em;
126
- -webkit-transition: left ease 0.5s;
127
- -moz-transition: left ease 0.5s;
128
- -o-transition: left ease 0.5s;
129
- transition: left ease 0.5s;
130
- }
131
- .cart-tab.left a.cart-parent {
132
- right: -8.402328em;
133
- width: 8.402328em;
134
- -webkit-transition: right ease 0.5s;
135
- -moz-transition: right ease 0.5s;
136
- -o-transition: right ease 0.5s;
137
- transition: right ease 0.5s;
138
- -webkit-border-top-right-radius: 3px;
139
- -webkit-border-bottom-right-radius: 3px;
140
- -moz-border-radius-topright: 3px;
141
- -moz-border-radius-bottomright: 3px;
142
- border-top-right-radius: 3px;
143
- border-bottom-right-radius: 3px;
144
- }
145
- .cart-tab.left a.cart-parent.hidden {
146
- right: 0;
147
- }
148
- .cart-tab.left a.cart-parent.visible {
149
- right: -8.402328em;
150
- }
151
- .cart-tab.left:hover {
152
  left: 0;
153
- }
154
- .cart-tab.left .widget {
155
- -webkit-border-bottom-left-radius: 3px;
156
- -webkit-border-bottom-right-radius: 3px;
157
- -moz-border-radius-bottomleft: 3px;
158
- -moz-border-radius-bottomright: 3px;
159
- border-bottom-left-radius: 3px;
160
- border-bottom-right-radius: 3px;
161
- -webkit-border-top-left-radius: 0;
162
- -webkit-border-bottom-left-radius: 0;
163
- -moz-border-radius-topleft: 0;
164
- -moz-border-radius-bottomleft: 0;
165
- border-top-left-radius: 0;
166
- border-bottom-left-radius: 0;
167
- }
168
- .cart-tab.left.light a.cart-parent:after,
169
- .cart-tab.left.dark a.cart-parent:after {
170
- right: auto;
171
- left: -10px;
172
- }
173
- .cart-tab.no-animation.right:hover {
174
- right: -22em;
175
- }
176
- .cart-tab.no-animation.left:hover {
177
- left: -22em;
178
- }
179
- .cart-tab.hidden {
180
- display: none;
181
- }
1
+ .woocommerce-cart-tab-container {
2
+ width: 320px;
3
  position: fixed;
4
+ top: 0;
5
+ z-index: 99999999;
6
+ -webkit-transition: all cubic-bezier(0.11, 0.51, 0.54, 0.9) 0.5s;
7
+ -moz-transition: all cubic-bezier(0.11, 0.51, 0.54, 0.9) 0.5s;
8
+ transition: all cubic-bezier(0.11, 0.51, 0.54, 0.9) 0.5s;
9
+ box-sizing: border-box; }
10
+ .woocommerce-cart-tab-container .widget {
11
+ padding: 0; }
12
+ .woocommerce-cart-tab-container .widget_shopping_cart {
13
+ overflow: auto;
14
+ margin-bottom: 0; }
15
+ .woocommerce-cart-tab-container .widget_shopping_cart .widgettitle {
16
+ position: absolute;
17
+ top: 0;
18
+ left: 0;
19
+ width: 100%;
20
+ z-index: 99;
21
+ margin: 0;
22
+ padding: 0;
23
+ padding: 1.387rem 1.618rem;
24
+ text-align: center;
25
+ font-size: 1.2em;
26
+ border: 0;
27
+ height: 68px;
28
+ box-sizing: border-box; }
29
+ .woocommerce-cart-tab-container .widget_shopping_cart ul.product_list_widget {
30
+ margin-top: 88px;
31
+ padding: 0 1.618em;
32
+ margin-bottom: 1.618em; }
33
+ .woocommerce-cart-tab-container .widget_shopping_cart ul.product_list_widget li {
34
+ border: 0; }
35
+ .woocommerce-cart-tab-container .widget_shopping_cart .total {
36
+ margin-bottom: 5.5em;
37
+ padding: 0 3em;
38
+ padding-bottom: 1em;
39
+ border: 0; }
40
+ .woocommerce-cart-tab-container .widget_shopping_cart .buttons {
41
+ position: absolute;
42
+ bottom: 0;
43
+ left: 0;
44
+ width: 100%;
45
+ padding: 1.387em 1.618em;
46
+ z-index: 99;
47
+ margin: 0;
48
+ box-sizing: border-box; }
49
+ .woocommerce-cart-tab-container .widget_shopping_cart .buttons .button {
50
+ width: 48%;
51
+ float: left;
52
+ margin: 0;
53
+ text-align: center;
54
+ box-sizing: border-box; }
55
+ .woocommerce-cart-tab-container .widget_shopping_cart .buttons .button:nth-child(2) {
56
+ float: right; }
57
+ .woocommerce-cart-tab-container .widget_shopping_cart .buttons .button:after {
58
+ display: none; }
59
+
60
+ .admin-bar .woocommerce-cart-tab-container {
61
+ top: 32px; }
62
+
63
+ .woocommerce-cart-tab-container--left {
64
+ left: 0;
65
+ -webkit-transform: translateX(-320px);
66
+ -moz-transform: translateX(-320px);
67
+ -ms-transform: translateX(-320px);
68
+ -o-transform: translateX(-320px);
69
+ transform: translateX(-320px); }
70
+ .woocommerce-cart-tab-container--left .woocommerce-cart-tab {
71
+ left: 320px; }
72
+ .woocommerce-cart-tab-container--left.woocommerce-cart-tab-container--visible {
73
+ -webkit-transform: translateX(0);
74
+ -moz-transform: translateX(0);
75
+ -ms-transform: translateX(0);
76
+ -o-transform: translateX(0);
77
+ transform: translateX(0); }
78
+
79
+ .woocommerce-cart-tab-container--right {
80
+ right: 0;
81
+ -webkit-transform: translateX(320px);
82
+ -moz-transform: translateX(320px);
83
+ -ms-transform: translateX(320px);
84
+ -o-transform: translateX(320px);
85
+ transform: translateX(320px); }
86
+ .woocommerce-cart-tab-container--right .woocommerce-cart-tab {
87
+ right: 320px; }
88
+ .woocommerce-cart-tab-container--right.woocommerce-cart-tab-container--visible {
89
+ -webkit-transform: translateX(0);
90
+ -moz-transform: translateX(0);
91
+ -ms-transform: translateX(0);
92
+ -o-transform: translateX(0);
93
+ transform: translateX(0); }
94
+
95
+ .woocommerce-cart-tab {
96
  position: absolute;
97
  top: 0;
98
+ width: 68px;
99
+ height: 68px;
 
 
 
100
  box-sizing: border-box;
101
+ line-height: 1;
102
+ cursor: pointer; }
103
+ .woocommerce-cart-tab:focus {
104
+ outline: none; }
105
+ .woocommerce-cart-tab .woocommerce-cart-tab__icon {
106
+ position: absolute;
107
+ top: 50%;
108
+ left: 50%;
109
+ transform: translateX(-50%) translateY(-50%);
110
+ width: 24px; }
111
+
112
+ .woocommerce-cart-tab__contents {
113
  display: block;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
114
  position: absolute;
115
+ bottom: 10px;
116
+ right: 10px;
117
+ width: 25px;
118
+ height: 25px;
119
+ line-height: 25px;
120
+ border-radius: 100%;
121
+ text-align: center;
122
+ z-index: 10;
123
+ font-size: .857em; }
124
+
125
+ .woocommerce-cart-tab a {
126
+ display: block; }
127
+
128
+ body .site:before {
 
 
 
129
  content: "";
130
  display: block;
131
+ position: fixed;
 
 
 
132
  top: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
133
  left: 0;
134
+ width: 100%;
135
+ height: 100%;
136
+ background: rgba(0, 0, 0, 0.4);
137
+ z-index: 9999999;
138
+ -webkit-transition: all cubic-bezier(0.11, 0.51, 0.54, 0.9) 0.5s;
139
+ -moz-transition: all cubic-bezier(0.11, 0.51, 0.54, 0.9) 0.5s;
140
+ transition: all cubic-bezier(0.11, 0.51, 0.54, 0.9) 0.5s;
141
+ -webkit-transform: translateX(-100%);
142
+ -moz-transform: translateX(-100%);
143
+ -ms-transform: translateX(-100%);
144
+ -o-transform: translateX(-100%);
145
+ transform: translateX(-100%);
146
+ cursor: pointer; }
147
+
148
+ body.woocommerce-cart-tab-is-visible {
149
+ overflow: hidden; }
150
+ body.woocommerce-cart-tab-is-visible .site:before {
151
+ -webkit-transform: translateX(0);
152
+ -moz-transform: translateX(0);
153
+ -ms-transform: translateX(0);
154
+ -o-transform: translateX(0);
155
+ transform: translateX(0); }
156
+
157
+ @media screen and (max-width: 768px) {
158
+ .woocommerce-cart-tab-container {
159
+ display: none; } }
 
 
 
assets/css/style.less DELETED
@@ -1,149 +0,0 @@
1
- @import 'mixins.less';
2
-
3
- .cart-tab {
4
- width:22em;
5
- position: fixed;
6
- top:5em;
7
- z-index: 9999999;
8
- a.cart-parent {
9
- position: absolute;
10
- top:0;
11
- display: block;
12
- .borderbox;
13
- padding:1.618em;
14
- text-decoration: none;
15
- span.contents {
16
- display: block;
17
- color: #666;
18
- font-size:.8em;
19
- }
20
- &:hover {
21
- text-decoration: none;
22
- }
23
- }
24
- .widget {
25
- padding:1.618em;
26
- margin:0;
27
- max-height: 600px;
28
- overflow: auto;
29
- }
30
-
31
- // The light colour scheme
32
- &.light {
33
- background: #fff;
34
- a.cart-parent, .widget {
35
- .box_shadow(0,2px,1em,0,rgba(0,0,0,0.2));
36
- }
37
- a.cart-parent {
38
- background: #fff;
39
- &:after {
40
- content: "";
41
- display: block;
42
- width:10px;
43
- height:100%;
44
- background: #fff;
45
- position: absolute;
46
- top:0;
47
- right:-10px;
48
- }
49
- }
50
- }
51
-
52
- // The dark colour scheme
53
- &.dark {
54
- background: #333;
55
- a.cart-parent, .widget {
56
- .box_shadow(0,2px,1em,0,rgba(0,0,0,0.2));
57
- }
58
- a.cart-parent {
59
- background: #333;
60
- &:after {
61
- content: "";
62
- display: block;
63
- width:10px;
64
- height:100%;
65
- background: #333;
66
- position: absolute;
67
- top:0;
68
- right:-10px;
69
- }
70
- }
71
- }
72
-
73
- // If the cart tab is positioned to the right
74
- &.right {
75
- right:-22em;
76
- .transition(right,ease,.5s);
77
- a.cart-parent {
78
- left:-8.402328em;
79
- width:8.402328em;
80
- .transition(left,ease,.5s);
81
- .border_radius_left(3px);
82
- &.hidden {
83
- left:0;
84
- }
85
- &.visible {
86
- left:-8.402328em;
87
- }
88
- }
89
- &:hover {
90
- right:0;
91
- }
92
- .widget {
93
- .border_radius_bottom(3px);
94
- .border_radius_right(0);
95
- }
96
- }
97
-
98
- // If the cart tab is positioned to the left
99
- &.left {
100
- left:-22em;
101
- .transition(left,ease,.5s);
102
- a.cart-parent {
103
- right:-8.402328em;
104
- width:8.402328em;
105
- .transition(right,ease,.5s);
106
- .border_radius_right(3px);
107
- &.hidden {
108
- right:0;
109
- }
110
- &.visible {
111
- right:-8.402328em;
112
- }
113
- }
114
- &:hover {
115
- left:0;
116
- }
117
- .widget {
118
- .border_radius_bottom(3px);
119
- .border_radius_left(0);
120
- }
121
- &.light, &.dark {
122
- a.cart-parent:after {
123
- right:auto;
124
- left:-10px;
125
- }
126
- }
127
- }
128
-
129
- &.no-animation {
130
- &.right:hover {
131
- right:-22em;
132
- }
133
- &.left:hover {
134
- left:-22em;
135
- }
136
- }
137
- &.hidden {
138
- display: none;
139
- }
140
- }
141
-
142
- // Retina
143
- @media
144
- only screen and (-webkit-min-device-pixel-ratio: 2),
145
- only screen and ( min--moz-device-pixel-ratio: 2),
146
- only screen and ( -o-min-device-pixel-ratio: 2/1) {
147
-
148
-
149
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
assets/js/cart-tab.js ADDED
@@ -0,0 +1,89 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /**
2
+ * cart-tab.js
3
+ *
4
+ * Handles display of cart tab
5
+ */
6
+ ( function() {
7
+
8
+ /**
9
+ * Reveal the cart
10
+ */
11
+ function revealCart() {
12
+ var windowWidth = jQuery( window ).width();
13
+
14
+ if ( windowWidth > 768 ) {
15
+ if ( jQuery( '.woocommerce-cart-tab-container' ).hasClass( 'woocommerce-cart-tab-container--visible' ) ) {
16
+ return;
17
+ } else {
18
+ jQuery( '.woocommerce-cart-tab-container' ).addClass( 'woocommerce-cart-tab-container--visible' );
19
+ }
20
+
21
+ jQuery( 'body' ).toggleClass( 'woocommerce-cart-tab-is-visible' );
22
+ }
23
+ }
24
+
25
+ /**
26
+ * Hide the cart
27
+ */
28
+ function hideCart() {
29
+ var windowWidth = jQuery( window ).width();
30
+
31
+ if ( windowWidth > 768 ) {
32
+ jQuery( '.woocommerce-cart-tab-container' ).removeClass( 'woocommerce-cart-tab-container--visible' );
33
+ }
34
+
35
+ jQuery( 'body' ).toggleClass( 'woocommerce-cart-tab-is-visible' );
36
+ }
37
+
38
+ /**
39
+ * Make the cart tab height match the widow height.
40
+ */
41
+ function setCartHeight() {
42
+ var windowHeight = jQuery( window ).height();
43
+ var windowWidth = jQuery( window ).width();
44
+
45
+ if ( windowWidth > 768 ) {
46
+ if ( jQuery( 'body' ).hasClass( 'admin-bar' ) ) {
47
+ jQuery( '.woocommerce-cart-tab-container .widget_shopping_cart' ).css( 'height', windowHeight - 32 );
48
+ } else {
49
+ jQuery( '.woocommerce-cart-tab-container .widget_shopping_cart' ).css( 'height', windowHeight );
50
+ }
51
+ }
52
+ }
53
+
54
+ /**
55
+ * On mouseup
56
+ */
57
+ jQuery( document ).mouseup( function( e ) {
58
+
59
+ /**
60
+ * Hide the cart when user clicks outside it.
61
+ */
62
+ var container = jQuery( '.woocommerce-cart-tab-container' );
63
+
64
+ if ( ! jQuery( '.button.add_to_cart_button' ).is( e.target ) && ! container.is( e.target ) && container.has( e.target ).length === 0 && container.hasClass( 'woocommerce-cart-tab-container--visible' ) ) {
65
+ container.removeClass( 'woocommerce-cart-tab-container--visible' );
66
+ jQuery( 'body' ).removeClass( 'woocommerce-cart-tab-is-visible' );
67
+ }
68
+ });
69
+
70
+
71
+ /**
72
+ * On document ready
73
+ */
74
+ jQuery( document ).ready( function() {
75
+
76
+ jQuery( 'body' ).on( 'added_to_cart', function() {
77
+ revealCart();
78
+ });
79
+
80
+ setCartHeight();
81
+ });
82
+
83
+ /**
84
+ * On window resize
85
+ */
86
+ jQuery( window ).resize( function() {
87
+ setCartHeight();
88
+ });
89
+ } )();
assets/js/cart-tab.min.js ADDED
@@ -0,0 +1 @@
 
1
+ !function(){function a(){var a=jQuery(window).width();if(a>768){if(jQuery(".woocommerce-cart-tab-container").hasClass("woocommerce-cart-tab-container--visible"))return;jQuery(".woocommerce-cart-tab-container").addClass("woocommerce-cart-tab-container--visible"),jQuery("body").toggleClass("woocommerce-cart-tab-is-visible")}}function b(){var a=jQuery(window).height(),b=jQuery(window).width();b>768&&(jQuery("body").hasClass("admin-bar")?jQuery(".woocommerce-cart-tab-container .widget_shopping_cart").css("height",a-32):jQuery(".woocommerce-cart-tab-container .widget_shopping_cart").css("height",a))}jQuery(document).mouseup(function(a){var b=jQuery(".woocommerce-cart-tab-container");jQuery(".button.add_to_cart_button").is(a.target)||b.is(a.target)||0!==b.has(a.target).length||!b.hasClass("woocommerce-cart-tab-container--visible")||(b.removeClass("woocommerce-cart-tab-container--visible"),jQuery("body").removeClass("woocommerce-cart-tab-is-visible"))}),jQuery(document).ready(function(){jQuery("body").on("added_to_cart",function(){a()}),b()}),jQuery(window).resize(function(){b()})}();
assets/scss/style-storefront.scss ADDED
@@ -0,0 +1,179 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @import 'bourbon';
2
+
3
+ $cart_width: 320px;
4
+
5
+ .woocommerce-cart-tab-container {
6
+ width: $cart_width;
7
+ position: fixed;
8
+ top: 0;
9
+ z-index: 99999999;
10
+ @include transition(all cubic-bezier(.11,.51,.54,.9) .5s);
11
+ box-sizing: border-box;
12
+
13
+ .widget_shopping_cart {
14
+ overflow: auto;
15
+ margin-bottom: 0;
16
+
17
+ .widgettitle {
18
+ position: absolute;
19
+ top: 0;
20
+ left: 0;
21
+ width: 100%;
22
+ z-index: 99;
23
+ margin: 0;
24
+ padding: 0;
25
+ padding: 1.387rem 1.618rem;
26
+ text-align: center;
27
+ font-size: 1.2em;
28
+ border: 0;
29
+ }
30
+
31
+ ul.product_list_widget {
32
+ margin-top: 5.2em;
33
+ padding: 0 1.618em;
34
+ margin-bottom: 1.618em;
35
+
36
+ li {
37
+ border: 0;
38
+ }
39
+ }
40
+
41
+ .total {
42
+ margin-bottom: 8em;
43
+ padding: 0 3em;
44
+ padding-bottom: 1em;
45
+ border: 0;
46
+ }
47
+
48
+ .buttons {
49
+ position: absolute;
50
+ bottom: 0;
51
+ left: 0;
52
+ width: 100%;
53
+ padding: 1.387em 1.618em;
54
+ z-index: 99;
55
+ margin: 0;
56
+
57
+ .button {
58
+ width: 48%;
59
+ float: left;
60
+ margin: 0;
61
+ text-align: center;
62
+
63
+ &:nth-child(2) {
64
+ float: right;
65
+ }
66
+
67
+ &:after {
68
+ display: none;
69
+ }
70
+ }
71
+ }
72
+ }
73
+ }
74
+
75
+ .admin-bar .woocommerce-cart-tab-container {
76
+ top: 32px;
77
+ }
78
+
79
+ .woocommerce-cart-tab-container--left {
80
+ left: 0;
81
+ @include transform(translateX(- $cart_width));
82
+
83
+ .woocommerce-cart-tab {
84
+ left: $cart_width;
85
+ }
86
+
87
+ &.woocommerce-cart-tab-container--visible {
88
+ @include transform(translateX(0));
89
+ }
90
+ }
91
+
92
+ .woocommerce-cart-tab-container--right {
93
+ right: 0;
94
+ @include transform(translateX($cart_width));
95
+
96
+ .woocommerce-cart-tab {
97
+ right: $cart_width;
98
+ }
99
+
100
+ &.woocommerce-cart-tab-container--visible {
101
+ @include transform(translateX(0));
102
+ }
103
+ }
104
+
105
+ .woocommerce-cart-tab {
106
+ position: absolute;
107
+ top: 0;
108
+ width: 60px;
109
+ height: 68px;
110
+ box-sizing: border-box;
111
+ line-height: 1;
112
+ cursor: pointer;
113
+
114
+ &:focus {
115
+ outline: none;
116
+ }
117
+
118
+ .woocommerce-cart-tab__icon {
119
+ position: absolute;
120
+ top: 50%;
121
+ left: 50%;
122
+ transform: translateX(-50%) translateY(-50%);
123
+ width: 24px;
124
+ }
125
+ }
126
+
127
+ .woocommerce-cart-tab__contents {
128
+ display: block;
129
+ position: absolute;
130
+ bottom: 10px;
131
+ right: 10px;
132
+ width: 25px;
133
+ height: 25px;
134
+ background: red;
135
+ line-height: 25px;
136
+ border-radius: 100%;
137
+ text-align: center;
138
+ z-index: 10;
139
+ font-size: .857em;
140
+ }
141
+
142
+ .woocommerce-cart-tab a {
143
+ display: block;
144
+ }
145
+
146
+ body {
147
+ .site {
148
+ &:before {
149
+ content: "";
150
+ display: block;
151
+ position: fixed;
152
+ top: 0;
153
+ left: 0;
154
+ width: 100%;
155
+ height: 100%;
156
+ background: rgba(#000,.4);
157
+ z-index: 9999999;
158
+ @include transition(all cubic-bezier(.11,.51,.54,.9) .5s);
159
+ @include transform(translateX(-100%));
160
+ cursor: pointer;
161
+ }
162
+ }
163
+
164
+ &.woocommerce-cart-tab-is-visible {
165
+ overflow: hidden;
166
+
167
+ .site {
168
+ &:before {
169
+ @include transform(translateX(0));
170
+ }
171
+ }
172
+ }
173
+ }
174
+
175
+ @media screen and ( max-width: 768px ) {
176
+ .woocommerce-cart-tab-container {
177
+ display: none;
178
+ }
179
+ }
assets/scss/style.scss ADDED
@@ -0,0 +1,186 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @import 'bourbon';
2
+
3
+ $cart_width: 320px;
4
+
5
+ .woocommerce-cart-tab-container {
6
+ width: $cart_width;
7
+ position: fixed;
8
+ top: 0;
9
+ z-index: 99999999;
10
+ @include transition(all cubic-bezier(.11,.51,.54,.9) .5s);
11
+ box-sizing: border-box;
12
+
13
+ .widget {
14
+ padding: 0;
15
+ }
16
+
17
+ .widget_shopping_cart {
18
+ overflow: auto;
19
+ margin-bottom: 0;
20
+
21
+ .widgettitle {
22
+ position: absolute;
23
+ top: 0;
24
+ left: 0;
25
+ width: 100%;
26
+ z-index: 99;
27
+ margin: 0;
28
+ padding: 0;
29
+ padding: 1.387rem 1.618rem;
30
+ text-align: center;
31
+ font-size: 1.2em;
32
+ border: 0;
33
+ height: 68px;
34
+ box-sizing: border-box;
35
+ }
36
+
37
+ ul.product_list_widget {
38
+ margin-top: 88px;
39
+ padding: 0 1.618em;
40
+ margin-bottom: 1.618em;
41
+
42
+ li {
43
+ border: 0;
44
+ }
45
+ }
46
+
47
+ .total {
48
+ margin-bottom: 5.5em;
49
+ padding: 0 3em;
50
+ padding-bottom: 1em;
51
+ border: 0;
52
+ }
53
+
54
+ .buttons {
55
+ position: absolute;
56
+ bottom: 0;
57
+ left: 0;
58
+ width: 100%;
59
+ padding: 1.387em 1.618em;
60
+ z-index: 99;
61
+ margin: 0;
62
+ box-sizing: border-box;
63
+
64
+ .button {
65
+ width: 48%;
66
+ float: left;
67
+ margin: 0;
68
+ text-align: center;
69
+ box-sizing: border-box;
70
+
71
+ &:nth-child(2) {
72
+ float: right;
73
+ }
74
+
75
+ &:after {
76
+ display: none;
77
+ }
78
+ }
79
+ }
80
+ }
81
+ }
82
+
83
+ .admin-bar .woocommerce-cart-tab-container {
84
+ top: 32px;
85
+ }
86
+
87
+ .woocommerce-cart-tab-container--left {
88
+ left: 0;
89
+ @include transform(translateX(- $cart_width));
90
+
91
+ .woocommerce-cart-tab {
92
+ left: $cart_width;
93
+ }
94
+
95
+ &.woocommerce-cart-tab-container--visible {
96
+ @include transform(translateX(0));
97
+ }
98
+ }
99
+
100
+ .woocommerce-cart-tab-container--right {
101
+ right: 0;
102
+ @include transform(translateX($cart_width));
103
+
104
+ .woocommerce-cart-tab {
105
+ right: $cart_width;
106
+ }
107
+
108
+ &.woocommerce-cart-tab-container--visible {
109
+ @include transform(translateX(0));
110
+ }
111
+ }
112
+
113
+ .woocommerce-cart-tab {
114
+ position: absolute;
115
+ top: 0;
116
+ width: 68px;
117
+ height: 68px;
118
+ box-sizing: border-box;
119
+ line-height: 1;
120
+ cursor: pointer;
121
+
122
+ &:focus {
123
+ outline: none;
124
+ }
125
+
126
+ .woocommerce-cart-tab__icon {
127
+ position: absolute;
128
+ top: 50%;
129
+ left: 50%;
130
+ transform: translateX(-50%) translateY(-50%);
131
+ width: 24px;
132
+ }
133
+ }
134
+
135
+ .woocommerce-cart-tab__contents {
136
+ display: block;
137
+ position: absolute;
138
+ bottom: 10px;
139
+ right: 10px;
140
+ width: 25px;
141
+ height: 25px;
142
+ line-height: 25px;
143
+ border-radius: 100%;
144
+ text-align: center;
145
+ z-index: 10;
146
+ font-size: .857em;
147
+ }
148
+
149
+ .woocommerce-cart-tab a {
150
+ display: block;
151
+ }
152
+
153
+ body {
154
+ .site {
155
+ &:before {
156
+ content: "";
157
+ display: block;
158
+ position: fixed;
159
+ top: 0;
160
+ left: 0;
161
+ width: 100%;
162
+ height: 100%;
163
+ background: rgba(#000,.4);
164
+ z-index: 9999999;
165
+ @include transition(all cubic-bezier(.11,.51,.54,.9) .5s);
166
+ @include transform(translateX(-100%));
167
+ cursor: pointer;
168
+ }
169
+ }
170
+
171
+ &.woocommerce-cart-tab-is-visible {
172
+ overflow: hidden;
173
+
174
+ .site {
175
+ &:before {
176
+ @include transform(translateX(0));
177
+ }
178
+ }
179
+ }
180
+ }
181
+
182
+ @media screen and ( max-width: 768px ) {
183
+ .woocommerce-cart-tab-container {
184
+ display: none;
185
+ }
186
+ }
cart-tab.php CHANGED
@@ -2,10 +2,10 @@
2
  /**
3
  * Plugin Name: WooCommerce Cart Tab
4
  * Plugin URI: http://jameskoster.co.uk/tag/cart-tab/
5
- * Version: 0.5.0
6
  * Description: Displays a sitewide link to the cart which reveals the cart contents on hover.
7
  * Author: jameskoster
8
- * Tested up to: 4.5.2
9
  * Author URI: http://jameskoster.co.uk
10
  * Text Domain: woocommerce-cart-tab
11
  * Domain Path: /languages/
@@ -26,196 +26,33 @@ if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', g
26
  */
27
  load_plugin_textdomain( 'woocommerce-cart-tab', false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' );
28
 
29
- if ( ! class_exists( 'WC_ct' ) ) {
30
 
31
  /**
32
  * Cart Tab class
33
  */
34
- class WC_ct {
35
 
36
  /**
37
  * Set up all the things
38
  */
39
  public function __construct() {
40
- add_action( 'wp_enqueue_scripts', array( $this, 'setup_styles' ) );
41
- add_action( 'wp_footer', array( $this, 'woocommerce_cart_tab' ) );
42
- add_filter( 'add_to_cart_fragments', array( $this, 'wcct_add_to_cart_fragment' ) );
43
-
44
- // Init settings.
45
- $this->settings = array(
46
- array(
47
- 'name' => __( 'Cart Tab', 'woocommerce-cart-tab' ),
48
- 'type' => 'title',
49
- 'id' => 'wc_ct_options',
50
- ),
51
- array(
52
- 'name' => __( 'Cart Widget', 'woocommerce-cart-tab' ),
53
- 'desc' => __( 'Display the cart widget on hover', 'woocommerce-cart-tab' ),
54
- 'id' => 'wc_ct_cart_widget',
55
- 'type' => 'checkbox',
56
- ),
57
- array(
58
- 'name' => __( 'Hide Empty Cart', 'woocommerce-cart-tab' ),
59
- 'desc' => __( 'Hide the cart tab if the cart is empty', 'woocommerce-cart-tab' ),
60
- 'id' => 'wc_ct_hide_empty_cart',
61
- 'type' => 'checkbox',
62
- ),
63
- array(
64
- 'name' => __( 'Use the light or dark skin', 'woocommerce-cart-tab' ),
65
- 'id' => 'wc_ct_skin',
66
- 'type' => 'select',
67
- 'options' => array(
68
- 'light' => __( 'Light', 'woocommerce-cart-tab' ),
69
- 'dark' => __( 'Dark', 'woocommerce-cart-tab' ),
70
- ),
71
- ),
72
- array(
73
- 'name' => __( 'Position the cart tab on the right or left', 'woocommerce-cart-tab' ),
74
- 'id' => 'wc_ct_horizontal_position',
75
- 'type' => 'select',
76
- 'options' => array(
77
- 'right' => __( 'Right', 'woocommerce-cart-tab' ),
78
- 'left' => __( 'Left', 'woocommerce-cart-tab' ),
79
- ),
80
- ),
81
- array(
82
- 'name' => __( 'Cart link display total/subtotal', 'woocommerce-cart-tab' ),
83
- 'id' => 'wc_ct_link_display_total',
84
- 'type' => 'select',
85
- 'options' => array(
86
- 'total' => __( 'total', 'woocommerce-cart-tab' ),
87
- 'subtotal' => __( 'subtotal', 'woocommerce-cart-tab' ),
88
- ),
89
- ),
90
-
91
- array(
92
- 'type' => 'sectionend',
93
- 'id' => 'wc_ct_options',
94
- ),
95
- );
96
-
97
- // Default options.
98
- add_option( 'wc_ct_cart_widget', 'yes' );
99
- add_option( 'wc_ct_hide_empty_cart', 'no' );
100
- add_option( 'wc_ct_skin', 'light' );
101
- add_option( 'wc_ct_horizontal_position', 'right' );
102
- add_option( 'wc_ct_link_display_total', 'total' );
103
-
104
- // Admin.
105
- add_action( 'woocommerce_settings_image_options_after', array( $this, 'admin_settings' ), 20 );
106
- add_action( 'woocommerce_update_options_catalog', array( $this, 'save_admin_settings' ) );
107
- add_action( 'woocommerce_update_options_products', array( $this, 'save_admin_settings' ) );
108
- }
109
-
110
- /**
111
- * Load the settings
112
- *
113
- * @return void
114
- */
115
- function admin_settings() {
116
- woocommerce_admin_fields( $this->settings );
117
- }
118
-
119
- /**
120
- * Save the settings
121
- *
122
- * @return void
123
- */
124
- function save_admin_settings() {
125
- woocommerce_update_options( $this->settings );
126
  }
127
 
128
  /**
129
- * Styles
130
- *
131
  * @return void
132
  */
133
- function setup_styles() {
134
- if ( ! is_cart() && ! is_checkout() ) {
135
- wp_enqueue_style( 'ct-styles', plugins_url( '/assets/css/style.css', __FILE__ ) );
136
- }
 
 
137
  }
138
-
139
- /**
140
- * The cart fragment
141
- *
142
- * @param array $fragments elements that should be refreshed when items are added/removed from the cart.
143
- */
144
- function wcct_add_to_cart_fragment( $fragments ) {
145
- global $woocommerce;
146
- ob_start();
147
- wcct_cart_button();
148
- $fragments['a.cart-parent'] = ob_get_clean();
149
- return $fragments;
150
- }
151
-
152
- /**
153
- * Display the cart tab / widget
154
- *
155
- * @return void
156
- */
157
- function woocommerce_cart_tab() {
158
- global $woocommerce;
159
- $skin = get_option( 'wc_ct_skin' );
160
- $position = get_option( 'wc_ct_horizontal_position' );
161
- $widget = get_option( 'wc_ct_cart_widget' );
162
- $hide_widget = get_option( 'wc_ct_hide_empty_cart' );
163
-
164
- if ( 0 == $woocommerce->cart->get_cart_contents_count() && 'yes' == $hide_widget ) {
165
- /**
166
- * Hide empty cart
167
- * Compatible with WP Super Cache as long as "late init" is enabled
168
- */
169
- $visibility = 'hidden';
170
- } else {
171
- $visibility = 'visible';
172
- }
173
-
174
- if ( ! is_cart() && ! is_checkout() ) {
175
- if ( 'yes' == $widget && ! wp_is_mobile() ) {
176
- echo '<div class="' . esc_attr( $position ) . ' cart-tab ' . esc_attr( $skin ) . ' ' . esc_attr( $visibility ) . '">';
177
- } else {
178
- echo '<div class="' . esc_attr( $position ) . ' cart-tab no-animation ' . esc_attr( $skin ) . ' ' . esc_attr( $visibility ) . '">';
179
- }
180
-
181
- wcct_cart_button();
182
-
183
- // Display the widget if specified.
184
- if ( 'yes' == $widget && ! wp_is_mobile() ) {
185
- // Check for WooCommerce 2.0 and display the cart widget.
186
- if ( version_compare( WOOCOMMERCE_VERSION, '2.0.0' ) >= 0 ) {
187
- the_widget( 'WC_Widget_Cart', 'title=' );
188
- } else {
189
- the_widget( 'WooCommerce_Widget_Cart', 'title=' );
190
- }
191
- }
192
- echo '</div>';
193
- }
194
- }
195
- }
196
-
197
- /**
198
- * Displays the cart total and number of items as a link
199
- *
200
- * @return void
201
- */
202
- function wcct_cart_button() {
203
- global $woocommerce;
204
- $link_total = get_option( 'wc_ct_link_display_total' );
205
- ?>
206
- <a href="<?php echo esc_url( $woocommerce->cart->get_cart_url() ); ?>" title="<?php esc_attr_e( 'View your shopping cart', 'woocommerce-cart-tab' ); ?>" class="cart-parent">
207
- <?php
208
- if ( 'total' == $link_total ) {
209
- echo wp_kses_post( $woocommerce->cart->get_cart_total() );
210
- } elseif ( 'subtotal' == $link_total ) {
211
- echo wp_kses_post( $woocommerce->cart->get_cart_subtotal() );
212
- }
213
- echo '<span class="contents">' . sprintf( _n( '%d item', '%d items', intval( $woocommerce->cart->get_cart_contents_count() ), 'woocommerce-cart-tab' ), intval( $woocommerce->cart->get_cart_contents_count() ) ) . '</span>';
214
- ?>
215
- </a>
216
- <?php
217
  }
218
 
219
- $woocommerce_cart_tab = new WC_ct();
220
  }
221
  }
2
  /**
3
  * Plugin Name: WooCommerce Cart Tab
4
  * Plugin URI: http://jameskoster.co.uk/tag/cart-tab/
5
+ * Version: 1.0.0
6
  * Description: Displays a sitewide link to the cart which reveals the cart contents on hover.
7
  * Author: jameskoster
8
+ * Tested up to: 4.7.1
9
  * Author URI: http://jameskoster.co.uk
10
  * Text Domain: woocommerce-cart-tab
11
  * Domain Path: /languages/
26
  */
27
  load_plugin_textdomain( 'woocommerce-cart-tab', false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' );
28
 
29
+ if ( ! class_exists( 'WooCommerce_Cart_Tab' ) ) {
30
 
31
  /**
32
  * Cart Tab class
33
  */
34
+ class WooCommerce_Cart_Tab {
35
 
36
  /**
37
  * Set up all the things
38
  */
39
  public function __construct() {
40
+ $this->setup();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
41
  }
42
 
43
  /**
44
+ * Setup
 
45
  * @return void
46
  */
47
+ public function setup() {
48
+ include_once( 'includes/cart-tab-functions.php' );
49
+ include_once( 'includes/cart-tab-templates.php' );
50
+ include_once( 'includes/class-cart-tab-customizer.php' );
51
+ include_once( 'includes/class-cart-tab-frontend.php' );
52
+ include_once( 'includes/class-cart-tab-hooks.php' );
53
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
54
  }
55
 
56
+ $woocommerce_cart_tab = new WooCommerce_Cart_Tab();
57
  }
58
  }
includes/cart-tab-functions.php ADDED
@@ -0,0 +1,20 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+
3
+ /**
4
+ * Sanitizes choices (selects / radios)
5
+ * Checks that the input matches one of the available choices
6
+ *
7
+ * @param array $input the available choices.
8
+ * @param array $setting the setting object.
9
+ * @since 1.0.0
10
+ */
11
+ function woocommerce_cart_tab_sanitize_choices( $input, $setting ) {
12
+ // Ensure input is a slug.
13
+ $input = sanitize_key( $input );
14
+
15
+ // Get list of choices from the control associated with the setting.
16
+ $choices = $setting->manager->get_control( $setting->id )->choices;
17
+
18
+ // If the input is a valid key, return it; otherwise, return the default.
19
+ return ( array_key_exists( $input, $choices ) ? $input : $setting->default );
20
+ }
includes/cart-tab-templates.php ADDED
@@ -0,0 +1,58 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ if ( ! function_exists( 'woocommerce_cart_tab_button' ) ) {
3
+ /**
4
+ * Displays the number of items in the cart with an icon
5
+ *
6
+ * @return void
7
+ */
8
+ function woocommerce_cart_tab_button() {
9
+ global $woocommerce;
10
+ ?>
11
+ <div class="woocommerce-cart-tab">
12
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86 104.5" class="woocommerce-cart-tab__icon">
13
+ <path class="woocommerce-cart-tab__icon-bag" d="M67.2,26.7C64.6,11.5,54.8,0.2,43.1,0.2C31.4,0.2,21.6,11.5,19,26.7H0.1v77.6h86V26.7H67.2z M43.1,4.2
14
+ c9.6,0,17.7,9.6,20,22.6H23C25.4,13.8,33.5,4.2,43.1,4.2z M82.1,100.4h-78V30.7h14.4c-0.1,1.3-0.2,2.6-0.2,3.9c0,1.1,0,2.2,0.1,3.3
15
+ c-0.8,0.6-1.4,1.6-1.4,2.8c0,1.9,1.6,3.5,3.5,3.5s3.5-1.6,3.5-3.5c0-1.2-0.6-2.3-1.6-2.9c-0.1-1-0.1-2-0.1-3.1
16
+ c0-1.3,0.1-2.6,0.2-3.9h41.2c0.1,1.3,0.2,2.6,0.2,3.9c0,1,0,2.1-0.1,3.1c-1,0.6-1.6,1.7-1.6,2.9c0,1.9,1.6,3.5,3.5,3.5
17
+ c1.9,0,3.5-1.6,3.5-3.5c0-1.1-0.5-2.1-1.4-2.8c0.1-1.1,0.1-2.2,0.1-3.3c0-1.3-0.1-2.6-0.2-3.9h14.4V100.4z"/>
18
+ </svg>
19
+
20
+ <?php
21
+ echo '<span class="woocommerce-cart-tab__contents">' . intval( $woocommerce->cart->get_cart_contents_count() ) . '</span>';
22
+ ?>
23
+
24
+ <script type="text/javascript">
25
+ jQuery( '.woocommerce-cart-tab' ).click( function() {
26
+ jQuery( '.woocommerce-cart-tab-container' ).toggleClass( 'woocommerce-cart-tab-container--visible' );
27
+ jQuery( 'body' ).toggleClass( 'woocommerce-cart-tab-is-visible' );
28
+ });
29
+ </script>
30
+ </div>
31
+ <?php
32
+ }
33
+ }
34
+
35
+ if ( ! function_exists( 'woocommerce_cart_tab' ) ) {
36
+ /**
37
+ * Display the cart tab / widget
38
+ *
39
+ * @return void
40
+ */
41
+ function woocommerce_cart_tab() {
42
+ if ( get_option( 'wc_ct_horizontal_position' ) ) {
43
+ $position = get_option( 'wc_ct_horizontal_position' );
44
+ } else {
45
+ $position = get_theme_mod( 'woocommerce_cart_tab_position', 'right' );
46
+ }
47
+
48
+ if ( ! is_cart() && ! is_checkout() ) {
49
+ echo '<div class="woocommerce-cart-tab-container woocommerce-cart-tab-container--' . esc_attr( $position ) . '">';
50
+
51
+ do_action( 'wcct_before_cart_widget' );
52
+
53
+ the_widget( 'WC_Widget_Cart', 'title=' . __( 'Your Cart', 'woocommerce-cart-tab' ) );
54
+
55
+ echo '</div>';
56
+ }
57
+ }
58
+ }
includes/class-cart-tab-customizer.php ADDED
@@ -0,0 +1,237 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /**
3
+ * WooCommerce Cart Tab Customizer Class
4
+ *
5
+ * @author jameskoster
6
+ * @package woocommerce-cart-tab
7
+ * @since 1.0.0
8
+ */
9
+
10
+ if ( ! defined( 'ABSPATH' ) ) {
11
+ exit;
12
+ }
13
+
14
+ if ( ! class_exists( 'WooCommerce_Cart_Tab_Customizer' ) ) :
15
+
16
+ /**
17
+ * Cart tab Customizer class
18
+ */
19
+ class WooCommerce_Cart_Tab_Customizer {
20
+
21
+ /**
22
+ * Setup class.
23
+ *
24
+ * @since 1.0.0
25
+ */
26
+ public function __construct() {
27
+ if ( 'storefront' == get_option( 'template' ) ) {
28
+ add_action( 'wp_enqueue_scripts', array( $this, 'add_customizer_css_storefront' ), 9999 );
29
+ } else {
30
+ add_action( 'customize_register', array( $this, 'customize_register' ), 10 );
31
+ add_action( 'wp_enqueue_scripts', array( $this, 'add_customizer_css' ), 9999 );
32
+ }
33
+ }
34
+
35
+ /**
36
+ * Customizer controls / settings
37
+ *
38
+ * @param WP_Customize_Manager $wp_customize Theme Customizer object.
39
+ * @since 1.0.0
40
+ */
41
+ public function customize_register( $wp_customize ) {
42
+
43
+ /**
44
+ * Create defaults from existing options set using the old method
45
+ */
46
+ $cart_tab_position_default = get_option( 'wc_ct_horizontal_position' );
47
+
48
+ if ( $cart_tab_position_default ) {
49
+ delete_option( 'wc_ct_horizontal_position' );
50
+ } else {
51
+ $cart_tab_position_default = 'right';
52
+ }
53
+
54
+ /**
55
+ * Sections
56
+ */
57
+ $wp_customize->add_section( 'woocommerce_cart_tab' , array(
58
+ 'title' => __( 'Cart Tab', 'storefront' ),
59
+ 'priority' => 85,
60
+ ) );
61
+
62
+ /**
63
+ * Settings
64
+ */
65
+ $wp_customize->add_setting( 'woocommerce_cart_tab_position' , array(
66
+ 'default' => $cart_tab_position_default,
67
+ 'transport' => 'refresh',
68
+ 'sanitize_callback' => 'woocommerce_cart_tab_sanitize_choices',
69
+ ) );
70
+
71
+ $wp_customize->add_setting( 'woocommerce_cart_tab_background', array(
72
+ 'default' => '#ffffff',
73
+ 'sanitize_callback' => 'sanitize_hex_color',
74
+ ) );
75
+
76
+ $wp_customize->add_setting( 'woocommerce_cart_tab_accent', array(
77
+ 'default' => '#333333',
78
+ 'sanitize_callback' => 'sanitize_hex_color',
79
+ ) );
80
+
81
+ /**
82
+ * Controls
83
+ */
84
+ $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'woocommerce_cart_tab_position', array(
85
+ 'label' => __( 'Position', 'woocommerce-cart-tab' ),
86
+ 'section' => 'woocommerce_cart_tab',
87
+ 'settings' => 'woocommerce_cart_tab_position',
88
+ 'type' => 'select',
89
+ 'choices' => array(
90
+ 'right' => __( 'Right', 'woocommerce-cart-tab' ),
91
+ 'left' => __( 'Left', 'woocommerce-cart-tab' ),
92
+ ),
93
+ ) ) );
94
+
95
+ $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'woocommerce_cart_tab_background', array(
96
+ 'label' => __( 'Background color', 'woocommerce-cart-tab' ),
97
+ 'section' => 'woocommerce_cart_tab',
98
+ 'settings' => 'woocommerce_cart_tab_background',
99
+ ) ) );
100
+
101
+ $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'woocommerce_cart_tab_accent', array(
102
+ 'label' => __( 'Icon color', 'woocommerce-cart-tab' ),
103
+ 'section' => 'woocommerce_cart_tab',
104
+ 'settings' => 'woocommerce_cart_tab_accent',
105
+ ) ) );
106
+ }
107
+
108
+ /**
109
+ * Add CSS in <head> for styles handled by the theme customizer
110
+ * If the Customizer is active pull in the raw css. Otherwise pull in the prepared theme_mods if they exist.
111
+ *
112
+ * @since 1.0.0
113
+ * @return void
114
+ */
115
+ public function add_customizer_css() {
116
+ $background = get_theme_mod( 'woocommerce_cart_tab_background', '#ffffff' );
117
+ $accent = get_theme_mod( 'woocommerce_cart_tab_accent', '#333333' );
118
+
119
+ $styles = '
120
+ .woocommerce-cart-tab-container {
121
+ background-color: ' . $this->woocommerce_cart_tab_adjust_color_brightness( $background, -7 ) . ';
122
+ }
123
+
124
+ .woocommerce-cart-tab,
125
+ .woocommerce-cart-tab-container .widget_shopping_cart .widgettitle,
126
+ .woocommerce-cart-tab-container .widget_shopping_cart .buttons {
127
+ background-color: ' . $background . ';
128
+ }
129
+
130
+ .woocommerce-cart-tab,
131
+ .woocommerce-cart-tab:hover {
132
+ color: ' . $background . ';
133
+ }
134
+
135
+ .woocommerce-cart-tab__contents {
136
+ background-color: ' . $accent . ';
137
+ }
138
+
139
+ .woocommerce-cart-tab__icon-bag {
140
+ fill: ' . $accent . ';
141
+ }';
142
+
143
+ wp_add_inline_style( 'cart-tab-styles', $styles );
144
+ }
145
+
146
+ /**
147
+ * Add CSS in <head> for styles handled by the theme customizer - Storefront edition
148
+ * If the Customizer is active pull in the raw css. Otherwise pull in the prepared theme_mods if they exist.
149
+ *
150
+ * @since 1.0.0
151
+ * @return void
152
+ */
153
+ public function add_customizer_css_storefront() {
154
+ $background = get_theme_mod( 'storefront_header_background_color' );
155
+ $header_link_color = get_theme_mod( 'storefront_header_link_color' );
156
+ $header_text_color = get_theme_mod( 'storefront_header_text_color' );
157
+ $button_background = get_theme_mod( 'storefront_button_alt_background_color' );
158
+ $button_text = get_theme_mod( 'storefront_button_alt_text_color' );
159
+
160
+ $styles = '
161
+ .woocommerce-cart-tab-container {
162
+ background-color: ' . $this->woocommerce_cart_tab_adjust_color_brightness( $background, 10 ) . ';
163
+ }
164
+
165
+ .woocommerce-cart-tab,
166
+ .woocommerce-cart-tab-container .widget_shopping_cart .widgettitle,
167
+ .woocommerce-cart-tab-container .widget_shopping_cart .buttons {
168
+ background-color: ' . $this->woocommerce_cart_tab_adjust_color_brightness( $background, 20 ) . ';
169
+ }
170
+
171
+ .woocommerce-cart-tab,
172
+ .woocommerce-cart-tab:hover {
173
+ color: ' . $this->woocommerce_cart_tab_adjust_color_brightness( $background, 10 ) . ';
174
+ }
175
+
176
+ .woocommerce-cart-tab-container .widget_shopping_cart {
177
+ color: ' . $header_text_color . ';
178
+ }
179
+
180
+ .woocommerce-cart-tab-container .widget_shopping_cart a:not(.button),
181
+ .woocommerce-cart-tab-container .widget_shopping_cart .widgettitle {
182
+ color: ' . $header_link_color . ';
183
+ }
184
+
185
+ .woocommerce-cart-tab__contents {
186
+ background-color: ' . $button_background . ';
187
+ color: ' . $button_text . ';
188
+ }
189
+
190
+ .woocommerce-cart-tab__icon-bag {
191
+ fill: ' . $header_link_color . ';
192
+ }';
193
+
194
+ wp_add_inline_style( 'cart-tab-styles-storefront', $styles );
195
+ }
196
+
197
+ /**
198
+ * Adjust a hex color brightness
199
+ * Allows us to create hover styles for custom link colors
200
+ *
201
+ * @param strong $hex hex color e.g. #111111.
202
+ * @param integer $steps factor by which to brighten/darken ranging from -255 (darken) to 255 (brighten).
203
+ * @return string brightened/darkened hex color
204
+ * @since 1.0.0
205
+ */
206
+ public function woocommerce_cart_tab_adjust_color_brightness( $hex, $steps ) {
207
+ // Steps should be between -255 and 255. Negative = darker, positive = lighter.
208
+ $steps = max( -255, min( 255, $steps ) );
209
+
210
+ // Format the hex color string.
211
+ $hex = str_replace( '#', '', $hex );
212
+
213
+ if ( 3 == strlen( $hex ) ) {
214
+ $hex = str_repeat( substr( $hex, 0, 1 ), 2 ) . str_repeat( substr( $hex, 1, 1 ), 2 ) . str_repeat( substr( $hex, 2, 1 ), 2 );
215
+ }
216
+
217
+ // Get decimal values.
218
+ $r = hexdec( substr( $hex, 0, 2 ) );
219
+ $g = hexdec( substr( $hex, 2, 2 ) );
220
+ $b = hexdec( substr( $hex, 4, 2 ) );
221
+
222
+ // Adjust number of steps and keep it inside 0 to 255.
223
+ $r = max( 0, min( 255, $r + $steps ) );
224
+ $g = max( 0, min( 255, $g + $steps ) );
225
+ $b = max( 0, min( 255, $b + $steps ) );
226
+
227
+ $r_hex = str_pad( dechex( $r ), 2, '0', STR_PAD_LEFT );
228
+ $g_hex = str_pad( dechex( $g ), 2, '0', STR_PAD_LEFT );
229
+ $b_hex = str_pad( dechex( $b ), 2, '0', STR_PAD_LEFT );
230
+
231
+ return '#' . $r_hex . $g_hex . $b_hex;
232
+ }
233
+ }
234
+
235
+ endif;
236
+
237
+ return new WooCommerce_Cart_Tab_Customizer();
includes/class-cart-tab-frontend.php ADDED
@@ -0,0 +1,64 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /**
3
+ * WooCommerce Cart Tab Frontend Class
4
+ *
5
+ * @author jameskoster
6
+ * @package woocommerce-cart-tab
7
+ * @since 1.0.0
8
+ */
9
+
10
+ if ( ! defined( 'ABSPATH' ) ) {
11
+ exit;
12
+ }
13
+
14
+ if ( ! class_exists( 'WooCommerce_Cart_Tab_Frontend' ) ) :
15
+
16
+ /**
17
+ * Cart tab frontend class
18
+ */
19
+ class WooCommerce_Cart_Tab_Frontend {
20
+
21
+ /**
22
+ * Setup class.
23
+ *
24
+ * @since 1.0.0
25
+ */
26
+ public function __construct() {
27
+ add_action( 'wp_enqueue_scripts', array( $this, 'setup_styles' ), 999 );
28
+ add_filter( 'add_to_cart_fragments', array( $this, 'woocommerce_cart_tab_add_to_cart_fragment' ) );
29
+
30
+ add_action( 'wp_footer', 'woocommerce_cart_tab' );
31
+ }
32
+
33
+ /**
34
+ * Styles
35
+ *
36
+ * @return void
37
+ */
38
+ function setup_styles() {
39
+ if ( ! is_cart() && ! is_checkout() ) {
40
+ if ( 'storefront' == get_option( 'template' ) ) {
41
+ wp_enqueue_style( 'cart-tab-styles-storefront', plugins_url( '../assets/css/style-storefront.css', __FILE__ ) );
42
+ } else {
43
+ wp_enqueue_style( 'cart-tab-styles', plugins_url( '../assets/css/style.css', __FILE__ ) );
44
+ }
45
+ wp_enqueue_script( 'cart-tab-script', plugins_url( '../assets/js/cart-tab.min.js', __FILE__ ), array( 'jquery' ), '1.0.0' );
46
+ }
47
+ }
48
+
49
+ /**
50
+ * The cart fragment
51
+ *
52
+ * @param array $fragments elements that should be refreshed when items are added/removed from the cart.
53
+ */
54
+ function woocommerce_cart_tab_add_to_cart_fragment( $fragments ) {
55
+ ob_start();
56
+ woocommerce_cart_tab_button();
57
+ $fragments['.woocommerce-cart-tab'] = ob_get_clean();
58
+ return $fragments;
59
+ }
60
+ }
61
+
62
+ endif;
63
+
64
+ return new WooCommerce_Cart_Tab_Frontend();
includes/class-cart-tab-hooks.php ADDED
@@ -0,0 +1,14 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /**
3
+ * WooCommerce Cart Tab Action hooks
4
+ *
5
+ * @author jameskoster
6
+ * @package woocommerce-cart-tab
7
+ * @since 1.0.0
8
+ */
9
+
10
+ if ( ! defined( 'ABSPATH' ) ) {
11
+ exit;
12
+ }
13
+
14
+ add_action( 'wcct_before_cart_widget', 'woocommerce_cart_tab_button' );
package.json ADDED
@@ -0,0 +1,29 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "name": "woocommerce-cart-tab",
3
+ "title": "WooCommerce Cart Tab",
4
+ "version": "1.0.0",
5
+ "homepage": "http://wordpress.org/plugins/woocommerce-cart-tab/",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "https://github.com/jameskoster/woocommerce-cart-tab.git"
9
+ },
10
+ "main": "Gruntfile.js",
11
+ "devDependencies": {
12
+ "grunt": "~0.4.5",
13
+ "grunt-contrib-uglify": "~0.9.1",
14
+ "grunt-checktextdomain": "^1.0.0",
15
+ "grunt-wp-i18n": "^0.5.2",
16
+ "grunt-contrib-cssmin": "~0.12.3",
17
+ "grunt-contrib-watch": "~0.6.1",
18
+ "grunt-sass": "^1.0.0",
19
+ "node-sass": "^3.2.0",
20
+ "susy": "^2.2.5",
21
+ "node-bourbon": "~4.2.3",
22
+ "grunt-contrib-copy": "~0.8.0",
23
+ "grunt-contrib-jshint": "^0.11.2"
24
+ },
25
+ "engines": {
26
+ "node": ">=0.8.0",
27
+ "npm": ">=1.1.0"
28
+ }
29
+ }
readme.txt CHANGED
@@ -2,20 +2,20 @@
2
  Contributors: jameskoster
3
  Tags: woocommerce, ecommerce, cart
4
  Requires at least: 4.4
5
- Tested up to: 4.5.3
6
- Stable tag: 0.5.0
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
10
- Displays a sitewide link to the WooCommerce cart which reveals the cart contents on hover.
11
 
12
  == Description ==
13
 
14
- A big UX mistake on many eCommerce web sites is hiding access to the cart. The next logical step after adding a product to the cart is to buy it. Don't frustrate your customers by making them search for the cart button!
15
 
16
- Upon activationg this plugin will display a link to the WooCommerce cart which is visible sitewide and fixed in position so it remains visible wherever the user scrolls. When the user hovers over the tab, the full cart widget is displayed.
17
 
18
- There are options (Catalog tab, WooCommerce settings) to display the cart tab on the right or the left, to use a light or dark skin to match your theme and to display the cart widget on hover or not.
19
 
20
  Please feel free to contribute on <a href="https://github.com/jameskoster/woocommerce-cart-tab">github</a>.
21
 
@@ -41,11 +41,15 @@ Thanks! Please fork the repo on <a href="https://github.com/jameskoster/woocomme
41
  == Screenshots ==
42
 
43
  1. The cart tab.
44
- 2. The cart tab on hover.
45
- 3. The cart tab with dark skin enabled.
46
 
47
  == Changelog ==
48
 
 
 
 
 
 
 
49
  = 0.5.0 - 06/07/2016 =
50
  * New - Cart tab no longer displayed on handheld devices.
51
 
2
  Contributors: jameskoster
3
  Tags: woocommerce, ecommerce, cart
4
  Requires at least: 4.4
5
+ Tested up to: 4.7.1
6
+ Stable tag: 1.0.0
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
10
+ Adds an offscreen cart to all pages on your site and a fixed tab that displays the number of products in the cart. Adding a product to the cart or clicking the tab reveals the cart.
11
 
12
  == Description ==
13
 
14
+ A big UX mistake on many eCommerce web sites is hiding access to the cart. After adding a product to the cart the visitors next logical step is to complete the purchase. Don't frustrate your customers by making them search for the cart button!
15
 
16
+ This plugin adds a sitewide tab that displays the number of products in the cart. Clicking the tab or adding a product to the cart from a shop page will reveal the cart contents with a link to the checkout.
17
 
18
+ There are options in the Customizer to control the display.
19
 
20
  Please feel free to contribute on <a href="https://github.com/jameskoster/woocommerce-cart-tab">github</a>.
21
 
41
  == Screenshots ==
42
 
43
  1. The cart tab.
 
 
44
 
45
  == Changelog ==
46
 
47
+ = 1.0.0 - 26/01/2017 =
48
+ * New - The cart tab now opens when an add to cart button on a shop page is clicked.
49
+ * New - Cart tab opens on click rather than hover.
50
+ * New - Display controls moved to the Customizer.
51
+ * New - Integration with Storefront theme.
52
+
53
  = 0.5.0 - 06/07/2016 =
54
  * New - Cart tab no longer displayed on handheld devices.
55