Good Evening,

I am working on an ordering page template. Everything seems to be working, except for the text fields generated when variants [*TEXT*] are entered. They don't allow text entry at all. I am also noticing that the Product Description is not adhering to the formatting that is established in the rich text/editable area. I know I have to be missing something obvious. Any insights much appreciated!

http://exclusive.excelgraphics.ink/demo.php

Thanks!

Page Markup:

Code: Select all

<?php require_once 'couch/cms.php'; ?>
<cms:template title='Demo' clonable='1'>
    
    <cms:editable 
        name='product_desc' 
        label='Product description' 
        type='richtext' 
        order='10'
    />
    
    
    
    <cms:editable name='group_images' label='Images' type='group' order='20' />
        <cms:editable 
            name='product_image' 
            label='Main Image' 
            show_preview='1' 
            preview_width='150'
            type='image' 
            group='group_images'
            order='10'
        />
        
        <cms:editable
            name='pp_product_thumb'
            label='Thumbnail'
            show_preview='1'
            assoc_field='product_image'
            type='thumbnail'
            group='group_images'
            order='11'
        />

        
        
    <cms:editable name='group_price' label='Price' type='group' order='30' />    
        <cms:editable 
            name='pp_price' 
            label='Base Price' 
            desc='Amount in USD (correct upto 2 decimal points without the $ sign)'
            maxlength='10'
            required='1'
            search_type='decimal'
            validator='non_zero_decimal'
            width='150'
            type='text' 
            group='group_price'
            order='10'
        />
        <cms:editable
            name='explain_discount_scale' 
            type='message'
            group='group_price'
            order='20'
            >
            <b>Quantity based pricing:</b> <i>(Tiered pricing)</i><br/>
            <font color='#777'>If the base price of this product varies based on the quantity purchased (useful for bulk purchases),<br>
            for example, if the base price is $10 but you want the price to be reduced by $2 (i.e. made $8) for purchase of more than 5 units, and by $3 (i.e. made $7) for purchase of more than 10 units, set it to:</font> <br/>
            <font color='blue'><pre>[ 5=2 | 10=3 ]</pre></font>
            <font color='#777'>where the string above stands for '<i>reduce price by 2 for more than 5, reduce by 3 for more than 10</i>'<br>
            If you want the reduction to be a percentage of the base price (instead of a fixed value as done above), add a '%' sign e.g.<br></font>
            <font color='blue'><pre>[ 5=2 | 10=3 ]%</pre></font>        
            <font color='#777'>where the string above now stands for '<i>reduce price by 2% for more than 5, reduce by 3% for more than 10</i>'</font>
        </cms:editable>   

        <cms:editable 
            name='pp_discount_scale' 
            label=':'
            type='text' 
            group='group_price'
            validator='regex=/\[\[?([^\]]*)\](\]?)\s*(%?)/'
            order='21'
        />
    

    
    <cms:editable name='group_variants' label='Variants' type='group' order='40' />    
        <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 name='group_shipping' label='Shipping' type='group' order='50' /> 
        <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='10'
        />

        <cms:editable
            name='explain_shipping_scale' 
            type='message'
            group='group_shipping'
            order='20'
            >
            <b>Shipping Charges:</b><br/>
            <font color='#777'>Set the option below if you want to set up a sliding scale of shipping charges based on the number of this item ordered.<br>
            For example, if you charge $3 to deliver one to five units, $7 to ship six to 15 units, and $10 to ship more than 15 units, set it to:</font> <br/>
            <font color='blue'><pre>[ 0=3 | 5=7 | 15=10 ]</pre></font>
            <font color='#777'>where the string above stands for '<i>3 for more than 0, 7 for more than 5, 10 for more than 15</i>'</font>
        </cms:editable>   

        <cms:editable 
            name='pp_shipping_scale' 
            label=':'
            type='text' 
            validator='regex=/\[\[?([^\]]*)\](\]?)\s*(%?)/'
            group='group_shipping'
            order='21'
        />

</cms:template>

<!doctype html>
<html>
<head>
   <meta charset="utf-8">
   <title>Exclusive</title>
   <link href="css/demo.css" rel="stylesheet" media="screen,projection" type="text/css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700" rel="stylesheet" media="screen,projection" type="text/css">
   <!--[if lt IE 9]>
      <script src="js/ie9.js" type="text/javascript"></script>
   <![endif]-->
</head>
<body>
    
        <header>
            <div class="container">
                <a href="demo.php" class="logo"><img class="img-responsive" src="images/demo.png" alt="logo"/></a>
            </div>
            <nav class="navbar">
            <div class="container">
                <ul>
                    <li class="nav-button">
                        <a href="demo.php" class="nav">Demo Products</a>
                    </li>
                    <li class="nav-button">
                        <a href="order.php" class="nav">Your Order</a>
                    </li>
                    <li class="nav-button">
                        <a href="order.php" class="nav cart"><span class="quantity"><cms:pp_count_items /></span> item(s)</a>
                    </li>
                </ul>
            </nav>
            </div>
            </div>
        </header>
    <div class="container">
       <cms:pages order='asc'>
         <div class="row">
                <cms:if k_count != '1'>
                   <div class="products-hr"></div>
                </cms:if>
            <div class="col-md-8 col-xs-12">
               <div class="product">
                  <img src="<cms:show product_image />" class="img-responsive product_image" alt="<cms:show k_page_title />" title="<cms:show k_page_title />">
               </div>
                        <div class=" ">
                            <p><strong>Description:</strong><br><cms:excerpt count='50'><cms:show product_desc /></cms:excerpt></p>
                        </div>
                </div>
                <div class="col-md-4 col-xs-12">
                  <h1 class=" row product-headline"><cms:show k_page_title /></h1>
                  <div class="row product-details">
                  <cms:pp_product_form class="cart-form">
                     <div class="product-options">
                                <cms:pp_product_options >
                                    <label><cms:show option_name />:</label> 
                                    <cms:pp_option_values /><br>
                                </cms:pp_product_options >
                     </div>
                            <div class="purchase-box">
                                    <label class="quantity-label">Qty:</label>
                                    <input class="product-quantity" type="number" name="qty" min="1" step="1" value="1" title="Quantity">
                                    <input class="button product-add" type="submit" value="Add to Cart">
                            </div>
                            <div class="row"></div>
                        </cms:pp_product_form>
               </div>
            </div>
         </div>
            </cms:pages>
   </div>
   

<div id="cart-modal" class="modal modal-wide fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Your Order</h4>
      </div>
      <div class="modal-body">
        <img src="images/ajax-loader.gif" class="ajax-loader" width="32" height="32" alt="Loading...">
      </div>
      <div class="modal-footer">
        <button type="button" class="button col-xs-12" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
        // Set global values for 'js/cart-modal.js' that follows
        var cart_link = "order-modal.php";
        var checkout_link = "order.php";
    </script>
  <script src="js/order-modal.js" type="text/javascript"></script>
  <script src="js/input-restriction.js" type="text/javascript"></script>
</body>
</html>
<?php COUCH::invoke(); ?>

[KK]

Hi,

I had a look and It appears to be a problem with your CSS.
Specifically line 130 of demo.css you are using -

Code: Select all

.product-options{padding-top:4px;font-size:0}

I removed that font-size of 0 (in dev console) and was able to edit the regions.

Hope it helps.

Thanks! I noticed that as well, but when I toggled it in the dev tools it didn't make a difference. I will try deleting it completely and seeing if that makes a difference.

I had double-checked the original CSS provided with the Couchified-Cart and "font-size:0;" appears 3 times, including the sample noted. The lines in question have not been altered in the CSS for another cart/ordering page I am working on and it works fine--the font-size property doesn't cause any problems. Could another property I have edited or added for this page be causing the conflict?

Thanks again!

Deleting entirely does seem to have solved that problem. I must have a conflicting property somewhere. If it turns out to be anything of consequence, I'll report back.

Thanks again!