[Resolved] Price List for Menues (Restaurant)

[Author]

Posts

[kaiD]

Tell us what you are trying to do?
Hi, I´m trying to realize a price list for a restaurant with toolset views.
There is a widget in elementor pro which i use as an inspiration.
See: hidden link
Is it possible to create a view that looks similar to this? Specially the dotted line between Name and Price which has different lenghts depending on how long the name of item is? I have no clue how to do that. I´ll be happy for some support on that.

Is there any documentation that you are following?
No

Is there a similar example that we can see?
hidden link

Thanks a lot.
Kai

[Shane]

Hi Kai,

Thank you for getting in touch.

Yes this is actually possible to do, except we will need our own way of setting up the dotted line.

Does your site have elementor installed?

If so then we may be able to use the classes that elementor provides to construct this.

Please let me know.

Thanks,
Shane

[kaiD]

Hi Shane,

thanks for your quick response. That sounds great.
I´ve just upraded my account and installed views and types and also elementor pro on that site where i like to use the view as descriped.
Site URL is: hidden link

Is there something else you need from me at the moment? Please let me know.

Thanks for your help.

[Shane]

Hi Kai,

Ok so you should be able to build your view.

So your view will generate something similar to this below.

<ul class="wpv-loop js-wpv-loop">
		<wpv-loop>
			<li>[wpv-post-body view_template="Loop item in List Event"]</li>
		</wpv-loop>
	</ul>

Now since you have the elementor pro then the css for the price list should always be loaded so we will change the code above to

<ul class="elementor-price-list">
		<wpv-loop>
			<li>[wpv-post-body view_template="Loop item in List Event"]</li>
		</wpv-loop>
	</ul>

Notice the change in the class name of the list.

Then in our content template for the view then we will do.

<a href="#" class="elementor-price-list-item">				
				<div class="elementor-price-list-text">
									<div class="elementor-price-list-header">
											<span class="elementor-price-list-title">[wpv-post-title]</span>
																		<span class="elementor-price-list-separator"></span>
																			<span class="elementor-price-list-price">Price Shortcode Goes Here</span>
										</div>
															<p class="elementor-price-list-description">Item Description shortcode goes here.</p>
								</div>
				</a>

Please try this and let me know if it helps.
Thanks,
Shane

[kaiD]

Hi Shane,

thanks for your help so far. I´m new to toolset and i´ve tried to insert the code from you in the view but the output ist not what i´ve expected.

That are my codes:

In the Loop-Editor:

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<ul class="elementor-price-list">
<wpv-loop>

[wpv-post-body view_template="Loop item in List Event"]

</wpv-loop>

<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

In the Output Editor:

[wpv-layout-meta-html]

[wpv-post-title]

[types field='preis' format='FIELD_NAME: FIELD_VALUE'][/types]

[types field='speise-beschreibung'][/types]

You can see the result on this site: hidden link
It starts under the Headline "Toolset View"

I have no clue what i´ve done wrong.
Do you mind have another look. Thanks.

Kai

[Shane]

Hi Kai,

The problem is that you've copied my code exactly.

The part that is incorrect is here.

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<ul class="elementor-price-list">
<wpv-loop>

[wpv-post-body view_template="Loop item in List Event"]
</wpv-loop>

<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

When you generate your view it should generate [wpv-post-body view_template="Loop item in List Event"] with its own unique template name NOT "Loop item in List Event".

What you are to do is to replace the content inside the content template with this.

<a href="#" class="elementor-price-list-item">                
                <div class="elementor-price-list-text">
                                    <div class="elementor-price-list-header">
                                            <span class="elementor-price-list-title">[wpv-post-title]</span>
                                                                        <span class="elementor-price-list-separator"></span>
                                                                            <span class="elementor-price-list-price">Price Shortcode Goes Here</span>
                                        </div>
                                                            <p class="elementor-price-list-description">Item Description shortcode goes here.</p>
                                </div>
                </a>

So you need to create a view in its entirety by using the Loop wizard to add the content to your view in an unordered list format.

Then you can go ahead and replace the content in the content template with the code directly above.

Please let me know if this is clear or if further guidance is needed.

Thanks,
Shane

[kaiD]

My issue is resolved now. Thank you!