1

For a florist. I have products that already have size attributes. I also need to add product options (add-ons) like a vase or a personalized card that will change the product price. These options are not for all products, only for those that I will select and sometimes it could be only one or another option. I have tried to add these as attributes as radio buttons but the radio buttons are not showing (only the group title), but product attributes don't feel correct for this type of option. I'm open to all type of solutions. Thanks in advance.

1

I figured out the following solution. I realized that a javascript variable within the page contained the combination prices. My problem was that on radio button clicks the url was changing with a replaceState argument. So I used the following code the change the button labels.

var _wr = function(type) {
var orig = history[type];
return function() {
var rv = orig.apply(this, arguments);
var e = new Event(type);
e.arguments = arguments;
window.dispatchEvent(e);
return rv;
};
};
history.pushState = _wr('pushState'), history.replaceState = _  wr('replaceState');

// Use it like this:
window.addEventListener('replaceState', function(e) {
  var productPrices = [];
  var productNames = [];
  var buttonNames = [];
  var targetDivs = document.getElementById("add-to-cart-or-refresh").getElementsByClassName("radio-label");
 
  for (k in accessoriesTablePrice[randomMainProductId].combinations)       {
productPrices.push(accessoriesTablePrice[randomMainProductId].combinations[k].price);
 };
 for (d in accessoriesTablePrice[randomMainProductId].combinations) {
    productNames.push(accessoriesTablePrice[randomMainProductId].combinations[d].name);
 };
 
 for (i = 0; i < targetDivs.length; i++) {
    var targetDiv = targetDivs[i];
 if(productPrices[i] >=0) {
  buttonNames.push(productNames[i] + "<br>" + productPrices[i] + ",00 €");
 
 targetDiv.innerHTML = productNames[i] + "<br>" + productPrices[i] + ",00 €";
    } 
 }
});

});
0

Radio buttons typically mean the user can select only one option of the radio group, as that is the default for plain HTML radio buttons.

This sounds like a use-case for <input type="checkbox">

Mozilla checkbox docs

Edit: After rereading your question, I see you are looking specifically for solutions within Prestashop, which I have not used. I am leaving my answer here just in case it may help you down the right path.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.