Jump to content

Poziomy widok produktów w koszyku


cleim_3103

Recommended Posts

Witam,

Mam pytanie, bądź prośbę. Czy możecie mi powiedzieć, czy istnieje możliwość w prestashop 1.6 zrobić ułożenie produktów w pzoiomie, a nie w pionie. Standardowo jest tak, że jeżeli dodamy dwa produkty, to układają nam sie w koszyku(w opcji jedej strony składania zamówienia) jeden pod drugim co obrazuje mniej więcej załącznik nr 1. A ja bym chciał aby te produktu układały sie jeden obok drugiego(załącznik nr 2). Czy możecie mi pomóc w takim rozwiązaniu? Możecie mi powiedzieć jak mam to rozwiązać, gdzie szukać, odpowiem na wszystkie pytania. Czy takie coś jest w ogóle możliwe? Proszę o pomoc!!!

post-883527-0-55013000-1420578720_thumb.png

post-883527-0-10930000-1420578726_thumb.png

Link to comment
Share on other sites

jest to możliwe jednak wymaga zmian w kodzie szablonu, 

pytanie jeszcze czym jest koszyk

czy koszyk to element wyświetlający się na każdej stronie jako element do którego "lecą" produkty

czy strona składania zamówienia, krok "koszyka"

Link to comment
Share on other sites

dziękuje za szybką odpowiedź. zapomniałem dodać, że jest to standardowy szablon prestashop 1.6 - bootstrap. Koszyk w sensie mam kilka produktów, następnie klikam dodaj do koszyka i przechodzę do realizacji zamówienia - przykładowy wygląd poniżej.(tylko, ze w załączniku jest opcja zamówienia - 5 kroków, a ja mam na jednej stornie). Możesz mi powiedzieć, gdzie mam to zmienic, bo jestem całkiem zielony w tej sprawie.autopart-prestashop-16-responsive-theme.

Link to comment
Share on other sites

Ale dlaczego w pionowych kolumnach? Potrzebowałbym takie coś aby użytkownik dodał 3 produkty i przechodzi do następnej linii. Coś takiego jak produkty są wyświetlane w kategoria. Przykład screen. Chodzi tylko o to, żeby produkty dodane do koszyka tak były ułożone. Do tej pory mam tak, że są one tak ułożone w css, ale schodzą jeden pod drugi.

 

przegladanie%20kategorii_2.png

Link to comment
Share on other sites

nie pamietam jak jest tworzona linia produktow, ale wydaje mi sie, ze po <li> sytarczy w CSS dac temu blokowi stala szerokosc, czy po bootstrampie np. col-sm-4 (to juz w .tpl), zadac mu w stylu float:left; i zostaje tylko ostylowanie poszczegolnych elementow wewnatrz bloku. tak czy tak wymaga to dosc sporej wiedzy, przede wszystkim w stylach. (chociaz ja bym sie pokusil o ustawienia w samym bootstramp ze wzgledu na responsywnosc tych elementow)

Link to comment
Share on other sites

Produkty w koszyku ustawiają się w <table> a każdy kolejny inny produkt dodany do koszyka jest kontynuacją w jednej tabeli i ewentualne znaczniki to <tr>. Wszystko jest zapętlone dlatego znaczniki tak samo się nazywają. Tak więc ciężko żeby to w stylach opisać, bo jak jedno opisze, to zaraz drugi produkt pod spodem się przemieszcza.

Link to comment
Share on other sites

Tutaj masz częściowo zrobione teraz wystarczy przenieść opis poszczególnych elementów i ostylować wygląd na jakieś 20 minut roboty :)

{*
* 2007-2014 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-2014 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
<div class="col-md-3" 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}">
	<p class="cart_product">
		<a href="{$link->getProductLink($product.id_product, $product.link_rewrite, $product.category, null, null, $product.id_shop, $product.id_product_attribute)|escape:'html':'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'small_default')|escape:'html':'UTF-8'}" alt="{$product.name|escape:'html':'UTF-8'}" {if isset($smallSize)}width="{$smallSize.width}" height="{$smallSize.height}" {/if} /></a>
	</p>
	<p class="cart_description">
    <p class="cart_product first_item">{l s='Produkt:'}</p>
		<p class="product-name"><a href="{$link->getProductLink($product.id_product, $product.link_rewrite, $product.category, null, null, $product.id_shop, $product.id_product_attribute)|escape:'html':'UTF-8'}">{$product.name|escape:'html':'UTF-8'}</a></p>
        {if $product.reference}<small class="cart_ref">{l s='SKU'} : {$product.reference|escape:'html':'UTF-8'}</small>{/if}
		{if isset($product.attributes) && $product.attributes}<small><a href="{$link->getProductLink($product.id_product, $product.link_rewrite, $product.category, null, null, $product.id_shop, $product.id_product_attribute)|escape:'html':'UTF-8'}">{$product.attributes|escape:'html':'UTF-8'}</a></small>{/if}
	</p>
	{if $PS_STOCK_MANAGEMENT}
		<p class="cart_avail"><span class="{if $product.quantity_available <= 0 && !$product.allow_oosp}label label-available_later{else}label label-success{/if}">{if $product.quantity_available <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{else}{l s='Out of stock'}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if}</span>{hook h="displayProductDeliveryTime" product=$product}</p>
	{/if}
	<p class="cart_unit" data-title="{l s='Unit price'}">
		<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 !$priceDisplay}
					<span class="price{if isset($product.is_discounted) && $product.is_discounted} special-price{/if}">{l s='Cena: '} {convertPrice price=$product.price_wt}</span>
				{else}
               	 	<span class="price{if isset($product.is_discounted) && $product.is_discounted} special-price{/if}">{l s='Cena: '} {convertPrice price=$product.price}</span>
				{/if}
				{if isset($product.is_discounted) && $product.is_discounted}
                	<span class="price-percent-reduction small">
            			{if !$priceDisplay}
            				{if isset($product.reduction_type) && $product.reduction_type == 'amount'}
                    			{assign var='priceReduction' value=($product.price_wt - $product.price_without_specific_price)}
                    			{assign var='symbol' value=$currency->sign}
                    		{else}
                    			{assign var='priceReduction' value=(($product.price_without_specific_price - $product.price_wt)/$product.price_without_specific_price) * 100 * -1}
                    			{assign var='symbol' value='%'}
                    		{/if}
						{else}
							{if isset($product.reduction_type) && $product.reduction_type == 'amount'}
								{assign var='priceReduction' value=($product.price - $product.price_without_specific_price)}
								{assign var='symbol' value=$currency->sign}
                    		{else}
                    			{assign var='priceReduction' value=(($product.price_without_specific_price - $product.price)/$product.price_without_specific_price) * 100 * -1}
                    			{assign var='symbol' value='%'}
                    		{/if}
						{/if}
						{if $symbol == '%'}
							 {$priceReduction|round|string_format:"%d"}{$symbol} 
						{else}
							 {$priceReduction|string_format:"%.2f"}{$symbol} 
						{/if}
                    </span>
					<span class="old-price">{convertPrice price=$product.price_without_specific_price}</span>
				{/if}
			{/if}
		</span>
	</p>

	<p class="cart_quantity">
		{if isset($cannotModify) AND $cannotModify == 1}
			<span>
				{if $quantityDisplayed == 0 AND isset($customizedDatas.$productId.$productAttributeId)}
					{l s='Ilość: '} {$product.customizationQuantityTotal}
				{else}
					{l s='Ilość: '} {$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}

				<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 form-control grey" 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}" />
				<div class="cart_quantity_button clearfix">
				{if $product.minimal_quantity < ($product.cart_quantity-$quantityDisplayed) OR $product.minimal_quantity <= 1}
					<a rel="nofollow" class="cart_quantity_down btn btn-default button-minus" 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':'UTF-8'}" title="{l s='Subtract'}">
				<span><i class="icon-minus"></i></span>
				</a>
				{else}
					<a class="cart_quantity_down btn btn-default button-minus disabled" 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}">
					<span><i class="icon-minus"></i></span>
				</a>
				{/if}
                	<a rel="nofollow" class="cart_quantity_up btn btn-default button-plus" 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':'UTF-8'}" title="{l s='Add'}"><span><i class="icon-plus"></i></span></a>
				</div>
			{/if}
		{/if}
	</p>
	<p class="cart_total" data-title="{l s='Total'}">
		<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}">
			{if !empty($product.gift)}
				<span class="gift-icon">{l s='Gift!'}</span>
			{else}
				{if $quantityDisplayed == 0 AND isset($customizedDatas.$productId.$productAttributeId)}
					{if !$priceDisplay}{l s='Łącznie: '} {displayPrice price=$product.total_customization_wt}{else}{l s='Łącznie: '} {displayPrice price=$product.total_customization}{/if}
				{else}
					{if !$priceDisplay}{l s='Łącznie: '} {displayPrice price=$product.total_wt}{else}{l s='Łącznie: '} {displayPrice price=$product.total}{/if}
				{/if}
			{/if}
		</span>
	</p>
	{if !isset($noDeleteButton) || !$noDeleteButton}
		<p class="cart_delete text-center" data-title="Delete">
		{if (!isset($customizedDatas.$productId.$productAttributeId) OR $quantityDisplayed > 0) && empty($product.gift)}
			<div>
				<a rel="nofollow" title="{l s='Delete'}" 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':'UTF-8'}"><i class="icon-trash"></i></a>
			</div>
		{else}

		{/if}
		</p>
	{/if}
</div>

Edited by endriu107 (see edit history)
Link to comment
Share on other sites

Zaktualizowałem powyższy kod dodatkowo podpowiem że musisz edytować order-payment.tpl, linie 52 - 63 do usunięcia i pozostała Ci zabawa z poprawą wyglądu ewentualnie poprawki w powyższym kodzie :D

 

Tak to wygląda przy większej ilości produktów:

 

post-487079-0-61516500-1420662654_thumb.jpg

 

Wystarczy dodać tło i będzie ok.

Edited by endriu107 (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...