Announcement

Collapse
No announcement yet.

Dynamic Cart symbol on Mobile

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Dynamic Cart symbol on Mobile

    I have noticed that none of the Cart templates or Responsive 3dcart sites I have looked at have a Dynamic Cart symbol when seen on a mobile device.
    Is there a good reason that I am not aware of.

    It seems that if you come back to the site on your mobile device, you should be able at a glace to quickly tell that you have items in your cart. Maybe a cart with a number superimposed on it.

    In looking through the code, I think it would not be hard to do, I just have not seen it implemented, and I am wondering why?!

  • #2
    I agree. Looks like the best thing to do is cough up a few bux and have a 3rd party code it for you if you don't know how to do it yourself.

    Comment


    • #3
      If you want to give it a try yourself here's the code, (in case you didn't already know).

      HTML Code:
      <!--START: shopping_cart-->
      [ITEMSINCART]
      <!--End: shopping_cart-->

      I'd probably put it in a span inside the cart icon container with a relative position that would move it over the cart icon.

      Comment


      • #4
        Originally posted by ProRetail View Post
        If you want to give it a try yourself here's the code, (in case you didn't already know).

        HTML Code:
        <!--START: shopping_cart-->
        [ITEMSINCART]
        <!--End: shopping_cart-->

        I'd probably put it in a span inside the cart icon container with a relative position that would move it over the cart icon.

        I don't know about the OP, but I'm not code literate enough to know where the cart icon container is or how to add a "relative" position to the code you provided. The span part seems easy, though...<span>...</span> lol.

        Comment


        • #5
          Since I don't know which template either of you are using, I can't really offer more than that. If you want to PM me your email address, I can take a look after work hours.

          Comment


          • #6
            You'd do it like this.
            Add the code below after the code for the mobile shopping cart image or icon.
            The code below will superimpose the quantity of items in the cart over the cart image or the icon you have.
            You have to play with the position numbers until things line up.
            The Class="show-mobile" will hide this on the Desk-Top version. Your Class to accomplish this might be different.

            Code:
            <a href="view_cart.asp" class="show-mobile" style="text-decoration:none !important;">
            <span style="font-size: 120%;position: relative; left: -34px;float:right;bottom:-53px;color:#fff;">
            <!--START: shopping_cart-->
            [ITEMSINCART]
            <!--End: shopping_cart-->
            </span>
            </a>

            Comment

            Working...
            X