# A pénztár elrendezésének finomhangolása

> Értesítés a pénztáron, a rendelés leadása gomb áthelyezése, a fejléc hivatkozása, cikkszám a kosárban, a szállítási összeg és a kosár lépés elrejtése.

Ez a fejezet a pénztár kisebb, kóddal vagy CSS-sel elvégezhető módosításait gyűjti össze. A PHP-kódokat a **CheckoutWC → Haladó → Szkriptek** oldal **Globális** szakaszának **PHP kódrészletek** mezőjébe írd (nyitó `<?php` címke nélkül). A stíluslapokat a **CheckoutWC → Megjelenés → Dizájn** fül **Egyedi CSS** mezőjébe, a `<style>` és `<script>` blokkokat a **Fejléc szkriptek** mezőbe tedd.

![A Dizájn fül az Egyedi CSS mezővel](./kepek/megjelenes-dizajn.webp)

*A Dizájn fül az Egyedi CSS mezővel* (https://minta-bolt.hu/wp-admin/admin.php?page=cfw-settings-appearance&subpage=design)

A kép alján található az **Egyedi CSS** mező, amelybe a CSS-példák kerülnek. A módosítások a **Módosítások mentése** gombbal lépnek életbe.

## Különleges értesítés a pénztáron

Saját üzenetet a pénztár egy kiválasztott pontján egy művelettel (action) jeleníthetsz meg. Az alábbi példa az információs lépés elején, a bejelentkezési rész előtt ír ki egy tájékoztató dobozt:

```php
add_action(
	'cfw_before_customer_info_tab_login',
	function () {
		echo '<div class="woocommerce-info">Ide kerül az értesítés szövege.</div>';
	},
	10 // Prioritás
);
```

Más helyekre is rakhatod az üzenetet, ha a műveletet lecseréled:

| Művelet | Hova kerül az üzenet |
| --- | --- |
| `cfw_checkout_main_container_start` | A lépésjelző (breadcrumb) fölé, minden lépésen |
| `cfw_checkout_before_shipping_methods` | A szállítási módok listája fölé |
| `cfw_checkout_payment_method_tab` (9-es prioritással) | A fizetési módok fölé |

## A rendelés leadása gomb a kosár-összefoglaló alatt

Egyes országokban jogi előírás, hogy a rendelés leadása gomb az összesítés alatt legyen (Németországban például kötelező). A javasolt megoldás a **Rendelés áttekintő lépés** bekapcsolása, ennek beállítását a [További pénztárfunkciók](https://hub.hellowp.io/hu/plugins/checkout-for-woocommerce/tovabbi-funkciok/) fejezet írja le.

Ha ezt nem szeretnéd használni, a gombot kóddal és CSS-sel is áthelyezheted a kosár-összefoglaló oldalsávjának aljára. Ez a régebbi módszer a gombot nem veszi el az eredeti helyéről, ezért CSS-sel el kell rejteni.

1. Tedd a gombot az oldalsáv aljára a **PHP kódrészletek** mezőben:

   ```php
   add_action( 'cfw_after_cart_summary', 'cfw_place_order' );
   ```

2. Az eredeti gombot rejtsd el, és mutasd a másikat a fizetési lépésen. Az alábbi blokkot a **CheckoutWC → Haladó → Szkriptek** oldal **Fejléc szkriptek** mezőjébe másold. Asztali nézeten a gomb az oldalsávba kerül, mobilon is ott marad:

   ```html
   <style type="text/css">
   	.cfw-bottom-controls .place-order {
   		display: none;
   		float: right;
   	}

   	#cfw-cart-summary-content .place-order {
   		display: none;
   	}

   	.cfw-payment-method-active #cfw-cart-summary-content .place-order {
   		display: block;
   		z-index: 2;
   		position: relative;
   		margin-bottom: 2em;
   		text-align: center;
   	}

   	@media (max-width: 770px) {
   		.cfw-payment-method-active #cfw-cart-summary {
   			order: 3;
   		}

   		.cfw-bottom-controls .place-order {
   			display: none;
   		}
   	}
   </style>

   <!-- Nem kötelező: a gomb a rendelés fizetése oldalon is működjön -->
   <script type="text/javascript">
   jQuery(document).ready( function() {
   	jQuery('.cfw-order-pay #cfw-cart-summary-content .place-order').click( function() {
   		jQuery('.cfw-bottom-controls #place_order').click();
   	} );
   } );
   </script>
   ```

### Csak asztali nézeten az oldalsávban

Ha a gombot csak asztali nézeten szeretnéd az oldalsávban látni, mobilon pedig az eredeti helyén, ezt a CSS-t használd a fenti blokk helyett:

```html
<style type="text/css">
	.cfw-bottom-controls .place-order {
		display: none;
	}

	#cfw-cart-summary-content .place-order {
		display: none;
		float: right;
	}

	.cfw-payment-method-active #cfw-cart-summary-content .place-order {
		display: block;
		z-index: 2;
		position: relative;
	}

	@media (max-width: 770px) {
		.cfw-bottom-controls .place-order {
			display: block;
		}

		#cfw-cart-summary-content .place-order {
			display: none;
		}
	}
</style>
```

Mobilon érdemes mellé használni azt a beállítást is, amely a kosár-összefoglalót kinyitva tartja (lásd a [Mobil kosár-összefoglaló és kártyalogók](https://hub.hellowp.io/hu/plugins/checkout-for-woocommerce/beallitasok-mobil/) fejezetet).

A gomb középre igazításához töröld ki a `float: right;` sort a fenti példákból.

## A fejléc hivatkozásának átírása

A pénztár fejlécében a logóra kattintva alapból a webhely nyitóoldalára jutsz. A cél a `cfw_header_home_url` szűrővel változtatható:

```php
add_filter( 'cfw_header_home_url', function ( $home_url ) {
	$home_url = 'https://pelda.hu/bolt';

	return $home_url;
} );
```

## Cikkszám az oldalsó kosárban és a kosár-összefoglalóban

A termék cikkszáma (SKU) az oldalsó kosárban, a pénztár kosár-összefoglalójában és a rendelés-összefoglalóban is megjeleníthető. A kódot a **PHP kódrészletek** mezőbe másold:

```php
add_filter( 'cfw_side_cart_item_after_data', 'sajat_cikkszam_a_kosarban', 10, 3 );
add_filter( 'cfw_order_item_after_data', 'sajat_cikkszam_a_kosarban', 10, 3 );
add_filter( 'cfw_cart_item_after_data', 'sajat_cikkszam_a_kosarban', 10, 3 );

function sajat_cikkszam_a_kosarban( $raw_item, $item_key, $item ) {
	$product = $item->get_product();
	$sku     = $product->get_sku();

	if ( empty( $sku ) ) {
		return;
	}

	echo '<div class="cfw-small">';
	echo 'Cikkszám: ' . esc_html( $sku );
	echo '</div>';
}
```

A cikkszám a terméknév alatt, kisebb betűvel jelenik meg. Ha a terméknek nincs cikkszáma, semmi nem kerül a sorba.

## A szállítási összeg elrejtése az információs lépésen

Az információs lépésen a szállítási költség még nem ismert. Ha el akarod rejteni az összeget, és helyette például azt írnád ki, hogy „A következő lépésben kiszámoljuk”, tedd az alábbi CSS-t az **Egyedi CSS** mezőbe:

```css
.cfw-customer-info-active #cfw-cart-summary-totals .shipping td {
	font-size: 0;
}

.cfw-customer-info-active #cfw-cart-summary-totals .shipping td:after {
	content: "A következő lépésben számoljuk ki";
	font-size: 1rem;
}
```

A `content` sorban a saját szövegedet add meg.

## A kosár lépés elrejtése a lépésjelzőből

Ha nem akarod, hogy a lépésjelzőben (breadcrumb) a **Kosár** szerepeljen, rejtsd el egy CSS-sel. Az **Egyedi CSS** mezőbe írd:

```css
#cfw-breadcrumb .cart {
	display: none;
}
```