I am very new to Strapi and I have bigcommerce theme where I should implement content from Strapi.
How can I import content from Strapi to my bigcommerce theme?
In my bigcommerce theme I have config.json where I have these fields :
> - I doubt that this is not correctly set, because I dont see other way to connect strapi with my bigcommerce theme.
>
> "settings": {
> "strapi_base_url": "what should I put here?(is it url with my cms admin strapi url?)",
> "integration_server_base_url": "And same question, what is integration_server_base_url, where I can find it?",
> "google_captcha_key": "/",
> "bc_app_client_id": "/",
> "google_site_verification": "/",
> ...
> }
In short I need to populate a theme with content from Strapi.
Thanks on your time, and every advice would be nice! 🙂
Big thanks for your answer! My problem was that i couldn't get/display the strap content in the bigcommerce theme which i setup locally. I managed to start a project/bigcommerce theme locally with all the content from strapi. I used stencil init and finally get job done! Reason for not getting Strapi content locally in my BC theme was name of folder and path was not appropriate. I had in the name of the folder "+ ( ) -) and that was a reason :D. I spent a couple of days, now is all ok! :) Big thanks again for help! :) – Dejan just now Edit Delete
To accomplish this, I believe you’ll have to integrate Strapi to the BigCommerce theme - likely using the Scripts API and this Strapi doc: https://strapi.io/documentation/developer-docs/latest/content-api/integrations.html
Depending on what you’re wanting to import into BC, the method could be different.
For example, with importing products to your BC store, you can do a mass import with BC with an external csv file. So if you can export that data into this format the import process is lined out for you here:
Video on Importing Products
Import/Export Overview
However, that example is with a store rather than a theme. Importing to a theme may be a little more complex.
If I may ask -- what all types of content are you trying to export from Strapi?
I’m looking into their docs to see what is possible, as well as reaching out to my team to look for some additional help. :)
Related
First of all, thank you for your help.
I'm currently writting a blog in vue.js with vuejs-cli and I'm stuck on a problem about the architecture of my blog.
What I want to do:
I want my vue.js app to fetch an article (which is a whole webpage with .html,.js,.css and pictures) in the subfolder of the "Articles" folder and then display it in a vue in two ways:
like a preview (an image from the article and the article's title)
by diplaying the full article
So I want the file tree to look like this:
Root
|
|-dist of my blog
|
|-Articles
|-Article1
| |-index.html
| |-style.css
| |-script.js
| |-img
| |-img1.png
| |-img2.png
|
|-Article2
|...
I don't want to rebuild my app (for exemple, modifying by hand the router) each time i add a new article. Because I won't be able to do it when I'll feed this blog.
I don't want to use a cms or markdown
What I tried:
building an api with nodejs as a backend of my blog to get an article, but it seems really difficult to transmit pictures. Also, I'm really not sure if it's a good idea to go on this way. (at this moment, i'm able to get the title/description and the body of an article with ajax and my app in nodejs but not the pictures, the style and the script)
Do you have any idea or tips about how to achieve this ?
(I don't want a code, I'm searching a way to accomplish this)
Once again, thank you for your precious help ! :)
EDIT:
I didn't try it
May be it is a good solution to add my article in the public folder of vue-cli and fetch them in a vue with HTML ifram and program a backend to give link to these articles thanks to a database.
Three question for this solution:
Can I load/modify articles in the public folder after build ?
Will the public folder be cleaned after build ?
Is fetching image/js from the html page in the public folder the same as for a "normal" website ?
I finally made it works !
This is how I did it:
I put my Article folder in the public folder of vue-cli
Created a nodejs programme to make/update a database of all articles in the article folder every 10 minutes, sorting them by date of creation (I will make a cron job with cron later)
Made this nodejs programm to answer to some GET query:
when I want a preview, the programm send a "preview" of the article (it takes the title, the description and the first image of the html file of the article and send it in a html format)
when I want a url, the programm send the link of the html page inside the public folder (see how to do it here)
So on my vuejs app, the view fetch a preview to the nodejs backend with the fetch api and show it. Then, when the user click on the preview, my vue show a ifram of the webpage's article at the specified url fetched.
Tips: Be aware that npm build will erase the Article's folder if it's only present in the dist folder. To avoid it, change the script of package.json to add the --no-clean argument to the build command
I don't know if it's a good and efficient way of doing it, but it works well and it's very easely customisable. So for the moment, I'll do it like that way :)
I'm editing BigCommerce's cornerstone theme template with stencil and want to view and make changes to the admin interface. Much like what's happening in this video tutorial https://www.youtube.com/watch?v=mdhSLKpTOBY&list=PLwTYtMwfzbe7EZiIWPAmPtuwRHkY7BG-0&index=9
But I'm not sure how to access the theme editor locally. I saw that the --theme-editor commands were removed from the stencil cli. It says that we should look at this documentation instead https://developer.bigcommerce.com/stencil-docs/configure-store-design-ui/store-design-overview but that doesn't show how the theme editor could be accessed from a local environment. Is this possible?
Is the only option to upload the theme and edit it from there? Has the ability to use a theme editor locally been removed?
As far as natively supported features, the Stencil CLI deprecated support for live theme editing due to it no longer matching the experience found on the platform. You can find these details on a related GitHub issue reported here: https://github.com/bigcommerce/stencil-cli/issues/601
Until this feature is reintroduced, you'll need to bundle the theme and apply it to a store to review the theme editor.
I don't think you can access the Theme Editor from a local environment directly.
If you want to add configurable options, you would be editing schema.json and adding new sections there. In that way, you can add entirely new Text Inputs, Checkboxes, Dropdowns, that would allow store administrators to edit those entries.
The values that are being changed are located in config.json -- those are all the theme_settings that you can access inside of Handlebars, and they can also be injected into JavaScript via context.
So essentially you want to create new entries in config.json, and create new mappings in schema.json to allow those entries to be edited in the Theme Previewer. You should be able to put together how to make new sections by trying to parse the existing fields in the schema file, and I think BC has additional docs here:
General Overview:
https://developer.bigcommerce.com/stencil-docs/configure-store-design-ui/defining-ui-options
Adding a new "Text Input" option in schema.json - API reference - you can navigate around that opened section in the sidebar to see all available schema types:
https://developer.bigcommerce.com/stencil-docs/page-builder/schema-settings/input
I am new to working with a CMS-platform and building an ecommerce website so please bear with me if my questions aren't spot on..
While I understand the concept behind a CMS-platform, I am trying to understand how I can build a custom website using the Liquid Theme Engine and VC. I have the platform and storefront both up and running locally (the electronics example store), and have even played around with extending a model and generating the new API endpoints for it(adding a wishlist type to the shopping cart) - this part is cool, I understand this is how the data is accessed.
However Liquid is new to me and I have a little understanding of how Angular works but not in a platform framework like VC, and Google searches are diluted with Shopify documentation which doesn't help me understand how a Liquid Theme fits into VC. If I spend the time to understand Liquid more, is my end goal to build a website theme in Liquid, and then reference that in the platform as the websites theme?
Are there any resources out there, besides what is listed on the VC website that could help connect the dots for me? (I think I've tried all the documents on the VC site and there are a lot of missing gaps)
Thanks
What the questions exactly you have? We have a large readme file for default theme. Also, here is a link to our docs about theme development. This topics describe theme structure, bundling & minification, localization and liquid language reference. Here is also a little explanation how theme work:
In Storefront, you have Controllers, which return View
ASP.NET view is template in Shopify terms. So LiquidThemeEngine try find this view in templates folder
Template may include snippets from snippets folder
Template have layout (usually header, body & footer) from layout folder (theme.liquid is default layout)
Templates and snippets may include angular components & controllers from assets/js folder and other static files (like images required by theme design) in root of assets or subfolder.
I create new project react native, then i installed #shoutem/ui , #shoutem/theme, #shoutem/animation to my project via nom install...!
But i have problem when try to find some way better to modify global theme shoutem.
I found theme.js inside folder node_module/shoutem/ui like picture below here!
So best way to modify all them of app is modify this theme.js file?
when i try to modify 1 content like View, Image follow tutorial at here:
https://github.com/shoutem/theme
my navigation bar got error like this picture:
So can u guys help me, suggest me best way to modify global theme default of shoutem?
Do modify theme.js or using something else?
And one more thing! When i try to builder app via https://builder.shoutem.com/ then pull-app using terminal!
I got project! But don't see anything code inside, only extension and so much info! Do not know what is true code when builder complete!
here is picture project when pull-app done!
And here is index file:
So how can i learn form that if only sort info inside index.js file :(
The file you should edit is in:
extensions/ExtensionName/app/theme/ThemeName.js
Where "ExtensionName" refers to the extension that has Screens which you are using in your app.
You should go through the Shoutem documentation on how to write a Theme.
It will show you:
how to create that file (ThemeName.js, your custom Theme)
how you can customize it
how you can use the Builder to manage details about it in Styles>Themes>Customize Theme
how you can add more details for the Builder to manage
When you initially create a Theme as the aforementioned documentation explains, it'll be a copy of the default Shoutem theme, so you'll have a fully functioning Theme right out the box, which you can edit to suit your wants and needs.
You can also check out the Shoutem documentation about the UI Toolkit to find out more info about Shoutem Components (including NavigationBar), Themes and Animations.
The reason I'm linking all this documentation is because the documentation covers all of the issues displayed here in a way that's much more detailed than I could provide in an answer here and the misconceptions and misunderstandings of the questioner can be resolved by self-education.
Edit as response to comment:
You have to use:
$ npm install --save #shoutem/theme
Inside your project directory.
You can follow read this documentation about Themes to better understand how to apply Theme styles to your own components.
If you want to edit specific components globally, you have to edit that component in:
node_modules/#shoutem/ui/components
Editing a file there will edit every iteration of the component throughout the app.
I've enabled stencil themes for my store, and am trying to use "Cornerstone" as my theme. However, the whole reason for opting in and trying out new stencil themes is their built in support for multiple languages. I need my store to at least be available in Swedish, and if possible, English as well.
I've followed the documentation adding a "sv.json" file to the langs folder, and uploaded the modified theme to my store and applied it. No changes. I've ensured my browser is setting the "Accept-Language" header to "sv".
https://stencil.bigcommerce.com/docs/the-schema
I've also tried modifying the default en.json file, but I still can't see any changes in my store...and that seems a bit strange to me?
What am I missing, is this feature not really implemented yet, or am I screwing something up with the "upload zipped theme to store admin and apply"?
https://support.bigcommerce.com/articles/Public/Custom-Theme-Upload
Any pointers are very appreciated!