WordPress.org

Ready to get started?Download WordPress

Forums

Responsive e-commerce site (27 posts)

  1. mediopirzel
    Member
    Posted 2 years ago #

    Hi guys,
    I'm very proud of my new e-commerce website:
    http://www.modatak.com
    The Template is designed and coded by me, using html5 and css3 and this is my first e-commerce and responsive website.
    The site is using this plugins:

    • wp e-commerce
    • Google Analytics for WordPress
    • WordPress SEO
    • WP Super Cache
    • Contact Form 7

    I think the result is simple and clean and people say the design is elegant and easy.

    Please, we need more feedback from professionals.
    Do you like the website? Do you have any question how I did it? What do you think?

  2. hectorgarrofe
    Member
    Posted 2 years ago #

    Nice e-commerce site, it looks great on my iPad.

  3. vbk100
    Member
    Posted 2 years ago #

    Great ! It would be a great help for WordPress users if you could release the design as a theme

  4. mediopirzel
    Member
    Posted 2 years ago #

    Hi Hector,
    thank you! I'm still improving mediaqueries for smartphones and ipads but I think now it's pretty nice.

  5. mediopirzel
    Member
    Posted 2 years ago #

    Hi vbk100,

    I'm sorry but It's impossible for me to release this theme with the exact design because of the rights but I think it is a good idea to release this templates with different css.
    If somebody is interested in some parts of the web, i can share some code or ask questions about how I did it.

  6. premiumwp
    Member
    Posted 2 years ago #

    Really nice work. Well done.

  7. mediopirzel
    Member
    Posted 2 years ago #

    Thank you premiumwp!!

  8. vbk100
    Member
    Posted 2 years ago #

    Hello mediopirzel,

    Got an Idea and hope you already might have plan to implement it. How about letting your( The shop owner's ) customers to checkout a product right from the showcase page? I mean ... only the product's name and price are being displayed now. Along with them the add to cart or checkout option would ease your customers to order. I think you already may have this Idea :)

    The second one ...an ajax checkout option will be more convenient for your customers. Ofcourse this is a common feature. Not my Idea:)

  9. icing
    Member
    Posted 2 years ago #

    You have done a really good job with this website. Its a pity it can't be released.

    I am a novice so don't know how to use only some parts of the theme.

  10. mediopirzel
    Member
    Posted 2 years ago #

    Hi vbk100,
    I really appreciate your feedback.

    You are right, some e-commerce sites have this "fast add to cart" button in products list.
    I think this is a perfect solution for some shops (market,bookshop..), but in our case, choosing a size, is a mandatory step before adding a product to cart. We have to think about it.
    We will do some A-B tests and maybe this idea will be one of them.

    The second one...
    I don't understand your idea, I think our checkout process is mostly based on ajax. What do you mean?

    Once again, Thank you

  11. BlazeJunky
    Member
    Posted 2 years ago #

    You website looks nice. Quite good and useful content.

  12. mediopirzel
    Member
    Posted 2 years ago #

    Thank you BlazeJunky!!

  13. reineskye25
    Member
    Posted 2 years ago #

    wow! your site rocks!

  14. reineskye25
    Member
    Posted 2 years ago #

    Hi, can I ask you something? I noticed that when navigating to different pages in your ecommerce site, when I press back button it reloads the previous page instead of just displaying the previous page stored in the cache. How did you do that? Because the big problem in the online exam I'm doing is when pressing the back button it displays the previous question, what I want to happen is when the user press the back button it will re-execute the code so it will display the current question number instead of the previous one.

  15. mediopirzel
    Member
    Posted 2 years ago #

    Hi reineskye25 and Thank you.

    I'm sorry but I have no idea about your question. I'm using wp e-commerce with Super Cache plugins.
    This is my Super Cache configuration, maybe this helps you:

    1. Cache hits to this website for quick access.
    2. Use mod_rewrite to serve cache files.
    3. Compress pages so they’re served more quickly to visitors.
    4. Don’t cache pages for known users.
    5. Don’t cache pages with GET parameters. (?x=y at the end of a url)
    6. Make known users anonymous so they’re served supercached static files
    7. Cache rebuild. Serve a supercache file to anonymous users while a new file is being generated.
    8. Clear all cache files when a post or page is published or updated.
    9. Extra homepage checks.

    Maybe it has something to do with number 5 or updating your htaccess file.

  16. multimule
    Member
    Posted 2 years ago #

    Pretty nice theme
    Can u share with us your e-commerce .css file?
    I supposed that u needed to edit them. I have an responsive theme and no working well in the wp e-commerce plugin zones site.

    PD- ¿Eres español?

  17. multimule
    Member
    Posted 2 years ago #

    I can resolve some translations issues for you (like: -- Please Select --)

    Partes que no se traducen con el archivo .po:

    #:/wp-content/plugins/wp-e-commerce/wpsc-includes/product-template.php:line 412
    msgid " from %s"
    msgstr "desde %s"
    $from_text = apply_filters( 'wpsc_product_variation_text', 'from' );
    Fijar las comillas de from que estan separadas

    #:/wp-content/plugins/wp-e-commerce/wpsc-includes/variations.class.php:line 47
    'name' => __('Please select', 'wpsc'),
    Fijar '--Please Select--' y dejarlo en 'Please select' como aparece arriba

    #: wp-content/themes/nombre-del-tema/wpsc-cart_widget.php:line 40
    msgid "excluding shipping and tax"
    msgstr "excluyendo impuestos y envi­o"

    #:/wp-content/plugins/wp-e-commerce/wpsc-widgets/price_range_widget.php:line 129-131
    cambiar "'>Over " por "'>Más de "
    cambiar "'>Under " por "'>Menos de "

  18. Roselienjessie
    Member
    Posted 2 years ago #

    Your websites looks cool ! You have done a good job.

  19. mediopirzel
    Member
    Posted 2 years ago #

    Hi multimule,
    thank you for you snippets!!!
    I'm sorry but I can't share de css theme yet.

    Converting the site into a responsive website was easy for me:

    /* Mini tablets and smaller*/
    @media only screen
    and (min-width : 240px)
    and (max-width : 480px) {
    	// SOME CSS
    }
    
    /* Iphone and smaller*/
    @media only screen
    and (min-width : 240px)
    and (max-width : 320px) {
    	// SOME CSS
    }

    This link is very useful for testing your site in different devices:
    quirktools.com/screenfly/
    This

    If you need some help you can contact me here:
    [contact link moderated - please keep the support within the forum]

    PD: Sí soy español, de Barcelona :)

  20. multimule
    Member
    Posted 2 years ago #

    Ey mediopirzel
    something was wrong with modatak contact form:
    Falló el envío de tu mensaje. Por favor inténta más tarde o contacta al administrador por otro medio.
    Is there someone another form to contact with you?
    I'm not sure where I must get in this piece of code
    Thanks in advance bro

    PD: Soy de Toledo y de mayor quiero hacer tiendas como tu ;P

  21. bbbdj916
    Member
    Posted 2 years ago #

    @mediopirzel nice site! I would be interested to see some of the code on how you did some of the wp-ecommerce pages. The mini cart is pretty slick! Great job!

  22. mediopirzel
    Member
    Posted 2 years ago #

    @multimule I did some test and the form is working for me. You can contact me on twitter, the link is a the top of the website.

    @bbbdj916, this is the idea of the mini-shopping cart:
    You can modify the design of the mini cart in "wpsc-cart_widget.php"

    Then, add this code on your header or sidebar:

    <a id="cart-button" class="cart checkout-tab shopping-cart-basket bluegradient" href="#shopping-cart"><strong>SHOPPING CART</strong></a> <!-- the button -->
    <div style="display:none"><div id="shopping-cart"><div class="shopping-cart-basket-icon"></div><?php echo nzshpcrt_shopping_basket(); ?></div></div><!-- the cart-->

    Finally, use fancybox for animating the cart:

    jQuery("a#cart-button").fancybox({
    		'hideOnContentClick': true,
    		'transitionIn'	:	'elastic',
    		'transitionOut'	:	'elastic',
    		'speedIn'		:	400,
    		'speedOut'		:	400,
    		'overlayShow'	:	false,
    		'padding'       :   0,
    		'centerOnScroll':   true
    	});
  23. bbbdj916
    Member
    Posted 1 year ago #

    @mediopirzel that is boss. Thanks for that code. I really appreciate it!

  24. vbk100
    Member
    Posted 1 year ago #

    @mediopirzel

    this is the idea of the mini-shopping cart:
    You can modify the design of the mini cart in "wpsc-cart_widget.php"

    Great ! Thanks for the code

  25. mediopirzel
    Member
    Posted 1 year ago #

    Hi people,
    I wrote an explanation in spanish about our shopping cart here:
    http://es.forums.wordpress.org/topic/tak-nuestra-tienda-online-hecha-en-wordpress?replies=2

    And you can check this overlay effect here:
    http://www.modatak.com/productos/punto/chaqueta-de-punto-con-cremallera-y-rayas/
    First click the shopping cart button (top right blue button), then try to add a product in the shopping cart to see this effect.
    I hope this helps.

  26. compositelitmus
    Member
    Posted 1 year ago #

    I like the design - very trendy and modern look.

  27. vbk100
    Member
    Posted 1 year ago #

    @mediopirzel

    I have checked your website on small screens using the screenfly tool. There are some issues on mobile devices of Motorola and some other. Hope you check it.

    Thanks

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.