magento2 – Solved: Checkout cart components loading weird

we have a serious problem with the cart-view in our shop: https://www.murergrej.dk/checkout/cart/

  • Problem 1: Not all buttons are clickable anymore.
  • Problem 2: The message “Free shipping” is shown all the time.
  • Problem 3: The right sidebar is missing its content, which is the overview of the different prices, the calculation of the shipping price and the possibility to add a discount code.

Situation:
We had the website on a development server and moved it to the live server. The problem wasn’t on the dev-server present.
All JS files seem to be loaded and we can’t identify any relevant error messages, what makes debugging really uncomfortable.

What I tried so far:

  • Deactivating modules installed after we moved
  • Disable custom JS
  • Switch from production back to development mode
  • Deploy, deploy, deploy (of course with setup:upgrade, di:compile, cache:clean/flush)
  • Reindex (what shouldn’t do any difference)

Any new perspective/idea on how to approach the debugging would be a great help.

Thank you very much!

Robert

EDIT

A module from a third party was altered by them, which caused the error. I will contact them, so that they fix the bug.

It is/was caused by cached jquery-data.

naming – System Hungarian Notation for Android UI components?

“Hungarian notation” can be useful to include additional information in the variable name, when that information cannot be represented in the type system. However, Systems Hungarian is entirely pointless and merely duplicates information that is already available. Most occurrences of Systems Hungarian are legacy code, or a misunderstanding of the benefits of Hungarian notation.

For example, I might use a variable like startCountdownButton in untyped languages like Python, but probably not in statically typed languages like Java. Depending on your architecture (like MVC, MVVM), there is also unlikely to be confusion between a button and an action because they aren’t part of the same object.

Nevertheless, if you find that including a prefix or suffix in your variable names makes them clearer in the context of your code, then go for it. There are many opinions on whether or not to use Hungarian notation, and some of them are phrased very strongly (you should never do this, always do that). But they are just opinions and guidelines, no strict laws. Do what makes sense for your code.

javascript – Looking for a better way to clear fields in child components

HOW IT WORKS – When you update a field, all of the fields after it are cleared. (It must work this way to ensure the user fills it out in order. Also a field depends on the value in the previous field)
Each child component has a useEffect which should reset the field if the parent tells it to do so, then tell the parent that it has been reset by setting setClear**** back to false;

I’ve created a simplified example below, that resembles the structure of a more complicated form I have created in another application.

Although it works, I’m unhappy with how fields are being cleared. I feel that it should be more simple. If my form grows by adding just a single element, for example ‘Name’, I’d have to add state ‘Name’, add state for ‘clearName’, and add another case to my switch statement. To me, I think this is too complex considering my actual application has 8 input fields.

(The child components in the actual application are not as simple and repetitive as they are in this example… this has simplified just to focus on the clearing aspect of the code)

Any suggested improvements for my design structure would be much appreciated!

PARENT COMPONENT

import React, { useState, useEffect } from 'react';

const ParentComponent = () => {
  const SPECIES_FIELD = 'speciesField';
  const BREED_FIELD = 'breedField';
  const COLOR_FIELD = 'colorField';
  const ALL = 'all';

  const (species, setSpecies) = useState('');
  const (breed, setBreed) = useState('');
  const (color, setColor) = useState('');

  const (clearSpecies, setClearSpecies) = useState('');
  const (clearBreed, setClearBreed) = useState('');
  const (clearColor, setClearColor) = useState('');

  const resetElementsAfter = field => {
    switch (field) {
      case ALL:
        setClearSpecies(true);
        setClearBreed(true);
        setClearColor(true);
      case SPECIES_FIELD:
        setClearBreed(true);
        setClearColor(true);
        break;
      case BREED_FIELD:
        setClearColor(true);
        break;
    }
  };

  return (
    <>
      <ChooseSpecies changed={val => {resetElementsAfter(SPECIES_FIELD); setSpecies(val);}} clearField={clearSpecies} setClearField={setClearSpecies}/>
      <ChooseBreed changed={val => {resetElementsAfter(BREED_FIELD); setBreed(val);}} clearField={clearBreed} setClearField={setClearBreed}/>
      <ChooseColor changed={setColor} clearField={clearColor} setClearField={setClearColor}/>

      <div>Species: {species}</div>
      <div>Breed: {breed}</div>
      <div>Color: {color}</div>

      <Button onClick={() => resetElementsAfter(ALL)} />
    </>
  );
}

CHILD COMP – 1ST FIELD

import React, { useState, useEffect } from 'react';

const ChooseSpecies = ({ changed, clearField, setClearField }) => {
  const values = ('Dog', 'Cat');

  const (fieldValue, setFieldValue) = ('');

  useEffect(() => {
    if(clearField){
      changed('');
      setFieldValue('');
      setClearField(false);
    }
  }, (clearField));

  const handleChange = e => {
    setFieldValue(e.target.value);
    changed(e.target.value);
  };

  <Dropdown values={values} fieldValue={fieldValue} changed={handleChange}/>
}

CHILD COMP – 2ND FIELD

import React, { useState, useEffect } from 'react';

const ChooseBreed = ({ changed, clearField, setClearField }) => {
  const values = ({
    Dog: ('Lab', 'Staffie'),
    Cat: ('Maine Coone, Sphynx')
  });

  const (fieldValue, setFieldValue) = ('');

  useEffect(() => {
    if(clearField){
      changed('');
      setFieldValue('');
      setClearField(false);
    }
  }, (clearField));

  const handleChange = e => {
    setFieldValue(e.target.value);
    changed(e.target.value);
  };

  <Dropdown values={values} fieldValue={fieldValue} changed={handleChange}/>
}

CHILD COMP – 3RD FIELD

import React, { useState, useEffect } from 'react';

const ChooseColor = ({ changed, clearField, setClearField }) => {
  const values = ('Black', 'White', 'Brown');

  const (fieldValue, setFieldValue) = ('');

  useEffect(() => {
    if(clearField){
      changed('');
      setFieldValue('');
      setClearField(false);
    }
  }, (clearField));

  const handleChange = e => {
    setFieldValue(e.target.value);
    changed(e.target.value);
  };

  <Dropdown values={values} fieldValue={fieldValue} changed={handleChange}/>
}

differential geometry – How to identify specific Christoffel symbols and Riemann Tensor components from a general solution

I want to learn how to identify specific Christoffel Symbols and Riemman Tensor components from the general solution provided by Mathematica. Let us work out an example to see what I mean clearly.

Given the following metric

$g_{mu nu} =
begin{pmatrix}
1 & 0 & 0 & 0 \
0 & r^2+b^2 & 0 & 0 \
0 & 0 & (r^2+b^2)sin^2(theta) & 0 \
0 & 0 & 0 & -1
end{pmatrix}
$

Using the following code

ChristoffelSymbol(g_, xx_) := 
 Block({n, ig, res}, n = Length(xx); ig = Inverse(g);
  res = Table((1/2)*
     Sum(ig((i, s))*(-D(g((j, k)), xx((s))) + D(g((j, s)), xx((k))) + 
         D(g((s, k)), xx((j)))), {s, 1, n}), {i, 1, n}, {j, 1, n}, {k,
      1, n});
  Simplify(res))
(* The coordinates *)
xx = {r, (Theta), (Phi), t};

(* The metric *)
g = {{1, 0, 0, 0}, {0, r^2 + b^2, 0, 0}, {0, 
    0, (r^2 + b^2) Sin((Theta))^2, 0}, {0, 0, 0, -1}};

ChristoffelSymbol(g, xx)

We get the general result

enter image description here

So how to identify from such general solution that the symbols are

$Gamma^{1}_{22}=-r$

$Gamma^{1}_{33}=-rsin^2(theta)$

$Gamma^{2}_{21}=frac{r}{b^2+r^2}$

$Gamma^{2}_{33}=-cos(theta)sin(theta)$

$Gamma^{3}_{31}=frac{r}{b^2+r^2}$

$Gamma^{3}_{32}=cot(theta)$

? (i.e. what code could we use?)

Same story with the Riemann Tensor;

Using the following code

RiemannTensor(g_, xx_) := 
    Block({n, Chr, res}, 
           n   = 4; Chr = ChristoffelSymbol( g, xx);
           res = Table(  D( Chr((i,k,m)), xx((l))) 
                       - D( Chr((i,k,l)), xx((m)))
                       + Sum( Chr((i,s,l))*Chr((s,k,m)), {s, 1, n})
                       - Sum( Chr((i,s,m))*Chr((s,k,l)), {s, 1, n}), 
                        {i, 1, n}, {k, 1, n}, {l, 1, n}, {m, 1, n}); 
           Simplify( res))

RiemannTensor(g, xx) 

We get the general result

enter image description here

But how to identify the specific $R_{mu nu rho sigma}$ components?

dnd 5e – If a spellcaster’s racial trait grants a spell that requires material components, can they use their class’ focus to cast that spell?

The feature that allows a character to use a focus is usually Spellcasting, and it has a wording like:

SPELLCASTING FOCUS You can use a holy symbol (found in chapter 5) as a
spellcasting focus for your cleric spells. (PHB 58)

This indicates that you can only use those focuses for (class) spells. A spell is a (class) spell if you have learned it as a member of (class), it being on its list is not important.

A spell learned from a racial feature is not associated with any class and thus the features that grant the ability to use a focus item do not cover them.

unity – Ability System with Modular Targeting: having trouble finding a good way to map between input components and effect components

I’m trying to make an ability system with modular targeting/inputs for a turn-based RPG game (using Unity)

What I mean by that is that most ability systems I’ve found use an inheritance hierarchy where there are different sub-classes for each different type of targeting, e.g. SingleTargetAbility, PBAoEAbility, VectorAbility, etc.

However it seems like this structure lacks flexibility or results in a huge, unwieldy number of subclasses. For example, say you made single target abilities, like Holy Smite and vector (choose a direction radiating out from your character) abilities, like Flame Lance. Now let’s say you want to make a Push ability, where the player selects a unit, the selects a direction radiating out from that unit in which to push it. With the inheritance hierarchy method, it seems like you’d have to make a new class, SingleTargetThenVector ability to fit this use case. And so forth for any other combination of inputs.

Instead, I tried to make a system where an ability can have any number of player inputs (i.e. targeting, but also including stuff like “choose one of 3 options”), and any number of effects (like damage, push, heal, etc), and then the inputs are mapped to each effect.

This is what I came up with (abbreviated to include only the important parts):

    public class AbilityInfo : ScriptableObject
    {
        public string abilityName = "New Ability";

        (SerializeField)
        public string id = System.Guid.NewGuid().ToString();

        public List<AbilityInputInfo> inputInfos;

        public List<AbilityEffect> abilityEffects;
    }

    public abstract class AbilityInputInfo
    {
        public abstract string uiPrefabName { get; set; }

        public abstract void promptInput(Ability ability);
    }

    public enum AbilityInputSource : int
    {
        Caster = -1,
        First = 0,
        Second = 1,
        Third = 2
    }

    public class AbilityEffect
    {
        public List<AbilityInputSource> playerInputSources;

        public EffectInfo info;
    }

    public class Ability : MonoBehaviour
    {
        public GameObject caster { get { return gameObject; } private set { } }

        public AbilityInfo info { get; private set; }

        private List<System.Object> _inputs;

        public static void Create(GameObject unit, AbilityInfo info)
        {
            Ability ability = unit.AddComponent<Ability>();
            ability.info = info;
        }
        public void execute()
        {
            if (info.inputInfos.Count > 0)
            {
                _inputs.Clear();
                Events.OnAbilityInput += onPlayerInput;
                info.inputInfos(0).promptInput(this);
            }
        }

        public void onPlayerInput(object input)
        {
            _inputs.Add(input);

            if (_inputs.Count == info.inputInfos.Count)
            {
                Events.OnAbilityInput -= onPlayerInput;
                executeEffects();
            }
            else if (_inputs.Count > info.inputInfos.Count)
            {
                Debug.LogError($"Too many inputs for {info.abilityName}: expected {info.inputInfos.Count}, got {_inputs.Count}");
            }
            else
            {
                info.inputInfos(_inputs.Count).promptInput(this);
            }
        }

        private void executeEffects()
        {
            foreach (AbilityEffect abilityEffect in info.abilityEffects)
            {
                List<System.Object> effectInputs = new List<object>();
                foreach (int inputSource in abilityEffect.playerInputSources)
                {
                    if (inputSource == (int)AbilityInputSource.Caster)
                    {
                        effectInputs.Add(caster);
                    }
                    else
                    {
                        effectInputs.Add(_inputs(inputSource));
                    }
                }
                abilityEffect.info.execute(effectInputs);
            }
        }
    }

    public abstract class EffectInfo
    {
        public void execute(List<object> inputs)
        {
            //Some shared logic
            _execute(inputs);
        }

        protected abstract void _execute(List<object> inputs);
    }

    public class MoveEffectInfo : EffectInfo
    {
        protected override void _execute(List<object> inputs)
        {
            GameObject unit = (GameObject)inputs(0);
            Vector3Int targetPos = (Vector3Int)inputs(1);
            Movement movement = unit.GetComponent<Movement>();
            movement.move(targetPos);
        }
    }

    public class GroundSelectInputInfo : AbilityInputInfo
    {
        public override string uiPrefabName { get { return "GroundSelectInputUi"; } set { } }

        (SerializeField)
        int range = 5;

        public override void promptInput(Ability ability)
        {
            GameObject gameObject = Utility.InstantiatePrefab(uiPrefabName, GameObject.FindGameObjectWithTag("Canvas"));
            GroundSelectInputUi ui = gameObject.GetComponent<GroundSelectInputUi>();
            ui.initialize(ability.caster.position, range);
        }
    }

There are a few issues with this though:

  1. The mapping from input to effect is not type-safe.

Because there are many different types of inputs to effects (units, positions, etc.), I just use “object” as a catch-all and then plugging those into the execute of each effect, and then inside the effects casting to the correct type. However, if I input the mapping wrong in the editor (put 2 instead of 1), then it will be an execution error.

  1. Distinguishing between dynamic player inputs and static inputs (like “caster” or “caster’s position”) is really janky.

I do it through an enum that represents both static inputs and indices to the dynamic inputs, but that seems really janky. For example, right now the indices only go up to three. I’d have to add FOUR, FIVE, SIX, etc. as I have abilities with more inputs.

  1. Passing the inputs back to the ability is done through a brittle event system.

Because the input is done through Unity UI, I use an asynchronous callback event system and register a listener in the Ability object. However, the same listener is used for all AbilityInputs, so it’s possible that the Ability could receive input from a different UI than it expected (if the UI had a bug and sent multiple onPlayerInput events, for example), and the system wouldn’t recognize that.

I can’t seem to find a way around these problems, but it seems like there must be a way to make an ability system with modular targeting, although I haven’t seen any examples online.

Anyone know how these issues can be solved?

boot – How to choose a mother board which is compatible with all the old components

My system configs
I have been facing some weird issues that I can’t find solution to

1 : At times while I am working on my system, the screen completely freezes, no response, it does not restarts on its own, but if I force one there is just black screen and no booting

then I have to plug in and out my CPU and do power on and off several times before it finally boots and pops some “Your pc ran into a problem” and restarts

2:At times when I am working, it restarts on its own

3:At times when I wake up in the morning and try to switch it off, the fans dont start and there is just black screen, it starts after switching on and off, power cables and doing random trials

This is my mother board

I am guessing my motherboard maybe an issue becuase it even has some swollen capacitors, I dont know if thats the case correct me please if thats so.

**So all I wanted was to know what are the things i should consider to buy a new motherboard such that it is compatible with my old processor, ram and every other component and i wont need to buy any thing but new motherbaord
NOTE BUYING A NEW COMPUTER ISNT AN OPTION**

magento2 – Apply filters or mass actions on grids with fake collection (or wirhout ui components)

I a admin grid with a change on _prepareCollection() function to get the collection from a response of api call, its working fine. But I do not have the filters or mass functions, how can I do that without ui components?

enter image description here

I have this change on my grid file:

/**
 * Collection
 *
 */
protected function _prepareCollection()
{
    $filter = (
        'query' => 'cat yellow',
        'page' => 1,
        'region' => '',
        'year' => '',
    );

    $collection = $this->_api->searchCat($filter);

    $this->setCollection($collection);
    return parent::_prepareCollection();
}

If I could simulate a collection, maybe I could use ui components, but I’m lost, how can I resolve my problem?

The idea is use the filter to search cats with cat api, and the mass action is to import those registers into a products.

reactjs – Using state in other components in React JS

I have three components.

export default class PermissionHandler extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            permission: true
        }
    }

}

export default class App extends React.Component {
    render() {
        return(
            <PermissionHandler />
            <Component1 />
        )     
    }
}

export default class Component1 extends React.Component {
    render() {
        return(
            <SomeComponent /* visible= true/false depends on permission */ />
        )     
    }
} 

I want PermissionHandler state to be used by any other components directly without using events or local state. Is it possible?

Can I use refs to achieve this goal?

export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.permissionHandler = React.createRef();
    }

    render() {
        return(
            <PermissionHandler ref={this.permissionHandler} />
            <Component1 permissionHandler={this.permissionHandler}/>
            <Component2 permissionHandler={this.permissionHandler} />
        )     
    }
}

export default class Component1 extends React.Component {
    render() {
        return(
            <SomeComponent visible={this.props.permissionHandler.currenct.state.permission} />
        )     
    }
} 

But Component1 doesnt rerender when the state of PermissionHandler updates

spfx – Fabric UI Navbar components- How to swtich to horizontal layout?

I have done this using the CommandBar. I have created a Menu component and I set the items property from the WebPart.ts file (MenuWebPart.ts).

Below is the code for MenuWebPart.ts.

export default class MenuWebPart extends BaseClientSideWebPart<IMenuWebPartProps> {

  public render(): void {
    const element: React.ReactElement<IMenuProps> = React.createElement(
      Menu,
      {
        items: (
          { name: 'Documents', url: 'http://example.com', key: 'key3', isExpanded: true },
          { name: 'Pages', url: 'http://msn.com', key: 'key4' },
          { name: 'Notebook', url: 'http://msn.com', key: 'key5' },
          { name: 'Long Name Test for ellipse', url: 'http://msn.com', key: 'key6' }
        )
      }
    );

    ReactDom.render(element, this.domElement);
  }

And below is my code for the Menu.tsx file.

import * as React from 'react';
import { IMenuProps } from './IMenuProps';
import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';

export default class Menu extends React.Component<IMenuProps, {}> {
  constructor(props: IMenuProps) {
    super(props);
  }
  public render(): React.ReactElement<IMenuProps> {
    const { items } = this.props;

    return (
      <div>
        <CommandBar items={items} />
      </div>
    );
  }
}

With this configuration, if you run your application, you will be able to see the menu in horizontal as follows.

enter image description here