Jak stworzyć dynamiczną witrynę spotkań za pomocą OceanWP i Crocoblock?

Chcesz zbudować dynamiczną stronę do rezerwacji wizyt? Dla tych, którzy uważają, że wdrożenie jest trudne, jest dobra wiadomość – tak nie jest. W dzisiejszych czasach nie potrzebujesz programistów, programistów i projektantów. Potrzebujesz tylko odpowiednich narzędzi.

W tym artykule dowiesz się, co sprawia, że ​​strona internetowa jest dobra. Przeprowadzimy Cię przez całą procedurę tworzenia witryny i rozdamy narzędzia, których używaliśmy. W końcu dowiesz się, jak stworzyć system rezerwacji za pomocą tylko OceanWP i kilku wtyczek Crocoblock.

Co sprawia, że ​​OceanWP i Crocoblock są świetne razem?

• Wizualna budowa witryny . Ponieważ Gutenberg jest edytorem bloków wizualnych, twórcy stron internetowych mogą zaoszczędzić czas, przełączając się między panelem administracyjnym a interfejsem. Wystarczy stworzyć strukturę strony w edytorze i upewnić się, że wersja front-endowa wygląda tak samo.
• Mniej zewnętrznych wtyczek . Zapomnij o osobnych wtyczkach dla niestandardowych typów postów, formularzy, zarządzania rezerwacjami, niestandardowych pól itp. Aby uruchomić funkcjonalność spotkań, potrzebujesz tylko dwóch wtyczek Crocoblock.
• Żadnych pośredników . Oznacza to, że programiści nie muszą polegać na projektantach. Możesz wziąć szablon demonstracyjny od OceanWP, przerobić jego układ według własnego uznania i dodać do niego dynamiczną funkcjonalność Crocoblock.

Strona internetowa spotkania 101

Co to jest strona internetowa do rezerwacji wizyt?

Witryny z wizytami to platformy usługowe, na których można zarezerwować określony przedział czasowy. Często te strony internetowe oferują usługi płatne za godzinę.

Jak wyglądają strony z wizytami?

Mogą to być jednostronicowe strony wizytówkowe, na których można zarezerwować konkretną usługę u jednego dostawcy. Z drugiej strony strony internetowe spotkań mogą zawierać wielu dostawców. W takim przypadku serwis posiada dedykowane pojedyncze strony i katalogi Dostawcy i Serwisu.

Czy trudno jest stworzyć stronę internetową z wizytami?

Nigdy więcej. W dzisiejszych czasach możesz zbudować dynamiczną witrynę internetową od podstaw, korzystając z odpowiednich narzędzi – preferowanego kreatora stron, dostawcy motywów, wtyczki do dynamicznych treści i rdzenia rezerwacji spotkań.

Jakie są główne elementy strony z wizytami?

Byłby to motyw, niestandardowe typy postów, mechanizm rezerwacji spotkań, formularze rezerwacji, strony dostawcy, strony usług, strony katalogu i wykazy.

Czy mogę dodać wielu dostawców do tej samej witryny?

Dlaczego nie? Kilku profesjonalistów może świadczyć jedną usługę. Koniecznie przypisz dostawcę do usługi, aby uniknąć zamieszania na etapie wypełniania formularza rezerwacji.

Strona internetowa spotkania: podstawowe przygotowania

Zdecydowaliśmy się pominąć wstępne przygotowania, takie jak uzyskanie nazwy domeny i wybór dostawcy hostingu. Zamiast tego skupimy się na istocie. Dla tych, którzy chcą zagłębić się w szczegóły, mamy super informacyjny film autorstwa Ferdy'ego Korpershoek.

Pobierz wtyczki Crocoblock

Crocoblock wprowadził zaktualizowany cennik sześć miesięcy temu. Co sprawia, że ​​jest fajny? To plan subskrypcji Custom . Teraz, aby stworzyć działającą witrynę spotkań, nie będziesz musiał dużo wydawać. Przejdź do cennika Crocoblock, rozwiń zakładkę JetPlugins i dodaj niezbędne wtyczki do koszyka.

Będziesz potrzebować JetEngine – dynamiczna wtyczka treści, która umożliwia tworzenie niestandardowych typów postów – i JetAppointment – wtyczka WordPress do rezerwacji usług.

Taki niestandardowy pakiet będzie kosztować 45 USD rocznie za jedną stronę internetową i 93 USD rocznie za nieograniczoną liczbę stron internetowych. Dodatkowo będziesz otrzymywać aktualizacje wtyczek i wysokiej jakości wsparcie przez cały rok. Prześlij te wtyczki do pulpitu WordPress i przygotuj je do dalszej pracy.

Zainstaluj motyw OceanWP i wybierz szablon strony internetowej

Istnieją dwa sposoby zainstalowania głównego motywu – tradycyjny i Crocoblock.

Instalowanie motywu OceanWP w tradycyjny sposób

Przejdź do Wygląd > Motywy w panelu administracyjnym WordPressa i naciśnij „ Dodaj nowy ”. Możesz użyć paska wyszukiwania, aby zlokalizować motyw. Po znalezieniu zainstaluj OceanWP i aktywuj go.

Instalowanie motywu OceanWP w sposób Crocoblock

Użyj Kreatora instalacji Crocoblock. Można go pobrać z konta Crocoblock, a następnie użyć do zainstalowania OceanWP.

Aby wybrać szablon demonstracyjny, przejdź do Panel motywów > Zainstaluj wersje demonstracyjne i wybierz ten, którego potrzebujesz. Wykorzystamy dzisiaj szablon demonstracyjny Gym . Pamiętaj, że demo nie może działać zgodnie z przeznaczeniem, jeśli brakuje niektórych rozszerzeń premium. Możesz je najpierw zdobyć.

Gdy tylko instalacja szablonu demonstracyjnego zostanie zakończona, jesteś gotowy do zbudowania dynamicznej witryny spotkań.

Tworzenie niestandardowej strony internetowej z wizytami

W każdej witrynie internetowej do planowania spotkań i wydarzeń znajdują się niestandardowe typy wpisów dla dostawców i usług , rdzeń automatycznego rezerwowania spotkań, integracja z kalendarzem i formularz rezerwacji. Są to podstawowe elementy, ale możesz dowolnie rozszerzać listę.

Teraz dobrze wykorzystajmy wtyczki JetEngine i JetAppointment.

Tworzenie niestandardowych typów postów

Dlaczego musisz stworzyć CPT? Pomogą Ci uporządkować posty na stronie – usługi dla usług, dostawcy dla dostawców. Następnie te posty można łatwo ze sobą powiązać, aby użytkownicy witryny mogli zarezerwować konkretną usługę od tych, którzy ją świadczą.

Postępuj zgodnie ze ścieżką JetEngine > Typy postów > Dodaj nowy w panelu administracyjnym WordPress, aby utworzyć CPT. Pamiętaj, że potrzebujesz dwóch typów postów – jednego dla Dostawców i jednego dla Usług. Ponieważ budujemy stronę internetową Gym, typy postów będą odpowiednio nazwane Trenerzy i Treningi .

Dodaj niezbędne pola meta do obu typów postów. W przypadku trenerów CPT mogą to być:

• zdjęcie;
• krótki życiorys;
• doświadczenie zawodowe;
• osiągnięcia;
• Galeria;
• Łączność.

W przypadku Workouts CPT metapola mogą wyglądać następująco:

• Galeria;
• opis;
• maksymalna pojemność;
• ekwipunek;
• Korzyści zdrowotne.

Szybka wskazówka : JetEngine ma przydatną funkcję słownika. Umożliwia tworzenie zestawu pól meta i używanie ich jako opcji dla niestandardowych typów postów.

Następnie dodaj tyle postów do nowo utworzonych typów postów, ile potrzeba. Aby to zrobić, najedź myszą na nazwę CPT w panelu administracyjnym WordPressa, a następnie naciśnij „ Dodaj nowy ”.

Po zakończeniu możesz przystąpić do konfiguracji wtyczki JetAppointment.

Konfiguracja JetApointment

Ustawienie wtyczki do rezerwacji spotkań przez Crocoblock nie jest trudne. Wszystko, co musisz zrobić, to uruchomić Kreatora instalacji i wykonać cztery kroki instalacji.

Przejdź do opcji Spotkania > Skonfiguruj w panelu administracyjnym. Zostaniesz przeniesiony do strony Ustawienia JetPlugins , a mianowicie do zakładki Konfiguracja JetAppointment. Kliknij przycisk o podobnej nazwie, aby uruchomić Kreatora.

• Krok 1 . Musisz wybrać typy postów Usługi i Dostawcy w odpowiednich opcjach rozwijanych. Nie zapomnij włączyć przełącznika Dodaj dostawców ; w przeciwnym razie pole się nie pojawi. Kliknij „ Dalej ”.

• Krok 2 . Tutaj możesz zobaczyć wymagane kolumny tabeli bazy danych. Kontynuuj instalację, jeśli nie masz ochoty dodawać kolejnych kolumn. Dodamy Telefon i Komentarze.

• Krok 3 . Ten krok jest poświęcony konfiguracji usługi i szczegółowych informacji dotyczących dostawcy, takich jak czas trwania, czas buforowania, dni wolne, godziny pracy itp. Aby uzyskać szczegółowe omówienie kroków, obejrzyj ten samouczek wideo.

• Krok 4 . Na koniec możesz zintegrować WooCommerce i utworzyć dwa formularze rezerwacji spotkań. Dostępne opcje obejmują „JetEngine Forms” i „JetFormBuilder”. Pierwszy jest przeznaczony dla Elementora, a drugi dla Gutenberga.

Naciśnij przycisk „Zakończ” , aby zakończyć konfigurację.

Przed edycją formularzy rezerwacji spotkań należy powiązać wpisy Dostawcy i Usługi. Otwórz post dostawcy i znajdź kartę Usługi powiązane na lewym pasku bocznym. Wpisz trzy znaki w tym polu tekstowym i wybierz wymaganą usługę, gdy system ją zasugeruje.

Powtórz procedurę tyle razy, ile jest dedykowanych postów dostawcy. Gdy skończysz, jesteś gotowy do zabawy z formularzami.

JetFormBuilder i dodawanie formularzy do stron

To, co jest doskonałe w produktach Crocoblock, to fakt, że niektóre z nich są w rzeczywistości bezpłatne. Weź JetFormBuilder. Jest to wtyczka do tworzenia formularzy WordPress, umożliwiająca programistom witryn tworzenie dynamicznych formularzy w edytorze stron Gutenberg. Możesz pobrać wtyczkę, aktywować ją i od razu z niej korzystać.

Przejdź do JetFormBuilder > Formularze . Będą tam dwa wygenerowane formularze. Będziemy musieli je edytować, ponieważ podczas konfiguracji spotkania dodaliśmy dwie kolumny do tabeli DB. Teraz musimy dodać niezbędne metapola do formularza i działań po przesłaniu.

Kliknij, aby edytować formularz rezerwacji strony statycznej i dodaj brakujące pola meta, przeciągając i upuszczając odpowiednie bloki Gutenberga. Potrzebujemy dwóch – pola tekstowego i pola tekstowego – aby dodać pola telefonu i komentarza.

Następnie musisz wprowadzić te pola do akcji Post Submit Action. Aby to zrobić, naciśnij zakładkę JetForm , przewiń w dół do sekcji Post Submit Actions i kliknij ikonę ołówka pod nazwą akcji. Zobaczysz okno edycji akcji Post Submit, w której powinieneś wybrać pola formularza, do których one należą.

Poza tym możesz skonfigurować integrację WooCommerce tutaj, pod warunkiem, że włączyłeś ją w kroku 4. Po zakończeniu kliknij przycisk „ Aktualizuj ”.

Szybka wskazówka . Możesz dodać kilka akcji przesyłania postów jednocześnie, ale upewnij się, że ich warunki nie są ze sobą sprzeczne. W takim przypadku przesłanie formularza nie powiedzie się.

Po zakończeniu dostosowywania formularza rezerwacji strony statycznej, zaktualizuj go i dodaj do strony internetowej. Stworzyliśmy dedykowaną stronę All Workouts , która pokazuje dynamiczną listę JetEngine. Formularz rezerwacji będzie pięknie wyglądał pod siatką.

Otwórz stronę, na której chcesz umieścić formularz, znajdź blok JetForm na lewym pasku bocznym, przeciągnij go i upuść w żądanym obszarze, a następnie wybierz formularz, który właśnie edytowałeś w rozwijanym menu Wybierz formularz na prawym pasku bocznym .

Zaktualizuj stronę i zobacz, jak wygląda na interfejsie.

Teraz najbardziej uważni czytelnicy pytają: „Jak to możliwe, że formularz jest wystylizowany?”. To dlatego, że dodaliśmy kolejną wtyczkę do miksu. Czytaj dalej, aby dowiedzieć się, które.

Wróć do pulpitu WordPress i otwórz ścieżkę Spotkania > Spotkania . Masz to – wszystkie spotkania są ciasne. Tutaj możesz je przeglądać, edytować, usuwać, filtrować i zmieniać ich status.

Jak widać, funkcja rezerwacji terminów już działa. Jest jednak więcej rzeczy, które możesz zrobić, aby strona internetowa do planowania spotkań była jeszcze bardziej dynamiczna.