WooCommerce mint ajánlatkérő rendszer? Igen!

Cégünk úgy a hazai, mint a nemzetközi piacon szereplő vállalatoknak segítséget nyújt fejlesztés és marketing területén. Az elmúlt időszakban egy dán biotechnológiai cég számára készítettünk egy, a termékeinek értékesítését elősegítő ajánlatkérő rendszert. A projekt specifikálását követően úgy láttuk a legjobbnak, hogy (a későbbi online vásárlást lehetővé téve) egy WordPress alapú WooCommerce webáruházrendszer logikájára építjük fel azt.

A projekt egy teljesen egyedi, felhasználóbarát WordPress sablon fejlesztését követelte meg, alkalmazkodva ügyfelünk arculati elemeihez. A rendszer egyedi komponenseit is úgy alakítottuk ki, hogy a lehető legkevesebb adminisztrációs feladattal járjon az egyes oldalak és tartalmi elemek létrehozása vagy megváltoztatása. Ehhez az általunk fejlesztett sablonhoz egy újfajta, modern és könnyen kezelhető Drag & Drop, azaz „Fogd és vidd” Page Builder-t integráltunk, mely lehetővé teszi az oldalak szerkesztését és létrehozását. Az alap WordPress/WooCommerce rendszert ügyfelünk sajátos igényeihez igazodva egyedi mezőkkel egészítettük ki.

A WooCommerce rendszer checkout, (azaz pénztár logika) előnyeit használtuk árajánlatkérési célra. A projekt fejlesztése során a webáruházrendszer alapszemléletével szembe menve a „vásárlási”, esetünkben ajánlatkérési folyamatból kivettük a szállítási módokat és a fizetési rendszert.

A szállítási módok kikapcsolása még nem is okoz gondot egy WooCommerce webshoprendszer esetében, hiszen ez egy alap funkcionalitás, azonban a komplett fizetési logika elhagyása már nem ilyen egyszerű. Természetesen erre is megvan a megfelelő mód, de ez már tényleges programozói tudást igényel. Ennek technikai részletére is fény derül cikkünk további részében.

A specifikáció az ajánlatkérési űrlap mellett másik két fő funkciót is tartalmazott, két kapcsolatfelvételi űrlapot és egy dokumentumtárat.

Előbbi kivitelezésére szintén egyedi megoldást választottunk a mezők dinamikus kitöltése miatt. (A termék adatlapról a felhasználó a kapcsolati űrlapot tartalmazó oldalra kattintva a form automatikusan kitölti a terméknév bevitelimezőt.) A weboldal átadása óta ez a funkció részben átalakításra került. Ügyfelünk későbbi ötlete alapján, az űrlapokon a kiválasztott termék mellett további termékek is hozzáadhatók a „listához”. Ennek kivitelezéséhez egy látványos, könnyen használható, nyíltforráskódú JavaScript library-t használtunk. Az űrlap tartalmaz egy országlistát, melyet egy külső fájlból (JSON) húz be a rendszer.

A dokumentumtár az adminisztrációs oldalon való könnyű kezelhetősége érdekében a WooCommerce termék adatlapját bővítettük ki egyedi, korlátlan számú dokumentum feltöltésre alkalmas mezőcsoporttal. Ezáltal egy meglehetősen felhasználóbarát és jól strukturált rendszert kaptunk. Ezt a termékoldalon egy újonnan létrehozott fülön jelenítettük meg, így termékek saját dokumentumaihoz is könnyen hozzáférhetünk. Emellett létrehoztunk egy dinamikusan működő landing oldalt ami termékenként listázza az elérhető összes feltöltött fájlt.

Hogyan alakítsuk át a WooCommerce rendszerét egy sima ajánlatkérő űrlappá?

Jöhet a feketeleves? Lássuk a technikai részleteket:

Ha ismerjük a WordPress sablonfejlesztési alapjait nem lesz nehéz dolgunk. Az átláthatóság kedvéért hozzunk létre egy új „woocommerce_offer.php” állományt, majd include-oljuk be a „functions.php” fájlba.

Mint fentebb említettem a szállítási módokat kikapcsolni nem nagy ördöngösség. A fizetési rész kikapcsolásához implementáljuk a következő filter-t:
add_filter( 'woocommerce_cart_needs_payment', '__return_false' );

Írjuk át a gomb szövegét a kontextus megtartása végett:
function bbloomer_rename_place_order_button() {
return __('Submit', 'lang');
}
add_filter( 'woocommerce_order_button_text', 'bbloomer_rename_place_order_button' );


Kapcsoljuk ki az árak megjelenítését az üzlet és a termék oldalon:
function hide_price($price) {
return '';
}
add_filter( 'woocommerce_get_price_html','hide_price' );


Kapcsoljuk ki az árak megjelenítését a checkout, azaz a pénztár oldalon:
add_filter( 'woocommerce_cart_item_subtotal', '__return_false' );
add_filter( 'woocommerce_cart_subtotal', '__return_false' );
add_filter( 'woocommerce_cart_total', '__return_false' );


Írjuk át a „Kosárba rakom” gomb szövegét:
function custom_add_to_cart_text() {
global $product;
return 'Get an offer';
}
add_filter( 'woocommerce_product_add_to_cart_text', 'custom_add_to_cart_text' );
add_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_add_to_cart_text' );


Irányítsuk át a termék oldalról a felhasználót közvetlenül a „pénztár” oldalra:
function redirect_to_shop() {
global $woocommerce;
// Remove the default `Added to cart` message
wc_clear_notices();
return $woocommerce->cart->get_checkout_url();
}
add_filter( 'add_to_cart_redirect', 'redirect_to_shop' );


Irányítsuk át az üzlet oldalra a felhasználót, ha minden terméket törölt a „kosárból”:
function redirect_to_checkout_if_cart() {
if ( !is_cart() ) return;
global $woocommerce;
// Redirect to custom URL
wp_redirect( get_permalink( woocommerce_get_page_id( 'shop' ) ), '301' );
exit;
}
add_action( 'template_redirect', 'redirect_to_checkout_if_cart' );


Adjunk lehetőséget a termék törlésére a „pénztár” oldalon:
function custom_filter_wc_cart_item_remove_link($product_name, $cart_item, $cart_item_key) {
if (is_checkout()) {
$product_name .= apply_filters('woocommerce_cart_item_remove_link',     sprintf(
'<a href="%s" rel="nofollow" class="remove" style="float:left;">&times;</a>',
esc_url(WC_Cart::get_remove_url($cart_item_key)),
__('Remove this item', 'woocommerce'),
esc_attr($cart_item['product_id']),
esc_attr($cart_item['data']->get_sku())
), $cart_item_key);
return $product_name;
}
}
add_filter( 'woocommerce_cart_item_name', 'custom_filter_wc_cart_item_remove_link', 10, 3 );


Engedélyezzük a 0 forintos termékek „kosárba” helyezését:
function set_product_purchasable_without_price( $purchasable, $product ) {
if( $product->get_price() >= 0 || $product->get_price() == '' ) {
$purchasable = true;
return $purchasable;
}
}
add_filter( 'woocommerce_is_purchasable', 'set_product_purchasable_without_price', 10, 2 );


Ha végezetük mentsük el a fájl módosításait.

Ennyi az egész! 🙂

A fenti lépésekkel mostantól te is könnyedén készíthetsz ajánlatkérő űrlapokat WooCommerce segítségével, azonban, ha nem érzed magad webes gurunak, vedd fel velünk a kapcsolatot és kérj tőlünk egyedi, személyre szabott árajánlatot!