Modify quantity field

[DARKF3D3]

I want to modify the quantity field with + and - symbol (for example the one showed on cart page), keeping the plus to the right of the quantity field and moving the minus to the left.
Into tpl file I found only quantity field:

          <input
            type="number"
            name="qty"
            id="quantity_wanted"
            inputmode="numeric"
            pattern="[0-9]*"
            {if $product.quantity_wanted}
              value="{$product.quantity_wanted}"
              min="{$product.minimal_quantity}"
            {else}
              value="1"
              min="1"
            {/if}
            class="input-group"
            aria-label="{l s='Quantity' d='Shop.Theme.Actions'}"
          >

I see that it use bootstrap touchspin but I can't figure out exactly from where those + and - are added.
Any help?

 

[AddWeb Solution]

You can add bootstrap touchspin inside the .tpl file itself,

For that you need to implement js touchspin script.

(Note: Once you tested it out, you can move it to separate js file and style the button as per your requirement)

Hope this helps.

[AddWeb Solution]

Add the bootstrap touchspin js script inside {literal} {/literal}

[DARKF3D3]

But on front end there's already bootstrap touchspin. So I should find for where it's added to be able to modify it.
I assume that it's added using javascript, because it's not into tpl.

<div class="qty">
<div class="input-group bootstrap-touchspin">
  <span class="input-group-addon bootstrap-touchspin-prefix" style="display: none;"></span>
  <input type="number" name="qty" id="quantity_wanted" inputmode="numeric" pattern="[0-9]*" value="1" min="1" class="input-group form-control" aria-label="Quantità" style="display: block;">
  <span class="input-group-addon bootstrap-touchspin-postfix" style="display: none;"></span>
  <span class="input-group-btn-vertical">
    <button class="btn btn-touchspin js-touchspin bootstrap-touchspin-up" type="button">
      <i class="material-icons touchspin-up"></i>
    </button>
    <button class="btn btn-touchspin js-touchspin bootstrap-touchspin-down" type="button">
      <i class="material-icons touchspin-down"></i>
    </button>
  </span>
  </div>
</div>

 

[AddWeb Solution]

14 hours ago, DARKF3D3 said:

it's added using javascript, because it's not into tpl

Yes, It uses javascript which is added in theme.js file. You could modify it there

or you can write your touchspin js inside tpl file itself for testing purpose, later you could move it to the js file.

[DARKF3D3]

I unminified theme.js and found the function responsible for touchspins.

           661: function () {
                !(function (e) {
                    "use strict";
                    var t = 0;
                    function n(t, n) {
                        return e.map(t, function (e) {
                            return (function (e, t) {
                                return e + ".touchspin_" + t;
                            })(e, n);
                        });
                    }
                    e.fn.TouchSpin = function (i) {
                        if ("destroy" !== i) {
                            var r = {
                                    min: 0,
                                    max: 100,
                                    initval: "",
                                    replacementval: "",
                                    step: 1,
                                    decimals: 0,
                                    stepinterval: 100,
                                    forcestepdivisibility: "round",
                                    stepintervaldelay: 500,
                                    verticalbuttons: !1,
                                    verticalupclass: "glyphicon glyphicon-chevron-up",
                                    verticaldownclass: "glyphicon glyphicon-chevron-down",
                                    prefix: "",
                                    postfix: "",
                                    prefix_extraclass: "",
                                    postfix_extraclass: "",
                                    booster: !0,
                                    boostat: 10,
                                    maxboostedstep: !1,
                                    mousewheel: !0,
                                    buttondown_class: "btn btn-default",
                                    buttonup_class: "btn btn-default",
                                    buttondown_txt: "-",
                                    buttonup_txt: "+",
                                },
                                o = {
                                    min: "min",
                                    max: "max",
                                    initval: "init-val",
                                    replacementval: "replacement-val",
                                    step: "step",
                                    decimals: "decimals",
                                    stepinterval: "step-interval",
                                    verticalbuttons: "vertical-buttons",
                                    verticalupclass: "vertical-up-class",
                                    verticaldownclass: "vertical-down-class",
                                    forcestepdivisibility: "force-step-divisibility",
                                    stepintervaldelay: "step-interval-delay",
                                    prefix: "prefix",
                                    postfix: "postfix",
                                    prefix_extraclass: "prefix-extra-class",
                                    postfix_extraclass: "postfix-extra-class",
                                    booster: "booster",
                                    boostat: "boostat",
                                    maxboostedstep: "max-boosted-step",
                                    mousewheel: "mouse-wheel",
                                    buttondown_class: "button-down-class",
                                    buttonup_class: "button-up-class",
                                    buttondown_txt: "button-down-txt",
                                    buttonup_txt: "button-up-txt",
                                };
                            return this.each(function () {
                                var s,
                                    a,
                                    l,
                                    c,
                                    u,
                                    f,
                                    d,
                                    p,
                                    h = e(this),
                                    m = h.data(),
                                    g = 0,
                                    v = !1;
                                function y() {
                                    var e, t, n;
                                    "" !== (e = h.val())
                                        ? (s.decimals > 0 && "." === e) ||
                                          ((t = parseFloat(e)),
                                          isNaN(t) && (t = "" !== s.replacementval ? s.replacementval : 0),
                                          (n = t),
                                          t.toString() !== e && (n = t),
                                          t < s.min && (n = s.min),
                                          t > s.max && (n = s.max),
                                          (n = (function (e) {
                                              switch (s.forcestepdivisibility) {
                                                  case "round":
                                                      return (Math.round(e / s.step) * s.step).toFixed(s.decimals);
                                                  case "floor":
                                                      return (Math.floor(e / s.step) * s.step).toFixed(s.decimals);
                                                  case "ceil":
                                                      return (Math.ceil(e / s.step) * s.step).toFixed(s.decimals);
                                                  default:
                                                      return e;
                                              }
                                          })(n)),
                                          Number(e).toString() !== n.toString() && (h.val(n), h.trigger("change")))
                                        : "" !== s.replacementval && (h.val(s.replacementval), h.trigger("change"));
                                }
                                function b() {
                                    if (s.booster) {
                                        var e = Math.pow(2, Math.floor(g / s.boostat)) * s.step;
                                        return s.maxboostedstep && e > s.maxboostedstep && ((e = s.maxboostedstep), (c = Math.round(c / e) * e)), Math.max(s.step, e);
                                    }
                                    return s.step;
                                }
                                function w() {
                                    y(), (c = parseFloat(l.input.val())), isNaN(c) && (c = 0);
                                    var e = c,
                                        t = b();
                                    (c += t) > s.max && ((c = s.max), h.trigger("touchspin.on.max"), C()), l.input.val(Number(c).toFixed(s.decimals)), e !== c && h.trigger("change");
                                }
                                function x() {
                                    y(), (c = parseFloat(l.input.val())), isNaN(c) && (c = 0);
                                    var e = c,
                                        t = b();
                                    (c -= t) < s.min && ((c = s.min), h.trigger("touchspin.on.min"), C()), l.input.val(c.toFixed(s.decimals)), e !== c && h.trigger("change");
                                }
                                function S() {
                                    C(),
                                        (g = 0),
                                        (v = "down"),
                                        h.trigger("touchspin.on.startspin"),
                                        h.trigger("touchspin.on.startdownspin"),
                                        (d = setTimeout(function () {
                                            u = setInterval(function () {
                                                g++, x();
                                            }, s.stepinterval);
                                        }, s.stepintervaldelay));
                                }
                                function _() {
                                    C(),
                                        (g = 0),
                                        (v = "up"),
                                        h.trigger("touchspin.on.startspin"),
                                        h.trigger("touchspin.on.startupspin"),
                                        (p = setTimeout(function () {
                                            f = setInterval(function () {
                                                g++, w();
                                            }, s.stepinterval);
                                        }, s.stepintervaldelay));
                                }
                                function C() {
                                    switch ((clearTimeout(d), clearTimeout(p), clearInterval(u), clearInterval(f), v)) {
                                        case "up":
                                            h.trigger("touchspin.on.stopupspin"), h.trigger("touchspin.on.stopspin");
                                            break;
                                        case "down":
                                            h.trigger("touchspin.on.stopdownspin"), h.trigger("touchspin.on.stopspin");
                                    }
                                    (g = 0), (v = !1);
                                }
                                !(function () {
                                    if (h.data("alreadyinitialized")) return;
                                    if ((h.data("alreadyinitialized", !0), (t += 1), h.data("spinnerid", t), !h.is("input"))) return void console.log("Must be an input.");
                                    (s = e.extend(
                                        {},
                                        r,
                                        m,
                                        ((c = {}),
                                        e.each(o, function (e, t) {
                                            var n = "bts-" + t;
                                            h.is("[data-" + n + "]") && (c[e] = h.data(n));
                                        }),
                                        c),
                                        i
                                    )),
                                        "" !== s.initval && "" === h.val() && h.val(s.initval),
                                        y(),
                                        (function () {
                                            var t = h.val(),
                                                n = h.parent();
                                            "" !== t && (t = Number(t).toFixed(s.decimals));
                                            h.data("initvalue", t).val(t),
                                                h.addClass("form-control"),
                                                n.hasClass("input-group")
                                                    ? (function (t) {
                                                          t.addClass("bootstrap-touchspin");
                                                          var n,
                                                              i,
                                                              r = h.prev(),
                                                              o = h.next(),
                                                              l = '<span class="input-group-addon bootstrap-touchspin-prefix">' + s.prefix + "</span>",
                                                              c = '<span class="input-group-addon bootstrap-touchspin-postfix">' + s.postfix + "</span>";
                                                          r.hasClass("input-group-btn")
                                                              ? ((n = '<button class="' + s.buttondown_class + ' bootstrap-touchspin-down" type="button">' + s.buttondown_txt + "</button>"), r.append(n))
                                                              : ((n = '<span class="input-group-btn"><button class="' + s.buttondown_class + ' bootstrap-touchspin-down" type="button">' + s.buttondown_txt + "</button></span>"),
                                                                e(n).insertBefore(h));
                                                          o.hasClass("input-group-btn")
                                                              ? ((i = '<button class="' + s.buttonup_class + ' bootstrap-touchspin-up" type="button">' + s.buttonup_txt + "</button>"), o.prepend(i))
                                                              : ((i = '<span class="input-group-btn"><button class="' + s.buttonup_class + ' bootstrap-touchspin-up" type="button">' + s.buttonup_txt + "</button></span>"),
                                                                e(i).insertAfter(h));
                                                          e(l).insertBefore(h), e(c).insertAfter(h), (a = t);
                                                      })(n)
                                                    : (function () {
                                                          var t;
                                                          t = s.verticalbuttons
                                                              ? '<div class="input-group bootstrap-touchspin"><span class="input-group-addon bootstrap-touchspin-prefix">' +
                                                                s.prefix +
                                                                '</span><span class="input-group-addon bootstrap-touchspin-postfix">' +
                                                                s.postfix +
                                                                '</span><span class="input-group-btn-vertical"><button class="' +
                                                                s.buttondown_class +
                                                                ' bootstrap-touchspin-up" type="button"><i class="' +
                                                                s.verticalupclass +
                                                                '"></i></button><button class="' +
                                                                s.buttonup_class +
                                                                ' bootstrap-touchspin-down" type="button"><i class="' +
                                                                s.verticaldownclass +
                                                                '"></i></button></span></div>'
                                                              : '<div class="input-group bootstrap-touchspin"><span class="input-group-btn"><button class="' +
                                                                s.buttondown_class +
                                                                ' bootstrap-touchspin-down" type="button">' +
                                                                s.buttondown_txt +
                                                                '</button></span><span class="input-group-addon bootstrap-touchspin-prefix">' +
                                                                s.prefix +
                                                                '</span><span class="input-group-addon bootstrap-touchspin-postfix">' +
                                                                s.postfix +
                                                                '</span><span class="input-group-btn"><button class="' +
                                                                s.buttonup_class +
                                                                ' bootstrap-touchspin-up" type="button">' +
                                                                s.buttonup_txt +
                                                                "</button></span></div>";
                                                          (a = e(t).insertBefore(h)),
                                                              e(".bootstrap-touchspin-prefix", a).after(h),
                                                              h.hasClass("input-sm") ? a.addClass("input-group-sm") : h.hasClass("input-lg") && a.addClass("input-group-lg");
                                                      })();
                                        })(),
                                        (l = {
                                            down: e(".bootstrap-touchspin-down", a),
                                            up: e(".bootstrap-touchspin-up", a),
                                            input: e("input", a),
                                            prefix: e(".bootstrap-touchspin-prefix", a).addClass(s.prefix_extraclass),
                                            postfix: e(".bootstrap-touchspin-postfix", a).addClass(s.postfix_extraclass),
                                        }),
                                        (function () {
                                            "" === s.prefix && l.prefix.hide();
                                            "" === s.postfix && l.postfix.hide();
                                        })(),
                                        h.on("keydown", function (e) {
                                            var t = e.keyCode || e.which;
                                            38 === t ? ("up" !== v && (w(), _()), e.preventDefault()) : 40 === t && ("down" !== v && (x(), S()), e.preventDefault());
                                        }),
                                        h.on("keyup", function (e) {
                                            var t = e.keyCode || e.which;
                                            (38 === t || 40 === t) && C();
                                        }),
                                        h.on("blur", function () {
                                            y();
                                        }),
                                        l.down.on("keydown", function (e) {
                                            var t = e.keyCode || e.which;
                                            (32 !== t && 13 !== t) || ("down" !== v && (x(), S()), e.preventDefault());
                                        }),
                                        l.down.on("keyup", function (e) {
                                            var t = e.keyCode || e.which;
                                            (32 !== t && 13 !== t) || C();
                                        }),
                                        l.up.on("keydown", function (e) {
                                            var t = e.keyCode || e.which;
                                            (32 !== t && 13 !== t) || ("up" !== v && (w(), _()), e.preventDefault());
                                        }),
                                        l.up.on("keyup", function (e) {
                                            var t = e.keyCode || e.which;
                                            (32 !== t && 13 !== t) || C();
                                        }),
                                        l.down.on("mousedown.touchspin", function (e) {
                                            l.down.off("touchstart.touchspin"), h.is(":disabled") || (x(), S(), e.preventDefault(), e.stopPropagation());
                                        }),
                                        l.down.on("touchstart.touchspin", function (e) {
                                            l.down.off("mousedown.touchspin"), h.is(":disabled") || (x(), S(), e.preventDefault(), e.stopPropagation());
                                        }),
                                        l.up.on("mousedown.touchspin", function (e) {
                                            l.up.off("touchstart.touchspin"), h.is(":disabled") || (w(), _(), e.preventDefault(), e.stopPropagation());
                                        }),
                                        l.up.on("touchstart.touchspin", function (e) {
                                            l.up.off("mousedown.touchspin"), h.is(":disabled") || (w(), _(), e.preventDefault(), e.stopPropagation());
                                        }),
                                        l.up.on("mouseout touchleave touchend touchcancel", function (e) {
                                            v && (e.stopPropagation(), C());
                                        }),
                                        l.down.on("mouseout touchleave touchend touchcancel", function (e) {
                                            v && (e.stopPropagation(), C());
                                        }),
                                        l.down.on("mousemove touchmove", function (e) {
                                            v && (e.stopPropagation(), e.preventDefault());
                                        }),
                                        l.up.on("mousemove touchmove", function (e) {
                                            v && (e.stopPropagation(), e.preventDefault());
                                        }),
                                        e(document).on(n(["mouseup", "touchend", "touchcancel"], t).join(" "), function (e) {
                                            v && (e.preventDefault(), C());
                                        }),
                                        e(document).on(n(["mousemove", "touchmove", "scroll", "scrollstart"], t).join(" "), function (e) {
                                            v && (e.preventDefault(), C());
                                        }),
                                        h.on("mousewheel DOMMouseScroll", function (e) {
                                            if (s.mousewheel && h.is(":focus")) {
                                                var t = e.originalEvent.wheelDelta || -e.originalEvent.deltaY || -e.originalEvent.detail;
                                                e.stopPropagation(), e.preventDefault(), t < 0 ? x() : w();
                                            }
                                        }),
                                        h.on("touchspin.uponce", function () {
                                            C(), w();
                                        }),
                                        h.on("touchspin.downonce", function () {
                                            C(), x();
                                        }),
                                        h.on("touchspin.startupspin", function () {
                                            _();
                                        }),
                                        h.on("touchspin.startdownspin", function () {
                                            S();
                                        }),
                                        h.on("touchspin.stopspin", function () {
                                            C();
                                        }),
                                        h.on("touchspin.updatesettings", function (t, n) {
                                            !(function (t) {
                                                (function (t) {
                                                    s = e.extend({}, s, t);
                                                })(t),
                                                    y();
                                                var n = l.input.val();
                                                "" !== n && ((n = Number(l.input.val())), l.input.val(n.toFixed(s.decimals)));
                                            })(n);
                                        }),
                                        l.input.css("display", "block");
                                    var c;
                                })();
                            });
                        }
                        this.each(function () {
                            var t = e(this).data();
                            e(document).off(n(["mouseup", "touchend", "touchcancel", "mousemove", "touchmove", "scroll", "scrollstart"], t.spinnerid).join(" "));
                        });
                    };
                })(jQuery);
            },

 

To change button position I can modify only this part, or I'm missing something else that need to be modified?

                                                          t = s.verticalbuttons
                                                              ? '<div class="input-group bootstrap-touchspin"><span class="input-group-addon bootstrap-touchspin-prefix">' +
                                                                s.prefix +
                                                                '</span><span class="input-group-addon bootstrap-touchspin-postfix">' +
                                                                s.postfix +
                                                                '</span><span class="input-group-btn-vertical"><button class="' +
                                                                s.buttondown_class +
                                                                ' bootstrap-touchspin-up" type="button"><i class="' +
                                                                s.verticalupclass +
                                                                '"></i></button><button class="' +
                                                                s.buttonup_class +
                                                                ' bootstrap-touchspin-down" type="button"><i class="' +
                                                                s.verticaldownclass +
                                                                '"></i></button></span></div>'
                                                              : '<div class="input-group bootstrap-touchspin"><span class="input-group-btn"><button class="' +
                                                                s.buttondown_class +
                                                                ' bootstrap-touchspin-down" type="button">' +
                                                                s.buttondown_txt +
                                                                '</button></span><span class="input-group-addon bootstrap-touchspin-prefix">' +
                                                                s.prefix +
                                                                '</span><span class="input-group-addon bootstrap-touchspin-postfix">' +
                                                                s.postfix +
                                                                '</span><span class="input-group-btn"><button class="' +
                                                                s.buttonup_class +
                                                                ' bootstrap-touchspin-up" type="button">' +
                                                                s.buttonup_txt +
                                                                "</button></span></div>";

 

[Trade1]

On 5/7/2023 at 7:05 PM, DARKF3D3 said:

I unminified theme.js and found the function responsible for touchspins.

           661: function () {
                !(function (e) {
                    "use strict";
                    var t = 0;
                    function n(t, n) {
                        return e.map(t, function (e) {
                            return (function (e, t) {
                                return e + ".touchspin_" + t;
                            })(e, n);
                        });
                    }
                    e.fn.TouchSpin = function (i) {
                        if ("destroy" !== i) {
                            var r = {
                                    min: 0,
                                    max: 100,
                                    initval: "",
                                    replacementval: "",
                                    step: 1,
                                    decimals: 0,
                                    stepinterval: 100,
                                    forcestepdivisibility: "round",
                                    stepintervaldelay: 500,
                                    verticalbuttons: !1,
                                    verticalupclass: "glyphicon glyphicon-chevron-up",
                                    verticaldownclass: "glyphicon glyphicon-chevron-down",
                                    prefix: "",
                                    postfix: "",
                                    prefix_extraclass: "",
                                    postfix_extraclass: "",
                                    booster: !0,
                                    boostat: 10,
                                    maxboostedstep: !1,
                                    mousewheel: !0,
                                    buttondown_class: "btn btn-default",
                                    buttonup_class: "btn btn-default",
                                    buttondown_txt: "-",
                                    buttonup_txt: "+",
                                },
                                o = {
                                    min: "min",
                                    max: "max",
                                    initval: "init-val",
                                    replacementval: "replacement-val",
                                    step: "step",
                                    decimals: "decimals",
                                    stepinterval: "step-interval",
                                    verticalbuttons: "vertical-buttons",
                                    verticalupclass: "vertical-up-class",
                                    verticaldownclass: "vertical-down-class",
                                    forcestepdivisibility: "force-step-divisibility",
                                    stepintervaldelay: "step-interval-delay",
                                    prefix: "prefix",
                                    postfix: "postfix",
                                    prefix_extraclass: "prefix-extra-class",
                                    postfix_extraclass: "postfix-extra-class",
                                    booster: "booster",
                                    boostat: "boostat",
                                    maxboostedstep: "max-boosted-step",
                                    mousewheel: "mouse-wheel",
                                    buttondown_class: "button-down-class",
                                    buttonup_class: "button-up-class",
                                    buttondown_txt: "button-down-txt",
                                    buttonup_txt: "button-up-txt",
                                };
                            return this.each(function () {
                                var s,
                                    a,
                                    l,
                                    c,
                                    u,
                                    f,
                                    d,
                                    p,
                                    h = e(this),
                                    m = h.data(),
                                    g = 0,
                                    v = !1;
                                function y() {
                                    var e, t, n;
                                    "" !== (e = h.val())
                                        ? (s.decimals > 0 && "." === e) ||
                                          ((t = parseFloat(e)),
                                          isNaN(t) && (t = "" !== s.replacementval ? s.replacementval : 0),
                                          (n = t),
                                          t.toString() !== e && (n = t),
                                          t < s.min && (n = s.min),
                                          t > s.max && (n = s.max),
                                          (n = (function (e) {
                                              switch (s.forcestepdivisibility) {
                                                  case "round":
                                                      return (Math.round(e / s.step) * s.step).toFixed(s.decimals);
                                                  case "floor":
                                                      return (Math.floor(e / s.step) * s.step).toFixed(s.decimals);
                                                  case "ceil":
                                                      return (Math.ceil(e / s.step) * s.step).toFixed(s.decimals);
                                                  default:
                                                      return e;
                                              }
                                          })(n)),
                                          Number(e).toString() !== n.toString() && (h.val(n), h.trigger("change")))
                                        : "" !== s.replacementval && (h.val(s.replacementval), h.trigger("change"));
                                }
                                function b() {
                                    if (s.booster) {
                                        var e = Math.pow(2, Math.floor(g / s.boostat)) * s.step;
                                        return s.maxboostedstep && e > s.maxboostedstep && ((e = s.maxboostedstep), (c = Math.round(c / e) * e)), Math.max(s.step, e);
                                    }
                                    return s.step;
                                }
                                function w() {
                                    y(), (c = parseFloat(l.input.val())), isNaN(c) && (c = 0);
                                    var e = c,
                                        t = b();
                                    (c += t) > s.max && ((c = s.max), h.trigger("touchspin.on.max"), C()), l.input.val(Number(c).toFixed(s.decimals)), e !== c && h.trigger("change");
                                }
                                function x() {
                                    y(), (c = parseFloat(l.input.val())), isNaN(c) && (c = 0);
                                    var e = c,
                                        t = b();
                                    (c -= t) < s.min && ((c = s.min), h.trigger("touchspin.on.min"), C()), l.input.val(c.toFixed(s.decimals)), e !== c && h.trigger("change");
                                }
                                function S() {
                                    C(),
                                        (g = 0),
                                        (v = "down"),
                                        h.trigger("touchspin.on.startspin"),
                                        h.trigger("touchspin.on.startdownspin"),
                                        (d = setTimeout(function () {
                                            u = setInterval(function () {
                                                g++, x();
                                            }, s.stepinterval);
                                        }, s.stepintervaldelay));
                                }
                                function _() {
                                    C(),
                                        (g = 0),
                                        (v = "up"),
                                        h.trigger("touchspin.on.startspin"),
                                        h.trigger("touchspin.on.startupspin"),
                                        (p = setTimeout(function () {
                                            f = setInterval(function () {
                                                g++, w();
                                            }, s.stepinterval);
                                        }, s.stepintervaldelay));
                                }
                                function C() {
                                    switch ((clearTimeout(d), clearTimeout(p), clearInterval(u), clearInterval(f), v)) {
                                        case "up":
                                            h.trigger("touchspin.on.stopupspin"), h.trigger("touchspin.on.stopspin");
                                            break;
                                        case "down":
                                            h.trigger("touchspin.on.stopdownspin"), h.trigger("touchspin.on.stopspin");
                                    }
                                    (g = 0), (v = !1);
                                }
                                !(function () {
                                    if (h.data("alreadyinitialized")) return;
                                    if ((h.data("alreadyinitialized", !0), (t += 1), h.data("spinnerid", t), !h.is("input"))) return void console.log("Must be an input.");
                                    (s = e.extend(
                                        {},
                                        r,
                                        m,
                                        ((c = {}),
                                        e.each(o, function (e, t) {
                                            var n = "bts-" + t;
                                            h.is("[data-" + n + "]") && (c[e] = h.data(n));
                                        }),
                                        c),
                                        i
                                    )),
                                        "" !== s.initval && "" === h.val() && h.val(s.initval),
                                        y(),
                                        (function () {
                                            var t = h.val(),
                                                n = h.parent();
                                            "" !== t && (t = Number(t).toFixed(s.decimals));
                                            h.data("initvalue", t).val(t),
                                                h.addClass("form-control"),
                                                n.hasClass("input-group")
                                                    ? (function (t) {
                                                          t.addClass("bootstrap-touchspin");
                                                          var n,
                                                              i,
                                                              r = h.prev(),
                                                              o = h.next(),
                                                              l = '<span class="input-group-addon bootstrap-touchspin-prefix">' + s.prefix + "</span>",
                                                              c = '<span class="input-group-addon bootstrap-touchspin-postfix">' + s.postfix + "</span>";
                                                          r.hasClass("input-group-btn")
                                                              ? ((n = '<button class="' + s.buttondown_class + ' bootstrap-touchspin-down" type="button">' + s.buttondown_txt + "</button>"), r.append(n))
                                                              : ((n = '<span class="input-group-btn"><button class="' + s.buttondown_class + ' bootstrap-touchspin-down" type="button">' + s.buttondown_txt + "</button></span>"),
                                                                e(n).insertBefore(h));
                                                          o.hasClass("input-group-btn")
                                                              ? ((i = '<button class="' + s.buttonup_class + ' bootstrap-touchspin-up" type="button">' + s.buttonup_txt + "</button>"), o.prepend(i))
                                                              : ((i = '<span class="input-group-btn"><button class="' + s.buttonup_class + ' bootstrap-touchspin-up" type="button">' + s.buttonup_txt + "</button></span>"),
                                                                e(i).insertAfter(h));
                                                          e(l).insertBefore(h), e(c).insertAfter(h), (a = t);
                                                      })(n)
                                                    : (function () {
                                                          var t;
                                                          t = s.verticalbuttons
                                                              ? '<div class="input-group bootstrap-touchspin"><span class="input-group-addon bootstrap-touchspin-prefix">' +
                                                                s.prefix +
                                                                '</span><span class="input-group-addon bootstrap-touchspin-postfix">' +
                                                                s.postfix +
                                                                '</span><span class="input-group-btn-vertical"><button class="' +
                                                                s.buttondown_class +
                                                                ' bootstrap-touchspin-up" type="button"><i class="' +
                                                                s.verticalupclass +
                                                                '"></i></button><button class="' +
                                                                s.buttonup_class +
                                                                ' bootstrap-touchspin-down" type="button"><i class="' +
                                                                s.verticaldownclass +
                                                                '"></i></button></span></div>'
                                                              : '<div class="input-group bootstrap-touchspin"><span class="input-group-btn"><button class="' +
                                                                s.buttondown_class +
                                                                ' bootstrap-touchspin-down" type="button">' +
                                                                s.buttondown_txt +
                                                                '</button></span><span class="input-group-addon bootstrap-touchspin-prefix">' +
                                                                s.prefix +
                                                                '</span><span class="input-group-addon bootstrap-touchspin-postfix">' +
                                                                s.postfix +
                                                                '</span><span class="input-group-btn"><button class="' +
                                                                s.buttonup_class +
                                                                ' bootstrap-touchspin-up" type="button">' +
                                                                s.buttonup_txt +
                                                                "</button></span></div>";
                                                          (a = e(t).insertBefore(h)),
                                                              e(".bootstrap-touchspin-prefix", a).after(h),
                                                              h.hasClass("input-sm") ? a.addClass("input-group-sm") : h.hasClass("input-lg") && a.addClass("input-group-lg");
                                                      })();
                                        })(),
                                        (l = {
                                            down: e(".bootstrap-touchspin-down", a),
                                            up: e(".bootstrap-touchspin-up", a),
                                            input: e("input", a),
                                            prefix: e(".bootstrap-touchspin-prefix", a).addClass(s.prefix_extraclass),
                                            postfix: e(".bootstrap-touchspin-postfix", a).addClass(s.postfix_extraclass),
                                        }),
                                        (function () {
                                            "" === s.prefix && l.prefix.hide();
                                            "" === s.postfix && l.postfix.hide();
                                        })(),
                                        h.on("keydown", function (e) {
                                            var t = e.keyCode || e.which;
                                            38 === t ? ("up" !== v && (w(), _()), e.preventDefault()) : 40 === t && ("down" !== v && (x(), S()), e.preventDefault());
                                        }),
                                        h.on("keyup", function (e) {
                                            var t = e.keyCode || e.which;
                                            (38 === t || 40 === t) && C();
                                        }),
                                        h.on("blur", function () {
                                            y();
                                        }),
                                        l.down.on("keydown", function (e) {
                                            var t = e.keyCode || e.which;
                                            (32 !== t && 13 !== t) || ("down" !== v && (x(), S()), e.preventDefault());
                                        }),
                                        l.down.on("keyup", function (e) {
                                            var t = e.keyCode || e.which;
                                            (32 !== t && 13 !== t) || C();
                                        }),
                                        l.up.on("keydown", function (e) {
                                            var t = e.keyCode || e.which;
                                            (32 !== t && 13 !== t) || ("up" !== v && (w(), _()), e.preventDefault());
                                        }),
                                        l.up.on("keyup", function (e) {
                                            var t = e.keyCode || e.which;
                                            (32 !== t && 13 !== t) || C();
                                        }),
                                        l.down.on("mousedown.touchspin", function (e) {
                                            l.down.off("touchstart.touchspin"), h.is(":disabled") || (x(), S(), e.preventDefault(), e.stopPropagation());
                                        }),
                                        l.down.on("touchstart.touchspin", function (e) {
                                            l.down.off("mousedown.touchspin"), h.is(":disabled") || (x(), S(), e.preventDefault(), e.stopPropagation());
                                        }),
                                        l.up.on("mousedown.touchspin", function (e) {
                                            l.up.off("touchstart.touchspin"), h.is(":disabled") || (w(), _(), e.preventDefault(), e.stopPropagation());
                                        }),
                                        l.up.on("touchstart.touchspin", function (e) {
                                            l.up.off("mousedown.touchspin"), h.is(":disabled") || (w(), _(), e.preventDefault(), e.stopPropagation());
                                        }),
                                        l.up.on("mouseout touchleave touchend touchcancel", function (e) {
                                            v && (e.stopPropagation(), C());
                                        }),
                                        l.down.on("mouseout touchleave touchend touchcancel", function (e) {
                                            v && (e.stopPropagation(), C());
                                        }),
                                        l.down.on("mousemove touchmove", function (e) {
                                            v && (e.stopPropagation(), e.preventDefault());
                                        }),
                                        l.up.on("mousemove touchmove", function (e) {
                                            v && (e.stopPropagation(), e.preventDefault());
                                        }),
                                        e(document).on(n(["mouseup", "touchend", "touchcancel"], t).join(" "), function (e) {
                                            v && (e.preventDefault(), C());
                                        }),
                                        e(document).on(n(["mousemove", "touchmove", "scroll", "scrollstart"], t).join(" "), function (e) {
                                            v && (e.preventDefault(), C());
                                        }),
                                        h.on("mousewheel DOMMouseScroll", function (e) {
                                            if (s.mousewheel && h.is(":focus")) {
                                                var t = e.originalEvent.wheelDelta || -e.originalEvent.deltaY || -e.originalEvent.detail;
                                                e.stopPropagation(), e.preventDefault(), t < 0 ? x() : w();
                                            }
                                        }),
                                        h.on("touchspin.uponce", function () {
                                            C(), w();
                                        }),
                                        h.on("touchspin.downonce", function () {
                                            C(), x();
                                        }),
                                        h.on("touchspin.startupspin", function () {
                                            _();
                                        }),
                                        h.on("touchspin.startdownspin", function () {
                                            S();
                                        }),
                                        h.on("touchspin.stopspin", function () {
                                            C();
                                        }),
                                        h.on("touchspin.updatesettings", function (t, n) {
                                            !(function (t) {
                                                (function (t) {
                                                    s = e.extend({}, s, t);
                                                })(t),
                                                    y();
                                                var n = l.input.val();
                                                "" !== n && ((n = Number(l.input.val())), l.input.val(n.toFixed(s.decimals)));
                                            })(n);
                                        }),
                                        l.input.css("display", "block");
                                    var c;
                                })();
                            });
                        }
                        this.each(function () {
                            var t = e(this).data();
                            e(document).off(n(["mouseup", "touchend", "touchcancel", "mousemove", "touchmove", "scroll", "scrollstart"], t.spinnerid).join(" "));
                        });
                    };
                })(jQuery);
            },

 

To change button position I can modify only this part, or I'm missing something else that need to be modified?

                                                          t = s.verticalbuttons
                                                              ? '<div class="input-group bootstrap-touchspin"><span class="input-group-addon bootstrap-touchspin-prefix">' +
                                                                s.prefix +
                                                                '</span><span class="input-group-addon bootstrap-touchspin-postfix">' +
                                                                s.postfix +
                                                                '</span><span class="input-group-btn-vertical"><button class="' +
                                                                s.buttondown_class +
                                                                ' bootstrap-touchspin-up" type="button"><i class="' +
                                                                s.verticalupclass +
                                                                '"></i></button><button class="' +
                                                                s.buttonup_class +
                                                                ' bootstrap-touchspin-down" type="button"><i class="' +
                                                                s.verticaldownclass +
                                                                '"></i></button></span></div>'
                                                              : '<div class="input-group bootstrap-touchspin"><span class="input-group-btn"><button class="' +
                                                                s.buttondown_class +
                                                                ' bootstrap-touchspin-down" type="button">' +
                                                                s.buttondown_txt +
                                                                '</button></span><span class="input-group-addon bootstrap-touchspin-prefix">' +
                                                                s.prefix +
                                                                '</span><span class="input-group-addon bootstrap-touchspin-postfix">' +
                                                                s.postfix +
                                                                '</span><span class="input-group-btn"><button class="' +
                                                                s.buttonup_class +
                                                                ' bootstrap-touchspin-up" type="button">' +
                                                                s.buttonup_txt +
                                                                "</button></span></div>";

 

Hello. I'm in the same situation, have you managed to change the position of the button? If so, can you share how you did it?

Thank you.

 

[TiaNex Shopping]

On 4/18/2023 at 9:59 PM, DARKF3D3 said:

But on front end there's already bootstrap touchspin. So I should find for where it's added to be able to modify it.
I assume that it's added using javascript, because it's not into tpl.

<div class="qty">
<div class="input-group bootstrap-touchspin">
  <span class="input-group-addon bootstrap-touchspin-prefix" style="display: none;"></span>
  <input type="number" name="qty" id="quantity_wanted" inputmode="numeric" pattern="[0-9]*" value="1" min="1" class="input-group form-control" aria-label="Quantità" style="display: block;">
  <span class="input-group-addon bootstrap-touchspin-postfix" style="display: none;"></span>
  <span class="input-group-btn-vertical">
    <button class="btn btn-touchspin js-touchspin bootstrap-touchspin-up" type="button">
      <i class="material-icons touchspin-up"></i>
    </button>
    <button class="btn btn-touchspin js-touchspin bootstrap-touchspin-down" type="button">
      <i class="material-icons touchspin-down"></i>
    </button>
  </span>
  </div>
</div>

 

yes,it's add by js in default theme,

[Trade1]

2 hours ago, TiaNex Shopping said:

yes,it's add by js in default theme,

Thank you for responding. Can you share files or changes made to get the - button on the left and the + button on the right?
Thank you in advance.

[TiaNex Shopping]

On 12/3/2023 at 9:27 PM, Trade1 said:

Thank you for responding. Can you share files or changes made to get the - button on the left and the + button on the right?
Thank you in advance.

similar to this one ?

https://www.irder.com/item/2096/2022-hot-sale-europe-camouflage-printing-two-piece-teen-girl-swimwear-bikini.html

just modify the - button before the quantity input and + button after the input, usually don't need to modify the js code 

[Trade1]

19 minutes ago, TiaNex Shopping said:

similar to this one ?

https://www.irder.com/item/2096/2022-hot-sale-europe-camouflage-printing-two-piece-teen-girl-swimwear-bikini.html

just modify the - button before the quantity input and + button after the input, usually don't need to modify the js code 

Perfect. Thank you for your time

[Trade1]

23 hours ago, TiaNex Shopping said:

similar to this one ?

https://www.irder.com/item/2096/2022-hot-sale-europe-camouflage-printing-two-piece-teen-girl-swimwear-bikini.html

just modify the - button before the quantity input and + button after the input, usually don't need to modify the js code 

Hello. If I don't need to change the JS code, which file should I modify? I say this because I can't find the buttons in any TPL file.

Thanks.

[TiaNex Shopping]

On 12/26/2023 at 3:06 AM, Trade1 said:

Hello. If I don't need to change the JS code, which file should I modify? I say this because I can't find the buttons in any TPL file.

Thanks.

you can search the button releated css class or id, 

i think you can find it

[DARKF3D3]

You can't do that with css only. The html structure of these field prevent to do this.
Other that css you have to disable vertical buttons from theme.js.

[TiaNex Shopping]

16 hours ago, DARKF3D3 said:

You can't do that with css only. The html structure of these field prevent to do this.
Other that css you have to disable vertical buttons from theme.js.

maybe you should modify the code and insert the - button before  quantity_wanted and +button after quantity_wanted input

in product.js ? or other js files. i don't view the code in fact

 

it seems this code in product.js default theme

 function createProductSpin() {
    const $quantityInput = $(prestashop.selectors.quantityWanted);

    $quantityInput.TouchSpin({
      verticalbuttons: true,
      verticalupclass: 'material-icons touchspin-up',
      verticaldownclass: 'material-icons touchspin-down',
      buttondown_class: 'btn btn-touchspin js-touchspin',
      buttonup_class: 'btn btn-touchspin js-touchspin',
      min: parseInt($quantityInput.attr('min'), 10),
      max: 1000000,
    });

verticalbuttons: true,

Edited December 28, 2023 by TiaNex Shopping (see edit history)

[Butch0071]

HI there,

so how to do it the "right way", to :
- not lost changes when source are regenerated by Presta,

- in case of either theme or core Presta update?

My quess is that modyfing the source .js is never a good idea.
It is not possible to modify this with CSS only, or at least I do not know how.

On product page I was able to modify the quantity input field with creative elements plugin. Unfortunately can not do it this way in basket (or cart as Presta Guys say)..

Would appreciate any tips.

Kind regards

[Dev_CLE]

Hello everyone,

I also wanted to modify the structure of the quantity selector in the classic theme.
The structure is generated in JS via the theme.js file.

The desired rendering can be achieved in CSS. Here is the solution:

.bootstrap-touchspin {
    position: relative;
    padding-left: 25px;
    padding-right: 25px;
}
.product-actions .product-quantity #quantity_wanted, .product-quantity .input-group-btn-vertical .btn {
    border: none;
    border-top: 1px #F3F3F3 solid;
    border-bottom: 1px #F3F3F3 solid;
}
.product-actions .product-quantity #quantity_wanted {
    width: 40px;
    height: 50px;
    text-align: center;
    margin-left: -1px;
}
.product-quantity .input-group-btn-vertical {
    position: absolute;
    left: 0;
    display: flex;
    gap: 45px;
}
.product-quantity .input-group-btn-vertical .btn {
    height: 50px;
    margin: 0 !important;
}
.product-actions .product-quantity .input-group-btn-vertical .btn i {
    top: 50%;
    transform: translateY(-50%);
}

Result:

You can then display your small icons using pseudo-elements ::before or ::after.

[Trade1]

17 hours ago, Dev_CLE said:

Hello everyone,

I also wanted to modify the structure of the quantity selector in the classic theme.
The structure is generated in JS via the theme.js file.

The desired rendering can be achieved in CSS. Here is the solution:

.bootstrap-touchspin {
    position: relative;
    padding-left: 25px;
    padding-right: 25px;
}
.product-actions .product-quantity #quantity_wanted, .product-quantity .input-group-btn-vertical .btn {
    border: none;
    border-top: 1px #F3F3F3 solid;
    border-bottom: 1px #F3F3F3 solid;
}
.product-actions .product-quantity #quantity_wanted {
    width: 40px;
    height: 50px;
    text-align: center;
    margin-left: -1px;
}
.product-quantity .input-group-btn-vertical {
    position: absolute;
    left: 0;
    display: flex;
    gap: 45px;
}
.product-quantity .input-group-btn-vertical .btn {
    height: 50px;
    margin: 0 !important;
}
.product-actions .product-quantity .input-group-btn-vertical .btn i {
    top: 50%;
    transform: translateY(-50%);
}

Result:

You can then display your small icons using pseudo-elements ::before or ::after.

Thank you for your Contribution. I have 2 questions:
1- you can change the arrows to (-+) in the CSS¿
2- Do I have to disable the js of the previous structure? If yes, how?
Thank you very much again.

[Dev_CLE]

Hello,
1 - Yes, you just need to use CSS pseudo-elements ::before or ::after to modify the "+" and "-", the CSS I shared previously only changes the style on the product page. Here's a new version that also modifies the selector on the cart page + replaces the selection arrows with "+" and "-":
 

.bootstrap-touchspin {
    position: relative;
    padding-left: 32px;
    padding-right: 40px;
}
 #quantity_wanted, .bootstrap-touchspin input.js-cart-line-product-quantity, .input-group-btn-vertical .btn {
    border: none;
    border-top: 1px #F3F3F3 solid;
    border-bottom: 1px #F3F3F3 solid;
}
#quantity_wanted, .js-cart-line-product-quantity {
    width: 40px !important;
    height: 50px !important;
    text-align: center;
    margin-left: -1px;
    font-size: 20px;
    font-weight: 700;
}
 .input-group-btn-vertical {
    position: absolute !important;
    left: 0;
    display: flex !important;
    gap: 38px;
}
.input-group-btn-vertical .btn {
    height: 50px;
    margin: 0 !important;
}
 .input-group-btn-vertical .btn i {
    top: 50%;
    transform: translateY(-50%);
    color: transparent;
}

.bootstrap-touchspin-up::before, .bootstrap-touchspin-down::before {
    color: black;
    font-size: 20px;
    font-weight: 700;
}
.bootstrap-touchspin-up::before {
    content: '+';
}
.bootstrap-touchspin-down::before {
    content: '-';
}

.bootstrap-touchspin-up {
    border-bottom-left-radius: 10px !important;
    border-top-left-radius: 10px !important;
}
.bootstrap-touchspin-down {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

2 - It's important not to disable the JS, here we're only overriding the selector's style, the mechanics remain the same so the native JS of the theme doesn't need to be modified.

You can adjust this CSS according to your needs
Note that this CSS will only work on the classic theme.

Result :