wdrożenia PrestaShop Powiększenie zdjęć moduł

Podział DOSTOSUJ PRODUKT na dwie kolumny

  • 12 Odpowiedzi
  • 3480 Wyświetleń

0 użytkowników i 2 Gości przegląda ten wątek.

*

Offline giees

  • Użytkownik
  • **
  • 29
  • 0
  • PrestaShop
  • PrestaShop: 1.6
  • Status: Właściciel
Podział DOSTOSUJ PRODUKT na dwie kolumny
« dnia: Luty 26, 2019, 12:47:17 pm »
Czy istnieje szansa na podział pola odpowiedzialnego za upload zdjęć na dwie kolumny? W sytuacji gdy klient musi wrzucić kilkanaście zdjęć, to strona będzie się niepotrzebnie wydłużać.

*

Offline west

  • Administrator
  • Mieszkaniec
  • *****
  • 5,285
  • 106
  • Płeć: Mężczyzna
  • Europasaz.pl
    • PrestaShop, Wordpress, SMF, Woocomerce
  • PrestaShop: 1.7
  • Status: Programista
Odp: Podział DOSTOSUJ PRODUKT na dwie kolumny
« Odpowiedź #1 dnia: Luty 27, 2019, 09:17:38 am »
Musisz przerobić tpl produktu czyli product.tpl - najlepiej ująć to w ostylowanie Bootstrap czyli np:
class="col-xs-12 col-sm-4"
MODUŁY | https://europasaz.pl |  SKLEPY INTERNETOWE | WSPARCIE TECHNICZNE | HOSTING | https://europasaz.pl 

*

Offline giees

  • Użytkownik
  • **
  • 29
  • 0
  • PrestaShop
  • PrestaShop: 1.6
  • Status: Właściciel
Odp: Podział DOSTOSUJ PRODUKT na dwie kolumny
« Odpowiedź #2 dnia: Luty 28, 2019, 12:50:45 pm »
Już mam:
class="customizableProductsFile col-xs-12 col-sm-6 col-md-6"tylko, że nie o to chodzi.

Potrzebuję jakiegoś ograniczenia ilości wierszy, bo nawet gdy przerobię sobie ten element strony na 3,4 czy 5 kolumn, to i tak lista gdzie można wgrać pliki będzie w jednej kolumnie. Czyli np. przy 3 plikach do załadowania wszystko wyświetla się w jednej kolumnie, ale już dołożenie 4 pola wyświetla się w drugiej kolumnie - obok.

*

Offline west

  • Administrator
  • Mieszkaniec
  • *****
  • 5,285
  • 106
  • Płeć: Mężczyzna
  • Europasaz.pl
    • PrestaShop, Wordpress, SMF, Woocomerce
  • PrestaShop: 1.7
  • Status: Programista
Odp: Podział DOSTOSUJ PRODUKT na dwie kolumny
« Odpowiedź #3 dnia: Marzec 01, 2019, 09:35:26 am »
Widocznie źle zmodyfikowałeś szablon. Zobacz czy kontener ponad nie jest ograniczony do np. połowy strony
MODUŁY | https://europasaz.pl |  SKLEPY INTERNETOWE | WSPARCIE TECHNICZNE | HOSTING | https://europasaz.pl 

*

Offline giees

  • Użytkownik
  • **
  • 29
  • 0
  • PrestaShop
  • PrestaShop: 1.6
  • Status: Właściciel
Odp: Podział DOSTOSUJ PRODUKT na dwie kolumny
« Odpowiedź #4 dnia: Marzec 02, 2019, 08:41:37 am »
To cały fragment dot. dostosowywania produktu:
<!--Customization -->
<section class="page-product-box">
<h3 class="page-product-heading"><strong>{l s='Product'}</strong> {l s='customization'}</h3>
<!-- Customizable products -->
<form method="post" action="{$customizationFormTarget}" enctype="multipart/form-data" id="customizationForm" class="clearfix">
<p class="infoCustomizable">
{l s='After saving your customized product, remember to add it to your cart.'}
{if $product->uploadable_files}
<br />
{l s='Allowed file formats are: GIF, JPG, PNG'}{/if}
</p>
<div class="row">
{if $product->uploadable_files|intval}
<div class="customizableProductsFile col-xs-12{if $product->text_fields|intval} col-sm-6 col-md-6{/if}">
<h5 class="product-heading-h5">{l s='Pictures'}</h5>
<ul id="uploadable_files" class="clearfix">
{counter start=0 assign='customizationField'}
{foreach from=$customizationFields item='field' name='customizationFields'}
{if $field.type == 0}
<li class="customizationUploadLine{if $field.required} required{/if}">{assign var='key' value='pictures_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
{if isset($pictures.$key)}
<div class="customizationUploadBrowse">
<img src="{$pic_dir}{$pictures.$key}_small" alt="" />
<a href="{$link->getProductDeletePictureLink($product, $field.id_customization_field)|escape:'html':'UTF-8'}" title="{l s='Delete'}" >
<img src="{$img_dir}icon/delete.gif" alt="{l s='Delete'}" class="customization_delete_icon" width="11" height="13" />
</a>
</div>
{/if}
<div class="customizationUploadBrowse form-group">
<label class="customizationUploadBrowseDescription">
{if !empty($field.name)}
{$field.name}
{else}
{l s='Please select an image file from your computer'}
{/if}
{if $field.required}<sup>*</sup>{/if}
</label>
<input type="file" name="file{$field.id_customization_field}" id="img{$customizationField}" class="form-control customization_block_input {if isset($pictures.$key)}filled{/if}" />
</div>
</li>
{counter}
{/if}
{/foreach}
</ul>
</div>
{/if}
{if $product->text_fields|intval}
<div class="customizableProductsText col-xs-12{if $product->uploadable_files|intval} col-sm-6 col-md-6{/if}">
<h5 class="product-heading-h5">{l s='Text'}</h5>
<ul id="text_fields">
{counter start=0 assign='customizationField'}
{foreach from=$customizationFields item='field' name='customizationFields'}
{if $field.type == 1}
<li class="customizationUploadLine{if $field.required} required{/if}">
<label for ="textField{$customizationField}">
{assign var='key' value='textFields_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
{if !empty($field.name)}
{$field.name}
{/if}
{if $field.required}<sup>*</sup>{/if}
</label>
<textarea name="textField{$field.id_customization_field}" class="form-control customization_block_input" id="textField{$customizationField}" rows="3" cols="20">{strip}
{if isset($textFields.$key)}
{$textFields.$key|stripslashes}
{/if}
{/strip}</textarea>
</li>
{counter}
{/if}
{/foreach}
</ul>
</div>
{/if}
</div>
<div class="submit">
<p class="pull-left clear required"><sup>*</sup> {l s='required fields'}</p>
<p id="customizedDatas">
<input type="hidden" name="quantityBackup" id="quantityBackup" value="" />
<input type="hidden" name="submitCustomizedDatas" value="1" />
<button class="button btn btn-default button button-small" name="saveCustomization">
<span>{l s='Save'}</span>
</button>
<span id="ajax-loader" class="unvisible">
<img src="{$img_ps_dir}loader.gif" alt="loader" />
</span>
</p>
</form>
</section>
<!--end Customization -->

*

Offline west

  • Administrator
  • Mieszkaniec
  • *****
  • 5,285
  • 106
  • Płeć: Mężczyzna
  • Europasaz.pl
    • PrestaShop, Wordpress, SMF, Woocomerce
  • PrestaShop: 1.7
  • Status: Programista
Odp: Podział DOSTOSUJ PRODUKT na dwie kolumny
« Odpowiedź #5 dnia: Marzec 02, 2019, 01:15:45 pm »
jak możemy Ci pomóc :) Przecież to prosta modyfikacja
MODUŁY | https://europasaz.pl |  SKLEPY INTERNETOWE | WSPARCIE TECHNICZNE | HOSTING | https://europasaz.pl 

*

Offline giees

  • Użytkownik
  • **
  • 29
  • 0
  • PrestaShop
  • PrestaShop: 1.6
  • Status: Właściciel
Odp: Podział DOSTOSUJ PRODUKT na dwie kolumny
« Odpowiedź #6 dnia: Marzec 03, 2019, 08:27:41 am »
Dla kogos, kto przepisal caly kod presty 15 razy moze i prosta. :-)

Czy chodzi o dodanie {assign var='nbItemsPerLine' value=2}?

*

Offline design4VIP

  • user
  • Mieszkaniec
  • *****
  • 3,866
  • 131
    • design4VIP z innej strony...
  • PrestaShop: PS
  • Status: Programista
Odp: Podział DOSTOSUJ PRODUKT na dwie kolumny
« Odpowiedź #7 dnia: Marzec 03, 2019, 11:43:06 am »
najwazniejsze masz w 'col-xs-12'

operujac stalymi kolumn mozesz uzyskac zamierzony efekt. jak dobrze pamietam kiedyc w FAQ umieszczalem tutorial dla bootstrampa
design4VIP z innej strony...

*

Offline giees

  • Użytkownik
  • **
  • 29
  • 0
  • PrestaShop
  • PrestaShop: 1.6
  • Status: Właściciel
Odp: Podział DOSTOSUJ PRODUKT na dwie kolumny
« Odpowiedź #8 dnia: Marzec 05, 2019, 07:34:41 am »
Przejrzałem tutorial dla bootstrampa, ale jestem za głupi, bo nie znalazłem tam rozwiązania. Bardzo fajnie opisane ustawianie podziału na ilość kolumn i ich szerokość, ale nie widzę nic o ograniczaniu długości (ew. ograniczaniu ilości wierszy).

*

Offline design4VIP

  • user
  • Mieszkaniec
  • *****
  • 3,866
  • 131
    • design4VIP z innej strony...
  • PrestaShop: PS
  • Status: Programista
Odp: Podział DOSTOSUJ PRODUKT na dwie kolumny
« Odpowiedź #9 dnia: Marzec 05, 2019, 03:12:15 pm »
Ale jezeli twoje col...12 podzielisz na dwie col...6 to jusz masz dwa wiersze
design4VIP z innej strony...

*

Offline giees

  • Użytkownik
  • **
  • 29
  • 0
  • PrestaShop
  • PrestaShop: 1.6
  • Status: Właściciel
Odp: Podział DOSTOSUJ PRODUKT na dwie kolumny
« Odpowiedź #10 dnia: Marzec 06, 2019, 08:03:14 am »
Nie rozumiemy się. :-) To nie ilość kolumn jest problemem, tylko ilość wierszy. Gdyby klient miał do załadowania 50 zdjęć, to strona ciągnęła by się w dół w nieskończoność i żaden podział na col-6, col-4, czy col-3 tu nic nie zmieni. Zrzut ekranu powinien rozjaśnić sytuację :-)

*

Offline design4VIP

  • user
  • Mieszkaniec
  • *****
  • 3,866
  • 131
    • design4VIP z innej strony...
  • PrestaShop: PS
  • Status: Programista
Odp: Podział DOSTOSUJ PRODUKT na dwie kolumny
« Odpowiedź #11 dnia: Marzec 06, 2019, 05:20:39 pm »
ale przy tej metodzie, ktora stosujesz dajac mozliwosc wgrania zdjec to ty okreslasz a nie klient ile ma tych pozycji byc. wiec w czym problem przeliczyc ilosc kolumn == ilosc wierszy i zastosowac bootstrampa?

innym torem, jak chcesz sie bawic w ilosc wierszy to ja bedac programista bym sie zastanawial jak to ugrysc zeby bylo zgodne z responsive.... mozesz zastosowac np. polecenia for, if + foreach z @count... ale tych 'if'-ow bedzie nizliczenie wiele, zeby kazde takie ograniczenie @count-era zwracalo odpowiednie 'col=....' w odpowiednich rozdzielczosciach... poprzednie rozwiazanie jest laickie, ale nie wymaga wiekszej wiedzy w programowaniu. a mysle, ze jakbys by programista to ugryzl bys to juz dawno druga metoda
design4VIP z innej strony...

*

Offline endriu107

  • user
  • Mieszkaniec
  • *****
  • 1,197
  • 51
  • PrestaShop: PS
  • Status: forum
Odp: Podział DOSTOSUJ PRODUKT na dwie kolumny
« Odpowiedź #12 dnia: Marzec 06, 2019, 09:08:16 pm »
W css zobacz column-count.