Suivant Readytheme Product Title PROD Template Page

[howsimple]

Hi,
Can anyone tell me why my default PROD template for the Suivant Readytheme has two title variables? I removed one of them (first one below) but wanted to make sure if it was OK to remove. One shows that it is hidden. Not sure why it is necessary in the first place?

<div class="column whole medium-all-hidden">
<h1 class="normal nm">&mvte:product:name;</h1>




<div class="column whole">
<h1 class="normal nm">&mvte:product:name;</h1>


Thanks,
KD

[rajnishsi]

Re: Suivant Readytheme Product Title PROD Template Page

That class, "medium-all-hidden" is there for the support of various screen sizes (responsiveness). It dictates that the content inside should not be visible for screens wider than 768 px. The second appearance of name comes inside class "medium-show" along with class "hide" which gets only visible for screens larger than 768px by overriding the hiding feature of hide class on that screens.

This approach ensures that on screen sizes larger than 768px, product name appears right next to image, and on smaller screen sizes, it appears above the product image. So, after removal of that, if you go below 768px screens, you'll not be able to see your product title on that page (assuming you have not modified other CSS classes).

[howsimple]

Re: Suivant Readytheme Product Title PROD Template Page

Hi rajnishsi,

The reason I removed it because I got two title names on my iphone after I relocated one of the title above the main image. How do I keep both codes, so only one of them show on my cell?

Below is my code. Can you fix it so it will only show one title.


<div class="row bg-white bottom-shadow product-information">
<div class="column whole medium-all-hidden">

<h1 class="normal nm">&mvte:product:name;</h1>
<div class="breaker"></div>
<mvt:if expr="l.settings:product:price GT 0">
<div id="js-mobile-price-value" class="h3 charcoal nm" data-base-price="&mvt:product:price;">&mvt:product:formatted _price;</div>
<mvt:else>
<div id="js-mobile-price-value" class="all-hidden" data-base-price="&mvt:product:price;"></div>
</mvt:if>
<mvt:if expr="l.settings:product:base_price GT l.settings:product:price">
<p>Normally: <s id="js-additional-price">&mvt:product:formatted_base_price;</s></p>
</mvt:if>
<div id="js-product-discounts"></div>
</div>


<div class="column whole medium-half product-information--images">







<div align="left">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td><h1 class="normal nm" align="left">&mvte:product:name;</h1>

<br>
<mvt:item name="productreviews" PARAM="stars" />

<mvt:if expr="g.ReviewStars">Rating:
</mvt:if>


<mvt:if expr="g.Total_Reviews">
&mvt:productrating:stars; (<a target="_blank" href="&mvt:global:sessionurl;Screen=REVIEWS&Produc t_Code=&mvt:global:product_code;&Store_Code=&mvt:g lobal:Store_Code;">&mvt:global:Total_Reviews; Reviews</a>)


</mvt:if>
</td>

</tr>
</table>
</div>


<span data-icon="&#x54;" id="js-main-image-zoom" class="main-image" data-index="0"><img src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;" title="&mvte:product:name;" id="js-main-image" data-image="&mvt:product:customfield_values:productimag ecustomfields:main;" /></span>
<div class="row thumbnail-wrapper">
<div id="js-thumbnails" class="column whole large-four-fifths np thumbnails"></div>
</div>
<mvt:item name="product_display_imagemachine" param="body:product:id" />



</div>
<!-- end product-information--images -->
<div class="column whole medium-half product-information--purchase">
<div id="js-processing-purchase" class="processing-purchase"><img src="../images/img_ajax_processing.gif" alt="Processing..." title="Processing..." /></div>
<div id="js-purchase-message" class="message message-warning purchase-message"></div>
<div class="row hide medium-show">
<div class="column whole">


<mvt:item name="readytheme" param="banner( 'social_media' )" />


<div class="breaker"></div>
<mvt:if expr="l.settings:product:price GT 0">


<div id="js-price-value" class="red nm" data-base-price="&mvt:product:price;">Special Offer:
<font size="5">&mvt:product:formatted_price;</font></div>
<div id="cost-value" class="charcoal nm" data-base-price="&mvt:product:cost;"><strike>Regular Price: &mvt:product:formatted_cost;</strike></div>


<mvt:else>
<div id="js-price-value" class="all-hidden" data-base-price="&mvt:product:price;"></div>
</mvt:if>
<mvt:if expr="l.settings:product:base_price GT l.settings:product:price">
<p>Normally: <s id="js-additional-price">&mvt:product:formatted_base_price;</s>
<mvt:else>
<br />
</mvt:if>
<div id="js-product-discounts"></div>
</div>
</div>
<form method="post" action="&mvte:global:sessionurl;Screen=BASK" id="js-purchase-product" class="inline-labeling">
<input type="hidden" name="Old_Screen" value="&mvte:global:Screen;" />
<input type="hidden" name="Old_Search" value="&mvte:global:Search;" />
<input type="hidden" name="Action" value="ADPR" />
<input type="hidden" name="Store_Code" value="&mvte:store:code;" />
<input type="hidden" name="Product_Code" value="&mvte:product:code;" />
<input type="hidden" name="Category_Code" value="&mvte:global:category_code;" />
<input type="hidden" name="Offset" value="&mvte:global:Offset;" />
<input type="hidden" name="AllOffset" value="&mvte:global:AllOffset;" />
<input type="hidden" name="CatListingOffset" value="&mvte:global:CatListingOffset;" />
<input type="hidden" name="RelatedOffset" value="&mvte:global:RelatedOffset;" />
<input type="hidden" name="SearchOffset" value="&mvte:global:SearchOffset;" />
<div class="row">
<mvt:if expr="l.settings:product:inv_active OR l.settings:attributemachine:product:inv_active">
<div id="js-inventory-message" class="column whole">
&mvt:product:inv_long;
</div>
</mvt:if>
<div id="js-product-attributes" class="column whole product-attributes">
<table border=0 cellspacing=0 cellpadding=2>
<mvt:item name="ads-attrmaster" param="product:id" />
</table>
</div>
<mvt:if expr="g.hasSwatches">
<div class="column whole product-swatches">
<label class="medium">Color</label>
<span id="js-swatch-name" class="bold swatch-name">&nbsp;</span>
<hr noshade />
<div id="js-swatches"></div>
</div>
</mvt:if>
</div>
<div class="row corners add-to-cart-wrap bg-silver">
<div class="column whole small-half medium-whole large-two-fifths x-large-three-tenths">
<div class="row quantity-wrap align-center">
<div class="column whole np">
<span id="js-decrease-quantity" class="bg-gray decrease-quantity" unselectable="on" data-rt-icon="&#x67;"></span>
<input type="tel" name="Quantity" value="1" id="l-quantity" class="align-center" />


<span id="js-increase-quantity" class="bg-gray increase-quantity" unselectable="on" data-rt-icon="&#x69;"></span>

</div>
</div>
</div>
<div class="column whole small-half medium-whole large-three-fifths x-large-seven-tenths">
<div class="breaker small-all-hidden medium-all-shown large-all-hidden"></div>
<input type="submit" value="Add to Cart" id="js-add-to-cart" class="button button-block button-square uppercase add-to-cart bg-yellow bold" /> </div>
</div>



<div class="row">
<div class="column whole social-sharing"><mvt:item name="readytheme" param="thirdpartysharing" /></div>
</div>
<div class="breaker"></div>
<div class="column whole np product-information--description">






<div align="center">
<table id="table1" cellSpacing="0" width="100%" border="0" bgcolor="#FFFFFF" cellpadding="4">
<tr>
<td width="335">



<img src="/mm5/qrcode/bcgenerator.php?code=http://www.hansonellis.com/&mvt:product:code;.html"/></td>
<td width="335" align="center">



<font color="#999999">

<input type="image" name="registry" src="/mm5/images/addtowishlist.jpg" value="Add To Wish List" border="0"></td>
<td width="335" align="center">



<font color="#999999">


<SCRIPT language="JavaScript1.2">
function openwindow1()
{
window.open("/mm5/merchant.mvc?Store_Code=hansonellis&Product_Code=& mvta:global:Product_Code;&Old_Screen=&mvta:global: screen;&Screen=TELL",
"mywindow","location=1,status=1,scrollbars=1,width =500,height=850");
}


</SCRIPT>
<A href="javascript: openwindow1()"><img border="0" src=/mm5/images/emailafriend.jpg></A>




</td>
<td width="335" align="center">



<SCRIPT language="JavaScript1.2">
function openwindow2()
{
window.open("/mm5/merchant.mvc?Screen=rmnd",
"mywindow","location=1,status=1,scrollbars=1,width =600,height=750");
}


</SCRIPT>
<A href="javascript: openwindow2()"><img border="0" src=/mm5/images/reminder.jpg></A>



</td>
<td width="336" align="center">

<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=300&amp;pubid=hansonellis"><img src="/mm5/images/bookmark.jpg" alt="Bookmark and Share" style="border:0"/></a></td>
</tr>
</table> </form> </div>













</div>
<!-- end product-information--description -->
</div>


















<!-- Start Description -->




<div class="column whole">


<mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields :preorder">
<b>&mvt:customfield_names:customfields:preorder; : </b>
<font color="#FF0000">&mvt:product:customfield_values:cu stomfields:preorder;</font><br> <br>
</mvt:if>





<mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields :specialorder">
<b>&mvt:customfield_names:customfields:specialorde r;: </b>
<font color="#FF0000">&mvt:product:customfield_values:cu stomfields:specialorder;</font><br> <br>
</mvt:if>






<mvt:item name="readytheme" param="contentsection( 'PROD_Description' )" />
&mvt:product:descrip;




<mvt:item name="readytheme" param="contentsection( 'PROD_Description_Notice' )" />


<br>



<mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields :suppliers">
Item# &mvt:product:customfield_values:customfields:suppl iers;
</mvt:if>






</div>
<!-- End Description -->




<mvt:item name="productreviews" param="template" />














<div class="column whole medium-half align-center">


<mvt:item name="readytheme" param="contentsection( 'footsteps' )" />

</div>








<div class="column whole medium-half align-center">

<mvt:item name="readytheme" param="contentsection( 'alsobought' )" />

</div>












<!-- Start related Products Insert-->
<div class="breaker clear"></div>
<mvt:if expr="l.settings:related_product_count NE 0">
<mvt:item name="related_products" />
</mvt:if>
</div>
<!-- End related Products Insert-->



Thanks,
Keith

[rajnishsi]

Re: Suivant Readytheme Product Title PROD Template Page

Hi,

This part of your code isn't gonna play nice with the responsive framework used with readythemes :

<div align="left">
    <table border="0" width="100%" cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <h1 class="normal nm" align="left">&mvte:product:name;</h1>
                <br>
                <mvt:item name="productreviews" PARAM="stars" />
                <mvt:if expr="g.ReviewStars">Rating:</mvt:if>
                <mvt:if expr="g.Total_Reviews">
                     &mvt:productrating:stars; (<a target="_blank"  href="&mvt:global:sessionurl;Screen=REVIEWS&Produc  t_Code=&mvt:global:product_code;&Store_Code=&mvt:g  lobal:Store_Code;">&mvt:global:Total_Reviews; Reviews</a>)
                </mvt:if>
            </td>
        </tr>
    </table>
</div>

I suggest removing tables(!) and converting it to a DIV based layout. Although, exact solution isn't possible without the link to where this page resides for browsers.

[howsimple]

Re: Suivant Readytheme Product Title PROD Template Page

The reason I put the table is because it was centering my title. Putting the table in, it centers the table instead. And in the table, I was able to left align my title. Do you have a suggestion I can use to remove the table, and force the lift alignment?

[rajnishsi]

Re: Suivant Readytheme Product Title PROD Template Page

yeah, I can suggest solution for that, but I'll need the link to see it in action(link to your product page where this issue is happening). In a default Iron and Wool theme store, I have my product titles left aligned(style inherited from body). So, there must be some class conflicting with that, you can try to remove.

[howsimple]

Re: Suivant Readytheme Product Title PROD Template Page

I took care of the left alignment. Removed the table as you suggested. However when you minimize the browser, you will see the product title will show twice. I created a product test page so you can see.

https://www.hansonellis.com/silver-metal-starfish-dip-cup-spreader.html

[howsimple]

Re: Suivant Readytheme Product Title PROD Template Page

Rajnish, Did you get the info.on my development site?

[Matt Zimmermann]

Re: Suivant Readytheme Product Title PROD Template Page

Hi KD,

In response to your initial question as to why there are two H1 tags, Rajnish is correct in the need for the responsive layout. Unfortunately, having two H1 tags can cause an issue with SEO. In the forthcoming update for the Suivant ReadyTheme, we have addressed the issue by using the new variables available in the "clientdimensions" function. There will still be two titles, however only one will be presented depending on the device dimensions.

[howsimple]

Re: Suivant Readytheme Product Title PROD Template Page

Hi Matt,
I don't know what is "clientdimensions". Please explain and how do I apply?

Thanks,
KD

[Matt Zimmermann]

Re: Suivant Readytheme Product Title PROD Template Page

Hi KD,

The "clientdimensions" is a new component included in the 9.4 update. It brings an element of adaptive web design to Miva Merchant. Once we release the updated ReadyTheme, there will be a list of the changes made so you can see what you can do to update your store.

Clientdimensions is not active by default, to make it part of your store, you will need to create a new item with the code of "clientdimensions" and select the "cmp-mv-clientdimensions" module. You will then need to assign the item to your pages.

[howsimple]

Re: Suivant Readytheme Product Title PROD Template Page

There is already a long list of updates at http://www.miva.com/mm9.4_template_changes.html

Will it be added to this list? If so, when? THanks, KD

[Matt Zimmermann]

Re: Suivant Readytheme Product Title PROD Template Page

Hi KD,

The changes will be posted to the forum when the are released.