Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Themes Preview: document_head.hbs content not being loaded #188

Open
MarkRoodPDQ opened this issue Jun 21, 2023 · 10 comments
Open

Themes Preview: document_head.hbs content not being loaded #188

MarkRoodPDQ opened this issue Jun 21, 2023 · 10 comments

Comments

@MarkRoodPDQ
Copy link

Expectations

jQuery, LotusUtils (LotusThemes) and styles that are declared in document_head.hbs are defined

Reality

Neither jQuery or LotusUtils scripts are initiated in the window

Steps to Reproduce

  1. link additional scripts in document_head.hbs
  2. Run zcli themes:preview {{ThemeDirectory}}
  3. Inspect header tag in browser

Issue details

  • Command: zcli themes:preview {{ThemeDirectory}}
  • Version: @zendesk/zcli/1.0.0-beta.34 win32-x64 node-v18.16.0
  • OS: Windows 11 22H2
@MarkRoodPDQ
Copy link
Author

ZAT:
image

ZCLI:
image

@luis-almeida
Copy link
Contributor

Hi @MarkRoodPDQ,

Thanks for creating this issue!
I was looking into it today and unfortunately, I'm not being able to replicate it:

  1. With the following js files within the assets folder:
assets/bootstrap-bundle-min.js
assets/jquery.js
  1. And referencing them in the document_head.hbs template this way:
<script src="{{asset 'jquery.js'}}"></script>
<script src="{{asset 'bootstrap-bundle-min.js'}}"></script>
  1. I get the expected output:
<script src="http://localhost:4567/guide/assets/jquery.js"></script>
<script src="http://localhost:4567/guide/assets/bootstrap-bundle-min.js"></script>

Screenshot:
Screenshot

Can you share how you're referencing some these assets in the document_head.hbs template?

I'll also ask you to retry after running a zcli logout and logging in again zcli login -i. And to clear all caches, closing preview and logging out and back in to your Zendesk account 🙏🏼

@MarkRoodPDQ
Copy link
Author

@luis-almeida, oh don't get my hopes up with clearing the cache doing the trick. I should be able to test/verify shortly. Thanks for helping us along the way with this!

@MarkRoodPDQ
Copy link
Author

Rats, no luck. Attached is a snippet of our document_head.hbs + an inspection of our header when running the env from ZCLI. Lemme know if I can provide anything else to help.
image

@luis-almeida
Copy link
Contributor

Hi @MarkRoodPDQ,
Thanks for the screenshots and for your patience!
I'm continuing to look into this issue and still having troubles reproducing it. I'm using a mac though so this might be a related with the OS. We'll update the issue once we learn more.

@gshade
Copy link

gshade commented Jun 28, 2023

Running into the same issue with an (almost) identical version / environment.

Version: @zendesk/zcli/1.0.0-beta.34 win32-x64 node-v18.16.0
OS: Windows 11 Pro 22H2

Some additional observations:

  • There some junk (including "undefined") showing up at the top of <body> for me (see screenshot). It's possible this is a me problem, but I wasn't seeing this previously when using Zendesk App Tools so possibly related?

image

  • Changes to other template files (eg. home_page.hbs) trigger "Uploading theme... Ok" via zcli (which live reloads the preview), but the changes aren't reflected on the Zendesk end at all.

Happy to help debug - would much prefer to use zcli for theme development over needing to setup zat again 🙈

@MarkRoodPDQ
Copy link
Author

Small update: was able to use one of our macOS lab devices and was able run the preview like normal from ZCLI. Seems to be Windows OS specific.

@jhuan-montoya
Copy link

jhuan-montoya commented Sep 29, 2023 •
edited

Same error here, lotus-util and Jquery files don't load.

"undefined" appears to me too
image

Any fix?

Versão : @zendesk/zcli/1.0.0-beta.38 win32-x64 node-v20.5.0
SO : Windows 11 Pro 22H2

@sebastienwarin
Copy link
Contributor

Hi there,

I had exactly the same problem as @jhuan-montoya and @MarkRoodPDQ and I was unable to use theme preview feature.

The problem is that we are using Windows and the getTemplates function from the zcli-theme package doesn't handle the Windows path format.

I fixed the code here and created the PR #219

To save your time and fix the problem without waiting for this update, edit directly the file C:\Users\xxxxxx\AppData\Roaming\npm\node_modules\@zendesk\zcli\node_modules\@zendesk\zcli-themes\dist\lib\getTemplates.js with the code:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const glob_1 = require("glob");
const fs = require("fs");
function getTemplates(themePath) {
    const templates = {};
    const filenames = (0, glob_1.globSync)(`${themePath}/templates/**/*.hbs`.replace(/\\/g, '/'));
    filenames.forEach((template) => {
        const identifier = template.replace(/\\/g, '/').split('templates/')[1].split('.hbs')[0];
        const source = fs.readFileSync(template, 'utf8');
        templates[identifier] = source;
    });
    return templates;
}
exports.default = getTemplates;

Enjoy!

@luis-almeida luis-almeida mentioned this issue Jan 23, 2024
Merged
1 task
@luis-almeida
Copy link
Contributor

Apologies for the long delay addressing this issue!
We just released v1.0.0-beta.40 that should fix it and we were finally able to test it properly on a windows machine.

Please let us know if you run into any other errors.
Thanks @sebastienwarin for your contribution here!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@luis-almeida @gshade @sebastienwarin @jhuan-montoya @MarkRoodPDQ