Responsive Classic (built in to Zen Cart v1.5.5) [Support Thread]

[GoldBuckle]

I am upgrading to v157c from v157. I copied these lines from the stylesheet.css in v157 to the stylesheet.css in v157c (inserted after line #100) but I am getting a big blank white space. The .jpg is in the includes/templates/responsive_classic/images/ folder and I can access it directly in my browser by itself just not on the site. Is it safe to list the url to the test site here on a public forum when it is in a folder on my current live site or did I give you enough info to help?

#logoWrapper {width:100%;
height:215px;
background-image:url('../includes/templates/responsive_classic/images/discount_printing_service_background.jpg');
background-repeat:no-repeat;
}

[dbltoe]

I am upgrading to v157c from v157. I copied these lines from the stylesheet.css in v157 to the stylesheet.css in v157c (inserted after line #100) but I am getting a big blank white space. The .jpg is in the includes/templates/responsive_classic/images/ folder and I can access it directly in my browser by itself just not on the site. Is it safe to list the url to the test site here on a public forum when it is in a folder on my current live site or did I give you enough info to help?

#logoWrapper {width:100%;
height:215px;
background-image:url('../includes/templates/responsive_classic/images/discount_printing_service_background.jpg');
background-repeat:no-repeat;
}

I would first make sure the image is in the correct folder (I know... probably done already but.....)
Then, I would suspect the .. in the image link.
If you right-click on the space, does the inspect show the image when you hover over it? If not, the image is missing or the link is incorrect. Preceding could cause the code to not be processed.
IF all those fail, you may have messed up the preceding or following lines of code in the file.
It would be easier to diagnoase if we had a look.

[dbltoe]

Several Problems

One . is the answer for what you were trying although that is not what is currently on your site. The link on your site looks in the yoursite.com main images folder. The image is actually in your template's images folder.

Might be something to discuss in 1.5.8 to make the template's images folder something like images_tpl to avoid confusion.

BTW. You can safely post a URL by using DOT like yoursiteDOTcom. SEs won't react to that and the forum helpers can get a look at the site.

Here's what should be there if doing what you wanted.

#logoWrapper {
width:100%;
height:215px;
background-image:url('./includes/templates/responsive_classic/images/discount_printing_service_background.jpg');
background-repeat:no-repeat;
}

It would be much simpler with

#logoWrapper {height:235px;}
#logo{background:url('./includes/templates/responsive_classic/images/discount_printing_service_background.jpg') no-repeat center;
}

BUT....

The real problem is what happens on varying screen sizes including mobile phones. With text in front of a background image, you must take into account what will happen as the image becomes responsive and the text does not. As it is now, the "Going beyond..." text violates ADA/WCAG even without going to a smaller/mobile screen. Just your DPS image and the text underneath does not work on a mobile phone. The last line is lost.

Other problems include the use of the tagline div twice. A div should not be used twice UNLESS they are on separate pages. Here, you would need to change it to a class. https://tinyurl.com/y9f2bjlp

There are a lot more adjustments to be made but your original premise is really not going to work without a set screen size.

[GoldBuckle]

I think I understand what you are saying...thanks for breaking it down. Considering what you said regarding the responsive issue, do you have any ideas you could share as to how to accomplish what I am trying to do. The most important thing to me is to have the logo, hours and contact info prominently there to make it as easy as possible for someone to contact me via phone or email. Next most important is the file types and payment methods accepted. Before I created the background image and added the info there, in my opinion it looked to empty with just the logo on a desktop device. "As it is now, the "Going beyond..." text violates ADA/WCAG even without going to a smaller/mobile screen" How is this text in violation and how do I fix it so it is not in violation?

Several Problems

One . is the answer for what you were trying although that is not what is currently on your site. The link on your site looks in the yoursite.com main images folder. The image is actually in your template's images folder.

Might be something to discuss in 1.5.8 to make the template's images folder something like images_tpl to avoid confusion.

BTW. You can safely post a URL by using DOT like yoursiteDOTcom. SEs won't react to that and the forum helpers can get a look at the site.

Here's what should be there if doing what you wanted.

#logoWrapper {
width:100%;
height:215px;
background-image:url('./includes/templates/responsive_classic/images/discount_printing_service_background.jpg');
background-repeat:no-repeat;
}

It would be much simpler with

#logoWrapper {height:235px;}
#logo{background:url('./includes/templates/responsive_classic/images/discount_printing_service_background.jpg') no-repeat center;
}

BUT....

The real problem is what happens on varying screen sizes including mobile phones. With text in front of a background image, you must take into account what will happen as the image becomes responsive and the text does not. As it is now, the "Going beyond..." text violates ADA/WCAG even without going to a smaller/mobile screen. Just your DPS image and the text underneath does not work on a mobile phone. The last line is lost.

Other problems include the use of the tagline div twice. A div should not be used twice UNLESS they are on separate pages. Here, you would need to change it to a class. https://tinyurl.com/y9f2bjlp

There are a lot more adjustments to be made but your original premise is really not going to work without a set screen size.

[dbltoe]

When you take the text beyond or below 100% of what is set in the body tag, it's often not automatically adjusted in all aspects.

Your taking the #tagline (again, used twice) to 1.3em requires an appropriate change in linespacing so that the lines of text do not run together.

Do you actually have two HEADER_SALES_TEXT defines in your includes/languages/english/responsive_classic/header.php?

You can combine the text to look like

define('HEADER_SALES_TEXT', 'Going beyond your expectations...NOT your budget!<br><br><strong>Need Help? Call (678) 561-8151<br>8 AM till 10 PM Eastern Standard Time - 7 DAYS A WEEK!</strong><br><br>Email your quote requests to <a href="mailto:[email protected]&subject=Sales%20Quote&body=I%20would%20like%20a%20quote%20for...">Sales</a>');

That would put all the text together, add the subject to the e-mail, and even add the body text to remind them they are requesting a quote.

There are two schools of thought on the spaces (%20) in the mailto link. You could just use regular spaces but, to be on the safe side.....

[yesaul]

Hello,
I spent a lot of time trying to realize how the layout recognizion mechanism is working
(Actually, the most important question was why $_SESSION['layoutType'] varable is always set to 'legacy')

So...

The file 'zca_responsive_functions.php' contains the following code:

function layoutTypes()
{
    return array('default', 'mobile', 'tablet', 'full');
}

function initLayoutType()
{
    // Safety check.
    if (!class_exists('Mobile_Detect')) { return 'default'; }

    $detect = new Mobile_Detect;
    $isMobile = $detect->isMobile();
    $isTablet = $detect->isTablet();

    $layoutTypes = layoutTypes();

    if ( isset($_GET['layoutType']) ) {
        $layoutType = $_GET['layoutType'];
    } else {
        if (empty($_SESSION['layoutType'])) {
            $layoutType = ($isMobile ? ($isTablet ? 'tablet' : 'mobile') : 'default');
        } else {
            $layoutType =  $_SESSION['layoutType'];
        }
    }

    if ( !in_array($layoutType, $layoutTypes) ) { 
        $layoutType = 'default'; 
    }

    $_SESSION['layoutType'] = $layoutType;

    return $layoutType;
}

$layoutType = initLayoutType();

But this code is executed at the moment, when session is not started yet ($_SESSION array is still undefined)

(containing all functions files is being loaded before 'init_sessions.php' - see Breakpoint 60 and Breakpoint 70 in 'config.core.php' file)

Thus, any manipulations with $_SESSION in above mentioned code seem not only as exotical way, but fully incorrect.

It seems strange to me, I am the first who noticed this, but brief search over this forum gave no relevalt results.
Sorry, if I do understand something wrong

[yesaul]

And also, should the following line be added in the beginning of function initLayoutType() ?

if (!class_exists('Mobile_Detect')) include_once DIR_WS_CLASSES . 'Mobile_Detect.php';

[carlwhat]

Hello,
I spent a lot of time trying to realize how the layout recognizion mechanism is working
(Actually, the most important question was why $_SESSION['layoutType'] varable is always set to 'legacy')

So...

The file 'zca_responsive_functions.php' contains the following code:

function layoutTypes()
{
    return array('default', 'mobile', 'tablet', 'full');
}

function initLayoutType()
{
    // Safety check.
    if (!class_exists('Mobile_Detect')) { return 'default'; }

    $detect = new Mobile_Detect;
    $isMobile = $detect->isMobile();
    $isTablet = $detect->isTablet();

    $layoutTypes = layoutTypes();

    if ( isset($_GET['layoutType']) ) {
        $layoutType = $_GET['layoutType'];
    } else {
        if (empty($_SESSION['layoutType'])) {
            $layoutType = ($isMobile ? ($isTablet ? 'tablet' : 'mobile') : 'default');
        } else {
            $layoutType =  $_SESSION['layoutType'];
        }
    }

    if ( !in_array($layoutType, $layoutTypes) ) { 
        $layoutType = 'default'; 
    }

    $_SESSION['layoutType'] = $layoutType;

    return $layoutType;
}

$layoutType = initLayoutType();

But this code is executed at the moment, when session is not started yet ($_SESSION array is still undefined)

(containing all functions files is being loaded before 'init_sessions.php' - see Breakpoint 60 and Breakpoint 70 in 'config.core.php' file)

Thus, any manipulations with $_SESSION in above mentioned code seem not only as exotical way, but fully incorrect.

It seems strange to me, I am the first who noticed this, but brief search over this forum gave no relevalt results.
Sorry, if I do understand something wrong

IMO, you are correct. extra_functions seem to be loaded PRIOR to session vars getting set up as well as before the loading of this class file.

HOWEVER, if one looks here:

https://github.com/zencart/zencart/b...er.php#L32-L40

i think this is where the mobile detection gets used.

you are getting set to legacy because you are using the template default. if you set your template to responsive classic, you will then see changes to your layout_type.

to me this function can be safely deleted from the zc core.

best.

[yesaul]

IMO, you are correct. extra_functions seem to be loaded PRIOR to session vars getting set up as well as before the loading of this class file.

to me this function can be safely deleted from the zc core.

best.

Sure, it can. But this makes using $_SESSION['layoutType'] completely useless

- no relevant info will be kept within session in $_SESSION['layoutType']

- mobile detection will be being done for every next page again

- the only way to change $_SESSION['layoutType'] will be $_GET (see init_includes/init_zca_layout.php)

[yesaul]

As addition to deleting of 'zca_responsive_functions.php' file (containing code, which is non-functional anyway), here is my suggestion for code in 'init_zca_layout.php' file:

if (!defined('IS_ADMIN_FLAG')) {
  die('Illegal Access');
}

include_once DIR_WS_CLASSES . 'Mobile_Detect.php';

if (isset($_GET['layoutType'])) $layoutType = preg_replace('/[^a-z0-9_-]/i', '', $_GET['layoutType']);
elseif (!empty($_SESSION['layoutType'])) $layoutType =  $_SESSION['layoutType'];
elseif (!class_exists('Mobile_Detect'))  $layoutType = 'default';
else {
  $detect = new Mobile_Detect;	
  $layoutType = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'mobile') : 'default');	
}
	      
if (!in_array($layoutType, array('mobile', 'tablet', 'full'))) $layoutType = 'default'; 
	
$_SESSION['layoutType'] = $layoutType;

This handle $_SESSION['layoutType'] in correct way and correct place and makes any further mobile detection within (any) template unnecessary