Na jednom projektu klijent je želio funkcionalnost dodatnog upita o proizvodu i to na stranici samog proizvoda. Najpraktičnije je bilo takvu opciju smjestiti u WC kartice (Product tabs). Iskreno, na netu možete pronaći nekoliko riješenja u vidu pluginova ili koda, no pluginovi su bili “preglomazni” a kodovi nisu u potpunosti riješavali traženo. Stoga, evo kako sam na najjednostavniji način ostvario traženo. Klijent je tražio tri stvari:
Jedinstvenu kontakt formu za upite za SVE proizvode
Zaista ne bi imalo smisla kreirati zasebne kontakt forme za pojedinačne proizvode.
U kartici (tabu) upita mora pisati za koji proizvod kupac piše upit
Kad korisnik klikne na tab za upit, želimo prikazati ime dotičnog proizvoda. Ne bi bilo loše dodati i neki kratak, custom tekst kako bi dodatno personalizirali ovaj tab. Takav potez bi učinio ovaj postupak malo osobnijim i bližim korisniku nego da samo flisnemo nekakvu generičku kontakt formu.
Na mail klijenta osim imena proizvoda za koji je upit izvršen, stižu i dodatne informacije poput linka prema proizvodu te IP adrese pošiljatelja
Smisleno je da vam u inbox stiže mail s upitom koji osim samog imena proizvoda stiže i link prema tom proizvodu. U pomoć će nam ovdje uskočiti Contact form 7 ugrađena funkcionalnost special-mail-tags.
Ono što želimo postići izgleda ovako:
Filter i funkcija za kreiranje kartice upita o proizvodu
U functions.php datoteku vaše aktivne teme (po mogućnosti u child temu), zalijepite niže navedeni kod. Ako ne znate ili ne želite dodavati išta u datoteke vaše teme, na kraju članka možete pronaći besplatan plugin koji sam kreirao za ovu funkcionalnost. Korištenje plugina je zgodno jer će funkcionalnost biti aktivna neovisno o temi koju koristite.
Na kraju koda u pomoć smo pozvali JavaScript za “predpopunjavanje” naziva proizvoda. U samoj kontakt formi ćemo također morati upisati nekoliko sitnih izmjena.
Kreiranje kontakt forme za upit o proizvodu
Jedino što odudara od klasičnih polja kontakt forme je subject polje. Smatram da je ovo polje nepotrebno prikazivati kupcima, a pogotovo dopustiti im da promijene ime proizvoda za koji vrši upit. No, dodavanje inline display:none pravila na element koji sadrži subject nije dobro jer u tom slučaju ne bi proslijeđivalo taj bitan podatak na mail. Stoga sam upotrijebio klasu koju CF7 već koristi, a to je wpcf7-display-none. Također, smanjio sam defaltnu visinu polja za poruku na 3 reda.
Ovaj kod zalijepite u polje kontakt forme:
Ovako bi trebala izgledati polja obrasca vaše kontakt forme:
CF7 – polja forme potrebna za prikaz u kartici upita
Kako bi riješili i treći zahtjev klijenta koristit ćemo odličnu, ugrađenu CF7 funkcionalnost naziva Special mail tags. Više informacija na stranici contactform7.com/special-mail-tags.
Special Mail Tags – Contact Form 7
Za naše potrebe koristiti ćemo samo dva special taga. [_remote_ip] za prikaz IP adrese pošiljatelja, a [_post_url] za prikaz URL-a s kojeg je upit poslan. Te ćemo tagove zalijepiti i karticu Pošta naše kontakt forme.
Special mail tags u kontakt formi
Kad potencijalni kupac pošalje upit, u vašem inboxu će mail izgledati ovako:
Plugin za dodavanje kartice za upit o proizvodu koristeći Contact form 7
Alternativno, možete skinuti besplatan plugin koji sam kreirao za ovaj članak a omogućuje vam gore navedene funkcionalnosti. Downloadajte ga, instalirajte ga kao svaki drugi plugin (upload zip datoteke) ili FTP klijentom povučete raspakirani folder plugina u wp-content/plugins folder i aktivirajte u adminu.
Plugin za dodavanje kartice za upit o proizvodu koristeći Contact form 7
NAPOMENA: testirano na WordPressu 4.3.1, WooCommerce inačica 2.4.7, Contact form 7 inačica 4.3, koristeći Twenty Thirteen temu.
Pametno… ja sam koristio plugin Contact Form 7 – Dynamic Text Extension i preko post – get funkcije napravio “dinamičku” stranicu na kojoj se ispunjavao isti ovakav upit.. ovo je elegantnije rješenje.
Hvala na komentaru, Nikola.
pozdrav, probao sam ovo na zadnjoj verziji WooCommerce v2.6.14 + ContactForm7 v4.6.1, i teoretski radi, ali nemogu dobiti da subject u mailu izgleda pristojno, tj. CF7 ne povuce subject (naziv proizvoda iz WooCommerce-a)
thema je StoreFront (imam child) ali to nebi trebao biti neki problem
Ne utječe na rad forme, ali primjetio sam kad imam uključen debugging mode.. ako znate što bi moglo biti.
Notice: post je neispravno pozvan. Svojstvima proizvoda se nebi smjelo pristupati izravno. Backtrace: require(‘wp-blog-header.php’), require_once(‘wp-includes/template-loader.php’), include(‘/themes/shopkeeper/woocommerce/single-product.php’), wc_get_template_part, load_template, require(‘/themes/shopkeeper/woocommerce/content-single-product.php’), get_template_part, locate_template, load_template, require(‘/themes/shopkeeper/woocommerce/content-single-product-style-4.php’), do_action(‘woocommerce_after_single_product_summary_data_tabs’), WP_Hook->do_action, WP_Hook->apply_filters, woocommerce_output_product_data_tabs, wc_get_template, include(‘/themes/shopkeeper/woocommerce/single-product/tabs/tabs.php’), product_enquiry_tab_form, WC_Abstract_Legacy_Product->__get, wc_doing_it_wrong Pročitajte Debugging in WordPress za više informacija. (Ova poruka je dodana u inačici 3.0.) in
Bok, sorry na kasnom odgovoru. Na liniji 44 datoteke ovog plugina umjesto $subject = “Upit o proizvodu: “.$product->post->post_title; upiši $subject = “Upit o proizvodu: “.$product->get_title();
Pozdrav, na front-endu mi svejedno prikazuje polje za naslov, čini se da “product_subject wpcf7-display-none” ne radi. Ima li još netko ovaj problem? WP verzija 5.9.2, CF7 5.5.6
Bok, Nakon instalacije kada odem na “Upit o proizvodu” dobijem:
[contact-form-7 404 “Nije pronađeno”]