Skip Navigation

[Resolved] Display a product page inside a modal window integrated inside a Views

This thread is resolved. Here is a description of the problem and solution.

Problem:

I want to be able to display the full product page (in the future inside a modal window) in product listing page.

Solution:

In the products listing page, you will need to use another shortcode: [wpv-woo-buy-or-select]

Relevant Documentation:

https://toolset.com/documentation/user-guides/views-shortcodes/#vf-154336

This support ticket is created 5 years, 9 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

Tagged: 

This topic contains 12 replies, has 2 voices.

Last updated by Pat 5 years, 9 months ago.

Assisted by: Luo Yang.

Author
Posts
#1232642

Pat

Hello,

I want to display products list in a table Views but also, give the possibility to the users to chose the right product configuration before adding it to the cart, without having to reload the page.

So, I have created a Views to list the product (just display the title, excerpt and price)
Then, I'm using the TH extra product options and the options appear only in a product page. So, my idea is to place a modal window in each line of the listing Views and insert the product page inside this window in order to have all needed info and options displayed.

For this, I have created a specific Views that list 1 product with a filter on the product ID. In this Views, I have placed the product page template in the loop.

So, normally, when I open the window, it should display all product page info, but this is not the case. It seems that everything that is linked to the shortcode [wpv-woo-buy-options] is not display.

Any idea?
Regards
Pat

#1233144

Hello,

The problem you mentioned above is abnormal, please try these:
1) Make sure you are using the latest version of Toolset plugins.
2) Deactivate all other plugins, and switch to wordpress default theme 2019, remove the popup window JS codes,
And test again.
3) Display the shortcode [wpv-woo-buy-options ...] directly in the "Views to list the product", check if it is working.
4) Also check if there is any PHP/JS error in your website:
https://toolset.com/documentation/programmer-reference/debugging-sites-built-with-toolset/

#1233258

Pat

Hi Luo,

Thanks for your advices. I have made everything yo proposed and this is still not working. The [wpv-woo-buy-options add_to_cart_text="AJOUTER AU PANIER"] shorcode is not displayed.

Here are the different elements of my site :

First Views (modal-dun-produit) to display the shortcode :

	<!-- wpv-loop-start -->
		<wpv-loop>[wpv-woo-buy-options add_to_cart_text="AJOUTER AU PANIER"]
		</wpv-loop>
	<!-- wpv-loop-end -->

This Views is filtered thanks to a shortcode by ids

Second Views (liste-pizza-sans-modal) that calls the first one :

	<!-- wpv-loop-start -->
		<wpv-loop>
				[wpv-view name="modal-dun-produit" ids="[wpv-post-id]"]
		</wpv-loop>
	<!-- wpv-loop-end -->

I have placed this inside a page :

[wpv-view name='liste-pizza-sans-modal']

And the result is that only the title is displayed !

Any idea?
Regards
Pat

#1233616

Did you get any JS/PHP error logs? Can you share them here?
Does the shortcode [wpv-woo-buy-options add_to_cart_text="AJOUTER AU PANIER"] work when you display it directly?

If you need more assistance, please provide a database dump file of your website, also point out the problem page URL, I need to test and debug it in my localhost, thanks

#1233671

Thanks for the details, I am downloading the files, will update here if there is anything found

#1233693

Here are what I found:
1) In the products listing page, you will need to use another shortcode: [wpv-woo-buy-or-select]
https://toolset.com/documentation/user-guides/views-shortcodes/#vf-154336
This shortcode outputs the Add to cart button for the product listing page.

The shortcode [wpv-woo-buy-options] works only in single product page:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-woo-buy-options
This shortcode outputs the Add to cart button on the Product detail pages for simple products.

2) For the question:
My aim in the end is to first display a list of products (like a table views) with a button in each line able to open a modal window.

There isn't such a built-in feature within Toolset, you might consider custom codes, for example, setup a button with HTML codes, after user click the button open a bootstrap modal iframe window, in this popup window, display the single product page.

More help:
hidden link
https://stackoverflow.com/questions/25565716/load-iframe-in-bootstrap-modal

#1233712

Pat

Hi Luo,

Not sure to have been sufficiently clear.
Concerning your remarks and in order to simplify, I have made the following modification :
Use only one Views to list products and add the product template inside the loop :

	<!-- wpv-loop-start -->
		<wpv-loop>
				[wpv-post-body view_template="produit"]
		</wpv-loop>
	<!-- wpv-loop-end -->

In the Views product template, I still have :

<div class="col-sm-12">
  <h1>[wpv-post-title]</h1>
<div class="col-sm-6">
  [wpv-woo-list_attributes]
  [wpv-woo-product-price]
</div>
<div class="col-sm-6">
  [wpv-woo-buy-options add_to_cart_text="AJOUTER AU PANIER"]
</div>
</div>

So, the product page add to cart shortcode is well integrated in the product template and the listing Views is only to call the product page templates for each of the founded products.

And the add to cart button is still not displayed !!!
Did I miss something?

Concerning the modal, I'm OK to use Bootstrap but it seems that there are some compatibility issues between Toolset and Bootstrap. I will open a specific ticket on this.

Regards
Pat

#1233716
home-page.JPG

I think there is a misunderstanding.

The shortcode [wpv-woo-buy-options] works only in single product page, for example: in your database dump file:
hidden link
hidden link
See the document I mentioned above:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-woo-buy-options

But in your case, you are displaying a product listings in home page, so it needs to use another shortcode :
[wpv-woo-buy-or-select]

For example, you can edit the content template "Produit":
hidden link

Replace the shortcode from:
[wpv-woo-buy-options add_to_cart_text="AJOUTER AU PANIER"]
To:
[wpv-woo-buy-or-select add_to_cart_text="AJOUTER AU PANIER"]

And test again, it works fine in my localhost, see screenshot home-page.JPG

#1233722

Pat

Hi Luo,

You(re right concerning the shortcode but that's not what I'm searching. When you use [wpv-woo-buy-or-select add_to_cart_text="AJOUTER AU PANIER"], then you just have the ability to add to the cart.

I want to be able to display the full product page (in the future inside a modal window).
This is the only way to display all potential options that are defined thanks to the TM Extra Product Option plugin.

So, here is the way of working I'm willing for my users :
1. They access to the product listing page
2. They chose the right product
3. In front of the product title, there is a button to open a modal window
4. When they click on the button, the modal open and the product page is displayed.
5. They can chose all potential options and place the product in the cart and continue to add other products from the same product listing page

Any idea?
Regards
Pat

#1233741

I have already provide the answer above:
https://toolset.com/forums/topic/display-a-product-page-inside-a-modal-window-integrated-inside-a-views/#post-1233693

You can use modal to open a iframe popup window, in this HTML iframe tag display the single product page, please let me know if you need assistance for it.

#1233755

Pat

Hi Luo,

I'm OK with your proposal, that's working. In general, I'm not found of iframe. Would it be possible to find another way avoiding iframes (just using Toolset features to integrate a product page inside a Views?

Regards
Pat

#1234109

As you see, there isn't such a built-in feature within Toolset plugins, you can add a feature request for it:
https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

Our developers will evaluate it.

Currently, I suggest you use shortcode [wpv-woo-buy-or-select].

#1234112

Pat

Hi Luo,

As already mentioned, the [wpv-woo-buy-or-select] shortcode does not display the options provided thanks to TM Extra product options plugin. So this is not possible for me. I will use iframes in a first step.
Regards
Pat