Jump to content

Mostrar opciones del producto como Aliexpress

_Veronika_

By _Veronika_
in Discusión general

 Share

Recommended Posts

_Veronika_ Enthusiast

_Veronika_

Posted
Posted

Buenas tardes amigos

Quiero tener las opciones de los colores de los productos de la misma manera que lo hace Aliexpress en su página, dejo captura de pantalla. Lo que hace es que pinchando en uno de los colores de las camisetas la imagen de la miniatura del color se ve en tamaño grande, y así con todos los colores disponibles de esa camiseta ¿Alguien sabe si podría hacerlo cambiando algún código? o ¿existe algún módulo que haga esto?

Este es el enlace a la página de la captura: https://es.aliexpress.com/item/4000200347043.html?spm=a2g0o.productlist.0.0.7a514778X2s2oW&algo_pvid=beb44c2f-0ac6-434c-a288-eff5a46f4707&algo_expid=beb44c2f-0ac6-434c-a288-eff5a46f4707-15&btsid=0ab6f81615876738396087068e3ea6&ws_ab_test=searchweb0_0,searchweb201602_,searchweb201603_

muchas gracias

 

aliexpress.jpg

Link to comment
Share on other sites
Mery30 Newbie

Mery30

Posted
Posted

Buenos días Veronica, no sé qué versión de Prestashop usas, pero esto se puede hacer desde prestashop sin necesidad de un módulo. (Aunque si tienes muchas fotos y muchas combinaciones sé un módulo que va muy bien)

Para hacerlo debes hacer lo siguiente:

1. Cuelgas todas las imágenes del producto (todos los colores en la que está disponible la prenda) en el apartado de imágenes de la ficha del producto.

2. Creas los atributos del producto desde Catálogo --> Atributos de productos (no sé si sabes hacerlo), creas las tallas, los colores: tienes la opción de poner cuadritos de colores, o de poner pequeñas imágenes, etc...

3. Vas dentro de la ficha de producto y en "Combinaciones" generas las combinaciones del producto

4.Una vez creadas las combinaciones, aquí mismo, en la pestaña Combinaciones, aparece una lista de todas las combinaciones que tiene el producto. Pues ahora asignaremos fotos a cada una de estas combinaciones, por lo que haces lo siguiente para cada combinación:

    a) Clicas en "Modificar" y se te abrirán muchas opciones
    b) En la última opción aparece el apartado de imágenes (verás todas las fotos que habías subido), pues bien, debes seleccionar qué fotos quieres que aparezcan cuando tengan clicada la combinación que estás modificando. EJ: Si estás modificando BLUSA- TALLA L- AZÚL COBALTO le asignas todas las fotos que tengas de la camisa azul cobalto.
    c) Para que se guarde, es muy importante que cada vez, después de asignar fotos en una combinación, bajes abajo del todo (cuando acaba la lista de Combinaciones) y cliques en "Guardar y permanecer". Si clicas guardar se te guardará pero se cerrará el producto y deberás abrirlo otra vez para seguir haciendo combinaciones.

Y eso con cada combinación.

Si tienes muchas tallas, y muchos colores es posible que te vuelvas loca, porque puedes tener más de 1000 combinaciones, y asignar 1000 veces. Yo uso éste módulo: https://addons.prestashop.com/es/combinaciones-personalizacion/26962-wk-mass-combinations-assignment-for-products.html

Espero haberme explicado bien.

Saludos

Link to comment
Share on other sites
_Veronika_ Enthusiast

_Veronika_

Posted
  • Author
Posted

Gracias Mery30 por tu respuesta y lo bien que lo has explicado pero así no consigo lo que quiero. Ya lo había hecho de esa manera, pero en seleccionar el color aparece un cuadro con el color rojo por ejemplo, y yo lo que quiero es que aparezca la miniatura que he seleccionado para el color rojo y esto por defecto no lo hace prestashop.

Si te fijas en la foto que he adjuntado de Aliexpress, encima de seleccionar la talla de la camiseta tienen todas las miniaturas en los diferentes colores y eso es lo que yo quiero conseguir. 

Espero haberme explicado mejor esta vez. Gracias

Un saludo

 

 

Link to comment
Share on other sites
Mery30 Newbie

Mery30

Posted
Posted

Bueno, lo de clicar y que cambie es lo que te he dicho antes.

Para que la miniatura no sea un cuadrito de color podrías hacer un apaño:
1) Añades un nuevo atributo, cuando seleccionas el tipo de atributo escoges que sea "Color o textura". Luego en vez de seleccionar un color desde el color picker, abajo subes la foto de la camisa (es decir, vas creando los atributos de los diferentes colores de camisa) Quizás estarás pensando que las fotos se verán muy pequeñas, hay una solución: Hacer que sean grandes.

2) Puedes tocar el tamaño de los cuadraditos de color, yo los cambié a 50px, modificando archivos.

Esta es la chuleta de lo que hice (esta un poco mal explicada pero es lo que tengo XD):

/public_html/themes/default-bootstrap/css

Archivo product.css  (Haz una copia del original por si acaso)

((NO SÉ SI TUS LINEAS SERÁN LAS MISMAS QUE LAS MÍAS PERO LO HICE ASÍ))

Cambiar tamaño cuadrados color para seleccionar:

1. Cambiar a 50px las líneas 404, 405, 413 y 414

2. Cambiar a 46px las líneas 408, 409 

3. En la línea 401 y 416, poner 0px para que al clicar no se mueva el cuadrado

 

ES ASÍ DE MALA LA CHULETA, PERO BUENO, ME SABE MAL...

No se si te servirá

Link to comment
Share on other sites
Mery30 Newbie

Mery30

Posted
Posted

Bueno, te copio el código desde mi linea 398

    #attributes .attribute_list #color_to_pick_list li {
      float: left;
      margin: 0 3px 3px 0;
      padding: 0px;
      border: 0px solid #000000;
      clear: none;
      width: 50px;
      height: 50px; }
      #attributes .attribute_list #color_to_pick_list li a.color_pick {
        display: block;
        height: 46px;
        width: 46px;
        cursor: pointer; }
        #attributes .attribute_list #color_to_pick_list li a.color_pick img {
          display: block;
          height: 50px;
          width: 50px; }
      #attributes .attribute_list #color_to_pick_list li.selected {
        border: 2px solid #848484; }

Link to comment
Share on other sites
_Veronika_ Enthusiast

_Veronika_

Posted
  • Author
Posted

Gracias Mery30 pero tampoco me vale esa opción porque solo tendría 1 textura (foto miniatura) para el color azul, mientras que yo tengo varias camisetas de diferentes modelos en el color azul.

Si lo hago de la manera que me dices aparecería la miniatura de otro modelo y no la del modelo de camiseta actual. Lo que necesito es que si estoy en la página de un producto de camiseta X aparezcan las miniaturas de las camisetas X en colores y si estoy en la página del producto Z aparezcan las miniaturas de las camisetas Z en sus colores disponibles.

Tal como funciona el prestashop por defecto pero que en vez de mostrar el cuadro con el color muestre la imagen miniatura. Lo he visto en otras paginas hechas en prestashop, asi que se que se puede hacer. Lo que no se es si se trata de un módulo o una modificación en el código. Gracias

Un saludo

 

Link to comment
Share on other sites
Mery30 Newbie

Mery30

Posted
Posted

Hola Veronica, como he visto que tenias dudas lo he probado, he buscado unas faldas y he hecho un producto, Voy colgando las fotos del proceso

1.thumb.png.a78c855d53745e63272aceeb1b6ba10c.png

----------------------------------------------------------------------------------------------------

2.thumb.png.8f8353e0adcc3b87ef548d18989db0d2.png

----------------------------------------------------------------------------------------------------

3.thumb.png.3af6145b7209d3d9a90151c43d64ad55.png

----------------------------------------------------------------------------------------------------

4.thumb.png.21dd7ea78941a38cd92982289b0f5396.png

----------------------------------------------------------------------------------------------------

5.thumb.png.354e0a951754ac927fdcc56530246201.png

----------------------------------------------------------------------------------------------------

6.thumb.png.d9d072f2d2ca6fd68e61ab4361ac37a5.png

----------------------------------------------------------------------------------------------------

7.thumb.png.c1fc2c4b5139f499a360cba6c6146e2f.png

----------------------------------------------------------------------------------------------------

8.thumb.png.84e9cca619fa64c8336bc08a0983472d.png

----------------------------------------------------------------------------------------------------

9.thumb.png.ac84b6da78f604c4a81cb89888ed6cb4.png

----------------------------------------------------------------------------------------------------

10.thumb.png.d2d1ece645424796975ed67ade5dc231.png

----------------------------------------------------------------------------------------------------

11.thumb.png.425dc795f4aadd34b5a6f05924014de7.png

Link to comment
Share on other sites
_Veronika_ Enthusiast

_Veronika_

Posted
  • Author
Posted

Vale acabo de captar lo que has hecho. Has creado un grupo de opciones de color para un solo producto. Significa que tendría que hacer esto por cada producto y tengo 1.000, se me va de las manos hacer esto manualmente, pero cierto es que de esta manera si conseguiría lo que pretendo

Link to comment
Share on other sites
Mery30 Newbie

Mery30

Posted
Posted

Mmm, te entiendo, esto que he dicho es un apaño, pero acabo de encontrar unos módulos interesantes, quizás alguno te sirve:

Yo creo que este te gustará:
https://addons.prestashop.com/es/combinaciones-personalizacion/41032-normal-products-as-combinations.html

Este no sé
https://addons.prestashop.com/es/combinaciones-personalizacion/44504-asignar-imagenes-a-combinaciones-masivamente.html

Link to comment
Share on other sites
_Veronika_ Enthusiast

_Veronika_

Posted
  • Author
Posted

Gracias, el primero lo habia visto pero lo que vi es que funciona creando un producto por cada opcion o sea que tendría un producto por cada opcion individual de producto. Me di cuenta porque cambia la url del producto cuando picas en las opciones de color.

Link to comment
Share on other sites
Ramón - PULSOWEB Newbie

Ramón - PULSOWEB

Posted
Posted

Buenas Verónica!

Esa funcionalidad se la he puesto a muchas tiendas y es genial.

Hay un módulo que lo hace automáticamente sin tener que hacer manualmente lo de crear cada atributo con la imagen del producto de color. tan solo con que los colores los tengas asignados a las imágenes ya funciona.

Aquí te lo mando 

 

https://www.alabazweb.com/es/modulos-prestashop-para-la-personalizacion-avanzada-de-productos/38-modulo-para-mejorar-la-visualizacion-de-atributos-en-prestashop.html

 

 

Screenshot_12.png

Link to comment
Share on other sites
gusman126 Proficient

gusman126

Posted
Posted

Este modulo es lo que necesitas, es el que uso con mis clientes

https://www.sunnytoo.com/57773/show-combination-images-textures-free-prestashop-module

Se muestran en las cajas de colores las imagenes que tienes asociadas a las combinaciones.

Solo hay que asignar en cada combinación la imagen asociada, luego como puedes ver hay que hacer algun cambio en la plantilla

image.thumb.png.b01c39d612e610561023ccd1963d0e41.png

  • Like 1
Link to comment
Share on other sites
gusman126 Proficient

gusman126

Posted
Posted
hace 1 hora, veronica garcia dijo:

Gusman126 muchas gracias por tu recomendación pero estoy mirando que ese módulo es para la versión 1.7 y yo uso la 1.6, aunque me gusta como se ven las imágenes en círculos, lamentablemente no es para mi versión de Prestashop

Antes de gastar dinero en PS 1.6 recuerda que ya no hay soporte y que deberias actualizar a la 1.7

Lo de las imagenes en circulos es por la plantilla usada en la tienda,eso NO lo hace el modulo

Link to comment
Share on other sites
  • 2 years later...
adelagd Rookie

adelagd

Posted
Posted (edited)
On 4/28/2020 at 7:48 PM, gusman126 said:

Este modulo es lo que necesitas, es el que uso con mis clientes

https://www.sunnytoo.com/57773/show-combination-images-textures-free-prestashop-module

Se muestran en las cajas de colores las imagenes que tienes asociadas a las combinaciones.

Solo hay que asignar en cada combinación la imagen asociada, luego como puedes ver hay que hacer algun cambio en la plantilla

image.thumb.png.b01c39d612e610561023ccd1963d0e41.png

Yo tengo un problema con este, y es que al parecer mi plantilla no es como la estandar de prestashop, y no sé cómo modificar el codigo para poder añadirlo.. me podrías ayudar?

 

Mi codigo es este:

Quote

<div class="product-variants js-product-variants">

    {block name='product_reference'}
        {if isset($product.reference_to_display) && $product.reference_to_display neq ''}
        <div class="product-reference">
        <label class="label">{l s='Reference' d='Shop.Theme.Catalog'}: </label>
          <span itemprop="sku">{$product.reference_to_display}</span>
        </div>
      {/if}
    {/block}

     {block name='product_quantities'}
      {if $product.show_quantities}
        <div class="product-quantities">
          <label class="label">{l s='Available In Stock: ' d='Shop.Theme.Catalog'}</label>
        <span data-stock="{$product.quantity}" data-allow-oosp="{$product.allow_oosp}">{$product.quantity} {$product.quantity_label}</span>
        </div>
      {/if}
    {/block}

  {foreach from=$groups key=id_attribute_group item=group}
    {if !empty($group.attributes)}
    <div class="clearfix product-variants-item">
      <span class="control-label">{$group.name}{l s=': ' d='Shop.Theme.Catalog'}
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            {if $group_attribute.selected}{$group_attribute.name}{/if}
          {/foreach}
      </span>
      {if $group.group_type == 'select'}
        <select
          class="form-control form-control-select"
          id="group_{$id_attribute_group}"
          aria-label="{$group.name}"
          data-product-attribute="{$id_attribute_group}"
          name="group[{$id_attribute_group}]">
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            <option value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} selected="selected"{/if}>{$group_attribute.name}</option>
          {/foreach}
        </select>
      {elseif $group.group_type == 'color'}
        <ul id="group_{$id_attribute_group}">
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            <li class="pull-xs-left input-container">
              <input class="input-color" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} checked="checked"{/if}>
              <span
                  {if $group_attribute.texture}
                    class="color texture" style="background-image: url({$group_attribute.texture})"
                  {elseif $group_attribute.html_color_code}
                    class="color" style="background-color: {$group_attribute.html_color_code}"
                  {/if}
                ><span class="attribute-name sr-only">{$group_attribute.name}</span></span>
            </li>
          {/foreach}
        </ul>
      {elseif $group.group_type == 'radio'}
        <ul id="group_{$id_attribute_group}">
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            <li class="input-container pull-xs-left">
              <input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>
              <span class="radio-label">{$group_attribute.name}</span>
            </li>
          {/foreach}
        </ul>
      {/if}
    </div>
   {/if}
  {/foreach}
</div>
 

 

 

Edited by adelagd (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...