mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-08-31 06:52:50 +08:00
Merge pull request #2181 from woocommerce/PCP-3020-message-blocks-not-displaying-correctly-on-cart-and-checkout-on-slow-conections-when-loading-without-cache
Messages Bootstrap: Add a render retry functionality (3020)
This commit is contained in:
Emili Castells
GitHub
commit
15f20a65e5
4 changed files with 166 additions and 15 deletions
|
|
@ -12,7 +12,7 @@ namespace WooCommerce\PayPalCommerce\PayLaterWCBlocks;
|
|||
use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
|
||||
|
||||
return array(
|
||||
'paylater-wc-blocks.url' => static function ( ContainerInterface $container ): string {
|
||||
'paylater-wc-blocks.url' => static function ( ContainerInterface $container ): string {
|
||||
/**
|
||||
* Cannot return false for this path.
|
||||
*
|
||||
|
|
@ -24,7 +24,35 @@ return array(
|
|||
);
|
||||
},
|
||||
|
||||
'paylater-wc-blocks.renderer' => static function (): PayLaterWCBlocksRenderer {
|
||||
return new PayLaterWCBlocksRenderer();
|
||||
'paylater-wc-blocks.cart-renderer' => static function ( ContainerInterface $container ): PayLaterWCBlocksRenderer {
|
||||
$settings = $container->get( 'wcgateway.settings' );
|
||||
return new PayLaterWCBlocksRenderer(
|
||||
array(
|
||||
'placement' => 'cart',
|
||||
'layout' => $settings->has( 'pay_later_cart_message_layout' ) ? $settings->get( 'pay_later_cart_message_layout' ) : '',
|
||||
'position' => $settings->has( 'pay_later_cart_message_position' ) ? $settings->get( 'pay_later_cart_message_position' ) : '',
|
||||
'logo' => $settings->has( 'pay_later_cart_message_logo' ) ? $settings->get( 'pay_later_cart_message_logo' ) : '',
|
||||
'text_size' => $settings->has( 'pay_later_cart_message_text_size' ) ? $settings->get( 'pay_later_cart_message_text_size' ) : '',
|
||||
'color' => $settings->has( 'pay_later_cart_message_color' ) ? $settings->get( 'pay_later_cart_message_color' ) : '',
|
||||
'flex_color' => $settings->has( 'pay_later_cart_message_flex_color' ) ? $settings->get( 'pay_later_cart_message_flex_color' ) : '',
|
||||
'flex_ratio' => $settings->has( 'pay_later_cart_message_flex_ratio' ) ? $settings->get( 'pay_later_cart_message_flex_ratio' ) : '',
|
||||
)
|
||||
);
|
||||
},
|
||||
'paylater-wc-blocks.checkout-renderer' => static function ( ContainerInterface $container ): PayLaterWCBlocksRenderer {
|
||||
$settings = $container->get( 'wcgateway.settings' );
|
||||
return new PayLaterWCBlocksRenderer(
|
||||
array(
|
||||
'payment',
|
||||
'layout' => $settings->has( 'pay_later_checkout_message_layout' ) ? $settings->get( 'pay_later_checkout_message_layout' ) : '',
|
||||
'position' => $settings->has( 'pay_later_checkout_message_position' ) ? $settings->get( 'pay_later_checkout_message_position' ) : '',
|
||||
'logo' => $settings->has( 'pay_later_checkout_message_logo' ) ? $settings->get( 'pay_later_checkout_message_logo' ) : '',
|
||||
'text_size' => $settings->has( 'pay_later_checkout_message_text_size' ) ? $settings->get( 'pay_later_checkout_message_text_size' ) : '',
|
||||
'color' => $settings->has( 'pay_later_checkout_message_color' ) ? $settings->get( 'pay_later_checkout_message_color' ) : '',
|
||||
'flex_color' => $settings->has( 'pay_later_checkout_message_flex_color' ) ? $settings->get( 'pay_later_checkout_message_flex_color' ) : '',
|
||||
'flex_ratio' => $settings->has( 'pay_later_checkout_message_flex_ratio' ) ? $settings->get( 'pay_later_checkout_message_flex_ratio' ) : '',
|
||||
)
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -15,6 +15,70 @@ use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
|
|||
* Class PayLaterWCBlocksRenderer
|
||||
*/
|
||||
class PayLaterWCBlocksRenderer {
|
||||
/**
|
||||
* The placement.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
private $placement;
|
||||
/**
|
||||
* The layout.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
private $layout;
|
||||
/**
|
||||
* The position.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
private $position;
|
||||
/**
|
||||
* The logo.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
private $logo;
|
||||
/**
|
||||
* The text size.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
private $text_size;
|
||||
/**
|
||||
* The color.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
private $color;
|
||||
/**
|
||||
* The flex color.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
private $flex_color;
|
||||
/**
|
||||
* The flex ratio.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
private $flex_ratio;
|
||||
|
||||
/**
|
||||
* PayLaterWCBlocksRenderer constructor.
|
||||
*
|
||||
* @param array $config The configuration.
|
||||
*/
|
||||
public function __construct( array $config ) {
|
||||
$this->placement = $config['placement'] ?? '';
|
||||
$this->layout = $config['layout'] ?? 'text';
|
||||
$this->position = $config['position'] ?? '';
|
||||
$this->logo = $config['logo'] ?? '';
|
||||
$this->text_size = $config['text_size'] ?? '';
|
||||
$this->color = $config['color'] ?? '';
|
||||
$this->flex_color = $config['flex_color'] ?? '';
|
||||
$this->flex_ratio = $config['flex_ratio'] ?? '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the WC Pay Later Messaging blocks.
|
||||
|
|
@ -24,9 +88,44 @@ class PayLaterWCBlocksRenderer {
|
|||
* @param ContainerInterface $c The container.
|
||||
* @return string|void
|
||||
*/
|
||||
public function render( array $attributes, string $location, ContainerInterface $c ) {
|
||||
public function render(
|
||||
array $attributes,
|
||||
string $location,
|
||||
ContainerInterface $c
|
||||
) {
|
||||
if ( PayLaterWCBlocksModule::is_placement_enabled( $c->get( 'wcgateway.settings.status' ), $location ) ) {
|
||||
return '<div id="' . esc_attr( $attributes['ppcpId'] ?? '' ) . '" data-block-name="' . esc_attr( $attributes['blockId'] ?? '' ) . '" class="ppcp-messages" data-partner-attribution-id="Woo_PPCP"></div>';
|
||||
|
||||
$html = '<div id="' . esc_attr( $attributes['ppcpId'] ?? '' ) . '" class="ppcp-messages" data-partner-attribution-id="Woo_PPCP"></div>';
|
||||
|
||||
$processor = new \WP_HTML_Tag_Processor( $html );
|
||||
|
||||
if ( $processor->next_tag( 'div' ) ) {
|
||||
$processor->set_attribute( 'data-block-name', esc_attr( $attributes['blockId'] ?? '' ) );
|
||||
$processor->set_attribute( 'class', 'ppcp-messages' );
|
||||
$processor->set_attribute( 'data-partner-attribution-id', 'Woo_PPCP' );
|
||||
|
||||
if ( $this->layout === 'flex' ) {
|
||||
$processor->set_attribute( 'data-pp-style-layout', 'flex' );
|
||||
$processor->set_attribute( 'data-pp-style-color', esc_attr( $this->flex_color ) );
|
||||
$processor->set_attribute( 'data-pp-style-ratio', esc_attr( $this->flex_ratio ) );
|
||||
} else {
|
||||
$processor->set_attribute( 'data-pp-style-layout', 'text' );
|
||||
$processor->set_attribute( 'data-pp-style-logo-type', esc_attr( $this->logo ) );
|
||||
$processor->set_attribute( 'data-pp-style-logo-position', esc_attr( $this->position ) );
|
||||
$processor->set_attribute( 'data-pp-style-text-color', esc_attr( $this->color ) );
|
||||
$processor->set_attribute( 'data-pp-style-text-size', esc_attr( $this->text_size ) );
|
||||
}
|
||||
|
||||
$processor->set_attribute( 'data-pp-placement', esc_attr( $this->placement ) );
|
||||
}
|
||||
|
||||
$updated_html = $processor->get_updated_html();
|
||||
|
||||
return sprintf(
|
||||
'<div %1$s>%2$s</div>',
|
||||
wp_kses_data( get_block_wrapper_attributes() ),
|
||||
$updated_html
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ class PayLaterWCBlocksUtils {
|
|||
* @return false|string Rendered content.
|
||||
*/
|
||||
public static function render_paylater_block( string $block_id, string $ppcp_id, string $context, $container ) {
|
||||
$renderer = $container->get( 'paylater-wc-blocks.renderer' );
|
||||
$renderer = $container->get( 'paylater-wc-blocks.' . $context . '-renderer' );
|
||||
ob_start();
|
||||
// phpcs:ignore -- No need to escape it, the PayLaterWCBlocksRenderer class is responsible for escaping.
|
||||
echo $renderer->render(
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
