Problems, need help? Have a tip or advice? Post it here.
8 posts Page 1 of 1
Good Evening,

I have perused everything in the forums that came up under "mobile links." I have also searched Stack Exchange and a few others, and I didn't find a match for my issue, so I hope this isn't a repeat.

I have set up blog/news and order/request pages for my client's site. The lists and page links in question all follow the "<a href="<cms:show k_page_link />"><cms:show k_page_title /></a>" layout. They work beautifully on a desktop but inconsistently--oft not at all--on mobile devices. The links are not touchable. Is there a known issue with "cms:show"-based links on mobile platforms? If so, how best to work around it?

URLs for the pages exhibiting this issue are: https://excelgraphics.ink/products.php and https://excelgraphics.ink/press.php

I will follow up with the code for products.php and related pages as it is the worse of the two and the setup for both is similar.

Any suggestions/experience greatly appreciated!

Best,
Jane
Here is the markup for the master page, "products.php"

Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Products' 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'
            width='125'
            height='125'
            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>
<cms:no_cache />
<cms:if k_is_page >
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Mobile Specific -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<title><cms:show k_page_title /></title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link href="css/excel1.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/excel2.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/excel3.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/excel4.css" rel="stylesheet" type="text/css" media="screen">
<link rel="stylesheet" href="css/bootstrap-magnify.min.css">
<link href="https://fonts.googleapis.com/css?family=Didact+Gothic" rel="stylesheet">
<!--[if lt IE 9]>
    <script src="js/ie9.js" type="text/javascript"></script>
  <![endif]-->
</head>

<body class="excelfont">

<cms:embed 'head.php' />

<?php
include "banner/banner.php";
?>

<div class="info-primary">
  <div class="trim top"></div>
  <div class="whtbkgrd">
    <div class="container">
   
      <div class="row">
        <div class="col-sm-12">
          <h1 class="txtred">request&nbsp;<b class="txtgry h3">&#43;</b>&nbsp;<b class="h3"><cms:show k_page_title /></b></h1>   
        </div>
      </div>

      <div class="row">
        <div class="col-sm-12 excelbox">
          <ul>
              <li class="btn txtgry pull-right">
                <a href="<cms:link "<cms:pp_config 'tpl_products' />" />" class="nav">explore more products</a>
              </li>
              <li class="btn txtgry pull-right">
                <a href="<cms:pp_cart_link />" class="nav"><cms:pp_count_items /> item(s) in my quote request</a>
              </li>
            </ul>
        </div>
      </div>

<div class="row">
       
        <div class="col-md-9 col-xs-12 col-md-push-3">

          <div class="col-md-7 col-sm-12 excelbox"> 
            <div class="img-responsive">
              <img data-toggle="magnify" src="<cms:show product_image />" alt="<cms:show k_page_title />" title="<cms:show k_page_title />">
            </div>
            <div class="h3 txtred pull-right"><cms:show k_page_title /></div>
            <div class="product-details">
              <p><cms:show product_desc /></p>
            </div>
          </div>

          <div class="col-sm-12 col-md-5 sftbkgrd2 well">
            <cms:pp_product_form class="cart-form">
              <div class="excelbox">
                <p class="h4 txtgry"><b>product options:</b></p> 
                <div class="product-options details">
   <cms:pp_product_options >
      <cms:if option_type='list'>
        <cms:if option_modifier='*' || option_modifier='**'>
            <label><cms:show option_name />:</label><br/>
            <input type="hidden" name="on<cms:show k_count />" value="<cms:show option_name />" style="display:none;">
            <cms:set radio_input_name="os<cms:show k_count />" />
            <cms:pp_option_values>
                <label class="radio-label">
                    <input type="radio" name="<cms:show radio_input_name />" value="<cms:show k_count />"<cms:if k_count='0'> checked="true"</cms:if>>
                    <cms:show option_val />
                    <cms:if option_price >
                        [<cms:show option_price_sign /><cms:pp_config 'currency_symbol' /><cms:show option_price />]
                    </cms:if>
                </label>
                <cms:if option_modifier='*'><br/></cms:if>
            </cms:pp_option_values>
        <cms:else />
            <label><cms:show option_name />:</label><br/>
            <input type="hidden" name="on<cms:show k_count />" value="<cms:show option_name />" style="display:none;">
            <select name="os<cms:show k_count />">
                <cms:pp_option_values>
                    <option value="<cms:show k_count />">
                        <cms:show option_val />
                        <cms:if option_price >
                            [<cms:show option_price_sign /><cms:pp_config 'currency_symbol' /><cms:show option_price />]
                        </cms:if>
                    </option>
                </cms:pp_option_values>
            </select>
        </cms:if>
      <cms:else />
        <label><cms:show option_name />:</label><br/>
        <input type="hidden" name="on<cms:show k_count />" value="<cms:show option_name />" style="display:none;">
        <textarea name="os<cms:show k_count />"> </textarea>
      </cms:if>
   </cms:pp_product_options>
   <br>
</div>
              </div>

<div class="purchase-box">
                <div class="excelbox details"><label class="quantity-label">QUANTITY:</label>
                  <input class="product-quantity" type="number" name="qty" min="1" step="1" value="1" title="Quantity">
                </div>
                <div class="excelbox">
                  <input class="btn btn-default center-block product-add details" type="submit" value="Add to Quote">
                </div>
              </div>

            </cms:pp_product_form>

          </div>
        </div>

          <div class="col-md-3 col-xs-12 col-md-pull-9">
            <h2 class="txtbrnz ">printed products</h2>
            <ul class="productlist">
              <cms:pages masterpage='products.php' orderby='page_title' order='asc'>
                <li class="txtblk"><a href="<cms:show k_page_link />"><cms:show k_page_title /></a></li>
              </cms:pages>
            </ul>
          </div>

  <cms:embed 'tag.php' />

    </div>
  </div>
</div>
<div class="trim bottom"></div>

<cms:embed 'footer.php' />

<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 txtred">your quote request</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="btn btn-default col-xs-12" data-dismiss="modal" onClick="window.location.reload()">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 src="js/bootstrap-magnify.min.js"></script>
<script type="text/javascript">
        // Set global values for 'js/cart-modal.js' that follows
        var cart_link = "<cms:link "<cms:pp_config 'tpl_ajax_cart' />" />";
        var checkout_link = "<cms:pp_checkout_link />";
    </script>
  <script src="js/cart-modal.js" type="text/javascript"></script>
  <script src="js/input-restriction.js" type="text/javascript"></script>

</body>
</html>
<cms:else />
  <cms:embed 'productstwo.php' />
</cms:if>
<?php COUCH::invoke(); ?>
The markup for the embedded page in the "Snippets" folder is:

Code: Select all
<?php require_once( 'couch/cms.php' ); ?>

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Mobile Specific -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Printed Products</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link href="css/excel1.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/excel2.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/excel3.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/excel4.css" rel="stylesheet" type="text/css" media="screen">

<link href="https://fonts.googleapis.com/css?family=Didact+Gothic" rel="stylesheet">
<!--[if lt IE 9]>
    <script src="js/ie9.js" type="text/javascript"></script>
  <![endif]-->
</head>

<body class="excelfont">

<cms:embed 'head.php' />

<div class="container-fluid eyecandy bnnr1"></div>


<div class="info-primary">
  <div class="trim top"></div>
  <div class="whtbkgrd">
    <div class="container">
   
      <div class="row">
        <div class="col-sm-12">
          <h1 class="txtred">request a quote</h1>   
        </div>
      </div>

      <div class="row">
        <div class="col-sm-12 excelbox">
          <ul>
              <li class="btn txtgry pull-right">
                <a href="<cms:link "<cms:pp_config 'tpl_products' />" />" class="nav">explore more products</a>
              </li>
              <li class="btn txtgry pull-right">
                <a href="<cms:pp_cart_link />" class="nav"><cms:pp_count_items /> item(s) in my quote request</a>
              </li>
            </ul>
        </div></div>


           
   
      <div class="row">
      <!-- Product -->
        <div class="col-md-9 col-xs-12 col-md-push-3"> 
         
            <cms:pages masterpage='products.php' order='asc'>
               
        <div class="col-md-4 col-sm-12 excelbox">
            <a href="<cms:show k_page_link />"><img src="<cms:show product_image />"" class="img-responsive" alt="<cms:show k_page_title />" title="<cms:show k_page_title />"></a>
            <h4 class="title txtred text-center"><a href="<cms:show k_page_link />"><cms:show k_page_title /></a></h4>
        </div>
       
            </cms:pages>
   
    </div>
       

          <div class="col-md-3 col-xs-12 col-md-pull-9">
            <h2 class="txtbrnz ">printed products</h2>
            <ul class="productlist">
              <cms:pages masterpage='products.php' orderby='page_title' order='asc'>
                <li class="txtblk"><a href="<cms:show k_page_link />"><cms:show k_page_title /></a></li>
              </cms:pages>
            </ul>
          </div>

     

      <div class="row">
        <div class="col-sm-12">
          <p class="excelbox tagline"><span class="txtbrnz"><a href="products.php">printing</a></span> <span class="txtred">&#43;</span> <span class="txtbrnz"><a href="design.php">design</a></span> <span class="txtred">&#43;</span> <span class="txtbrnz"><a href="fulfillment.php">fulfillment</a></span></p>
        </div>
      </div>

    </div>
  </div>
</div>
<div class="trim bottom"></div>


<cms:embed 'footer.php' />

<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>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-83770908-1', 'auto');
  ga('send', 'pageview');
</script>
<script src="js/input-restriction.js" type="text/javascript"></script>
</body>
</html>
<?php COUCH::invoke(); ?>
Hi Jane :)

I'd like to draw your attention to two points -

1. Couch tags all execute server-side and their job is only to output HTML.
So what actually runs on your mobile devices is nothing but static HTML/JS. If something doesn't seem to work ok in the browser, we'll need to scrutinize the outputted HTML.

2. More importantly - the HTML outputted by the tags is actually what you have provided yourself in the templates. I.e. Couch does not make any changes to your design on its own accord. It only adds to your design the data inputted in the admin-panel.

Take a look at the statement that bothers you -
Code: Select all
<a href="<cms:show k_page_link />"><cms:show k_page_title /></a>

After it is processed by Couch, the generated HTML would look something like this -
Code: Select all
<a href="http://www.site.com/blog/somepage.html">Some Text</a>

As you can see, Couch has not changed your HTML markup (the <a> tag in this case) in the least and has only replaced its own tags with data from the backend.

More pertinent to the problem you are reporting, the HTML outputted above is as plain an HTML markup as it can get.
No chance of it, per se, being the cause of any frontend problem.

The cause, I think, would be how the surrounding elements in the HTML design interact and don't play well together.
But then that is squarely a frontend problem with the design.

I suggest you please try the following -
put your original static design (plain HTML/CSS/JS) on the server and access it through the mobile devices.
Please check if it shows the same problem. If it does, we know what to do.

If, however, the reported problem is not seen, do a 'Save as HTML' with the Couch generated problem page. Put it on your server and access it using the mobile devices.

If it shows the problem (as it should because the dynamically generated Couch output is exactly the same as this),
compare the original HTML with the generated one to see what changed. The changed portion should yield a clue as to what is causing the trouble.

Hope it helps.
Thanks KK,

Your suggestion led me to one issue, an extra double-quotation mark that didn't initially get picked out by the validator [insert facepalm + embarrassed smile here]. Removing it fixed the problems with the embedded page from the Snippets folder, as well as other--unrelated but similar--pages. Unfortunately, it didn't fix the issues with the above-referenced master page (https://excelgraphics.ink/products.php) after an item is selected and content is no longer based on the embedded page.

The page parses and validates without issue. I suspect, but can't confirm, that the problem may have something to do with the variants; as the variants and following product menu are effected on this page but the product menu works fine elsewhere. I followed the example here (http://docs.couchcms.com/concepts/shopping-cart-1.html#listing-products) in order to achieve resizable text areas.

Has anyone else out there run into similar mobile-device issues when editing/customizing variants?
Hi,

I visited the page you mentioned on my desktop and could see the problem by resizing my Chrome to mobile dimensions.

From what I could see, it is plainly a CSS issue with the design.

Try this -
do what I did and visit the page on desktop and resize the browser window to the extent that the mobile layout of your design kicks in. You'll find that the links become unresponsive. From Chrome's developer tools, try selecting one of the links and you'll find that instead of the link, the "<p class="excelbox tagline">" element gets selected.

Which means that this element is overlapping the links in mobile view (something that does not happen on larger viewports) and this would explain the problem you are facing.

As a further test, using the same developer tools, right click on the "<p class="excelbox tagline">" and 'delete' it - you'll find that with the overlapping layer gone, the links begin working as expected.

I think you need to revise your design to rectify this issue.

Hope this reply helps.
Misplaced </div>.

[insert additional *facepalm* here]

KK,

Thank you so much. Sometimes when I have been staring at something for far too long, I miss the OBVIOUS! Your support has been very much appreciated.

Thanks again for a great CMS.

Best,
Jane
You are welcome, Jane :)
I am glad I could help.
8 posts Page 1 of 1
cron