Move Cart Quantity Buttons

wartex11 · April 15, 2014

Hey guys,

Spent a few days on this now! Trying to move the cart quantity buttons so that they are arranged like so:

- |QTY| +

I have tried modifying the files attached, can anyone lead me in the right direction?

global.css

shopping-cart-product-line.tpl

shopping-cart.tpl (framework for cart summary though)

Any help would be much appreciated!

My shopping-cart-product-line.tpl is quoted below;

{*
* 2007-2013 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
* @author PrestaShop SA <[email protected]>
* @copyright 2007-2013 PrestaShop SA
* @license    http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
* International Registered Trademark & Property of PrestaShop SA
*}

<tr id="product_{$product.id_product}_{$product.id_product_attribute}_{if $quantityDisplayed > 0}nocustom{else}0{/if}_{$product.id_address_delivery|intval}{if !empty($product.gift)}_gift{/if}" class="cart_item{if isset($productLast) && $productLast && (!isset($ignoreProductLast) || !$ignoreProductLast)} last_item{/if}{if isset($productFirst) && $productFirst} first_item{/if}{if isset($customizedDatas.$productId.$productAttributeId) AND $quantityDisplayed == 0} alternate_item{/if} address_{$product.id_address_delivery|intval} {if $odd}odd{else}even{/if}">

   <td class="cart_product" valign="middle" align="center" style="padding:20px;">
       <a href="{$link->getProductLink($product.id_product, $product.link_rewrite, $product.category, null, null, $product.id_shop, $product.id_product_attribute)|escape:'htmlall':'UTF-8'}">
        <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'small_dm')}" alt="{$product.name|escape:'htmlall':'UTF-8'}" />
        </a>
   </td>
   <td class="cart_description" style="padding:20px;">
       <h5><a class="product_link" href="{$link->getProductLink($product.id_product, $product.link_rewrite, $product.category, null, null, $product.id_shop, $product.id_product_attribute)|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'}</a></h5>
       {if isset($product.attributes) && $product.attributes}<a href="{$link->getProductLink($product.id_product, $product.link_rewrite, $product.category, null, null, $product.id_shop, $product.id_product_attribute)|escape:'htmlall':'UTF-8'}">{$product.attributes|escape:'htmlall':'UTF-8'}</a>{/if}

   </td>

{*
cw (cw note, above allowed table to start taking form)
   <td class="cart_ref">{if $product.reference}{$product.reference|escape:'htmlall':'UTF-8'}{else}--{/if}
   </td>

       <div class="clearfix insset-bottom">
           <span class="title-th">{l s='Ref.'}:</span> {if $product.reference}{$product.reference|escape:'htmlall':'UTF-8'}{else}--{/if}
       </div>

       <div class="clearfix insset-bottom">
           <span class="title-th">{l s='Price'}:</span>
cw *}
   <td class="cart_unit" style="padding:20px;">
       <span class="price" id="product_price_{$product.id_product}_{$product.id_product_attribute}{if $quantityDisplayed > 0}_nocustom{/if}_{$product.id_address_delivery|intval}{if !empty($product.gift)}_gift{/if}">
           {if !empty($product.gift)}
               <span class="gift-icon">{l s='Gift!'}</span>
           {else}
               {if isset($product.is_discounted) && $product.is_discounted}
{*                   <span style="text-decoration:line-through; display:inline-block; padding-right:5px;">{convertPrice price=$product.price_without_specific_price}</span>
*}
                   <span style="text-decoration:line-through;">{convertPrice price=$product.price_without_specific_price}</span><br />
               {/if}
               {if !$priceDisplay}
                   {convertPrice price=$product.price_wt}
               {else}
                   {convertPrice price=$product.price}
               {/if}
           {/if}
       </span>
   </td>
{*       </div>
       <div class="clearfix insset-bottom">
        <span class="title-th cart_quantity_title">{l s='Qty'}:</span>

        <div class="cart_quantity">
*}
   <td class="cart_quantity" valign="middle" align="center" style="padding:20px;"{if isset($customizedDatas.$productId.$productAttributeId) AND $quantityDisplayed == 0} style="text-align: center;"{/if}>
       {if isset($cannotModify) AND $cannotModify == 1}
           <span style="float:left">
               {if $quantityDisplayed == 0 AND isset($customizedDatas.$productId.$productAttributeId)}{$customizedDatas.$productId.$productAttributeId|@count}
               {else}
                   {$product.cart_quantity-$quantityDisplayed}
               {/if}
           </span>
       {else}
           {if isset($customizedDatas.$productId.$productAttributeId) AND $quantityDisplayed == 0}
               <span id="cart_quantity_custom_{$product.id_product}_{$product.id_product_attribute}_{$product.id_address_delivery|intval}" >{$product.customizationQuantityTotal}</span>
           {/if}
           {if !isset($customizedDatas.$productId.$productAttributeId) OR $quantityDisplayed > 0}
{*               <div id="cart_quantity_button" class="cart_quantity_button" style="float:left;">
*}

               <div class="cart_quantity_button">




               {if $product.minimal_quantity < ($product.cart_quantity-$quantityDisplayed) OR $product.minimal_quantity <= 1}



               <a rel="nofollow" class="cart_quantity_down" id="cart_quantity_down_{$product.id_product}_{$product.id_product_attribute}_{if $quantityDisplayed > 0}nocustom{else}0{/if}_{$product.id_address_delivery|intval}" href="{$link->getPageLink('cart', true, NULL, "add=1&id_product={$product.id_product|intval}&ipa={$product.id_product_attribute|intval}&id_address_delivery={$product.id_address_delivery|intval}&op=down&token={$token_cart}")|escape:'html'}" title="{l s='Subtract'}">
                   <img src="{$img_dir}icon/quantity_down.gif" alt="{l s='Subtract'}" width="14" height="9" />
               </a>

               <input type="hidden" value="{if $quantityDisplayed == 0 AND isset($customizedDatas.$productId.$productAttributeId)}{$customizedDatas.$productId.$productAttributeId|@count}{else}{$product.cart_quantity-$quantityDisplayed}{/if}" name="quantity_{$product.id_product}_{$product.id_product_attribute}_{if $quantityDisplayed > 0}nocustom{else}0{/if}_{$product.id_address_delivery|intval}_hidden" />
               <input size="2" type="text" autocomplete="off" class="cart_quantity_input" value="{if $quantityDisplayed == 0 AND isset($customizedDatas.$productId.$productAttributeId)}{$customizedDatas.$productId.$productAttributeId|@count}{else}{$product.cart_quantity-$quantityDisplayed}{/if}" name="quantity_{$product.id_product}_{$product.id_product_attribute}_{if $quantityDisplayed > 0}nocustom{else}0{/if}_{$product.id_address_delivery|intval}" />

               <a rel="nofollow" class="cart_quantity_up" id="cart_quantity_up_{$product.id_product}_{$product.id_product_attribute}_{if $quantityDisplayed > 0}nocustom{else}0{/if}_{$product.id_address_delivery|intval}" href="{$link->getPageLink('cart', true, NULL, "add=1&id_product={$product.id_product|intval}&ipa={$product.id_product_attribute|intval}&id_address_delivery={$product.id_address_delivery|intval}&token={$token_cart}")|escape:'html'}" title="{l s='Add'}"><img src="{$img_dir}icon/quantity_up.gif" alt="{l s='Add'}" width="14" height="9" />
               </a>
               {else}


               <a class="cart_quantity_down" style="opacity: 0.3;" href="#" id="cart_quantity_down_{$product.id_product}_{$product.id_product_attribute}_{if $quantityDisplayed > 0}nocustom{else}0{/if}_{$product.id_address_delivery|intval}" title="{l s='You must purchase a minimum of %d of this product.' sprintf=$product.minimal_quantity}">
                   <img src="{$img_dir}icon/quantity_down.gif" width="14" height="9" alt="{l s='Subtract'}" />
               </a>

               <input type="hidden" value="{if $quantityDisplayed == 0 AND isset($customizedDatas.$productId.$productAttributeId)}{$customizedDatas.$productId.$productAttributeId|@count}{else}{$product.cart_quantity-$quantityDisplayed}{/if}" name="quantity_{$product.id_product}_{$product.id_product_attribute}_{if $quantityDisplayed > 0}nocustom{else}0{/if}_{$product.id_address_delivery|intval}_hidden" />
               <input size="2" type="text" autocomplete="off" class="cart_quantity_input" value="{if $quantityDisplayed == 0 AND isset($customizedDatas.$productId.$productAttributeId)}{$customizedDatas.$productId.$productAttributeId|@count}{else}{$product.cart_quantity-$quantityDisplayed}{/if}" name="quantity_{$product.id_product}_{$product.id_product_attribute}_{if $quantityDisplayed > 0}nocustom{else}0{/if}_{$product.id_address_delivery|intval}" />


               {/if}



{*                       <input type="hidden" value="{if $quantityDisplayed == 0 AND isset($customizedDatas.$productId.$productAttributeId)}{$customizedDatas.$productId.$productAttributeId|@count}{else}{$product.cart_quantity-$quantityDisplayed}{/if}" name="quantity_{$product.id_product}_{$product.id_product_attribute}_0_{$product.id_address_delivery|intval}_hidden" />
               <input size="2" type="text" autocomplete="off" class="cart_quantity_input" value="{if $quantityDisplayed == 0 AND isset($customizedDatas.$productId.$productAttributeId)}{$customizedDatas.$productId.$productAttributeId|@count}{else}{$product.cart_quantity-$quantityDisplayed}{/if}" name="quantity_{$product.id_product}_{$product.id_product_attribute}_0_{$product.id_address_delivery|intval}" />

               <a rel="nofollow" class="cart_quantity_up" id="cart_quantity_up_{$product.id_product}_{$product.id_product_attribute}_0_{$product.id_address_delivery|intval}" href="{$link->getPageLink('cart', true, NULL, "add&id_product={$product.id_product|intval}&ipa={$product.id_product_attribute|intval}&id_address_delivery={$product.id_address_delivery|intval}&token={$token_cart}")}" title="{l s='Add'}"><img src="{$img_dir}icon/quantity_up.gif" alt="{l s='Add'}" width="23" height="24" /></a>
*}
               </div>


{*               <input type="hidden" value="{if $quantityDisplayed == 0 AND isset($customizedDatas.$productId.$productAttributeId)}{$customizedDatas.$productId.$productAttributeId|@count}{else}{$product.cart_quantity-$quantityDisplayed}{/if}" name="quantity_{$product.id_product}_{$product.id_product_attribute}_{if $quantityDisplayed > 0}nocustom{else}0{/if}_{$product.id_address_delivery|intval}_hidden" />
               <input size="2" type="text" autocomplete="off" class="cart_quantity_input" value="{if $quantityDisplayed == 0 AND isset($customizedDatas.$productId.$productAttributeId)}{$customizedDatas.$productId.$productAttributeId|@count}{else}{$product.cart_quantity-$quantityDisplayed}{/if}" name="quantity_{$product.id_product}_{$product.id_product_attribute}_{if $quantityDisplayed > 0}nocustom{else}0{/if}_{$product.id_address_delivery|intval}" />
*}
           {/if}
       {/if}
{*
           {if !isset($noDeleteButton) || !$noDeleteButton}

       {if (!isset($customizedDatas.$productId.$productAttributeId) OR $quantityDisplayed) > 0 && empty($product.gift)}

           <div class="div_cart_quantity_delete">
               <a rel="nofollow" class="cart_quantity_delete" id="{$product.id_product}_{$product.id_product_attribute}_0_{$product.id_address_delivery|intval}" href="{$link->getPageLink('cart', true, NULL, "delete=1&id_product={$product.id_product|intval}&ipa={$product.id_product_attribute|intval}&id_address_delivery={$product.id_address_delivery|intval}&token={$token_cart}")}"><i class="icon-trash"></i></a>
           </div>
       {/if}

   {/if}
        </div>
        </div>
        <span class="title-th">{l s='Total'}:</span>
*}
   </td>
   <td class="cart_total" style="padding:20px;">
       <span class="price" id="total_product_price_{$product.id_product}_{$product.id_product_attribute}{if $quantityDisplayed > 0}_nocustom{/if}_{$product.id_address_delivery|intval}{if !empty($product.gift)}_gift{/if}">
{*               <span class="price total-pr" id="total_product_price_{$product.id_product}_{$product.id_product_attribute}_{$product.id_address_delivery|intval}{if !empty($product.gift)}_gift{/if}">
*}           {if !empty($product.gift)}
               <span class="gift-icon">{l s='Gift!'}</span>
           {else}
               {if $quantityDisplayed == 0 AND isset($customizedDatas.$productId.$productAttributeId)}
                   {if !$priceDisplay}{displayPrice price=$product.total_customization_wt}{else}{displayPrice price=$product.total_customization}{/if}
               {else}
                   {if !$priceDisplay}{displayPrice price=$product.total_wt}{else}{displayPrice price=$product.total}{/if}
               {/if}
           {/if}
       </span>

   </td>

   {if !isset($noDeleteButton) || !$noDeleteButton}
       <td class="cart_delete" valign="middle" align="center">
       {if (!isset($customizedDatas.$productId.$productAttributeId) OR $quantityDisplayed > 0) && empty($product.gift)}
           <div>
               <a rel="nofollow" class="cart_quantity_delete" id="{$product.id_product}_{$product.id_product_attribute}_{if $quantityDisplayed > 0}nocustom{else}0{/if}_{$product.id_address_delivery|intval}" href="{$link->getPageLink('cart', true, NULL, "delete=1&id_product={$product.id_product|intval}&ipa={$product.id_product_attribute|intval}&id_address_delivery={$product.id_address_delivery|intval}&token={$token_cart}")|escape:'html'}"><i class="icon-trash"></i></a>
           </div>
       {/if}
       </td>
   {/if}
</tr>

global.css

wartex11 · April 18, 2014

Hey guys,

Is anyone able to point me in the right direction?

Cheers,

vekia · April 18, 2014

due to the fact that this is not default template - please share url to your shop.

wartex11 · April 19, 2014

URL is www.shinsentea.com.au

Cheers!

hoolay · April 19, 2014

that should do the trick :

add in global.css :

#center_column table#cart_summary td.cart_quantity{width:12%}
#center_column table#cart_summary input.cart_quantity_input{margin:0}
#center_column table#cart_summary a.cart_quantity_up {float:right}

edit : (apearently bb doesn't work)

#center_column table#cart_summary td.cart_quantity{width:12%}
#center_column table#cart_summary input.cart_quantity_input{margin:0}
#center_column table#cart_summary a.cart_quantity_up {float:right}

Edited April 19, 2014 by hoolay (see edit history)

vekia · April 19, 2014

hello your post somehow doesn't show contents after:

that should do the trick :

can you update it?

hoolay · April 19, 2014

done!

Weird, I still can see the content... ;/

wartex11 · April 19, 2014

Hi,

hoolay, thanks very much - this definitely guided me in the right direction and it is now fixed!

One of my tags (default tag, as buttons are originally on the left) was playing with the minus button,

Just working on border now, which seems to render in chrome but not firefox!

I didn't use the #center_column tag, may I ask what that tag is for? I saw it in multiple sections of global.css but I though # referenced table id's?

hoolay · April 24, 2014

You're very welcome,

I've added #center_column tag to increase the specificity of our custom css
(http://www.htmldog.com/guides/css/intermediate/specificity/)

It may be useless, just try without...

(your website's currently in maintenance mode, so I can't help about border)

but should be (crappy but) ok :

#center_column table#cart_summary input.cart_quantity_input{
margin:0;
border:1px solid blue /*customize it*/
}

#center_column table#cart_summary input.cart_quantity_input{

margin:0;

border:1px solid blue /*customize it*/

}

Sign In

Move Cart Quantity Buttons

Recommended Posts

wartex11

Link to comment

Share on other sites

wartex11

Link to comment

Share on other sites

vekia

Link to comment

Share on other sites

wartex11

Link to comment

Share on other sites

hoolay

Link to comment

Share on other sites

vekia

Link to comment

Share on other sites

hoolay

Link to comment

Share on other sites

wartex11

Link to comment

Share on other sites

hoolay

Link to comment

Share on other sites

Browse

Activity

Go back to prestashop.com