There is an initially non-adaptive form (customer basket), which has a table layout table , each input / display element has a name form имяКолонки_НомерСтроки .

You need to make an adaptive form design. A new design for desktops has already been done, the problem is in creating a mobile design: it is completely different from the desktop and not tabular.

It is logical to create a separate form and manage the hide / show using hidden-xs / hidden-sm .

I have never done such a thing and I don’t know how to correctly implement the binding of JS to two forms / naming of form elements and so on.

    2 answers 2

    Since you have already decided to divide the basket implementation into 2 parts (desktop / mobile), then I would make some bool variable (isMobile) in js that would control the form (redirect the control flow depending on the type of device).

    In CSS, I would use a media-query to hide / show the desired form on the desired device (well, using hiden from bostrapp or your js code is already your decision).

    • OK, I'll show you a sketch tomorrow so that we can make sure that the separation is the right decision. - hellboy
    • If inside the old form there were div elements with name attributes that were used in selectors, then they should be replaced with the data-name . And besides, id needs to be changed to name - hellboy
    • We are looking for a reliable way to determine which particular div or DOM - a container of another type is shown now. - hellboy
    • @hellboy is not quite understand what you mean. In this regard, there is nothing more reliable than id, but then you have to cut a lot of rules to react to a specific type of device. I nevertheless would suggest that the desktop and the mobile version of the basket be sawed in one single way. With the help of bootstrap this is done rather quickly + you do not need to write a lot mediaquery. In the bootstrap, almost everything is ready. - alexoander
    • > I would still suggest cutting through both the desktop and the mobile version of the basket in the same way. I do not think that this is possible. In the desktop version I have a lot of columns and on the mobile version it would look awful. Besides, I already have a ready-made mobile basket design. And it looks completely different. - hellboy

    All the same, we chose the wrong approach.

    You must first refactor the code, namely transferring the logic of building a view from the Smarty template to the client, using the simplest MVVVM framework. Next, you need to select the view control logic in one ViewModel .

    In ko one ViewModel can be tied to a different View .

    And it’s further to look, but whether mobile таблицы needed for a separate View or automatically converted таблицы in the li Oxid framework Oxid sufficient.

    Without this refactoring (in the first paragraph) it is hardly possible to create 2 types in the sense of responsive layout.