How do you input/store URLs in custom theme settings in Bigcommerce? - bigcommerce

I'm working on making a custom theme and it appears that text settings defined in the schema.json have a max input length of 65 characters. I don't see any documentation to that effect, but whenever I enter more than 65 characters into a text field setting, I get an error while previewing/saving. I assume this is intentional behavior.
I'm trying to make settings where the input is a URL and URLs are often longer than 65 characters. I can conceive of a number of janky workaround for this problem, but I was hoping to find out if there is some officially supported solution for URL based theme settings, or if I just have to go my own way for now by mis-using lang strings, breaking URLs into multiple settings, or hard-code URLs into HTML templates.

You aren't missing anything here. There is no "url" schema option. The "text" schema option is limited to 64 characters (whether this is intentional or not, I'm not sure).
However, URL's should not typically be longer than 65 characters (if they are relative URL's). You should be able to accomplish all functionality you need with the relative URL (without the domain), no?
Another alternative is to rely on the pages or categories loop that is available on all pages of the store. You could make a setting (id = category_name) with the field label "Link to this category", then they could enter "Shirts", then your code could be:
{{#each categories}}
{{#if name '===' ../theme_settings.category_name}}
Link
{{/if}}
{{/each}}
This assumes they are entering a top-level category. Anyway, hope this clears some things up for you!

Related

Custom shipping method admin form issues

I've created a custom shipping integration (based on this guide) that calculates the shipping price based on a percentage of the subtotal. This percentage is set in the shipping method settings.
Everything works fine on the frontend part, the shipping price is calculated correctly.
The problems I have lies in the admin backoffice, in the shipping method settings page. The first problem that I have is that the text box to set the percentage is preceded by the currency, which will confuse the user as it is expecting not a flat rate price, but a percentage of the order's subtotal.
I have the same problem on the list of added shipping methods, the value I set is preceded by the currency, and this is not good.
There is a "add a template" section in the guide which I followed, but the template doesn't seem to affect anything. I tried putting bogus letters in the template and clearing the cache, but they did not appear anywhere on the settings page.
What I would like to do here is either remove the currency indicator completely, or to replace it with a %.
The second problem I have is that the language isn't taken into account. I have created a messages.en.yml file and a messages.fr.yml file. Both follow the same structure of course, and all strings are translated. But if I set OroCommerce in French, I don't get my translated strings, but the english ones.
Here's a screenshot that shows both my problems :
(Strings like "Price percentage" should be translated)
Do you have an idea on how I could fix these issues? Thanks.
Currency is added in shipping-rule-method-view.js. You can override this JS view with the map section in jsmodules.yml configuration file.
Based on Andrey's answer, I managed to have something that works. I'll add a few more details for anyone that had the same issue.
For the issue with the translation, it seems that renaming the file by adding the locale messages.fr_FR.yml fixed the issue.
Concerning the currency part on the admin menu, you have to create a jsmodules.yml file in the Resources/config folder of your bundle, NOT Resources/config/oro, which is why none of my configs were taken into account.
When writing your jsmodules file, when using map, if you're overriding a JS file, you have to omit the file extension. When you're overriding something else, say an HTML file, you have to put the file extension.
This is how my file is written :
map:
"*":
oroshipping/js/app/views/shipping-rule-method-view: gdmshipping/js/shipping-rule-method-view
There is one caveat, though. This will replace the display for all shipping integrations, so the currency symbol will be replaced/removed for all other shipping types, such as Flat Rate, so keep this in mind.

Improve loading speed withouth loosing search ranking

I have a webpage whit many areas whose visibility can get toggled by the user.
The default visibility state for those area is hidden (css, display: none).
I don't have control to what's going to be put inside, but it could be a lot of images.
I saw with firefox's network observer all images where loaded with the page. This is quite a waste of bandwidth since the user might choose not to display every areas.
I came to a workarround, I put all that content inside a <script type="late-rendering"></script> and to avoid any potential conflict (eg: "" inside the content), I replace all "<" with "8691jQfdtxm" (randomly picked string). Then when the user want to make an area visible, I just fill the area with that content after replacing 8691jQfdtxm with "<".
It works fine, but I think proceeding like this will make crawlers (eg: Google) think my webpage is pure garbage. How could I avoid that?
Unless search engines were heavily relying on the alt tags of your images, or their filenames, there is little risk you will loose search rankings. If your site does load more quickly instead, it will provide a better user experience, which will be probably detected by Google, and this influences rankings positively.
Google executes a lot of Javascript these days. And your trick of breaking the html with a random string seems hokey to me.
I would preload all the textual content ( e.g. have it all in there on first load, with the div closed via display:none ). This content will not count as much as visible content - but it does count.
Then I'd do a delayed loading of the images. Like with make all your images something like:
<img src="blank.jpg" loadlater="realimage.jpg">
blank.jpg can be a tiny image. when the div opens you can use javascript/jquery to rewrite each src with loadlater.

WebKit losing parameters in URLs with skip links

We have some generated pages whose URLs contain parameters, like http://example.com/page.do?param1=hello. These pages contain named anchors inside, <a name="here">like this</a>. And there are corresponding links that reference the named anchors, like this. Most folks today call these "skip links".
Clicking a skip link should result in the browser creating and following a URL that matches the original one, with the named anchor tacked on at the end: http://example.com/page.do?param1=hello#here
On Firefox and IE, this works fine. On Chrome, Safari and other WebKit-based browsers, the parameters are lost, leading to http://example.com/page.do?#here which is invalid for our site, and just causes a 404 error.
Interestingly, if you manually put the full link in the location bar and press Enter, it behaves properly.
I've googled around a while and seen a lot of discussion about WebKit having problems with skip links, but none of them match the situation here where it's losing parameters.
Is this loss of parameters a known bug? Has anyone seen a workaround?
I encountered the same issue. From what I can say this is related to the usage of a meta tag like this: <base href="http://example.com" />. Once it is set my links point to example.com#foo instead of example.com?foo=bar#foo.
Knowing that I found this question. So the anchor tag behavior is a known thing:
Is it recommended to use the <base> html tag?
Since I can't remove the base tag I'll try to handle this with JavaScript.

Javascript served tooltips - bad for Google / SEO?

I have a client who wants a feature on his site that he has seen on a competitors. It is essentially a group of icons where, when you mouseover them, an extended tooltip appears with content, links, etc...
The tooltips are not hidden divs. The tooltip content appears nowhere in the source code of the page itself. I believe the text of the tooltips is being called from an external file (e.g. an XML file or some such thing) via javascript.
My question(s) are this:
a) since the tooltip content isn't actually on the page, does it even affect SEO efforts at all?
b) would Google consider this spam (or at best questionable)?
Many thanks!
a) since the tooltip content isn't actually on the page, does it even
affect SEO efforts at all?
It wont affect SEO efforts in the slightest
b) would Google consider this spam (or at best questionable)?
No.
I should also point out from an accesibility point of view this is pretty bad practice as well.
a) No, all content loaded from external scripts won't be considered relevant for SEO. So it's just like you don't have extra content.
If your text is in display: none or visibility: hidden , it will affect SEO but make sure that user have access to the content.
b) No because you just want to give extra information and it won't be used by Google. Google takes content as spam when it is hidden and user doesn't have access.

SEO: Can dynamically generated links be crawled?

I have a page containing <div> tags with onclick="" code that calls an ajax request to get json data, and then iterates through the results to form links (<a />) to append to the page. These links do not exist in any other place on my website. How can I make these dynamically generated links crawlable?
My initial thought was to turn the <div> tags into <a> tags with a href="#", but with my limited knowledge of how typical crawlers work, i don't think this would solve my problem since the "#" would be what's recognized by the crawler, and not necessarily the dynamically generated output. This is besides the point that i don't want the scroll positioning to be altered at all, which would also rule out giving the <a> tag an id and having it reference itself.
Do I have any options aside from making a new page containing all of the links i need to be crawled? Thanks.
As a general rule, content that is created or made available through JavaScript cannot be found or indexed by search engines. Google does support crawlable Ajax but using it as the only means of accessing your content is bad for accessibility. Also, other search engines can't get to that content which is also not a good thing. Basically crawable ajax is a bad thing.
You should always make your content available without requiring JavaScript to get it. Then you can improve your site by adding JavaScript to make getting the content faster or easier. This is called Progressive Enhancement and is how good websites are built.