Hi Have developed a very simply Theme App extension for Shopify but cannot see it in the Shopify theme builder.
Files are:
/extensions/myextension/blocks/app-block.liquid
Hello world
{% schema %}
{
"name": "Test",
"target": "section",
"templates": ["product", "index"],
"settings": [
]
}
{% endschema %}
/extensions/myextension/shopify.theme.extension.toml
name = "myextension"
type = "theme"
I then run npm run dev which runs as expected, I can also the extension under the Apps section in my Shopify admin, but cannot see any blocks for it in the theme editor.
Any guidance would be appreciated.
Quick troubleshooting guide:
Have you built and deployed your extension using CLI?
Did you enabled preview in partner panel? You can try setting up an initial version.
Is your theme 2.0 theme? You should be able to use your component on the homepage.
Related
I am trying to build a blogging platform and i need to use a text editor and i have considered CKeditor and TinyMCE but there is no video or good instruction on how to use it with NuxtJS.
If anyone can help me it will be appreciated.
Please do not use a CDN but rather the solution that is here.
With something like this
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<editor
api-key="no-api-key"
:init="{
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar:
'undo redo | formatselect | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | removeformat | help'
}"
/>
</div>
</template>
<script>
import Editor from '#tinymce/tinymce-vue'
export default {
name: 'app',
components: {
'editor': Editor
}
}
</script>
Tinymce and CKeditor both have NPM packages and CDNs. This means you have two ways of using them in a Nuxt app.
Including the package via script tag (CDN)
As stated in the "Getting started" guide of those packages, you can simply import them using a script tag. In Nuxt, you can do this by adding it to your nuxt.config.js head option.
// nuxt.config.js
[...]
head: {
scripts: [
{ src: "https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js", referrerpolicy: true }
]
},
[...]
// example.vue
[...]
mounted() {
tinymce.init()
}
[...]
Using this solution you have to pay attention that tinymce is only accessed on the client-side, as it will not be available on the server-side.
Adding the package as a plugin
This is usually preferable, as it helps with bundle size analysis and allows your package manager to manage the text editors version.
You can also add the respective package as a plugin. Install the package using npm or yarn.
npm i tinymce
Afterward, simply create a .js-file in the plugins directory like so:
// plugins/tinymce.js
import tinymce from "tinymce"
export default tinymce
Register the plugin in your nuxt.config.js
// nuxt.config.js
plugins: [
{
src: "~/plugins/tinymce.js",
mode: "client", // This way the plugin will only be initiated on the client side
}
]
Now you can use the plugin within your app, accessing tinymce, just like in example.vue above.
Dynamically import the package within individual components
Another option is importing the npm package in the component directly. This may improve performance as the package is only imported when it is needed. If the package supports SSR, you can simply import it like you would any other package at the top of the script tag.
If your package does not support SSR (like most text editors), you can import it dynamically after checking whether the process is running on the client-side or by only importing it within hooks or methods that run on the client-side exclusively. (Solution by #kissu)
See this question for dynamic imports: How to make a dynamic import in Nuxt?
I'm new in Vuepress. I want to make a blog with a Vuepress-theme is available from github:
https://github.com/vuepress/vuepress-theme-blog
The official documentation shows how to change some things, for example the header, footer... as a colours, links... here more info:
https://vuepress-theme-blog.ulivz.com/config/#nav
To custom the allow parameters is from the file config.js with from module.exports object:
module.exports = {
themeConfig: {
nav: [
{
text: 'Blog',
link: '/',
},
{
text: 'Tags',
link: '/tag/',
},
]
},
}
But I would like to change the full navbar component. For this only I have found the way inside:
/node_modules/#vuepress-themeblog/components/Header.vue
At summary I want to know the best way to create new components. Maybe it's the better option change directly inside the components folder of the theme or is there any way?
I'm very confused in the documentation only shows a little changes.
Please Could you give me some advice?
Thanks!
You shouldn't edit the code inside the node_modules dir, as it is third-party code managed by the package manager.
You can solve your problem by creating your own theme using the vuepress-themeblog as a starting point.
The steps to write custom themes are described in the documentation. Copy the content of the vuepress-theme-blog repository into your theme folder and start working on your custom components.
I'm cleaning up my vue.js code and I'm about to create some of my own specific components. I'm using vetur as an extension for VS Code. I read that it's possible to provided auto-complition and descriptions for my component tags and attributes.
The Vetur Docs say I have to create tags.json and attributes.json files and add them to my package.json. After restarting VS Code it should work. But it doesn't. Has anyone managed to achive this and sees where I'm making a mistake?
Thanks in advance!!
This is the content of my tags.json
{
"mex-btn": {
"description": "My Mex Button",
"attributes": "["content"]
}
}
This is the content of my attributes.json
{
"mex-btn/content": { "description": "Content of the Button"}
}
and this is the vetur key in my package.json
"vetur": {
"tags": "./tags.json",
"attributes": "./attributes.json"
}
Even I set updates.enable=false in app.json, still clients getting updated versions from expo server automatically (without deploying apk/ios to store’s).
I set updates.enable=false in version 1.1.7. Clients with version 1.1.7, 1.1.8 and 1.1.9 got 1.2.0 version automatically without putting new version (1.2.0) into store(s).
I’m using expo build:android and expo build:ios commands for build.
Could anyone can help me about this problem? Is there any way to prevent update on code level?
You can find my app.json content below:
{
“expo”: {
“name”: “XXX”,
“slug”: “XXX”,
“privacy”: “public”,
“sdkVersion”: “31.0.0”,
“platforms”: [
“ios”,
“android”
],
“version”: “1.2.0”,
“orientation”: “portrait”,
“icon”: “./assets/icon.png”,
“splash”: {
“image”: “./assets/icon.png”,
“resizeMode”: “contain”,
“backgroundColor”: “#FFCB09”
},
“notification”: {
“icon”: “./assets/icon96gs.png”,
“color”: “#ffcd00”,
“androidMode”: “collapse”,
“androidCollapsedTitle”: “XXX”
},
“updates”: {
“enabled”:false
},
“assetBundlePatterns”: [
“**/*”
],
“android”:{
“package”:“com.xxx.yyy”,
“permissions” : [“CAMERA”, “LOCATION_HARDWARE”,“ACCESS_COARSE_LOCATION”,“ACCESS_FINE_LOCATION”],
“versionCode”: 17
},
“ios”: {
“bundleIdentifier”: “com.xxx.yyyt”,
“buildNumber” : “17”
},
“scheme” : “xxx”
}
}
you should upload your app in apple store and google play store. only after that updates will be switched off.
Because you created a stand-alone app with Expokit, the commands in the setup do not apply.
You have to set up your own settings in Android Studio and xcode.
"updates"
Configuration for how and when the app should request OTA JavaScript updates
{
"updates": {
/*
If set to false, your standalone app will never download any code.
And will only use code bundled locally on the device.
In that case, all updates to your app must be submitted through Apple review.
Defaults to true.
Note that this will not work out of the box with ExpoKit projects.
*/
"enabled": BOOLEAN,
...
}
ExpoKit: To change the value of enabled, edit ios//Supporting/EXShell.plist and android/app/src/main/java/host/exp/exponent/generated/AppConstants.java. All other properties are set at runtime.
We're using the aurelia-cli. The tasks include these:
build.json
build.ts
process-css.ts
process-markup.ts
process-sass.ts
run.json
run.ts
test.json
test.ts
transpile.ts
How if at all do we do a cache-busting solution the with cli?
What we've tried already is to increment the number of the scripts directory, so that it goes scripts1, scripts2, scriptsN.
0.20.0 Support
It's my lucky day. An aurelia-cli release from 8 hours ago says this:
Features: Support bundle revision numbers
Walkthru
First, install 0.20.0 and create a new app.
npm install aurelia-cli#">=0.20.0" -g
au new my-app
Or, upgrade an existing app.
npm install aurelia-cli#">=0.20.0" --save-dev
Next, open my-app/aurelia-project/aurelia.json.
Set the build.options.rev property to true.
"options": {
"minify": "stage & prod",
"sourcemaps": "dev & stage",
"rev": true
},
Set the output and index properties inside the build.targets
"targets": [
{
"id": "web",
"displayName": "Web",
"output": "scripts",
"index": "index.html"
}
],
The aurelia-cli will look for the index file and replace the reference to scripts\vendor-bundle.js like this:
<script src="scripts\vendor-bundle.js" data-main="aurelia-bootstrapper">
<script src="scripts\vendor-bundle-947c308e28.js" data-main="aurelia-bootstrapper">
Finally, build the app.
au build --env prod
Your bundles will look something like this:
app-bundle-e0c4d46f7d.js
vendor-bundle-dba9184d78.js
Source on GitHub
cli/lib/build/bundler.js
let defaultBuildOptions = {
minify: "stage & prod",
sourcemaps: "dev & stage",
rev: false
};
cli/lib/build/bundler.js
if (buildOptions.rev) {
//Generate a unique hash based off of the bundle contents
this.hash = generateHash(concat.content);
bundleFileName = generateHashedPath(this.config.name, this.hash);
}
My Aurelia app is hosted in an ASP.Net Core MVC page, and I have had good success using the ASP.Net Core asp-append-version tag helper to ensure that browsers load updated JS bundles correctly.
This attribute can be added to script tags, and ASP.Net will automatically append a version # based on the script file's contents. The hash is generated when the application starts, so the application must be restarted in order for ASP.Net to detect any new changes.
The trick in getting this to work with Aurelia lies in also adding the app-bundle.js file as a script tag on the hosting page:
<body aurelia-app="main-public" class="public">
<script src="scripts/vendor-bundle.js"
data-main="aurelia-bootstrapper"
asp-append-version="true"></script>
<script src="scripts/app-bundle.js"
asp-append-version="true"></script>
</body>
The output looks something like this:
<body aurelia-app="main-public" class="public">
<script src="scripts/vendor-bundle.js?v=97hNIHUQnLL3Q44m2FWNV-3NIpgqvgIDIx5sUXUcySQ" data-main="aurelia-bootstrapper"></script>
<script src="scripts/app-bundle.js?v=htYOQIr-GHrpZIDiT2b32LxxPZs10cfUU4YNt9iKLro"></script>
</body>
Disclaimer: I haven't inspected the vendor-bundle.js source code with regard to the loading behavior of app-bundle.js, so I don't know how robust this solution is. I have not encountered any issues with this approach, and it is working well for my scenario; however, please use with caution and test adequately before applying to production code.