Image Overlay based on Product Category
I am trying to get an image overlay on my product image based on product category.
i.e : "On Sale" overlay when product category id is 11
I came across a few discussion such as https://www.zen-cart.com/showthread....ge-help-needed
However, the ZC version in these is old ( 1.3.9) and the code changed quite a bit. I am also using the bootstrap template so it is completeyl diffente looking files per say.
I understand for most the css part but i got no idea on how to call the overlay when product master category id is 11
Any help on figuring it out would be great.
PS: to Moderator, I posted a similar question in general topic but got no answer. Feel free to delete if against the rule.
Thank you
Re: Image Overlay based on Product Category
Yess, bootstrap is indeed different. With responsive_classic, you have the option of using either using c_??_??.css or p_?.css to manipulate a specific category or product.
With bootstrap, you'll need a javaascript or jquery to accomplish something similar.
Perhaps, if you put your query into the support thread for the bootstrap template. you will get a better answer.
Re: Image Overlay based on Product Category
Quote:
Originally Posted by
dbltoe
Yess, bootstrap is indeed different. With responsive_classic, you have the option of using either using c_??_??.css or p_?.css to manipulate a specific category or product.
With bootstrap, you'll need a javaascript or jquery to accomplish something similar.
Perhaps, if you put your query into the support thread for the bootstrap template. you will get a better answer.
@dbltoe, I have no idea where you got the idea that the Bootstrap template doesn't follow the Zen Cart 'standard' regarding CSS file loading. @nicksab, the above statement is not true.
You can add a file named c_11.css to your template's /css directory for styling that will be used only for displaying pages which include a cPath=11 variable in the browser's address bar.
Re: Image Overlay based on Product Category
And you also have no idea how pleased I am to be wrong.:clap:
I had tried that once or twice, was not successful, and research in bootstrap channels led me to believe the system in the CSS_read_me.txt would not work with bootstrap.
I'm now assuming that the code looking for these CSS helpers occurs before anay template manipulation by bootstrap, responsive_cllassic, or a store-bought.
I'm so swamped that I did not take the time to view the docs to 3.6.4. Perhaps the next bootstrap release could include the CSS_readme.txt as a reminder.
THANX, again for the catch. You helped more than one.:hug:
Re: Image Overlay based on Product Category
Quote:
Originally Posted by
lat9
@dbltoe, I have no idea where you got the idea that the Bootstrap template doesn't follow the Zen Cart 'standard' regarding CSS file loading. @nicksab, the above statement is not true.
You can add a file named c_11.css to your template's /css directory for styling that will be used only for displaying pages which include a cPath=11 variable in the browser's address bar.
Thank you both for your input on this.
I did look at c_??_??.css for something different but I am getting mixed result this way. I mean sometimes it works and sometimes it does not.
I am using Ceon URI to rewrite url which could be the issue.
For example: Product named test ( product id 1 ) with master category id 11. Product is also linked to category id 22
Product url as per ZC is http://www.abc.com/index.php?main_pa...&products_id=1
Ceon rewrite url www.abc.com/test
On both of these url, css modification in c_11.css are applied as expected.
However, if the product test is accessed thru the link category, the display url becomes www.abc.com/test?cPath=22&
?cPath=**& is being added ( CEON uri issues or bug for best i can tell) which result in c_11.css not being applied.
Hope this makes sense. Actual site is at www.royal-fleur.com as usual.
Due to this issue, i was hoping there could be a way to do it with a if statement somehow.
something like:
if product_master_category_id=11
image overlay display=true
else
but obviously i have no clue how or where to do it
Thak you again for the assistance
Re: Image Overlay based on Product Category
Quote:
Originally Posted by
nicksab
Thank you both for your input on this.
I did look at c_??_??.css for something different but I am getting mixed result this way. I mean sometimes it works and sometimes it does not.
I am using Ceon URI to rewrite url which could be the issue.
For example: Product named test ( product id 1 ) with master category id 11. Product is also linked to category id 22
Product url as per ZC is
www.abc.com/index.php?main_page=product_info&cPath=11&products_id=1
Ceon rewrite url
www.abc.com/test
On both of these url, css modification in c_11.css are applied as expected.
However, if the product test is accessed thru the link category, the display url becomes
www.abc.com/test?cPath=22&
?cPath=**& is being added ( CEON uri issues or bug for best i can tell) which result in c_11.css not being applied.
Hope this makes sense. Actual site is at
www.royal-fleur.com as usual.
Due to this issue, i was hoping there could be a way to do it with a if statement somehow.
something like:
if product_master_category_id=11
image overlay display=true
else
but obviously i have no clue how or where to do it
Thak you again for the assistance
Ummm.. When a product is linked to another category and that product is looked at while in that linked category, then the category is no longer your "original" category but the linked category.... category css is called based on the current category being viewed, not to the master category of the product.
For something like a linked product to have the condition/css follow that product, you would need to have a css file for the product id instead of or in addition to the category. Note, in that situation, both the category css and the product css will be presented in the "sequence" outlined in the CSS_read_me.txt found in:
includes/templates/template_default/css/CSS_read_me.txt
is:
Quote:
The CSS files are sent to the browser in this order: (and alphabetically within each case of more than one match):
style*.css // are always loaded and at least ONE should contain site-wide properties.
language_stylesheet.css // changes to ALL pages, when that language is used
index_home.css // specifically affects the home page only
page_name.css // changes to one page, ie: index.php?main_page=page_name
language_page_name.css // changes to one page, when that language is used
c_??_??.css // changes to all info pages in a category
language_c_??_??.css // changes to all info pages in a category, when that language is used
c_??_??_children.css // changes for all children of the specified parent. Also supports a language prefix.
m_??.css // changes to a manufacturer's listing page
language_m_??.css // changes to a manufacturer's listing page, when that language is used
p_??.css // changes to a product's info page
language_p_??.css // changes to a product's info page, when that language is used
print*.css // printer-friendly global usage site-wide changes for printing-only
page##.css // EZ-Page -- css specific to a numbered EZ-page ... ie: page21.css would be for EZ-Page number 21 ... ie: for the URL index.php?main_page=page&id=21
The 'stylesheet.css' is expected to load first and should contain the bulk of your CSS selectors. Each file loaded takes priority over previously loaded file(s). To save loading time, only new selectors or selectors whose properties you wish to change should be in the optional CSS files. You can have different overrides for the same page, in different languages, because the two would never be called at the same time.
If someone selected the French language on your site, the 'french_stylesheet.css' would also be loaded. It should only contain the site-wide changes you want to make to 'stylesheet.css'. For example, change a 'background-image' for your French customers.
If someone went to any of the other pages, that page's CSS file would be loaded. Possibly you want different 'background-image' & 'background-color' on each of 'page_x' pages. Possibly you do not want a border around '.plainBox' most of the time, but on a couple of pages you do... and on one of those pages you want it in black and the other in red.
Possibly you created a NEW tag and did a <span class="newtag"> in your Privacy Statement. It is defined in only one CSS file, 'german_privacy.css' as '.newtag { text-transform: uppercase }' Because, in Germany, that phrase must be in all CAPS, but not in other countries.
Use your CSS files and the standard tags as much as possible, just change their properties when needed. If possible, DON'T HACK the core code. Use your CSS files to do the work for you. When the style coding has been removed from the ZenCart code and people have to decide if they want to go without the upgrade ~or~ undo all their hacks and finally learn about CSS... your site will still be up and running.
Additional information is contained in the Zen Cart documentation.
Adapted from ideas presented by
Juxi Zoza
03/15/05
The last css file having the associated css direction/css override is what will "win". Keep this in mind if you want to make a change in one to carry over to the other...
For the case as described, you would want to have c_11.css and p_1.css, ideally with both being the same (or as "allowed" one "internally" referencing the other) and making the same modification(s). In this case, no matter how/what category product 1 is linked that it will have the same modification as expected assuming that such a modification doesn't further bugger the css already in place... Also, all product displayed within category 11 will show the modified css... Unfortunately in such a case, all product linked outward would also need that additional p_XXX.css file.
To "fix" with php code... And "falsely" assuming your template doesn't have this file, then would modify:
includes/templates/template_default/common/html_header.php
https://github.com/zencart/zencart/b...r.php#L92-L102
Code:
$sheets_array = array('/' . $_SESSION['language'] . '_stylesheet',
'/' . $tmp_pagename,
'/' . $_SESSION['language'] . '_' . $tmp_pagename,
'/c_' . $cPath,
'/' . $_SESSION['language'] . '_c_' . $cPath,
'/m_' . $manufacturers_id,
'/' . $_SESSION['language'] . '_m_' . (int)$manufacturers_id,
'/p_' . $tmp_products_id,
'/' . $_SESSION['language'] . '_p_' . $tmp_products_id
);
foreach($sheets_array as $key => $value) {
such that just after that array assignment, to evaluate
if viewing a product, its master category is your chosen category and the current category is not your chosen category, then directly add to the array your chosen category of comparison to force its loading.
Re: Image Overlay based on Product Category
Quote:
Originally Posted by
mc12345678
Ummm.. When a product is linked to another category and that product is looked at while in that linked category, then the category is no longer your "original" category but the linked category.... category css is called based on the current category being viewed, not to the master category of the product.
For something like a linked product to have the condition/css follow that product, you would need to have a css file for the product id instead of or in addition to the category. Note, in that situation, both the category css and the product css will be presented in the "sequence" outlined in the CSS_read_me.txt found in:
includes/templates/template_default/css/CSS_read_me.txt
is:
The last css file having the associated css direction/css override is what will "win". Keep this in mind if you want to make a change in one to carry over to the other...
For the case as described, you would want to have c_11.css and p_1.css, ideally with both being the same (or as "allowed" one "internally" referencing the other) and making the same modification(s). In this case, no matter how/what category product 1 is linked that it will have the same modification as expected assuming that such a modification doesn't further bugger the css already in place... Also, all product displayed within category 11 will show the modified css... Unfortunately in such a case, all product linked outward would also need that additional p_XXX.css file.
I understand this part and it would be fine if it was for one product. However, it could be an issue when it is for 10, 20...products.
Quote:
To "fix" with php code... And "falsely" assuming your template doesn't have this file, then would modify:
includes/templates/template_default/common/html_header.php
https://github.com/zencart/zencart/b...r.php#L92-L102
Code:
$sheets_array = array('/' . $_SESSION['language'] . '_stylesheet',
'/' . $tmp_pagename,
'/' . $_SESSION['language'] . '_' . $tmp_pagename,
'/c_' . $cPath,
'/' . $_SESSION['language'] . '_c_' . $cPath,
'/m_' . $manufacturers_id,
'/' . $_SESSION['language'] . '_m_' . (int)$manufacturers_id,
'/p_' . $tmp_products_id,
'/' . $_SESSION['language'] . '_p_' . $tmp_products_id
);
foreach($sheets_array as $key => $value) {
such that just after that array assignment, to evaluate
if viewing a product, its master category is your chosen category and the current category is not your chosen category, then directly add to the array your chosen category of comparison to force its loading.
This is unknown territory for me and not sure what to do there. I see the code in my bootstrap/common/html_header.php but when it comes to array,i am at lost
Probably best if I do product by product instead of messing something else up .
