Responsive Avonlee Contempo

Hello :-) This great responsive template package is based on the Avonlee Contempo template. It has been built using the Responsive DIY Template Default for v1.5.x by rbarbour. Thank you again Raymond! If you are using the "legacy" Avonlee Contempo template you will notice some slight design changes (I hope improvements).

See the live demo here:

Responsive Avonlee Contempo Zen Cart Template

Template Features:

• Super flexible design perfect for all types of ecommerce stores--the possibilites are endless!

• Responsive 3 column display

• Optimized Drop Navigation for hand held devices

• Matching button set and icons included

• Responsive Home Page slideshow included

• Add your slide show images, set their links, enable/disable images/links, and set open in new window easily using the admin banner manager.

• Tabbed home page centerbox content for New Products, Featured Products, and Specials

• Add This social bookmarking added to all product pages (includes Facebook like button, Twitter Tweet Button, Pinterest Pin it button, and 300+ Sharing Services)

• Custom footer featuring a footer menu with quick links, information, customer service, and useful links (ez pages), integrated, and optional links to your Facebook, Twitter, Youtube, Pinterest, Google Plus, and blog.

• Customized product info page layout with expandable content areas for handheld devices

• Cross Browser tested using Firefox, IE10, IE9, IE8, Google Chrome, Opera, and Safari.

• Tested on the iPhone 5 with Mobile Safari 6.0; iPad 4 with Mobile Safari 6.0; Windows Phone 8 with IE10 Mobile; Blackberry Bold 9900 with Blackberry Browser 9900; and Android Nexus 4 with Chrome Mobile 18, Dolphin Mobile 9.3, Firefox Mobile 19, Marathon Mobile 4, Opera Mobile 12, Sleipnir Mobile 2.9

• W3C Valid XHTML and CSS

• Custom header including shopping cart totals (item count and dollar amount), checkout link, search, currencies with drop down menu, and languages.

• Comes with the following modules installed: Column Layout Grid, About Us Page, Footer Menu , Back to Top, Responsive Slides JS, Tabbed Home Page Modules

• Detailed HTML readme file with written instructions and screenshots, and links to videos for the installation and customization steps.

• Fully compatible with versions 1.3.8x, 1.3.9s, 1.5x. Would probably work with lower versions although it has not been tested.

Please post here with your questions, or any bugs you find. Be sure to read the readme.html file included in the template package before posting your question, and read the posts in this thread as you question has probably already been asked and answered ;)

Thanks,

Anne

Anne strikes again! :hug:

picandnix:

Anne strikes again! :hug:

LOL :smile: I am slowly updating the legacy template packages as well as adding in some new ones.

Thanks,

Anne

I am updating my site from the earlier version and cannot seem to be able to get rid of a "Featured" javascript box on the main page.
https://www.thecablestation.com

micmed:

I am updating my site from the earlier version and cannot seem to be able to get rid of a "Featured" javascript box on the main page.
https://www.thecablestation.com

It looks like you have figured it out ;)

Thanks,

Anne

Actually no I haven't. If I turn off "Categories - Always Show on Main Page" it shows back up. It is there right now.
Thanks

micmed:

Actually no I haven't. If I turn off "Categories - Always Show on Main Page" it shows back up. It is there right now.
Thanks

In the stylesheet_module_tabs.css file add this:

#moduleMenu-wrapper{display:none;}

Thanks,

Anne

Thank you very much.

micmed:

Thank you very much.

No problem ;)

Thanks,

Anne

I installed it and it is gorgeous. But, it isn't responsive for me. It just scales the full screen to tiny on a mobile device, not responsive. I've gone back through the installation instructions and combed the settings thinking maybe I did something wrong, but cannot figure it out.

marketingspartan:

I installed it and it is gorgeous. But, it isn't responsive for me. It just scales the full screen to tiny on a mobile device, not responsive. I've gone back through the installation instructions and combed the settings thinking maybe I did something wrong, but cannot figure it out.

This template package is indeed responsive. I have no idea what you have done wrong during the installation process.

Thanks,

Anne

Zen Cart 1.50
http://www.lightevolution.co.uk
Just spent the weekend updating to this awesome template.

I am very impressed with this template, I have just one issue that I have not been able to figure out namely on

On iPhones/Android Phones

Categories are fine but the following
Specials
Upcoming products
Featured Products

all have the following issue product images are too large and the price and the details CSS button are partly covered by product images.

I realise I could change all my product images to a smaller size images but I am not sure what size they should actually be to work as designed.

Could this be resolved by placing the button and pricing in front of the image or is there a way to change the images automatically to the right size.

The images are fine in the normal product view.

Thanks

David

brave1314:

Zen Cart 1.50
http://www.lightevolution.co.uk
Just spent the weekend updating to this awesome template.

I am very impressed with this template, I have just one issue that I have not been able to figure out namely on

On iPhones/Android Phones

Categories are fine but the following
Specials
Upcoming products
Featured Products

all have the following issue product images are too large and the price and the details CSS button are partly covered by product images.

I realise I could change all my product images to a smaller size images but I am not sure what size they should actually be to work as designed.

Could this be resolved by placing the button and pricing in front of the image or is there a way to change the images automatically to the right size.

The images are fine in the normal product view.

Thanks

David

If you want to make changes that will effect only certain devices, edit the appropriate media queries in the responsive.css file.

Thanks,

Anne

Love this template! :) I need to display the categories on the index page. When I activate that setting, the new/featured/special tab section disappears. Do you know of any way to have both options?

abcisme:

Love this template! :) I need to display the categories on the index page. When I activate that setting, the new/featured/special tab section disappears. Do you know of any way to have both options?

You will need to merge the code for the tabbed home page modules into the includes/templates/responsive_avonlee_contempo/templates/tpl_index_categories.php file.

Thanks,

Anne

Got it! Thanks!

<?php

/**

 * Page Template

 *

 * Loaded by main_page=index<br />

 * Displays category/sub-category listing<br />

 * Uses tpl_index_category_row.php to render individual items

 *

 * @package templateSystem

 * @copyright Copyright 2003-2006 Zen Cart Development Team

 * @copyright Portions Copyright 2003 osCommerce

 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0

 * @version $Id: tpl_index_categories.php 4678 2006-10-05 21:02:50Z ajeh $

 */

?>

<script type="text/javascript">
  $(document).ready(function() {
    $('a.moduleBox').click(function() { // show selected module(s)
    // variables
      var popID = $(this).attr('rel');
      var popNAV = $(this).attr('class');
    // hide all wrappers and display the one selected
      $('.centerBoxWrapper').hide();
      // check if all or single selection
      if (popID != 'viewAll') {
        $('#' + popID).fadeIn();
      } else {
       $('.centerBoxWrapper').fadeIn();
      }
    });
  });
</script>


<div class="centerColumn" id="indexCategories">

<?php if ($show_welcome == true) { ?>

<h1 id="indexCategoriesHeading"><?php echo HEADING_TITLE; ?></h1>



<?php if (SHOW_CUSTOMER_GREETING == 1) { ?>

<h2 class="greeting"><?php echo zen_customer_greeting(); ?></h2>

<?php } ?>



<!-- deprecated - to use - uncomment

<?php if (TEXT_MAIN) { ?>

<div id="" class="content"><?php echo TEXT_MAIN; ?></div>

<?php } ?>-->



<!-- deprecated - to use - uncomment

<?php if (TEXT_INFORMATION) { ?>

<div id="" class="content"><?php echo TEXT_INFORMATION; ?></div>

<?php } ?>-->



<?php if (DEFINE_MAIN_PAGE_STATUS >= 1 and DEFINE_MAIN_PAGE_STATUS <= 2) { ?>

<div id="indexCategoriesMainContent" class="content"><?php

/**

 * require the html_define for the index/categories page

 */

  include($define_page);

?></div>

<?php } ?>


<?php } else { ?>

<h1 id="indexCategoriesHeading"><?php echo $breadcrumb->last(); ?></h1>

<?php } ?>



<?php

if (PRODUCT_LIST_CATEGORIES_IMAGE_STATUS_TOP == 'true') {

// categories_image

  if ($categories_image = zen_get_categories_image($current_category_id)) {

?>

<div id="categoryImgListing" class="categoryImg"><?php echo zen_image(DIR_WS_IMAGES . $categories_image, '', SUBCATEGORY_IMAGE_TOP_WIDTH, SUBCATEGORY_IMAGE_TOP_HEIGHT); ?></div>

<?php

  }

} // categories_image

?>



<?php

// categories_description

    if ($current_categories_description != '') {

?>

<div id="categoryDescription" class="catDescContent"><?php echo $current_categories_description;  ?></div>

<?php } // categories_description ?>

<!-- BOF: Display grid of available sub-categories, if any -->

<?php

  if (PRODUCT_LIST_CATEGORY_ROW_STATUS == 0) {

    // do nothing

  } else {

    // display subcategories

/**

 * require the code to display the sub-categories-grid, if any exist

 */

   require($template->get_template_dir('tpl_modules_category_row.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_category_row.php');

  }

?>

<!-- EOF: Display grid of available sub-categories -->

<div id="moduleMenu-wrapper">

<?php
// bof module navigation
$show_display_nav = $db->Execute(SQL_SHOW_PRODUCT_INFO_MAIN);
if ($this_is_home_page) {
  echo '';
}
echo '<div id="moduleMenu">';
while (!$show_display_nav->EOF) {
  switch ($show_display_nav->fields['configuration_key']) {
    case 'SHOW_PRODUCT_INFO_MAIN_FEATURED_PRODUCTS':
      echo '<span class="navOne moduleSpan"><a href="javascript:void(0)" rel="featuredProducts" class="navOne moduleBox">' . MODULE_TABS_FEATURED . '</a></span>';
    break;
    case 'SHOW_PRODUCT_INFO_MAIN_SPECIALS_PRODUCTS':
      echo '<span class="navThree moduleSpan"><a href="javascript:void(0)" rel="specialsDefault" class="navThree moduleBox">' . MODULE_TABS_SPECIALS . '</a></span>';
    break;
    case 'SHOW_PRODUCT_INFO_MAIN_NEW_PRODUCTS':
      echo '<span class="navTwo moduleSpan"><a href="javascript:void(0)" rel="whatsNew" class="navTwo moduleBox">' . MODULE_TABS_NEW . '</a></span>';
    break;
  }
  $show_display_nav->MoveNext();
}
//echo '<span class="navFour moduleSpan"><a href="javascript:void(0)" rel="viewAll" class="navFour moduleBox">' . MODULE_TABS_ALL . '</a></span>';
echo '<br class="clearBoth" />';
echo '</div>';
// eof module navigation
?>

<?php

$show_display_category = $db->Execute(SQL_SHOW_PRODUCT_INFO_CATEGORY);



while (!$show_display_category->EOF) {

  // //  echo 'I found ' . zen_get_module_directory(FILENAME_UPCOMING_PRODUCTS);



?>



<?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_CATEGORY_FEATURED_PRODUCTS') { ?>

<?php

/**

 * display the Featured Products Center Box

 */

?>

<?php require($template->get_template_dir('tpl_modules_featured_products.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_featured_products.php'); ?>

<?php } ?>



<?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_CATEGORY_SPECIALS_PRODUCTS') { ?>

<?php

/**

 * display the Special Products Center Box

 */

?>

<?php require($template->get_template_dir('tpl_modules_specials_default.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_specials_default.php'); ?>

<?php } ?>



<?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_CATEGORY_NEW_PRODUCTS') { ?>

<?php

/**

 * display the New Products Center Box

 */

?>

<?php require($template->get_template_dir('tpl_modules_whats_new.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_whats_new.php'); ?>

<?php } ?>



<?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_CATEGORY_UPCOMING') { ?>

<?php include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_UPCOMING_PRODUCTS)); ?><?php } ?>

<?php

  $show_display_category->MoveNext();

} // !EOF

?>
</div>
</div>

Grr. Ok, I am close. I have the tabs showing up, but the products are not showing up on the tabs. :(

Figured it out. Had to adjust settings.

Show New Products on Main Page - Category with SubCategories 1
Show Featured Products on Main Page - Category with SubCategories 1
Show Special Products on Main Page - Category with SubCategories 1
Show Upcoming Products on Main Page - Category with SubCategories 1

abcisme:

Grr. Ok, I am close. I have the tabs showing up, but the products are not showing up on the tabs. :(

Figured it out. Had to adjust settings.

Show New Products on Main Page - Category with SubCategories 1
Show Featured Products on Main Page - Category with SubCategories 1
Show Special Products on Main Page - Category with SubCategories 1
Show Upcoming Products on Main Page - Category with SubCategories 1

Thank you so much for posting your solution. I will include your code in a future template update and the instructions in the readme.html file ;)

Thanks,

Anne

One more quick question - when there are no new/featured/special products, there's no notice that says there are no products and no empty box. It's just blank under the tab. Is this supposed to be this way? Should there be a notice that says "There are no new products at this time."? I'm concerned people might think the tab is not working properly if there is nothing at all showing there.

abcisme:

One more quick question - when there are no new/featured/special products, there's no notice that says there are no products and no empty box. It's just blank under the tab. Is this supposed to be this way? Should there be a notice that says "There are no new products at this time."? I'm concerned people might think the tab is not working properly if there is nothing at all showing there.

Yes, that is the correct behaviour. You can certainly add the message if you like or just turn off the tabs you are not using in admin--configuration--index listing.

Thanks,

Anne