Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


These support forums are now closed for new topics and comments.
Please head on over to http://eureka.ucommerce.net/ for support.

  • Arlan 58 posts 184 karma points
    Mar 24, 2015 @ 23:13
    Arlan
    0

    Open Graph Tags

    How/where i can control og tags in ucommerce? 

    for example @

    http://umbraco.ucommerce.net/demo-store/accessories/ties/paul-smith-accessories-classic-blue-with-brown-pink-stripe-silk-woven-tie/c-24/c-74/p-192

    the title is "uCommerce Razor Store"
    i need the title to display the name of the product on the page
    which for that page is "Paul Smith Accessories Classic Blue with Brown & Pink Stripe Silk Woven Tie".

     

    here is what facebook sees

    https://graph.facebook.com/794139700655206

    need to fix that title.

     

     

     

     

     

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Mar 25, 2015 @ 00:55
    Dennis Aaen
    100

    Hi Arlan,

    A way I think you can do it, is by creating a new scripting file in the developer section, in the scripting file folder. You could e.g call it title tag er meta tags. In this file you will add this snippet of code.

    @using UCommerce.EntitiesV2
    @using UCommerce.Extensions
    @using UCommerce.Runtime
    @using umbraco.MacroEngines
    @using UCommerce.Api

    @*
        Model = The current page the macro is executed on
                @Model.bodyText

        Parameter = collection of parameter values passed from the macro
                @Paramter.myParam

        Library = utillity library with common methods
                @Library.NodeById(1233)
    *@



    @* The fun starts here *@
    @{
        var product = SiteContext.Current.CatalogContext.CurrentProduct;
           
        if (Model.NodeTypeAlias  == "uCommerceProduct"){
                @product.DisplayName()
        }else{
            @Model.Name
           }

    }

    What it does, is if the page is using the document type product, then you will set the title tag to the name of the product, if not, then it will take the name of the page. Remember to change the NodeTypeAlias from uCommerceProduct to what your product document type alias is.

    Then on the master template for your shop add this in between the title tag. In my test I call the scripting file for Title

    <title>
        <umbraco:Macro Alias="Title" runat="server" />
    </title>

    Hope this helps, and make sense.

    /Dennis

  • Arlan 58 posts 184 karma points
    Mar 25, 2015 @ 04:45
    Arlan
    0

    Thank you Dennis

    your code worked perfectly, i didnt have to modify anything. 

  • Arlan 58 posts 184 karma points
    Mar 25, 2015 @ 16:44
    Arlan
    0

    Dennis
    any idea how would i create another scripting file to specify the og:image if we are on product page

    so for example for the demo store it will be

    <meta property="og:image" content="http://umbraco.ucommerce.net/media/1096/BKMSFSS.jpg:" />

    so the part in content will be dynamically generated, how would you put this in code?

     

     

    here is example of shopify

    {% if template contains 'product' %}
      <meta property="og:image" content="http:{{ product.featured_image.src | product_img_url: 'grande' }}" />
      <meta property="og:image:secure_url" content="https:{{ product.featured_image.src | product_img_url: 'grande' }}" />
    {% elsif template contains 'article' %}
      {% assign img_tag = '<' | append: 'img' %}
      {% if article.content contains img_tag %}
        {% assign src = article.content | split: 'src="' %}
        {% assign src = src[1] | split: '"' | first | remove: 'https:' | remove: 'http:' %}
        {% if src %}
          <meta property="og:image" content="http:{{ src }}" />
          <meta property="og:image:secure_url" content="https:{{ src }}" />
        {% endif %}
      {% endif %}
    {% else %}
      {% if settings.use_logo %}
        <meta property="og:image" content="http:{{ 'logo.png' | asset_url }}" />
        <meta property="og:image:secure_url" content="https:{{ 'logo.png' | asset_url }}" />
      {% endif %}
    {% endif %}

    https://docs.shopify.com/manual/configuration/store-customization/social-media/facebook/why-do-i-not-see-the-right-image-on-facebook

     

    i just need to show image only if we are on product page

     

     

     

  • Arlan 58 posts 184 karma points
    Mar 25, 2015 @ 16:46
    Arlan
    0

    the current site is on https

  • Arlan 58 posts 184 karma points
    Mar 26, 2015 @ 07:19
    Arlan
    0

     using Dennis code

     

    @{var product = SiteContext.Current.CatalogContext.CurrentProduct;

    if (Model.NodeTypeAlias  == "uCommerceProduct"){

     

            var mediaUrl = Model.MediaById(@product.PrimaryImageMediaId);

    var openGraphImage = "<meta property=\"og:image\" content=\"https://www.domain.com" + mediaUrl.Url + "\" />";

    @Html.Raw(@openGraphImage);

     

        }

    }

Please Sign in or register to post replies

Write your reply to:

Draft