Combine Payment Boxes.

My site bestpriceaccessories.com is nearly done however, I for payment I There are four boxes.

1 Payment Method
2 Discount Coupon
3 Gift Card
4 Reward points.

Is there any way to have all of them in one box. To make the checkout flow better.

Does anyone know if there is an easy way to do this?

I'm getting a Page Not Found error when I click the link you provided.

I also must admit I don't understand your question, which is why I was going to go have a look.

Rob

Hi,

Sorry. I updated link.

At the moment, I accept Paypal, Reward Point, Discount Copoun and giftcards. Is there any way to have the latter three combined into once box?

Daniel

I would also like it done on shipping options.

I've provided a screen shot on whats it like now and how I would like it to look. I think it should be pretty easy but any help would be really appreciated.

It looks to me, when I view source of the page as rendered in the browser, that each of those blocks is in a separate fieldset. As the fieldsets are not inside a suitable DIV, you'll need to edit code for this one.

Find where the fieldsets are in ZC's soure code -- somewhere in the modules folder I think -- and add code to create a DIV which will wrap around all those payment option fieldsets. Make sure the DIV has a class, and then style that class in your stylesheet.

Hope this gets you started.

Rob

Thank you so much for your help.

I've got it under tpl_checkout_payment_default.php and when I added a div to it all I could get a background but the border still remained around each of the fieldsets. Do you know if there is another file that controls the layout. Under Modules/Order total there are files but they don't seem to control the layout either.

The borders are all coming from the stylesheet. You can turn off the borders of those fieldsets and then adjust the border of your new DIV.

Do you use the Web Developer Tools in Firefox? They are indispensible when you're trying to find what's going on in Zen Cart. Download and install them if you haven't already. Then select Outline/Outline Current Element in the Web Dev tools and move your cursor around on screen. (You may have to widen your browser window to see the name of the elements.)

Or use CSS/View Style Information and click on the element to see what the stylesheet currently says. And you can use the CSS/Edit CSS command to experiment with the live site. Doing that tells me that fieldset currently has a border (no surprise!) in the stylesheet, so find that definition and change it so it says border: 0; and the border goes away. Magic! (Of course, once you know what works, you have to make the same changes permanently in your stylesheet.)

Rob

Ok.

I've been working at this idea and made a lot of progress.

I have attached a screen shot of whats it like now. The last thing I need is just one border around all the Gift Card, Discount Coupon and Reward point sections.

Any idea.s

<div class="payment"> 
<?php if(!($COWOA && $selection[$i]['module']==MODULE_ORDER_TOTAL_GV_TITLE)) {?>
  <payment>
  <legend><?php echo $selection[$i]['module']; ?></legend>
  <div class="gvBal larger"><?php echo $selection[$i]['checkbox']; ?></div>
  <label class="inputLabel"<?php echo ($selection[$i]['fields'][$j]['tag']) ? ' for="'.$selection[$i]['fields'][$j]['tag'].'"': ''; ?>><?php echo $selection[$i]['fields'][$j]['title']; ?></label>
  <?php echo $selection[$i]['fields'][$j]['field']; ?>
  </payment>
  <?php } ?></div>

Thats what I currently have in tpl_checkout_payment_default. and then in the style sheet I have:

.payment
{
border: 1px solid #4f4f4f;

	padding: 0.5em;
	margin: 0.5em 0em;
}

Now on to the Shipping screen :)

Any help?

Ok.

I've been thinking more about this and I think, in my limited knowledge of php, I think all the discount coupons, gift card and reward modules are all using this part of tpl_checkout_payment.php page

<?php if(!($COWOA && $selection[$i]['module']==MODULE_ORDER_TOTAL_GV_TITLE)) {?>
  <payment>
  <legend><?php echo $selection[$i]['module']; ?></legend>
  <div class="gvBal larger"><?php echo $selection[$i]['checkbox']; ?></div>
  <label class="inputLabel"<?php echo ($selection[$i]['fields'][$j]['tag']) ? ' for="'.$selection[$i]['fields'][$j]['tag'].'"': ''; ?>><?php echo $selection[$i]['fields'][$j]['title']; ?></label>
  <?php echo $selection[$i]['fields'][$j]['field']; ?>
  </payment>
  <?php } ?>

As when I put a <div> around that code, the box is around each box. So theres 3 boxes.

I really appreciate someone help as I'm pulling my hair out!

Thanks in advance

That's happening because that code is called as many times as necessary, so you get multiple boxes. You have to find the code that is calling that code, and put your outside div there. (Easy for me to say. :smile: )

Rob