Add upstream
This commit is contained in:
root
@@ -0,0 +1,16 @@
|
||||
<div class='jetpack-simple-payments-disabled-error'>
|
||||
<p>
|
||||
<?php
|
||||
$support_url = ( defined( 'IS_WPCOM' ) && IS_WPCOM )
|
||||
? 'https://support.wordpress.com/simple-payments/'
|
||||
: 'https://jetpack.com/support/simple-payment-button/';
|
||||
printf(
|
||||
wp_kses(
|
||||
__( 'Your plan doesn\'t include Simple Payments. <a href="%s" rel="noopener noreferrer" target="_blank">Learn more and upgrade</a>.', 'jetpack' ),
|
||||
array( 'a' => array( 'href' => array(), 'rel' => array(), 'target' => array() ) )
|
||||
),
|
||||
esc_url( $support_url )
|
||||
);
|
||||
?>
|
||||
</p>
|
||||
</div>
|
||||
@@ -0,0 +1,80 @@
|
||||
.widget-content .jetpack-simple-payments,
|
||||
.widget-content .jetpack-simple-payments-form {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.widget-content .jetpack-simple-payments-disabled-error {
|
||||
background: #fff;
|
||||
border-left: 4px solid #dc3232;
|
||||
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
|
||||
margin: 5px 0 15px;
|
||||
padding: 1px 12px;
|
||||
}
|
||||
|
||||
.widget-content .jetpack-simple-payments-form .invalid {
|
||||
border: 1px solid #dc3232;
|
||||
}
|
||||
|
||||
.widget-content .jetpack-simple-payments-form .cost label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.widget-content .jetpack-simple-payments-image-fieldset {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.widget-content .jetpack-simple-payments-image-fieldset .placeholder {
|
||||
border: 1px dashed #b4b9be;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
line-height: 20px;
|
||||
padding: 9px 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin: 4px 0 1em;
|
||||
}
|
||||
|
||||
.widget-content .jetpack-simple-payments-image {
|
||||
max-width: 100%;
|
||||
margin-top: 4px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.widget-content .jetpack-simple-payments-image img {
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 1px dashed #b4b9be;
|
||||
padding: 4px;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.widget-content .jetpack-simple-payments-image img:hover {
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.widget-content .jetpack-simple-payments-form .field-currency {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.widget-content .jetpack-simple-payments-form .field-price {
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
width: 58%;
|
||||
}
|
||||
|
||||
.widget-content .jetpack-simple-payments-form .alignleft button,
|
||||
.widget-content .jetpack-simple-payments-form .alignright span {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.widget-content .button-link:disabled,
|
||||
.widget-content .button-link:hover[disabled] {
|
||||
color: #a0a5aa;
|
||||
}
|
||||
@@ -0,0 +1,455 @@
|
||||
/* global jQuery, jpSimplePaymentsStrings, confirm, _ */
|
||||
/* eslint no-var: 0, quote-props: 0 */
|
||||
|
||||
( function( api, wp, $ ) {
|
||||
var $document = $( document );
|
||||
|
||||
$document.ready( function() {
|
||||
$document.on( 'widget-added', function( event, widgetContainer ) {
|
||||
if ( widgetContainer.is( '[id*="jetpack_simple_payments_widget"]' ) ) {
|
||||
initWidget( widgetContainer );
|
||||
}
|
||||
} );
|
||||
|
||||
$document.on( 'widget-synced widget-updated', function( event, widgetContainer ) {
|
||||
//this fires for all widgets, this prevent errors for non SP widgets
|
||||
if ( ! widgetContainer.is( '[id*="jetpack_simple_payments_widget"]' ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
syncProductLists();
|
||||
|
||||
var widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' );
|
||||
|
||||
enableFormActions( widgetForm );
|
||||
|
||||
updateProductImage( widgetForm );
|
||||
} );
|
||||
} );
|
||||
|
||||
function initWidget( widgetContainer ) {
|
||||
var widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' );
|
||||
|
||||
//Add New Button
|
||||
widgetForm
|
||||
.find( '.jetpack-simple-payments-add-product' )
|
||||
.on( 'click', showAddNewForm( widgetForm ) );
|
||||
//Edit Button
|
||||
widgetForm
|
||||
.find( '.jetpack-simple-payments-edit-product' )
|
||||
.on( 'click', showEditForm( widgetForm ) );
|
||||
//Select an Image
|
||||
widgetForm
|
||||
.find(
|
||||
'.jetpack-simple-payments-image-fieldset .placeholder, .jetpack-simple-payments-image > img'
|
||||
)
|
||||
.on( 'click', selectImage( widgetForm ) );
|
||||
//Remove Image Button
|
||||
widgetForm
|
||||
.find( '.jetpack-simple-payments-remove-image' )
|
||||
.on( 'click', removeImage( widgetForm ) );
|
||||
//Save Product button
|
||||
widgetForm
|
||||
.find( '.jetpack-simple-payments-save-product' )
|
||||
.on( 'click', saveChanges( widgetForm ) );
|
||||
//Cancel Button
|
||||
widgetForm
|
||||
.find( '.jetpack-simple-payments-cancel-form' )
|
||||
.on( 'click', clearForm( widgetForm ) );
|
||||
//Delete Selected Product
|
||||
widgetForm
|
||||
.find( '.jetpack-simple-payments-delete-product' )
|
||||
.on( 'click', deleteProduct( widgetForm ) );
|
||||
//Input, Select and Checkbox change
|
||||
widgetForm.find( 'select, input, textarea, checkbox' ).on(
|
||||
'change input propertychange',
|
||||
_.debounce( function() {
|
||||
disableFormActions( widgetForm );
|
||||
}, 250 )
|
||||
);
|
||||
}
|
||||
|
||||
function syncProductLists() {
|
||||
var request = wp.ajax.post( 'customize-jetpack-simple-payments-buttons-get', {
|
||||
'customize-jetpack-simple-payments-nonce':
|
||||
api.settings.nonce[ 'customize-jetpack-simple-payments' ],
|
||||
customize_changeset_uuid: api.settings.changeset.uuid,
|
||||
} );
|
||||
|
||||
request.done( function( data ) {
|
||||
var selectedProduct = 0;
|
||||
|
||||
$( document )
|
||||
.find( 'select.jetpack-simple-payments-products' )
|
||||
.each( function( index, select ) {
|
||||
var $select = $( select );
|
||||
selectedProduct = $select.val();
|
||||
|
||||
$select.find( 'option' ).remove();
|
||||
$select.append(
|
||||
$.map( data, function( product ) {
|
||||
return $( '<option>', { value: product.ID, text: product.post_title } );
|
||||
} )
|
||||
);
|
||||
$select.val( selectedProduct );
|
||||
} );
|
||||
} );
|
||||
}
|
||||
|
||||
function showForm( widgetForm ) {
|
||||
//reset validations
|
||||
widgetForm.find( '.invalid' ).removeClass( 'invalid' );
|
||||
//disable widget title and product selector
|
||||
widgetForm
|
||||
.find( '.jetpack-simple-payments-widget-title' )
|
||||
.add( '.jetpack-simple-payments-products' )
|
||||
//disable add and edit buttons
|
||||
.add( '.jetpack-simple-payments-add-product' )
|
||||
.add( '.jetpack-simple-payments-edit-product' )
|
||||
//disable save, delete and cancel until the widget update event is fired
|
||||
.add( '.jetpack-simple-payments-save-product' )
|
||||
.add( '.jetpack-simple-payments-cancel-form' )
|
||||
.add( '.jetpack-simple-payments-delete-product' )
|
||||
.attr( 'disabled', 'disabled' );
|
||||
//show form
|
||||
widgetForm.find( '.jetpack-simple-payments-form' ).show();
|
||||
}
|
||||
|
||||
function hideForm( widgetForm ) {
|
||||
//enable widget title and product selector
|
||||
widgetForm
|
||||
.find( '.jetpack-simple-payments-widget-title' )
|
||||
.add( '.jetpack-simple-payments-products' )
|
||||
.removeAttr( 'disabled' );
|
||||
//hide the form
|
||||
widgetForm.find( '.jetpack-simple-payments-form' ).hide();
|
||||
}
|
||||
|
||||
function changeFormAction( widgetForm, action ) {
|
||||
widgetForm
|
||||
.find( '.jetpack-simple-payments-form-action' )
|
||||
.val( action )
|
||||
.change();
|
||||
}
|
||||
|
||||
function showAddNewForm( widgetForm ) {
|
||||
return function( event ) {
|
||||
event.preventDefault();
|
||||
|
||||
showForm( widgetForm );
|
||||
changeFormAction( widgetForm, 'add' );
|
||||
};
|
||||
}
|
||||
|
||||
function showEditForm( widgetForm ) {
|
||||
return function( event ) {
|
||||
event.preventDefault();
|
||||
|
||||
showForm( widgetForm );
|
||||
changeFormAction( widgetForm, 'edit' );
|
||||
};
|
||||
}
|
||||
|
||||
function clearForm( widgetForm ) {
|
||||
return function( event ) {
|
||||
event.preventDefault();
|
||||
|
||||
hideForm( widgetForm );
|
||||
widgetForm
|
||||
.find( '.jetpack-simple-payments-add-product, .jetpack-simple-payments-edit-product' )
|
||||
.attr( 'disabled', 'disabled' );
|
||||
changeFormAction( widgetForm, 'clear' );
|
||||
};
|
||||
}
|
||||
|
||||
function enableFormActions( widgetForm ) {
|
||||
var isFormVisible = widgetForm.find( '.jetpack-simple-payments-form' ).is( ':visible' );
|
||||
var isProductSelectVisible = widgetForm
|
||||
.find( '.jetpack-simple-payments-products' )
|
||||
.is( ':visible' ); //areProductsVisible ?
|
||||
var isEdit = widgetForm.find( '.jetpack-simple-payments-form-action' ).val() === 'edit';
|
||||
|
||||
if ( isFormVisible ) {
|
||||
widgetForm
|
||||
.find( '.jetpack-simple-payments-save-product' )
|
||||
.add( '.jetpack-simple-payments-cancel-form' )
|
||||
.removeAttr( 'disabled' );
|
||||
} else {
|
||||
widgetForm.find( '.jetpack-simple-payments-add-product' ).removeAttr( 'disabled' );
|
||||
}
|
||||
|
||||
if ( isFormVisible && isEdit ) {
|
||||
widgetForm.find( '.jetpack-simple-payments-delete-product' ).removeAttr( 'disabled' );
|
||||
}
|
||||
|
||||
if ( isProductSelectVisible && ! isFormVisible ) {
|
||||
widgetForm.find( '.jetpack-simple-payments-edit-product' ).removeAttr( 'disabled' );
|
||||
}
|
||||
}
|
||||
|
||||
function disableFormActions( widgetForm ) {
|
||||
widgetForm
|
||||
.find( '.jetpack-simple-payments-add-product' )
|
||||
.add( '.jetpack-simple-payments-edit-product' )
|
||||
.add( '.jetpack-simple-payments-save-product' )
|
||||
.add( '.jetpack-simple-payments-cancel-form' )
|
||||
.add( '.jetpack-simple-payments-delete-product' )
|
||||
.attr( 'disabled', 'disabled' );
|
||||
}
|
||||
|
||||
function selectImage( widgetForm ) {
|
||||
return function( event ) {
|
||||
event.preventDefault();
|
||||
|
||||
var imageContainer = widgetForm.find( '.jetpack-simple-payments-image' );
|
||||
|
||||
var mediaFrame = new wp.media.view.MediaFrame.Select( {
|
||||
title: 'Choose Product Image',
|
||||
multiple: false,
|
||||
library: { type: 'image' },
|
||||
button: { text: 'Choose Image' },
|
||||
} );
|
||||
|
||||
mediaFrame.on( 'select', function() {
|
||||
var selection = mediaFrame
|
||||
.state()
|
||||
.get( 'selection' )
|
||||
.first()
|
||||
.toJSON();
|
||||
//hide placeholder
|
||||
widgetForm.find( '.jetpack-simple-payments-image-fieldset .placeholder' ).hide();
|
||||
|
||||
//load image from media library
|
||||
imageContainer
|
||||
.find( 'img' )
|
||||
.attr( 'src', selection.url )
|
||||
.show();
|
||||
|
||||
//show image and remove button
|
||||
widgetForm.find( '.jetpack-simple-payments-image' ).show();
|
||||
|
||||
//set hidden field for the selective refresh
|
||||
widgetForm
|
||||
.find( '.jetpack-simple-payments-form-image-id' )
|
||||
.val( selection.id )
|
||||
.change();
|
||||
} );
|
||||
|
||||
mediaFrame.open();
|
||||
};
|
||||
}
|
||||
|
||||
function removeImage( widgetForm ) {
|
||||
return function( event ) {
|
||||
event.preventDefault();
|
||||
|
||||
//show placeholder
|
||||
widgetForm.find( '.jetpack-simple-payments-image-fieldset .placeholder' ).show();
|
||||
|
||||
//hide image and remove button
|
||||
widgetForm.find( '.jetpack-simple-payments-image' ).hide();
|
||||
|
||||
//set hidden field for the selective refresh
|
||||
widgetForm
|
||||
.find( '.jetpack-simple-payments-form-image-id' )
|
||||
.val( '' )
|
||||
.change();
|
||||
};
|
||||
}
|
||||
|
||||
function updateProductImage( widgetForm ) {
|
||||
var newImageId = parseInt(
|
||||
widgetForm.find( '.jetpack-simple-payments-form-image-id' ).val(),
|
||||
10
|
||||
);
|
||||
var newImageSrc = widgetForm.find( '.jetpack-simple-payments-form-image-src' ).val();
|
||||
|
||||
var placeholder = widgetForm.find( '.jetpack-simple-payments-image-fieldset .placeholder' );
|
||||
var image = widgetForm.find( '.jetpack-simple-payments-image > img' );
|
||||
var imageControls = widgetForm.find( '.jetpack-simple-payments-image' );
|
||||
|
||||
if ( newImageId && newImageSrc ) {
|
||||
image.attr( 'src', newImageSrc );
|
||||
placeholder.hide();
|
||||
imageControls.show();
|
||||
} else {
|
||||
placeholder.show();
|
||||
image.removeAttr( 'src' );
|
||||
imageControls.hide();
|
||||
}
|
||||
}
|
||||
|
||||
function decimalPlaces( number ) {
|
||||
var parts = number.split( '.' );
|
||||
if ( parts.length > 2 ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return parts[ 1 ] ? parts[ 1 ].length : 0;
|
||||
}
|
||||
|
||||
function isFormValid( widgetForm ) {
|
||||
widgetForm.find( '.invalid' ).removeClass( 'invalid' );
|
||||
|
||||
var errors = false;
|
||||
|
||||
var postTitle = widgetForm.find( '.jetpack-simple-payments-form-product-title' ).val();
|
||||
if ( ! postTitle ) {
|
||||
widgetForm.find( '.jetpack-simple-payments-form-product-title' ).addClass( 'invalid' );
|
||||
errors = true;
|
||||
}
|
||||
|
||||
var productPrice = widgetForm.find( '.jetpack-simple-payments-form-product-price' ).val();
|
||||
if ( ! productPrice || isNaN( productPrice ) || parseFloat( productPrice ) <= 0 ) {
|
||||
widgetForm.find( '.jetpack-simple-payments-form-product-price' ).addClass( 'invalid' );
|
||||
errors = true;
|
||||
}
|
||||
|
||||
// Japan's Yen is the only supported currency with a zero decimal precision.
|
||||
var precision =
|
||||
widgetForm.find( '.jetpack-simple-payments-form-product-currency' ).val() === 'JPY' ? 0 : 2;
|
||||
var priceDecimalPlaces = decimalPlaces( productPrice );
|
||||
if ( priceDecimalPlaces === null || priceDecimalPlaces > precision ) {
|
||||
widgetForm.find( '.jetpack-simple-payments-form-product-price' ).addClass( 'invalid' );
|
||||
errors = true;
|
||||
}
|
||||
|
||||
var productEmail = widgetForm.find( '.jetpack-simple-payments-form-product-email' ).val();
|
||||
var isProductEmailValid = /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i.test(
|
||||
productEmail
|
||||
);
|
||||
if ( ! productEmail || ! isProductEmailValid ) {
|
||||
widgetForm.find( '.jetpack-simple-payments-form-product-email' ).addClass( 'invalid' );
|
||||
errors = true;
|
||||
}
|
||||
|
||||
return ! errors;
|
||||
}
|
||||
|
||||
function saveChanges( widgetForm ) {
|
||||
return function( event ) {
|
||||
event.preventDefault();
|
||||
var productPostId = widgetForm.find( '.jetpack-simple-payments-form-product-id' ).val();
|
||||
|
||||
if ( ! isFormValid( widgetForm ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
disableFormActions( widgetForm );
|
||||
|
||||
widgetForm.find( '.spinner' ).show();
|
||||
|
||||
var request = wp.ajax.post( 'customize-jetpack-simple-payments-button-save', {
|
||||
'customize-jetpack-simple-payments-nonce':
|
||||
api.settings.nonce[ 'customize-jetpack-simple-payments' ],
|
||||
customize_changeset_uuid: api.settings.changeset.uuid,
|
||||
params: {
|
||||
product_post_id: productPostId,
|
||||
post_title: widgetForm.find( '.jetpack-simple-payments-form-product-title' ).val(),
|
||||
post_content: widgetForm
|
||||
.find( '.jetpack-simple-payments-form-product-description' )
|
||||
.val(),
|
||||
image_id: widgetForm.find( '.jetpack-simple-payments-form-image-id' ).val(),
|
||||
currency: widgetForm.find( '.jetpack-simple-payments-form-product-currency' ).val(),
|
||||
price: widgetForm.find( '.jetpack-simple-payments-form-product-price' ).val(),
|
||||
multiple: widgetForm
|
||||
.find( '.jetpack-simple-payments-form-product-multiple' )
|
||||
.is( ':checked' )
|
||||
? 1
|
||||
: 0,
|
||||
email: widgetForm.find( '.jetpack-simple-payments-form-product-email' ).val(),
|
||||
},
|
||||
} );
|
||||
|
||||
request.done( function( data ) {
|
||||
var select = widgetForm.find( 'select.jetpack-simple-payments-products' );
|
||||
var productOption = select.find( 'option[value="' + productPostId + '"]' );
|
||||
|
||||
if ( productOption.length > 0 ) {
|
||||
productOption.text( data.product_post_title );
|
||||
} else {
|
||||
select.append(
|
||||
$( '<option>', {
|
||||
value: data.product_post_id,
|
||||
text: data.product_post_title,
|
||||
} )
|
||||
);
|
||||
select.val( data.product_post_id ).change();
|
||||
}
|
||||
|
||||
widgetForm.find( '.jetpack-simple-payments-products-fieldset' ).show();
|
||||
widgetForm.find( '.jetpack-simple-payments-products-warning' ).hide();
|
||||
|
||||
changeFormAction( widgetForm, 'clear' );
|
||||
hideForm( widgetForm );
|
||||
} );
|
||||
|
||||
request.fail( function( data ) {
|
||||
var validCodes = {
|
||||
post_title: 'product-title',
|
||||
price: 'product-price',
|
||||
email: 'product-email',
|
||||
};
|
||||
|
||||
data.forEach( function( item ) {
|
||||
if ( validCodes.hasOwnProperty( item.code ) ) {
|
||||
widgetForm
|
||||
.find( '.jetpack-simple-payments-form-' + validCodes[ item.code ] )
|
||||
.addClass( 'invalid' );
|
||||
}
|
||||
} );
|
||||
|
||||
enableFormActions( widgetForm );
|
||||
} );
|
||||
};
|
||||
}
|
||||
|
||||
function deleteProduct( widgetForm ) {
|
||||
return function( event ) {
|
||||
event.preventDefault();
|
||||
|
||||
if ( ! confirm( jpSimplePaymentsStrings.deleteConfirmation ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
var formProductId = parseInt(
|
||||
widgetForm.find( '.jetpack-simple-payments-form-product-id' ).val(),
|
||||
10
|
||||
);
|
||||
if ( ! formProductId ) {
|
||||
return;
|
||||
}
|
||||
|
||||
disableFormActions( widgetForm );
|
||||
|
||||
widgetForm.find( '.spinner' ).show();
|
||||
|
||||
var request = wp.ajax.post( 'customize-jetpack-simple-payments-button-delete', {
|
||||
'customize-jetpack-simple-payments-nonce':
|
||||
api.settings.nonce[ 'customize-jetpack-simple-payments' ],
|
||||
customize_changeset_uuid: api.settings.changeset.uuid,
|
||||
params: {
|
||||
product_post_id: formProductId,
|
||||
},
|
||||
} );
|
||||
|
||||
request.done( function() {
|
||||
var productList = widgetForm.find( 'select.jetpack-simple-payments-products' )[ 0 ];
|
||||
productList.remove( productList.selectedIndex );
|
||||
productList.dispatchEvent( new Event( 'change' ) );
|
||||
|
||||
if ( $( productList ).has( 'option' ).length === 0 ) {
|
||||
//hide products select and label
|
||||
widgetForm.find( '.jetpack-simple-payments-products-fieldset' ).hide();
|
||||
//show empty products list warning
|
||||
widgetForm.find( '.jetpack-simple-payments-products-warning' ).show();
|
||||
}
|
||||
|
||||
changeFormAction( widgetForm, 'clear' );
|
||||
hideForm( widgetForm );
|
||||
} );
|
||||
};
|
||||
}
|
||||
} )( wp.customize, wp, jQuery );
|
||||
@@ -0,0 +1,205 @@
|
||||
<?php
|
||||
/**
|
||||
* Display the Simple Payments Form.
|
||||
*
|
||||
* @package Jetpack
|
||||
*/
|
||||
|
||||
?>
|
||||
<p>
|
||||
<label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>">
|
||||
<?php esc_html_e( 'Widget Title', 'jetpack' ); ?>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="widefat jetpack-simple-payments-widget-title"
|
||||
id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"
|
||||
name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>"
|
||||
value="<?php echo esc_attr( $instance['title'] ); ?>" />
|
||||
</p>
|
||||
<p class="jetpack-simple-payments-products-fieldset" <?php if ( empty( $product_posts ) ) { echo 'style="display:none;"'; } ?>>
|
||||
<label for="<?php echo esc_attr( $this->get_field_id( 'product_post_id' ) ); ?>">
|
||||
<?php esc_html_e( 'Select a Simple Payments Button:', 'jetpack' ); ?>
|
||||
</label>
|
||||
<select
|
||||
class="widefat jetpack-simple-payments-products"
|
||||
id="<?php echo esc_attr( $this->get_field_id( 'product_post_id' ) ); ?>"
|
||||
name="<?php echo esc_attr( $this->get_field_name( 'product_post_id' ) ); ?>">
|
||||
<?php foreach ( $product_posts as $product_post ) { ?>
|
||||
<option value="<?php echo esc_attr( $product_post->ID ); ?>" <?php selected( (int) $instance['product_post_id'], $product_post->ID ); ?>>
|
||||
<?php echo esc_attr( get_the_title( $product_post ) ); ?>
|
||||
</option>
|
||||
<?php } ?>
|
||||
</select>
|
||||
</p>
|
||||
<?php if ( is_customize_preview() ) { ?>
|
||||
<p class="jetpack-simple-payments-products-warning" <?php if ( ! empty( $product_posts ) ) { echo 'style="display:none;"'; } ?>>
|
||||
<?php esc_html_e( "Looks like you don't have any products. You can create one using the Add New button below.", 'jetpack' ); ?>
|
||||
</p>
|
||||
<p>
|
||||
<div class="alignleft">
|
||||
<button class="button jetpack-simple-payments-edit-product" <?php disabled( empty( $product_posts ), true ); ?>>
|
||||
<?php esc_html_e( 'Edit Selected', 'jetpack' ); ?>
|
||||
</button>
|
||||
</div>
|
||||
<div class="alignright">
|
||||
<button class="button jetpack-simple-payments-add-product"><?php esc_html_e( 'Add New', 'jetpack' ); ?></button>
|
||||
</div>
|
||||
<br class="clear">
|
||||
</p>
|
||||
<hr />
|
||||
<div class="jetpack-simple-payments-form" style="display: none;">
|
||||
<input
|
||||
type="hidden"
|
||||
id="<?php echo esc_attr( $this->get_field_id( 'form_action' ) ); ?>"
|
||||
name="<?php echo esc_attr( $this->get_field_name( 'form_action' ) ); ?>"
|
||||
value="<?php echo esc_attr( $instance['form_action'] ); ?>"
|
||||
class="jetpack-simple-payments-form-action" />
|
||||
<input
|
||||
type="hidden"
|
||||
id="<?php echo esc_attr( $this->get_field_id( 'form_product_id' ) ); ?>"
|
||||
name="<?php echo esc_attr( $this->get_field_name( 'form_product_id' ) ); ?>"
|
||||
value="<?php echo esc_attr( $instance['form_product_id'] ); ?>"
|
||||
class="jetpack-simple-payments-form-product-id" />
|
||||
<input
|
||||
type="hidden"
|
||||
id="<?php echo esc_attr( $this->get_field_id( 'form_product_image_id' ) ); ?>"
|
||||
name="<?php echo esc_attr( $this->get_field_name( 'form_product_image_id' ) ); ?>"
|
||||
value="<?php echo esc_attr( $instance['form_product_image_id'] ); ?>"
|
||||
class="jetpack-simple-payments-form-image-id" />
|
||||
<input
|
||||
type="hidden"
|
||||
id="<?php echo esc_attr( $this->get_field_id( 'form_product_image_src' ) ); ?>"
|
||||
name="<?php echo esc_attr( $this->get_field_name( 'form_product_image_src' ) ); ?>"
|
||||
value="<?php echo esc_attr( $instance['form_product_image_src'] ); ?>"
|
||||
class="jetpack-simple-payments-form-image-src" />
|
||||
<p>
|
||||
<label for="<?php echo esc_attr( $this->get_field_id( 'form_product_title' ) ); ?>">
|
||||
<?php esc_html_e( 'What is this payment for?', 'jetpack' ); ?>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="widefat field-title jetpack-simple-payments-form-product-title"
|
||||
id="<?php echo esc_attr( $this->get_field_id( 'form_product_title' ) ); ?>"
|
||||
name="<?php echo esc_attr( $this->get_field_name( 'form_product_title' ) ); ?>"
|
||||
value="<?php echo esc_attr( $instance['form_product_title'] ); ?>" />
|
||||
<br />
|
||||
<small>
|
||||
<?php esc_html_e( 'For example: event tickets, charitable donations, training courses, coaching fees, etc.', 'jetpack' ); ?>
|
||||
</small>
|
||||
</p>
|
||||
<div class="jetpack-simple-payments-image-fieldset">
|
||||
<label><?php esc_html_e( 'Product image', 'jetpack' ); ?></label>
|
||||
<div class="placeholder" <?php if ( ! empty( $instance['form_product_image_id'] ) ) echo 'style="display:none;"'; ?>>
|
||||
<?php esc_html_e( 'Select an image', 'jetpack' ); ?>
|
||||
</div>
|
||||
<div class="jetpack-simple-payments-image" <?php if ( empty( $instance['form_product_image_id'] ) ) echo 'style="display:none;"'; ?>>
|
||||
<img src="<?php echo esc_url( $instance['form_product_image_src'] ); ?>" />
|
||||
<button class="button jetpack-simple-payments-remove-image"><?php esc_html_e( 'Remove image', 'jetpack' ); ?></button>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
<label for="<?php echo esc_attr( $this->get_field_id( 'form_product_description' ) ); ?>">
|
||||
<?php esc_html_e( 'Description', 'jetpack' ); ?>
|
||||
</label>
|
||||
<textarea
|
||||
class="field-description widefat jetpack-simple-payments-form-product-description"
|
||||
rows=5
|
||||
id="<?php echo esc_attr( $this->get_field_id( 'form_product_description' ) ); ?>"
|
||||
name="<?php echo esc_attr( $this->get_field_name( 'form_product_description' ) ); ?>"><?php echo esc_textarea( $instance['form_product_description'] ); ?></textarea>
|
||||
</p>
|
||||
<p class="cost">
|
||||
<label for="<?php echo esc_attr( $this->get_field_id( 'form_product_price' ) ); ?>">
|
||||
<?php esc_html_e( 'Price', 'jetpack' ); ?>
|
||||
</label>
|
||||
<select
|
||||
class="field-currency widefat jetpack-simple-payments-form-product-currency"
|
||||
id="<?php echo esc_attr( $this->get_field_id( 'form_product_currency' ) ); ?>"
|
||||
name="<?php echo esc_attr( $this->get_field_name( 'form_product_currency' ) ); ?>">
|
||||
<?php foreach ( Jetpack_Simple_Payments_Widget::$supported_currency_list as $code => $currency ) { ?>
|
||||
<option value="<?php echo esc_attr( $code ); ?>"<?php selected( $instance['form_product_currency'], $code ); ?>>
|
||||
<?php echo esc_html( "$code $currency" ); ?>
|
||||
</option>
|
||||
<?php } ?>
|
||||
</select>
|
||||
<input
|
||||
type="text"
|
||||
class="field-price widefat jetpack-simple-payments-form-product-price"
|
||||
id="<?php echo esc_attr( $this->get_field_id( 'form_product_price' ) ); ?>"
|
||||
name="<?php echo esc_attr( $this->get_field_name( 'form_product_price' ) ); ?>"
|
||||
value="<?php echo esc_attr( $instance['form_product_price'] ); ?>"
|
||||
placeholder="1.00" />
|
||||
</p>
|
||||
<p>
|
||||
<input
|
||||
class="field-multiple jetpack-simple-payments-form-product-multiple"
|
||||
id="<?php echo esc_attr( $this->get_field_id( 'form_product_multiple' ) ); ?>"
|
||||
name="<?php echo esc_attr( $this->get_field_name( 'form_product_multiple' ) ); ?>"
|
||||
type="checkbox"
|
||||
value="1"
|
||||
<?php checked( $instance['form_product_multiple'], '1' ); ?> />
|
||||
<label for="<?php echo esc_attr( $this->get_field_id( 'form_product_multiple' ) ); ?>">
|
||||
<?php esc_html_e( 'Allow people to buy more than one item at a time.', 'jetpack' ); ?>
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label for="<?php echo esc_attr( $this->get_field_id( 'form_product_email' ) ); ?>">
|
||||
<?php esc_html_e( 'Email', 'jetpack' ); ?>
|
||||
</label>
|
||||
<input
|
||||
class="field-email widefat jetpack-simple-payments-form-product-email"
|
||||
id="<?php echo esc_attr( $this->get_field_id( 'form_product_email' ) ); ?>"
|
||||
name="<?php echo esc_attr( $this->get_field_name( 'form_product_email' ) ); ?>"
|
||||
type="email"
|
||||
value="<?php echo esc_attr( $instance['form_product_email'] ); ?>" />
|
||||
<small>
|
||||
<?php
|
||||
printf(
|
||||
wp_kses(
|
||||
/* Translators: placeholders are a link to Paypal website and a target attribute. */
|
||||
__( 'This is where PayPal will send your money. To claim a payment, you\'ll need a <a href="%1$s" %2$s>PayPal account</a> connected to a bank account.', 'jetpack' ),
|
||||
array(
|
||||
'a' => array(
|
||||
'href' => array(),
|
||||
'target' => array(),
|
||||
),
|
||||
)
|
||||
),
|
||||
'https://paypal.com',
|
||||
'target="_blank"'
|
||||
);
|
||||
?>
|
||||
</small>
|
||||
</p>
|
||||
<p>
|
||||
<div class="alignleft">
|
||||
<button type="button" class="button-link button-link-delete jetpack-simple-payments-delete-product">
|
||||
<?php esc_html_e( 'Delete Product', 'jetpack' ); ?>
|
||||
</button>
|
||||
</div>
|
||||
<div class="alignright">
|
||||
<button name="<?php echo esc_attr( $this->get_field_name( 'save' ) ); ?>" class="button jetpack-simple-payments-save-product"><?php esc_html_e( 'Save', 'jetpack' ); ?></button>
|
||||
<span> | <button type="button" class="button-link jetpack-simple-payments-cancel-form"><?php esc_html_e( 'Cancel', 'jetpack' ); ?></button></span>
|
||||
</div>
|
||||
<br class="clear">
|
||||
</p>
|
||||
<hr />
|
||||
</div>
|
||||
<?php } else { ?>
|
||||
<p class="jetpack-simple-payments-products-warning">
|
||||
<?php
|
||||
printf(
|
||||
wp_kses(
|
||||
/* Translators: placeholder is a link to the customizer. */
|
||||
__( 'This widget adds a payment button of your choice to your sidebar. To create or edit the payment buttons themselves, <a href="%s">use the Customizer</a>.', 'jetpack' ),
|
||||
array(
|
||||
'a' => array(
|
||||
'href' => array(),
|
||||
),
|
||||
)
|
||||
),
|
||||
esc_url( add_query_arg( array( 'autofocus[panel]' => 'widgets' ), admin_url( 'customize.php' ) ) )
|
||||
);
|
||||
?>
|
||||
</p>
|
||||
<?php } ?>
|
||||
@@ -0,0 +1,8 @@
|
||||
@media screen and (min-width: 400px) {
|
||||
.widget.jetpack-simple-payments .jetpack-simple-payments-product {
|
||||
flex-direction: column;
|
||||
}
|
||||
.widget.jetpack-simple-payments .jetpack-simple-payments-details {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
<?php
|
||||
/**
|
||||
* Display the Simple Payments Widget.
|
||||
*
|
||||
* @package Jetpack
|
||||
*/
|
||||
|
||||
?>
|
||||
<div class='jetpack-simple-payments-wrapper'>
|
||||
<div class='jetpack-simple-payments-product'>
|
||||
<div class='jetpack-simple-payments-product-image' <?php if ( empty( $instance['form_product_image_id'] ) ) echo 'style="display:none;"'; ?>>
|
||||
<div class='jetpack-simple-payments-image'>
|
||||
<?php echo wp_get_attachment_image( $instance['form_product_image_id'], 'full' ); ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class='jetpack-simple-payments-details'>
|
||||
<div class='jetpack-simple-payments-title'><p><?php echo esc_html( $instance['form_product_title'] ); ?></p></div>
|
||||
<div class='jetpack-simple-payments-description'><p><?php echo esc_html( $instance['form_product_description'] ); ?></p></div>
|
||||
<div class='jetpack-simple-payments-price'><p><?php echo esc_html( $instance['form_product_price'] ); ?> <?php echo esc_html( $instance['form_product_currency'] ); ?></p></div>
|
||||
<div class='jetpack-simple-payments-purchase-box'>
|
||||
<?php if ( $instance['form_product_multiple'] ) { ?>
|
||||
<div class='jetpack-simple-payments-items'>
|
||||
<input
|
||||
type='number'
|
||||
class='jetpack-simple-payments-items-number'
|
||||
value='1'
|
||||
min='1' />
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user