We Keep Coding

Use Product Variants Select in Cart Prestashop

I'm developing a cross sell module that will display products in cart that you can add to cart by clicking the button add to cart.
I need to take consideration of product variants (attributes).
I've already find out how to add the add to cart button to the cart page thanks to this code :
<form action="{$urls.pages.cart}" method="post" id="add-to-cart-or-refresh">
<input type="hidden" name="token" value="{$static_token}">
<input type="hidden" name="id_product" value="{$product->id}" id="product_page_product_id">
<span class="remove-from-cart">
<button class="btn btn-primary add-to-cart" data-button-action="add-to-cart" type="submit"
{if (!$product->checkQty(1))} disabled {/if}>
<i class="material-icons float-xs-left">shopping_cart</i>
{l s="Add to cart" d='Shop.Theme.Actions'}
</button>
</span>
</form>
But what I need now is to update the display price depending about the value chosen with the select option value dropdown set as on my product page and use the attribute id selected in order than when the user click on the add to cart button, it add to cart the product with the good attribute and not the default one
I'm sure that is from js script that the price is updated but I don't really find out which function is in charge of this
This is the select option as asked
<div class="clearfix product-variants-item">
<span class="control-label">ATTRIBUTE_GROUP_NAME</span>
<select class="form-control form-control-select" id="group_ATTRIBUTE_GROUP_ID" data-product-attribute="ATTRIBUTE_GROUP_ID" name="group[ATTRIBUTE_GROUP_ID]">
<option value="ATTRIBUTE_ID" title="ATTRIBUTE_NAME" selected="selected">ATTRIBUTE_NAME</option>
</select>
</div>

the solution is not very simple but is achievable, the same way as prestashop works on product page, you have to ajax refresh your content on the attribute change. We developed a complex upselling module on checkout using the same method and it works good.
The logical steps are:
-> Select value is changed
-> submit the data via ajax
-> get the fresh and updated data, best choice for me is to render your module view again and get an html as response
-> replace your content with the new html
Another way, not tested because little bit more complex in my opinion, could be to store in javascript all the data about all the variations/combinations and handle the logic there to get the price data you need on every change. A problem with this solution is that the data could be not always updated because stored locally.
I hope my hint helps, I wanted to comment but my ranking is still too low and I have to reply instead.
Simone

Send combination of two input values with htmx

I'm writing a simple website with Django and I decided to try htmx library in client side to load html fragments. Now I want to sort lists by different fields, ascending and descending. I have something like this:
<div class="col-auto">
<div class="input-group input-group-sm">
<select id="np-sort-key" name="key" class="form-select">
<option value="publish_date" selected>Publish date</option>
<option value="title">Title</option>
</select>
<button class="btn btn-outline-dark" type="button">
<span class="bi bi-sort-down"></span> <!-- bi-sort-up for Asc icon -->
</button>
</div>
</div>
I want to add/replace the order_by=<order><key> query parameter to/in the current url (For example /articles?page=2&order_by=-publish_date.) and send it back to Django view both on "select" change and "button" click. The endpoint returns a Html I want to swap it with another Html node with Htmx. (Note that span class should be changed on button click to show sorting is Asc or Dsc)
Is it possible using htmx? If not, simple Javascript solutions are welcome.

You could solve it like this:
You use
<form hx-get="...">
...
<input type="hidden" name="order_by">
</form>
Then you can display the user a nice icon for sorting. If the user clicks on the icon, you update the hidden input via JS.

The easiest approach would be to construct the URL server side based on the input values and then push it using the HX-Push response header:
https://htmx.org/reference/#response_headers

From what I understood of htmx documentations, htmx provides us two tools to send custom values:
hx-vals that lets you add custom parameters to the ongoing request. These parameters are in the form of a Json object and their values could be either static or dynamic (returned from a JS function). For example:
<div hx-get="/list" hx-vals='js:{"order_by": concatSortOrderAndKey()}'>
hx-include that adds values of the elements specified by a query selector to the ongoing request.
In case of my problem, in addition to #guettli answer, I could set htmx parameters on "select" and "button" tag and use hx-vals to calculate new order_by value. (also by using hx-boost, hx-* stuff could be set only on outer enclosing elements). But overall, I think the hidden input was a better solution.

AngularJS input type="radio" and ng-click

I have inherited a solution developed in AngularJS (1.5), bootstrap and perhaps something else. I really don't understand too much of this type of development. But I am faced with a problem to solve.
The site displays news in one of two ways:
list:
or grid:
The default mode is list. The user can change the mode through options located at the top:
The user can see the detail of a news item by clicking on the title, but when returning the news is always presented in list mode, regardless of what mode it was in. What is requested is that the mode selected by the user be maintained.
The options are in a div and a label:
<div class="btn-group" data-toggle="buttons" id="view-card-mode" data-intro="{{uikey.chTipoVista}}" data-position="bottom">
<label class="btn btn-default grid-view" title="{{uikey.VistaGrilla}}">
<input type="radio" name="options" id="grid-view" autocomplete="off" checked><i class="fa fa-th"></i>
</label>
<label class="btn btn-default list-view active" title="{{uikey.VistaLista}}">
<input type="radio" name="options" id="list-view" autocomplete="off"><i class="fa fa-list"></i>
</label>
</div>
But in the controller of this page there is no reference to these controls, in fact I don't know why they work, since indeed the view changes shape.
I've tried adding ng-click and ng-change to inputs, labels and i, but they don't respond. For example if I add in view:
<input type="radio" name="options" id="grid-view" autocomplete="off" ng-click="saveViewMode()" checked> <i class="fa fa-th"></i>
and in the controller
$scope.saveViewMode = function () {
console.log("finally");
};
nothing happens.
What I'm trying to do is keep the view mode in a variable in the $scope to retrieve it on return.
Beyond asking for help on how this would be solved, there is something that drives me crazy: how is this working?
I need to clarify that the site works normally, there are no problems. I just have to add this functionality.
Thanks in advance.

Keeping AngularJS controls states on back button

I have a button group that acts like a radio button group like the following:
<div class="col-md-10" data-ng-controller="type-controller">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success" ng-model="typeId" data-btn-radio="'1'">
Option 1
</label>
<label class="btn btn-success" ng-model="typeId" data-btn-radio="'2'">
Option 2
</label>
</div>
<input data-ng-model="typeId" name="typeId" type="hidden" ng-init="typeId = '1'" />
</div>
When I submit the form, the selected "radio" goes to the input hidden and it works as expected. The problem is if the user uses the back button. Let's say the user is on the page containing the code above, then the page navigates to another one, then if the user clicks the back button, the "state" of the button group is not kept. It resets making the UX not cool.
So how do I keep the value if the user leaves the page and comes back using the back button? I had this same problem in a different project that I could easily fix by triggering the functions that handle the "change" event using jQuery. I would just check the value of the hidden and set the control state accordingly. But now I'm not using jQuery anymore and I don't think I should manipulate the DOM from within my controller.
I'm using Angular and this site is not a SPA, using ajax to get the values is not the case here.

Validate for a button click/selected in Magento using the built-in validation

I know the Magento validation javascript library is pretty powerful, however I am trying to make Magento recognise 3 buttons and have the user be forced to select one before they can proceed, is this possible using the current javascript library in Magento.
This isn't a problem usually but in this case rather than input buttons I am using a standard button (probably not the best way to approach this tbh)
<li class="fields">
<div class="field">
<button class="button organisation_type" value="1" type="button"><span><span><?php echo $this->__('Org A') ?></span></span></button>
<button class="button organisation_type" value="2" type="button"><span><span><?php echo $this->__('Org B') ?></span></span></button>
<button class="button organisation_type" value="3" type="button"><span><span><?php echo $this->__('Org C') ?></span></span></button>
</div>
</li>
Is it possible using the built in library which uses the css classes to have this request the user to select one button from the three above?

is it possible for you to use radio-button instead of buttons?
if the answer is yes - then you can add 3 radio buttons (for the 3 organisations), give them the same name so the user can select only one value, and then add them the class "required-entry".