How to create a submodule in Vuex with vuex-module-decorators? - vuex

I'd like to have a project module in Vuex, which has sub-modules for props, document, author, and so on (so project.props, project.document, etc). I'm starting to use https://championswimmer.in/vuex-module-decorators/ and from the doc it's not clear how to set up sub-modules. Is there a simple example or some doc I missed?
I want the store to be laid out with the document (etc.) inside the project because I'll save and load entire projects via my API.

Related

How to add new custom fields in checkout using checkout-sdk-js of bigcommerce?

How to add new custom fields in checkout using checkout-sdk-js of bigcommerce?
SDK:       https://github.com/bigcommerce/checkout-sdk-js
Example: https://github.com/bigcommerce/checkout-sdk-js
After fields add data of custom fields will be stored? How?
P.S. - I did a lot of search about it, but didn't get it that's why I've created this questions.
About storing the custom fields' data -- this depends on which framework you build your checkout with. If you decide to go with React, for example, you will store this 'new data' in the react state. To continue this example with React in mind, you can add new custom fields to the .jsx file depending on where you are needing these form fields to be located. However, the checkout SDK is written in vanilla JS, meaning it is completely framework-agnostic. So you can build your checkout in React, Angular, Vue, or even just plain HTML and JavaScript–whichever frontend framework you prefer to build in.

Vue - Switch between two different templates

I've been developing a new Vue project to control the connected devices from one point, I've been working on an admin template and it's all good but there is something that I want to learn and implement to this application.
Let's say I want to change the whole frontend template (the admin template that I'm using now) and use a new design, how can I implement the whole existing application to a new template? For example, when you start creating a Wordpress page, it gives you different templates and you choose some of them and start designing the website... Maybe after six months you want to change that design and you simply click and switch to a new template and all the existing content will be migrated to the new template. That is exactly what I want to do with Vuejs.
I have to do this project, which I prepared with the existing theme, dynamically, as if I will pass it to another theme in the future. When switching my existing project to a new theme, instead of copying all the components and their related scripts, I want to be able to switch just like in Wordpress by simply throwing the theme file into the project. How can I add this functionality to the project?

PrintInvoice global variable - BigCommerce

I have the following case:
I'm trying to edit the PrintInvoice.html after downloading it through WebDav. The template was previously edited by another developer, but using the Template Files directly in the Storefront back when the files were visible in the Storefront. When opening the HTML template, the wording that I need to change is inside the global variable %%GLOBAL_ProductsTable%% so I'm not sure how to reach the text content inside. Replacing the global variable with custom HTML is not desirable.
Any suggestions are appreciated!
As others have stated, these global variables are saved within BC's back-end database which you do not have access to.
A workaround my team and I have done to edit the contents of these global variables is to use JavaScript at the bottom of the document that changes the desired text after it is loaded. This seems to be the only way we could find to edit those values.
Global variables like this are provided by the BigCommerce app, it is how the product data is sent through your store to email and can't be modified. To change the product table's appearance, the existing variable would need to be removed and replaced with your custom code.

Keystone.JS render multiple template files

I use keystone.js together with handlebars as template engine. Until now I had one .hbs-file for each page. However, HTML-Code is growing over time and I would like to split the HTML into several files. Does keystone.js offer a simple way to render multiple template files?
I'd prefer not to use technologies like webpack just for that "simple" task.
You can use partials to break up your templates, so you can include one .hbs file in another file.
Add a new file in the templates/views/partials directory, for example myPartial.hbs, and then you can include it in another file like so:
{{> myPartial }}
KeystoneJS will handle registration of .hbs files in the templates/views/partials directory.
You can read more here:
http://handlebarsjs.com/partials.html
If you use the KeystoneJS generator to set up your project, you can see this in action where pagination.hbs is included in blog.hbs.

How do I navigate to another page within my Elm application?

How do I navigate to another page within my Elm application?
Specifically, I am trying to navigate from the Home page to the Contributor page.
The Contributor page is located under my Domain folder.
The file structure is below:
- Home.elm
- Domain
- Contributor.elm
I thought I could do something like this:
a [href "Domain/Contributor.elm"] [text "click me!"]
or this:
a [href "Domain/Contributor.html"] [text "click me!"]
However, neither of these paths work.
Note:
The app that I'm working on is NOT a SPA.
You are using elm-live, which is a development server. It targets a single Elm source file as its entry point, so unless your Elm code is built as a single page application, you won't be able to do any navigation to another file (though there is nothing wrong with hard-coding href links that link elsewhere).
elm-live is also only for development. You wouldn't want to run it on a production server.
If you are trying to avoid a SPA and would rather have each Elm file represent the complete functionality for a single page, perhaps you could go with the default functionality of elm make, which generates an HTML file that contains inline javascript compiled from Elm code. This is, in essence, what drives the elm-lang.org website. If you look at the source code, you'll see the html generated by the default elm make command, compiled against each Elm file "page" of the application.
On the other hand, if you are trying to build a SPA, #Bill's answer is a good starting point.
I don't believe you can do the sort of navigation you are trying to do within an Elm app without building a SPA. You are attempting to use the HTML href attribute to navigate. That attribute needs to be a real URL. Without using something like the Elm navigation package, you wont's have support for multiple routes.
Simple navigation in Elm is fairly straightforward. I wrote a blog post on this subject.
Also, here is the github repo that demonstrates the work in this post.