Return Manager for Zen Cart!

I’ve always tried to have some form of a return system. There is something about on line stores that everyone forgets that items may get returned for some reason or another.. I’ve not found a shopping cart program that came with a return system built in.. least not one that’s free and open code!

So, what’s a person to do!

Why create one for starters.. Which is what I did.. the mods all have a RMA numbering system others have order editing made simple, but none went the extra foot to track, edit or do cancel requests.

Return Manager does both cancels if the order is in processing, returns if the order shipped or delivered. Designed to allow order tracking logged in or not so it works with COWAA out of the box.

So go to my github page or more info on my site product page to read more on what this mod does. I’ve not uploaded to ZC yet for I want to think on it some more.. Live on my site but I may add some more to the code yet..

Return Manager was designed for  ZC1.5.5e only with PHP7.1.11

How to animate the Hamburger icon on a responsive template!

Most responsive templates use some type of mobile template page when the screen or device type says it needs to go small. The standard icon for menu is what’s called a hamburger icon! A menu (Hamburger) icon is 3 horizontal bars. The classic animation is to rotate a image to make three vertical bars.. Some just make it change color when hovered over or something.

Sprites which is what we used to call such images are out and fonts like FrontAwesome is in… Now we can have some fun….

Google animating hamburger icons using CSS only and you can find lots of cool info, so why add it here… I used the cool info from callmenick(dot)com/_development/css-hamburger-menu-icons and modified it to work on responsive SB v1 template for Zen Cart!! This should work on other templates too, just have to find the hamburger code..

This is how I did it using the responsive sheffield blue v1.1 free template on a Zen Cart v1.5.5e base. The RSB template was upgraded to ZC1.5.5e standards and fitted to work with COWAA!

So with that in mind, pull up a css sheet or create one of your own.. I use one for my nija form code so I just added to it. It needs to always load so use a name starting with stylesheet_NAME.css

Add the following css for the hamburger icon based on Nicks’ blog.

/* -----------------------------------------------------------------------------

  HAMBURGER ICONS COMPONENT
  Animating CSS-Only Hamburger Menu Icons
A collection of animating CSS-only hamburger menu icons. View demo 
[here](http://callmenick.com/_development/css-hamburger-menu-icons/).
----------------------------------------------------------------------------- */
/**
 * Toggle Switch Globals
 *
 * All switches should take on the class `c-hamburger` as well as their
 * variant that will give them unique properties. This class is an overview
 * class that acts as a reset for all versions of the icon.
 */
.c-hamburger {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 40px;
  height: 40px;
  font-size: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: 10%;
  border: none;
  cursor: pointer;
  -webkit-transition: background 0.1s;
          transition: background 0.1s;
}

.c-hamburger:focus {
  outline: none;
}

.c-hamburger span {
  display: block;
  position: absolute;
  top: 18px;
  left: 10px;
  right: 10px;
  height: 4px;
  background: white;
}

.c-hamburger span::before,
.c-hamburger span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;
  content: "";
}

.c-hamburger span::before {
  top: -10px;
}

.c-hamburger span::after {
  bottom: -10px;
}

/**
 * Style 2
 * 
 * Hamburger to "x" (htx). Takes on a hamburger shape, bars slide
 * down to center and transform into an "x".
 */
.c-hamburger--htx {
  background-color: #000;
}

.c-hamburger--htx:hover {
  background-color: #555753;
}

.c-hamburger--htx span {
  -webkit-transition: background 0s 0.3s;
          transition: background 0s 0.3s;
}

.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  -webkit-transition-duration: 0.3s, 0.3s;
          transition-duration: 0.3s, 0.3s;
  -webkit-transition-delay: 0.3s, 0s;
          transition-delay: 0.3s, 0s;
}

.c-hamburger--htx span::before {
  -webkit-transition-property: top, -webkit-transform;
          transition-property: top, transform;
}

.c-hamburger--htx span::after {
  -webkit-transition-property: bottom, -webkit-transform;
          transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
  background-color: #0f3f57;
}

.c-hamburger--htx.is-active:hover {
  background-color: #555753;
}

.c-hamburger--htx.is-active span {
  background: none;
}

.c-hamburger--htx.is-active span::before {
  top: 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.c-hamburger--htx.is-active span::after {
  bottom: 0;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  -webkit-transition-delay: 0s, 0.3s;
          transition-delay: 0s, 0.3s;
}

Than in includes/template/YOUR_TEMPLATE/template/tpl_modules_mobile_categories_tabs.php
Replace the hamburger icon call on line 21 with this line..

<div class="toggleMenu" ><button class="c-hamburger c-hamburger--htx"><span>toggle menu</span></button></div>

At the very bottom right after the last closing div tag, add the script to detect the mouse click on your hamburger!!

  <script>
  (function() {

    "use strict";

    var toggles = document.querySelectorAll(".c-hamburger");

    for (var i = toggles.length - 1; i >= 0; i--) {
      var toggle = toggles[i];
      toggleHandler(toggle);
    };

    function toggleHandler(toggle) {
      toggle.addEventListener( "click", function(e) {
        e.preventDefault();
        (this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
      });
    }

  })();
</script> 

I’ve spent allot of time modifying the css to down size and make it work for me.. Theres other things you can do here, the X is not that simple to resize… have fun

COWOA for Zen Cart 1.5.5e

In the works, got basically COWOA working in ZC 1.5.5e and looking good.. this is what the logic does..

  • Register an account using Firstname, Email address, and password — full access to your site. Add billing, shipping address during checkout.
  • Create a full account, setting up full user details, billing address, shipping address now.
  • Checkout Without and Account or full account without login in!
  • Create a full account at the same time as checkout by adding a password or not!

With the ability to create an account during checkout by adding a password, do we really need an account creation button? So many changes to the standard checkout process that downloads no longer work right and that’s where I’m at right now.. I’m learning how downloads function so I can rewrite the code to work with the new account rules. Then I have some new code to add and package it all up for bata testing.

With all the changes, this won’t be an update to any other COWOA but a new version. Basically the same system I currently use on my site.

Zen COWOA

Is it really so hard to understand that this can’t be good for business?

Not that hard to understand, too bad you didn’t catch what I was saying,, COWOA has the ability to do a lot of what you was asking for and does.. It can stand alone and turn a standard site into a COWOA only site, do both and demo that it could also allow check out with existing account. However, the changes needed to do this is deep in the core code and would be difficult for some none coders to understand. For that reason, I elected to not continue this conversation in zen forum.

One thing nice about zen, one never HAS to share what they know… no matter how hard one tries, we still don’t have to listen!

I’m also finding it hard to believe that you think your customers are too stupid to use your site! Most issues we see in site use is in the pore designed templates.

my two cents worth….

Zen Link Manager

Submitted an update. I had to make allot of changes to the code so that the old method linkListingBox::tableBox() is no longer used. Spent some time trying to get tabular display and Columnar Display to work, but in the end I had to write the code for each instead of using the existing system.

With that, there some new configure settings and many other changes. The code remains independent from any core files so installing is still simply replace all and if you already have 3.6.x installed, don’t upload the auto loader. From the Links page you will see a new button ‘check for updates’ click it and it does a check for updates on ZC, but when it fines that the new init_links_manager is 3.7.0, it will reinstall the updated configures without deleting any existing table entries.

The new Columnar and tabular display is responsive already, but displays just fine in a non-responsive template. The code is running live on my site, but the forms are not the same.. the same code that I submitted is also on my GitHub page and here.

Write Review Star Using Font Awesome Round 3

I’ve totally went down a different patch with this one.  The code is fairly simple with only three changes to the reviews and reviews_description tables.  One to add the yes and no voting, the other to add reviews title.  Then it’s just a matter of redesigning the page layout and how the review is displayed and new added.  For me it was simply a desire to keep the user on the product page, the second was to display reviews for only one product at a time and allow adding there own review without leaving that page.

I decided on creating one new page and modifying two existing pages, while not using one other at all.  Basically an overhaul of how reviews logic functions on my site!  I was going to use the side box for this, but ended up not even needing it within the logic of how reviews function.

Some of the logic that went into this design.

Product Page:  Review average rating without links in price, add to cart box.
Reviews Tab:  No existing reviews, just the write review expanding button.  Existing reviews, graph and list of reviews below write review expanding button.
Reviews display 150 characters with a more link that expands to the full text.. doesn’t leave the page!
Reviews have a helpful vote yes or no link.
Reviews have a report abuse link.

 Main Page Product Lists:  Review average rating with link to show all reviews and link to write a review.

Show All Reviews:  Display a graph with small image of product, product name links to product page.  Product price is displayed with a write review expanding button.  Reviews are displayed below same as product page.

Write Review:  Full redesign for this page.

When a user submits a review without any errors, a cookie is set with the product ID, something I do for my site and not normal for ZC sites, which keeps the current browser form submitting another review on that product for 5 days or until they wipe cookies!

I think what I did will work out for me.. I think the idea in this logic would work grate for ZC 1.6 or 2.  Not sure if theres interest in me coding this as an addon.  Which is good.. If you think about it, having something other ZC sites don’t makes your site one step above the others!!

If this is something you would like for your site… ask..

Responsive Reviews Responsive Reviews Responsive Reviews

Write Review Star Using Font Awesome Round 2

I’ve gone down another rabbit hoe with reviews. I’ve looked at some other sites, Amazon used graphs, another had words with the stars as css sprites, another kept you on the product page to add reviews, one had separated the review score from the review comment.. which I thought would be grate if I did books..

So I added graphs, cleaned up the layout, added voting for helpful or not.. added an abuse link which fires up the contact us popup with the subject field in with the review id…

Now the form expends down to allow writing and submitting a review, all while still on the product page… still thinking about separating the review score and comment… folks always have time to click a rating but don’t have allot of time to think out a comment! unless its to say how much you disliked it…

I think I’m on to something better then the standard reviews or not! Look at the shoots, ask.. if I get enough votes, maybe I’ll convert it to a mod… I also had to redo the amin side to make it work there too..

Some screen shoots..

review review2 review3review4

Write Review Star Using Font Awesome

This is more of a tip, too small to me a mod.. while modifying my tpl_product_reviews_write_default.php for responsive form design, I solved two issues I had and thought why not pass them along!

This tip is for anyone using Font Awesome on there site or wish to install it.

First of all, I have a testing server setup so I can create and test than upload to my live site. One of the pain was Font Awesome would not always work if I loaded locally form my site so I had to have the link to Font Awesome when live and link to my local copy when working off-line on design. Got the idea off the net and modified it to work for me.

Replace or add the script below the link to Font Awesome as below on your YOUR_TEMPLATE/common/html_header.php page just above the closing head tag;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">  
<script>
    (function($){
        var $span = $('<span class="fa" style="display:none"></span>').appendTo('body');
        if ($span.css('fontFamily') !== 'FontAwesome' ) {
            // Fallback Link
            $('head').append(<?php echo '\'<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . 'font-awesome.css' . '" />\''; ?>);
        }
        $span.remove();
    })(jQuery);
</script>

Now that you have it installed, now what! Why I’ve started down this patch… I finally got around to redesigning the layout of my Add Review page. It was the standard mess and not responsive at all. In making it responsive as with my other forms, I hated the old radio button rating of 1 – 5 input buttons with a 5 star image. Really an antic method that I was stuck with… But wait! looking at other sites, like Amazon, they was using a cool 5 star set of stars, not a old style radio input button! must be something I could do!

Was looking at coding something in jQuary to do it. Then looking at Font Awesome, they was displaying the same set of star’s as amazon was using… turns out the coding wasn’t a jQuary answer after all…

Turns out adding cool star’s was as easy as adding font awesome to your site. And to top it off, stars are not the only thing you can use.. like jets, apples, bells, cars…. get the idea, any icon within the font can be used..

First you need some CSS to handle the stars create or add to YOUR_TEMPLATE/css/product_reviews_write.css page;

.masterdog {position:relative;} 
 
.rating { float:left;} 
.rating:not(:checked) > input {position:absolute;top:-9999px;clip:rect(0,0,0,0);} 
.rating:not(:checked) > label {float:right;width:1em;padding:0 .1em;overflow:hidden;white-space:nowrap;cursor:pointer;font-size:4em;line-height:1.2;color:#e0e0e0;} 
.rating:not(:checked) > label:before {font-family: FontAwesome;content: "\f005";} 
.rating > input:checked ~ label {color: #ef2929;} 
.rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label { color: #f57900;} 
.rating > input:checked + label:hover, .rating > input:checked + label:hover ~ label, .rating > input:checked ~ label:hover, .rating > input:checked ~ label:hover ~ label, .rating > label:hover ~ input:checked ~ label {color: #729fcf;} 
 
[id^="tooltip-"] {-webkit-transition: .4s;transition: .4s;} 
[id^="show_me-"] {opacity: 0;} 
#remove_me {opacity: 1;} 
#tooltip-1:hover ~ #show_me-1 {opacity: 1;} 
#tooltip-1:hover ~ #remove_me {opacity: 0;} 
#tooltip-2:hover ~ #show_me-2 {opacity: 1;} 
#tooltip-2:hover ~ #remove_me {opacity: 0;} 
#tooltip-3:hover ~ #show_me-3 {opacity: 1;} 
#tooltip-3:hover ~ #remove_me {opacity: 0;} 
#tooltip-4:hover ~ #show_me-4 {opacity: 1;} 
#tooltip-4:hover ~ #remove_me {opacity: 0;} 
#tooltip-5:hover ~ #show_me-5 {opacity: 1;}  
#tooltip-5:hover ~ #remove_me {opacity: 0;} 
 
.rating span {transition: opacity 1s;position:absolute;top:50px;left:10px;width:300px;height:20px;font-size:3.5em;line-height:1;color:black;}  
 
@media (max-width:480px){.rating span {font-size:2.5em;}.rating:not(:checked) > label {font-size:3.5em;}}

Now all that’s left is to replace the old input with the new, in YOUR_TEMPLATE/template/tpl_product_reviews_write_default.php page;

Find;



<div class="ratingRow"> 
<?php echo zen_draw_radio_field('rating', '1', '', 'id="rating-1"'); ?> 
<?php echo '<label class="" for="rating-1">' . zen_image($template->get_template_dir(OTHER_IMAGE_REVIEWS_RATING_STARS_ONE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . OTHER_IMAGE_REVIEWS_RATING_STARS_ONE, OTHER_REVIEWS_RATING_STARS_ONE_ALT) . '</label> '; ?> 
 
<?php echo zen_draw_radio_field('rating', '2', '', 'id="rating-2"'); ?> 
<?php echo '<label class="" for="rating-2">' . zen_image($template->get_template_dir(OTHER_IMAGE_REVIEWS_RATING_STARS_TWO, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . OTHER_IMAGE_REVIEWS_RATING_STARS_TWO, OTHER_REVIEWS_RATING_STARS_TWO_ALT) . '</label>'; ?> 
 
<?php echo zen_draw_radio_field('rating', '3', '', 'id="rating-3"'); ?> 
<?php echo '<label class="" for="rating-3">' . zen_image($template->get_template_dir(OTHER_IMAGE_REVIEWS_RATING_STARS_THREE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . OTHER_IMAGE_REVIEWS_RATING_STARS_THREE, OTHER_REVIEWS_RATING_STARS_THREE_ALT) . '</label>'; ?> 
 
<?php echo zen_draw_radio_field('rating', '4', '', 'id="rating-4"'); ?> 
<?php echo '<label class="" for="rating-4">' . zen_image($template->get_template_dir(OTHER_IMAGE_REVIEWS_RATING_STARS_FOUR, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . OTHER_IMAGE_REVIEWS_RATING_STARS_FOUR, OTHER_REVIEWS_RATING_STARS_FOUR_ALT) . '</label>'; ?> 
 
<?php echo zen_draw_radio_field('rating', '5', '', 'id="rating-5"'); ?> 
<?php echo '<label class="" for="rating-5">' . zen_image($template->get_template_dir(OTHER_IMAGE_REVIEWS_RATING_STARS_FIVE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . OTHER_IMAGE_REVIEWS_RATING_STARS_FIVE, OTHER_REVIEWS_RATING_STARS_FIVE_ALT) . '</label>'; ?> 
</div>

And replace all of it with the following;

<div class="masterdog">
<div class="rating">
<?php echo zen_draw_radio_field('rating', '5', '', 'id="tooltip-5" '); ?><label for="tooltip-5"> 5 stars</label>
<?php echo zen_draw_radio_field('rating', '4', '', 'id="tooltip-4" '); ?><label for="tooltip-4"> 4 stars</label>
<?php echo zen_draw_radio_field('rating', '3', '', 'id="tooltip-3" '); ?><label for="tooltip-3"> 3 stars</label>
<?php echo zen_draw_radio_field('rating', '2', '', 'id="tooltip-2" '); ?><label for="tooltip-2"> 2 stars</label>
<?php echo zen_draw_radio_field('rating', '1', '', 'id="tooltip-1" '); ?><label for="tooltip-1"> 1 stars</label>
<span id="show_me-5">Very Best</span><span id="show_me-4">Best</span><span id="show_me-3">Good</span><span id="show_me-2">Bad</span><span id="show_me-1">Pretty Bad</span><span id="remove_me"></span>
</div></div>

FontAwesome Stars
The stars are radio inputs so the back end code stays the same, the only thing changing is the input radio buttons. The change in order and labels are needed for text readers and touch which makes things work for touch screens like phones..

Now all you need to do is redesign that boring review page, you have lots of space now! You can checkout how I did my page, I have guest checkouts so guest reviews are allowed.
star2

Update:

I found that just having stars was a bit boring… I added words too. On hover the words change to match the star, on selection, the 1 of 5 Stars is displayed! The whole thing is responsive too…

rating3 rating4

You need a bit of script to get the 1 of 5 to respond to the star clicks..

in includes/modules/pages/produst_reviews_write/jscript_main.php add this bit of jQuary code somewhere.

$(document).ready(function(){
$("input[name='rating']").change(function(){
var radVal = $("input[name='rating']:checked").val();
$('#remove_me').html(radVal + ' of 5 Stars!');
});
});

If your like me and try different things, maybe 1 of 5 is not what you want and what was selected stays visible. Then the code below would work for you too.

$(document).ready(function(){
  $("input[name='rating']").change(function(){
    var radVal = $("input[name='rating']:checked").val();
    switch (radVal) {
    case '1':
        $('#remove_me').html('<?php echo STAR_1;?>');
        break;
    case '2':
        $('#remove_me').html('<?php echo STAR_2;?>');
        break;
    case '3':
        $('#remove_me').html('<?php echo STAR_3;?>');
        break
    case '4':
        $('#remove_me').html('<?php echo STAR_4;?>');
        break
    case '5':
        $('#remove_me').html('<?php echo STAR_5;?>');
        break
    default:
        $('#remove_me').html('');
} 
  });
});

Zen Cart Password Reset

If you had to pick what type of password reset system you used, which would it be!

I spent some time looking into different password reset, both sides of the coin sort of speaking… The user side and the dark side. If you think hard about it, the answer would not to have any users accounts! Looking at Zen Cart you have to ask yourself what is it you are protecting. For me, I prefer not to hold any card or payment information on my servers or SQL database. The only thing I’m trying to protect is the user information, address, phone number. I don’t ask for birth dates.

So looking at the possible coding I can find only three possible solutions, 1) email a password and hope they change it. 2) create a token, email it attached to an URL, if the token matched, let them change there password. 3) have them create a answer to a question, if email, question right, let them change there password.

I don’t like the current method of emailing a password and hoping they will change it. Sending the URL with a token is good, but what happens when the email address is dead? I’ve ran into this problem and had to call them to get the password changed. I like the idea of keeping them on site and giving them self-help or even better how about letting them pick a solution. Options like pick how you wish to reset your password please!

I’ve completed working to code my solution, here’s your opportunity to give it a go.

Projects

Some of the projects I’m working on can be found here or my GitHub site.  Also if I uploaded to Zen Cart Plugins, you can find them there and I do answer question there too.  My GitHub versions get the first updates for testing before going live on ZC site.  I also will post them here for your download… Support! Remember, free is free, but I still have to eat, so work comes first!

Projects:

  • My Idea of COWOA (in Progress)
  • Link Manager
  • Responsive Order Steps
  • Pro-Auctions
  • Block Email/Domain addresses
  • Advanced Password Reset Manager