Announcement

**kayakbabe** · 08-10-11, 05:53 AM

Re: Production Release 8 CSSUI Template Changes

Pbernie,
I understood that. But what is the storpmorph code to call it in the SRCH template.

Please post the default ccsui template for pr8 that includes the imagemachine.

**pbrynie** · 08-10-11, 09:05 AM

Re: Production Release 8 CSSUI Template Changes

The Image Machine is only installed on PROD by default in CSSUI. In order to integrate it into a customized template of a multiple product page (CTGY, PLST, SRCH), you must follow the steps below. If your Product List Layout component is in "Point + Click" mode, you only need to assign the item to the page and enable the Image Machine on its configuration tab.

1) Assign the appropriate Image Machine item to the page. They are category_listing_imagemachine, all_products_imagemachine, and search_results_imagemachine

2) Call the "head" parameter in the head section of the page

Code:

<head>
	<mvt:item name="category_listing_imagemachine" param="head" />
</head>

3) Call the "body" parameter in the product foreach loop, making sure it is after the image containing elements (main_image, thumbnails, closeup_container, etc.). Notice the "body:product:id" being passed into the Image Machine. This is because we are creating an Image Machine for each product displayed on the page, so we need to pass a unique identifier.

Code:

<mvt:item name="category_listing_imagemachine" param="body:product:id" />

4) Finally, we need to name the image containing elements in the HTML with unique identifiers so each Image Machine knows which main_image and thumbnails container to act on.

Code:

<div class="product-image">
	<img id="main_image_&mvte:product:id;" src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;" />
</div>
<ul id="thumbnails_&mvte:product:id;" class="thumbnails"></ul>
<div id="closeup_div_&mvte:product:id;" class="closeup"><img id="closeup_image_&mvte:product:id;" src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;"><div><a id="closeup_close_&mvte:product:id;">close</a></div></div>

Notice the "_&mvte:product:id" that has been added to all of the IDs of the HTML elements.

Remember, you only need to complete the steps above if you're using a custom Product List Layout template. These components are called Category Product List Layout on CTGY, Product List Layout on PLST, and Search Results Layout on SRCH. If they are in "Point + Click" mode, they will automatically generate all of the necessary changes after you add the Image Machine to the page and enable it.

Regards,

**Keitho** · 02-01-12, 10:58 AM

Re: Production Release 8 CSSUI Template Changes

To resurrect this old thread I'm having the same problem as found earlier, in that all the product detail is being pushed to the left. I used the template changes from the 12/06/11 Manual, not those from this thread. There ARE differences that should probably be noted in an update to this thread.

I have uploaded one new image via the Additional Images Tab as a test for the magnify function. It seems to be mostly working as expected but I do have a question - Shouldn't the maginfied image be larger than the base image?

Here's my test product. http://www.preparesmart.com/mm5/merc...gory_Code=0117. If you look at other products you call tell that they don't have new images by the lack of the "hand" over the image for the magnify. They are still pushed to the left, though.

Can someone tell me what's causing the Left Alignment and what I should be seeing with the Magnify?

Thanks

**pbrynie** · 02-01-12, 11:17 AM

Re: Production Release 8 CSSUI Template Changes

Originally posted by Keitho View Post

To resurrect this old thread I'm having the same problem as found earlier, in that all the product detail is being pushed to the left. I used the template changes from the 12/06/11 Manual, not those from this thread. There ARE differences that should probably be noted in an update to this thread.

I have uploaded one new image via the Additional Images Tab as a test for the magnify function. It seems to be mostly working as expected but I do have a question - Shouldn't the maginfied image be larger than the base image?

Here's my test product. http://www.preparesmart.com/mm5/merc...gory_Code=0117. If you look at other products you call tell that they don't have new images by the lack of the "hand" over the image for the magnify. They are still pushed to the left, though.

Can someone tell me what's causing the Left Alignment and what I should be seeing with the Magnify?

Thanks

As far as the left alignment, if you're asking why the product details showing below the product image, it's because you don't have an explicit width on product-details-1.

Regarding the image sizes, the Image Machine never creates larger images from the originals. So if your original image is 300px by 300px and you set the closeup dimensions to be 500px by 500px, it will just use the original size for the closeup image.

Regards,

**Keitho** · 02-01-12, 11:53 AM

Re: Production Release 8 CSSUI Template Changes

Thanks for the quick response. I've never touched these settings (only just now found them in the CSS file) and this didn't occur until I made the Template changes. Any idea what might have triggered it?

Here's the relevant portion of my CSS file. What do I change? What's the difference between .product-details-1 and .product-details-2? Also, should the images still have fixed settings?

/*** PRODUCT DISPLAY ***/
.product-details-1, .product-details-2
{
padding-bottom: 10px;
}
.product-details-1
{
}
.product-details-2
{
width: 310px;
float: left;
}
.product-code
{
}
.product-image
{
float: left;
text-align: center;
width: 350px;
}
.product-image IMG
{
max-width: 280px;
}

Regarding the image size, the new image I added was supposedly 600 x 600 but when it came in it says 225 x 225. Should the Image Machine be modifying that?

I appreciate your help.

**kayakbabe** · 02-15-12, 06:48 PM

Re: Production Release 8 CSSUI Template Changes

There is a firefox browser addon that an help you figure out what css tags apply to what things on your website. I think it would help you a lot. It's by a guy name Chris Pederick and it is called "Web Developer". I use the css features all the time in that addon to help me find the css tags and even to test out altering their definitions without the public seeing my changes. I think it would help you for some of the stuff you are asking about.

**Protos** · 04-03-12, 12:16 AM

Re: Production Release 8 CSSUI Template Changes

Hi there. I was browsing through the messages after doing Lesson 10 image machine. I read Larrys message "Took our 3 sites (1 MMUI & 2 CSSUI) to PR8 this weekend". Can I use Image machine items on a standard MIVA MMUI_framework?
http://www.cigarrummet.com/miva/merc...T&Store_Code=C Regads Andr� Loutchko

**nextscrubs** · 04-25-12, 12:53 PM

Re: Production Release 8 CSSUI Template Changes

Hello Forum!
Need your help!! I have changed the "PROD" and "Product Display Layout" templates as per instructions, but product page does not display images properly. Since there is custom code in my page template, I can't copy and paste the whole code. Also attribute swatches does not show at all (Even after copying/pasting). Here's the partial code that renders the product page with image machine thumbnails.

I have been trying to fix it since last week, but could not figure it out!

------------------------------
<div class="product-details-1">
<mvt:if expr="NOT ISNULL l.settings:product:image">
<div class="product-image"><img id="main_image" src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;" /><a href="&mvt:product:image;" class = 'cloud-zoom' id='zoom1'
rel="adjustX: 10, adjustY:-4"><img src="&mvt:product:image;" alt="&mvt:product:name;" /></a></div>
<mvt:else>
<div class="image-not-available product-image"></div>
</mvt:if>

<ul id="thumbnails" class="thumbnails"></ul>
<div id="closeup_div" class="closeup"><img id="closeup_image" src="graphics/en-US/cssui/blank.gif" alt="" /><div><a id="closeup_close">close</a></div></div>
<mvt:item name="product_display_imagemachine" param="body:product:id" />
<div class="clear product-image-margin"></div>

....
-----------------------------------
Here is the link for sample product page:
http://www.savonscrubs.com/mm5/merchant.mvc?Screen=PROD&Store_Code=dickies&Produc t_Code=1346&Attributes=Yes&Quantity=1

Thanks very much!
Pj

**Mark Hood** · 04-26-12, 06:12 AM

Re: Production Release 8 CSSUI Template Changes

Originally posted by nextscrubs View Post

Hello Forum!
Need your help!! I have changed the "PROD" and "Product Display Layout" templates as per instructions, but product page does not display images properly. Since there is custom code in my page template, I can't copy and paste the whole code. Also attribute swatches does not show at all (Even after copying/pasting). Here's the partial code that renders the product page with image machine thumbnails.

I have been trying to fix it since last week, but could not figure it out!

------------------------------
<div class="product-details-1">
<mvt:if expr="NOT ISNULL l.settings:product:image">
<div class="product-image"><img id="main_image" src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;" /><a href="&mvt:product:image;" class = 'cloud-zoom' id='zoom1'
rel="adjustX: 10, adjustY:-4"><img src="&mvt:product:image;" alt="&mvt:product:name;" /></a></div>
<mvt:else>
<div class="image-not-available product-image"></div>
</mvt:if>

<ul id="thumbnails" class="thumbnails"></ul>
<div id="closeup_div" class="closeup"><img id="closeup_image" src="graphics/en-US/cssui/blank.gif" alt="" /><div><a id="closeup_close">close</a></div></div>
<mvt:item name="product_display_imagemachine" param="body:product:id" />
<div class="clear product-image-margin"></div>

....
-----------------------------------
Here is the link for sample product page:
http://www.savonscrubs.com/mm5/merchant.mvc?Screen=PROD&Store_Code=dickies&Produc t_Code=1346&Attributes=Yes&Quantity=1

Thanks very much!
Pj

There are several more pieces to that puzzle.
Start with making sure both the attribute machine tab and image machine tabs have them elements and containers filled in.

**nextscrubs** · 04-26-12, 10:32 AM

Re: Production Release 8 CSSUI Template Changes

Originally posted by Mark Hood View Post

There are several more pieces to that puzzle.
Start with making sure both the attribute machine tab and image machine tabs have them elements and containers filled in.

Thanks Mark, Both the tabs are checked/enabled. I may been missing some puzzle pcs. here!!

**Mark Hood** · 04-26-12, 11:50 AM

Re: Production Release 8 CSSUI Template Changes

Originally posted by nextscrubs View Post

Thanks Mark, Both the tabs are checked/enabled. I may been missing some puzzle pcs. here!!

Most likely cause for not seeing the little color swatches on a swatch select drop down are from not having the words swatches typed into the field for swatches

Make sure you have css correct but after that you need to start over checking your code

**nextscrubs** · 04-27-12, 10:48 AM

Re: Production Release 8 CSSUI Template Changes

Originally posted by Mark Hood View Post

Most likely cause for not seeing the little color swatches on a swatch select drop down are from not having the words swatches typed into the field for swatches
[ATTACH=CONFIG]484[/ATTACH]

Make sure you have css correct but after that you need to start over checking your code

Thanks Mark, that fixed the attribute swathes :) Thanks!! Now I will start over to check swap image code again.

**Spinner** · 08-26-12, 10:05 AM

Re: Production Release 8 CSSUI Template Changes

Preston, I am working on my MIVA CSSUI dev site and having problems with image machine for the category page. It works on the product display page. I do not have an option on my category pages items tab for category_listing_imagemachine. The only option I have is ctgy_imagemachine so I manually entered the code above and substituted ctgy_imagemachine but it did not work. I contacted my host and they told me that they do not have the category_listing_imagemachine option on their test site.
Has something changed? Should it work with the option ctgy_imagemachine or am both I am my host missing the category_listing_imagemachine option?
Thank you in advance for any help you can provide.
Spinner

**kayakbabe** · 08-28-12, 09:19 AM

Re: Production Release 8 CSSUI Template Changes

Spinner,
you should check on several things
1. make sure you see in your admin that you are on a more recent version of the miva merchant engine, the current version as of Aug 2012 is 5.16 (if it isn't, ask your host to update it).

2. make sure your production release is current too.
this is what mine looks like

Miva Merchant 5.5
Production Release 8 Update x
Miva Merchant Engine v5.16
Database API: mysql

3. double check and make sure your framework in your store is (sounds silly but this one bit me... i thought I was working in cssui but I was trying to make a mmui store into a cssui store and that won't work, you gotta start from scratch completely and I didn't know that at first).
cssui_default_fw Default CSSUI Framework Default Framework for the CSS User Interface.

4. look in your global settings: modules
If you see cmp-mv-imagemachine listed, then you do have the category_listing_imagemachine since cmp-mv-imagemachine is the module that drives it. You can try in your category page admin items to add it there. But it should exist if you are on the right engine, framework, version and production release.

if the engine, framework, version and production release are all correct, then your host needs to fix the installation because you should have it.

**Spinner** · 08-28-12, 12:42 PM

Re: Production Release 8 CSSUI Template Changes

Kayakbabe, Thank you for your response! CSSUI, Version, framework and production release are all correct. I went to the items tab on ctgy page to try to add the category_listing_imagemachine but it was not listed. cmp-mv-imagemachine was listed. Should I add cmp-mv-imagemachine? If so, what code name would I give it?
ctgy-imagemachine is already activated on the category page.

I have been in touch with my host and with Miva tech support. They have not been able to help with this so far.

I replied to another thread and Mark Hood was kind enough to help me. The substitution below made image machine work but the code is apparently for single column and I do not know what to replace the clear fix with which has made my page spread out too wide. It doesn't help to simply remove that part of the code. It was working as 2 columns before I pasted in the snippet so I do not think I need to mess with my CSS. I think it is the clear-fix which is my problem.

I may need to contact my host and Miva again to try to get the category-listing-imagemachine added.
Here is the code which made imagemachine work on the category listing page.
Please let me know if you have any suggestions on this.
Thank you! Spinner

replace

<mvt:if expr="NOT ISNULL l.settings:product:thumbnail"> <a href="&mvt:global:sessionurl;Screen=PROD&Store_Cod e=&mvte:store:code;&Product_Code=&mvte:product:co d e;&Category_Code=&mvte:category:code;">
<img src="&mvte:product:thumbnail;" border=0 class="thumb" alt="&mvt:product:name; - More Details" title="&mvt:product:name; - More Details"> </a> <mvt:item name="ctgy_imagemachine" param="body:product:id" /> </mvt:if>

with

<div class="product-image-ctgy">

<a href="http://www.yourdomain.com/&mvt:product:code;.html"><img id="main_image_&mvte:product:id;" src="http://www.yourdomain.com/mm5/&mvt:product:image;" alt="&mvt:product:name;" /></a> </div> <div id="ctgyswatches_&mvte:product:id;" class="ctgyswatches"></div>
<div class="clear product-image-margin"></div>
<mvt:item name="category_listing_imagemachine" param="body:product:id" />

Announcement

Production Release 8 CSSUI Template Changes

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment