Forum for discussing general topics related to Couch.
9 posts Page 1 of 1
Hei Guys,

My project includes a shopping cart - which thanks to Couch is fully functional. However, the product items in the website put to use a QUICK VIEW MODAL - which well, basically pops-up to reveal the related item's product info. The pop-up also includes an 'Add To Cart' button that is supposed to add the product to the shopping cart and then fade-out.

The problem is that, I can't seem to make the quick view modal work. In fact, the modal does not show the updated product info - It just shows the couch tags that I had included.

This is the trigger for activating the modal. The quick_view.php is in a folder labelled 'modals'.
Code: Select all
<div class="centered_buttons">
<a href="<cms:show k_page_link />" class="button_dark_grey middle_btn quick_view" data-modal-url="<cms:show k_site_link />modals/quick_view.php">Quick View</a>
</div>


Here is complete product code that houses the QUICK VIEW BUTTON.
Code: Select all
<div class="product_item">                                                                  
  <div class="image_wrap">                                                                     
   <img src="<cms:show pp_product_thumb_medium />" alt="<cms:show k_page_title />">
   <div class="actions_wrap">
            <div class="centered_buttons">
      <a href="<cms:show k_page_link />" class="button_dark_grey middle_btn quick_view" data-modal-url="<cms:show k_site_link />modals/quick_view.php">Quick View</a>                                                                           
      </div>
   </div>
</div>
<div class="description align_center">
   <p><a href="<cms:show k_page_link />"><cms:show k_page_title /></a></p>
   <div class="clearfix product_info">
   <p class="product_price alignleft"><b>€<cms:number_format pp_price /></b></p>
</div>
<a href="<cms:show k_page_link />" class="button_blue middle_btn add_to_cart">add to cart</a>
</div>      
</div>

Here is the quick view modal file:
Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:no_cache />

<div id="quick_view" class="modal_window">
  <button class="close arcticmodal-close"></button>
  <div class="clearfix">
    <div class="single_product">
      <div class="image_preview_container" id="qv_preview">
        <img id="img_zoom" data-zoom-image="<cms:show product_image />" src="<cms:show pp_product_thumb />" alt="<cms:show k_page_title />">
      </div>
      <div class="product_preview" data-output="#qv_preview">
        <div class="owl_carousel" id="thumbnails">
          <img src="<cms:show pp_product_thumb_small2 />" data-large-image="<cms:show pp_product_thumb2 />" alt="<cms:show k_page_title />">
          <img src="<cms:show pp_product_thumb_small3 />" data-large-image="<cms:show pp_product_thumb3 />" alt="<cms:show k_page_title />">
        </div>
      </div>
    </div>
    <div class="single_product_description">
         <h3 class="offset_title"><a href="#"><cms:show k_page_title /></a></h3>
         <div class="description_section">
            <table class="product_info">
               <tbody>
                  <tr>
                     <td>Name </td><td><a href="#"><cms:show k_folder_name /></a></td>
                  </tr>
                  <tr>
                     <td>Availability: </td><td><span class="in_stock"><cms:show prochem_availability /></span></td>
                  </tr>
                  <tr>
                     <td>Code: </td><td><cms:show prochem_product_no /></td>
                  </tr>
               </tbody>
            </table>
         </div>
         <hr>
         <div class="description_section"><cms:excerpt count='150'><cms:show product_prochem_desc /></cms:excerpt></div>
         <hr>
         <cms:pp_product_form class="cart-form">
               <table class="product_info">
                  <tbody>
                        <tr>
                              <td>Price: </td><td><span class="product_price"><b> €<cms:number_format pp_price /></b></span></td>
                        </tr>
                        <tr>
                              <td>Prev. Price: </td><td><span class="theme_color">€<cms:number_format vat_price /></span></td>
                        </tr>
                  </tbody>
                  </table><br />
               <div class="description_section_2 v_centered">
                     <span class="title">Quantity:</span>
                     <div class="qty min clearfix">
                           <span class="theme_button" data-direction="minus">&#45;</span>
                           <input type="text" name="qty" value="1">
                           <span class="theme_button" data-direction="plus">&#43;</span>
                     </div>
               </div>
               <div class="buttons_row">
                     <button class="button_blue middle_btn">Add to cart</button>
               </div>
         </cms:pp_product_form>
      </div>
  </div>
</div>
<?php COUCH::invoke(); ?>


As a side note, upon trying to view the modal, I generated this error:

Warning: require_once(teho/cms.php): failed to open stream: No such file or directory in W:\www\modals\quick_view.php on line 1 Fatal error: require_once(): Failed opening required 'teho/cms.php'
(include_path='.;W:/usr/local/php/includes;W:/usr/local/php/pear;W:/home/admin/www/plugins/pear/PEAR')
in W:\www\modals\quick_view.php on line 1


Among other futile actions, I also tried to move the quick_view.php to the snippets folder in the couch folder, and of course changed the link to point to the file but to no success.

I have basically ran out of ideas thus any ideas or solution would be highly appreciated.

Thanks in advance
I had a look at the issue (thanks for entrusting me with the creds) and found that the template in question (to be viewed within the modal box) was not listed anywhere in the admin-sidebar.

That would mean that the template is not registered with Couch and so any Couch tags within it would not be parsed and processed. That explains why -
..the modal does not show the updated product info - It just shows the couch tags that I had included

As to why the template fails to register was suggested in the error message received when trying to do so -
Warning: require_once(teho/cms.php): failed to open stream: No such file or directory in W:\www\modals\quick_view.php

Allow me to explain what is happening.
The quick_view.php template is situated within a subfolder ('modals') of your site. Since it is not situated in the root, like the other templates, the first line of PHP in it that connects it to Couch needs to be modified to make it locate the admin folder.

So, instead of what you have currently -
Code: Select all
<?php require_once( 'couch/cms.php' ); ?>

- that line needs to be modified so as to make it as follows -
Code: Select all
<?php require_once( '../couch/cms.php' ); ?>

Please see the following for more details on this - viewtopic.php?f=4&t=7246#p9983

Please try making the suggested change and the template should get registered. Once it appears in the admin sidebar, things should work as expected.

Hope it helps.
Thanks @KK for getting back to me.

I have made the necessary changes and made sure that the 'quick_view modal is registered by couch.

Unfortunately, upon clicking on the product quick preview, the modal pops up blank.
As in, all the editable regions are blank but if I click on add item to cart, it redirects to the cart although it doesn't add the product. I believe the modal is now registered under couchCart although the respective product info is not been parsed.

I have had a look at the source code in the browser's console and it seems, the editable regions are unknown. here is something from the console.

Code: Select all
<div class="owl_carousel" id="thumbnails">
    <img src(unknown) data-large-image alt>
    <img src(unknown) data-large-image alt>
</div>
I have taken the liberty of making some changes to your code.
As this might help somebody in the future, I am describing those changes below along with the screenshots.

To begin with, the use-case is as follows -
Untitled-1.png
Untitled-1.png (108.05 KiB) Viewed 50435 times

As can be seen from the screenshot above, it is a simple listing of products (using <cms:pages>) with only the addition of a button labelled 'Quick view' right in the center of product image.

Clicking that button opens up a popup that (is supposed to) shows details of the targeted product. Problem was that the popup showed up as follows (without any data fetched for the product) -
Untitled-2.png
Untitled-2.png (65.34 KiB) Viewed 50435 times


To understand the problem, let us take a look at the relevant code in listing page that shows the popup button -
Code: Select all
<div class="actions_wrap">
    <div class="centered_buttons">
        <a href="<cms:show k_page_link />" class="button_dark_grey middle_btn quick_view" data-modal-url="<cms:show k_site_link />modals/quick_view.php">Quick View</a>                                                                           
    </div>
</div>

As can be seen, the part in the code above that fetches the content finally displayed in a popup is this -
Code: Select all
data-modal-url="<cms:show k_site_link />modals/quick_view.php"

So, the popup actually fetches (via AJAX) http://www.yoursite.com/modals/quick_view.php and displays whatever content is returned by that URL.

The URL in question actually executes a Couch managed template named 'modals/quick_view.php' (as we have seen in the previous posts of this thread), so let us see what the template contains. A shortened version of the template's source is this -
Code: Select all
<?php require_once( '../teho/cms.php' ); ?>
<cms:no_cache />

<div id="quick_view" class="modal_window">
    <h3 class="offset_title"><a href="#"><cms:show k_page_title /></a></h3>

    <td>Tuote Merkki </td><td><a href="#"><cms:show k_folder_name /></a></td>

    <div class="description_section"><cms:excerpt count='50'><cms:show product_prochem_desc /></cms:excerpt></div>

    <cms:pp_product_form class="cart-form">
            ...
    </cms:pp_product_form>
</div>
<?php COUCH::invoke(); ?>

As can be seen above, the Couch code us referring to page-specific variables e.g. k_page_title etc.

Try using your browser to directly access the above template by typing its URL in the address bar (the same URL used by AJAX to fetch contents for the popup) and you should see that the page displayed shows *exactly* the same content as the popup and does *not* have any details of any product.

Looking again at the template code above, it shouldn't really be any surprise as the template is not associated with any page whatsoever.

I think you'll remember, by default the 'page-view' of any template is automatically associated with a cloned-page if the ID of the page is passed via a URL querystring parameter named 'pg' e.g. http://www.yoursite.com/blog.php?pg=10 will bring up blog post with id of 10. Without any page specified, the template loads up in the 'list-view'.

The above, however, happens only if the page specified happens to be cloned from the same template.

In your particular case, the products are actually cloned pages of a different template named 'koneet.php'.
So we cannot simply pass the id of a page belonging to 'koneet.php' template and expect 'modals/quick_view.php' template to automatically load that page for the Couch tags to refer to.

We'll have to do that explicitly ourselves and that would solve the problem.

So coming to the solution, it will require two steps -
1. The URL invoking the popup will need to pass ID of the product to 'modals/quick_view.php'

2. Now that the 'modals/quick_view.php' has the product ID, we'll have to make it explicitly fetch that page from 'koneet.php' template before executing the Couch tags in it.

For step 1, I changed the button code from the original to this-
Code: Select all
<div class="actions_wrap">
    <div class="centered_buttons">
        <a href="<cms:show k_page_link />" class="button_dark_grey middle_btn quick_view" data-modal-url="<cms:add_querystring "<cms:link 'modals/quick_view.php' />" "my_product=<cms:show k_page_id />" />">Quick View</a>                                                         
    </div>
</div>

The code to note above is this -
Code: Select all
data-modal-url="<cms:add_querystring "<cms:link 'modals/quick_view.php' />" "my_product=<cms:show k_page_id />" />"

So now the 'data-modal-url' parameter will show a URL like this -
Code: Select all
http://www.yoursite.com/modals/quick_view.php?my_product=11

As you can seem, we are appending the ID of each product as the 'my_product' querystring parameter.

For step 2, we move to the 'modals/quick_view.php' template which now has to extract the product ID being passed to it and then fetch that page into context.

The modified code became as follows -
Code: Select all
<?php require_once( '../teho/cms.php' ); ?>
<cms:no_cache />

<cms:set my_product_id="<cms:gpc 'my_product' method='get' />" scope='global' />
<cms:if "<cms:not "<cms:page_exists id=my_product_id masterpage='koneet.php' />" />" >
    <cms:abort > 
        Product not found!
    </cms:abort>
</cms:if>

<cms:pages masterpage='koneet.php' id=my_product_id limit='1'>
    <div id="quick_view" class="modal_window">
        <h3 class="offset_title"><a href="#"><cms:show k_page_title /></a></h3>

        <td>Tuote Merkki </td><td><a href="#"><cms:show k_folder_name /></a></td>

        <div class="description_section"><cms:excerpt count='50'><cms:show product_prochem_desc /></cms:excerpt></div>

        <cms:pp_product_form class="cart-form">
           ...     
        </cms:pp_product_form>
    </div>
</cms:pages>
<?php COUCH::invoke(); ?>

Please compare it to your original code referenced a few paragraphs above.
There are two points to note in the new code -

First we get the querystring parameter named 'my_product' from the URL and then (V.V.IMP) validate it by testing whether a page by that ID exists. If not, we end the output by a simple message -
Code: Select all
<cms:set my_product_id="<cms:gpc 'my_product' method='get' />" scope='global' />
<cms:if "<cms:not "<cms:page_exists id=my_product_id masterpage='koneet.php' />" />" >
    <cms:abort > 
        Product not found!
    </cms:abort>
</cms:if>

Next, we *envelope* your entire original code with a <cms:pages> block that fetches from 'koneet.php' template, the page with the indicated ID -
Code: Select all
<cms:pages masterpage='koneet.php' id=my_product_id limit='1'>
    <div id="quick_view" class="modal_window">
        <h3 class="offset_title"><a href="#"><cms:show k_page_title /></a></h3>

        <td>Tuote Merkki </td><td><a href="#"><cms:show k_folder_name /></a></td>

        <div class="description_section"><cms:excerpt count='50'><cms:show product_prochem_desc /></cms:excerpt></div>

        <cms:pp_product_form class="cart-form">
           ...     
        </cms:pp_product_form>
    </div>
</cms:pages>

And now the Couch tags should have access to data to the product in question.
Sure enough, the popup now shows up as follows -
Untitled-3.png
Untitled-3.png (176.48 KiB) Viewed 50435 times

It has been a long explanation but the intention was to make things clearer for others who might chance upon this thread later.

Hope it helps.
@KK,

Oh my days!

I wish I had better words to describe the gratitude that I have in me right now for all of your efforts in solving the issue.

So, I will just say, THANK YOU - cannot stress it more. All worked out exceptionally.

By the way, just out of curiosity, would there be a more simpler way to prevent the 'modals/quick_view.php' from explicitly fetching ONLY pages from 'koneet.php' template before executing the Couch tags in it.
In other words I understand that the:
Code: Select all
<cms:set my_product_id="<cms:gpc 'my_product' method='get' />" scope='global' />
<cms:if "<cms:not "<cms:page_exists id=my_product_id masterpage='koneet.php' />" />" >
    <cms:abort > 
        Product not found!
    </cms:abort>
</cms:if>
<cms:pages masterpage='koneet.php' id=my_product_id limit='1'>
    <!-- code --->
</pages>


ONLY fetches the pages from the koneet template and therefore if I created a duplicate modal e.g quick_view_2.php and set the masterpage='new_page.php', it should work. Thus, my question. The reason I ask is because as you may have seen from my project's files, I will have more products that will be cloned form different pages rather than the koneet.php template.

You have already done much in fact it feels awkward having to ask for more solutions.

Again, a million thanks!
@kajoe14, you can modify this
Code: Select all
http://www.yoursite.com/modals/quick_view.php?my_product=11

to this?
Code: Select all
http://www.yoursite.com/modals/quick_view.php?my_template=2&my_product=11


In quick_view.php there gonna be a secure list of associations, respectively, such as
if my_template = 1 then use 'template1.php'
if my_template = 2 then use 'template2.php'
else 'Product not found'
Hei Trendoman,

I actually had to edit my earlier reply, as I was finally able to make it so that each individual conable page that included different products could be able to preview a quick_view modal.

Basically, I took a more cumbersome approach of creating additional quick_view.php files - that is, quick_view2.php and quick_view3.php. After registering them couch as @KK has instructed me to do, I went ahead and adjusted the action hook on the indivudual pages to fetch its respectively assigned quick_view modal file:
Code: Select all
<div class="actions_wrap">                                                                        <div class="centered_buttons">                                                                                 
     <a href="<cms:show k_page_link />" class="button_dark_grey middle_btn quick_view" data-modal-url="<cms:add_querystring "<cms:link 'modals/quick_view2.php' />" "my_product=<cms:show k_page_id />" />">Quick View</a>                                                         
</div>
</div>


All finally worked out, and I am greatly thankful to both you and @KK for all your assistance.

By the way, I wasn't able to use the if/else suggestion that you had indicated earlier, but if i believe it sounded easier - though I couldn't make it work,

Again, thanks
Have you solve your problem? :x
As always KK explains things beautifully!
I was about to implement a modal too and I came here to find out, does the modal handle the AJAX call ?

To be more clear what I'm trying to find out is, is there a way for the modal to load only a certain piece of a page, say the amount of a product, or just the image of that product - without having to load the entire template page
---
You live many times, but only ever remember your lives.length - 1
---
Image
9 posts Page 1 of 1