Announcement

Collapse
No announcement yet.

Correct structured markup to use for products with attributes

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Correct structured markup to use for products with attributes

    Hi
    Wrestling with getting this microdata in place on product pages. We've got the elusive green check with the code in the bottom of this post in the PROD template area, but it only picks up the last item in the product dropdown. Had anyone implemented this microdata successfully where it gets the attributes also?

    We tried putting it in the Attribute Template area in various places as it looped through attributes/options, but must be missing correct placement, as we got dinged when checking our markup, or no product info shows up.

    I did find something about adding Models - I am assuming we would need to iterate through each attribute/option to get the info, but I couldn't figure out how to get it to do what I need it to do. Has anyone done this successfully for products with different sizes/pricing? Google is not my friend today!

    OUR CODE
    Code:
    <!-- Start: Google Rich Snippets -->
        <div itemscope itemtype="http://schema.org/Product">
            <meta itemprop="name" content="&mvte:product:name;" />
            <meta itemprop="image" content="&mvt:global:socialImage;" />
            <meta itemprop="category" content="&mvte:category:name;" />
            <meta itemprop="description" content="&mvte:product:descrip;" />
            <mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:brand">
                <meta itemprop="brand" content="&mvte:product:customfield_values:customfields:brand;" />
            </mvt:if>
            <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
             <meta itemprop="size" content="&mvte:option:prompt" />
             <meta itemprop="options" content="&mvt:attribute:raw_prompt;"/>
                 <meta itemprop="price" content="&mvt:option:price;" />
                <mvt:if expr="NOT ISNULL l.settings:product:sku">
                    <meta itemprop="sku" content="&mvte:product:sku;" />
                <mvt:else>
                    <meta itemprop="sku" content="&mvte:product:code;" />
                </mvt:if>
                <meta itemprop="priceCurrency" content="USD" />
                <meta itemprop="seller" content="&mvte:global:store:name;" />
                <meta itemprop="itemCondition" content="new" />
                <mvt:if expr="l.settings:product:inv_active">
                    <meta itemprop="availability" content="&mvte:product:inv_short;" />
                    <meta itemprop="inventoryLevel" content="&mvte:product:inv_available;" />
                </mvt:if>
            </div>
        </div>
        <!-- End: Google Rich Snippets -->
    :


    The ProductModel add:
    Code:
       
     <div class="modelslist" >    <div class="model" itemscope itemtype="http://schema.org/ProductModel">      <h2 itemprop="name">Model A</h2>      <span itemscope itemtype="http://schema.org/Offer">          <meta itemprop="price" content="£123" />          <span itemscope itemtype="http://schema.org/PriceSpecification">              <span itemprop="price">£123</span>              <meta itemprop="priceCurrency" content="GBP" />              <meta itemprop="valueAddedTaxIncluded" content="false" />          </span>      </span>      <span itemscope itemtype="http://schema.org/PropertyValue">           <meta itemprop="name" content="readability" />           <span itemprop="value">325</span>      </span>                                                                            </div>    <div class="model" itemscope itemtype="http://schema.org/ProductModel">      <h2 itemprop="name">Model B</h2>      <span itemscope itemtype="http://schema.org/Offer">          <meta itemprop="price" content="£456" />          <span itemscope itemtype="http://schema.org/PriceSpecification">              <span itemprop="price">£456</span>              <meta itemprop="priceCurrency" content="GBP" />              <meta itemprop="valueAddedTaxIncluded" content="false" />          </span>      </span>      <span itemscope itemtype="http://schema.org/PropertyValue">           <meta itemprop="name" content="readability" />           <span itemprop="value">325</span>      </span>      </div>  </div>

    #2
    We do this by running the attribute/option data containers within the Attribute template, storing them as a variable. Then, at the end of the Product listing, using that variable to output the containers in the correct place on the Product Display template.
    Bruce Golub
    Phosphor Media - "Your Success is our Business"

    Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
    phosphormedia.com

    Comment


      #3
      Would you be willing to share how you do that? I've tried a bunch of ways, but nothing seems to be working for me. I must be missing something simple somewhere.

      Comment


        #4
        Oh...ah...can you remind me tomorrow? I have to remember a site we did that on...
        Bruce Golub
        Phosphor Media - "Your Success is our Business"

        Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
        phosphormedia.com

        Comment


          #5
          That would be awesome!!!!! I will be for sure saving this snippet somewhere handy.

          Comment


            #6
            Since every site is layed out differently, and has/uses different data sets, it'd be hard to make a 'cut and paste' repository. One could probably get 99% by building a JSON based add on module, since ALL the data would be in the JSON array...but that would take a pretty decent effort to build...and few people buy modules these days.
            Bruce Golub
            Phosphor Media - "Your Success is our Business"

            Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
            phosphormedia.com

            Comment


              #7
              Would it help if I posted the Attribute code? It looks pretty standard to me.

              <mvt:foreach iterator="attribute" array="attributes">
              <mvt:assign name="l.settings:attributeID" value="'l-' $ tolower(l.settings:attribute:code)" />
              <input type="hidden" name="Product_Attributes[&mvte:attribute:index;]:code" value="&mvte:attribute:code;" data-attribute-type="&mvte:attribute:type;" />
              <mvt:if expr="l.settings:attribute:template_code NE 0">
              <input type="hidden" name="Product_Attributes[&mvte:attribute:index;]:template_code" value="&mvte:attribute:template_code;" />
              </mvt:if>
              <mvt:if expr="l.settings:attribute:type EQ 'text'">
              <div class="form-row">
              <mvt:if expr="l.settings:attribute:required">
              <label for="&mvt:attributeID;" title="&mvte:attribute:prompt;" class="medium">&mvte:attribute:prompt;</label>
              <mvt:else>
              <label for="&mvt:attributeID;" title="&mvte:attribute:prompt;">&mvte:attribute:pr ompt;</label>
              </mvt:if>
              <input type="text" name="Product_Attributes[&mvte:attribute:index;]:value" value="&mvte:attribute:value;" id="&mvt:attributeID;" class="input-medium" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="" />
              </div>
              <mvt:elseif expr="l.settings:attribute:type EQ 'memo'">
              <div class="form-row">
              <mvt:if expr="l.settings:attribute:required">
              <label for="&mvt:attributeID;" title="&mvte:attribute:prompt;" class="medium">&mvte:attribute:prompt;</label>
              <mvt:else>
              <label for="&mvt:attributeID;" title="&mvte:attribute:prompt;">&mvte:attribute:pr ompt;</label>
              </mvt:if>
              <textarea name="Product_Attributes[&mvt:attribute:index;]:value" id="&mvt:attributeID;" class="input-medium" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="">&mvte:attribute:value;</textarea>
              </div>
              <mvt:elseif expr="l.settings:attribute:type EQ 'radio'">
              <div class="form-row">
              <mvt:if expr="l.settings:attribute:required">
              <legend for="&mvt:attributeID;" title="&mvte:attribute:prompt;" class="nm required">&mvte:attribute:prompt;</legend>
              <mvt:else>
              <legend for="&mvt:attributeID;" title="&mvte:attribute:prompt;" class="nm normal">&mvte:attribute:prompt;</legend>
              </mvt:if>
              <mvt:foreach iterator="option" array="attribute:options">
              <mvt:assign name="l.settings:optionID" value="'l-' $ tolower(l.settings:option:code)" />
              <label for="&mvt:optionID;" title="&mvt:option:prompt;" class="show">
              <mvt:if expr="((g.Product_Attributes[l.settings:attribute:index]:value EQ 0) AND (l.settings:option:id EQ l.settings:attribute:default_id)) OR (g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code)">
              <input type="radio" name="Product_Attributes[&mvte:attribute:index;]:value" value="&mvte:option:code;" id="&mvt:optionID;" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:option:price;" data-regular-price="" checked />
              <mvt:else>
              <input type="radio" name="Product_Attributes[&mvte:attribute:index;]:value" value="&mvte:option:code;" id="&mvt:optionID;" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:option:price;" data-regular-price="" />
              </mvt:if>
              <mvt:if expr="l.settings:option:image">
              <img src="&mvte:option:image;" alt="&mvte:option:prompt;" title="&mvte:option:prompt;" />
              <mvt:else>
              &mvte:option:prompt;
              <mvt:if expr="l.settings:option:price">
              <mvt:if expr="l.settings:option:price GT 0">
              &nbsp;<mvt:eval expr="'+ $' $ rnd(l.settings:option:price, 2)" />
              <mvt:else>
              &nbsp;<mvt:eval expr="'- $' $ rnd(l.settings:option:price, 2)" />
              </mvt:if>
              </mvt:if>
              </mvt:if>
              </label>
              </mvt:foreach>
              </div>
              <mvt:elseif expr="l.settings:attribute:type EQ 'select'">
              <div class="form-row">
              <select name="Product_Attributes[&mvt:attribute:index;]:value" id="&mvt:attributeID;" class="input-medium" data-attribute="&mvte:attribute:code;">
              <option value="">&mvt:attribute:raw_prompt;</option>
              <mvt:foreach iterator="option" array="attribute:options">
              <mvt:if expr="((g.Product_Attributes[l.settings:attribute:index]:value EQ 0) AND (l.settings:option:id EQ l.settings:attribute:default_id)) OR (g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code)">
              <option value="&mvte:option:code;" data-option-price="&mvt:option:price;" data-regular-price="" selected>
              &mvte:option:prompt;
              <mvt:if expr="l.settings:option:price">
              <mvt:if expr="l.settings:option:price GT 0">
              &nbsp;<mvt:eval expr="' +$' $ rnd(l.settings:option:price, 2)" />
              <mvt:else>
              &nbsp;<mvt:eval expr="' -$' $ rnd(l.settings:option:price, 2)" />
              </mvt:if>
              </mvt:if>
              </option>
              <mvt:else>
              <option value="&mvte:option:code;" data-option-price="&mvt:option:price;" data-regular-price="">
              &mvte:option:prompt;
              <mvt:if expr="l.settings:option:price">
              <mvt:if expr="l.settings:option:price GT 0">
              &nbsp;<mvt:eval expr="' +$' $ rnd(l.settings:option:price, 2)" />
              <mvt:else>
              &nbsp;<mvt:eval expr="' -$' $ rnd(l.settings:option:price, 2)" />
              </mvt:if>
              </mvt:if>
              </option>
              </mvt:if>
              </mvt:foreach>

              </select>
              </div>
              <mvt:elseif expr="l.settings:attribute:type EQ 'swatch-select'">
              <mvt:assign name="g.hasSwatches" value="'1'" />
              <mvt:assign name="g.swatch_prompt" value="l.settings:attribute:prompt" />
              <div class="form-row all-hidden">
              <mvt:if expr="l.settings:attribute:required">
              <label for="js-swatch-select" title="&mvt:attribute:prompt;" class="medium">&mvt:attribute:prompt;</label>
              <mvt:else>
              <label for="js-swatch-select" title="&mvt:attribute:prompt;">&mvt:attribute:prom pt;</label>
              </mvt:if>
              <select name="Product_Attributes[&mvt:attribute:index;]:value" id="js-swatch-select" class="input-medium" data-attribute="&mvte:attribute:code;">
              <mvt:foreach iterator="option" array="attribute:options">
              <mvt:if expr="((g.Product_Attributes[l.settings:attribute:index]:value EQ 0) AND (l.settings:option:id EQ l.settings:attribute:default_id)) OR (g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code)">
              <option value="&mvte:option:code;" data-option-price="&mvt:option:price;" data-regular-price="" selected>
              &mvte:option:prompt;
              <mvt:if expr="l.settings:option:price">
              <mvt:if expr="l.settings:option:price GT 0">
              &nbsp;<mvt:eval expr="' +$' $ rnd(l.settings:option:price, 2)" />
              <mvt:else>
              &nbsp;<mvt:eval expr="' -$' $ rnd(l.settings:option:price, 2)" />
              </mvt:if>
              </mvt:if>
              </option>
              <mvt:else>
              <option value="&mvte:option:code;" data-option-price="&mvt:option:price;" data-regular-price="">
              &mvte:option:prompt;
              <mvt:if expr="l.settings:option:price">
              <mvt:if expr="l.settings:option:price GT 0">
              &nbsp;<mvt:eval expr="' +$' $ rnd(l.settings:option:price, 2)" />
              <mvt:else>
              &nbsp;<mvt:eval expr="' -$' $ rnd(l.settings:option:price, 2)" />
              </mvt:if>
              </mvt:if>
              </option>
              </mvt:if>
              </mvt:foreach>
              </select>
              </div>
              <mvt:elseif expr="l.settings:attribute:type EQ 'checkbox'">
              <div class="form-row">
              <mvt:if expr="l.settings:attribute:required">
              <label for="&mvt:attributeID;" title="&mvte:attribute:prompt;" class="medium">
              <mvt:if expr="g.Product_Attributes[l.settings:attribute:index]:value">
              <input type="checkbox" name="Product_Attributes[&mvte:attribute:index;]:value" value="Yes" id="&mvt:attributeID;" checked="checked" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="" />
              <mvt:else>
              <input type="checkbox" name="Product_Attributes[&mvte:attribute:index;]:value" id="&mvt:attributeID;" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="" />
              </mvt:if>
              <mvt:if expr="l.settings:attribute:image">
              <img src="&mvte:attribute:image;" alt="&mvte:attribute:prompt;" title="&mvte:attribute:prompt;" />
              <mvt:else>
              &mvte:attribute:prompt;
              <mvt:if expr="l.settings:attribute:price">
              <mvt:if expr="l.settings:attribute:price GT 0">
              &nbsp;<mvt:eval expr="' +$' $ rnd(l.settings:attribute:price, 2)" />
              <mvt:else>
              &nbsp;<mvt:eval expr="' -$' $ rnd(l.settings:attribute:price, 2)" />
              </mvt:if>
              </mvt:if>
              </mvt:if>
              </label>
              <mvt:else>
              <label for="&mvt:attributeID;" title="&mvte:attribute:prompt;">
              <mvt:if expr="g.Product_Attributes[l.settings:attribute:index]:value">
              <input type="checkbox" name="Product_Attributes[&mvte:attribute:index;]:value" value="Yes" id="&mvt:attributeID;" checked="checked" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="" />
              <mvt:else>
              <input type="checkbox" name="Product_Attributes[&mvte:attribute:index;]:value" id="&mvt:attributeID;" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="" />
              </mvt:if>
              <mvt:if expr="l.settings:attribute:image">
              <img src="&mvte:attribute:image;" alt="&mvte:attribute:prompt;" title="&mvte:attribute:prompt;" />
              <mvt:else>
              &mvte:attribute:prompt;
              <mvt:if expr="l.settings:attribute:price">
              <mvt:if expr="l.settings:attribute:price GT 0">
              &nbsp;<mvt:eval expr="' +$' $ rnd(l.settings:attribute:price, 2)" />
              <mvt:else>
              &nbsp;<mvt:eval expr="' -$' $ rnd(l.settings:attribute:price, 2)" />
              </mvt:if>
              </mvt:if>
              </mvt:if>
              </label>
              </mvt:if>
              </div>
              </mvt:if>
              </mvt:foreach>
              <input type="hidden" name="Product_Attribute_Count" value="<mvt:eval expr="miva_array_elements(l.settings:attributes)" />" id="js-product-attribute-count" />
              <mvt:if expr="l.settings:subscription:term_count">
              <mvt:if expr="NOT l.settings:subscription:mandatory">
              <input type="radio" name="otps[]" id="l-otp" class="hide-subs" value="1" checked="checked" />
              <input type="radio" name="otps[]" id="l-subscribe" class="hide-subs" value="1" />
              <label for="l-otp" class="purchase-form_otps-otp uppercase align-center">One Time Purchase</label>
              <label for="l-subscribe" class="purchase-form_otps-s uppercase align-center">Subscribe</label>
              <div class="form-row" id="js-subscription">
              <mvt:else>
              <div class="form-row">
              <label for="l-Product_Subscription_Term_ID" title="&mvte:attribute:prompt;" class="medium">Subscribe</label>
              </mvt:if>
              <select name="Product_Subscription_Term_ID" id="l-Product_Subscription_Term_ID" class="input-medium">
              <mvt:if expr="NOT l.settings:subscription:mandatory">
              <option value="0">Select Subscription</option>
              </mvt:if>

              <mvt:foreach iterator="term" array="subscription:terms">
              <option value="&mvte:term:id;">&mvte:term:descrip;</option>
              </mvt:foreach>
              </select>
              </div>
              </mvt:if>

              Comment

              Working...
              X