OroCommerce Forums

Covering OroCommerce topics, including community updates and company announcements.

Forums OroCommerce How to position widgets in a popup for a custom action

This topic contains 7 replies, has 2 voices, and was last updated by Andrey Yatsenko Andrey Yatsenko 1 day, 3 hours ago.

  • Creator
    Topic
  • #38602

    Mauro Chojrin
    Participant

    Hi:

    I’m having a little problem with the UI of my custom action form. It’s showing like this:

    Instead of like this (the way I want it):

    I came up with this display by tweaking the html in FireFox’s inspector, it should look something like:

    The problem is… I don’t know where to put such HTML code :(

    In order to create this popup I copied everything from vendor/oro/commerce/src/Oro/Bundle/OrderBundle/Form/Type/OrderShippingTrackingType.php

    What would you suggest? Thanks

    • This topic was modified 1 week, 1 day ago by  Mauro Chojrin.
    • This topic was modified 1 week, 1 day ago by  Mauro Chojrin. Reason: Added images
Viewing 7 replies - 1 through 7 (of 7 total)
  • Author
    Replies
  • #38605
    Andrey Yatsenko
    Andrey Yatsenko
    Moderator

    I suggest using a dev environment with Symfony Profiler. At Oro, we have a useful tool for, that allows you to find the template, used for rendering some HTML and understand where it comes from, it’s named Twig Inspector, you can check the documentation.

    #38606

    Mauro Chojrin
    Participant

    Hi Andrey:

    Thanks for your reply. I like the idea.

    I just run composer install on my VM and downloaded a few packages but I don’t see a file like app_dev.php or anything… how can I enter my site on dev mode?

    #38607

    Mauro Chojrin
    Participant

    Never mind, I just found the file index_dev.php

    #38624

    Mauro Chojrin
    Participant

    Hi:

    So I think I figured it out (kind of).

    First, I tried installing the dev requirements in the VM and found problems with composer update (Lack of memory apparently)… so I’m going back to using it like it was a prod environment.

    What I recently noticed is that the shipping tracking form doesn’t look _exactly_ like mine:

    There’s a table that keeps everything in its place that I don’t have :(

    The thing is, I’ve been looking around and realized this table starts hidden and it’s unhidden upon click on “Add” (Which adds a row based on a template to the table).

    I noticed there’s also a file vendor/oro/commerce/src/Oro/Bundle/OrderBundle/Resources/config/oro/twig.yml which contains:

    Which contains lots of block definitions, one in particular that caught my attention was {% block oro_order_shipping_tracking_collection_widget %}. In it I found the definition of the table that holds the tracking records…

    What I’m missing here is how this file (fields.html.twig) is related to the general template that creates the popup and how the javascript is brought together as well… Is there any documentation I can check on this?

    Thanks

    #38632

    Mauro Chojrin
    Participant

    Somehow (I’m not really sure how) I managed to get the popup to look the way I want it to:

    But now the Add button isn’t working…

    Inpecting the errors in the console I got to this line of minified js (from oro.min.js):

    And the error is e.prototypeHtml is undefined.

    I’m really confused about all the yml files and their interaction with js and stuff…

    I created a file “requirejs.yml” inside my Resources/config/oro directory which has the following contents:

    I also created a file called src/Leeway/Bundle/CollectOnDeliveryBundle/Resources/views/Form/fields.html.twig in which I have the html for rendering the form I created (I copied and adapted it from the shipping tracking file).

    I also created a file src/Leeway/Bundle/CollectOnDeliveryBundle/Resources/public/js/app/views/payment-transaction-collection-view.js (which I’m not really sure s actually being used though I guess it should since it’s referenced in the configureOptions method of the collectiontype).

    I’m really lost here, any pointers will be much appreciated. Thanks!

    #38638

    Mauro Chojrin
    Participant

    I finally nailed it! The problem was I mistakenly changed the css class of a div that was referenced in the collection handling file ( public/bundles/oroui/js/app/modules/init-layout.js ).

    In the line 301 it reads var $listContainer = $(this).closest('.row-oro').find(containerSelector).first();.

    I had changed “row-oro” class to “row-leeway” (out of a not so smart search & replace when adapting the copied templates).

    Once I put it back the way it was it all started working again :)

    Thanks, hope my experience helps someone else.

    #38662
    Andrey Yatsenko
    Andrey Yatsenko
    Moderator

    It is not recommended to make JS depends on CSS classes. Sad to say, but, we still have some old code with this approach, so you should take it into account.
    In all new stuff, we are trying to make JS depends on data attributes instead of CSS classes.

Viewing 7 replies - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

You will be redirected to [title]. Would you like to continue?

Yes No