design – OOP Vanilla JavaScript: loading components dependent on current page

I’m building an app in vanilla JavaScript, trying to keep it Object Oriented.
I’ve split it into many component classes, each roughly “wrapping” the logic for one DOM element, e.g. a form or table.
Components are recycled across multiple pages, which becomes a pain when trying to determine which components to load and getting them to talk to each other indirectly through mediators.

My pseudocode:

// Classes split across many files
class UsersSmartTableWrapper {
     editButtons = (//Array of button HTML elements which allow edits  );
     constructor() {
          this.tableElement = document.getElementByID('TableID')
          this.editButtons = ...;
          this.editButtons.forEach(b => // add click event listeners)

class EditUserFormWrapper {

     onSubmit(event) {
          // Prevent page reload, build custom API data structure and POST request etc
          // and once done
          this.formElement.dispatchEvent(new Event('UsersUpdated')) 
     constructor(apiWrapperService) {
         this.formElement = document.getElementByID('EditUsersForm');
         this.apiWrapperService = apiWrapperService;

class EditUsersFormSmartTableMediator() {
     onUsersUpdated() {
          // Update table
     onDataTableButtonEditRequest() {
          //Open form and bind user data to it to edit
     constructor(editUserFormWrapper, usersSmartTableWrapper ) {
          this.editUserFormWrapper = editUserFormWrapper;
          this.usersSmartTableWrapper  =  UsersSmartTableWrapper ;

          //Add event listeners to child components here


class AnotherMediatorWithEvenMoreElements {
     constructor() {
... many other componenets

My solution in the entry point looks something like this:

window.addEventListener('load', ()=>{
     let href = window.location.href;

     // This one is easy to bring out of the big if else, as it is not dependent on a DOM element 
     // that may/ may not be present.
     let apiWrapper = new ApiWrapper();
     if (href.startsWith('Users/Details')) {
          let editUserForm = new EditUserFormWrapper(apiWrapper)
     } else if (href.startsWith('Users/Datatable')) {
          let dataTable = new UsersSmartTableWrapper();

          // I have to do this / for _every_ page that has the EditUserForm element.
          // which isn't all pages!
          let editUserForm = new EditUserFormWrapper(apiWrapper)

          let mediator = EditUsersFormSmartTableMediator(editUserForm, dataTable );

     } else if (href.startsWith('Users/AnotherPage')) {
          new AnotherMediatorWithEvenMoreElements(... dependencies go here) // etc etc...

To me, this solution feels “hacky”. It results in repeatedly writing “new Component” at multiple points in the if/ else to build DOM dependent components. This goes against DRY and gets worse as more components are added to the app.

I know that this is the argument for Single Page Apps like Angular but for this project that isn’t an option.

Is there a design pattern for OOP JavaScript that can build components dependent on the current page in situations like this? Is depending on the href like this good practice?

magento2.4 – magento 2 sort child products according swatches in product view page

I wanna sort the child products of configurable according to display swatches.
I wanna sort the child products in product page.

Product page swatches display like this Green,White,Black
When I use my below code its fetching child products but not sort according to swatches. How swatches sorted and display, and what should I change in my below code ?

$childItems = ();
        $_objectManager = MagentoFrameworkAppObjectManager::getInstance();
        $_product = $_objectManager->get('MagentoFrameworkRegistry')->registry('current_product');
            if($_product->getTypeId() == "configurable"){
            $imageBuilder= $_objectManager->get('MagentoCatalogModelProductImageUrlBuilder');
                $allProducts = $_product->getTypeInstance()->getUsedProducts($_product, null);
                foreach ($allProducts as $product) {
                    $productStockObj =  $objectManager->get('MagentoCatalogInventoryApiStockRegistryInterface')->getStockItem($product->getId());
                   if ($productStockObj->getIsInStock()){
                    $childItems() = $product->getSku();

When I run above code it displays the child array like this sku-white,sku-black,sku-green

I want sort the child items according display swatches

FSI v10.4.5 Potencial Bug w/Custom Page Links on sideboxes.

FSI v10.4.5 Potencial Bug w/Custom Page Links on sideboxes.

1 . So we add Custom Page Links to sidebox.

2. If we save/update any setting in “Store Settings”, it erases all Custom Page Link data from Sidebox.

3. Result: Empty Sidebox remains in side column / Custom Links- See Pic.

Like always, this bug is specific my site, you may or may not have this issue.



Are page numbers of a book a good analogy for a clustered index?

The title pretty much covers the question.

I think that the index of a book is a good analogy for a non-clustered index, as it demonstrates the extra storage and physical separation properties of a non-clustered index. I also think that the page numbers of a book represent well the physical ordering of data, similar to the structure of data with a clustered index.

However I’m a bit of a newbie to more advanced database theory. Does the analogy for page numbering make sense for a clustered index, or are there any properties of a clustered index where this analogy falls over?

Script to Update label and its link address of OOTB Button webpart- SharePoint Online Page

Do all the web parts have some thing in common? We can get the web part through PowerShell, still we need to identify the correct one to update.

As you have over 100 team sites, do the URL of pages using the web part recorded? We need either page URL or GUID to get the web part with Get-PnPWebPart


Set a web part property with Set-PnPWebPartProperty

An example you can refer to is like this and this .

composer – How do I add a sample page?

I am new to Drupal.

I have decided to use drypal to create my website.
I have run following command composer create-project drupal/recommended-project mydir Drupal with composer according to following manual: install-composer

I have installed XAMPP server.

According to following manual: how-to-launch-my-site i have edited httpd-vhosts.conf file with following entries:

<VirtualHost *:80>
    DocumentRoot "C:webxampphtdocs"
    ServerName localhost
    ServerAlias localhost
    <Directory C:webxampphtdocs>
        Options FollowSymLinks
        Options Indexes FollowSymLinks ExecCGI Includes
        AllowOverride All
        Order allow,deny
        Allow from all

<VirtualHost *:80>
  ServerName mysite
  DocumentRoot "C:mysite"
  <Directory C:mysite>
    Options Includes FollowSymLinks
    Order allow,deny
    AllowOverride All
    Allow from all

At this point, when i try to access website from browser with mysite i am unable to access my website after above steps. My question is: How do I add sample page to a Drupal website?

magento2 – Magento 2 – Ko Js – Multiple Instance of component in the same page

I am trying to add two templates with the same component, but i need that each template do not share observables and computed this with the other template. I need each one have it own instance of the component.

Is it possible? i spend some hours and i could not find the solution even in this forum.

    <div id="inbox" class="inbox-wrapper" data-bind="scope:'inbox'">
    <div class="inbox" data-bind="click: toggle">
        <i class="fas fa-envelope fa-lg"></i>
        <span class="counter" data-bind="text: messageCount, visible: messageCount, css: pop" style="display: none;"></span>
    <!-- ko template: getTemplate() --><!-- /ko -->
<div id="notifications" class="inbox-wrapper" data-bind="scope:'notifications'">
    <div class="inbox" data-bind="click: toggle">
        <i class="fas fa-bell fa-lg"></i>
        <span class="counter" data-bind="text: messageCount, visible: messageCount, css: pop" style="display: none;"></span>
    <!-- ko template: getTemplate() --><!-- /ko -->
<script type="text/x-magento-init">
        "#notifications": {
            "Magento_Ui/js/core/app": {
               "components": {
                    "notifications": {
                        "component": "Digibart_Notifications/js/component/notifications",
                        "template": "Digibart_Notifications/notifications",
                        "identifier": "<?= $block->getIdentifier(); ?>",
                        "options": <?= $block->getJsonOptions();?>,
                        "elementsId": "#notifications"
        "#inbox": {
            "Magento_Ui/js/core/app": {
               "components": {
                    "inbox": {
                        "component": "Digibart_Notifications/js/component/notifications",
                        "template": "Digibart_Notifications/inbox",
                        "identifier": "<?= $block->getIdentifier(); ?>",
                        "options": <?= $block->getJsonOptions();?>,
                        "elementsId": "#inbox"

HOME Page 10 Permanent 60DA+ LINK FULL REPORT for $25

HOME Page 10 Permanent 60DA+ LINK FULL REPORT

{HOME Page Permanent 10 60DA+ LINK FULL REPORT}

Why you need PBN Links and Why choose us?

You will get one do-follow backlink with the anchor text of your choice.

  • 100% Manually Done
  • 100% Do Follow & Permanent Links
  • 100% UNIQUE IPs
  • 100% Unique 500+ words content with relevant images in all PBN posts
  • Keywords (ANCHOR TEXTS) for Maximum Diversity
  • All domains are well indexed on Google

Detailed report

Note: We accept Adults, Gambling, Porn & sites.


Is this links permanent?

Yes, Links are permanent with the onetime fee

Do you accept foreign keyword and websites?

We accept foreign keyword and websites. But we only provide articles in English.

Can you show me samples?

Sorry, we are not providing any samples due to security reasons.

What is your TAT?

We will deliver your order within 5 to 7 days. Faster delivery

What is your refund policy?

Once the link is placed on my network, we won’t refund you. But we give do provide you with a guarantee for the above site metrics.

“If you have any questions or queries, please don’t hesitate to get in touch and we will be more than happy to help.”

We provide 100% Satisfaction Guaranteed!


sharepoint online – How to launch home page on Power Apps Forms submit button Click in same tab?

I have a list and we have customized the edit form in Power Apps. We have set this forms link in Email that we send to manager when new entry is added. He must review it and change status choice to approve and click save. But we need to open our homepage on submit click instead redirecting to list, we need to redirect to homepage.

We have tried below solutions so far:

  • Use source parameter as we do in classic site but it is not working. We are redirecting to list.

Reference – Customize newform save button – Save and redirect to another form

  • Use launch command. In this we have provided Launch option with home page and with demo page as well. In this scenario, the page is open in new tab. and current tab is redirecting to list.Here is my save code –
SubmitForm(SharePointForm1); Launch("Home page URL or Demo test page url");

Reference –

  • Use launch command with Launch Target option. I tried the latest replace option as well. But still we are redirecting to the list.
    Here is my save code –
SubmitForm(SharePointForm1); Launch("Home page URL",{},LaunchTarget.Replace);

Reference –,rather%20than%20the%20same%20tab.

Can someone help me with this?