Soporte » Comunidad » Tu WordPress » tak, nuestra tienda online hecha en wordpress

  • Resuelto tak_bcn

    (@tak_bcn)


    Hola a todos.
    Me gustaría compartir nuestra tienda online realizada en wordpress con todos vosotros.

    La web está realizada en html5 y css3 y preparada para smartphones y tablets con un layout responsive.
    El tema es un diseño original mío y utilizo wp e-commerce como plugin e-commerce.
    Otros plugins que utilizamos son:

    WP E-Commerce Weight & Destination Shipping Modules (precios por paises)
    WordPress SEO (Para el SEO)
    WP Super Cache (Para mejorar rendimiento)
    Google Analytics for WordPress (estadísticas de analytics)
    Contact form 7 (formularios de contacto)
    BackWPup (para backups en el servidor o en dropbox)
    CMS Tree Page View (permite ver las páginas en forma de árbol)
    Me gustaría saber vuestra opinión y si teneis alguna pregunta de como he programado alguna parte, estaré encantado de responder.
    Un saludo
    http://www.modatak.com

Viendo 6 respuestas - 1 de 6 (de 6 total)
  • Hola de nuevo,
    Hemos recibido mucho feedback en los foros en inglés de wordpress.org y getshop.org de gente que nos pregunta como se ha desarrollado algunas partes del proyecto.

    Una de las preguntas que se ha resuelto era cómo habíamos programado el carrito de la compra con un efecto lightbox. Lo compartiré tambien aquí por si alguien lo necesita para algún proyecto.
    En este caso os recuerdo que estamos trabajando con el plugin wp e-commerce, pero puede servir para otras funcionalidades.

    La idea:
    Cuando la gente añade un producto en su carrito de la compra, aparece una capa en overlay simulando que aparece de dentro del botón del carrito. El propio botón del carrito también tiene ese efecto sobre si mismo.

    El Ejemplo:
    Si entramos en la página de un jersey:
    http://www.modatak.com/productos/punto/jersey-verde-oliva-cuello-pico-con-coderas
    Primero hacéis clic en el botón del carrito (icono azul superior) y veréis como aparece la capa. Podéis cerrar la capa.
    Ahora si escogéis una talla i hacéis clic en agregar (boton añadir al carro), veréis como aparece otra vez la capa flotante con el jersey añadido.

    El código:
    El widget de reservas se encuentra en el archivo «wpsc-cart_widget.php».
    Añadimos el siguiente código:

    <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-->

    El botón es un simple link con el href #shopping-cart que es el id de la capa del carrito que por defecto no mostramos.

    Para hacer la animación usamos Fancybox con el efecto ‘Elastic’, apuntando al id del botón. #cart-button.

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

    Espero que os ayude en vuestros proyectos. Si alguien tiene alguna duda o pregunta, estaremos encantados de resolverlos.
    Un saludo.
    tak.

    Pues la verdad es que me ha gustado mucho la página y la idea del carrito está muy bien implementada, con las animaciones y demás, yo solo aumentaría un poco la velocidad de pasar entre página y página y pondria un mapa de google maps con vuestra localización y los apartados de TAK en una barra inferior a la de productos, más pequeña la letra, quedaria más visual, en mi opinión. un gran aplauso para el que la diseño, si señor.

    Muchas Gracias por tus comentarios Julio,
    Para optimizar la velocidad utilizamos super cache y las páginas se sirven con compresión. Quizá en un futuro nos tendremos que plantear un hosting más eficiente, y más caro 🙁

    Bajar los apartados de tak en la parte inferior es buena idea, así simplifica más la navegación. La simplicidad es algo que hemos trabajado muchísimo en el diseño, y que seguimos retocando.

    Con google maps tenemos una discusión interna. En el lanzamiento de la web, aparecía google maps al lado del formulario de contacto, pero decidímos cambiarlo por el botón, ya que en la versión mobil generaba un conflicto con el scroll principal de la web.
    Es decir si insertas un mapa de google maps en una pagina en modo iframe, cuando alguien hace scroll con el dedo en la página y llega a la altura del mapa, el iframe captura el scroll, con lo que pierdes el control del scroll de la página y no puedes salir del mapa.
    Intentamos mantener la misma programacion para smartphone y escritorio, así que decidimos no insertar el mapa en iframe.

    Pues lo dicho, Muchísimas gracias por tus comentarios y por seguirnos en twitter, nosotros también te seguiremos de cerca.

    Un saludo

    Hola a todos,
    recientemente hemos añadido unas mejoras que queremos compartir con vosotros.
    Hasta el momento estábamos utilizando lightbox para nuestras galerías de fotos. El problema es que lightbox no tiene un comportamiento muy bueno en dispositivos táctiles y la versión gratuita está muy desactualizada.
    Básandos en que nuestro site tiene una única programación para todos los dispositivos, hemos decidido substituir lightbox por photoswipe. Este plugin gratuito muestra las galerías de manera muy parecida a las nativas de iphone o android, permitiendo incluso pasar las fotos deslizando el dedo y el resultado es bastante bueno en ordenadores de escritorio.
    Podéis ver un ejemplo de las nuevas galerías en una de nuestras páginas:

    http://www.modatak.com/productos/trajes/americana-micropana-color-pardo/

    Un saludo

    Enhorabuena por el sitio. Precioso el theme. Me encanta.
    Me gustaría haceros una pregunta. Veo que como forma de pago solamente usais PayPal. ¿Habeis contemplado usar las pasarelas de pago que usan BBVA o La Caixa? ¿Sabéis si hay plugins para WP para usar estas pasarelas?

    Gracias, y repito, precioso el sitio.

    Hola, maperezotero.
    Muchas gracias por tus comentarios.
    Implementar la pasarela de pago es algo que tenemos pendiente para un futuro próximo.
    Estamos usando wp e-commerce como pluguin de nuestra tienda en wordpress.
    Implementar el carrito de la compra con paypal fue fácil, gratuito y sin ninguna cuota mensual, además parte del core del plugin.
    Es lo más recomendable cuando se empieza una tienda online ya que implica 0 euros de inversión y tiempo. La parte negativa es que la comisión es más de 2%.
    Aquí hay un módulo de pago para este plugin para utilizar con sermepa.
    http://getshopped.org/fpt-plugins/pasarela-de-pago-servired-sermepa-payment-gateway/

    Espero haber resuelto tus dudas.

    un saludo

Viendo 6 respuestas - 1 de 6 (de 6 total)
  • El debate ‘tak, nuestra tienda online hecha en wordpress’ está cerrado a nuevas respuestas.