Read Time:
15 min
Spanish (Español) translation by Elías Nicolás (you can also view the original English article)
Ahora que hemos completado la página principal y la página de categorías, en este tutorial empezaremos a editar la tercera página más importante del sitio web de comercio electrónico: la página del producto. Primero abriremos la página del producto y veremos cómo se ve ahora y cómo queremos que se vea.
La página del producto en nuestro diseño HTML se parece a esto:
Nuestra página actual del producto tiene este aspecto:
Para comenzar a editarlo, haremos el mismo paso que hemos hecho docenas de veces hasta el momento, es decir, permitiendo que las sugerencias de la plantilla determinen qué archivos de plantilla son responsables de procesar esta página.
Como podemos ver, la página es una compilación de más de una docena de archivos, pero afortunadamente no tenemos que editar todos estos. Solo tendremos que editar tres o cuatro de estos archivos, y para el resto simplemente modificaremos los estilos para que se parezcan a nuestro diseño, sin tener que manipular los archivos phtml.
Si observa de cerca, la estructura general de la sección de producto proviene del archivo \ template \ catalog \ product \ view.phtml. Lo he señalado a través de una flecha en la imagen anterior. Este archivo está proporcionando la estructura externa de todos los componentes y luego las partes internas vienen de otras plantillas, pero vamos a editar este externo primero.
Copiamos este archivo view.phtml en nuestro nuevo tema y empezaremos a editarlo. El código actual de este archivo se ve así:
1 |
<?php $_helper = $this->helper('catalog/output'); ?> |
2 |
<?php $_product = $this->getProduct(); ?> |
3 |
<script type="text/javascript"> |
4 |
var optionsPrice = new Product.OptionsPrice(<?php echo $this->getJsonConfig() ?>); |
5 |
</script>
|
6 |
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->toHtml() ?></div> |
7 |
<div class="product-view"> |
8 |
<div class="product-essential"> |
9 |
<form action="<?php echo $this->getSubmitUrl($_product) ?>" method="post" id="product_addtocart_form"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>> |
10 |
<?php echo $this->getBlockHtml('formkey') ?> |
11 |
<div class="no-display"> |
12 |
<input type="hidden" name="product" value="<?php echo $_product->getId() ?>" /> |
13 |
<input type="hidden" name="related_product" id="related-products-field" value="" /> |
14 |
</div>
|
15 |
<div class="product-img-box"> |
16 |
<div class="product-name"> |
17 |
<h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1> |
18 |
</div>
|
19 |
<?php echo $this->getChildHtml('media') ?> |
20 |
</div>
|
21 |
<div class="product-shop"> |
22 |
<div class="product-name"> |
23 |
<span class="h1"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></span> |
24 |
</div>
|
25 |
<div class="price-info"> |
26 |
<?php echo $this->getPriceHtml($_product); ?> |
27 |
<?php echo $this->getChildHtml('bundle_prices') ?> |
28 |
<?php echo $this->getTierPriceHtml() ?> |
29 |
</div>
|
30 |
<div class="extra-info"> |
31 |
<?php echo $this->getReviewsSummaryHtml($_product, 'default', false)?> |
32 |
<?php echo $this->getChildHtml('product_type_availability'); ?> |
33 |
</div>
|
34 |
<?php echo $this->getChildHtml('alert_urls') ?> |
35 |
<?php if ($_product->getShortDescription()):?> |
36 |
<div class="short-description"> |
37 |
<div class="std"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></div> |
38 |
</div>
|
39 |
<?php endif;?> |
40 |
<?php echo $this->getChildHtml('other');?> |
41 |
<?php if ($_product->isSaleable() && $this->hasOptions()):?> |
42 |
<?php echo $this->getChildChildHtml('container1', '', true, true) ?> |
43 |
<?php endif;?> |
44 |
</div>
|
45 |
<div class="add-to-cart-wrapper"> |
46 |
<?php echo $this->getChildHtml('product_type_data') ?> |
47 |
<?php echo $this->getChildHtml('extrahint') ?> |
48 |
<?php if (!$this->hasOptions()):?> |
49 |
<div class="add-to-box"> |
50 |
<?php if($_product->isSaleable()): ?> |
51 |
<?php echo $this->getChildHtml('addtocart') ?> |
52 |
<?php if( $this->helper('wishlist')->isAllow() || $_compareUrl=$this->helper('catalog/product_compare')->getAddUrl($_product)): ?> |
53 |
<span class="or"><?php echo $this->__('OR') ?></span> |
54 |
<?php endif; ?> |
55 |
<?php endif; ?> |
56 |
<?php echo $this->getChildHtml('addto') ?> |
57 |
<?php echo $this->getChildHtml('sharing') ?> |
58 |
</div>
|
59 |
<?php echo $this->getChildHtml('extra_buttons') ?> |
60 |
<?php elseif (!$_product->isSaleable()): ?> |
61 |
<div class="add-to-box"> |
62 |
<?php echo $this->getChildHtml('addto') ?> |
63 |
<?php echo $this->getChildHtml('sharing') ?> |
64 |
</div>
|
65 |
<?php endif; ?> |
66 |
</div>
|
67 |
<?php echo $this->getChildHtml('related_products') ?> |
68 |
<div class="clearer"></div> |
69 |
<?php if ($_product->isSaleable() && $this->hasOptions()):?> |
70 |
<?php echo $this->getChildChildHtml('container2', '', true, true) ?> |
71 |
<?php endif;?> |
72 |
</form>
|
73 |
<script type="text/javascript"> |
74 |
//<![CDATA[ |
75 |
var productAddToCartForm = new VarienForm('product_addtocart_form'); |
76 |
productAddToCartForm.submit = function(button, url) { |
77 |
if (this.validator.validate()) { |
78 |
var form = this.form; |
79 |
var oldUrl = form.action; |
80 |
|
81 |
if (url) { |
82 |
form.action = url; |
83 |
}
|
84 |
var e = null; |
85 |
try { |
86 |
this.form.submit(); |
87 |
} catch (e) { |
88 |
}
|
89 |
this.form.action = oldUrl; |
90 |
if (e) { |
91 |
throw e; |
92 |
}
|
93 |
|
94 |
if (button && button != 'undefined') { |
95 |
button.disabled = true; |
96 |
}
|
97 |
}
|
98 |
}.bind(productAddToCartForm); |
99 |
productAddToCartForm.submitLight = function(button, url){ |
100 |
if(this.validator) { |
101 |
var nv = Validation.methods; |
102 |
delete Validation.methods['required-entry']; |
103 |
delete Validation.methods['validate-one-required']; |
104 |
delete Validation.methods['validate-one-required-by-name']; |
105 |
// Remove custom datetime validators
|
106 |
for (var methodName in Validation.methods) { |
107 |
if (methodName.match(/^validate-datetime-.*/i)) { |
108 |
delete Validation.methods[methodName]; |
109 |
}
|
110 |
}
|
111 |
|
112 |
if (this.validator.validate()) { |
113 |
if (url) { |
114 |
this.form.action = url; |
115 |
}
|
116 |
this.form.submit(); |
117 |
}
|
118 |
Object.extend(Validation.methods, nv); |
119 |
}
|
120 |
}.bind(productAddToCartForm); |
121 |
//]]>
|
122 |
</script>
|
123 |
</div>
|
124 |
<div class="product-collateral toggle-content tabs"> |
125 |
<?php if ($detailedInfoGroup = $this->getChildGroup('detailed_info', 'getChildHtml')):?> |
126 |
<dl id="collateral-tabs" class="collateral-tabs"> |
127 |
<?php foreach ($detailedInfoGroup as $alias => $html):?> |
128 |
<dt class="tab"><span><?php echo $this->escapeHtml($this->getChildData($alias, 'title')) ?></span></dt> |
129 |
<dd class="tab-container"> |
130 |
<div class="tab-content"><?php echo $html ?></div> |
131 |
</dd>
|
132 |
<?php endforeach;?> |
133 |
</dl>
|
134 |
<?php endif; ?> |
135 |
</div>
|
136 |
<?php echo $this->getChildHtml('upsell_products') ?> |
137 |
<?php echo $this->getChildHtml('product_additional_data') ?> |
138 |
</div>
|
Ahora tenemos que revisar nuestro código HTML, y pondremos todo nuestro código HTML en este archivo view.phtml y comenzaremos a editarlo. El código actual del archivo details.html en nuestro archivo de diseño HTML es así (sólo estoy copiando el código de la parte del producto, excluyendo el encabezado, la sección de pie de página, etc.):
1 |
<div class="row"> |
2 |
<div class="col-md-12"> |
3 |
<div class="products-details"> |
4 |
<div class="preview_image"> |
5 |
<div class="preview-small"><img id="zoom_03" src="images/products/medium/products-01.jpg" data-zoom-image="images/products/Large/products-01.jpg" alt=""></div> |
6 |
<div class="thum-image"> |
7 |
<ul id="gallery_01" class="prev-thum"> |
8 |
<li><a href="#" data-image="images/products/medium/products-01.jpg" data-zoom-image="images/products/Large/products-01.jpg"><img src="images/products/thum/products-01.png" alt=""></a></li> |
9 |
<li><a href="#" data-image="images/products/medium/products-02.jpg" data-zoom-image="images/products/Large/products-02.jpg"><img src="images/products/thum/products-02.png" alt=""></a></li> |
10 |
<li><a href="#" data-image="images/products/medium/products-03.jpg" data-zoom-image="images/products/Large/products-03.jpg"><img src="images/products/thum/products-03.png" alt=""></a></li> |
11 |
<li><a href="#" data-image="images/products/medium/products-04.jpg" data-zoom-image="images/products/Large/products-04.jpg"><img src="images/products/thum/products-04.png" alt=""></a></li> |
12 |
<li><a href="#" data-image="images/products/medium/products-05.jpg" data-zoom-image="images/products/Large/products-05.jpg"><img src="images/products/thum/products-05.png" alt=""></a></li> |
13 |
</ul>
|
14 |
<a class="control-left" id="thum-prev" href="javascript:void(0);"><i class="fa fa-chevron-left"></i></a><a class="control-right" id="thum-next" href="javascript:void(0);"><i class="fa fa-chevron-right"></i></a></div> |
15 |
</div>
|
16 |
<div class="products-description"> |
17 |
<h5 class="name">Lincoln Corner Unit Products</h5> |
18 |
<hr class="border"> |
19 |
<div class="price pull-left">Price : <span class="new_price">450.00<sup>$</sup></span><span class="old_price">450.00<sup>$</sup></span></div> |
20 |
<div class="pull-right">sdf;,hkf</div> |
21 |
<div class="clearfix"></div> |
22 |
<hr class="border"> |
23 |
<p>Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrie ces posuere cubilia curae. Proin lectus ipsum, gravida etds mattis vulps utate, tristique ut lectus. Sed et lorem nunc...</p> |
24 |
<div class="row sizeInput"> |
25 |
<div class="col-xs-12 drodpwn"> |
26 |
<h6>asddas</h6> |
27 |
<div class="inline-middle styled-dd"> |
28 |
<select>
|
29 |
<option>Select a Size</option> |
30 |
<option value="Black">Black</option> |
31 |
<option value="Aubergine">Aubergine</option> |
32 |
</select>
|
33 |
</div>
|
34 |
</div>
|
35 |
<div class="space30 visible-xs"></div> |
36 |
<div class="col-xs-12 drodpwn"> |
37 |
<h6>asddas</h6> |
38 |
<div class="inline-middle styled-dd"> |
39 |
<select>
|
40 |
<option>Choose a Material</option> |
41 |
<option value="xs">X-Small</option> |
42 |
<option value="s">Small</option> |
43 |
</select>
|
44 |
</div>
|
45 |
</div>
|
46 |
</div>
|
47 |
<hr class="border"> |
48 |
<div class="wided"> |
49 |
<div class="qty">Qty : |
50 |
<select>
|
51 |
<option>1</option> |
52 |
</select>
|
53 |
</div>
|
54 |
<div class="button_group"> |
55 |
<button class="button" >Add To Cart</button> |
56 |
</div>
|
57 |
</div>
|
58 |
<div class="clearfix"></div> |
59 |
<hr class="border"> |
60 |
<img src="images/share.png" alt="" class="pull-left"></div> |
61 |
</div>
|
62 |
<div class="clearfix"></div> |
63 |
<div class="tab-box"> |
64 |
<div id="tabnav"> |
65 |
<ul>
|
66 |
<li><a href="#Descraption">DESCRIPTION</a></li> |
67 |
<li><a href="#Reviews">REVIEW</a></li> |
68 |
<li><a href="#tags">PRODUCT TAGS</a></li> |
69 |
</ul>
|
70 |
</div>
|
71 |
<div class="tab-content-wrap"> |
72 |
<div class="tab-content" id="Descraption"> |
73 |
<p>Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia curae Aenean eleifend laoreet congue. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibu um ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia curae Aenean eleifend laoreet congue. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia curae Aenean eleifend laoreet congue. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia curae...</p> |
74 |
<p>Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia curae Aenean eleifend laoreet congue. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibu um ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia curae Aenean eleifend laoreet congue. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc...</p> |
75 |
</div>
|
76 |
<div class="tab-content" id="Reviews"> |
77 |
<form>
|
78 |
<table>
|
79 |
<thead>
|
80 |
<tr>
|
81 |
<th> </th> |
82 |
<th>1 star</th> |
83 |
<th>2 stars</th> |
84 |
<th>3 stars</th> |
85 |
<th>4 stars</th> |
86 |
<th>5 stars</th> |
87 |
</tr>
|
88 |
</thead>
|
89 |
<tbody>
|
90 |
<tr>
|
91 |
<td>Quality</td> |
92 |
<td><input type="radio" name="quality" value="Blue"/></td> |
93 |
<td><input type="radio" name="quality" value=""></td> |
94 |
<td><input type="radio" name="quality" value=""></td> |
95 |
<td><input type="radio" name="quality" value=""></td> |
96 |
<td><input type="radio" name="quality" value=""></td> |
97 |
</tr>
|
98 |
<tr>
|
99 |
<td>Price</td> |
100 |
<td><input type="radio" name="price" value=""></td> |
101 |
<td><input type="radio" name="price" value=""></td> |
102 |
<td><input type="radio" name="price" value=""></td> |
103 |
<td><input type="radio" name="price" value=""></td> |
104 |
<td><input type="radio" name="price" value=""></td> |
105 |
</tr>
|
106 |
<tr>
|
107 |
<td>Value</td> |
108 |
<td><input type="radio" name="value" value=""></td> |
109 |
<td><input type="radio" name="value" value=""></td> |
110 |
<td><input type="radio" name="value" value=""></td> |
111 |
<td><input type="radio" name="value" value=""></td> |
112 |
<td><input type="radio" name="value" value=""></td> |
113 |
</tr>
|
114 |
</tbody>
|
115 |
</table>
|
116 |
<div class="row"> |
117 |
<div class="col-md-6 col-sm-6"> |
118 |
<div class="form-row"> |
119 |
<label class="lebel-abs">Your Name <strong class="red">*</strong></label> |
120 |
<input type="text" name="" class="input namefild"> |
121 |
</div>
|
122 |
<div class="form-row"> |
123 |
<label class="lebel-abs">Your Email <strong class="red">*</strong></label> |
124 |
<input type="email" name="" class="input emailfild"> |
125 |
</div>
|
126 |
<div class="form-row"> |
127 |
<label class="lebel-abs">Summary of You Review <strong class="red">*</strong></label> |
128 |
<input type="text" name="" class="input summeryfild"> |
129 |
</div>
|
130 |
</div>
|
131 |
<div class="col-md-6 col-sm-6"> |
132 |
<div class="form-row"> |
133 |
<label class="lebel-abs">Your Name <strong class="red">*</strong></label> |
134 |
<textarea class="input textareafild" name="" rows="7" ></textarea> |
135 |
</div>
|
136 |
<div class="form-row"> |
137 |
<input type="submit" value="Submit" class="button"> |
138 |
</div>
|
139 |
</div>
|
140 |
</div>
|
141 |
</form>
|
142 |
</div>
|
143 |
<div class="tab-content" > |
144 |
<div class="review"> |
145 |
<p class="rating"><i class="fa fa-star light-red"></i><i class="fa fa-star light-red"></i><i class="fa fa-star light-red"></i><i class="fa fa-star-half-o gray"></i><i class="fa fa-star-o gray"></i></p> |
146 |
<h5 class="reviewer">Reviewer name</h5> |
147 |
<p class="review-date">Date: 01-01-2014</p> |
148 |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a eros neque. In sapien est, malesuada non interdum id, cursus vel neque.</p> |
149 |
</div>
|
150 |
<div class="review"> |
151 |
<p class="rating"><i class="fa fa-star light-red"></i><i class="fa fa-star light-red"></i><i class="fa fa-star light-red"></i><i class="fa fa-star-half-o gray"></i><i class="fa fa-star-o gray"></i></p> |
152 |
<h5 class="reviewer">Reviewer name</h5> |
153 |
<p class="review-date">Date: 01-01-2014</p> |
154 |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a eros neque. In sapien est, malesuada non interdum id, cursus vel neque.</p> |
155 |
</div>
|
156 |
</div>
|
157 |
<div class="tab-content" id="tags"> |
158 |
<div class="tag"> Add Tags : |
159 |
<input type="text" name=""> |
160 |
<input type="submit" value="Tag"> |
161 |
</div>
|
162 |
</div>
|
163 |
</div>
|
164 |
</div>
|
165 |
<div class="clearfix"></div> |
166 |
<div id="productsDetails" class="hot-products"> |
167 |
<h3 class="title"><strong>Hot</strong> Products</h3> |
168 |
<div class="control"><a id="prev_hot" class="prev" href="#"><</a><a id="next_hot" class="next" href="#">></a></div> |
169 |
<ul id="hot"> |
170 |
<li>
|
171 |
<div class="row"> |
172 |
<div class="col-md-3 col-sm-4"> |
173 |
<div class="products"> |
174 |
<div class="main"> |
175 |
<div class="view view-eighth"> |
176 |
<img src="images/products/small/products-02.jpg" /> |
177 |
<div class="mask"> |
178 |
<a href="#" class="info">Read More</a> |
179 |
</div>
|
180 |
<div class="productname">Iphone 5s Gold 32 Gb 2013</div> |
181 |
<h4 class="price">$451.00</h4> |
182 |
</div>
|
183 |
</div>
|
184 |
</div>
|
185 |
</div>
|
186 |
<div class="col-md-3 col-sm-4"> |
187 |
<div class="products"> |
188 |
<div class="main"> |
189 |
<div class="view view-eighth"> |
190 |
<img src="images/products/small/products-02.jpg" /> |
191 |
<div class="mask"> |
192 |
<a href="#" class="info">Read More</a> |
193 |
</div>
|
194 |
<div class="productname">Iphone 5s Gold 32 Gb 2013</div> |
195 |
<h4 class="price">$451.00</h4> |
196 |
</div>
|
197 |
</div>
|
198 |
</div>
|
199 |
</div>
|
200 |
<div class="col-md-3 col-sm-4"> |
201 |
<div class="products"> |
202 |
<div class="main"> |
203 |
<div class="view view-eighth"> |
204 |
<img src="images/products/small/products-02.jpg" /> |
205 |
<div class="mask"> |
206 |
<a href="#" class="info">Read More</a> |
207 |
</div>
|
208 |
<div class="productname">Iphone 5s Gold 32 Gb 2013</div> |
209 |
<h4 class="price">$451.00</h4> |
210 |
</div>
|
211 |
</div>
|
212 |
</div>
|
213 |
</div>
|
214 |
<div class="col-md-3 col-sm-4"> |
215 |
<div class="products"> |
216 |
<div class="main"> |
217 |
<div class="view view-eighth"> |
218 |
<img src="images/products/small/products-02.jpg" /> |
219 |
<div class="mask"> |
220 |
<a href="#" class="info">Read More</a> |
221 |
</div>
|
222 |
<div class="productname">Iphone 5s Gold 32 Gb 2013</div> |
223 |
<h4 class="price">$451.00</h4> |
224 |
</div>
|
225 |
</div>
|
226 |
</div>
|
227 |
</div>
|
228 |
</div>
|
229 |
</li>
|
230 |
<li>
|
231 |
<div class="row"> |
232 |
<div class="col-md-4 col-sm-4"> |
233 |
<div class="products"> |
234 |
<div class="offer">- %20</div> |
235 |
<div class="thumbnail"><img src="images/products/small/products-01.png" alt="Product Name"></div> |
236 |
<div class="productname">Iphone 5s Gold 32 Gb 2013</div> |
237 |
<h4 class="price">$451.00</h4> |
238 |
<div class="button_group"> |
239 |
<button class="button add-cart" type="button">Add To Cart</button> |
240 |
</div>
|
241 |
</div>
|
242 |
</div>
|
243 |
<div class="col-md-4 col-sm-4"> |
244 |
<div class="products"> |
245 |
<div class="thumbnail"><img src="images/products/small/products-02.png" alt="Product Name"></div> |
246 |
<div class="productname">Iphone 5s Gold 32 Gb 2013</div> |
247 |
<h4 class="price">$451.00</h4> |
248 |
<div class="button_group"> |
249 |
<button class="button add-cart" type="button">Add To Cart</button> |
250 |
</div>
|
251 |
</div>
|
252 |
</div>
|
253 |
<div class="col-md-4 col-sm-4"> |
254 |
<div class="products"> |
255 |
<div class="offer">New</div> |
256 |
<div class="thumbnail"><img src="images/products/small/products-03.png" alt="Product Name"></div> |
257 |
<div class="productname">Iphone 5s Gold 32 Gb 2013</div> |
258 |
<h4 class="price">$451.00</h4> |
259 |
<div class="button_group"> |
260 |
<button class="button add-cart" type="button">Add To Cart</button> |
261 |
</div>
|
262 |
</div>
|
263 |
</div>
|
264 |
</div>
|
265 |
</li>
|
266 |
<li>
|
267 |
<div class="row"> |
268 |
<div class="col-md-4 col-sm-4"> |
269 |
<div class="products"> |
270 |
<div class="offer">- %20</div> |
271 |
<div class="thumbnail"><img src="images/products/small/products-01.png" alt="Product Name"></div> |
272 |
<div class="productname">Iphone 5s Gold 32 Gb 2013</div> |
273 |
<h4 class="price">$451.00</h4> |
274 |
<div class="button_group"> |
275 |
<button class="button add-cart" type="button">Add To Cart</button> |
276 |
</div>
|
277 |
</div>
|
278 |
</div>
|
279 |
<div class="col-md-4 col-sm-4"> |
280 |
<div class="products"> |
281 |
<div class="thumbnail"><img src="images/products/small/products-02.png" alt="Product Name"></div> |
282 |
<div class="productname">Iphone 5s Gold 32 Gb 2013</div> |
283 |
<h4 class="price">$451.00</h4> |
284 |
<div class="button_group"> |
285 |
<button class="button add-cart" type="button">Add To Cart</button> |
286 |
</div>
|
287 |
</div>
|
288 |
</div>
|
289 |
<div class="col-md-4 col-sm-4"> |
290 |
<div class="products"> |
291 |
<div class="offer">New</div> |
292 |
<div class="thumbnail"><img src="images/products/small/products-03.png" alt="Product Name"></div> |
293 |
<div class="productname">Iphone 5s Gold 32 Gb 2013</div> |
294 |
<h4 class="price">$451.00</h4> |
295 |
<div class="button_group"> |
296 |
<button class="button add-cart" type="button">Add To Cart</button> |
297 |
</div>
|
298 |
</div>
|
299 |
</div>
|
300 |
</div>
|
301 |
</li>
|
302 |
</ul>
|
303 |
</div>
|
304 |
<div class="clearfix"></div> |
305 |
</div>
|
306 |
</div>
|
Sé que es un montón de código, y puede que te asuste. Pero no te preocupes, porque como verás cuando comencemos a colocar las etiquetas dinámicas en él, el código comenzará a fundirse rápidamente, y no tenemos que preocuparnos por la mayoría de ellas.
Ahora empezaremos a editar este código HTML insertando etiquetas
dinámicas de nuestro archivo real view.phtml.
En primer lugar, vamos a añadir estas líneas en la parte superior, para hacer algo de inicialización:
1 |
<?php $_helper = $this->helper('catalog/output'); ?> |
2 |
<?php $_product = $this->getProduct(); ?> |
3 |
<script type="text/javascript"> |
4 |
var optionsPrice = new Product.OptionsPrice(<?php echo $this->getJsonConfig() ?>); |
5 |
</script>
|
6 |
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->toHtml() ?></div> |
7 |
<div class="product-view"> |
A continuación, cierre la div de vista de producto al final del archivo (línea 314):
A
continuación vamos a envolver los detalles del producto div dentro de
un elemento de formulario, ya que está en el archivo view.phtml real.
Así que vamos a añadir estas líneas dentro de la div de
product-details en la línea 10:
1 |
<form action="<?php echo $this->getSubmitUrl($_product) ?>" method="post" id="product_addtocart_form"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>> |
2 |
<?php echo $this->getBlockHtml('formkey') ?> |
3 |
<div class="no-display"> |
4 |
<input type="hidden" name="product" value="<?php echo $_product->getId() ?>" /> |
5 |
<input type="hidden" name="related_product" id="related-products-field" value="" /> |
6 |
</div>
|
Asimismo, cerraremos este formulario form y también copiaremos este JavaScript de view.phtml en la línea 77:
1 |
<div class="clearer"></div> |
2 |
<?php if ($_product->isSaleable() && $this->hasOptions()):?> |
3 |
<?php echo $this->getChildChildHtml('container2', '', true, true) ?> |
4 |
<?php endif;?> |
5 |
</form>
|
6 |
<script type="text/javascript"> |
7 |
//<![CDATA[ |
8 |
var productAddToCartForm = new VarienForm('product_addtocart_form'); |
9 |
productAddToCartForm.submit = function(button, url) { |
10 |
if (this.validator.validate()) { |
11 |
var form = this.form; |
12 |
var oldUrl = form.action; |
13 |
|
14 |
if (url) { |
15 |
form.action = url; |
16 |
}
|
17 |
var e = null; |
18 |
try { |
19 |
this.form.submit(); |
20 |
} catch (e) { |
21 |
}
|
22 |
this.form.action = oldUrl; |
23 |
if (e) { |
24 |
throw e; |
25 |
}
|
26 |
|
27 |
if (button && button != 'undefined') { |
28 |
button.disabled = true; |
29 |
}
|
30 |
}
|
31 |
}.bind(productAddToCartForm); |
32 |
|
33 |
productAddToCartForm.submitLight = function(button, url){ |
34 |
if(this.validator) { |
35 |
var nv = Validation.methods; |
36 |
delete Validation.methods['required-entry']; |
37 |
delete Validation.methods['validate-one-required']; |
38 |
delete Validation.methods['validate-one-required-by-name']; |
39 |
// Remove custom datetime validators
|
40 |
for (var methodName in Validation.methods) { |
41 |
if (methodName.match(/^validate-datetime-.*/i)) { |
42 |
delete Validation.methods[methodName]; |
43 |
}
|
44 |
}
|
45 |
|
46 |
if (this.validator.validate()) { |
47 |
if (url) { |
48 |
this.form.action = url; |
49 |
}
|
50 |
this.form.submit(); |
51 |
}
|
52 |
Object.extend(Validation.methods, nv); |
53 |
}
|
54 |
}.bind(productAddToCartForm); |
55 |
//]]>
|
56 |
</script>
|
En
el paso siguiente, dentro de tab-box div (que comienza en la línea
129), quite todo el código existente y copie el siguiente código de
tabulación de view.phtml (alrededor de 100 líneas de código reemplazadas
por estas pocas líneas). Para asegurarse de que
la pestaña JavaScript sigue funcionando bien, agregamos la división
actual de las tabulaciones tab-box div, por lo que el nuevo código se verá así:
1 |
<div class="tab-box product-collateral toggle-content tabs"> |
2 |
<?php if ($detailedInfoGroup = $this->getChildGroup('detailed_info', 'getChildHtml')):?> |
3 |
<dl id="collateral-tabs" class="collateral-tabs"> |
4 |
<?php foreach ($detailedInfoGroup as $alias => $html):?> |
5 |
<dt class="tab"><span><?php echo $this->escapeHtml($this->getChildData($alias, 'title')) ?></span></dt> |
6 |
<dd class="tab-container"> |
7 |
<div class="tab-content"><?php echo $html ?></div> |
8 |
</dd>
|
9 |
<?php endforeach;?> |
10 |
</dl>
|
11 |
<?php endif; ?> |
12 |
</div>
|
Con
todo lo hecho, ahora insertaremos la etiqueta <?php echo $this->getChildHtml('related_products') ?> Dentro de la div de
hot-products, después de eliminar el código existente, para que se vea
así en la línea 166:
1 |
<div id="productsDetails" class="hot-products"> |
2 |
<?php echo $this->getChildHtml('related_products') ?> |
3 |
</div>
|
Vea cómo alrededor de 150 líneas de código se reemplaza con sólo estas tres líneas? Vamos a guardar todo y ver cómo la página está llegando hasta ahora. Si lo hiciste bien, debería ser algo como esto:
Podría parecer un desastre, pero confía en mí, nos estamos acercando a lo que queremos que se vea la página. En el siguiente artículo, editaremos los archivos responsables de procesar la sección de imágenes, productos relacionados, etc., y finalmente haremos algunos arreglos de estilo y nuestra página de producto estará lista.
Al final, permítanme reiterar que los grandes trozos de código mostrados anteriormente podrían intimidarle al principio, pero una vez que empiece a reemplazar el código con las etiquetas dinámicas adecuadas, pronto se dará cuenta de que la edición de estos no es mucho trabajo.
En el siguiente artículo, completaremos el resto de esta página editando otros archivos phtml.
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Sign up
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.
