Shopping Cart Steps Images [Support Thread]

Hello Everyone,

I am excited to submit a new addon - Shopping Cart Steps - to the Zen Cart community. I have made the thread in anticipation of the acceptance of this contribution.

Addon Features:

• 6 images to show where the customer is in their checkout process
• 5 images (to account for the no shipping option) to show where the customer is in their checkout process
• Browser tested using Firefox, IE, and Safari.

Trinity14:

Hello Everyone,

I am excited to submit a new addon - Shopping Cart Steps - to the Zen Cart community. I have made the thread in anticipation of the acceptance of this contribution.

Addon Features:

• 6 images to show where the customer is in their checkout process
• 5 images (to account for the no shipping option) to show where the customer is in their checkout process
• Browser tested using Firefox, IE, and Safari.

Isn't this the same as this module:

http://www.zen-cart.com/downloads.php?do=file&id=268

Thanks,

Anne

Nope, not at all. The concepts are similar though ;)

Thanks for the link.

Trinity14:

Nope, not at all. The concepts are similar though ;)

Thanks for the link.

Do you have this working on a demo site so we can see it in action?

Here's is a demo site address:
http://www.suite10designs.com/new_client/

We can't view the checkout process.
Nothing can be added to cart on your demo site....

I have made the appropriate changes to the Customer Approval Status so you can now...

Thanks

Now available for download :)
http://www.zen-cart.com/downloads.php?do=file&id=1846

Trinity14:

Now available for download :)
http://www.zen-cart.com/downloads.php?do=file&id=1846

Thanks Trinity, 5 sites installed no problems and counting. :)

Is this compatible with ZC v1.5?

Absolutely :)

Trinity14:

Absolutely :)

Thank you! I don't have a test cart, so I'm installing this raw on my live site... here's hoping I do it right. I'll come back here if I need help. Thank you for the really detailed instructions in the readme file, it's appreciated!

You're welcome, I'm certain you will install this right. I'm here to help if you need assistance. Let me know how it goes :)

Okay so I added the images folder for the shopping_cart, and I edited the first php file (languages for the //cart_steps) - then when I went to the next step for editing my tpl_login default file, that didn't exist for my template. I triple checked. To remedy this I went in to the default template folder, copied the login default file from there, and pasted it into my template's folder. Before making any edits to that file though, I double-checked my login page, and it looks like this:

http://meljensdesigns.com/index.php?main_page=login

I think I made a mistake in copying the login default file over, because the two login boxes there (new customers and existing customers) used to be side-by-side. I checked this in Chrome and in IE and they both look the same. I even deleted the copied file from my template's folder and it didn't change it back. Not sure how to fix this. :-(

(Can you tell I am not that knowledgeable with coding? lol! I did my best to follow your steps so far, and I've installed other mods, not sure what I did wrong! Guessing copying that file was a BAD idea)

Meljen - I know making changes to a live site can be stressful. You are right to use the template overwrite system.

I am not familiar with the ashley pink template. I believe if you continue with the installation, it could remedy the spacing issue you are experiencing.

Your new customers box has shifted up and in doing so has made the returning customers unable to 'fit' where it should. Once you add the css styling (#cartsteps) in your template it should be successful.

Thanks for letting me know your progress, you are on the right track :)

meljen:

Okay so I added the images folder for the shopping_cart, and I edited the first php file (languages for the //cart_steps) - then when I went to the next step for editing my tpl_login default file, that didn't exist for my template. I triple checked. To remedy this I went in to the default template folder, copied the login default file from there, and pasted it into my template's folder. Before making any edits to that file though, I double-checked my login page, and it looks like this:

http://meljensdesigns.com/index.php?main_page=login

I think I made a mistake in copying the login default file over, because the two login boxes there (new customers and existing customers) used to be side-by-side. I checked this in Chrome and in IE and they both look the same. I even deleted the copied file from my template's folder and it didn't change it back. Not sure how to fix this. :-(

(Can you tell I am not that knowledgeable with coding? lol! I did my best to follow your steps so far, and I've installed other mods, not sure what I did wrong! Guessing copying that file was a BAD idea)

The css .floatingbox is set for 47%, add the two together and they still don't have enough space withing the center column, especially if there are padding or margins set. Notice one is set for back the other forward - left justify the box or right justify the box.

If you remove the float: left from #loginDefaultHeading you'll notice the two floating boxes will position correctly.

Good news... There aren't any changes to make to install this module in 1.5.3.

Take care if you are doing a file comparison as two files have been changed with the upgrade but it won't effect this module's performance.

Just to let you know, I installed this and had to make a change to the code you supplied for Includes/Languages/YOUR_TEMPLATE/English.php:

Your supplied code:

Note: *** If you are using zen cart with regular shipping use this ***
// cart_steps
define('SHOPPING_CART_STEPS_0', '<img src="[B]/[/B]images/shopping_cart/shopping_cart_steps_0.gif" alt="Login" />');
define('SHOPPING_CART_STEPS_1', '<img src="[B]/[/B]images/shopping_cart/shopping_cart_steps_1.gif" alt="Shopping" />');
define('SHOPPING_CART_STEPS_2', '<img src="[B]/[/B]images/shopping_cart/shopping_cart_steps_2.gif" alt="Shipping" />');
define('SHOPPING_CART_STEPS_3', '<img src="[B]/[/B]images/shopping_cart/shopping_cart_steps_3.gif" alt="Payment" />');
define('SHOPPING_CART_STEPS_4', '<img src="[B]/[/B]images/shopping_cart/shopping_cart_steps_4.gif" alt="Confirm" />');
define('SHOPPING_CART_STEPS_5', '<img src="[B]/[/B]images/shopping_cart/shopping_cart_steps_5.gif" alt="Thank You" />'); 

Change I had to make:

Note: *** If you are using zen cart with regular shipping use this ***
// cart_steps
define('SHOPPING_CART_STEPS_0', '<img src="images/shopping_cart/shopping_cart_steps_0.gif" alt="Login" />');
define('SHOPPING_CART_STEPS_1', '<img src="images/shopping_cart/shopping_cart_steps_1.gif" alt="Shopping" />');
define('SHOPPING_CART_STEPS_2', '<img src="images/shopping_cart/shopping_cart_steps_2.gif" alt="Shipping" />');
define('SHOPPING_CART_STEPS_3', '<img src="images/shopping_cart/shopping_cart_steps_3.gif" alt="Payment" />');
define('SHOPPING_CART_STEPS_4', '<img src="images/shopping_cart/shopping_cart_steps_4.gif" alt="Confirm" />');
define('SHOPPING_CART_STEPS_5', '<img src="images/shopping_cart/shopping_cart_steps_5.gif" alt="Thank You" />'); 

This is because my store is not in the root of my server.

I have this working for 1.54 and 155e any chance ***Trinity14 ***has a new package in the works?

twitchtoo:

I have this working for 1.54 and 155e any chance ***Trinity14 ***has a new package in the works?
I recently installed Shopping Cart Steps Images in a v1.55e with some minor edits to the install instructions. I made a set of custom shopping_cart_steps_X.gif more mobile friendly. I've included the image below for display.

I will compile an updated plugin with the new responsive images and the solution Fjolsvith provided in post #18. Thanks for showing support!