Display The Latest Products Section - P3 - Using Meta Box And Oxygen
Tags: metabox, latest, products, oxygen
Published: 2022-01-18 02:05:56

In this next part of this series, we're going to figure out <strong>how to have a section for the latest products using Meta Box and another website builder, Oxygen</strong>. This section will be the same as the last ones we created in the previous posts.

<!--more-->

<img class="aligncenter" src="https://i.imgur.com/MfUjf4J.gif" alt="The example of creating the latest products section" width="1200" height="609" />

Are you ready to start?
<h2>Before Getting Started</h2>
We’ll display some extra information about the products in the latest product section. Most of them will be in custom fields, so we need <a href="https://metabox.io/">Meta Box plugin</a> to have a framework to create custom fields. It’s free on <a href="https://wordpress.org/plugins/meta-box/">wordpress.org</a>.
<ul>
 	<li><a href="https://metabox.io/plugins/custom-post-type/">MB Custom Post Type &amp; Custom Taxonomies</a>: this is a free Meta Box extension that helps create custom post types. You can also download it from <a href="https://vi.wordpress.org/plugins/mb-custom-post-type/">wordpress.org</a>;</li>
 	<li><a href="https://metabox.io/plugins/meta-box-builder/">Meta Box Builder</a>: this Meta Box premium extension provides you with an UI to create and configure custom fields in the back end. If you don’t want to use this premium extension, you can code manually or use this free <a href="https://metabox.io/online-generator/">Online Generator</a> tool to generate code.</li>
</ul>
Finally, <a href="https://oxygenbuilder.com/">Oxygen Builder</a>, and remember to use the 3.9 version or upper to have the native integration with Meta Box.
<h2>Video Version</h2>
https://youtu.be/2TndR67aQQk
<h2>Step 1: Create a New Custom Post Type</h2>
In the <strong>Admin Dashboard</strong>, go to <strong>Meta Box</strong> &gt; <strong>Post Types</strong> &gt; <strong>New Post Type</strong> to create a new post type for products.

After publishing, you will see a new menu in your dashboard.

<img class="aligncenter" src="https://i.imgur.com/kYAljhI.png" alt="A new menu appears after creating a new post type for the products." width="1200" height="629" />
<h2>Step 2: Create Custom Fields for the Post Type</h2>
In the Admin Dashboard, go to <b>Meta Box</b> &gt; <b>Custom Fields</b> &gt; <b>Add New</b>. You will see an UI to create custom fields if you have Meta Box Builder already.

Meta Box has more than 50 field types, so you can choose any type of field to input any data you want. We already have a <a href="https://www.youtube.com/watch?v=WWeaM5vIAwM">video about all Meta Box field types</a> and each field’s features so you can learn about each one.

Just choose one from the drop-down list to have your wanted field as in the below picture.

<img class="aligncenter" src="https://i.imgur.com/6Ww0n7m.png" alt="Create custom fields for the products." width="1200" height="609" />

When configuring the fields, you should choose the easy-to-remember labels and IDs because you will need to use them in the next step.

Here are the custom fields I created. They’re simple so I don’t need to configure much.
<table style="height: 303px;" width="441">
<tbody>
<tr>
<td><b>Field Type</b></td>
<td><b>Label </b></td>
<td><b>ID</b></td>
</tr>
<tr>
<td><span style="font-weight: 400;">Text</span></td>
<td><span style="font-weight: 400;">Address</span></td>
<td><span style="font-weight: 400;">address</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">Single Image</span></td>
<td><span style="font-weight: 400;">Logo</span></td>
<td><span style="font-weight: 400;">logo</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">Select</span></td>
<td><span style="font-weight: 400;">Status</span></td>
<td><span style="font-weight: 400;">status</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">Checkbox List</span></td>
<td><span style="font-weight: 400;">Voucher</span></td>
<td><span style="font-weight: 400;">voucher</span></td>
</tr>
</tbody>
</table>
As for the <strong>Restaurant Status</strong> and <strong>Voucher</strong> field, they’re selection fields so we’ll have the <strong>Choice</strong> box to add options like this.

<img src="https://i.imgur.com/chQJGzA.png" alt="Add options for the Restaurant Status field" width="1200" height="643" /> Add options for the Restaurant Status field

<img src="https://i.imgur.com/SmJkWsR.png" alt="Add options for the Voucher field" width="1200" height="628" /> Add options for the Voucher field

After creating all the fields, move to the <strong>Settings</strong> tab. Remember to choose the <strong>Location</strong> as <strong>Post Type</strong> and select your product’s post type to apply these fields to it.

<img class="aligncenter" src="https://i.imgur.com/rbHdT1Z.png" alt="Choose the Location as Post Type of the product." width="1200" height="629" />

Now, when creating a new post in my <strong>Restaurant</strong> post type, the custom fields will be here.

<img class="aligncenter" src="https://i.imgur.com/9NVoxAg.png" alt="The custom fields are already in the post." width="1200" height="629" />

Let's move to the next step to display the Latest Products section on the frontend.
<h2>Step 3: Add a Section for the Latest Products on Homepage</h2>
You can create a new page or choose an existing page you want to add the section, and then edit it with Oxygen. I’m going to put it on my homepage.

<img class="aligncenter" src="https://i.imgur.com/j9wBOfr.png" alt="Choose the wanted page to add the latest product section, and edit it with Oxygen." width="1200" height="629" />

The latest products section is a list of posts, so we’ll choose the <strong>Repeater</strong> component first.

In this component settings, choose <strong>Query</strong> &gt; <strong>Custom</strong> &gt; <strong>Post Type</strong>, then search for the post type you want to get posts.

<img class="aligncenter" src="https://i.imgur.com/y2Mq1Fm.gif" alt="Choose Query &gt; Custom &gt; Post Type, then search for the post type you want to get posts." width="1200" height="675" />

Because we haven’t chosen any kind of information about the product to show yet, it’s still blank here.

<img class="aligncenter" src="https://i.imgur.com/7XzD8Jr.png" alt="Repeater is still blank when we haven't chosen any kind of product information yet." width="1200" height="629" />

Now, add some components to display them such as name, featured image, status, and so on.

First, to display featured images of the post. Add a <strong>Featured Image</strong> component.

<img class="aligncenter" src="https://i.imgur.com/NRXdTXE.gif" alt="Add a Featured Image component to display featured image for the post." width="1200" height="675" />

Then, you will see all the featured images of the posts.

<img class="aligncenter" src="https://i.imgur.com/OEp2S2v.gif" alt="The featured images of the posts are displayed." width="1208" height="613" />

To display the name of the restaurant means the post title, choose the <strong>Text</strong> component. Then, we need to connect this component to the post title to get dynamic data. Click the <strong>Insert Data</strong> button and go to the <strong>Post</strong> section, choose <strong>Title</strong>.

<img class="aligncenter" src="https://i.imgur.com/PjwOJoj.gif" alt="Choose Text component to display the restaurant's name and connect it to the post title to get dynamic data. " width="1200" height="675" />

Now, all the names of restaurants are shown here.

<img class="aligncenter" src="https://i.imgur.com/3filVJK.png" alt="All the restaurant's name are shown" width="1200" height="629" />

For the address, choose the <strong>Text</strong> component as well. However, you need to connect it to a <strong>Meta Box field</strong> to get data. Following the actions as I did in the below gif.

<img class="aligncenter" src="https://i.imgur.com/KIE1YFV.gif" alt="Settings for Address field." width="1200" height="675" />

Then, the addresses corresponding to each restaurant will be shown.

<img class="aligncenter" src="https://i.imgur.com/OLcjlaC.png" alt="The addresses corresponding to each restaurant will be shown" />

For other information such as restaurant status and voucher, do likewise.

The <strong>Restaurant Status</strong> is a select field and it has options as I set when creating it as I show in this pic. Each option always has 2 elements that are value and label.

<img class="aligncenter" src="https://i.imgur.com/q18KBCm.png" alt="The options of Restaurant Status field" width="1200" height="629" />

So, when inserting data from this kind of field, you’ll see a setting:<strong> Return value or label?</strong> to choose the kind of output data.

<img class="aligncenter" src="https://i.imgur.com/VvPRCxO.png" alt="Choose the kind of output data in a setting - Return value or label?" width="1200" height="732" />

For the logo, it’s a single image field, so I choose the <strong>Code Block</strong> component and set it as <strong>PHP &amp; HTML</strong>.

<img class="aligncenter" src="https://i.imgur.com/RISqvE0.png" alt="Choose the Code Block component to display the logo" width="1200" height="629" />

Add this below code to the box.
<pre>&lt;?php
    $image = rwmb_meta( 'logo', array( 'size' =&gt; 'origin' ) );
    echo '&lt;img src="', $image['url'], '"&gt;';

?&gt;</pre>
<img class="aligncenter" src="https://i.imgur.com/PM7ujrC.png" alt="Add code to Code Block to display the logo" width="1200" height="629" />

<strong>In this code</strong>:
<ul>
 	<li><code>$image = rwmb_meta( 'logo', array( 'size' =&gt; 'origin' ) );</code> is used to get the data from the Logo field;</li>
 	<li><code>echo '&lt;img src="', $image['url'], '"&gt;';</code> is used to display the image.</li>
</ul>
Save the changes for this page and go to it in the front end to see how the latest products section is displayed.

<img class="aligncenter" src="https://i.imgur.com/BCQoARQ.gif" alt="The latest products section is displayed after editing with Oxygen." width="1204" height="611" />

It doesn't look as good as I want. So I will style it in the next steps.
<h2>Step 4: Restructure Components and Set CSS Classes for Elements</h2>
<h3>Restructure Components</h3>
Before styling my latest products section, I will add several additional components, including <strong>Div</strong> tag to rearrange all the components into a better structure.

<img class="aligncenter" src="https://i.imgur.com/SqYWovd.gif" alt="Add additional components to have a better structure before styling." width="1200" height="675" />

<img class="aligncenter" src="https://i.imgur.com/kPL2Ykw.png" alt="Add Div tag to rearrange all the components into a better structure" width="1200" height="629" />

As you see the latest products section at the beginning of this post, when users hover over a featured image of a restaurant, a <strong>View Detail</strong> button will appear. So I’ll add a <strong>Text Link</strong> component and rename it.

<img class="aligncenter" src="https://i.imgur.com/ZRvFEYQ.png" alt="Setting for View Detail." width="1200" height="629" />

I also want to link the <strong>View Detail</strong> button to the post URL so that people can click it to see the post, so I inserted data from <strong>Permalink</strong> to it.

<img class="aligncenter" src="https://i.imgur.com/RhhNSDT.gif" alt="Insert data from Permalink to link the View Detail button to the post URL ." width="1200" height="629" />
<h3>Add Classes for Elements</h3>
Here are my classes for each element. They will be used in the next steps for styling so I list them here for your better following.
<table style="height: 530px;" width="853">
<tbody>
<tr>
<td><b>Element</b></td>
<td><b>Class</b></td>
</tr>
<tr>
<td><span style="font-weight: 400;">Restaurant</span></td>
<td><span style="font-weight: 400;">list-restaurant</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">Repeater</span></td>
<td><span style="font-weight: 400;">slider-res</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">Div</span></td>
<td><span style="font-weight: 400;">contain-restaurant</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">Div</span></td>
<td><span style="font-weight: 400;">cover-image-res</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">Image</span></td>
<td><span style="font-weight: 400;">image-res</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">Voucher</span></td>
<td><span style="font-weight: 400;">voucher-res</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">Logo</span></td>
<td><span style="font-weight: 400;">logo</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">Name</span></td>
<td><span style="font-weight: 400;">name-res</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">Address</span></td>
<td><span style="font-weight: 400;">address-res</span></td>
</tr>
<tr>
<td><span style="font-weight: 400;">Status</span></td>
<td><span style="font-weight: 400;">status-res</span></td>
</tr>
</tbody>
</table>
<h2>Step 5: Create Slider for the Latest Products Section</h2>
To display the latest products section as a slider, we have to add CSS and JS. However, instead of adding directly to the theme file, I installed an additional plugin called <strong>My Custom Functionality</strong>. So when I change the theme, it won’t be affected. You can download this plugin <a href="https://github.com/srikat/my-custom-functionality">here</a> and install it on your WordPress website as well.
<h3>Download JS and CSS library</h3>
I will use the Slick Slider library for my JS and CSS. Download it here.

You will see many files there, but we just need to use these 3 files: slick.css, slick-theme.css, and slick-min.js.

Go to the folder of <strong>My Custom Functionality </strong>plugin and upload them into the corresponding js and css folders.
<h3>Set Up the Slider Effect</h3>
To set up the slider effect of Slick Slider, I’ll create a new <code>custom.js</code> file in the <code>js</code> folder and add this code.

<img class="aligncenter" src="https://i.imgur.com/LyA6Zdm.png" alt="Add code to the custom.js file." width="1200" height="648" />
<pre>jQuery(document).ready(function ($) {
    jQuery(".list-restaurant .slider-res").slick({
        infinite: false,
        dots: false,
        autoplay: false,
        speed: 800,
        autoplaySpeed: 4000,
        slidesToShow: 3,
        slidesToScroll: 3,
        nextArrow: '&lt;button class="next-btn"&gt;Next&lt;/button&gt;',
        prevArrow: '&lt;button class="prev-btn"&gt;Previous&lt;/button&gt;'
    });
    jQuery('.status-res span').each(function () {
        if (jQuery(this).html() == 'Open') {
            jQuery(this).parent().addClass('open');
        } else {
            jQuery(this).parent().addClass('close');
        }
    });
})</pre>
<strong>In the code</strong>:
<ul>
 	<li><code>jQuery(".list-restaurant .slider-res").slick({</code>: to create a slider for the elements in the <code>slider-res</code> class. And the slider will have the style of the Slick Slider library;</li>
 	<li><code>jQuery('.status-res span').each(function () {</code>: to create a dynamic class based on the returned values of the status in the section that I put in the <code>status-res</code> class. If the returned value is open, the class will be <code>open</code>. If the returned value is close, the class will be <code>close</code>. Depending on the created class, I will have two different styles for the two statuses of the restaurant.</li>
</ul>
<h3>Declare the JS and CSS files</h3>
We need to declare the JS and CSS files that we have just uploaded. Do it by adding this code to the <code>custom_enqueue_files()</code> function in the <code>plugin.php</code> file of the My Custom Functionality plugin.
<pre>wp_enqueue_style('slick', plugin_dir_url( __FILE__ ).'/assets/css/slick.css');
wp_enqueue_style('slick-theme', plugin_dir_url( __FILE__ ).'/assets/css/slick-theme.css');
wp_enqueue_script('custom', plugin_dir_url( __FILE__ ).'/assets/js/custom.js', ['jquery']);
wp_enqueue_script('slick-min', plugin_dir_url( __FILE__ ).'/assets/js/slick.min.js', ['jquery']);</pre>
<img class="aligncenter" src="https://i.imgur.com/eeM9IBR.png" alt="Add code to the plugin.php file" width="1200" height="648" />

Now, go to the homepage, the latest products section has already turned into a slider like this.

<img class="aligncenter" src="https://i.imgur.com/gHlSn6b.gif" alt="The latest products section has already turned into a slider" width="1200" height="675" />

But it hasn’t looked good yet. So, it’s time to add some additional CSS.
<h2>Step 6: Add CSS to Style the Latest Products Section</h2>
In the Oxygen preview, choose <strong>Manage</strong> &gt; <strong>Stylesheet</strong> and <strong>Add Stylesheet</strong>. Then, add some CSS.

<img class="aligncenter" src="https://i.imgur.com/DVMzMS6.gif" alt="Choose Manage &gt; Stylesheet and Add Stylesheet and add some CSS." width="1200" height="675" />

This is the CSS that I used:

<a href="https://github.com/wpmetabox/tutorials/blob/master/display-latest-posts-with-Oxygen/custom.css">https://github.com/wpmetabox/tutorials/blob/master/display-latest-posts-with-Oxygen/custom.css</a>

Let’s see how the latest products section displays on the Homepage. It’s much more beautiful, isn’t it?

<img class="aligncenter" src="https://i.imgur.com/MfUjf4J.gif" alt="The latest products section turned to the beautiful look" width="1600" height="812" />

To refer to all the code and the library that I used, you can visit here:

<a href="https://github.com/wpmetabox/tutorials/tree/master/display-latest-posts-with-Oxygen">https://github.com/wpmetabox/tutorials/tree/master/display-latest-posts-with-Oxygen</a>
<h2>Last Words</h2>
We’ve gone through all the steps to <strong>display the latest products section using Meta Box plugin and Oxygen Builder</strong>. Try it out and share the results in the comment section. In the event that you have projects using another page builder, refer to the other posts in this series. Or if you want to suggest any tutorials, feel free to leave a comment. Thank you for reading. Good luck!