Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / I need to separate these two lines so I can apply css.

I need to separate these two lines so I can apply css.

Views: 1,341

Results 1 to 7 of 7
28 Mar 2011, 8:33 PM
#1
member avatar

member

Zen Follower

Join Date:
Dec 2004
Posts:
102
Plugin Contributions:
0

I need to separate these two lines so I can apply css.

I need to rewrite this portion so that it can be styled separately, but all I do is break the cart.

echo $value['products_options_values_name'] . '<br /><br />' . TEXT_OPTION_DIVIDER . zen_image(DIR_WS_IMAGES . $value['attributes_image'], $products[$i]['name'], IMAGE_SHOPPING_CART_WIDTH, IMAGE_SHOPPING_CART_HEIGHT);

I think I can correct the css if someone can help me with separating the section above. This is only on my local server, so I don't have a link.

I need the portion containing <?php echo $product['productsName'] and $value['products_options_values_name'] to look the same as each other in the shopping cart ( site/shopping_cart). (<span id="cartProdTitle"> needs to be applied to products_options_values_name)

I also want

<?php echo $product['productsImage']; ?> to look the same as $value['attributes_image'], (<span id="cartImage" class="back"> needs to be applied to 'attributes_image')

I hope this makes sense. Thanks for any assistance you can provide.

my code as it is now

<a href="<?php echo $product['linkProductsName']; ?>"><span id="cartProdTitle"><?php echo $product['productsName'] . '<span class="alert bold">' . $product['flagStockCheck'] . '</span>'; ?></span></a>

<?php if ((STOCK_SHOW_LOW_IN_CART == 'true') && $product['flagStockCheck']) { echo '<span class="alert bold">'; echo PWA_STOCK_AVAILABLE; echo ((isset($product['stockAvailable'])) ? $product['stockAvailable']: 0); echo '</span>'; } ?> <br class="clearBoth" /> <?php if (isset($product['attributes']) && is_array($product['attributes'])) { echo ''; }else { ?><span id="cartImage" class="back"><?php echo $product['productsImage']; ?></span><?php

}
echo $product['attributeHiddenField'];
if (isset($product['attributes']) && is_array($product['attributes'])) {
echo '<div class="cartAttribsList">';
echo '<ul>';
reset($product['attributes']);
foreach ($product['attributes'] as $option => $value) {
echo $value['products_options_values_name'] . '<br /><br />' . TEXT_OPTION_DIVIDER . zen_image(DIR_WS_IMAGES . $value['attributes_image'], $products[$i]['name'], IMAGE_SHOPPING_CART_WIDTH, IMAGE_SHOPPING_CART_HEIGHT);

28 Mar 2011, 10:53 PM
#2
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: I need to separate these two lines so I can apply css.

Before we go mucking about in the PHP, let's see an example of the view source output (with some context). It is often possible to style elements that you wouldn't expect to be distinguishable... of course sometimes it is just not possible. Only if there is something that can't be done with the stylesheet do you have to edit the PHP.

29 Mar 2011, 2:03 PM
#3
member avatar

member

Zen Follower

Join Date:
Dec 2004
Posts:
102
Plugin Contributions:
0

Re: I need to separate these two lines so I can apply css.

gjh42:

Before we go mucking about in the PHP, let's see an example of the view source output (with some context). It is often possible to style elements that you wouldn't expect to be distinguishable... of course sometimes it is just not possible. Only if there is something that can't be done with the stylesheet do you have to edit the PHP.

Thank you, and you are correct, In most cases the css could be altered.

In this case I have already altered the php. This is because I am showing the attribute image in the cart. I also have images of products with no attributes in the cart. The output looks different for each product type. I just don't understand how to correct the portion of the code mentioned in my first post.

I changed the default code shown here:

<?php echo $product['attributeHiddenField']; if (isset($product['attributes']) && is_array($product['attributes'])) { echo '<div class="cartAttribsList">'; echo '<ul>'; reset($product['attributes']); foreach ($product['attributes'] as $option => $value) { to this code: <?php if (isset($product['attributes']) && is_array($product['attributes'])) { echo ''; }else { ?><span id="cartImage" class="back"><?php echo $product['productsImage']; ?></span><?php

}
echo $product['attributeHiddenField'];
if (isset($product['attributes']) && is_array($product['attributes'])) {
echo '<div class="cartAttribsList">';
echo '<ul>';
reset($product['attributes']);
foreach ($product['attributes'] as $option => $value) {
echo $value['products_options_values_name'] . '<br /><br />' . TEXT_OPTION_DIVIDER . zen_image(DIR_WS_IMAGES . $value['attributes_image'], $products[$i]['name'], IMAGE_SHOPPING_CART_WIDTH, IMAGE_SHOPPING_CART_HEIGHT);

29 Mar 2011, 2:32 PM
#4
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: I need to separate these two lines so I can apply css.

First off, you don't apply an id to two elements on a page - ids are supposed to be unique on a page. Use a class in this case.

<a href="<?php echo $product['linkProductsName']; ?>"><span class="cartProdTitle"><?php echo $product['productsName'] . '<span class="alert bold">' . $product['flagStockCheck'] . '</span>'; ?></span></a>

<?php if ((STOCK_SHOW_LOW_IN_CART == 'true') && $product['flagStockCheck']) {
echo '<span class="alert bold">';
echo PWA_STOCK_AVAILABLE;
echo ((isset($product['stockAvailable'])) ? $product['stockAvailable']: 0);
echo '</span>';
}
?>
<br class="clearBoth" />

<?php
if (isset($product['attributes']) && is_array($product['attributes'])) {
echo '';

}else {
?><span class="cartImage back"><?php echo $product['productsImage']; ?></span><?php
}
echo $product['attributeHiddenField'];
if (isset($product['attributes']) && is_array($product['attributes'])) {
echo '<div class="cartAttribsList">';
echo '<ul>';
reset($product['attributes']);
foreach ($product['attributes'] as $option => $value) {
echo '<span class="cartProdTitle">' . $value['products_options_values_name'] . '</span><br /><br />' . TEXT_OPTION_DIVIDER . zen_image(DIR_WS_IMAGES . $value['attributes_image'], $products[$i]['name'], IMAGE_SHOPPING_CART_WIDTH, IMAGE_SHOPPING_CART_HEIGHT); 

You can affect the image by styling
.cartAttribsList ul img {}

If you really want to apply a class directly to the image, you can do this:

'<span class="cartImage back">' . zen_image(DIR_WS_IMAGES . $value['attributes_image'], $products[$i]['name'], IMAGE_SHOPPING_CART_WIDTH, IMAGE_SHOPPING_CART_HEIGHT) . '</span>';

I just noticed that you don't have any <li> tags for items in your <ul> - this needs to be fixed.

29 Mar 2011, 2:40 PM
#5
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: I need to separate these two lines so I can apply css.

echo '<ul>';
reset($product['attributes']);
foreach ($product['attributes'] as $option => $value) {
echo '<li><span class="cartProdTitle">' . $value['products_options_values_name'] . '</span><br /><br />' . TEXT_OPTION_DIVIDER . zen_image(DIR_WS_IMAGES . $value['attributes_image'], $products[$i]['name'], IMAGE_SHOPPING_CART_WIDTH, IMAGE_SHOPPING_CART_HEIGHT) . '</li>';
1 Apr 2011, 9:13 PM
#6
member avatar

member

Zen Follower

Join Date:
Dec 2004
Posts:
102
Plugin Contributions:
0

Re: I need to separate these two lines so I can apply css.

I moved the problem statement (last paragraph) outside of the php statement, before the next php statement so I did not have to figure out all of the code shorthand.

I moved some stuff around so the products with attributes and the products with no attributes looked the same in the cart. I added some stuff to the stylesheet shown at the bottom.

I changed the product name to call the model number instead, so I could use the cartProdTitle class to style the product name and the attributes name the same.

I got the span id idea here: http://www.zen-cart.com/forum/showthread.php?t=138054&highlight=attribute+image+shopping+cart post #7. I did not know that it was incorrect. <span id="cartImage" is in the default cart, but I changed it to span class anyway, hope that is ok.

I did not know ul without li was bad. I took out the li because I didn't like the dot. I took out the uls also, again i hope this is ok.

Hopefully this will help someone else. The link above is important to get this to work also. I don't have a clue if this is a good thing, so use at your own risk.

Glen, if you see anything wrong, please let me know and thank you for your assistance, I appreciate it.

My code as it is now:

<td class="cartProductDisplay"> <a href="<?php echo $product['linkProductsName']; ?>"><br /><br /><span class="model"> #<?php echo zen_products_lookup($product['id'], 'products_model'); ?></span><br/></a> <?php if ((STOCK_SHOW_LOW_IN_CART == 'true') && $product['flagStockCheck']) { echo '<span class="alert bold">'; echo PWA_STOCK_AVAILABLE; echo ((isset($product['stockAvailable'])) ? $product['stockAvailable']: 0); echo '</span>'; } ?> <br class="clearBoth" /> <?php if (isset($product['attributes']) && is_array($product['attributes'])) { echo ''; }else { ?>

<a href="<?php echo $product['linkProductsName']; ?>"> <span class="cartProdTitle"><center><?php echo $product['productsName'] ; ?></span><span class="cartImage"><br /><br /><?php echo $product['productsImage']; ?></center></span></a>

<?php } echo $product['attributeHiddenField']; if (isset($product['attributes']) && is_array($product['attributes'])) { echo '<div class="cartAttribsList">'; reset($product['attributes']); foreach ($product['attributes'] as $option => $value) { $product_options_name = $value['products_options_name']; $product_options_name_array = explode(":", $product_options_name); $product_options_name = $product_options_name_array[0]; ?>

<a href="<?php echo $product['linkProductsName']; ?>"><span class="cartProdTitle"><center><?php echo $value['products_options_values_name'] ;?></center></span><br /><span class="cartImage"><?php echo zen_image(DIR_WS_IMAGES . $value['attributes_image'], IMAGE_SHOPPING_CART_WIDTH, IMAGE_SHOPPING_CART_HEIGHT), $products[$i]['name']; ?></span></a>

I added this to the stylesheet:

.cartImage {
margin-top:3px;
}

.cartAttribsList, .cartProdTitle {
font-size:1em;
color:#00F;
padding:1em;
text-align:center;
font-weight:700;
}

.model {position:relative;
font-size:1em;
color:#00F;}

2 Apr 2011, 1:19 AM
#7
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: I need to separate these two lines so I can apply css.

If you didn't want the list item marker, the thing to do is add a stylesheet rule for that location like
#cartAttribsList li {list-style: none;}
This would allow the items to still automatically stack up in list form.

If the <span id="cartImage" is in the default template, that is a bug that ought to be fixed.
In /includes/templates/template_default/templates/tpl_shopping_cart_default.php, find around line 85

       <td class="cartProductDisplay">
<a href="<?php echo $product['linkProductsName']; ?>"><span id="cartImage" class="back"><?php echo $product['productsImage']; ?></span><span id="cartProdTitle"><?php echo $product['productsName'] . '<span class="alert bold">' . $product['flagStockCheck'] . '</span>'; ?></span></a>
<br class="clearBoth" />
```change as shown in red:```
       <td class="cartProductDisplay">
<a href="<?php echo $product['linkProductsName']; ?>"><span class="cartImage back"><?php echo $product['productsImage']; ?></span><span class="cartProdTitle"><?php echo $product['productsName'] . '<span class="alert bold">' . $product['flagStockCheck'] . '</span>'; ?></span></a>
<br class="clearBoth" />