Using Bootstrap 3, and bootstrap-select v1.13.2
I have created a bootstrap-select with live-search turned on. Below is a simple example.
<select class="form-control selectpicker" id="customer" name="customer" data-live-search="true">
<option>Customer Inc</option>
...
<option>Customer LLC</option>
<option>New Customer</option>
</select>
I would like it to display the New Customer option, if no other customers are matched while using the live search.
I found this answer to a similar question, but I can't figure out where to put that code, and I can't comment to ask for clarification (brand new account).
EDIT:
Apparently the above referenced answer is for a completely different (albeit similarly named) plugin. Does anyone know if what I want to do is possible with the plugin I'm already using? It would be a pain to switch it out over many pages.
Related
I want each question that entered by the user to be turned to a link that leads to a page to discuss and comments on this question solely. So, I have a text area that takes user input (a question ) then save it to a localstorge with previous hardcoded data.
The hardcoded data are rendered properly to valid links to dynamic pages. But those from user input are not working. I checked many questions here I did not find a proper answer to this problem. I want the input of user to work as a link . They all stored together and I am looping them together , so I expect them all to be working as links properly. But those from user do not work as expected:
<table v-for="q in questions">
<td>
<tr class="border-dotted border-2 border-light-blue-200">
<nuxt-link :to="`/questions/${q.id}`"> {{ q.question }}</nuxt-link>
</tr>
</td>
</table>
Computed property to read from vuex:
computed: {
questions() {
return this.$store.state.all;
}
}
Any help?
As stated in the comments, if you want to have something looking like StackOverflow, with various created pages and question + answers, you'll need persisted data.
Vue is client only and therefore, if you have a created question, it'll stay on your own machine (other people will not see it).
So yeah, a backend with a database is required here.
If it's a small project, you could even maybe use an online service like Firebase to have a mongo-like quick and simple DB. Or any other cheap/free service. If you want to go more serious, you'll need to make your own backend. :)
So I am trying to build something for my store but a few things are somewhat unclear.
If I need to save some user settings do I need my own backend just
for that app specifically? For simplicity sake, I want build an app
to save and display a custom message in cart-template.liquid.To
achieve that, I think my app should make a request to my backend (let
say, on heroku) and save it in some db that app is using?
How do I retrieve that data in cart-template.liquid? I guess I
build a snippet that calls a public endpoint of my backend that
returns that saved message using fetch() or maybe axios.get and
embed it using {% render 'fetch-custom-message-snippet' %} ?
Say I ask for user input, ie. "Engraved message" and the form is in cart-template.liquid,
of course. The following snippet is used:
<p class="line-item-property__field">
<label for="engraved-message">Engraved message</label>
<input id="engraved-message" type="text" name="properties[Engraved message]">
</p>
How do I make sure that bit of information is captured and passed to me? I guess I want to see it somewhere in the order details.
If I need to save some user settings do I need my own backend just for that app specifically? For simplicity sake, I want build an app to save and display a custom message in cart-template.liquid.To achieve that, I think my app should make a request to my backend (let say, on heroku) and save it in some db that app is using?
Yes, you need your own backend. Your application alone is responsible for storing its own information (there are some exceptions like a special order field which I show you below) - that typically infers a database that back ups your service and holds your data. Please check out this thread as you can find lots of valuable information there.
Regarding cart-template.liquid I'd suggest taking a look at the official "Shopify Developers" documentation. All information you're allowed to display and request are neatly explained and ordered there.
How do I retrieve that data in cart-template.liquid? I guess I build a snippet that calls a public endpoint of my backend that returns that saved message using fetch() or maybe axios.get and embed it using {% render 'fetch-custom-message-snippet' %} ?
Once again there are good guides out there. I suggest taking a look at this blog post which goes into in-depth on this topic. Shopify's documentation about the Liquid template language is also highly advised to be read.
How do you retrieve that data? According to this specific example any input will be supplied to your order page in the Shopify admin. For example:
<label for="CartNote">Special instructions</label>
<textarea name="note" id="CartNote">{{ cart.note }}</textarea>
*taken from https://shopify.github.io/liquid-code-examples/example/cart-notes*; shows a Special instruction label and textarea for users to submit details about the oder - you will get this data on, as mentioned, the order page in the Shopify admin.
Say I ask for user input, ie. "Engraved message" and the form is in
cart-template.liquid, of course. The following snippet is used:
[...] How do I make sure that bit of information is captured and passed to me? I guess I want to see it somewhere in the order details.
see above
//EDIT:
To prevent any confusion: It seems like you want to develop a custom app just for personal usage and not to publish it in the Shopify App Store - in this case you most often than not don't need an external database; e.g. the example you provided with a simple order request which is easily doable through Shopify's examples.
For your specific case this code snippet (I modified your original example to fit the case - it's not a full cart-template.liquid obviously; in this case the file is called cart.liquid):
<label for="engraved-message">Engraved message</label>
<textarea name="message" id="engraved-message">{{ cart.note }}</textarea>
//EDIT 2:
The link - shared by another user in this thread, namely #Simas Butavičius - is actually kind of useful if you have problems with the customization process in general, i.e. if you want to revise some basic concepts or want to check how to implement the code snippet from above in the whole structure of your website I'd advise to skim through this site.
Needless to say, there are hundreds of good tutorials, questions regarding the same "issue" or other resources in general.
I suggest for further reading purposes to check out some of these links and guides (some may be mentioned above):
https://shopify.github.io/liquid-code-examples/example/cart-notes
https://shopify.github.io/liquid-code-examples/example/checkout-form (! very good in-depth example)
https://www.christhefreelancer.com/shopify-liquid-guide/
https://shopify.dev/docs/themes/theme-templates/cart-liquid
https://shopify.dev/docs/themes/liquid/reference
https://www.shopify.com/partners/shopify-cheat-sheet (! helpful cheatsheet)
https://community.shopify.com/c/Shopify-Design/Cart-Use-cart-attributes-to-collect-more-information/td-p/613718
https://community.shopify.com/c/Shopify-APIs-SDKs/Add-custom-input-fields-to-cart/td-p/154710
https://community.shopify.com/c/Shopify-Design/Product-pages-Get-customization-information-for-products/td-p/616503
Here is the tutorial specifically for creating custom shopify input field for getting engraving information: https://community.shopify.com/c/Shopify-Design/Product-pages-Get-customization-information-for-products/td-p/616503
Sorry for being a total rookie.
I am trying to help my professor implement this advice:
Either as a courtesy to Forbes or a favor to yourself, you may want to include the rel="canonical" link element on your cross-posts. To do this, on the content you want to take the backseat in search engines, you add in the head of the page. The URL should be for the content you want to be favored by search engines. Otherwise, search engines see duplicate content, grow confused, and then get upset. You can read more about the canonical tag here: http://www.mattcutts.com/blog/canonical-link-tag/. Have a great day!
The problem is I am having trouble figuring out how to edit the head element on a post-by-post basis. We are currently on a super old blogging platform (Movable Type 3.2 from 2005), so maybe it is not possible. But I'd like to know if that is likely the reason, so I'm not missing out on a workaround.
If anyone could point me in the right direction, I would greatly appreciate it!
Without knowing much about your installation, I'll give a general description, and hopefully it matches what you see and helps.
In Movable Type, each blog has a "Design" section where you can see and edit the templates for the blog. On this page, the templates that are published once are listed under "Index Templates," and the templates published multiple times, once per entry, per category, etc., are listed under "Archive Templates."
There probably is an archive template called "Entry" (could be renamed) publishing to a path like category/sub-category/entry-basename.php. This is the main template that publishes each entry. Click on this to open the template editor.
This template could be an entire HTML document, or it might have "includes" that look like <MTInclude module=""> or <$mt:Include module=""$> (MT supports varying tag styles.).
You may find there is an included module that contains the <head> content, or it might just be right in that template. To "follow" the includes and see those templates, there should be links on the side of the included templates.
Once you find the <head> content, you can add a canonical link tag like this:
<mt:IfArchiveType type="Individual">
<mt:If tag="EntryPermalink">
<link rel="canonical" href="<$mt:EntryPermalink$>" />
</mt:If>
</mt:IfArchiveType>
Depending on your needs, you might want to customize this to output a specific URL structure for other types of content, like category listings. The above will just take care of telling search engines the preferred URL for each entry.
#Charlie: may be I'm missing something, but your solution basically places a canonical link on each entry to… itself, which is a no-no for search engines (the link should point to another page that's considered the canonical one).
#user2359284 you need a way to define the canonical entry for those which need this link. As Shmuel suggested, either reuse an unused field or a custom field plugin. Then you simply add that link in the header in the proper archive template that outputs your notes. In the hypothesis that the Entry template includes the same header as other templates, and, say, you're using the Keywords field to set the URL, then the following code should work (the mt:IfArchiveType test simply ensures it's output in the proper context, which you don't need if your Entry template has its own code for the header):
<mt:IfArchiveType type="Individual">
<link rel="canonical" href="<$mt:EntryKeywords$>" />
</mt:IfArchiveType>
Essentially I have a client who wants to change some links from something like:
Click me
to something like:
<span style="color:blue;cursor:pointer;" id="faux-link">Click me</span>
<script type="text/javascript">
$("#faux-link").click(function() {
document.location = "http://www.google.com/";
});
</script>
Essentially this would make the "Click me" text in the same way minus a few advanced link features (Mouse3 opens link in new tab, right clicking to see "Open in New Window" and other options, etc) also it would obvously not work for anything with Javascript disabled (or if Javascript on the page had any fatal errors)
Are there any SEO downsides to this that anyone has experienced or any kind of comments from Google or others on this type of behavior?
In the first example (Click me) you use stander <a> tag. But even though it uses rel="nofollow" attribute, some web spiders may still follow the link. A bit more on that on Nofollow in Google, Yahoo and MSN article.
In the second example you use different way of building a link (using JavaScript and different than <a> HTML tags like <span>). Googlebot can execute some JavaScript, but I do not believe it would execute large libraries like jQuery.
Please check interview with Matt Cutts for more details. Quotation from that interview:
Matt Cutts: For a while, we were scanning within JavaScript, and we
were looking for links. Google has gotten smarter about JavaScript and
can execute some JavaScript. I wouldn't say that we execute all
JavaScript, so there are some conditions in which we don't execute
JavaScript. Certainly there are some common, well-known JavaScript
things like Google Analytics, which you wouldn't even want to execute
because you wouldn't want to try to generate phantom visits from
Googlebot into your Google Analytics.
As I understand, in both examples, it was intended to stop web spiders from crawling or indexing those links. I think (no evidence or article supporting that) that using the later approach will not affect SEO significantly.
use normal links (if not the sites will not be indexed in google!) and use prevent default (javascript) for links that you will specify. read preventdefault()
The links that you want to provide in the click event are visible in the source of the page, so anybody that wants to view them can do it really easy. So, as you said, some features of legacy link will be disabled, so you can use normal links instead of jQuery.
I am trying to use Authorize.net's SIM payment gateway process and am using the base code provided on the developer site. The problem is I am using Master Pages with my site and the hidden field names are getting concatenated with the nested control IDs as an example:
This is what the field should look like:
<input type="hidden" runat="server" name="x_login" id="x_login" />
The output ends up looking like:
<input name="ctl00$MainContent$x_login" type="hidden" id="ctl00_MainContent_x_login" value="MyCode" />
Normally that would not be a problem except Authorize.net is picky about field names apparently since I keep getting Error 13 invalid user. I went through their forums and opened a customer support ticket a week ago, no response other than the automated check our forums email. The closest thing I found on their forums is other people with Master Pages having the same problem with no answers.
I also used their developer response site to check out the values that I am sending them and they all seem to be correct, including the field names. I am at a loss. I can post the entire subset of code but it is the code from their site pasted into my contentholder.
The other work around I have is since my Masterpage already has a form I added these lines of code:
Me.Form.Action = "https://test.authorize.net/gateway/transact.dll"
'Me.Form.Action = "https://developer.authorize.net/tools/paramdump/index.php" This link will show all of the form elements that are submitted.
Me.Form.Method = "Post"
The above lines seem to work properly as the output code looks correct.
Finding no help anywhere else I thought I would ask the people who have not let me down yet.
Here is the answer. After trying a lot of different paths, it is definitely the MasterPage that frags the post to Authorize.net. I tried re-"name"ing the controls among several other things and for time conisderations I gave up trying to resolve the issue and just reformatted the page to not use my masterpage file. I am also building a silverlight e-commerce solution and I am a little concerned that I will not be able to use authorize.net for the same reason.