I started to learn how to develop my own theme for Prestashop.
I set a shop on my local server with my theme inside the themes folder. When I change the CSS, I can immediately see the changes in my shop. But it seems that when I change the structure (changing .tpl files), I need to reload the theme in the back office.
This is really not a convenient process, how do you organize your work during development?
Go to Advanced Parameters -> Performance and enable "Recompile templates if the files have been updated". Disable cache on the same page. You can also set _PS_MODE_DEV_ to true in your config/defines.inc.php:
define('_PS_MODE_DEV_', true)
Related
Is there a reason I need to install stencil CLI framework and supporting javascript etc... rather than just download a theme and edit it with notepad, then re-upload it?
Is seems that this has been made overly complicated
The advantage of using the Stencil CLI is that you can test your work locally, so you can be sure you haven't broken anything. If you just want to make a small edit, then rather than downloading and uploading, try editing files within the Control Panel. Go to Storefront->My Themes->Customize, and then at the bottom, click Edit Theme Files. This way you can make a small edit and have the ability to do a preview (so again, you test your work before changing your live store).
I was wondering what the best way was to deploy shopify themes locally for testing before deploying. We recently started employing deploybot. We really like deploybot but we also would like a way to not wait five minutes to test our files in an alternate store.
How would I accomplish this?
It's tough to preview themes locally. Check out Themekit if you want a quick way to sync local theme files with a development shop: https://shopify.github.io/themekit/
Here's how to setup a local working environment:
https://www.shopify.com.au/partners/blog/95401862-3-simple-steps-for-setting-up-a-local-shopify-theme-development-environment
Install themekit:
curl -s https://shopify.github.io/themekit/scripts/install.py | sudo python
https://shopify.github.io/themekit/
Setup API credentials by creating a private app in your Shopify admin.
Apps > Create private app
Get your theme id.
visit name.myshopify.com/admin/themes.json to get a list of themes and ids
Create a config.yml file and populate it with the credentials. It should look somewhat like this:
development:
password: 16ef663594568325d64408ebcdeef528
theme_id: "123"
store: can-i-buy-a-feeling.myshopify.com
proxy: http://localhost:3000
ignore_files:
- "*.gif"
- "*.jpg"
- config/settings_data.json
Have themekit listen for any local changes and upload them to Shopify.
theme watch
However the store is still online. Because the Shopify framework is hosted on Shopify there is no localhost solution.
For anyone coming to this in 2018, we now have use of Slate.
https://shopify.github.io/slate/
For an idea of workflow, we have multiple devs working on the same theme and they can see their changes locally with Slate.
How we achieve this
We have a dev store that is a direct clone of our production store.
Each dev creates another theme on the dev store and branches off master locally. They then will ONLY use the theme id of the theme they just created to work with (updated in their config.yml)
Slate will watch changes and deploy to their preview theme and refresh their browser locally too.
Once the dev is happy with their changes, we merge back into master and deploy to the live (master) theme on our dev store.
Once it passes all the tests on our dev store, we push to a production store using slate.
EDIT - For creating new section files, template files, product templates etc
You won't be able to create these files and for them to be displayed locally without a small workaround.
For example, if you create a new product template ("product.my-product.liquid"), you'll need to Publish your preview theme first, then perform a "slate start" in terminal, select your new product template for whatever product you're using it on in Shopify, then re-publish your "master" theme.
You may need to do another "slate start" to get the new theme template displaying on the product locally, but it will work.
This is because Shopify only allows you to assign product templates to the current active theme.
You have a test shop. You are working on a theme. If you are doing it right, any changes you make to the theme, are automatically transferred to the test shop. So all you need to do is watch your browser, since you probably also have a watcher on that auto-reloading on changes.
Have been doing this for years, and I never wait 5 minutes for a deploy, as it takes mere seconds to deploy a change and see the results. Throw in some smart Git hooks and you've even got version control.
I'm new on Odoo v10. I'm using the debug mode with URL. But on the settings menu there is links to activate developer mode. I want to ask,
What is the difference between "Activate the developer mode" and "Activate developer mode ( with asset)"?
Debug mode (most of the time used by Administrator)
With this mode you can unable some advance features/options in odoo. so if you open odoo with debug mode you will see some extra menus, extra fields to more advance configuration.
Debug with assets mode (most of the time used by developers)
It enables all features from normal debug plus some extra. Odoo internally use assets bundles to improve performance which internal merge+minifies all static assets like css and JavaScript. So debug with assets will use actual css and javascript files instead of minifying/merging css and js files. This mode will reduce performance but it will give you proper error message in console if you are doing some JavaScript changes in odoo
Debug with assets mode (tests assets)
According to this, starting from Odoo 13 (also available in Odoo 14), we have a new debug mode. This mode is mostly for developers & testers.
You can use this chrome plugin to quick switch between all those modes.
I'm going to work on a Shopify theme, and I want to figure out how to run/edit it locally. I'd like to be able to the following, if possible:
Pull all the Shopify theme code from the site to my local computer (ideally a single command line tool)
Make edits locally, and run them locally or in a staging environment
Push all the edits to the main Shopify site, again using a command line tool
Is this at all possible?
There are quite a few workflows you can use here.
1. Task runners
If you're using either Gulp or Grunt locally for development, there are libraries out there that will upload your files to the store through API credentials of a Private App that you have to create. Most work by uploading the files you change, using a watcher.
grunt-shopify
grunt-shopify-upload
gulp-shopify-upload (it's my favourite since I use Gulp but has a known issue that sometimes it stops uploading files and you have to restart it).
2. Official Shopify Theme Kit
Theme Kit is a cross-platform CLI tool that was built by Shopify Employees. It can run on windows/linux/OS X. You can read more about it on Shopify Blog or download it directly. The alternative previously mentioned of Desktop Theme Editor is deprecated and has been replaced by Theme Kit.
3. Third-party SaaS Applications
Instead of watching for changes, these will work with a continuos integration workflow, where your latest push on a certain branch gets uploaded to the theme you've selected.
Beanstalk. More specific information can be found on their landing page for Shopify, here.
DeployBot. Their help article on Shopify has some information on how to get started.
Both options are from the same company. Here's a comparison of both they've did on their blog.
4. Third-party libraries
There's also an alternative not officially supported by Shopify which is a TextMate Bundle in case you use that OSX editor.
There's an unofficial extended cli similar to theme kit but with further functionality called Quickshot, which I've just found out based on Matt's response and seems pretty awesome. Some of the features they highlight are:
Supports uploading to multiple Shopify stores and themes
Easy to use configuration wizard
Uploads/downloads in parallel greatly reducing transfer times
Supports autocompiling scss locally before uploading to Shopify
Supports autocompiling Babel/ES6 into modules which are easily used by - Requirejs and others
Can use with .gitignore files or a custom .quickshotignore file.
Can download/upload Shopify Blogs, Pages and Products! Easily transfer them between stores! Even the metafields! And edit them locally in your favorite editor.
Shopify recently released Slate, a new tool for theme development.
https://github.com/Shopify/slate
As of 2020, Shopify has stopped support Slate so you can now use Themekit - https://shopify.github.io/themekit/
2022 update
Currently it is not possible to run Shopify locally. There are only solutions, mentioned in other answers to edit files locally and upload it to Shopify. It makes the development hard.
I am working on a solution to emulate Shopify locally making development similar to WordPress, React or Angular. So you will see changes immediately, even without reloading the page and without the need to upload files to Shopify each time.
You can read more here: https://link.medium.com/6SGd1kcVdnb
Juan's answer is spot on.
There's one more I know of which I believe is a little more advanced than Themekit (which I use) called Quickshot: https://quickshot.readme.io/v2.1/docs
Shopify have built a tool for Mac that allows you to develop your theme locally, and sync with your store https://apps.shopify.com/desktop-theme-editor
I don't know of anything for windows/Linux etc.
If you're looking for completely offline development, it's unfortunately not possible at this time. While the Slate/ThemeKit CLIs lets you code in your favorite text editor, an internet connection is still required because it likes to keep everything in sync at all times.
Install the state package by running the following commands:
npm install -g #shopify/slate
slate theme theme-name
I've been working with IBM Worklight for the last month and I discovered that even if I imported the Dojo toolkit when I created my hybrid app, I can't see dijit components in my palette, and some dojo/dojox components cause errors.
Here is my config :
Windows XP
Eclipse SDK Version: 3.7.2
IBM Worklight 5.0.5
Dojo version 1.8.1-20121024
Therefore I got errors when launching my app :
Failed to load resource: the server responded with a status of 404 (Not Found)
URL/ipad/1.0/default/dojox/dgauges/components/green/HorizontalLinearGauge.js
(I wanted to display a slider and only found this gauge)
But I do have the dojo folder in my project (with dijit/dojo/dojox folders inside).
Anyone knows how to fix this ?
Cheers
I have used the Worklight Studio 5.0.5.1 wizard to create a project and application that includes Dojo and added the iPad environment.
Next, looking at the Dojo Palette, I see a slider widget. I drag it to my HTML:
Run As > Build All and Deploy and previewing the environment in the MBS shows the slider:
I do not have Xcode on this machine so this is the best I can do right now.
Are you sure you do not see a slider widget?
If you were looking for the dijit form Horizontal Slider, you can right click in the palette's contents and click Customize... In the Customize Palette dialog, select the Dojo Form Widgets category, and uncheck Hide. When you expand Dojo Form Widgets, you can select Horizontal Slider and uncheck Hide. Click OK, and these items should show up in the palette.
But for a slider on a mobile page, Idan's suggestion of using a Dojo Mobile Slider is probably better than the dijit slider.
To improve build performance, applications with Dojo dictate which files to include in the build using the build-dojo.xml file. By default, it is optimized for mobile development. If you'd like to include the HorizontalSlider, the easiest way is to uncomment <include name="dojo/dijit-layer.js.compressed.js"/>, but leave the <include> elements after that commented out. That will give you a patternset of "dojo/dojo.js.compressed.js", "dojo/core-web-layer.js.compressed.js", and "dojo/dijit-layer.js.compressed.js".
If you've used the Palette to drag and drop the HorizontalSlider, it should have added references to dijit.css and claro.css in the application's markup. So these resources will need to be added to your application to style the widget. You could do this manually by copying the dijit/themes/claro/ directory and dijit/themes/dijit.css file into your application. But as we saw, the build-dojo.xml file automates adding these things to the build. In your build-dojo.xml file, find the patternset dojo.resources.loose-modules. And add the following includes:
<include name="dijit/themes/claro/**"/>
<include name="dijit/themes/dijit.css"/>
Save the build-dojo.xml file.
Now you need to update your application's JS file. In wlCommonInit, the layer files are required. There is an array the includes what you would need for mobile development. You will need to add another layer to the array: "dojo/dijit-layer". So it should look something like:
require([ "dojo/core-web-layer", "dojo/mobile-ui-layer", "dojo/mobile-compat-layer", "dojo/dijit-layer" ], dojoInit);
Save your application's JS file and preview your application as you normally would. This should fix the 404 problems and render the HorizontalSlider widget.