Virtuemart Support :: Topic: Different look when using Stockable Variants or No (1/1)

Welcome, Guest

TOPIC: Different look when using Stockable Variants or No

Different look when using Stockable Variants or No 11 years 5 months ago #1034

Marco Kooreman	When I use the stockable variant plugin the quantity and stock image is different see the attached images. Attachments: withoutvariant.jpg (23KB) withvariant.jpg (29KB)
	Last Edit: 11 years 5 months ago by Marco Kooreman. The topic has been locked.

Different look when using Stockable Variants or No 11 years 5 months ago #1037

Support

Hi,

The layout difference is normal, this is how it was designed. We had to do it.
In normal version, we redesigned the "add to cart" button, we have put some extra <span> and <DIV> TAGs in it, to get the layout you are seeing now (you know; it slides down when it is mouse hover etc..). But the "VM Custom Field - Stockable Variant" is using AJAX updating to change the "add to cart" button to "notify" in case the attributes are out of stock. We had to use the original HTML code for "add to cart" button when the "VM Custom Field - Stockable Variant" is activated in any product, so the AJAX updating is working; Otherwise you would need some Coding Edits in "VM Custom Field - Stockable Variant" JavaScript file. Which would be very complicated for our clients to achieve it, and since it is a Core editing and beside people usually don't like making edits to core Virtuemart files.

All in all, we had to do it. It is not a mistake or bug. It is just how it was designed.

Support.

The topic has been locked.

Different look when using Stockable Variants or No 11 years 5 months ago #1041

Marco Kooreman

Hi,

Thanks for your answer. The mouse sliding thing I already disabled because it does not work with the stockable variant (this is on the category browsepage). This is no problem for me. The issue I mention is not on the category browsepage but on the product details page. And, correct me if I am wrong if I read your answer the products without stockable variants should work ok and the ones with stockable variants not. In my case the stockable products look and work great and the other ones not.

See the difference here:

OK
www.ab-voetbalshop.nl/shop/kleding/kleding-junioren/standaard-ab-shirt-senioren-junioren-a-b-c-d-detail

NOT OK (workable but the other on looks better)
www.ab-voetbalshop.nl/shop/tassen/voetbaltas-groot-senior-detail

Thanks,
KooTjoo

Last Edit: 11 years 5 months ago by Marco Kooreman.

The topic has been locked.

Different look when using Stockable Variants or No 11 years 5 months ago #1069

Support	I assume you have solved your problem by yourself, cause i don't see any problem in either pages now. Both pages look okay and add products to cart correctly.
	The topic has been locked.

Different look when using Stockable Variants or No 11 years 5 months ago #1072

Marco Kooreman	No I haven't. You see a definite difference looking at the add to cart area, out of stock message etc.
	The topic has been locked.

Different look when using Stockable Variants or No 11 years 5 months ago #1076

Support

Hi,

You mean this:

If it is the layout problem you are saying, it was supposed to be in the same line with "add to cart" button, but the point is, apparently both the "add to cart" button text and the red text are so long and they don't fit there together.
It requires little CSS edits.

Open this CSS file;
www.ab-voetbalshop.nl/templates/yoo_sync/html/com_virtuemart/assets/css/flexibleVM2Global.css

and find this CSS rules:

.FlexibleProductDetailsStockInfo {
	 float:right;
	 margin:8px 0;
 }
.FlexibleProductDetailsSoldOut {
	font-size:13px;
	font-weight:bold;
	color:#F00;
}

change them with these:

.FlexibleProductDetailsStockInfo {
	 float:right;
	 margin:0;
	width:80px;
 }
.FlexibleProductDetailsSoldOut {
	color: #FF0000;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 15px;
}

the result will be:

The topic has been locked.

Different look when using Stockable Variants or No 11 years 5 months ago #1082

Marco Kooreman	Hi, No I don't mean that. I want it to look the same as the other link. So quantity adjustment with the up-down arrows and stock wilt the image (in this case the red square with text in it). You have to select another size to see it.
	Last Edit: 11 years 5 months ago by Marco Kooreman. The topic has been locked.

Different look when using Stockable Variants or No 11 years 5 months ago #1089

Support

Again,

We had to use the original styling of "add to cart button" when the "VM Custom field Stockable Variant" plugin is in use. Add to cart button contains 2 elements, 1) the button itself 2)the quantity boxes. You can only change their styles with some CSS touches, but having a dropdown box like the other style.. no, not possible. Because the concept is different in those appearing. The one uses <select or one uses <input . It would require some HTML change to have the dropdown selection box. If it was possible, we would do that the way you would like to have it. Because we also want our VM Template looks cool in all situations. But sometimes having some "bad design but functioning" sections are better than having "good looking but not-functioning" sections, you see what i mean?You might try to apply some CSS changes to make it looks as you wish but don't touch the HTML codes in product details page, actually what every you do; the result won't be changed, because that add to cart button with quantity buttons (the one that you don't like) are not plan HTML, those elements are generated by Virtuemart's JS file. You are supposed to make edits in the JAVA file to change it. This doesn't recommended though, 'cause any core edits will eventually end up with "non-functioning" results.

Cheers.

Last Edit: 11 years 5 months ago by Support.

The topic has been locked.

Different look when using Stockable Variants or No 11 years 5 months ago #1091

Marco Kooreman

Hi,

I still think you are understanding me wrongly.

The Product Details Page with the "VM Custom field Stockable Variant" is the way I would like it to be. The reason you give for the difference is the other way around.

So let's focus only on the quantity adjustment.

- VM Custom field Stockable Variant -> Quantity adjustment with up/down arrows (which I want everywhere).
- Normal product -> dropdown selection

The way you explain it is the other way around (or am I seeing this wrongly)?

Thanks,
KooTjoo

The topic has been locked.

Different look when using Stockable Variants or No 11 years 5 months ago #1111

Support

I guess, i understand you correctly now.

So you want to have the "add to cart" button like this:
www.ab-voetbalshop.nl/shop/kleding/kleding-junioren/standaard-ab-shirt-senioren-junioren-a-b-c-d-detail

in all pages.Right? So there won't be any difference, no matter you have "VM stockable variant" plugin or not.

You can do this.
Open this PHP page:

ROOT/templates/<yourjoomlatemplate>/html/com_virtuemart/productdetails/default.php

First of all find these LINES:

<div class="FlexibleProductDetailsSelectBox">
        <select class="quantity-input js-recalculate" name="quantity[]">
  			<option value="1">1</option>
  			<option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>   
		</select>  
</div>

and replace them with these:

<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>

This change above will replace the "dropdown" quantity box with the (plus and minus) button style quantity box.

If you also want to change the "add to cart" button style, then find this line:

<?php 
echo "<span class='FlexibleCSS3Button'>";
echo "<input class='addtocart-button FlexibleCSS3Button-text' type='submit' title='".JTEXT::_('COM_VIRTUEMART_CART_ADD_TO')."' value='".JTEXT::_('COM_VIRTUEMART_CART_ADD_TO')."' name='addtocart'>";
?>
 
<span class="FlexibleCSS3Button-slide-text"><?php // Shows "SOLD OUT" or In Stock" text next to add to cart button in the product details page. "Display stock level" and "Displays 'Notify Me' instead of 'Add To Cart' button" options must be enabled in the VM Configuration
						if (!VmConfig::get('use_as_catalog') and !(VmConfig::get('stockhandle','none')=='none') ){?>
 
							<?php if (($this->product->product_in_stock - $this->product->product_ordered) < 1) { ?>
                			 <span class="FlexibleProductDetailsSoldOut"><?php echo JTEXT::_('COM_VIRTUEMART_CART_PRODUCT_OUT_OF_STOCK');?></span>
							<?php } else { ?>
							 <span class="FlexibleProductDetailsInStock"><?php echo JTEXT::_('COM_VIRTUEMART_SEARCH_ORDER_PRODUCT_IN_STOCK');?></span> 
                             <?php if (VmConfig::get ( 'display_stock', 1 )) { ?><span class="FlexibleProductDetailsStockNumber">(<?php echo $this->product->product_in_stock; ?>)</span><?php }?>	
						<?php	}?>
 
 
<?php } else { ?>
	<span class="FlexibleProductDetailsInStock"><?php echo JTEXT::_('COM_VIRTUEMART_SEARCH_ORDER_PRODUCT_IN_STOCK');?></span> 
<?php }// Shows "out of stock" text ENDS?></span>
<span class="FlexibleCSS3Button-icon-right"> <span></span></span>
</span>

And replace it with this:

<span class="addtocart-button">
		<?php echo shopFunctionsF::getAddToCartButton ($this->product->orderable); ?>
</span>

Then "add to cart" button and the quantity buttons will look like this:http://www.ab-voetbalshop.nl/shop/kleding/kleding-junioren/standaard-ab-shirt-senioren-junioren-a-b-c-d-detail in all pages

BE cautious WHILE REPLACING CODES. if you miss one single </span> or include additional </span>, you might end up with a corrupted layout.

Cheers.

The topic has been locked.

Different look when using Stockable Variants or No 11 years 5 months ago #1137

Marco Kooreman	Hi, Great! This is exactly what I mean. Why the difference at first? Thanks, KooTjoo
	The topic has been locked.

Different look when using Stockable Variants or No 11 years 5 months ago #1141

Support	Hi, At first I though you wanted to the other way around. Now, I am glad finally I understand what you were asking and you got what you want. Cheers, Support. Case Solved. Topic is closed.
	The topic has been locked.