Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simple payments styling #7500

Merged
merged 13 commits into from
Jul 24, 2017
Merged

Simple payments styling #7500

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
e6509da
simple-payments: implement styles to the block
artpi Jul 21, 2017
7e8d9ab
some change
artpi Jul 21, 2017
10d8026
simple-payments: small coding improvements in output_shortcode()
retrofox Jul 22, 2017
4f4be62
simple-payments: do not use underscore in css class
retrofox Jul 22, 2017
c2e0186
simple-payments: minor improvements defining endpoints
retrofox Jul 22, 2017
4c2dae9
simple-payments: use `<p>` tag for description and price
retrofox Jul 22, 2017
43d30be
simple-payments: minor improvements
retrofox Jul 22, 2017
912a9cb
simple-payments: add purchase-box container. improve paypal button st…
retrofox Jul 22, 2017
1102a9b
simple-pyaments: wrap all text into `<p>` elems
retrofox Jul 24, 2017
da337bb
simple-payments: move globals as PaypalExpressCheckout properties
retrofox Jul 24, 2017
40c4a34
simple-payments: coding improvementes.
retrofox Jul 24, 2017
67a6324
simple-payments: minor code improvements
retrofox Jul 24, 2017
276a855
rebase: squash -> "simple-payments: move globals as PaypalExpressChec…
retrofox Jul 24, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 23 additions & 12 deletions modules/simple-payments/paypal-express-checkout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,34 @@
/* exported PaypalExpressCheckout */
/* jshint unused:false, es3:false, esversion:5 */
var PaypalExpressCheckout = {
primaryCssClassName: 'jetpack-simple-payments',
messageCssClassName: 'jetpack-simple-payments-purchase-message',

wpRestAPIHost: 'https://public-api.wordpress.com',
wpRestAPIVersion: '/wpcom/v2',

sandbox: true,
$purchaseMessageContainer: null,

getCreatePaymentEndpoint: function( blogId ) {
return 'https://public-api.wordpress.com/wpcom/v2/sites/' + blogId + '/simple-payments/paypal/payment';
return PaypalExpressCheckout.wpRestAPIHost + PaypalExpressCheckout.wpRestAPIVersion + '/sites/' + blogId + '/simple-payments/paypal/payment';
},

getExecutePaymentEndpoint: function( blogId, paymentId ) {
return 'https://public-api.wordpress.com/wpcom/v2/sites/' + blogId + '/simple-payments/paypal/' + paymentId + '/execute';
return PaypalExpressCheckout.wpRestAPIHost + PaypalExpressCheckout.wpRestAPIVersion + '/sites/' + blogId + '/simple-payments/paypal/' + paymentId + '/execute';
},

getNumberOfItems: function( field, enableMultiple ) {
var numberField, number;
if ( enableMultiple !== '1' ) {
return 1;
}
numberField = document.getElementById( field );

var numberField = document.getElementById( field );

if ( ! numberField ) {
return 1;
}
number = Number( numberField.value );

var number = Number( numberField.value );

if ( isNaN( number ) ) {
return 1;
Expand All @@ -42,7 +51,7 @@ var PaypalExpressCheckout = {
* @param string buttonDomId id of the payment button placeholder
* @return Element the dom element to print the message
*/
getMessageElement: function ( buttonDomId ) {
getMessageElement: function( buttonDomId ) {
var messageDomId = buttonDomId + '_message';

// DOM Elements
Expand Down Expand Up @@ -76,7 +85,7 @@ var PaypalExpressCheckout = {
var domEl = PaypalExpressCheckout.getMessageElement( buttonDomId );

// set css classes
var cssClasses = 'jetpack-simple-payments__purchase-message show ';
var cssClasses = PaypalExpressCheckout.messageCssClassName + ' show ';
cssClasses += isError ? 'error' : 'success';

// show message 1s after Paypal popup is closed
Expand All @@ -100,7 +109,7 @@ var PaypalExpressCheckout = {

if ( error.additional_errors ) {
var messages = [];
error.additional_errors.forEach( function( error ) {
error.additional_errors.forEach( function() {
if ( error.message ) {
messages.push( '<p>' + error.message.toString() + '</p>' );
}
Expand All @@ -113,7 +122,7 @@ var PaypalExpressCheckout = {

cleanAndHideMessage: function( buttonDomId ) {
var domEl = PaypalExpressCheckout.getMessageElement( buttonDomId );
domEl.setAttribute( 'class', 'jetpack-simple-payments__purchase-message' );
domEl.setAttribute( 'class', PaypalExpressCheckout.messageCssClassName );
domEl.innerHTML = '';
},

Expand All @@ -128,10 +137,13 @@ var PaypalExpressCheckout = {
paypal.Button.render( {
env: env,
commit: true,

style: {
label: 'pay',
color: 'blue'
shape: 'rect',
color: 'silver'
},

payment: function() {
PaypalExpressCheckout.cleanAndHideMessage( buttonDomId );

Expand Down Expand Up @@ -172,7 +184,6 @@ var PaypalExpressCheckout = {
} );
} );
}

}, buttonDomId );
}
};
52 changes: 44 additions & 8 deletions modules/simple-payments/simple-payments.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,57 @@
body .jetpack-simple-payments__wrapper div.jetpack-simple-payments__purchase-message {

.jetpack-simple-payments-wrapper {
margin: 0.5em 0;
}

.jetpack-simple-payments-title {
font-weight: bold;
display: block;
margin-bottom: 0.3em;
}

.jetpack-simple-payments-payment-row {
margin-top: 0.3em;
}

.jetpack-simple-payments-price {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could use flexbox (like we do in Calypso Editor previews) or at least clear the floats in the parent div.

font-weight: bold;
display: inline-block;
float: left;
margin-right: 15px;
}

.jetpack-simple-payments-items {
display:inline-block;
margin-right: 15px;
}

.jetpack-simple-payments-items input {
width: 30px;
}

.jetpack-simple-payments-button {
display: inline-block;
float: left;
}

.jetpack-simple-payments-purchase-message {
display: none;
padding: 1em;
}

body .jetpack-simple-payments__wrapper div.jetpack-simple-payments__purchase-message,
body .jetpack-simple-payments__wrapper div.jetpack-simple-payments__purchase-message a {
/* stronger rule in order to set the text color */
body .jetpack-simple-payments-wrapper p.jetpack-simple-payments-purchase-message {
color: #fff;
padding: 1em;
}

body .jetpack-simple-payments__wrapper div.jetpack-simple-payments__purchase-message.show {
.jetpack-simple-payments-purchase-message.show {
display: block;
}

body .jetpack-simple-payments__wrapper div.jetpack-simple-payments__purchase-message.success {
.jetpack-simple-payments-purchase-message.success {
background-color: #4ab866;
}

body .jetpack-simple-payments__wrapper div.jetpack-simple-payments__purchase-message.error {
.jetpack-simple-payments-purchase-message.error {
background-color: #d94f4f;
}
}
45 changes: 25 additions & 20 deletions modules/simple-payments/simple-payments.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ class Jetpack_Simple_Payments {

static $shortcode = 'simple-payment';

static $css_classname_prefix = 'jetpack-simple-payments';

// Classic singleton pattern:
private static $instance;
private function __construct() {}
Expand Down Expand Up @@ -61,13 +63,13 @@ function parse_shortcode( $attrs, $content = false ) {

// We allow for overriding the presentation labels
$data = shortcode_atts( array(
'blog_id' => Jetpack_Options::get_option( 'id' ),
'dom_id' => uniqid( 'jetpack-simple-payments-' . $product->ID . '_', true ),
'class' => 'jetpack-simple-payments-' . $product->ID,
'title' => get_the_title( $product ),
'blog_id' => Jetpack_Options::get_option( 'id' ),
'dom_id' => uniqid( self::$css_classname_prefix . '-' . $product->ID . '_', true ),
'class' => self::$css_classname_prefix . '-' . $product->ID,
'title' => get_the_title( $product ),
'description' => $product->post_content,
'cta' => get_post_meta( $product->ID, 'spay_cta', true ),
'multiple' => get_post_meta( $product->ID, 'spay_multiple', true ) || '0'
'cta' => get_post_meta( $product->ID, 'spay_cta', true ),
'multiple' => get_post_meta( $product->ID, 'spay_multiple', true ) || '0'
), $attrs );
$data['price'] = $this->format_price(
get_post_meta( $product->ID, 'spay_price', true ),
Expand All @@ -86,23 +88,26 @@ function parse_shortcode( $attrs, $content = false ) {

function output_shortcode( $data ) {
$items = '';
$cssPrefix = self::$css_classname_prefix;

if ( $data['multiple'] ) {
$items="<div class='jetpack-simple-payments-items'>
<input class='jetpack-simple-payments-items-number' type='number' min='1' value='1' id='{$data['dom_id']}_number'>
</div>";
$items="<div class='${cssPrefix}-items'>
<input class='${cssPrefix}-items-number' type='number' value='1' id='{$data['dom_id']}_number' />
</div>";
}
$output = "
<div class='{$data[ 'class' ]} jetpack-simple-payments__wrapper'>
<p class='jetpack-simple-payments__purchase-message'>
</p>
<div class='jetpack-simple-payments__title'>{$data['title']}</div>
<div class='jetpack-simple-payments__description'>{$data['description']}</div>
<div class='jetpack-simple-payments__price'>{$data['price']}</div>
{$items}
<div class='jetpack-simple-payments__button' id='{$data['dom_id']}_button'></div>

return "
<div class='{$data['class']} ${cssPrefix}-wrapper'>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think adding the class name prefix as a variable is not very helpful. It's harder to read the styling then and I've never seen class naming in a variable. :) We are also not going to change the class name prefix I think -- why would we?

<p class='${cssPrefix}-purchase-message'></p>
<div class='${cssPrefix}-title'><p>{$data['title']}</p></div>
<div class='${cssPrefix}-description'><p>{$data['description']}</p></div>
<div class='${cssPrefix}-purchase-box'>
<div class='${cssPrefix}-price'><p>{$data['price']}</p></div>
{$items}
<div class='${cssPrefix}-button' id='{$data['dom_id']}_button'></div>
</div>
</div>
";
return $output;
";
}

function format_price( $price, $currency, $all_data ) {
Expand Down