javascript – Structure of a vue application in a magento theme context (NOT STOREFRONT)

Unfortunately google really wants to tell me about Vue storefront whenever I search for it with magento but I only want to integrate vue as part of a regular frontend theme..
Primarily to work on a more modular basis, keep other magento elements that are already solid, benifit from 4rd party modules etc and still benifit from seo without having to consider ssr
Apologies for essentially posing 6 questions (but hopefully you can observe they’re all related and wouldnt nessacerily make sense standalone)

Shouts out to both @max-pronko and who are both providing some excellent content out there. (Currently trying to get Shurst’s docker image working stable on WSL2 but thats another story, fairly convinced this my stack approach and will be joining MAcademy once Ive got a stable setup and feel orientated) both of them contributed to this fairly solid answer on a simple implementation.

However – a single vue component wont cover the complexities of complete vue app.
My first inline vue app will likely be a more user-freindly approach at a complex bundled product which I wish to augment with step-wise forms to help breakdown the bundle configuration before adding it to the cart.

Essentially what I’m querying is a rcommended approach / structure to the above to compose a more complete Vue app.
I’m presuming I dont need to make a fresh magento module for every component of the app instance, including a vuex store etc?

Referring to mentioned link and the Imperative implementation..

could I have a full hierchy of vue components in folders under the directory “app/code/Macademy/JsFun/view/frontend/web/js/vue-test.js”
such as web/js/ui/button.js , web/js/store/actions.js, reducers.js etc etc

and then import these
into my vue app as

    define(('vue'), function(Vue) {
'use strict';
import Button from './ui/button';
import Store from './store/store';

return function(config, element) {
    return new Vue({
        el: '#' +,
components: ('Button', 'Store')
        data: {
            message: 'This is a test'
methods: ({onClick: () => {Store.commit('click')}}) /// or whatever


and then use those elements such as in the phtml template ?

Presumbly Ill also hit the case where by ill have a library of UI components for instance that ill want to re-use in multiple vue apps on different pages.
…in which case, can anyone recommend an approach to have a seperate re-useable library as one magento module which can then be pulled in in turn to route specific modules for usage?

(3) API or Page enhancement – any opinion on whether for the proposed “bundled product configurator app” in question I should approach a regular bundled product page and enhance it with vue or pull the entire product data required from Mageneto’s API to build my models from? Is magentos API viable for usage or will I have to extend it/build my own endpoints for what is needed?

(4) Compilation – any tips on a good development workflow? Presumbly requirejs takes care of the compilation aspect? so i dont need a webpack config or anything to compile everything down ? Or would you recommend compiling down to a single finished js file that can be imported into the mage theme?

(5) Would the approach work alongside existing knockoutjs components?
Can I add to the cart with vue js and refresh the knockoutjs standard magento theme cart all in one?

(6)Bonus query: Add to cart for instance, just curious as to some pointers on how Ill acheive this in the proposed bundled product app.
Can i assume if i grab the product data from Mages API, it will be in the right format ready to just post to some “add to cart” endpoint?

I’m considerably more confident with Angular – just wondering if I can use the same approach as the correct one for Vue if I decide to go down that route.

Are there any good theme boilerplates out there that I can build from / or demos to observe the right practice to organise a substaintial vue micro-application within the context of a Magento theme?

Thats enough questions I think to give a clear picture of what Im trying to acheive and some of the anxieties I have around the unknowns… any contributions that tackle elements of the above would be greatly appreciated!
Thanks, Bob

unity – How to rotate multi-tile structure on grid?

I need to be able to place structures in my game that span multiple tiles and can also be rotated.
My idea on how to solve this would be to use 2D arrays that hold data about the structure.

EXAMPLE: (simplified)

Crafting table layout: XOX

X – data
O – data, but also used as a pivot point

If we were to rotate it clockwise, it’d look like this:


My problem lies in that these positions have to be real-world coordinates, so here’s the above example again but in a way that makes sense for my actual grid in-game. (replacing the X and O with coords):


And now, rotated clockwise (around the pivot point, which is (1,1)):


Another example purely for more information, but more complex (2×3 array):

Complex workstation ((6,4) IS THE PIVOT!):


Rotate it counterclockwise and we should get this:


I have tried and succeeded in doing it only on a conceptual level with the “X” and “O”s, but I don’t know how to implement actual coordinates.

I’ve never dealt with rotation matrices before so any advice, suggestion or solution on how to implement this is appreciated.

Are there known examples of almost complex manifolds admitting neither a symplectic nor a complex structure?

I have seen the the example of $S^6$ being touted around here and there but it does not seem to be generally confirmed that there is no complex structure on it.

block editor – Editing HTML structure of Gutenberg layout recent post?

I used gutenberg layout method with wordpress editor to call recent posts.
Wordpress automatically generated this HTML structure.

<ul class="wp-block-latest-posts__list has-dates wp-block-latest-posts">
     <div class="wp-block-latest-posts__featured-image">
       <img loading="lazy" width="1024" height="663" src="" alt="" class="wp-image-73" 
            srcset="" sizes="(max-width: 1024px) 100vw, 1024px">
     <a href="">SOME TEXT</a>
     <time datetime="2021-05-08T17:21:16+00:00" class="wp-block-latest-posts__post-date">May 8, 
     <div class="wp-block-latest-posts__post-excerpt">SOME TEXT</div>

Now I need to group anchor, time and the last div tag in another div tag for my CSS design.
Problem is I do not know how to edit html structure of recent post with wordpress editor. Should I code?

(!(enter image description here)(1))(1)

clicking over SOME POST doesn’t give me a chance to create a new div there..
I use underscore theme.


After enabling shared catalog in magento (cloud), the assigned price structure for the created catalog is not applied at frontend

I have created a new shared catalog in a magneto cloud environment and I also assigned the prices & companies for the created catalog.

But the price structure that I have configured in the shared catalog is not displaying on the frontend.

Can anyone give suggestions on this?

algorithms – Sparse tables as prefix sum data structure

I am trying to understand how a sparse table can be used as a prefix sum data structure for a bit vector. In the screendump below the article “Low Redundancy In Static Dictionaries With Constant Query Time” very vaguely describes how to use a sparse table from article “Storing a sparse table” to do this is $O(1)$ with space: $O(kcdot loglogn)$. For simplicity, we can assume that $k=n/logn$. How is this even possible? and what is $|z_i|=n^{O(1)}$?

prosition from article

Artivcle (16): “Storing a sparse table”

godot – How to inherit of a scene tree structure in a way that a change in the ancestor is updated in the descendant?

Consider this structure:

* KinematicBody2D (Actor)
|_ AnimationPlayer (able to make a rotation of 360)

Now I want to make a Player and an Enemy that inherits of that structure in a way that when I change the animation on the Actor Scene, Enemy and Player are updated.

Is there a pattern that allows that?

postgresql – Improving indexing of jsonb data when the json structure is well defined

I have a simple table records that contains a primary key (id) and a jsonb field (data). The structure of the jsonb is consistent across all rows. I have created a view (metadata) for this table which extracts a particular value category, which I can then run queries against.

SELECT id as id,
       data -> 'some_key' -> 'some_array' ->> 0 as category
FROM records;

(the data structure is not controlled by me)

I can use this VIEW to perform queries like:

SELECT category
FROM sop_instance_meta
WHERE category = 'category_0';

and it behaves as expected.

I was experiencing slow performance out of the above query (and similar equality queries), so I added an index as follows:

CREATE INDEX metadata_category_idx ON records ((data -> 'some_key' -> 'some_array ->> 0));

This has not improved my performance as I would have expected when I query for a particular category using string equality. It should be noted that for “categories” with a small number of rows, EXPLAIN ANALYZE tells me its using the index, however for “categories” with a large number of rows, it falls back to sequential searching. There are approximately 350k rows in my table. I’ve tried each type of index (i.e. GIN, GIST) with no measured benefits.

I intend to strictly use string equality when querying this view, and I have little control over the structure of the json object in data.

What would be the best way to construct my index such that the above query can run more efficiently? Thanks in advance.

Node.js+Express project structure – conventional structure for outbound calls

There are common conventions for Node.js+Express project structure.

Here is an example from node-express-boilerplate:

 |--config         # Environment variables and configuration related things
 |--controllers    # Route controllers (controller layer)
 |--docs           # Swagger files
 |--middlewares    # Custom express middlewares
 |--models         # Mongoose models (data layer)
 |--routes         # Routes
 |--services       # Business logic (service layer)
 |--utils          # Utility classes and functions
 |--validations    # Request data validation schemas
 |--app.js          # Express app
 |--index.js        # App entry point

What’s missing in the above (as well as other similar example boilerplates) is a folder dedicated to outbound calls.

For example, a weather application could make api calls to a 3rd party weather service. Or, an RSS reader app could make a fetch call to get a feed by a URL.

Is there a conventional way to do it in an Express project?

How to implement a different permalink structure for custom post type?

Tried to use this plugin, but it doesn’t seem to be working:

I’m setting a permalink structure for by blog posts in settings>permalinks like so: /blog/%postname%

I also have a custom post type called “project”, where I want the structure to be /our-work/%postname, but instead the /blog part gets prepended here too. How can I keep a separate permalink structure for this custom post type?

Here’s the register_post_type function:

register_post_type('project', array(
    'public' => true,
    'custom' => true,
    'show_ui' => true,
    'supports' => array('title','editor','revisions'),
    'labels' => array(
        'name' => 'Projects',
        'singular_name' => 'Project',
        'add_new_item' => 'Add New Project',
        'edit_item' => 'Edit Project'
    'menu_icon' => 'dashicons-portfolio',
    'show_ui' => true,
    'show_in_menu' => true,
    'show_in_rest' => true,
    'rewrite' => array(
        'slug' => 'our-work', 
        'with_front' => true
    'has_archive' => true,
    'show_in_graphql' => true,
    'graphql_single_name' => 'project',
    'graphql_plural_name' => 'projects',
    'cptp_permalink_structure' => '%post_id%'