How to Create Review Cards With Dynamic Star Ratings in Oxygen (Follow Along Full Tutorial)
Vložit
- čas přidán 29. 07. 2024
- This is the type of Oxygen tutorial I'd normally publish in my Inner Circle. For info on the inner circle, go here: digitalambition.co/inner-circle/
THIS TUTORIAL REQUIRES NO PAID ADD-ONS ;)
Why is this called a follow along tutorial? Because I want to challenge you to follow along and build exactly what I'm building on a blank website so you can truly absorb each and every aspect of the training (what you'll learn is detailed below).
Are you going to participate? Drop the hashtag #intraining below in the comments to let me know you're taking action!
Here's what you'll learn:
• How to create & configure a custom post type
• How to attach custom fields to a custom post type
• How to work with various types of custom fields including images, numbers, dropdowns, and more
• How to create review cards with proper semantic HTML structure
• BEM naming structure for custom classes
• Basic flex layout techniques
• Auto margin techniques
• nth-of-type margin techniques
• How to use the Oxygen Grid Builder
• How to use the Oxygen Repeater
• How to use the Oxygen Repeater Advanced Query Builder
• How to insert dynamic data from custom fields
• How to use object-fit for constraining and positioning images
• How to use data attributes
• How to manipulate elements with CSS by targeting their data attribute value
• nth-of-type pseudo classes for targeting specific items
0:00 - Intro & Context
02:05 - Design Inspiration
02:52 - Getting Started
03:26 - Creating Reviews Custom Post Type
06:30 - Creating Custom Fields
09:55 - Adding Reviews
16:40 - Creating a Page & Repeater Grid
23:30 - Creating the Review Card
48:28 - Adding the Data Attribute
50:05 - Changing Stars With Data Attribute Values
59:40 - Checking Work & Wrap Up
You're incredible! Great Kevin! I follow this tutorial applying to a live site that I'm going to restyle, using both Automatic CSS and custom css classes. I am proud to be inside the inner circle as the value you provide is so big! Thanx again and greeting to your dog 😄
You're very welcome!
Awesome. My Oxygen skills have improved from the ground up since I started watching your tutorials. Thanks a lot!
I even go as far as writing it all out. For Quick access
Ok, I'm on my 4th watch and completed a nice reviews page with dynamic stars. Combined this training with the text column training to come up with a nicely formatted masonry-style review page that is mobile responsive from 3 columns to 1 column.
Kevin is an amazing educator. I've learned so much so quickly. Inner Circle is highly worth it too.
💪🏻💪🏻💪🏻
Great tutorial. I followed along using bricks. Used the conditional logic instead of CSS to hide/show the stars as i found it more fun to do so. would like a follow up on both implementing this in Bricks, and also on how to make the stars show up on Google search.
Thanks. Great training though I'd like to see the structure panel open as you go through the construction.
Great video....but because you mentioned the Top ten uses for Custom Post Types...I went and had a look at that first....😁
Side quiz: Have you spotted the critical issue yet? Reply to this comment if you've spotted it. I'll give you a hint --- it's a logic issue. It's definitely fixable, but important to know it exists first. Final part of the "follow along" tutorial is to fix the logic issue yourself :)
You mean the rating being something like 3.0 or 4.0 which would incorrectly show the half star?
1.5 stars?
I "Think " I have fixed this issue but CSS seems convoluted which is juxtaposition to what I am thinking it should be
Wow... you are a genius Kevin!
just did this on a testsite with ACSS. Works well, got to implement this for a client...!
Very helpfull. Learned something new with the attributes.
I always follow along with every tutorial and do it myself. Takes a bit longer to watch, but that's the best way to learn and remember! #intraining
This is pure gold 🙌
Would love to know more about atributes. Thanks a lot Kevin.
Superb tutorial.
Awesome! Thank you
Maybe this will be useful for someone. I need to show not halves of the stars, but all at once, only if, for example, rating = 1, I need 1 star to be yellow, and 4 of a different color (gray), if rating = 2, then 2 stars are yellow, 3 are gray, etc. here is the code:
[data-customer-rating="1"].review_star-wrapper .review_star--solid:nth-child(1),
[data-customer-rating="2"].review_star-wrapper .review_star--solid:nth-child(-n+2),
[data-customer-rating="3"].review_star-wrapper .review_star--solid:nth-child(-n+3),
[data-customer-rating="4"].review_star-wrapper .review_star--solid:nth-child(-n+4),
[data-customer-rating="5"].review_star-wrapper .review_star--solid:nth-child(-n+5) {
color: #FABD05;
}
this is so good!
Great video, as always!! 🤩
#intraining from Peru! Awesome video, I love it! I hope you can make more!
Greetings from Peru 🔥
Awesome! thank you so much 👌
dynamic star what is i always looking for sir... thank you so much for this wonderful tutorial.. love u
Happy to help!
#intraining
I am always waiting for your videos, they help me grow a lot more. Thanks!
Anyway this is a great tutorial. Watched from beginning to end
Always #intraining along (and thanks to) you !
#intraining right now....Amazing content sr. I have unlocked many learning levels thanks to your content.
💪🏻
I was waiting for your new video thanks i will see this.....
I guess this would also be usefull to create reviews by logged -in users right? Adding an view extra fields for user data and reviewing multiple elements/post types on a website. Like for example a store?
I hope to see you on Pods Framework, who knows what you can come up with.
#intraining I'm sure you know this by now, I'm your biggest fan. So much value in your videos.
🙌
No you are not. I am.
#intraining super video as always Kevin
#intraining Another great video! I have never seen a video of yours where I didn't put anything I learned into pratice.
I try to keep it super practical :)
#intraining Awesome video - thx. Do it step by step.
👏🏻
Takk!
Joined late. Will watch later.
Loved it. Touched a few thing that I wanted to figure out.
In training
Kevin would you be able to do something else on the application of DATA ATTRIBUTES in CSS either here or inner-circle
I’ve done other tutorials using them. There’s another here on CZcams dealing with hero background images
Where did you name it [data-customer-rating]?
Thanks a lot for this class.
Under the advanced panel > attributes
Hmm? New to Meta Box here... I installed the free version of Meta Box and don't see the option for custom fields? I only have "Post Types" and "Taxonomies". The description says no paid add-ons used. What am I missing here?
Maybe I was mistaken. I haven’t used the free version of metabox in a long time. I’m any case, you can use CPT UI and ACF and do the same thing for free with those.
Why not to use Oxygens conditions insted of css?
If you can make it work with conditions then go for it. CSS route was easy.
#intraining
Can we do same with show all time 5 stars with correct filling. Like 3.5 rating have 3 and half filled stars with one unfilled star?
What's the unfilled star for?
Like it always shows 5 stars and fill only the correct rating.
@@udithawishvajith9334 You mean fill a star proportionally according to its rating instead of using a half-star for all decimals?
It's no matter the decimal value. Any decimal value can have a half star.
@@udithawishvajith9334 That's exactly what I showed in the tutorial.
B U T Ful
?
@@Gearyco it reads as BEAUTIFUL
LMAO! Dawg! This is a "f*****" family channel... obviously! Dog (lab? retriever?) barking; wife calling (what ya want for dinner? FOOD!); bambinos at school?... but ya still "EFed up" if your wife watches this 🤪
Great tutorial BTW!
The kids have heard it all. 😅 The dog is a pit.
@@Gearyco Haha! Pit = I should've recognised that. I was gonna say bulldog, but too typical. I adore pits and Steffs! Had a few and saved countless of them through an org here.
lol
Hi Kevin , Thanks for this video, i'm working on a site where i needed to acheive this dynamic star ratings, this was super helpful, thank you.
I wonder if you'd still recommend this method for bricks, does anything change? - Also, is this css snippet available in the innercircle?
We are releasing a frames component for it
In training
#intraining
#intraining
#intraining
#intraining
#intraining