osCommerce France : Accueil Forum Portail osCommerce France Réponses aux questions Foire aux contributions

Bienvenue invité ( Connexion | Inscription )

 
Reply to this topicStart new topic
> [résolu] Bouton switch sur statut du produit
chryst64
posté 30 Dec 2021, 18:16
Message #1


Ceinture blanche+ OSC
Icône de groupe

Groupe : Membres
Messages : 24
Inscrit : 21-August 05
Membre no 6859



Bonjour à tous wink.gif
De retour sur une vieille ms2, je cherche à mettre un coup de jeune au checkbox du champs "products_status" de la page produit coté admin.

Ancien code du champs :
Code
echo tep_draw_separator('pixel_trans.gif', '24', '15') . ' ' . tep_draw_radio_field('products_status', '1', $in_status) . ' ' . TEXT_PRODUCT_AVAILABLE . ' ' . tep_draw_radio_field('products_status', '0', $out_status) . ' ' . TEXT_PRODUCT_NOT_AVAILABLE;


Nouveau code du champs :
Code
    <label class="switch" for="Products_status">
            <input type="checkbox" class="switch-input" id="Products_status" name="products_status" value="<?php echo $pInfo->products_status;?>" <?php echo (($pInfo->products_status == 1) ? 'checked' : ''); ?>>
        <span class="switch-label" data-on="On" data-off="Off"></span>
        <span class="switch-handle"></span>
    </label>


avec le css :
Code
/* switch */
.switch {
    position: relative;
    display: block;
    vertical-align: top;
    width: 100px;
    height: 30px;
    padding: 3px;
    margin: 0 10px 10px 0;
    background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
    background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
    border-radius: 18px;
    box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    box-sizing:content-box;
}
.switch-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    box-sizing:content-box;
}
.switch-label {
    position: relative;
    display: block;
    height: inherit;
    font-size: 10px;
    text-transform: uppercase;
    background: #eceeef;
    border-radius: inherit;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
    box-sizing:content-box;
}
.switch-label:before, .switch-label:after {
    position: absolute;
    top: 50%;
    margin-top: -.5em;
    line-height: 1;
    -webkit-transition: inherit;
    -moz-transition: inherit;
    -o-transition: inherit;
    transition: inherit;
    box-sizing:content-box;
}
.switch-label:before {
    content: attr(data-off);
    right: 11px;
    color: #aaaaaa;
    text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
    content: attr(data-on);
    left: 11px;
    color: #FFFFFF;
    text-shadow: 0 1px rgba(0, 0, 0, 0.2);
    opacity: 0;
}
.switch-input:checked ~ .switch-label {
    background: #E1B42B;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
    opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
    opacity: 1;
}
.switch-handle {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 28px;
    height: 28px;
    background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
    background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
    border-radius: 100%;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -6px 0 0 -6px;
    width: 12px;
    height: 12px;
    background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
    background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
    border-radius: 6px;
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
    left: 74px;
    box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}

/* Transition
========================== */
.switch-label, .switch-handle {
    transition: All 0.3s ease;
    -webkit-transition: All 0.3s ease;
    -moz-transition: All 0.3s ease;
    -o-transition: All 0.3s ease;
}


J'ai désormais un joli bouton qui glisse mais qui ne marche pas .... lol

Je peux désactiver le produit mais je ne peux pas l'activer.

Je suis sur que je passe à coté de quelque chose mais je tourne en rond.
Si vous avez une idée, je suis preneur.
Merci à tous.

Ce message a été modifié par chryst64 - 30 Dec 2021, 18:25.
Go to the top of the page
 
chryst64
posté 30 Dec 2021, 18:25
Message #2


Ceinture blanche+ OSC
Icône de groupe

Groupe : Membres
Messages : 24
Inscrit : 21-August 05
Membre no 6859



Pffff je suis un tocard, c'est dans l'enregistrement dans la base que ça plantait.
Merci quand même au lecteur
Go to the top of the page
 

Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



RSS Version bas débit Nous sommes le : 19th March 2024 - 06:15
Ce site est déclaré auprès de la commision Nationale
de l'Informatique et des Libertés (déclaration n°: 1043896)