Skip to content

Commit 05d9402

Browse files
mstuartmstuart
committed
Added support for different button image sizes using data-size. If data-size isnt specified, it will always default to the large size. Added unit tests.
1 parent 2df00a0 commit 05d9402

5 files changed

Lines changed: 82 additions & 21 deletions

File tree

‎dist/paypal-button-minicart.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/paypal-button.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/paypal-button.js‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@ PAYPAL.apps = PAYPAL.apps || {};
1919
lang: 'lc'
2020
},
2121
buttonImgs = {
22-
buynow: '//www.paypalobjects.com/{lang}/i/btn/btn_buynow_LG.gif',
23-
cart: '//www.paypalobjects.com/{lang}/i/btn/btn_cart_LG.gif',
24-
basic: '//www.paypalobjects.com/{lang}/i/btn/btn_buynow_LG.gif'
22+
buynow: '//www.paypalobjects.com/{lang}/i/btn/btn_buynow_{size}.gif',
23+
cart: '//www.paypalobjects.com/{lang}/i/btn/btn_cart_{size}.gif',
24+
basic: '//www.paypalobjects.com/{lang}/i/btn/btn_buynow_{size}.gif'
2525
};
2626

2727
if (!PAYPAL.apps.ButtonFactory) {
@@ -111,7 +111,7 @@ PAYPAL.apps = PAYPAL.apps || {};
111111
form.action = paypalURL;
112112
form.appendChild(btn);
113113

114-
btn.src = getButtonImg(type, data.lc);
114+
btn.src = getButtonImg(type, data);
115115

116116
for (key in data) {
117117
input = hidden.cloneNode(true);
@@ -167,13 +167,17 @@ PAYPAL.apps = PAYPAL.apps || {};
167167
* @param type {String} The type of button to render
168168
* @return {String}
169169
*/
170-
function getButtonImg(type, lang) {
170+
function getButtonImg(type, data) {
171171
var img = buttonImgs[type] || buttonImgs.basic,
172-
regex = new RegExp("\\{lang\\}", "gm");
172+
lang = data.lc || 'en_US',
173+
size = 'LG';
173174

174-
lang = lang || "en_US";
175+
// Convert "pretty sizes" to expected sizes
176+
if (data.size === 'small') {
177+
size = 'SM';
178+
}
175179

176-
return img.replace(regex, lang);
180+
return img.replace(/\{lang\}/, lang).replace(/\{size\}/, size);
177181
}
178182

179183

‎test/index.html‎

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,18 @@
88
<body>
99
<script src="../lib/MiniCart/minicart.js"></script>
1010

11-
<div id="buynow">
12-
<h2>Buy Now</h2>
11+
<div id="buynowSmall">
12+
<h2>Buy Now (Small)</h2>
13+
<script src="../src/paypal-button.js?merchant=6XF3MPZBZV6HU"
14+
data-button="buynow"
15+
data-name="Buy now!"
16+
data-amount="1.00"
17+
data-size="small"
18+
></script>
19+
</div>
20+
21+
<div id="buynowLarge">
22+
<h2>Buy Now (Large)</h2>
1323
<script src="../src/paypal-button.js?merchant=6XF3MPZBZV6HU"
1424
data-button="buynow"
1525
data-name="Buy now!"
@@ -27,12 +37,23 @@ <h2>Buy Now (Spanish)</h2>
2737
></script>
2838
</div>
2939

30-
<div id="cart">
31-
<h2>Cart</h2>
40+
<div id="cartSmall">
41+
<h2>Cart (Small)</h2>
42+
<script src="../src/paypal-button.js?merchant=6XF3MPZBZV6HU"
43+
data-button="cart"
44+
data-name="Add to cart!"
45+
data-amount="1.00"
46+
data-size="small"
47+
></script>
48+
</div>
49+
50+
<div id="cartLarge">
51+
<h2>Cart (Large)</h2>
3252
<script src="../src/paypal-button.js?merchant=6XF3MPZBZV6HU"
3353
data-button="cart"
3454
data-name="Add to cart!"
3555
data-amount="1.00"
56+
data-size="large"
3657
></script>
3758
</div>
3859

@@ -45,8 +66,17 @@ <h2>Cart (French)</h2>
4566
data-lang="fr_FR"
4667
></script>
4768
</div>
69+
70+
<div id="hostedSmall">
71+
<h2>Hosted (Small)</h2>
72+
<script src="../src/paypal-button.js?merchant=6XF3MPZBZV6HU"
73+
data-button="cart"
74+
data-id="8R63A645E2QB6"
75+
data-size="small"
76+
></script>
77+
</div>
4878

49-
<div id="hosted">
79+
<div id="hostedLarge">
5080
<h2>Hosted</h2>
5181
<script src="../src/paypal-button.js?merchant=6XF3MPZBZV6HU"
5282
data-button="cart"

‎test/paypal-button.js‎

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,16 +59,16 @@ describe('PAYPAL.apps.ButtonFactory.buttons', function () {
5959

6060
'use strict';
6161

62-
it('Should have two buy now buttons', function () {
62+
it('Should have three buy now buttons', function () {
6363
var result = PAYPAL.apps.ButtonFactory.buttons.buynow;
6464

65-
result.should.equal(2);
65+
result.should.equal(3);
6666
});
6767

68-
it('Should have four cart buttons', function () {
68+
it('Should have six cart buttons', function () {
6969
var result = PAYPAL.apps.ButtonFactory.buttons.cart;
7070

71-
result.should.equal(4);
71+
result.should.equal(6);
7272
});
7373

7474
it('Should have one QR code', function () {
@@ -103,4 +103,31 @@ describe('Multi-language button images', function () {
103103

104104
germanImage.should.include('de_DE');
105105
});
106+
});
107+
108+
// Test multiple button image sizes
109+
describe('Multiple button image sizes', function () {
110+
111+
'use strict';
112+
113+
it('Should have a small version of Buy Now button', function () {
114+
var buynowSmallButton = document.getElementById('buynowSmall'),
115+
buynowSmallImg = buynowSmallButton.getElementsByTagName('input')[0].src;
116+
117+
buynowSmallImg.should.include('SM');
118+
});
119+
120+
it('Should have a small version of Cart button', function () {
121+
var cartSmallButton = document.getElementById('cartSmall'),
122+
cartSmallImg = cartSmallButton.getElementsByTagName('input')[0].src;
123+
124+
cartSmallImg.should.include('SM');
125+
});
126+
127+
it('Should have a small version of Hosted button', function () {
128+
var hostedSmallButton = document.getElementById('hostedSmall'),
129+
hostedSmallImg = hostedSmallButton.getElementsByTagName('input')[0].src;
130+
131+
hostedSmallImg.should.include('SM');
132+
});
106133
});

0 commit comments

Comments
 (0)