Checkout HTML page code not good

Resolved

(@filippopoggini)

On checkout page the HTML code is not good

load_data() function in the file ./Components/Checkout/class-block-checkout-handler.php to include location picker file, print a file bofore <!DOCTYPE html> declaration.


<button type="button" id="packlink-drop-off-picker" class="button" style="display: none;">
	Select Drop-Off Location</button>
<script> if (typeof Packlink !== "undefined") {
	Packlink.checkout.init();
}</script>
<input type="hidden" name="packlink_drop_off_id"/>
<input type="hidden" name="packlink_drop_off_extra"/>
<div id="packlink-js-templates">
	<div id="pl-picker-modal" style="display: none;">
		<location-picker>
			<div class="lp-content" data-lp-id="content">
				<div class="lp-locations">
					<div class="lp-input-wrapper">
						<div class="input">
							<input type="text" data-lp-id="search-box" required="required" title=""/>
							<span class="label" data-lp-id="search-box-label"></span>
						</div>
					</div>

					<div data-lp-id="locations"></div>
				</div>
			</div>
		</location-picker>

		<svg id="pl-picker-modal-close" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
			<g fill="none" fill-rule="evenodd">
				<path d="M7.5 7.5l8 7M15.5 7.5l-8 7" stroke="#627482" stroke-linecap="square"/>
			</g>
		</svg>
	</div>

	<location-picker-template>
		<div class="lp-template" id="template-container">
			<div data-lp-id="working-hours-template" class="lp-hour-wrapper">
				<div class="day" data-lp-id="day">
				</div>
				<div class="hours" data-lp-id="hours">
				</div>
			</div>

			<div class="lp-location-wrapper" data-lp-id="location-template">
				<div class="composite lp-expand">
					<div class="street-name uppercase" data-lp-id="composite-address"></div>
					<div class="lp-working-hours-btn excluded" data-lp-composite
						 data-lp-id="show-composite-working-hours-btn"></div>
					<div data-lp-id="composite-working-hours" class="lp-working-hours">

					</div>
					<div class="lp-select-column">
						<div class="lp-select-button excluded" data-lp-id="composite-select-btn"></div>
						<a class="excluded" href="#" data-lp-id="composite-show-on-map" target="_blank"></a>
					</div>
				</div>
				<div class="name uppercase lp-collapse" data-lp-id="location-name"></div>
				<div class="street lp-collapse">
					<div class="street-name uppercase" data-lp-id="location-street"></div>
					<div class="lp-working-hours-btn excluded" data-lp-id="show-working-hours-btn"></div>
					<div data-lp-id="working-hours" class="lp-working-hours">

					</div>
				</div>
				<div class="city uppercase lp-collapse" data-lp-id="location-city">
				</div>
				<div class="lp-select-column lp-collapse">
					<div class="lp-select-button excluded" data-lp-id="select-btn"></div>
				</div>
				<a class="excluded lp-collapse" href="#" data-lp-id="show-on-map" target="_blank">
					<div class="lp-show-on-map-btn excluded"></div>
				</a>
			</div>
		</div>
	</location-picker-template>
</div>
<input type="hidden" id="pl-block-checkout-initialize-endpoint"
	   value="https://shop.eniacom.com/?packlink_pro_controller=Checkout&action=initialize_block_checkout"/>
<input type="hidden" id="pl-block-checkout-save-selected"
	   value="https://shop.eniacom.com/?packlink_pro_controller=Checkout&action=save_selected"/>
<!DOCTYPE html>
<html lang="it-IT" prefix="og: https://ogp.me/ns#">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />

This topic was modified 1 month, 3 weeks ago by filippopoggini.

The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

Thread Starter

filippopoggini

(@filippopoggini)

1 month, 3 weeks ago

I try to fix it by this change:

file Components/Checkout/class-block-checkout-handler.php
replace load_data() and add render_block_checkout_drop_off_markup() function

public function load_data() {
		if ( ! is_checkout() || is_order_received_page() ) {
			return;
		}

		// Enqueue scripts and styles needed for the Blocks checkout experience.
		Script_Loader::load_js(
			array(
				'js/packlink-block-checkout.js',
				'js/offline-payments.js',
			),
			true
		);

		Script_Loader::load_css(
			array(
				'css/packlink-block-checkout.css',
				'css/packlink-location-picker.css',
			)
		);

		// Render the drop-off picker markup (templates/modal) on the page.
		// The Blocks checkout is rendered in JS/React, so we output the required HTML
		// in the footer and the JS integrates it into the checkout UI.
		add_action( 'wp_footer', array( $this, 'render_block_checkout_drop_off_markup' ), 20 );
	}

	/**
	 * Outputs the drop-off picker markup used by the Blocks checkout scripts.
	 *
	 * @return void
	 */
	public function render_block_checkout_drop_off_markup() {
		if ( ! is_checkout() || is_order_received_page() ) {
			return;
		}

		// Prefer to output only on the Blocks checkout page when possible.
		if ( function_exists( 'has_block' ) && ! has_block( 'woocommerce/checkout' ) ) {
			return;
		}

		include dirname( __DIR__ ) . '/../resources/views/block-checkout-shipping-method-drop-off.php';
	}