News:

You may pay someone to create your store, or you visit our seminar and become a professional yourself with the silver certification

Main Menu

How to wrap extra long text for the "product-field-type-E"

Started by leapingdog, August 15, 2012, 06:14:08 AM

Previous topic - Next topic
Print
Go Down Pages1
User actions

leapingdog

August 15, 2012, 06:14:08 AM Last Edit: August 16, 2012, 23:20:28 PM by leapingdog
Joomla version:2.5.6
VirtueMart version:2.0.8e

BACKGROUND:

When our customers purchase our software, they also need to send us a 230 character software license number, (which has no spaces).
Currently, this long string does not wrap around, and completely shifts the text within the shopping cart, so it is unusable.

I configured this by adding a custom field for this product (Select a plug-in), and set it to "VM - Custom, customer text input."

From within Chrome, I identified where a css change is needed - its after the "product-field-type-E".

I am thinking that the very long string could be forced to be broken, so that it wraps within the proper width of the cell within its table.

This is what the html code looks like in my page currently:

Code Select
<span class="product-field-type-E"><span>COM_VIRTUEMART_COMMENT bm9rZXkKbm9rZXkKNkNEMi0xQzAyCm5va2V5Cm5va2V5CkRFTEwtMjdkYjAxMGIKbm9rZXkKbm9rZXkKbm9rZXkKbm9rZXkKbm9rZXkKQkZFQkZCRkYwMDAxMDY3QQpub2tleQpub2tleQpQSEFOVE9NIFRlc3QgU3RhbmQgUy9OIDAwOTkmJiZIaWF0cm9uaWMgRGV2ZWxvcG1lbnQgU3VpdGUgLSAyLjE</span></span>

The following web page describes how to wrap an extra long sting within a table using html:  http://stackoverflow.com/questions/1258416/word-wrap-in-a-html-table

QUESTION:

Does anyone know how to wrap this text, anywhere that this product field E is shown, so that it displays properly?



Thanks for your help.

Dog!








ivus

#1
August 15, 2012, 10:08:33 AM
Hi leapingdog,

Not really a VM issue?

All you need to do is define a new style:

.product-field-type-E {
    word-wrap:break-word;
}

Code Select


<div class="product-field-type-E">bm9rZXkKbm9rZXkKNkNEMi0xQzAyCm5va2V5Cm5va2V5CkRFTEwtMjdkYjAxMGIKbm9rZXkKbm9rZXkKbm9rZXkKbm9rZXkKbm9rZXkKQkZFQkZCRkYwMDAxMDY3QQpub2tleQpub2tleQpQSEFOVE9NIFRlc3QgU3RhbmQgUy9OIDAwOTkmJiZIaWF0cm9uaWMgRGV2ZWxvcG1lbnQgU3VpdGUgLSAyLjE</div>



Try it for yourself.

Copy/paste the following code into the editor here : http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap

Code Select


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.product-field-type-E {
    word-wrap:break-word;
width:300px;
}
</style>
</head>
<body>

<div class="product-field-type-E">bm9rZXkKbm9rZXkKNkNEMi0xQzAyCm5va2V5Cm5va2V5CkRFTEwtMjdkYjAxMGIKbm9rZXkKbm9rZXkKbm9rZXkKbm9rZXkKbm9rZXkKQkZFQkZCRkYwMDAxMDY3QQpub2tleQpub2tleQpQSEFOVE9NIFRlc3QgU3RhbmQgUy9OIDAwOTkmJiZIaWF0cm9uaWMgRGV2ZWxvcG1lbnQgU3VpdGUgLSAyLjE</div>

</body>
</html>



I hope this helps.  ;D

leapingdog

#2
August 15, 2012, 15:13:10 PM Last Edit: August 16, 2012, 20:48:35 PM by leapingdog
Thanks Ivus for your great help on this.  I needed to tweak your code just a little to get it to work (see below).

Question: what VirtueMart file (name/location) do I put it in to get it to wrap this product-field-type-E field?

What exactly would need to be modified within this file?

Thanks,

Dog

Code Select
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.product-field-type-E {
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}
</style>
</head>
<body>

<div class="product-field-type-E">bm9rZXkKbm9rZXkKNkNEMi0xQzAyCm5va2V5Cm5va2V5CkRFTEwtMjdkYjAxMGIKbm9rZXkKbm9rZXkKbm9rZXkKbm9rZXkKbm9rZXkKQkZFQkZCRkYwMDAxMDY3QQpub2tleQpub2tleQpQSEFOVE9NIFRlc3QgU3RhbmQgUy9OIDAwOTkmJiZIaWF0cm9uaWMgRGV2ZWxvcG1lbnQgU3VpdGUgLSAyLjE</div>

</body>
</html>

ivus

#3
August 15, 2012, 15:43:23 PM
Hi leapingdog,

Which page did you want it to display in? The template (views) naming convention is quite straight forward.

For example:

Product View, add to cart button => /component/com_virtuemart/views/productdetails/tmpl/default_addtocart.php
Product View, customer review => /component/com_virtuemart/views/productdetails/tmpl/default_reviews.php
Shopping Cart, TOTAL price in pricing section => /component/com_virtuemart/views/cart/tmpl/default_pricelist.php
Shopping Cart, User shipping address update => /component/com_virtuemart/views/user/tmpl/edit_address_addshipto.php

It's not that difficult to have a look around, all you need to know basically is which section you're in (this defines the VIEW folder), and which part you want to change (this defines the TMPL file)

Good luck.

leapingdog

#4
August 16, 2012, 20:41:50 PM Last Edit: August 16, 2012, 20:47:31 PM by leapingdog
Hi Ivus,

Thanks so much for your help on this.  I need just a little more help, to implement this solution.

For example, within the "default_addtocart.php" file, how would you insert this code, so that it wraps the very long text string?

Very specific details would of the code change would be very much appreciated.

DOG!

THIS IS THE CODE THAT MAKES IT WRAP:
Code Select

<style type="text/css">
p.test
{
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}
</style>


THIS IS THE CODE FOR THE FILE /component/com_virtuemart/views/productdetails/tmpl/default_addtocart.php
Code Select
<?php

/**

 *

 * Show the product details page

 *

 * @package VirtueMart

 * @subpackage

 * @author Max Milbers, Valerie Isaksen

 * @todo handle child products

 * @link http://www.virtuemart.net

 * @copyright Copyright (c) 2004 - 2010 VirtueMart Team. All rights reserved.

 * @license http://www.gnu.org/copyleft/gpl.html GNU/GPL, see LICENSE.php

 * VirtueMart is free software. This version may have been modified pursuant

 * to the GNU General Public License, and as distributed it includes or

 * is derivative of works licensed under the GNU General Public License or

 * other free or open source software licenses.

 * @version $Id: default_addtocart.php 6260 2012-07-12 07:42:04Z Milbo $

 */

// Check to ensure this file is included in Joomla!

defined('_JEXEC') or die('Restricted access');

?>

<div class="addtocart-area">



    <form method="post" class="product js-recalculate" action="index.php" >

<?php // Product custom_fields

 if (!empty($this->product->customfieldsCart)) { ?>

    <div class="product-fields">

<?php foreach ($this->product->customfieldsCart as $field) { ?>

    <div class="product-field product-field-type-<?php echo $field->field_type ?>">

<span class="product-fields-title" ><strong><?php echo JText::_($field->custom_title) ?></strong></span>

<?php if ($field->custom_tip)

     echo JHTML::tooltip($field->custom_tip, JText::_($field->custom_title), 'tooltip.png'); ?>

<span class="product-field-display"><?php echo $field->display ?></span>



<span class="product-field-desc"><?php echo $field->custom_field_desc ?></span>

    </div><br />

    <?php

 }

 ?>

    </div>

<?php

}

 /* Product custom Childs

 * to display a simple link use $field->virtuemart_product_id as link to child product_id

 * custom_value is relation value to child

 */



 if (!empty($this->product->customsChilds)) {

     ?>

    <div class="product-fields">

    <?php foreach ($this->product->customsChilds as $field) { ?>

    <div class="product-field product-field-type-<?php echo $field->field->field_type ?>">

<span class="product-fields-title" ><strong><?php echo JText::_($field->field->custom_title) ?></strong></span>

<span class="product-field-desc"><?php echo JText::_($field->field->custom_value) ?></span>

<span class="product-field-display"><?php echo $field->display ?></span>



    </div><br />

<?php } ?>

    </div>

<?php } ?>



<div class="addtocart-bar">



<?php // Display the quantity box



    $stockhandle = VmConfig::get('stockhandle', 'none');

    if (($stockhandle == 'disableit' or $stockhandle == 'disableadd') and ($this->product->product_in_stock - $this->product->product_ordered) < 1) {

 ?>

<a href="<?php echo JRoute::_('index.php?option=com_virtuemart&view=productdetails&layout=notify&virtuemart_product_id='.$this->product->virtuemart_product_id); ?>" class="notify"><?php echo JText::_('COM_VIRTUEMART_CART_NOTIFY') ?></a>



<?php } else { ?>

<!-- <label for="quantity<?php echo $this->product->virtuemart_product_id; ?>" class="quantity_box"><?php echo JText::_('COM_VIRTUEMART_CART_QUANTITY'); ?>: </label> -->

    <span class="quantity-box">

<input type="text" class="quantity-input js-recalculate" name="quantity[]" value="<?php if (isset($this->product->min_order_level) && (int) $this->product->min_order_level > 0) {

    echo $this->product->min_order_level;

} else {

    echo '1';

} ?>" />

    </span>

    <span class="quantity-controls js-recalculate">

<input type="button" class="quantity-controls quantity-plus" />

<input type="button" class="quantity-controls quantity-minus" />

    </span>

    <?php // Display the quantity box END ?>



    <?php

    // Display the add to cart button

     ?>

<span class="addtocart-button">

<?php echo shopFunctionsF::getAddToCartButton($this->product->orderable); ?>

</span>

<?php } ?>



    <div class="clear"></div>

</div>



<?php // Display the add to cart button END  ?>

<input type="hidden" class="pname" value="<?php echo $this->product->product_name ?>" />

<input type="hidden" name="option" value="com_virtuemart" />

<input type="hidden" name="view" value="cart" />

<noscript><input type="hidden" name="task" value="add" /></noscript>

<input type="hidden" name="virtuemart_product_id[]" value="<?php echo $this->product->virtuemart_product_id ?>" />

    </form>



    <div class="clear"></div>

</div>




ivus

#5
August 17, 2012, 04:58:08 AM
Hi leapingdog,

This is getting beyond being a VM issue, more like CSS 101.

Quote

THIS IS THE CODE THAT MAKES IT WRAP:
Code: [Select]
<style type="text/css">
p.test
{
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}
</style>

- this is the style that makes it wrap. Put it one of the VM style sheets that is linked to that template page. If you don't know, you can view the source of the page or use Firebug/Inspector to find out.

As far as the ...

QuoteVery specific details would of the code change would be very much appreciated.

I can't really do much as you've set it up as custom field... I'm assuming it's this part that you are lost.

this post may be of use to get you going, it's about how to grab your custom fields for a specific product
http://forum.virtuemart.net/index.php?topic=105606.msg352115#msg352115

Good luck.
Print
Go Up Pages1
User actions