Announcement

Collapse
No announcement yet.

Need a Javascript variable to populate into an HTML string

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • jcocking
    replied
    Formatting issues: I showed the schema.org from a stock template. My template looks like this:

    HTML Code:
                <div class="price2" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
              <link itemprop="availability" href="http://schema.org/InStock" content="[availability_itemprop]" />
              <span style="display:none;" itemprop="priceCurrency">USD</span>
              <!--START: price2-->
              <span class="price-tax">[product_retailprice] &nbsp;[price2]</span><br />
              <!--START: SAVINGS-->
              <span class="price-tax">[product_savings] &nbsp;[savings]</span><br />
              <!--END: SAVINGS--> 
              <!--END: price2-->
              <div class="price1">[product_yourprice] &nbsp; 
              <!--START: ITEMPRICE-->
              <span itemprop="price">[price]</span>
              <!--END: ITEMPRICE--> 
              <!--START: SALEPRICE--> 
              <span class="price-old">[price]</span> 
              <span itemprop="price" id="price" class="price">[saleprice]</span>
              <!--END: SALEPRICE-->
              </div> 
            </div>
    You will notice, I use <span> tags. This way it does not mess up the formatting of the page.

    divs in Open Graph Meta Tags: I do not know if they will work.

    jeff

    Leave a comment:

  • edcroteau
    replied
    Thanks for that.

    I had trouble getting it to work ... even with formatting issues that I didn't like I still wasn't able to get Pinterest to validate.

    I'll keep looking at it ...

    Can you use the schema.org stuff in the SEO tools (under Marketing) down in the Open Graph section ? It looks to me like the product needs to be in a div but can that div go in the OG section of SEO Tools ?

    Leave a comment:

  • jcocking
    replied
    I am using a combination of og: and schema.org models to be validated by Pinterest.

    I have the following in the SocialCommerce => Like Button => Advanced:
    HTML Code:
    <meta property="og:title" content="[TITLE]"/> 
<meta property="og:description" content="[description]"/> 
<meta property="og:type" content="product"/> 
<meta property="og:url" content="[product_url]"/>
<meta property="og:site_name" content="[store_name]"/> 
<meta property="og:price:currency" content="USD"/> 
<meta property="og:image" content="[product_image]"/>
    I then run the schema.org values for pricing in the listing_0.html template:

    HTML Code:
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
  <link itemprop="availability" href="http://schema.org/InStock" content="[availability_itemprop]" />
  <span itemprop="priceCurrency">USD</span>
  <!--START: ITEMPRICE-->
     <div itemprop="price">[price]</div>
  <!--END: ITEMPRICE--> 
  <!--START: SALEPRICE--> 
    <s>[price]</s><br />
    <div itemprop="price">[saleprice]</div>
  <!--END: SALEPRICE--> 
</div>
    Schema.org's model allows a "$" to exist in the price field. The two together are receiving a positive validation. Additionally, this allows your sale price or the regular price to be displayed.

    jeff

    Leave a comment:

  • edcroteau
    replied
    Interesting ... when I use Show Page Source it doesn't appear in the <head> just in my script but when I used the Javascript console then I could see it ...

    So yes, you were right and it worked. Thanks.

    Now the question is why is Pinterest not validating ... ?

    I can check in with them to see if the other default meta price with the $ sign is messing it up ...

    Leave a comment:

  • jleclair
    replied
    i assure you the one we are inserting with the code is there. the append() function inserts at the end of the element.. scroll down in your head I assure you it's there. It's the third element from the bottom. translate.googleapis.com is inserting a script tag and then something is dropping some inline styles after it.

    I don't know how the pinterest module initializes, and if we need to have the meta tag there before the dom completes or what, but our problem is not the lack of the meta tag at this point.

    Leave a comment:

  • edcroteau
    replied
    jleclair - you're so nice to help me with this.

    1. I don't see the meta tag - do you see the one with the $ sign that is already there by default with 3dcart or do you see this one with NO currency $ sign ?
    <meta property="og:price:amount'" content="99.95"> note the difference is also in the property og:price:amount vs. og:price

    2. The Pinterest pin validator at that URL is causing an error on the price variable as expected because it contains the currency sign - this is crazy as 3dcart won't help me with this at all and no one with 3dcart can use this feature of Pinterest called Rich Pins ...

    Leave a comment:

  • jleclair
    replied
    I'm unfamiliar with how that pinterest thing works, but the meta tag is there in the head on your test page.

    I see 4 required fields here on the developer page. Perhaps the lack of these other fields is more of the issue now?

    https://developers.pinterest.com/rich_pins/

    Leave a comment:

  • edcroteau
    replied
    Again, thanks so much.

    I put the exact code block in frame.html between </body> and </html> but the meta tag string does not appear to be appended to the <head> section nor anywhere else but inside the code block itself. I'm clearing the cache, reloading the page and looking at the page source. Using Cloudflare so I put the site in Development Mode and cleared the cache.

    I tried a product page on the Rich Pin Validator and it is still failing on the lack of "og:price:amount" which makes sense since I can't see it in the source code of the page anyway.
    Validator URL : https://developers.pinterest.com/rich_pins/validator/
    Sample product page URL : DR519 Cotton/Velvet Dress by Jedzebel

    I noticed that other jQuery calls that 3dcart themselves make are just listed as code blocks as well. Do I need to do something to "execute" that function in a browser ?

    Sorry for being such a newbie but I don't really understand how the 3dcart preprocessors do things nor how ASP really works. If this was PHP it would be much easier I think.

    Any other ideas about getting the jQuery function to execute ?

    Thanks so much, Ed

    Leave a comment:

  • jleclair
    replied
    sorry i wasnt around much yesterday afternoon.

    HTML Code:
    <script type="text/javascript">
var priceNoCurrency = "[price]";
priceNoCurrency = priceNoCurrency.substring(1);
metaString = '<meta property="og:price:amount" content="' + priceNoCurrency + '">';
jQuery(function(){
   jQuery('head').append(metaString);
});
</script>
    Put this at the bottom of your page before the closing html tag.

    Leave a comment:

  • edcroteau
    replied
    Thanks so much for the quick reply.

    Unfortunately I still need to ask more questions :

    1. Do I need to enclose your code within <script> </script> ? I suspect yes.

    2. Where would I put the code ? I tried in <head> and <body> with and without the <script> tags ...

    Here's my current entry in <head> - doesn't validate with Pinterest so it's probably not working :

    Code:
    <script type="text/javascript">
var priceNoCurrency = "[price]";
priceNoCurrency = priceNoCurrency.substring(1);
metaString = '<meta property="og:price:amount" content="' + priceNoCurrency + '">';
</script>
<script type="text/javascript">
document.write(metaString);
</script>
    Thanks,

    Ed
    Last edited by edcroteau; 12-06-2013, 06:30 PM.

    Leave a comment:

  • jleclair
    replied
    document.write will send to the html as you said.

    you're looking for something like jQuery.append();

    (since jQuery is included in 3dcart stores anyway)

    HTML Code:
    jQuery('head').append('<meta property="go:price:amount" content=" ' + priceNoCurrency + ' ">');
    is more what you are looking for. Fire that whenever you were doing your document.write
    Last edited by jleclair; 12-06-2013, 03:05 PM.

    Leave a comment:

  • edcroteau
    started a topic Need a Javascript variable to populate into an HTML string

    Need a Javascript variable to populate into an HTML string

    I need to pass a modified 3dcart variable [price] to a meta tag declaration.

    3dcart has the following open graph meta tag automatically (from SEO tools page)
    <meta property="og:price" content="[price]">

    This results in the following HTML in the browser page source for a $99.95 example :
    <meta property="og:price" content="$99.95">

    For Pinterest Rich Pins we need to strip the currency symbol $ from the tag as in this :
    <meta property="go:price:amount" content="99.95">

    The following Javascript code appears to strip the symbol when used outside of 3dcart (tested in JS fiddle) :
    var priceNoCurrency = "[price]";
    priceNoCurrency = priceNoCurrency.substring(1);

    Here's my question as I don't know JS nor HTML really ...

    How can I get an additional meta tag declaration in the HEAD of the frame.html template to produce the needed Rich Pin open graph meta declaration above ?

    I tried to use document.write(); but it just passes the source code right into the HTML at the browser, it must need to be called or something and thought someone on this forum might know the quick solution to what I'm missing.

    Thanks so much in advance (and for others wanting to use Pinterest Rich Pins - I'll post the final solution clearly once working).

    Ed
    Tags: None
Previous template Next
Working...
X