I am trying to integrate couchcart into a existing couchcms website and downloaded the files from the url https://docs.couchcms.com/concepts/shopping-cart-1.html

I have copied all the files over onto the site and copied the code from index.php into product.php (that file creates the products) and then I have a file called all-products.php which displays the products but when I click add to basket button, the modal popup does not appear. The url is https://www.thejmgjobber.co.uk/all-products.php

In addons/cart/config.php I have renamed the file from index.php to product.php so looks like the following code

Code: Select all

$pp['tpl_products'] = 'product.php';

Below is the product.php code

Code: Select all

<?php require_once( 'cms/cms.php' ); ?>

<cms:template title='Create Products' clonable='1' order='3'>
    
<cms:config_list_view  orderby='weight'>
<cms:field 'k_page_title' />
<cms:field 'k_page_date' />
<cms:field 'k_up_down' />
<cms:field 'k_actions' />
</cms:config_list_view>
    
<cms:editable name='product_info_group' label='Product Info' type='group' collapsed='1' order='1' />

<cms:editable type='text' name='product_meta_description' label='Product Meta Description' group='product_info_group' order='1' />
<cms:editable type='text' name='product_meta_keywords' label='Product Meta Keywords' group='product_info_group' order='2' />
    
<cms:editable name='product_main_image' label='Main Product Image' type='image' group='product_info_group' order='3' />
<cms:repeatable name='additional_product_images' label='Additional Product Images' stacked_layout='1' group='product_info_group' order='4'>
<cms:editable name='additional_product_image' label='Additional Product Image' type='image' />
</cms:repeatable>
    
<cms:editable type='text' name='product_name' label='Product Name' group='product_info_group' order='5' />
    
<cms:editable type='text' name='pp_price' label='Product Price' desc='Amount in GBP (correct upto 2 decimal points without the £ sign)' required='1' search_type='decimal' validator='non_zero_decimal' group='product_info_group' order='6' />    
    
<cms:editable name='group_variants' label='Variants' type='group' order='7' />    
        <cms:editable
            name='explain_options' 
            type='message'
            group='group_variants'
            order='10'
            >
            <b>Product Variants:</b><br/>
            <font color='#777'>If this product has variants (e.g. Size, Color or a Custom message) 
            add each to the box below using the following format:</font> <br/>
            <font color='blue'><pre>
Color[Red | Black=+3  | Green=-2]        
Size[Large | Medium | Small]*
Your Message[*TEXT*]
Your Message[*TEXT*=5]</pre></font>
            <font color='#777'>Note that<br/>
            1. Each variant is on a separate line.<br/>
            2. If an option has a different price than the base price, you can specify the price difference too.<br/> 
            For example, the 'Black' option of 'Color' above will add $3 to the base price while the 'Green' will deduct $2. <br>
            3. To create radio buttons instead of a dropdown add a '*' at the end as with 'Size' in the example above. <br/>
            4. To create a textbox (if the variant consists of custom text e.g. message to be printed on T-Shirts), use '*TEXT*' as shown in the third variant above. You can also specify any price difference as shown in the last variant.</font>
        </cms:editable>   
        
        <cms:editable 
            name='pp_options' 
            label=':'
            height='130'
            type='textarea' 
            group='group_variants'
            order='11'
        />
    
<cms:editable type='text' name='product_item_code' label='Product Item Code' group='product_info_group' order='8' />
<cms:editable type='text' name='product_availability' label='Product Availability' group='product_info_group' order='9' />
<cms:editable type='richtext' toolbar='full' name='product_short_description' label='Short Product Description' group='product_info_group' order='10' />
    
<cms:editable type='richtext' toolbar='full' name='product_full_description' label='Full Product Description' group='product_info_group' order='11' />

<cms:repeatable name='product_videos' label='Product Videos' stacked_layout='1' group='product_info_group' order='12'>
<cms:editable name='product_video' label='Product Video' type='file' />
</cms:repeatable>
    
<cms:editable name='group_shipping' label='Shipping' type='group' order='13' /> 
        <cms:editable 
            name='pp_requires_shipping' 
            label='Requires shipping' 
            desc='Select No if this is not a physical product that requires shipping'
            opt_values='Yes=1 | No=0'
            opt_selected = '1'
            type='radio'
            group='group_shipping'
            order='1'
        />
    
    <cms:editable
            name='explain_shipping_scale' 
            type='message'
            group='group_shipping'
            order='20'
            >
            <b>Shipping Charges:</b><br/>
            <font color='#777'>Shipping cost by order total: Set the option below if you want to set up a sliding scale of shipping charges based on the order’s total cost.<br>
            For example, for orders between £85 to £285, shipping cost is £5, and for orders of £285 or more, shipping cost is £15</font> <br/>
            <font color='blue'><pre>[ 85=5 | 285=15 ]</pre></font>
        </cms:editable>
    
    <cms:editable 
            name='pp_shipping_scale' 
            label=':'
            type='text' 
            validator='regex=/\[\[?([^\]]*)\](\]?)\s*(%?)/'
            group='group_shipping'
            order='21'
        />
    
</cms:template>

<?php 
$title = "Product Name - The JMG Jobber";

$pgDesc="";

$pgKeywords="";

include ( 'includes/header.php' );
?>
  
  <!-- Main Container -->
  <section class="main-container col1-layout">
    <div class="main">
      <div class="container">
        <div class="row">
          <div class="col-main">
            <div class="product-view">
              <div class="product-essential">
                <form action="#" method="post" id="product">
                  <div class="product-img-box col-lg-5 col-sm-5 col-xs-12">
                    <div class="product-image">
                      <div class="product-full"> <img class="img-responsive" id="product-zoom" src="<cms:show product_main_image/>" data-zoom-image="<cms:show product_main_image/>" alt="product-image"/> </div>
                      <div class="more-views">
                        <div class="slider-items-products">
                          <div id="gallery_01" class="product-flexslider hidden-buttons product-img-thumb">
                            <div class="slider-items slider-width-col4 block-content">
                                <cms:show_repeatable 'additional_product_images'>
                                    <div class="more-views-items">
                                        <a href="#" data-image="<cms:show additional_product_image/>" data-zoom-image="<cms:show additional_product_image/>"> <img class="img-responsive" id="product-zoom"  src="<cms:show additional_product_image/>" alt="product-image"/>
                                        </a>
                                    </div>
                                </cms:show_repeatable>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- end: more-images --> 
                  </div>
                  <div class="product-shop col-lg-7 col-sm-7 col-xs-12">
                    <div class="product-name">
                      <h1><cms:show product_name/></h1>
                    </div>
                    <div class="price-block">
                      <div class="price-box">
                        <p class="special-price"><span id="product-price-48" class="price"><cms:show product_price/></span></p>
                      </div>
                    </div>
                    <div class="info-orther">
                      <p>Item Code: <cms:show product_item_code/></p>
                      <p>Availability: <span class="in-stock"><cms:show product_availability/></span></p>
                    </div>
                    <div class="short-description">
                      <cms:show product_short_description/>
                    </div>
                    <div class="form-share">
                      <div class="sendtofriend-print"> <a href="javascript:print();"><i class="fa fa-print"></i> Print</a></div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <div class="product-collateral col-lg-12 col-sm-12 col-xs-12">
            <div class="add_info">
              <ul id="product-detail-tab" class="nav nav-tabs product-tabs">
                <li class="active"> <a href="#product_tabs_description" data-toggle="tab"> Product Description </a></li>
                <li><a href="#product_tabs_custom" data-toggle="tab">Videos</a></li>
              </ul>
              <div id="productTabContent" class="tab-content">
                <div class="tab-pane fade in active" id="product_tabs_description">
                  <div class="std">
                    <cms:show product_full_description/>
                  </div>
                </div>
                <div class="tab-pane fade" id="product_tabs_custom">
                  <div class="product-tabs-content-inner clearfix">
                      <cms:show_repeatable 'product_videos'>
                          <cms:show product_video/>
                      </cms:show_repeatable>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Main Container End -->

<?php include( 'includes/footer.php' ); ?>
<?php COUCH::invoke(); ?>

Below is the all-products.php code

Code: Select all

<?php require_once( 'cms/cms.php' ); ?>

<cms:template title='All Products' order='2'>
    
</cms:template>

<?php 
$title = "All Products - The JMG Jobber";

$pgDesc="";

include ( 'includes/header.php' );
?>
  
  <!-- Main Container -->
  <section class="main-container col2-left-layout">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <article class="col-main">
            <h2 class="page-heading"> <span class="page-heading-title">All Products</span> </h2>
            <div class="category-products">
              <ol class="products-list" id="products-list">
                  <cms:pages masterpage='product.php' orderby='weight' order='desc' limit='10' paginate='1'>
                <li class="item">
                  <div class="product-image"><a href="<cms:show k_page_link/>"><img class="img-responsive" class="small-image" src="<cms:show product_main_image/>" alt="<cms:show product_name/>"></a></div>
                  <div class="product-shop">
                    <h2 class="product-name"><a href="<cms:show k_page_link/>"><cms:show product_name/></a></h2>
                      <cms:pp_product_form class="cart-form">
                    <div class="desc std">
                        <cms:show product_short_description/>
                    </div>
                          
                    <div class="price-box"> <span class="regular-price"> <span class="price">£<cms:number_format pp_price/></span></span></div>
                      
                      <div class="actions">
                          <label class="quantity-label">Qty:</label>
                          <input class="product-quantity" type="number" name="qty" min="1" step="1" value="1" title="Quantity">
                          <span class="add-to-links">
                              <input class="product-add" type="submit" value="ADD TO BASKET">
                          </span>
                      </div>
                      
                      <div class="product-options">
                          <cms:pp_product_options >
                              <label><cms:show option_name />:</label>
                              <br>
                              <cms:pp_option_values />
                              <br>
                          </cms:pp_product_options >
                      </div>
                      </cms:pp_product_form>
                      
                    <div class="actions">
                        <span class="add-to-links">
                            <a class="button btn-cart" href="<cms:show k_page_link/>"><span>View Product</span></a>
                        </span>
                    </div>
                  </div>
                </li>
                      </cms:pages>
                </ol>
                </div>

                  <div class="toolbar">
              <div class="row">
                <div class="col-sm-6 text-left">
                    <cms:pages masterpage='product.php' limit='10' paginate='1'>
                        
                        <ul class="pagination">
                    <cms:paginator adjacents='1'>
                        <cms:if k_crumb_type='page' >
                            <cms:if k_crumb_current>
                                    <li class="active"><span><cms:show k_crumb_text /></span></li>
                                    <cms:else />
                                    <li><a href="<cms:show k_crumb_link />"><cms:show k_crumb_text /></a></li>
                                    </cms:if>
                                </cms:if>
                        
                    </cms:paginator>
                            </cms:pages>
                            
                  <!--<ul class="pagination">
                      <li class="active"><span>1</span></li>
                      <li><a href="#">2</a></li>
                      <li><a href="#">3</a></li>
                      <li><a href="#">4</a></li>
                      <li><a href="#">5</a></li>
                  </ul>-->
                </div>
                    
              </div>
            </div>

          </article>
          <!--   ///*///======    End article  ========= //*/// --> 
        </div>
      </div>
    </div>
  </section>
  <!-- Main Container End -->
  
<?php include( 'includes/footer.php' ); ?>
<?php COUCH::invoke(); ?>

Sorry for the amount of code above but am really confused by it and unsure how to get it working

UPDATE: Sorry think got bit further, I just took the cart-modal popup js link off so it now redirects to cart.php instead of showing a popup so that's good and slowing winning I think