Jump to content

Comment changer le design des boutons ajout quantité de la page produit ?


Recommended Posts

Bonjour,
Je cherche à transformer le design des boutons d'incrémentation de la partie product-add-to-cart. Dans le fichier .tlp, le code ne corresponds pas au code généré que l'on peut voir dans l'inspecteur de propriété et il semblerait que des classes soient générées en JS. Si je surcharge ou modifie le fichier product-add-to-cart.tpl je n'arrive pas a afficher correctement le bloc. En fait, je cherche juste à faire quelque chose comme ça
en remplaçant les flèches up et down par un + et un  -, en les plaçant de chaque côté du nombre de commande. C'est assez répandu dans les sites prestashop mais je n'y arrive pas 😞 . Est-ce que je suis dans la bonne démarche ? Est-ce qu'il faut modifier ça ailleurs ? Est-ce que quelqu'un aurait une solution ? Merci :) !

image.png

Share this post


Link to post
Share on other sites

Bonjour

Effectivement avec du .JS, des fichiers .tpl ...il y a moyen de refaire la maçonnerie...

en CSS vous pouvez refaire la peinture sinon.

si vous ètes sur une boutique en 1.7xx essayez ca dans votre custom.css

( je promet rien, peut être un peu d'adaptation comme utiliser des sélecteurs si par exemple vous voulez limiter a une div, à une page etc... (example > div.product-add-to-cart)   (voir de l’optimisation) à faire... j'ai fait ca y'a un moment pour une de mes boutiques, après je n'utilise pas de thème payant je part toujours de classic, bref essayez de jouer avec ca devrait finir par coller à votre besoin )

.bootstrap-touchspin {
    width: 150px;
    overflow: hidden;
    border: 2px solid #ddd;
    border-radius: 50px
}
#quantity_wanted {
    margin: 0 auto;
    float: none
}
.product-quantity .input-group-btn-vertical {
    width: 100%;
    position: absolute;
    top: 0;
    height: 100%
}
 .product-quantity #quantity_wanted {
    width: 30%;
    border: none;
    text-align: center;
    height: 2rem
} 
.product-quantity .input-group-btn-vertical .btn {
    max-width: 100%;
    width: 35%;
    background: #f4f4f4;
    margin: 0;
    padding: 0
}
.btn.btn-touchspin.js-touchspin.bootstrap-touchspin-down {
    float: left;
    height: 100%;
    border: none;
    border-right: 2px solid #ddd !important
}
.bootstrap-touchspin .input-group-btn-vertical .touchspin-down::after {
    content: "-"
} 
 .btn.btn-touchspin.js-touchspin.bootstrap-touchspin-up {
    float: right;
    height: 100%;
    border-left: 2px solid #ddd !important;
    border: none
}
 .bootstrap-touchspin .input-group-btn-vertical .touchspin-up::after {
    content: "+"
}
.product-quantity .input-group-btn-vertical .btn i {
    font-size: 1.35rem;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: black
}

 

Edited by Remy FRK Corp (see edit history)
  • Like 1

Share this post


Link to post
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

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More