Varianten in 2 Spalten darstellen

[garnett]

moin leute!

ich würde gern die varianten etwas anderes formatiert haben, leider bekomm ich es nicht wirklich hin.

angenommen ich habe 6 varianten zur auswahl, dann sollen die in zwei blöcken nebeneinander dargestellt werden.

vari 1 vari 4
vari 2 vari 5
vari 3 vari 6

meine überlegung wäre gewesen, zwei div-container anlegen und mit float:right ausrichten. ich hätte dann aber in beiden containern jeweils alle 6 varianten drin. also ungünstig.


kann jemand helfen?

gruß
garnett

[maennchen1.de]

Hi!
Die Varianten werden in den einzelnen Produkttemplates /views/templates/produkt/ eingestellt:

Code: Alles auswählen

<?php if (is_array($this->data["mod_varianten"]) && sizeof($this->data["mod_varianten"]) > 0) { ?>
<div class="wpshopgermany_vari">
        <?php $iv = 0; foreach ($this->data["mod_varianten"] as $v_id => $v) { $iv ++; ?>
        <label class="wpsg_vari_label">
                <input <?php echo (($iv == 1)?"checked='checked'":""); ?> onclick="switchVari(<?php echo $this->data['p_id']; ?>, <?php echo $v_id; ?>);" type="radio" name="vari" value="<?php echo $v_id; ?>" /><?php echo $v["name"]; ?>
                / <span id="var_preis_<?php echo $v_id; ?>"><?php echo $v["preis"]; ?></span>
                <?php if (array_key_exists("mod_weight", $this->mods)) { ?>/ <span id="var_weight_<?php echo $v_id; ?>"><?php echo $v["weight"]; ?></span><?php echo $this->data["mod_weight"]["unit"]; ?><?php } ?>
                <?php if (array_key_exists("mod_stock", $this->mods)) { ?><?php echo __("Lagerbestand", "wpsg"); ?>: <span id="var_stock_<?php echo $v_id; ?>"><?php echo $v["stock"]; ?></span><?php } ?>
        </label><br />
        <?php if ($iv == 1) { ?><script type="text/javascript"> switchVari(<?php echo $this->data["p_id"]; ?>, <?php echo $v_id; ?>); </script><?php } ?>
        <?php } ?>
</div>
<?php } ?>

Hier könntest du einen Zähler einbauen, der nach entsprechend vielen Durchläufen ein </div><div class="FloatRightContainer"> einfügt. Reicht dir der Gedankenanstoß, oder soll ich das Beispiel noch ausbauen?

[garnett]

okay, die logik leuchtet ein aber ich bekomme das leider nicht hin da mein wissen mit php recht begrenzt ist.

[maennchen1.de]

ungetestet:
Es wird nach 3 Druchläufen ein zweiter Container angelegt, welchen du nun nur noch die passenden CSS-Eigenschaften geben musst. Hinzugekommen ist hier nur Zeile 4:

Code: Alles auswählen

    <?php if (is_array($this->data["mod_varianten"]) && sizeof($this->data["mod_varianten"]) > 0) { ?>
    <div class="wpshopgermany_vari">
            <?php $iv = 0; foreach ($this->data["mod_varianten"] as $v_id => $v) { $iv ++; ?>
            <?php if ($iv==3) echo '</div><div class="wpshopgermany_vari_float">'; ?>
            <label class="wpsg_vari_label">
                    <input <?php echo (($iv == 1)?"checked='checked'":""); ?> onclick="switchVari(<?php echo $this->data['p_id']; ?>, <?php echo $v_id; ?>);" type="radio" name="vari" value="<?php echo $v_id; ?>" /><?php echo $v["name"]; ?>
                    / <span id="var_preis_<?php echo $v_id; ?>"><?php echo $v["preis"]; ?></span>
                    <?php if (array_key_exists("mod_weight", $this->mods)) { ?>/ <span id="var_weight_<?php echo $v_id; ?>"><?php echo $v["weight"]; ?></span><?php echo $this->data["mod_weight"]["unit"]; ?><?php } ?>
                    <?php if (array_key_exists("mod_stock", $this->mods)) { ?><?php echo __("Lagerbestand", "wpsg"); ?>: <span id="var_stock_<?php echo $v_id; ?>"><?php echo $v["stock"]; ?></span><?php } ?>
            </label><br />
            <?php if ($iv == 1) { ?><script type="text/javascript"> switchVari(<?php echo $this->data["p_id"]; ?>, <?php echo $v_id; ?>); </script><?php } ?>
            <?php } ?>
    </div>
    <?php } ?>

[garnett]

teste es dann mal und gebe feedback

[garnett]

also so richtig will das ganze noch nicht fruchten.

die box wird erzeugt, ich habe den wert noch auf 4 geändert, weil sonst schon nach der zweiten variante die box erstellt wird.
sieht jetzt so aus:

Code: Alles auswählen

...
<?php $iv = 0; foreach ($this->data["mod_varianten"] as $v_id => $v) { $iv ++; ?>
  		<?php if ($iv==4) echo '</div><div class="wpshopgermany_vari_float"></div>'; ?>
  			<label class="wpsg_vari_label">
...

die div-class hab ich gleich mal so benannt gelassen und in der global.css hinzugefügt mit folgenden werten:

Code: Alles auswählen

.wpshopgermany_produkt .wpshopgermany_vari_float {
	padding-left: 15px;
	float: left;
	clear: left;
}

was dabei raus kommt ist folgendes:


die global.css ist noch standard. ich bin nicht gerade der css-freak und kann mir gerade keinen reim darauf machen, woran es liegen könnte.

ideen

[Joe]

hast du mal nen link?
Gruß Joe

[garnett]

leider nein, der shop befindet sich noch auf meiner lokalen testumgebung.

[Joe]

Hab es bei mir gerade mal getestet und noch gepimpt..

Code: Alles auswählen

	  	<?php if (is_array($this->data["mod_varianten"]) && sizeof($this->data["mod_varianten"]) > 0) { ?>
		<div class="wpshopgermany_vari">
  			<?php $iv = 0; foreach ($this->data["mod_varianten"] as $v_id => $v) { $iv ++; ?>
			<?php 
				$mitte = ceil(sizeof($this->data["mod_varianten"])/2)+1;
				if ($iv==$mitte) echo '</div><div class="wpshopgermany_vari_float">'; 
			?>
  			<label class="wpsg_vari_label">
  				<input <?php echo (($iv == 1)?"checked='checked'":""); ?> onclick="switchVari(<?php echo $this->data['p_id']; ?>, <?php echo $v_id; ?>);" type="radio" name="vari" value="<?php echo $v_id; ?>" /><?php echo $v["name"]; ?>
  				/ <span id="var_preis_<?php echo $v_id; ?>"><?php echo $v["preis"]; ?></span>
  				<?php if (array_key_exists("mod_weight", $this->mods)) { ?>/ <span id="var_weight_<?php echo $v_id; ?>"><?php echo $v["weight"]; ?></span><?php echo $this->data["mod_weight"]["unit"]; ?><?php } ?>
  				<?php if (array_key_exists("mod_stock", $this->mods)) { ?><?php echo __("Lagerbestand", "wpsg"); ?>: <span id="var_stock_<?php echo $v_id; ?>"><?php echo $v["stock"]; ?></span><?php } ?>
  			</label><br />
  			<?php if ($iv == 1) { ?><script type="text/javascript"> switchVari(<?php echo $this->data["p_id"]; ?>, <?php echo $v_id; ?>); </script><?php } ?>
			<?php } ?>
		</div>		
		<?php } ?>

neu ist:

Code: Alles auswählen

			<?php 
				$mitte = ceil(sizeof($this->data["mod_varianten"])/2)+1;
				if ($iv==$mitte) echo '</div><div class="wpshopgermany_vari_float">'; 
			?>

dadurch wird automatisch nach der hälfte der varianten (aufgerundet) umgebrochen.

ohne das clear:left; von Roger passt es bei mir:

Code: Alles auswählen

.wpshopgermany_produkt .wpshopgermany_vari_float {
   padding-left: 15px;
   float: left;
 }

Gruß Joe

[garnett]

cool, klingt vielversprechend

ich teste es sobald ich zu hause bin und melde mich dann ;o)

/edit

sehr geil, funktioniert!

ich habe noch ein "padding-top: 33px;" hinzugefügt, um die boxen auf gleiche höhe zu bringen. liegt an der manuellen überschrift "ihre ringgröße".

ich bedanke mich bei euch!
weitermachen!