Posted on Leave a comment

How does Wilcity Search Form V2 work?

Wilcity 1.2.0 introduced Search Form V2 with better UX. In this tutorial, I will explain to you how it works and how can you setup it.

There are 4 parts in the Search Form:

  1. Top Search Field
  2. Post Types Navigation
  3. Filter Items
  4. And Search Results (Listings)

Top Search Field

The Top Search Field has highest position on the Search page. When a customer enters a keyword into this field, Wilcity will fetch to Google / Mapbox address, Listing Location and Listings.

If Google / Mapbox is matched keyword, it will return a list of Address Suggestion. Each of suggestion contains 3 information: Address, Latitude and Longitude. If one of these values is selected, Search by Radius will be processed. Imaging that We have a Circle, the Latitude and Longitude of the selected address is Center of this circle, and Wilcity will return all Listings that has Latitude and Longitude within this circle.

So how can You provide Latitude and Longitude to each Listing: Click on Listings -> Your Listing -> Google Address Setting.

To specify Radius to this Circle, click on Appearance -> Theme Options -> Search Setting.

If Listing Locations are matched keyword, a list of Listing Locations will be returned. If one of them is selected, Wilcity will show up all Listings belong to this Listing Location (the query parameter will combine with Search Filter Items as well). If the selected Location is a parent location, Wilcity will get all its Listing Location Children and append to Region Search Field (If it’s available)

If Listing Title / Listing Content is matched keyword, a list of Listings will be returned. When clicking on one of them, Browser will redirect to this Listing directly.

Post Types Navigation

In Wilcity, each Post Type has its Search Fields. To setup Search Field Items, click on Wiloke Tools -> [Your Listing Type] Settings -> Main Search Form.

The Post Type helps to Navigation Search Fields. In other words, when clicking on a Post Type, Wilcity will get its Search Fields on show on the Search Form.

To setup Post Type, click on Wiloke Tools -> Add Directory Type

Search Fields

The following search fields WILL NOT show up on Search Form V2: What are you Looking for ? and Where to Look?. However, you should add it to Used Fields area still. Why? It’s needed if you are using Wilcity App.

We recommend using New Price Range instead Price Range (Only use this field if you still want to use Search Form V1)

Custom Search Field: It’s very easy to add a Custom Field to Search Form V2.

Setting up Search Form V2

  1. Go to Pages -> Add New -> Enter in the Page Title -> Set this page to Wilcity Search V2 template
  2. Click Publish button
  3. Go to Appearance -> Theme Options -> Search Settings -> Assign this page to Search Page setting

Hoping this tutorial helps you understand how Search Form V2 works. Thence, You can setup a Search Fields for your site.

If you have any question, feel free open a ticket on https://wilcity.ticksy.com/tickets/ We are willing to help you

Posted on 2 Comments

What’s new in Wilcity 1.2.0

1. New Search Page

Wilcity 1.2 comes with power of New Search Page. Like the previous versions, You can easily drag a Search Field to Search Form area, and it resolved the disadvantage of this previous as well: Custom Field can be added to Search Form area now.

Besides, Search Without Map and Search With Map have been merged into 1 page instead of separating to 2 different pages like previous versions.

Please read https://wilcityservice.com/how-does-wilcity-search-form-v2-work/ to learn more about this feature

2. New Hero Search Form Field

In this version, We added a new field Complex Search. It’s combination of Where to looks? field, Where are looking for? and Region field in the previous versions. In short, when entering a keyword on this field, it will return maximum 3 types of result: Single Listing, Listing Location and Google Address.

If the customer clicks on:

  1. Single Listing: Browser redirects to this Single Listing directly
  2. Listing Location: Browser redirects to Search Page and search by Listing Location
  3. Google Address: Browser redirects to Search Page and search for all Listings within X KM

So when using Complex Search field, We should not use Where to looks field and Region field.

Wilcity 1.2.0 also auto remove Hero Tab Item if there is 1 Listing only.

3. Wilcity Listings Tabs

Wilcity Listings Tabs is get more stronger now. You can add a relation between Listing Category and Listing Location to this feature and add more filter Options to Listings Tabs Panel. To learn more about Wilcity Listings Tabs, please read How to setup Wilcity Listings Tabs

4. Tracking Review From the Front-end Dashboard

The listing owner now can track reviews on his/her listing from the admin dashboard. They can also hide / review a review on the dashboard as well.

5. Wilcity Term Groups Shortcode

Since Wilcity 1.2.0, You can add a Relation Between Listing Location and Listing Category to Rectangle Term Boxes, Term Boxes and Modern Term Boxes shortcode. When clicking on a Term box, browser redirects to Search Page and search for all Listings belongs to Location and Category that you picked up.

To learn more about this feature, please read Understanding Terms Group shortcode

6. Listing Types shortcode

It’s new shortcode in Wilcity 1.2.0, the shortcode allows displaying All Listing Types on the Home page. when clicking on a Listing Type, the Browser redirects to Search Page and all Listings belongs to this Listing Type will be shown up.

7. Repeated group

Wilcity 1.2 allows you can enable repeated group feature in Group Field setting. You can also use Uploader feature in the group as well.

8. WYSIWYG to Listing Content field

Your customers now can use WYSIWYG editor on Add Listing page.

9. Business Hours

With Wilcity 1.2.0, You can now set Open 24hrs to a day in a week. You can also setup Overnight Business Hour as well.

EG: If you have a Bar Listing, You can setup Open at 7 AM, and Close at 3 AM (next day)

10. Quick Access Listing Gallery

Posted on 1 Comment

How can I update to Wilcity 1.2.0.x?

All existing users should create a Staging Site and upload the new version on it first – please read https://themeisle.com/blog/wordpress-staging-site/ to learn how to create a Staging site. We added lots of features to this version, so it may conflict with a third-party plugin and your custom code, the Staging site is a safe solution for your business.

Before uploading the new version to Live site, make sure that everything is backed up (You can read and follow https://www.wpexplorer.com/backup-wordpress-site-plugins/ to learn how to do that)

Make sure that you are using the latest version of WordPress and your hosting is running PHP 7.2 or higher version.

We DO NOT recommend using any MINIFY SCRIPT plugin

How to update to new version ?

Converting data to Wilcity 1.2.0

  1. Download Wilcity Convert To 120 plugin https://www.dropbox.com/s/xwevsebrirmvlm7/wilcity-convert-to-120.zip?dl=0
  2. Login into your site
  3. Click on Plugins -> Add New -> Install this plugin
  4. Click on Wilcity Convert To 120 from the admin sidebar
  5. Click on Convert Data button
  6. You can delete this plugin after finishing

After updating all Wilcity theme and Wilcity Plugins, don’t forget to flush WordPress Cache + CDN cache before testing.

Posted on Leave a comment

Building a nice Taxonomy page with Wilcity shortcodes

Wilcity provides to you lots of shortcodes that help you not only to build a great home page but also Taxonomy page.

In this tutorial, We will setup Listing Location page, You can do the same with Listing Category page.

Step 1: Setting up Custom Taxonomy page

  1. Click on Pages -> Add New -> Create a new page and set this page to Wilcity Taxonomy Template
  2. Go to Appearance -> Theme Options -> Customize Taxonomies
  3. Set Listing Taxonomy Page Style to I create it myself mode
  4. Set the page that created at step 1 to Listing Location

To know more about Custom Taxonomy page, please read https://documentation.wilcity.com/knowledgebase/customizing-listing-location-listing-category-page/

Step 2: Building Custom Taxonomy page with Wilcity Shortcodes

Wilcity New Grid shortcode

Since Wilcity 1.2.0, Wilcity New Grid was added. This shortcode works like Wilcity Listings Tabs, but it does not have Tabs Filter.

Let’s have a look at its settings:

Heading: If you want to use a dynamic Heading, You can put %termName% in it. In the above example, when visiting Hanoi Location, the Heading is Food experiences in Hanoi and when visiting New York, it’s Food experiences in New York.

Description: You can use %termName% in the description as well

Taxonomy Type: We have setting up Listing Location, so We SHOULD NOT set Taxonomy type to Listing Location type.

Select Listing Location: We SHOULD leave it empty. When the field is empty, the current Listing Location is filled up.

So, when visiting Hanoi Location, the shortcode will display all listings that belong to Listing Categories that were specified in the shortcode and Hanoi Location.

Maximum Items: We recommend leaving it empty. When leaving this setting empty, the number of items is matched Items / Device setting

Terms Group shortcodes

To understand how Terms Group work, pleas read Understanding how Terms Group shortcodes

When using this group shortcodes in a Term page, We recommend paying to Taxonomy Type setting:

If you set Taxonomy Type to Listing Location, You should leave Select Listing Locations empty. The Children of Listing Locations will be filled up automatically.

If you set Taxonomy Type to Listing Category, You should Selection Listing Location empty and specify Categories that you want to use to Select Listing Categories setting.

The Listing Location is became a Dynamic Location, which means Wilcity will automatically filled up Current Location to this field.

The above example, when clicking on Shopping -> Browser will redirect to Search Page -> and the Search page will show up Listings that belong to Shopping category in New York city.

Wilcity Post Types (It’s available since Wilcity 1.2)

Posted on Leave a comment

Understanding Terms Group shortcode

In WordPress, The item in Tag, Category, Listing Location, Listing Category is called Term. EG: We add New York to Listing Location. New York is called Term

Wilcity provides various shortcodes (Term Boxes, Rectangle Term Boxes, Modern Term Boxes, Masonry Term Boxes) that allow you can show up Terms on the Front-page. These shortcodes have the same functionality but different from styles, We call them Terms Group.

In this tutorial, We will use Rectangle Term Boxes to explain Terms Group feature.

Setting up Rectangle Term Boxes shortcode

Step 1: Click on Pages -> Your Front page

Step 2: Click on Add New shortcode

Step 3: Search for Rectangle Term Boxes and insert this shortcode to Editor

Understanding Rectangle Term Boxes shortcode settings

Term Redirect:

There are 2 options Self Term Page and Search Page.

Self Term Page: Which means when clicking on a Term, the browser will redirect to its page. To setup the Term page, please read #placeholderhere#

Search Page: Instead of redirecting to self Term page, it will redirect to Search page. To setup Search Page, please read and follow Setting up Search Page

Taxonomy Type

Specifying what taxonomy will be used on the shortcode.

If Taxonomy Type is Listing Location, Select Listing Locations will be shown up. And If Taxonomy Type is Listing Category, Select Listing Categories will be shown up.

Select Listing Location / Listing Category

This feature was not added from original, It’s available from Wilcity 1.2.0.

So, Why did we decide to add this feature? Let me explain it:

Imaging that We have a group of Listing R in New York City and these listings belong to Restaurant Category.

We have a group of Listing H in New York City and these Listings belongs to Hotel Category.

This feature helps to split Restaurant Category and Hotel category to 2 different Term Boxes.

The above example, When clicking New York, it will redirect to Search page and it will show up all Listings that belongs to Restaurant category in New York city

Posted on Leave a comment

How to setup Wilcity Listings Tabs

Wilcity Listings Tabs allows you can create Multiple Grids (The Listing Locations/Categories are tab items and each grid layout is under a Listing Location / Listing Category tab) on the Home Page and You can also add Filter Options to Grid, so Customers can Filter Listings that meets their purpose right on the Home Page instead of going to Search Page.

Setting up Listings Tabs

Step 1: From the admin sidebar, click on Pages -> Your Front – Page -> Click on Add New Shortcode

Step 2: Search for Listings Tabs -> Click on it

Step 3: You will see Listings Tabs setting now, You should pay attention to the following settings:

Navigation Type: Which means what Taxonomy You want to set as Navigation Filter (In WordPress, Listing Category, Listing Location are called Taxonomies)

Get Terms Type: There are 2 options Specify Terms and Get Term Children (The item in Listing Location / Category is called Term).

1. Specify Terms means all terms that are selected in Select Listing Categories / Locations setting will be used as Navigation Items.

2. Get Term Children means We will get the children of Term that is selected in Select Listing Categories / Locations. EG: We setup Albany, Chemung, Chenango, Rensselaer, Westchester are children of New York Location, and New York is set to Select Listing Locations on Listings Tabs shortcode, the Albany, Chemung, Chenango, Rensselaer, Westchester will be shown up as Navigation Items

Order By Options: This feature allow customers can Filter Listing right on the Listings Tabs

Select Listing Location / Select Category: When Navigation Type is set to Listing Location, this setting will show up as Listing Category and vice versa. In the previous version, We didn’t add this feature, but Why We added it now? Let us explain its purpose:

Imaging that you have 3 Locations: New York, Paris, Hanoi and 3 Categories: Food, Hotel, Shopping.

And now, We set Listing Category as Navigation Type => The front-end will display ALL Listings that belong to Food, Hotel and Shopping.

If a customer who wants to Paris next week, will he interesting in Listings in New York and Hanoi? No, he won’t!

So, We will set Paris to Listing Location => The front-end will display All Listings that belongs to Food, Hotel, Shopping in Paris now.

Maximum Items: Maximum listings are shown up on each Listings Grid. We HIGHTLY RECOMMEND LEAVING EMPTY this setting. When leaving it empty, Wilcity will AUTOMATICALLY calculate maximum listings on each devices.

To understand this feature, please click on Column Settings tab.

So, when leaving empty Maximum Items, Maximum Listings on the screen that has 1200px are 5 listings, 960px are 4 listings.

Posted on Leave a comment

Sending Custom Notification in Wilcity

Some customers asked us on the Wilcity Fanpage for “Sending a notification directly to Wilcity App and Wilcity Web?”, We will show you how to do that in this tutorial.

Step 1: Updating required plugins and installing Wilcity Sending Notification Directly plugin

  1. From the admin sidebar, click on Wilcity Service -> Click on Update button on Wiloke Listing Tools plugin and Wilcity Mobile App plugin.
  2. Download Wilcity Sending Notification Directly plugin by click on https://www.dropbox.com/s/cm742y9gvw5k8we/wilcity-sending-notification-directly.zip?dl=0
  3. Click on Plugins -> Add New -> Install the plugin that you downloaded at step 2

Step 2: Configuring Wilcity Sending Notification Directly plugin

From the admin sidebar, click on Wilcity Sending Notification, you will see the setting area looks like this:

Title: The title of your notification

Message: The content of your notification

Send to Web / App: Where your notification will be sent to.

Send to Customer Mode:

  • All users: Sending your notification to all users
  • Customers who are following me: Send your notification to customers who are following SEND FROM
  • Custom: Specifying customers who will get your notification. To setup customers, you should enter in customer username in the Customer’s username field. EG: admin,wilcity

At the first time, Wilcity will send the notification to maximum 50 customers. Then, every 10 minutes Wilcity will send messages to the next 50 customers.

Posted on 2 Comments

Integrating Custom Twitter Feeds to Wilcity

Thank Smash Balloon for creating an useful plugin https://wordpress.org/plugins/custom-twitter-feeds/

We got an interested question about Twitter Feed from @TokyKempen on the Wilcity Group

We absolutely can embed Twitter Feed to Wilcity, and in this tutorial, We will show up how to do it.

Step 1: Installing required plugins

  1. Logging into your Website
  2. Downloading Wilcity Custom Twitter Feeds plugin by clicking on https://www.dropbox.com/s/eoef19nanlna4yo/wilcity-custom-twitter-feed.zip?dl=0
  3. From the admin sidebar, click on Plugins -> Add New -> Install the plugin -> Activate it
  4. Click on Appearance -> Install Plugins -> Install and Activate Custom Twitter Feeds plugin

Step 2: Creating Twitter Configuration Group to Add Listing page

Clicking on Wiloke Tools -> Listing Settings -> Drag Group Field to Used Field. In the group field, You should add 5 fields with the following keys: usertimeline_text, consumer_key, cosumer_secret, access_token, access_token_secret and the group key is my_twitter_feeds

Step 3: Showing up Twitter Feeds on Single Listing page

Now, navigate to Single Navigation -> Add add new Section like this

Key: my_twitter_feeds

Content: [wilcity-custom-twitter-feeds]

And here is what you get on the Front-end

Twitter Configuration on the Front-end

Twitter Configuration in the Back-end

Posted on Leave a comment

Wilcity Landing Page

As our promise on Wilcity Facebook Group, We will guide you to create your own Landing Page based on Wilcity Landing Tool.

After following our steps below, You can create a landing page looks like this: https://landing.wilcity.com/

Now, let’s do it.

Step 1: Downloading Wilcity Landing Tool

You can download the tool by clicking on me

Step 2: Installing NPM in wilcity-landing-tool folder

  1. Extract the downloaded file, you will see wilcity-landing-tool folder.
  2. Open your terminal -> Run cd command line to the wilcity-landing-tool folder

Step 3: Building Hero Section

  1. Now, opening wilcity-landing-tool with an editor like Sublime Text or NotePad++.
  2. Going to src -> axiosFaker -> section1.js -> This is Hero section. You can change title, button, video background here.

Step 4: Building other sections

It’s the same what you did with the Hero section, you can simply open section you want to use and modify it.

The order of section in the app folder it similar to its order on the Wilcity Landing page

Step 5: Building App page Sections

You can see the app sections under src -> axiosFaker -> app folder. To modify it, please do the same web

Step 6: Setting up Navigation

To setup navigation, please open src -> axiosFaker -> navigation.js, here you can add / remove / modify the menu item.

Step 7: Building Production Version and upload to your hosting

After completing everything, We will build the production version and upload it to your hosting.

To build the production version, please run the following command lines:

yarn build

or

npm run build

The product files will be added under wilcity-landing-tool -> build folder -> Uploading those files to your hosting.

We hope this tutorial will help to create your own landing page. If you get any issue while creating the landing page, feel free open a ticket on https://wilcity.ticksy.com/tickets/